170 lines
2.8 KiB
Vue
170 lines
2.8 KiB
Vue
<template>
|
|
<div class="zyknedwtlthezamcjlolyusmipqmjgxz">
|
|
<div>
|
|
<header>
|
|
<span>CPU <span>{{ cpuP }}%</span></span>
|
|
<span v-if="meta">{{ meta.cpu.model }}</span>
|
|
</header>
|
|
<div ref="cpu"></div>
|
|
</div>
|
|
<div>
|
|
<header>
|
|
<span>MEM <span>{{ memP }}%</span></span>
|
|
</header>
|
|
<div ref="mem"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue';
|
|
import * as ApexCharts from 'apexcharts';
|
|
|
|
export default Vue.extend({
|
|
props: ['connection'],
|
|
|
|
data() {
|
|
return {
|
|
stats: [],
|
|
cpuChart: null,
|
|
memChart: null,
|
|
cpuP: '',
|
|
memP: '',
|
|
meta: null
|
|
};
|
|
},
|
|
|
|
watch: {
|
|
stats(stats) {
|
|
this.cpuChart.updateSeries([{
|
|
data: stats.map((x, i) => ({ x: i, y: x.cpu_usage }))
|
|
}]);
|
|
this.memChart.updateSeries([{
|
|
data: stats.map((x, i) => ({ x: i, y: (x.mem.used / x.mem.total) }))
|
|
}]);
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
(this as any).os.getMeta().then(meta => {
|
|
this.meta = meta;
|
|
});
|
|
|
|
this.connection.on('stats', this.onStats);
|
|
this.connection.on('statsLog', this.onStatsLog);
|
|
this.connection.send('requestLog', {
|
|
id: Math.random().toString().substr(2, 8),
|
|
length: 200
|
|
});
|
|
|
|
const chartOpts = {
|
|
chart: {
|
|
type: 'area',
|
|
height: 200,
|
|
animations: {
|
|
dynamicAnimation: {
|
|
enabled: false
|
|
}
|
|
},
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
zoom: {
|
|
enabled: false
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
grid: {
|
|
clipMarkers: false,
|
|
},
|
|
stroke: {
|
|
curve: 'straight',
|
|
width: 2
|
|
},
|
|
tooltip: {
|
|
enabled: false
|
|
},
|
|
series: [{
|
|
data: []
|
|
}],
|
|
xaxis: {
|
|
type: 'numeric',
|
|
labels: {
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
enabled: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
show: false,
|
|
min: 0,
|
|
max: 1
|
|
}
|
|
};
|
|
|
|
this.cpuChart = new ApexCharts(this.$refs.cpu, chartOpts);
|
|
this.memChart = new ApexCharts(this.$refs.mem, chartOpts);
|
|
|
|
this.cpuChart.render();
|
|
this.memChart.render();
|
|
},
|
|
|
|
beforeDestroy() {
|
|
this.connection.off('stats', this.onStats);
|
|
this.connection.off('statsLog', this.onStatsLog);
|
|
},
|
|
|
|
methods: {
|
|
onStats(stats) {
|
|
this.stats.push(stats);
|
|
if (this.stats.length > 200) this.stats.shift();
|
|
|
|
this.cpuP = (stats.cpu_usage * 100).toFixed(0);
|
|
this.memP = (stats.mem.used / stats.mem.total * 100).toFixed(0);
|
|
},
|
|
|
|
onStatsLog(statsLog) {
|
|
statsLog.reverse().forEach(stats => this.onStats(stats));
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.zyknedwtlthezamcjlolyusmipqmjgxz
|
|
display flex
|
|
|
|
> div
|
|
display block
|
|
flex 1
|
|
padding 20px 16px 0 16px
|
|
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 4px
|
|
margin-bottom -8px
|
|
color #555
|
|
font-size 14px
|
|
|
|
> span
|
|
&:last-child
|
|
margin-left auto
|
|
opacity 0.7
|
|
|
|
> span
|
|
opacity 0.7
|
|
|
|
> div
|
|
margin-bottom -8px
|
|
|
|
</style>
|