This commit is contained in:
syuilo 2019-03-13 23:27:11 +09:00
parent 8bda2a1fb7
commit 7668475bd6
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
3 changed files with 24 additions and 4 deletions

View file

@ -23,6 +23,8 @@ import { faInbox } from '@fortawesome/free-solid-svg-icons';
import { faPaperPlane } from '@fortawesome/free-regular-svg-icons'; import { faPaperPlane } from '@fortawesome/free-regular-svg-icons';
import ApexCharts from 'apexcharts'; import ApexCharts from 'apexcharts';
const limit = 150;
export default Vue.extend({ export default Vue.extend({
data() { data() {
return { return {
@ -124,7 +126,7 @@ export default Vue.extend({
connection.on('statsLog', this.onStatsLog); connection.on('statsLog', this.onStatsLog);
connection.send('requestLog', { connection.send('requestLog', {
id: Math.random().toString().substr(2, 8), id: Math.random().toString().substr(2, 8),
length: 100 length: limit
}); });
this.$once('hook:beforeDestroy', () => { this.$once('hook:beforeDestroy', () => {
@ -137,7 +139,7 @@ export default Vue.extend({
methods: { methods: {
onStats(stats) { onStats(stats) {
this.stats.push(stats); this.stats.push(stats);
if (this.stats.length > 100) this.stats.shift(); if (this.stats.length > limit) this.stats.shift();
}, },
onStatsLog(statsLog) { onStatsLog(statsLog) {

View file

@ -69,6 +69,8 @@ import * as tinycolor from 'tinycolor2';
import { faTasks, faInbox, faStopwatch, faPlayCircle as fasPlayCircle } from '@fortawesome/free-solid-svg-icons'; 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'; import { faPaperPlane, faStopCircle, faPlayCircle as farPlayCircle } from '@fortawesome/free-regular-svg-icons';
const limit = 150;
export default Vue.extend({ export default Vue.extend({
i18n: i18n('admin/views/queue.vue'), i18n: i18n('admin/views/queue.vue'),
@ -91,28 +93,36 @@ export default Vue.extend({
stats(stats) { stats(stats) {
this.inboxChart.updateSeries([{ this.inboxChart.updateSeries([{
name: 'Process', name: 'Process',
type: 'area',
data: stats.map((x, i) => ({ x: i, y: x.inbox.activeSincePrevTick })) data: stats.map((x, i) => ({ x: i, y: x.inbox.activeSincePrevTick }))
}, { }, {
name: 'Active', name: 'Active',
type: 'area',
data: stats.map((x, i) => ({ x: i, y: x.inbox.active })) data: stats.map((x, i) => ({ x: i, y: x.inbox.active }))
}, { }, {
name: 'Waiting', name: 'Waiting',
type: 'line',
data: stats.map((x, i) => ({ x: i, y: x.inbox.waiting })) data: stats.map((x, i) => ({ x: i, y: x.inbox.waiting }))
}, { }, {
name: 'Delayed', name: 'Delayed',
type: 'line',
data: stats.map((x, i) => ({ x: i, y: x.inbox.delayed })) data: stats.map((x, i) => ({ x: i, y: x.inbox.delayed }))
}]); }]);
this.deliverChart.updateSeries([{ this.deliverChart.updateSeries([{
name: 'Process', name: 'Process',
type: 'area',
data: stats.map((x, i) => ({ x: i, y: x.deliver.activeSincePrevTick })) data: stats.map((x, i) => ({ x: i, y: x.deliver.activeSincePrevTick }))
}, { }, {
name: 'Active', name: 'Active',
type: 'area',
data: stats.map((x, i) => ({ x: i, y: x.deliver.active })) data: stats.map((x, i) => ({ x: i, y: x.deliver.active }))
}, { }, {
name: 'Waiting', name: 'Waiting',
type: 'line',
data: stats.map((x, i) => ({ x: i, y: x.deliver.waiting })) data: stats.map((x, i) => ({ x: i, y: x.deliver.waiting }))
}, { }, {
name: 'Delayed', name: 'Delayed',
type: 'line',
data: stats.map((x, i) => ({ x: i, y: x.deliver.delayed })) 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.on('statsLog', this.onStatsLog);
connection.send('requestLog', { connection.send('requestLog', {
id: Math.random().toString().substr(2, 8), id: Math.random().toString().substr(2, 8),
length: 100 length: limit
}); });
this.$once('hook:beforeDestroy', () => { this.$once('hook:beforeDestroy', () => {
@ -212,7 +222,7 @@ export default Vue.extend({
onStats(stats) { onStats(stats) {
this.stats.push(stats); this.stats.push(stats);
if (this.stats.length > 100) this.stats.shift(); if (this.stats.length > limit) this.stats.shift();
}, },
onStatsLog(statsLog) { onStatsLog(statsLog) {

View file

@ -42,21 +42,29 @@ export default define({
watch: { watch: {
stats(stats) { stats(stats) {
this.inChart.updateSeries([{ this.inChart.updateSeries([{
type: 'area',
data: stats.map((x, i) => ({ x: i, y: x.inbox.activeSincePrevTick })) data: stats.map((x, i) => ({ x: i, y: x.inbox.activeSincePrevTick }))
}, { }, {
type: 'area',
data: stats.map((x, i) => ({ x: i, y: x.inbox.active })) data: stats.map((x, i) => ({ x: i, y: x.inbox.active }))
}, { }, {
type: 'line',
data: stats.map((x, i) => ({ x: i, y: x.inbox.waiting })) data: stats.map((x, i) => ({ x: i, y: x.inbox.waiting }))
}, { }, {
type: 'line',
data: stats.map((x, i) => ({ x: i, y: x.inbox.delayed })) data: stats.map((x, i) => ({ x: i, y: x.inbox.delayed }))
}]); }]);
this.outChart.updateSeries([{ this.outChart.updateSeries([{
type: 'area',
data: stats.map((x, i) => ({ x: i, y: x.deliver.activeSincePrevTick })) data: stats.map((x, i) => ({ x: i, y: x.deliver.activeSincePrevTick }))
}, { }, {
type: 'area',
data: stats.map((x, i) => ({ x: i, y: x.deliver.active })) data: stats.map((x, i) => ({ x: i, y: x.deliver.active }))
}, { }, {
type: 'line',
data: stats.map((x, i) => ({ x: i, y: x.deliver.waiting })) data: stats.map((x, i) => ({ x: i, y: x.deliver.waiting }))
}, { }, {
type: 'line',
data: stats.map((x, i) => ({ x: i, y: x.deliver.delayed })) data: stats.map((x, i) => ({ x: i, y: x.deliver.delayed }))
}]); }]);
} }