From 7668475bd62b5b106a47ae96daf9ec87548ce314 Mon Sep 17 00:00:00 2001 From: syuilo Date: Wed, 13 Mar 2019 23:27:11 +0900 Subject: [PATCH] :art: --- .../app/admin/views/dashboard.queue-charts.vue | 6 ++++-- src/client/app/admin/views/queue.vue | 14 ++++++++++++-- src/client/app/common/views/widgets/queue.vue | 8 ++++++++ 3 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src/client/app/admin/views/dashboard.queue-charts.vue b/src/client/app/admin/views/dashboard.queue-charts.vue index f1d389014..d2d7811bf 100644 --- a/src/client/app/admin/views/dashboard.queue-charts.vue +++ b/src/client/app/admin/views/dashboard.queue-charts.vue @@ -23,6 +23,8 @@ import { faInbox } from '@fortawesome/free-solid-svg-icons'; import { faPaperPlane } from '@fortawesome/free-regular-svg-icons'; import ApexCharts from 'apexcharts'; +const limit = 150; + export default Vue.extend({ data() { return { @@ -124,7 +126,7 @@ export default Vue.extend({ connection.on('statsLog', this.onStatsLog); connection.send('requestLog', { id: Math.random().toString().substr(2, 8), - length: 100 + length: limit }); this.$once('hook:beforeDestroy', () => { @@ -137,7 +139,7 @@ export default Vue.extend({ methods: { onStats(stats) { this.stats.push(stats); - if (this.stats.length > 100) this.stats.shift(); + if (this.stats.length > limit) this.stats.shift(); }, onStatsLog(statsLog) { diff --git a/src/client/app/admin/views/queue.vue b/src/client/app/admin/views/queue.vue index 5a44d5372..daa78f3a8 100644 --- a/src/client/app/admin/views/queue.vue +++ b/src/client/app/admin/views/queue.vue @@ -69,6 +69,8 @@ import * as tinycolor from 'tinycolor2'; import { faTasks, faInbox, faStopwatch, faPlayCircle as fasPlayCircle } from '@fortawesome/free-solid-svg-icons'; import { faPaperPlane, faStopCircle, faPlayCircle as farPlayCircle } from '@fortawesome/free-regular-svg-icons'; +const limit = 150; + export default Vue.extend({ i18n: i18n('admin/views/queue.vue'), @@ -91,28 +93,36 @@ export default Vue.extend({ stats(stats) { this.inboxChart.updateSeries([{ name: 'Process', + type: 'area', data: stats.map((x, i) => ({ x: i, y: x.inbox.activeSincePrevTick })) }, { name: 'Active', + type: 'area', data: stats.map((x, i) => ({ x: i, y: x.inbox.active })) }, { name: 'Waiting', + type: 'line', data: stats.map((x, i) => ({ x: i, y: x.inbox.waiting })) }, { name: 'Delayed', + type: 'line', data: stats.map((x, i) => ({ x: i, y: x.inbox.delayed })) }]); this.deliverChart.updateSeries([{ name: 'Process', + type: 'area', data: stats.map((x, i) => ({ x: i, y: x.deliver.activeSincePrevTick })) }, { name: 'Active', + type: 'area', data: stats.map((x, i) => ({ x: i, y: x.deliver.active })) }, { name: 'Waiting', + type: 'line', data: stats.map((x, i) => ({ x: i, y: x.deliver.waiting })) }, { name: 'Delayed', + type: 'line', data: stats.map((x, i) => ({ x: i, y: x.deliver.delayed })) }]); } @@ -182,7 +192,7 @@ export default Vue.extend({ connection.on('statsLog', this.onStatsLog); connection.send('requestLog', { id: Math.random().toString().substr(2, 8), - length: 100 + length: limit }); this.$once('hook:beforeDestroy', () => { @@ -212,7 +222,7 @@ export default Vue.extend({ onStats(stats) { this.stats.push(stats); - if (this.stats.length > 100) this.stats.shift(); + if (this.stats.length > limit) this.stats.shift(); }, onStatsLog(statsLog) { diff --git a/src/client/app/common/views/widgets/queue.vue b/src/client/app/common/views/widgets/queue.vue index c28b5ea86..27ba35fbc 100644 --- a/src/client/app/common/views/widgets/queue.vue +++ b/src/client/app/common/views/widgets/queue.vue @@ -42,21 +42,29 @@ export default define({ watch: { stats(stats) { this.inChart.updateSeries([{ + type: 'area', data: stats.map((x, i) => ({ x: i, y: x.inbox.activeSincePrevTick })) }, { + type: 'area', data: stats.map((x, i) => ({ x: i, y: x.inbox.active })) }, { + type: 'line', data: stats.map((x, i) => ({ x: i, y: x.inbox.waiting })) }, { + type: 'line', data: stats.map((x, i) => ({ x: i, y: x.inbox.delayed })) }]); this.outChart.updateSeries([{ + type: 'area', data: stats.map((x, i) => ({ x: i, y: x.deliver.activeSincePrevTick })) }, { + type: 'area', data: stats.map((x, i) => ({ x: i, y: x.deliver.active })) }, { + type: 'line', data: stats.map((x, i) => ({ x: i, y: x.deliver.waiting })) }, { + type: 'line', data: stats.map((x, i) => ({ x: i, y: x.deliver.delayed })) }]); }