Improve job queue view

This commit is contained in:
syuilo 2019-05-27 17:44:51 +09:00
parent 85d8e6f220
commit 5dbe1d448b
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
5 changed files with 54 additions and 19 deletions

View file

@ -1245,10 +1245,15 @@ admin/views/queue.vue:
domains: domains:
deliver: "配送" deliver: "配送"
inbox: "受信" inbox: "受信"
db: "データベース"
objectStorage: "オブジェクトストレージ"
state: "状態" state: "状態"
states: states:
delayed: "遅延" active: "処理中"
delayed: "予約済み"
waiting: "順番待ち"
result-is-truncated: "結果は省略されています" result-is-truncated: "結果は省略されています"
other-queues: "その他のキュー"
admin/views/logs.vue: admin/views/logs.vue:
logs: "ログ" logs: "ログ"

View file

@ -176,6 +176,6 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.wptihjuy .wptihjuy
min-height 200px !important min-height 200px !important
margin 0 -8px -8px -8px margin -8px
</style> </style>

View file

@ -2,14 +2,28 @@
<div> <div>
<ui-card> <ui-card>
<template #title><fa :icon="faChartBar"/> {{ $t('title') }}</template> <template #title><fa :icon="faChartBar"/> {{ $t('title') }}</template>
<section class="wptihjuy"> <section>
<header><fa :icon="faPaperPlane"/> Deliver</header> <header><fa :icon="faPaperPlane"/> {{ $t('domains.deliver') }}</header>
<x-chart v-if="connection" :connection="connection" :limit="chartLimit" type="deliver"/> <x-chart v-if="connection" :connection="connection" :limit="chartLimit" type="deliver"/>
</section> </section>
<section class="wptihjuy"> <section>
<header><fa :icon="faInbox"/> Inbox</header> <header><fa :icon="faInbox"/> {{ $t('domains.inbox') }}</header>
<x-chart v-if="connection" :connection="connection" :limit="chartLimit" type="inbox"/> <x-chart v-if="connection" :connection="connection" :limit="chartLimit" type="inbox"/>
</section> </section>
<section>
<details>
<summary>{{ $t('other-queues') }}</summary>
<section>
<header><fa :icon="faDatabase"/> {{ $t('domains.db') }}</header>
<x-chart v-if="connection" :connection="connection" :limit="chartLimit" type="db"/>
</section>
<ui-hr/>
<section>
<header><fa :icon="faCloud"/> {{ $t('domains.objectStorage') }}</header>
<x-chart v-if="connection" :connection="connection" :limit="chartLimit" type="objectStorage"/>
</section>
</details>
</section>
<section> <section>
<ui-button @click="removeAllJobs">{{ $t('remove-all-jobs') }}</ui-button> <ui-button @click="removeAllJobs">{{ $t('remove-all-jobs') }}</ui-button>
</section> </section>
@ -23,9 +37,13 @@
<template #label>{{ $t('queue') }}</template> <template #label>{{ $t('queue') }}</template>
<option value="deliver">{{ $t('domains.deliver') }}</option> <option value="deliver">{{ $t('domains.deliver') }}</option>
<option value="inbox">{{ $t('domains.inbox') }}</option> <option value="inbox">{{ $t('domains.inbox') }}</option>
<option value="db">{{ $t('domains.db') }}</option>
<option value="objectStorage">{{ $t('domains.objectStorage') }}</option>
</ui-select> </ui-select>
<ui-select v-model="state"> <ui-select v-model="state">
<template #label>{{ $t('state') }}</template> <template #label>{{ $t('state') }}</template>
<option value="active">{{ $t('states.active') }}</option>
<option value="waiting">{{ $t('states.waiting') }}</option>
<option value="delayed">{{ $t('states.delayed') }}</option> <option value="delayed">{{ $t('states.delayed') }}</option>
</ui-select> </ui-select>
</ui-horizon-group> </ui-horizon-group>
@ -48,7 +66,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { faTasks, faInbox } from '@fortawesome/free-solid-svg-icons'; import { faTasks, faInbox, faDatabase, faCloud } from '@fortawesome/free-solid-svg-icons';
import { faPaperPlane, faChartBar } from '@fortawesome/free-regular-svg-icons'; import { faPaperPlane, faChartBar } from '@fortawesome/free-regular-svg-icons';
import i18n from '../../i18n'; import i18n from '../../i18n';
import XChart from './queue.chart.vue'; import XChart from './queue.chart.vue';
@ -68,7 +86,7 @@ export default Vue.extend({
jobsLimit: 50, jobsLimit: 50,
domain: 'deliver', domain: 'deliver',
state: 'delayed', state: 'delayed',
faTasks, faPaperPlane, faInbox, faChartBar faTasks, faPaperPlane, faInbox, faChartBar, faDatabase, faCloud
}; };
}, },

View file

@ -210,6 +210,9 @@ export default Vue.extend({
} }
this.$nextTick(() => { this.$nextTick(() => {
//
// 0
const clock = setInterval(() => {
if (this.$refs.prefix) { if (this.$refs.prefix) {
this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px'; this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
if (this.$refs.prefix.offsetWidth) { if (this.$refs.prefix.offsetWidth) {
@ -221,6 +224,11 @@ export default Vue.extend({
this.$refs.input.style.paddingRight = this.$refs.suffix.offsetWidth + 'px'; this.$refs.input.style.paddingRight = this.$refs.suffix.offsetWidth + 'px';
} }
} }
}, 100);
this.$once('hook:beforeDestroy', () => {
clearInterval(clock);
});
}); });
this.$on('keydown', (e: KeyboardEvent) => { this.$on('keydown', (e: KeyboardEvent) => {

View file

@ -1,5 +1,5 @@
import define from '../../../define'; import define from '../../../define';
import { deliverQueue, inboxQueue } from '../../../../../queue'; import { deliverQueue, inboxQueue, dbQueue, objectStorageQueue } from '../../../../../queue';
export const meta = { export const meta = {
tags: ['admin'], tags: ['admin'],
@ -13,9 +13,13 @@ export const meta = {
export default define(meta, async (ps) => { export default define(meta, async (ps) => {
const deliverJobCounts = await deliverQueue.getJobCounts(); const deliverJobCounts = await deliverQueue.getJobCounts();
const inboxJobCounts = await inboxQueue.getJobCounts(); const inboxJobCounts = await inboxQueue.getJobCounts();
const dbJobCounts = await dbQueue.getJobCounts();
const objectStorageJobCounts = await objectStorageQueue.getJobCounts();
return { return {
deliver: deliverJobCounts, deliver: deliverJobCounts,
inbox: inboxJobCounts inbox: inboxJobCounts,
db: dbJobCounts,
objectStorage: objectStorageJobCounts,
}; };
}); });