diff options
| author | syuilo <syuilotan@yahoo.co.jp> | 2021-02-20 11:05:46 +0900 |
|---|---|---|
| committer | syuilo <syuilotan@yahoo.co.jp> | 2021-02-20 11:05:46 +0900 |
| commit | 7eb6038f9291bfb88c989d53454796d7abc1b6ea (patch) | |
| tree | f65532f2348d986b4dd93e7c15c93fabb650f3cb /src | |
| parent | 12.70.0 (diff) | |
| download | sharkey-7eb6038f9291bfb88c989d53454796d7abc1b6ea.tar.gz sharkey-7eb6038f9291bfb88c989d53454796d7abc1b6ea.tar.bz2 sharkey-7eb6038f9291bfb88c989d53454796d7abc1b6ea.zip | |
:art:
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/widgets/job-queue.vue | 32 |
1 files changed, 24 insertions, 8 deletions
diff --git a/src/client/widgets/job-queue.vue b/src/client/widgets/job-queue.vue index 11bb20979b..b7bfb6de27 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); + } + } } } } |