heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Improve cpu and memory chart in control panel

Browse source
This commit is contained in:
syuilo 2018-08-19 03:32:01 +09:00
parent 667b18fe24
commit c2b882a5d7
5 changed files with 26 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/client/app/common/views/widgets/server.cpu-memory.vue
View file

@ -122,7 +122,7 @@ export default Vue.extend({
this.memP = (stats.mem.used / stats.mem.total * 100).toFixed(0);
},
onStatsLog(statsLog) {
statsLog.forEach(stats => this.onStats(stats));
statsLog.reverse().forEach(stats => this.onStats(stats));
}
}
});

23
src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
View file

@ -15,14 +15,14 @@
:points="cpuPolylinePoints"
fill="none"
stroke="#fff"
stroke-width="0.3"/>
stroke-width="1"/>
</mask>
</defs>
<rect
x="0" y="0"
:width="viewBoxX" :height="viewBoxY"
:style="`stroke: none; fill: url(#${ cpuGradientId }); mask: url(#${ cpuMaskId })`"/>
<text x="1" y="5">CPU <tspan>{{ cpuP }}%</tspan></text>
<text x="1" y="12">CPU <tspan>{{ cpuP }}%</tspan></text>
</svg>
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
<defs>
@ -39,14 +39,14 @@
:points="memPolylinePoints"
fill="none"
stroke="#fff"
stroke-width="0.3"/>
stroke-width="1"/>
</mask>
</defs>
<rect
x="0" y="0"
:width="viewBoxX" :height="viewBoxY"
:style="`stroke: none; fill: url(#${ memGradientId }); mask: url(#${ memMaskId })`"/>
<text x="1" y="5">MEM <tspan>{{ memP }}%</tspan></text>
<text x="1" y="12">MEM <tspan>{{ memP }}%</tspan></text>
</svg>
</div>
</template>
@ -59,8 +59,8 @@ export default Vue.extend({
props: ['connection'],
data() {
return {
viewBoxX: 50,
viewBoxY: 20,
viewBoxX: 200,
viewBoxY: 70,
stats: [],
cpuGradientId: uuid(),
cpuMaskId: uuid(),
@ -79,7 +79,8 @@ export default Vue.extend({
this.connection.on('statsLog', this.onStatsLog);
this.connection.send({
type: 'requestLog',
id: Math.random().toString()
id: Math.random().toString(),
length: 200
});
},
beforeDestroy() {
@ -89,7 +90,7 @@ export default Vue.extend({
methods: {
onStats(stats) {
this.stats.push(stats);
if (this.stats.length > 50) this.stats.shift();
if (this.stats.length > 200) this.stats.shift();
const cpuPolylinePoints = this.stats.map((s, i) => [this.viewBoxX - ((this.stats.length - 1) - i), (1 - s.cpu_usage) * this.viewBoxY]);
const memPolylinePoints = this.stats.map((s, i) => [this.viewBoxX - ((this.stats.length - 1) - i), (1 - (s.mem.used / s.mem.total)) * this.viewBoxY]);
@ -103,7 +104,7 @@ export default Vue.extend({
this.memP = (stats.mem.used / stats.mem.total * 100).toFixed(0);
},
onStatsLog(statsLog) {
statsLog.forEach(stats => this.onStats(stats));
statsLog.reverse().forEach(stats => this.onStats(stats));
}
}
});
@ -111,8 +112,6 @@ export default Vue.extend({
<style lang="stylus" scoped>
root(isDark)
margin-bottom 16px
> svg
display block
width 50%
@ -125,7 +124,7 @@ root(isDark)
padding-left 5px
> text
font-size 2px
font-size 10px
fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
> tspan

6
src/client/app/desktop/views/pages/admin/admin.dashboard.vue
View file

@ -77,4 +77,10 @@ export default Vue.extend({
> *:last-child
font-size 70%
> .cpu-memory
margin-bottom 16px
padding 16px
border solid 1px #eee
border-radius: 8px
</style>

8
src/daemons/server-stats.ts
View file

@ -15,8 +15,8 @@ const interval = 1000;
export default function() {
const log = new Deque<any>();
ev.on('requestServerStatsLog', id => {
ev.emit('serverStatsLog:' + id, log.toArray());
ev.on('requestServerStatsLog', x => {
ev.emit('serverStatsLog:' + x.id, log.toArray().slice(0, x.length || 50));
});
async function tick() {
@ -36,8 +36,8 @@ export default function() {
process_uptime: process.uptime()
};
ev.emit('serverStats', stats);
log.push(stats);
if (log.length > 50) log.shift();
log.unshift(stats);
if (log.length > 200) log.pop();
}
tick();

5
src/server/api/stream/server-stats.ts
View file

@ -22,7 +22,10 @@ export default function(request: websocket.request, connection: websocket.connec
body: statsLog
}));
});
ev.emit('requestServerStatsLog', msg.id);
ev.emit('requestServerStatsLog', {
id: msg.id,
length: msg.length
});
break;
}
});