Better queue chart
This commit is contained in:
parent
bf5d43054b
commit
09e25e6a02
2 changed files with 9 additions and 7 deletions
|
@ -9,7 +9,7 @@
|
||||||
<ui-input :value="latestStats.deliver.activeSincePrevTick | number" type="text" readonly>
|
<ui-input :value="latestStats.deliver.activeSincePrevTick | number" type="text" readonly>
|
||||||
<span>Process</span>
|
<span>Process</span>
|
||||||
<template #prefix><fa :icon="fasPlayCircle"/></template>
|
<template #prefix><fa :icon="fasPlayCircle"/></template>
|
||||||
<template #suffix>jobs/s</template>
|
<template #suffix>jobs/tick</template>
|
||||||
</ui-input>
|
</ui-input>
|
||||||
<ui-input :value="latestStats.deliver.active | number" type="text" readonly>
|
<ui-input :value="latestStats.deliver.active | number" type="text" readonly>
|
||||||
<span>Active</span>
|
<span>Active</span>
|
||||||
|
@ -36,7 +36,7 @@
|
||||||
<ui-input :value="latestStats.inbox.activeSincePrevTick | number" type="text" readonly>
|
<ui-input :value="latestStats.inbox.activeSincePrevTick | number" type="text" readonly>
|
||||||
<span>Process</span>
|
<span>Process</span>
|
||||||
<template #prefix><fa :icon="fasPlayCircle"/></template>
|
<template #prefix><fa :icon="fasPlayCircle"/></template>
|
||||||
<template #suffix>jobs/s</template>
|
<template #suffix>jobs/tick</template>
|
||||||
</ui-input>
|
</ui-input>
|
||||||
<ui-input :value="latestStats.inbox.active | number" type="text" readonly>
|
<ui-input :value="latestStats.inbox.active | number" type="text" readonly>
|
||||||
<span>Active</span>
|
<span>Active</span>
|
||||||
|
@ -131,8 +131,10 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
const chartOpts = {
|
const chartOpts = id => ({
|
||||||
chart: {
|
chart: {
|
||||||
|
id,
|
||||||
|
group: 'queue',
|
||||||
type: 'area',
|
type: 'area',
|
||||||
height: 200,
|
height: 200,
|
||||||
animations: {
|
animations: {
|
||||||
|
@ -186,10 +188,10 @@ export default Vue.extend({
|
||||||
show: false,
|
show: false,
|
||||||
min: 0,
|
min: 0,
|
||||||
}
|
}
|
||||||
};
|
});
|
||||||
|
|
||||||
this.inboxChart = new ApexCharts(this.$refs.inboxChart, chartOpts);
|
this.inboxChart = new ApexCharts(this.$refs.inboxChart, chartOpts('a'));
|
||||||
this.deliverChart = new ApexCharts(this.$refs.deliverChart, chartOpts);
|
this.deliverChart = new ApexCharts(this.$refs.deliverChart, chartOpts('b'));
|
||||||
|
|
||||||
this.inboxChart.render();
|
this.inboxChart.render();
|
||||||
this.deliverChart.render();
|
this.deliverChart.render();
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { deliverQueue, inboxQueue } from '../queue';
|
||||||
|
|
||||||
const ev = new Xev();
|
const ev = new Xev();
|
||||||
|
|
||||||
const interval = 1000;
|
const interval = 2000;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Report queue stats regularly
|
* Report queue stats regularly
|
||||||
|
|
Loading…
Reference in a new issue