ジョブを一覧できるように

This commit is contained in:
syuilo 2019-03-15 13:48:17 +09:00
parent c883ae1350
commit 6bb90f56fa
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
2 changed files with 104 additions and 5 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<ui-card> <ui-card>
<template #title><fa :icon="faTasks"/> {{ $t('title') }}</template> <template #title><fa :icon="faChartBar"/> {{ $t('title') }}</template>
<section class="wptihjuy"> <section class="wptihjuy">
<header><fa :icon="faPaperPlane"/> Deliver</header> <header><fa :icon="faPaperPlane"/> Deliver</header>
<ui-info warn v-if="latestStats && latestStats.deliver.waiting > 0">The queue is jammed.</ui-info> <ui-info warn v-if="latestStats && latestStats.deliver.waiting > 0">The queue is jammed.</ui-info>
@ -60,6 +60,35 @@
<ui-button @click="removeAllJobs">{{ $t('remove-all-jobs') }}</ui-button> <ui-button @click="removeAllJobs">{{ $t('remove-all-jobs') }}</ui-button>
</section> </section>
</ui-card> </ui-card>
<ui-card>
<template #title><fa :icon="faTasks"/> {{ $t('jobs') }}</template>
<section class="fit-top">
<ui-horizon-group inputs>
<ui-select v-model="domain">
<template #label>{{ $t('queue') }}</template>
<option value="deliver">{{ $t('domains.deliver') }}</option>
<option value="inbox">{{ $t('domains.inbox') }}</option>
</ui-select>
<ui-select v-model="state">
<template #label>{{ $t('state') }}</template>
<option value="delayed">{{ $t('states.delayed') }}</option>
</ui-select>
</ui-horizon-group>
<sequential-entrance animation="entranceFromTop" delay="25">
<div class="xvvuvgsv" v-for="job in jobs">
<b>{{ job.id }}</b>
<template v-if="domain === 'deliver'">
<span>{{ job.data.to }}</span>
</template>
<template v-if="domain === 'inbox'">
<span>{{ job.activity.id }}</span>
</template>
</div>
</sequential-entrance>
<ui-info v-if="jobs.length == jobsLimit">{{ $t('result-is-truncated', { n: jobsLimit }) }}</ui-info>
</section>
</ui-card>
</div> </div>
</template> </template>
@ -69,7 +98,7 @@ import i18n from '../../i18n';
import ApexCharts from 'apexcharts'; import ApexCharts from 'apexcharts';
import * as tinycolor from 'tinycolor2'; import * as tinycolor from 'tinycolor2';
import { faTasks, faInbox, faStopwatch, faPlayCircle as fasPlayCircle } from '@fortawesome/free-solid-svg-icons'; import { faTasks, faInbox, faStopwatch, faPlayCircle as fasPlayCircle } from '@fortawesome/free-solid-svg-icons';
import { faPaperPlane, faStopCircle, faPlayCircle as farPlayCircle } from '@fortawesome/free-regular-svg-icons'; import { faPaperPlane, faStopCircle, faPlayCircle as farPlayCircle, faChartBar } from '@fortawesome/free-regular-svg-icons';
const limit = 150; const limit = 150;
@ -81,7 +110,11 @@ export default Vue.extend({
stats: [], stats: [],
deliverChart: null, deliverChart: null,
inboxChart: null, inboxChart: null,
faTasks, faPaperPlane, faInbox, faStopwatch, faStopCircle, farPlayCircle, fasPlayCircle jobs: [],
jobsLimit: 50,
domain: 'deliver',
state: 'delayed',
faTasks, faPaperPlane, faInbox, faStopwatch, faStopCircle, farPlayCircle, fasPlayCircle, faChartBar
}; };
}, },
@ -127,10 +160,22 @@ export default Vue.extend({
type: 'line', type: 'line',
data: stats.map((x, i) => ({ x: i, y: x.deliver.delayed })) data: stats.map((x, i) => ({ x: i, y: x.deliver.delayed }))
}]); }]);
} },
domain() {
this.jobs = [];
this.fetchJobs();
},
state() {
this.jobs = [];
this.fetchJobs();
},
}, },
mounted() { mounted() {
this.fetchJobs();
const chartOpts = id => ({ const chartOpts = id => ({
chart: { chart: {
id, id,
@ -238,7 +283,17 @@ export default Vue.extend({
for (const stats of statsLog.reverse()) { for (const stats of statsLog.reverse()) {
this.onStats(stats); this.onStats(stats);
} }
} },
fetchJobs() {
this.$root.api('admin/queue/jobs', {
domain: this.domain,
state: this.state,
limit: this.jobsLimit
}).then(jobs => {
this.jobs = jobs;
});
},
} }
}); });
</script> </script>
@ -249,4 +304,8 @@ export default Vue.extend({
min-height 200px !important min-height 200px !important
margin 0 -8px margin 0 -8px
.xvvuvgsv
> b
margin-right 16px
</style> </style>

View File

@ -0,0 +1,40 @@
import $ from 'cafy';
import define from '../../../define';
import { deliverQueue, inboxQueue } from '../../../../../queue';
export const meta = {
tags: ['admin'],
requireCredential: true,
requireModerator: true,
params: {
domain: {
validator: $.str,
},
state: {
validator: $.str,
},
limit: {
validator: $.optional.num,
default: 50
},
}
};
export default define(meta, async (ps) => {
const queue =
ps.domain === 'deliver' ? deliverQueue :
ps.domain === 'inbox' ? inboxQueue :
null;
const jobs = await queue.getJobs([ps.state], 0, ps.limit);
return jobs.map(job => ({
id: job.id,
data: job.data,
attempts: job.attemptsMade,
}));
});