keith/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey synced 2024-11-23 17:45:12 +00:00
Code Issues Projects Releases Packages Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2018-11-03 13:30:57 +09:00
parent 4853bc9414
commit c1520763c6
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
2 changed files with 52 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/client/app/admin/views/charts.vue
View file

@ -154,6 +154,9 @@ export default Vue.extend({
}, },
toolbar: { toolbar: {
show: false show: false
},
zoom: {
enabled: false
} }
}, },
dataLabels: { dataLabels: {

63
src/client/app/admin/views/cpu-memory.vue
View file

@ -1,7 +1,18 @@
<template> <template>
<div class="zyknedwtlthezamcjlolyusmipqmjgxz"> <div class="zyknedwtlthezamcjlolyusmipqmjgxz">
<div ref="cpu"></div> <div>
<div ref="mem"></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> </div>
</template> </template>
@ -18,7 +29,8 @@ export default Vue.extend({
cpuChart: null, cpuChart: null,
memChart: null, memChart: null,
cpuP: '', cpuP: '',
memP: '' memP: '',
meta: null
}; };
}, },
@ -34,6 +46,10 @@ export default Vue.extend({
}, },
mounted() { mounted() {
(this as any).os.getMeta().then(meta => {
this.meta = meta;
});
this.connection.on('stats', this.onStats); this.connection.on('stats', this.onStats);
this.connection.on('statsLog', this.onStatsLog); this.connection.on('statsLog', this.onStatsLog);
this.connection.send('requestLog', { this.connection.send('requestLog', {
@ -52,6 +68,9 @@ export default Vue.extend({
}, },
toolbar: { toolbar: {
show: false show: false
},
zoom: {
enabled: false
} }
}, },
dataLabels: { dataLabels: {
@ -64,6 +83,9 @@ export default Vue.extend({
curve: 'straight', curve: 'straight',
width: 2 width: 2
}, },
tooltip: {
enabled: false
},
series: [{ series: [{
data: [] data: []
}], }],
@ -71,6 +93,9 @@ export default Vue.extend({
type: 'numeric', type: 'numeric',
labels: { labels: {
show: false show: false
},
tooltip: {
enabled: false
} }
}, },
yaxis: { yaxis: {
@ -80,16 +105,8 @@ export default Vue.extend({
} }
}; };
this.cpuChart = new ApexCharts(this.$refs.cpu, Object.assign({}, chartOpts, { this.cpuChart = new ApexCharts(this.$refs.cpu, chartOpts);
title: { this.memChart = new ApexCharts(this.$refs.mem, chartOpts);
text: 'CPU'
}
}));
this.memChart = new ApexCharts(this.$refs.mem, Object.assign({}, chartOpts, {
title: {
text: 'MEM'
}
}));
this.cpuChart.render(); this.cpuChart.render();
this.memChart.render(); this.memChart.render();
@ -123,7 +140,7 @@ export default Vue.extend({
> div > div
display block display block
flex 1 flex 1
padding 24px 16px 12px 16px padding 20px 16px 0 16px
box-shadow 0 2px 4px rgba(0, 0, 0, 0.1) box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
background var(--face) background var(--face)
border-radius 8px border-radius 8px
@ -131,4 +148,22 @@ export default Vue.extend({
&:first-child &:first-child
margin-right 16px 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> </style>