From 7eb6038f9291bfb88c989d53454796d7abc1b6ea Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 20 Feb 2021 11:05:46 +0900
Subject: [PATCH] :art:

---
 src/client/widgets/job-queue.vue | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/client/widgets/job-queue.vue b/src/client/widgets/job-queue.vue
index 11bb20979..b7bfb6de2 100644
--- a/src/client/widgets/job-queue.vue
+++ b/src/client/widgets/job-queue.vue
@@ -5,19 +5,19 @@
 		<div class="values">
 			<div>
 				<div>Process</div>
-				<div>{{ number(inbox.activeSincePrevTick) }}</div>
+				<div :class="{ inc: inbox.activeSincePrevTick > prev.inbox.activeSincePrevTick, dec: inbox.activeSincePrevTick < prev.inbox.activeSincePrevTick }">{{ number(inbox.activeSincePrevTick) }}</div>
 			</div>
 			<div>
 				<div>Active</div>
-				<div>{{ number(inbox.active) }}</div>
+				<div :class="{ inc: inbox.active > prev.inbox.active, dec: inbox.active < prev.inbox.active }">{{ number(inbox.active) }}</div>
 			</div>
 			<div>
 				<div>Delayed</div>
-				<div>{{ number(inbox.delayed) }}</div>
+				<div :class="{ inc: inbox.delayed > prev.inbox.delayed, dec: inbox.delayed < prev.inbox.delayed }">{{ number(inbox.delayed) }}</div>
 			</div>
 			<div>
 				<div>Waiting</div>
-				<div>{{ number(inbox.waiting) }}</div>
+				<div :class="{ inc: inbox.waiting > prev.inbox.waiting, dec: inbox.waiting < prev.inbox.waiting }">{{ number(inbox.waiting) }}</div>
 			</div>
 		</div>
 	</div>
@@ -26,19 +26,19 @@
 		<div class="values">
 			<div>
 				<div>Process</div>
-				<div>{{ number(deliver.activeSincePrevTick) }}</div>
+				<div :class="{ inc: deliver.activeSincePrevTick > prev.deliver.activeSincePrevTick, dec: deliver.activeSincePrevTick < prev.deliver.activeSincePrevTick }">{{ number(deliver.activeSincePrevTick) }}</div>
 			</div>
 			<div>
 				<div>Active</div>
-				<div>{{ number(deliver.active) }}</div>
+				<div :class="{ inc: deliver.active > prev.deliver.active, dec: deliver.active < prev.deliver.active }">{{ number(deliver.active) }}</div>
 			</div>
 			<div>
 				<div>Delayed</div>
-				<div>{{ number(deliver.delayed) }}</div>
+				<div :class="{ inc: deliver.delayed > prev.deliver.delayed, dec: deliver.delayed < prev.deliver.delayed }">{{ number(deliver.delayed) }}</div>
 			</div>
 			<div>
 				<div>Waiting</div>
-				<div>{{ number(deliver.waiting) }}</div>
+				<div :class="{ inc: deliver.waiting > prev.deliver.waiting, dec: deliver.waiting < prev.deliver.waiting }">{{ number(deliver.waiting) }}</div>
 			</div>
 		</div>
 	</div>
@@ -79,10 +79,15 @@ export default defineComponent({
 				waiting: 0,
 				delayed: 0,
 			},
+			prev: {},
 			faExclamationTriangle,
 		};
 	},
 	created() {
+		for (const domain of ['inbox', 'deliver']) {
+			this.prev[domain] = JSON.parse(JSON.stringify(this[domain]));
+		}
+	
 		this.connection.on('stats', this.onStats);
 		this.connection.on('statsLog', this.onStatsLog);
 
@@ -99,6 +104,7 @@ export default defineComponent({
 	methods: {
 		onStats(stats) {
 			for (const domain of ['inbox', 'deliver']) {
+				this.prev[domain] = JSON.parse(JSON.stringify(this[domain]));
 				this[domain].activeSincePrevTick = stats[domain].activeSincePrevTick;
 				this[domain].active = stats[domain].active;
 				this[domain].waiting = stats[domain].waiting;
@@ -152,6 +158,16 @@ export default defineComponent({
 				> div:first-child {
 					opacity: 0.7;
 				}
+
+				> div:last-child {
+					&.inc {
+						color: var(--warn);
+					}
+
+					&.dec {
+						color: var(--success);
+					}
+				}
 			}
 		}
 	}