forked from FoundKeyGang/FoundKey
Resolve #4454
This commit is contained in:
syuilo
parent
0a0aa0e2db
commit
a81bc71a1e
2 changed files with 194 additions and 0 deletions
185
src/client/app/admin/views/dashboard.queue-charts.vue
Normal file
185
src/client/app/admin/views/dashboard.queue-charts.vue
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
<template>
|
||||
<div class="mzxlfysy">
|
||||
<div>
|
||||
<header>
|
||||
<span><fa :icon="faInbox"/> In</span>
|
||||
<span v-if="latestStats">{{ latestStats.inbox.activeSincePrevTick | number }} / {{ latestStats.inbox.delayed | number }}</span>
|
||||
</header>
|
||||
<div ref="in"></div>
|
||||
</div>
|
||||
<div>
|
||||
<header>
|
||||
<span><fa :icon="faPaperPlane"/> Out</span>
|
||||
<span v-if="latestStats">{{ latestStats.deliver.activeSincePrevTick | number }} / {{ latestStats.deliver.delayed | number }}</span>
|
||||
</header>
|
||||
<div ref="out"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import { faInbox } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faPaperPlane } from '@fortawesome/free-regular-svg-icons';
|
||||
import ApexCharts from 'apexcharts';
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
stats: [],
|
||||
inChart: null,
|
||||
outChart: null,
|
||||
faInbox, faPaperPlane
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
latestStats(): any {
|
||||
return this.stats[this.stats.length - 1];
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
stats(stats) {
|
||||
this.inChart.updateSeries([{
|
||||
data: stats.map((x, i) => ({ x: i, y: x.inbox.activeSincePrevTick }))
|
||||
}, {
|
||||
data: stats.map((x, i) => ({ x: i, y: x.inbox.delayed }))
|
||||
}]);
|
||||
this.outChart.updateSeries([{
|
||||
data: stats.map((x, i) => ({ x: i, y: x.deliver.activeSincePrevTick }))
|
||||
}, {
|
||||
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: {
|
||||
show: false
|
||||
},
|
||||
series: [{ data: [] }, { data: [] }] as any,
|
||||
xaxis: {
|
||||
type: 'numeric',
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
min: 0,
|
||||
}
|
||||
};
|
||||
|
||||
this.inChart = new ApexCharts(this.$refs.in, chartOpts);
|
||||
this.outChart = new ApexCharts(this.$refs.out, chartOpts);
|
||||
|
||||
this.inChart.render();
|
||||
this.outChart.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', () => {
|
||||
connection.dispose();
|
||||
this.inChart.destroy();
|
||||
this.outChart.destroy();
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
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>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mzxlfysy
|
||||
display flex
|
||||
|
||||
> div
|
||||
display block
|
||||
flex 1
|
||||
padding 20px 12px 0 12px
|
||||
box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
|
||||
background var(--face)
|
||||
border-radius 8px
|
||||
|
||||
&:first-child
|
||||
margin-right 16px
|
||||
|
||||
> header
|
||||
display flex
|
||||
padding 0 8px
|
||||
margin-bottom -16px
|
||||
color var(--adminDashboardCardFg)
|
||||
font-size 14px
|
||||
|
||||
> span
|
||||
&:last-child
|
||||
margin-left auto
|
||||
opacity 0.7
|
||||
|
||||
> span
|
||||
opacity 0.7
|
||||
|
||||
> div
|
||||
margin-bottom -10px
|
||||
|
||||
@media (max-width 1000px)
|
||||
display block
|
||||
margin-bottom 26px
|
||||
|
||||
> div
|
||||
&:first-child
|
||||
margin-right 0
|
||||
margin-bottom 26px
|
||||
|
||||
</style>
|
||||
|
|
@ -73,6 +73,10 @@
|
|||
<x-charts ref="charts"/>
|
||||
</div>
|
||||
|
||||
<div class="queue">
|
||||
<x-queue/>
|
||||
</div>
|
||||
|
||||
<div class="cpu-memory">
|
||||
<x-cpu-memory :connection="connection"/>
|
||||
</div>
|
||||
|
|
@ -87,6 +91,7 @@
|
|||
import Vue from 'vue';
|
||||
import i18n from '../../i18n';
|
||||
import XCpuMemory from "./cpu-memory.vue";
|
||||
import XQueue from "./dashboard.queue-charts.vue";
|
||||
import XCharts from "./charts.vue";
|
||||
import XApLog from "./ap-log.vue";
|
||||
import { faDatabase } from '@fortawesome/free-solid-svg-icons';
|
||||
|
|
@ -98,6 +103,7 @@ export default Vue.extend({
|
|||
|
||||
components: {
|
||||
XCpuMemory,
|
||||
XQueue,
|
||||
XCharts,
|
||||
XApLog,
|
||||
MarqueeText
|
||||
|
|
@ -274,6 +280,9 @@ export default Vue.extend({
|
|||
> .charts
|
||||
margin-bottom 16px
|
||||
|
||||
> .queue
|
||||
margin-bottom 16px
|
||||
|
||||
> .cpu-memory
|
||||
margin-bottom 16px
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue