From 8f2cf066b696cfc7251d9aaee1757d13ec39d862 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 4 Jan 2021 17:36:50 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=B8=E3=83=A7=E3=83=96=E3=82=AD=E3=83=A5?=
 =?UTF-8?q?=E3=83=BC=E3=82=A6=E3=82=A3=E3=82=B8=E3=82=A7=E3=83=83=E3=83=88?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                |   1 +
 src/client/widgets/index.ts      |   2 +
 src/client/widgets/job-queue.vue | 158 +++++++++++++++++++++++++++++++
 3 files changed, 161 insertions(+)
 create mode 100644 src/client/widgets/job-queue.vue

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 51f8672ba..7e9b7ab4d 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1030,6 +1030,7 @@ _widgets:
   slideshow: "スライドショー"
   button: "ボタン"
   onlineUsers: "オンラインユーザー"
+  jobQueue: "ジョブキュー"
   serverMetric: "サーバーメトリクス"
 
 _cw:
diff --git a/src/client/widgets/index.ts b/src/client/widgets/index.ts
index 8e9232cd9..0c7e82430 100644
--- a/src/client/widgets/index.ts
+++ b/src/client/widgets/index.ts
@@ -16,6 +16,7 @@ export default function(app: App) {
 	app.component('MkwSlideshow', defineAsyncComponent(() => import('./slideshow.vue')));
 	app.component('MkwServerMetric', defineAsyncComponent(() => import('./server-metric/index.vue')));
 	app.component('MkwOnlineUsers', defineAsyncComponent(() => import('./online-users.vue')));
+	app.component('MkwJobQueue', defineAsyncComponent(() => import('./job-queue.vue')));
 	app.component('MkwButton', defineAsyncComponent(() => import('./button.vue')));
 }
 
@@ -35,5 +36,6 @@ export const widgets = [
 	'slideshow',
 	'serverMetric',
 	'onlineUsers',
+	'jobQueue',
 	'button',
 ];
diff --git a/src/client/widgets/job-queue.vue b/src/client/widgets/job-queue.vue
new file mode 100644
index 000000000..8aad00a9c
--- /dev/null
+++ b/src/client/widgets/job-queue.vue
@@ -0,0 +1,158 @@
+<template>
+<div class="mkw-jobQueue _monospace" :class="{ _panel: !props.transparent }">
+	<div class="inbox">
+		<div class="label">Inbox queue<Fa :icon="faExclamationTriangle" v-if="inbox.waiting > 0" class="icon"/></div>
+		<div class="values">
+			<div>
+				<div>Process</div>
+				<div>{{ number(inbox.activeSincePrevTick) }}</div>
+			</div>
+			<div>
+				<div>Active</div>
+				<div>{{ number(inbox.active) }}</div>
+			</div>
+			<div>
+				<div>Delayed</div>
+				<div>{{ number(inbox.delayed) }}</div>
+			</div>
+			<div>
+				<div>Waiting</div>
+				<div>{{ number(inbox.waiting) }}</div>
+			</div>
+		</div>
+	</div>
+	<div class="deliver">
+		<div class="label">Deliver queue<Fa :icon="faExclamationTriangle" v-if="inbox.waiting > 0" class="icon"/></div>
+		<div class="values">
+			<div>
+				<div>Process</div>
+				<div>{{ number(deliver.activeSincePrevTick) }}</div>
+			</div>
+			<div>
+				<div>Active</div>
+				<div>{{ number(deliver.active) }}</div>
+			</div>
+			<div>
+				<div>Delayed</div>
+				<div>{{ number(deliver.delayed) }}</div>
+			</div>
+			<div>
+				<div>Waiting</div>
+				<div>{{ number(deliver.waiting) }}</div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import define from './define';
+import * as os from '@/os';
+import number from '@/filters/number';
+
+const widget = define({
+	name: 'jobQueue',
+	props: () => ({
+		transparent: {
+			type: 'boolean',
+			default: false,
+		},
+	})
+});
+
+export default defineComponent({
+	extends: widget,
+	data() {
+		return {
+			connection: os.stream.useSharedConnection('queueStats'),
+			inbox: {
+				activeSincePrevTick: 0,
+				active: 0,
+				waiting: 0,
+				delayed: 0,
+			},
+			deliver: {
+				activeSincePrevTick: 0,
+				active: 0,
+				waiting: 0,
+				delayed: 0,
+			},
+			faExclamationTriangle,
+		};
+	},
+	created() {
+		this.connection.on('stats', this.onStats);
+		this.connection.on('statsLog', this.onStatsLog);
+
+		this.connection.send('requestLog', {
+			id: Math.random().toString().substr(2, 8),
+			length: 1
+		});
+	},
+	beforeUnmount() {
+		this.connection.off('stats', this.onStats);
+		this.connection.off('statsLog', this.onStatsLog);
+		this.connection.dispose();
+	},
+	methods: {
+		onStats(stats) {
+			for (const domain of ['inbox', 'deliver']) {
+				this[domain].activeSincePrevTick = stats[domain].activeSincePrevTick;
+				this[domain].active = stats[domain].active;
+				this[domain].waiting = stats[domain].waiting;
+				this[domain].delayed = stats[domain].delayed;
+			}
+		},
+
+		onStatsLog(statsLog) {
+			for (const stats of [...statsLog].reverse()) {
+				this.onStats(stats);
+			}
+		},
+
+		number
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+@keyframes warnBlink {
+	0% { opacity: 1; }
+	50% { opacity: 0; }
+}
+
+.mkw-jobQueue {
+	> div {
+		padding: 16px;
+
+		&:not(:first-child) {
+			border-top: solid 1px var(--divider);
+		}
+
+		> .label {
+			display: flex;
+
+			> .icon {
+				color: var(--warn);
+				margin-left: auto;
+				animation: warnBlink 1s infinite;
+			}
+		}
+
+		> .values {
+			display: flex;
+
+			> div {
+				flex: 1;
+
+				> div:first-child {
+					opacity: 0.7;
+					font-size: 0.9em;
+				}
+			}
+		}
+	}
+}
+</style>