From ccb9ed3489512c028c7c5cae7387a49441f6a666 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 9 Jun 2018 11:29:50 +0900 Subject: [PATCH] :art: --- .../common/views/widgets/posts-monitor.vue | 39 ++++++++++++++----- .../views/widgets/server.cpu-memory.vue | 37 ++++++++++++++---- 2 files changed, 59 insertions(+), 17 deletions(-) diff --git a/src/client/app/common/views/widgets/posts-monitor.vue b/src/client/app/common/views/widgets/posts-monitor.vue index 1f07342fe0..801307be54 100644 --- a/src/client/app/common/views/widgets/posts-monitor.vue +++ b/src/client/app/common/views/widgets/posts-monitor.vue @@ -5,7 +5,7 @@
- + @@ -21,15 +21,20 @@ fill="none" stroke="#fff" stroke-width="1"/> + Local - + @@ -45,11 +50,16 @@ fill="none" stroke="#fff" stroke-width="1"/> + Fedi @@ -82,7 +92,11 @@ export default define({ fediPolylinePoints: '', localPolylinePoints: '', fediPolygonPoints: '', - localPolygonPoints: '' + localPolygonPoints: '', + fediHeadX: null, + fediHeadY: null, + localHeadX: null, + localHeadY: null }; }, computed: { @@ -133,11 +147,18 @@ export default define({ const fediPeak = Math.max.apply(null, stats.map(x => x.all)) || 1; const localPeak = Math.max.apply(null, stats.map(x => x.local)) || 1; - this.fediPolylinePoints = stats.map((s, i) => `${this.viewBoxX - ((stats.length - 1) - i)},${(1 - (s.all / fediPeak)) * this.viewBoxY}`).join(' '); - this.localPolylinePoints = stats.map((s, i) => `${this.viewBoxX - ((stats.length - 1) - i)},${(1 - (s.local / localPeak)) * this.viewBoxY}`).join(' '); + const fediPolylinePoints = stats.map((s, i) => [this.viewBoxX - ((stats.length - 1) - i), (1 - (s.all / fediPeak)) * this.viewBoxY]); + const localPolylinePoints = stats.map((s, i) => [this.viewBoxX - ((stats.length - 1) - i), (1 - (s.local / localPeak)) * this.viewBoxY]); + this.fediPolylinePoints = fediPolylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' '); + this.localPolylinePoints = localPolylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' '); this.fediPolygonPoints = `${this.viewBoxX - (stats.length - 1)},${ this.viewBoxY } ${ this.fediPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`; this.localPolygonPoints = `${this.viewBoxX - (stats.length - 1)},${ this.viewBoxY } ${ this.localPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`; + + this.fediHeadX = fediPolylinePoints[fediPolylinePoints.length - 1][0]; + this.fediHeadY = fediPolylinePoints[fediPolylinePoints.length - 1][1]; + this.localHeadX = localPolylinePoints[localPolylinePoints.length - 1][0]; + this.localHeadY = localPolylinePoints[localPolylinePoints.length - 1][1]; }, onStats(stats) { this.stats.push(stats); 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 6bf998c249..da6b9f799f 100644 --- a/src/client/app/common/views/widgets/server.cpu-memory.vue +++ b/src/client/app/common/views/widgets/server.cpu-memory.vue @@ -1,6 +1,6 @@
- + @@ -16,15 +16,20 @@ fill="none" stroke="#fff" stroke-width="1"/> + CPU {{ cpuP }}% - + @@ -40,11 +45,16 @@ fill="none" stroke="#fff" stroke-width="1"/> + MEM {{ memP }}% @@ -70,6 +80,10 @@ export default Vue.extend({ memPolylinePoints: '', cpuPolygonPoints: '', memPolygonPoints: '', + cpuHeadX: null, + cpuHeadY: null, + memHeadX: null, + memHeadY: null, cpuP: '', memP: '' }; @@ -92,12 +106,19 @@ export default Vue.extend({ this.stats.push(stats); if (this.stats.length > 50) this.stats.shift(); - this.cpuPolylinePoints = this.stats.map((s, i) => `${this.viewBoxX - ((this.stats.length - 1) - i)},${(1 - s.cpu_usage) * this.viewBoxY}`).join(' '); - this.memPolylinePoints = this.stats.map((s, i) => `${this.viewBoxX - ((this.stats.length - 1) - i)},${(1 - (s.mem.used / s.mem.total)) * this.viewBoxY}`).join(' '); + 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]); + this.cpuPolylinePoints = cpuPolylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' '); + this.memPolylinePoints = memPolylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' '); this.cpuPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${ this.viewBoxY } ${ this.cpuPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`; this.memPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${ this.viewBoxY } ${ this.memPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`; + this.cpuHeadX = cpuPolylinePoints[cpuPolylinePoints.length - 1][0]; + this.cpuHeadY = cpuPolylinePoints[cpuPolylinePoints.length - 1][1]; + this.memHeadX = memPolylinePoints[memPolylinePoints.length - 1][0]; + this.memHeadY = memPolylinePoints[memPolylinePoints.length - 1][1]; + this.cpuP = (stats.cpu_usage * 100).toFixed(0); this.memP = (stats.mem.used / stats.mem.total * 100).toFixed(0); },