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

Improve cpu and memory chart in control panel

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

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

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

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

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