Add queue chart

This commit is contained in:
syuilo 2019-03-12 17:11:06 +09:00
parent ecb00968bc
commit a91c585f55
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69

View file

@ -2,33 +2,35 @@
<div> <div>
<ui-card> <ui-card>
<template #title>{{ $t('operation') }}</template> <template #title>{{ $t('operation') }}</template>
<section> <section class="wptihjuy">
<header>Deliver</header> <header>Deliver</header>
<ui-horizon-group inputs v-if="stats"> <ui-horizon-group inputs v-if="latestStats" class="fit-bottom">
<ui-input :value="stats.deliver.waiting | number" type="text" readonly> <ui-input :value="latestStats.deliver.waiting | number" type="text" readonly>
<span>Waiting</span> <span>Waiting</span>
</ui-input> </ui-input>
<ui-input :value="stats.deliver.delayed | number" type="text" readonly> <ui-input :value="latestStats.deliver.delayed | number" type="text" readonly>
<span>Delayed</span> <span>Delayed</span>
</ui-input> </ui-input>
<ui-input :value="stats.deliver.active | number" type="text" readonly> <ui-input :value="latestStats.deliver.active | number" type="text" readonly>
<span>Active</span> <span>Active</span>
</ui-input> </ui-input>
</ui-horizon-group> </ui-horizon-group>
<div ref="deliverChart" class="chart"></div>
</section> </section>
<section> <section class="wptihjuy">
<header>Inbox</header> <header>Inbox</header>
<ui-horizon-group inputs v-if="stats"> <ui-horizon-group inputs v-if="latestStats" class="fit-bottom">
<ui-input :value="stats.inbox.waiting | number" type="text" readonly> <ui-input :value="latestStats.inbox.waiting | number" type="text" readonly>
<span>Waiting</span> <span>Waiting</span>
</ui-input> </ui-input>
<ui-input :value="stats.inbox.delayed | number" type="text" readonly> <ui-input :value="latestStats.inbox.delayed | number" type="text" readonly>
<span>Delayed</span> <span>Delayed</span>
</ui-input> </ui-input>
<ui-input :value="stats.inbox.active | number" type="text" readonly> <ui-input :value="latestStats.inbox.active | number" type="text" readonly>
<span>Active</span> <span>Active</span>
</ui-input> </ui-input>
</ui-horizon-group> </ui-horizon-group>
<div ref="inboxChart" class="chart"></div>
</section> </section>
<section> <section>
<ui-button @click="removeAllJobs">{{ $t('remove-all-jobs') }}</ui-button> <ui-button @click="removeAllJobs">{{ $t('remove-all-jobs') }}</ui-button>
@ -40,29 +42,122 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import i18n from '../../i18n'; import i18n from '../../i18n';
import ApexCharts from 'apexcharts';
import * as tinycolor from 'tinycolor2';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('admin/views/queue.vue'), i18n: i18n('admin/views/queue.vue'),
data() { data() {
return { return {
stats: null stats: [],
deliverChart: null,
inboxChart: null,
}; };
}, },
created() { computed: {
const fetchStats = () => { latestStats(): any {
this.$root.api('admin/queue/stats', {}, true).then(stats => { return this.stats[this.stats.length - 1];
this.stats = stats; }
}); },
watch: {
stats(stats) {
this.inboxChart.updateSeries([{
name: 'Active',
data: stats.map((x, i) => ({ x: i, y: x.inbox.activeSincePrevTick }))
}, {
name: 'Waiting',
data: stats.map((x, i) => ({ x: i, y: x.inbox.waiting }))
}, {
name: 'Delayed',
data: stats.map((x, i) => ({ x: i, y: x.inbox.delayed }))
}]);
this.deliverChart.updateSeries([{
name: 'Active',
data: stats.map((x, i) => ({ x: i, y: x.deliver.activeSincePrevTick }))
}, {
name: 'Waiting',
data: stats.map((x, i) => ({ x: i, y: x.deliver.waiting }))
}, {
name: 'Delayed',
data: stats.map((x, i) => ({ x: i, y: x.deliver.delayed }))
}]);
}
},
mounted() {
const chartOpts = {
chart: {
type: 'area',
height: 200,
animations: {
dynamicAnimation: {
enabled: false
}
},
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
grid: {
clipMarkers: false,
borderColor: 'rgba(0, 0, 0, 0.1)'
},
stroke: {
curve: 'straight',
width: 2
},
tooltip: {
enabled: false
},
legend: {
labels: {
colors: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
},
},
series: [] as any,
colors: ['#00BCD4', '#FFEB3B', '#e53935'],
xaxis: {
type: 'numeric',
labels: {
show: false
},
tooltip: {
enabled: false
}
},
yaxis: {
show: false,
min: 0,
}
}; };
fetchStats(); this.inboxChart = new ApexCharts(this.$refs.inboxChart, chartOpts);
this.deliverChart = new ApexCharts(this.$refs.deliverChart, chartOpts);
const clock = setInterval(fetchStats, 1000); this.inboxChart.render();
this.deliverChart.render();
const connection = this.$root.stream.useSharedConnection('queueStats');
connection.on('stats', this.onStats);
connection.on('statsLog', this.onStatsLog);
connection.send('requestLog', {
id: Math.random().toString().substr(2, 8),
length: 100
});
this.$once('hook:beforeDestroy', () => { this.$once('hook:beforeDestroy', () => {
clearInterval(clock); connection.dispose();
this.inboxChart.destroy();
this.deliverChart.destroy();
}); });
}, },
@ -83,6 +178,24 @@ export default Vue.extend({
}); });
}); });
}, },
onStats(stats) {
this.stats.push(stats);
if (this.stats.length > 100) this.stats.shift();
},
onStatsLog(statsLog) {
for (const stats of statsLog.reverse()) {
this.onStats(stats);
}
}
} }
}); });
</script> </script>
<style lang="stylus" scoped>
.wptihjuy
> .chart
min-height 200px !important
</style>