natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Fix queue charts (#4482)

This commit is contained in:
MeiMei 2019-03-12 21:53:36 +09:00 committed by syuilo
parent 60e0b19372
commit d15bd59109
1 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/client/app/admin/views/queue.vue
View File

@ -5,14 +5,21 @@
<section class="wptihjuy"> <section class="wptihjuy">
<header><fa :icon="faPaperPlane"/> Deliver</header> <header><fa :icon="faPaperPlane"/> Deliver</header>
<ui-horizon-group inputs v-if="latestStats" class="fit-bottom"> <ui-horizon-group inputs v-if="latestStats" class="fit-bottom">
<ui-input :value="latestStats.deliver.waiting | number" type="text" readonly> <ui-input :value="latestStats.deliver.activeSincePrevTick | number" type="text" readonly>
<span>Waiting</span> <span>Process</span>
</ui-input> <template #suffix>jobs/s</template>
<ui-input :value="latestStats.deliver.delayed | number" type="text" readonly>
<span>Delayed</span>
</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>
<template #suffix>jobs</template>
</ui-input>
<ui-input :value="latestStats.deliver.waiting | number" type="text" readonly>
<span>Waiting</span>
<template #suffix>jobs</template>
</ui-input>
<ui-input :value="latestStats.deliver.delayed | number" type="text" readonly>
<span>Delayed</span>
<template #suffix>jobs</template>
</ui-input> </ui-input>
</ui-horizon-group> </ui-horizon-group>
<div ref="deliverChart" class="chart"></div> <div ref="deliverChart" class="chart"></div>
@ -20,14 +27,21 @@
<section class="wptihjuy"> <section class="wptihjuy">
<header><fa :icon="faInbox"/> Inbox</header> <header><fa :icon="faInbox"/> Inbox</header>
<ui-horizon-group inputs v-if="latestStats" class="fit-bottom"> <ui-horizon-group inputs v-if="latestStats" class="fit-bottom">
<ui-input :value="latestStats.inbox.waiting | number" type="text" readonly> <ui-input :value="latestStats.inbox.activeSincePrevTick | number" type="text" readonly>
<span>Waiting</span> <span>Process</span>
</ui-input> <template #suffix>jobs/s</template>
<ui-input :value="latestStats.inbox.delayed | number" type="text" readonly>
<span>Delayed</span>
</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>
<template #suffix>jobs</template>
</ui-input>
<ui-input :value="latestStats.inbox.waiting | number" type="text" readonly>
<span>Waiting</span>
<template #suffix>jobs</template>
</ui-input>
<ui-input :value="latestStats.inbox.delayed | number" type="text" readonly>
<span>Delayed</span>
<template #suffix>jobs</template>
</ui-input> </ui-input>
</ui-horizon-group> </ui-horizon-group>
<div ref="inboxChart" class="chart"></div> <div ref="inboxChart" class="chart"></div>
@ -68,8 +82,11 @@ export default Vue.extend({
watch: { watch: {
stats(stats) { stats(stats) {
this.inboxChart.updateSeries([{ this.inboxChart.updateSeries([{
name: 'Active', name: 'Process',
data: stats.map((x, i) => ({ x: i, y: x.inbox.activeSincePrevTick })) data: stats.map((x, i) => ({ x: i, y: x.inbox.activeSincePrevTick }))
}, {
name: 'Active',
data: stats.map((x, i) => ({ x: i, y: x.inbox.active }))
}, { }, {
name: 'Waiting', name: 'Waiting',
data: stats.map((x, i) => ({ x: i, y: x.inbox.waiting })) data: stats.map((x, i) => ({ x: i, y: x.inbox.waiting }))
@ -78,8 +95,11 @@ export default Vue.extend({
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: 'Active', name: 'Process',
data: stats.map((x, i) => ({ x: i, y: x.deliver.activeSincePrevTick })) data: stats.map((x, i) => ({ x: i, y: x.deliver.activeSincePrevTick }))
}, {
name: 'Active',
data: stats.map((x, i) => ({ x: i, y: x.deliver.active }))
}, { }, {
name: 'Waiting', name: 'Waiting',
data: stats.map((x, i) => ({ x: i, y: x.deliver.waiting })) data: stats.map((x, i) => ({ x: i, y: x.deliver.waiting }))
@ -127,7 +147,7 @@ export default Vue.extend({
}, },
}, },
series: [] as any, series: [] as any,
colors: ['#00BCD4', '#FFEB3B', '#e53935'], colors: ['#00E396', '#00BCD4', '#FFEB3B', '#e53935'],
xaxis: { xaxis: {
type: 'numeric', type: 'numeric',
labels: { labels: {