This commit is contained in:
syuilo 2021-02-20 11:05:46 +09:00
parent 8bd80eb2a6
commit 7eb6038f92
1 changed files with 24 additions and 8 deletions

View File

@ -5,19 +5,19 @@
<div class="values"> <div class="values">
<div> <div>
<div>Process</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> <div>
<div>Active</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> <div>
<div>Delayed</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> <div>
<div>Waiting</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> </div>
</div> </div>
@ -26,19 +26,19 @@
<div class="values"> <div class="values">
<div> <div>
<div>Process</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> <div>
<div>Active</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> <div>
<div>Delayed</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> <div>
<div>Waiting</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> </div>
</div> </div>
@ -79,10 +79,15 @@ export default defineComponent({
waiting: 0, waiting: 0,
delayed: 0, delayed: 0,
}, },
prev: {},
faExclamationTriangle, faExclamationTriangle,
}; };
}, },
created() { 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('stats', this.onStats);
this.connection.on('statsLog', this.onStatsLog); this.connection.on('statsLog', this.onStatsLog);
@ -99,6 +104,7 @@ export default defineComponent({
methods: { methods: {
onStats(stats) { onStats(stats) {
for (const domain of ['inbox', 'deliver']) { for (const domain of ['inbox', 'deliver']) {
this.prev[domain] = JSON.parse(JSON.stringify(this[domain]));
this[domain].activeSincePrevTick = stats[domain].activeSincePrevTick; this[domain].activeSincePrevTick = stats[domain].activeSincePrevTick;
this[domain].active = stats[domain].active; this[domain].active = stats[domain].active;
this[domain].waiting = stats[domain].waiting; this[domain].waiting = stats[domain].waiting;
@ -152,6 +158,16 @@ export default defineComponent({
> div:first-child { > div:first-child {
opacity: 0.7; opacity: 0.7;
} }
> div:last-child {
&.inc {
color: var(--warn);
}
&.dec {
color: var(--success);
}
}
} }
} }
} }