From 2e5be7a7f083c1f1fa0037db31520712a1ddcc5d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 27 May 2019 17:44:51 +0900
Subject: [PATCH] Improve job queue view

---
 locales/ja-JP.yml                             |  7 ++++-
 src/client/app/admin/views/queue.chart.vue    |  2 +-
 src/client/app/admin/views/queue.vue          | 30 +++++++++++++++----
 .../app/common/views/components/ui/input.vue  | 26 ++++++++++------
 src/server/api/endpoints/admin/queue/stats.ts |  8 +++--
 5 files changed, 54 insertions(+), 19 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 493875af6..52f1e2901 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1245,10 +1245,15 @@ admin/views/queue.vue:
   domains:
     deliver: "配送"
     inbox: "受信"
+    db: "データベース"
+    objectStorage: "オブジェクトストレージ"
   state: "状態"
   states:
-    delayed: "遅延"
+    active: "処理中"
+    delayed: "予約済み"
+    waiting: "順番待ち"
   result-is-truncated: "結果は省略されています"
+  other-queues: "その他のキュー"
 
 admin/views/logs.vue:
   logs: "ログ"
diff --git a/src/client/app/admin/views/queue.chart.vue b/src/client/app/admin/views/queue.chart.vue
index c3d68d75a..ff29aa839 100644
--- a/src/client/app/admin/views/queue.chart.vue
+++ b/src/client/app/admin/views/queue.chart.vue
@@ -176,6 +176,6 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .wptihjuy
 	min-height 200px !important
-	margin 0 -8px -8px -8px
+	margin -8px
 
 </style>
diff --git a/src/client/app/admin/views/queue.vue b/src/client/app/admin/views/queue.vue
index 358ed6cf7..43a41ffbe 100644
--- a/src/client/app/admin/views/queue.vue
+++ b/src/client/app/admin/views/queue.vue
@@ -2,14 +2,28 @@
 <div>
 	<ui-card>
 		<template #title><fa :icon="faChartBar"/> {{ $t('title') }}</template>
-		<section class="wptihjuy">
-			<header><fa :icon="faPaperPlane"/> Deliver</header>
+		<section>
+			<header><fa :icon="faPaperPlane"/> {{ $t('domains.deliver') }}</header>
 			<x-chart v-if="connection" :connection="connection" :limit="chartLimit" type="deliver"/>
 		</section>
-		<section class="wptihjuy">
-			<header><fa :icon="faInbox"/> Inbox</header>
+		<section>
+			<header><fa :icon="faInbox"/> {{ $t('domains.inbox') }}</header>
 			<x-chart v-if="connection" :connection="connection" :limit="chartLimit" type="inbox"/>
 		</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>
 			<ui-button @click="removeAllJobs">{{ $t('remove-all-jobs') }}</ui-button>
 		</section>
@@ -23,9 +37,13 @@
 					<template #label>{{ $t('queue') }}</template>
 					<option value="deliver">{{ $t('domains.deliver') }}</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 v-model="state">
 					<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>
 				</ui-select>
 			</ui-horizon-group>
@@ -48,7 +66,7 @@
 
 <script lang="ts">
 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 i18n from '../../i18n';
 import XChart from './queue.chart.vue';
@@ -68,7 +86,7 @@ export default Vue.extend({
 			jobsLimit: 50,
 			domain: 'deliver',
 			state: 'delayed',
-			faTasks, faPaperPlane, faInbox, faChartBar
+			faTasks, faPaperPlane, faInbox, faChartBar, faDatabase, faCloud
 		};
 	},
 
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index dd0912f83..e266e141e 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -210,17 +210,25 @@ export default Vue.extend({
 		}
 
 		this.$nextTick(() => {
-			if (this.$refs.prefix) {
-				this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
-				if (this.$refs.prefix.offsetWidth) {
-					this.$refs.input.style.paddingLeft = this.$refs.prefix.offsetWidth + 'px';
+			// このコンポーネントが作成された時、非表示状態である場合がある
+			// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
+			const clock = setInterval(() => {
+				if (this.$refs.prefix) {
+					this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
+					if (this.$refs.prefix.offsetWidth) {
+						this.$refs.input.style.paddingLeft = this.$refs.prefix.offsetWidth + 'px';
+					}
 				}
-			}
-			if (this.$refs.suffix) {
-				if (this.$refs.suffix.offsetWidth) {
-					this.$refs.input.style.paddingRight = this.$refs.suffix.offsetWidth + 'px';
+				if (this.$refs.suffix) {
+					if (this.$refs.suffix.offsetWidth) {
+						this.$refs.input.style.paddingRight = this.$refs.suffix.offsetWidth + 'px';
+					}
 				}
-			}
+			}, 100);
+
+			this.$once('hook:beforeDestroy', () => {
+				clearInterval(clock);
+			});
 		});
 
 		this.$on('keydown', (e: KeyboardEvent) => {
diff --git a/src/server/api/endpoints/admin/queue/stats.ts b/src/server/api/endpoints/admin/queue/stats.ts
index baeecba30..83684685f 100644
--- a/src/server/api/endpoints/admin/queue/stats.ts
+++ b/src/server/api/endpoints/admin/queue/stats.ts
@@ -1,5 +1,5 @@
 import define from '../../../define';
-import { deliverQueue, inboxQueue } from '../../../../../queue';
+import { deliverQueue, inboxQueue, dbQueue, objectStorageQueue } from '../../../../../queue';
 
 export const meta = {
 	tags: ['admin'],
@@ -13,9 +13,13 @@ export const meta = {
 export default define(meta, async (ps) => {
 	const deliverJobCounts = await deliverQueue.getJobCounts();
 	const inboxJobCounts = await inboxQueue.getJobCounts();
+	const dbJobCounts = await dbQueue.getJobCounts();
+	const objectStorageJobCounts = await objectStorageQueue.getJobCounts();
 
 	return {
 		deliver: deliverJobCounts,
-		inbox: inboxJobCounts
+		inbox: inboxJobCounts,
+		db: dbJobCounts,
+		objectStorage: objectStorageJobCounts,
 	};
 });