diff --git a/src/client/app/common/views/widgets/server.cpu-memory.vue b/src/client/app/common/views/widgets/server.cpu-memory.vue index 2988993c9..b0421d615 100644 --- a/src/client/app/common/views/widgets/server.cpu-memory.vue +++ b/src/client/app/common/views/widgets/server.cpu-memory.vue @@ -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)); } } }); diff --git a/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue index 572974e24..d14ce1255 100644 --- a/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue +++ b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue @@ -15,14 +15,14 @@ :points="cpuPolylinePoints" fill="none" stroke="#fff" - stroke-width="0.3"/> + stroke-width="1"/> - CPU {{ cpuP }}% + CPU {{ cpuP }}% @@ -39,14 +39,14 @@ :points="memPolylinePoints" fill="none" stroke="#fff" - stroke-width="0.3"/> + stroke-width="1"/> - MEM {{ memP }}% + MEM {{ memP }}% @@ -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({ diff --git a/src/daemons/server-stats.ts b/src/daemons/server-stats.ts index af935d35b..4a653f81f 100644 --- a/src/daemons/server-stats.ts +++ b/src/daemons/server-stats.ts @@ -15,8 +15,8 @@ const interval = 1000; export default function() { const log = new Deque(); - 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(); diff --git a/src/server/api/stream/server-stats.ts b/src/server/api/stream/server-stats.ts index 2a058de6c..f6c1f14eb 100644 --- a/src/server/api/stream/server-stats.ts +++ b/src/server/api/stream/server-stats.ts @@ -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; } });