🎨
This commit is contained in:
parent
8bd80eb2a6
commit
7eb6038f92
1 changed files with 24 additions and 8 deletions
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue