From d9e9899dbb515bfe9f07cc71ffc2036b74e074a9 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Thu, 1 Jun 2023 17:30:58 +0900
Subject: [PATCH] =?UTF-8?q?feat(client):=20=E6=96=B0=E3=81=97=E3=81=84?=
 =?UTF-8?q?=E3=82=B5=E3=83=BC=E3=83=90=E3=83=BC=E3=83=A1=E3=83=88=E3=83=AA?=
 =?UTF-8?q?=E3=82=AF=E3=82=B9=E3=82=A6=E3=82=A3=E3=82=B8=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=88=E3=81=AE=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/filters/bytes-net-sizes.ts   |   7 ++
 packages/frontend/src/filters/bytes-net-v.ts  |   8 ++
 .../widgets/server-metric/cpu-mem-net-pie.vue | 105 ++++++++++++++++++
 .../src/widgets/server-metric/index.vue       |  14 ++-
 .../src/widgets/server-metric/net-pie.vue     |  73 ++++++++++++
 5 files changed, 202 insertions(+), 5 deletions(-)
 create mode 100644 packages/frontend/src/filters/bytes-net-sizes.ts
 create mode 100644 packages/frontend/src/filters/bytes-net-v.ts
 create mode 100644 packages/frontend/src/widgets/server-metric/cpu-mem-net-pie.vue
 create mode 100644 packages/frontend/src/widgets/server-metric/net-pie.vue

diff --git a/packages/frontend/src/filters/bytes-net-sizes.ts b/packages/frontend/src/filters/bytes-net-sizes.ts
new file mode 100644
index 0000000000..61f54eabac
--- /dev/null
+++ b/packages/frontend/src/filters/bytes-net-sizes.ts
@@ -0,0 +1,7 @@
+export default (v) => {
+	if (v == null) return '?';
+	const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+	if (v === 0) return sizes[0];
+	const i = Math.floor(Math.log(v) / Math.log(1024));
+	return sizes[i];
+};
diff --git a/packages/frontend/src/filters/bytes-net-v.ts b/packages/frontend/src/filters/bytes-net-v.ts
new file mode 100644
index 0000000000..f3a64ce705
--- /dev/null
+++ b/packages/frontend/src/filters/bytes-net-v.ts
@@ -0,0 +1,8 @@
+export default (v, digits = 0) => {
+	if (v == null) return '?';
+	if (v === 0) return '0';
+	const isMinus = v < 0;
+	if (isMinus) v = -v;
+	const i = Math.floor(Math.log(v) / Math.log(1024));
+	return (isMinus ? '-' : '') + (v / Math.pow(1024, i)).toFixed(digits).replace(/\.0+$/, '');
+};
diff --git a/packages/frontend/src/widgets/server-metric/cpu-mem-net-pie.vue b/packages/frontend/src/widgets/server-metric/cpu-mem-net-pie.vue
new file mode 100644
index 0000000000..dc86676f9d
--- /dev/null
+++ b/packages/frontend/src/widgets/server-metric/cpu-mem-net-pie.vue
@@ -0,0 +1,105 @@
+<template>
+<div :class="$style.root">
+	<div :class="$style.div">
+		<XPie :class="$style.pie" :value="cpuUsage"/>
+		<div :class="$style.div2">
+			<p>CPU</p>
+			<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text">{{ (cpuUsage * 100).toFixed(1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">%</span></text>
+		</div>
+		<XPie :class="$style.pie" :value="memUsage"/>
+		<div :class="$style.div2">
+			<p>RAM</p>
+			<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text">{{ (memUsage * 100).toFixed(1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">%</span></text>
+		</div>
+	</div>
+	<div :class="$style.divider"></div>
+	<div :class="$style.div">
+		<!-- 基準が10MBなので、基準を超えるとグラフが壊れる問題がある -->
+		<XPie :class="$style.pie" :value="inRecent / 10000000"/>
+		<div :class="$style.div2">
+			<p>NET rx</p>
+			<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text"><tspan>{{ bytes(inRecent, 1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">{{ bytesSizes(inRecent) }}</span></tspan></text>
+		</div>
+		<!-- 基準が10MBなので、基準を超えるとグラフが壊れる問題がある -->
+		<XPie :class="$style.pie" :value="outRecent / 10000000"/>
+		<div :class="$style.div2">
+			<p>NET tx</p>
+			<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text"><tspan>{{ bytes(outRecent, 1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">{{ bytesSizes(outRecent) }}</span></tspan></text>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onBeforeUnmount } from 'vue';
+import XPie from './pie-compact.vue';
+import bytes from '@/filters/bytes-net-v';
+import bytesSizes from '@/filters/bytes-net-sizes';
+
+const props = defineProps<{
+	connection: any,
+	meta: any,
+	value: number
+}>();
+
+let cpuUsage: number = $ref(0);
+let memUsage: number = $ref(0);
+let inRecent: number = $ref(0);
+let outRecent: number = $ref(0);
+
+function onStats(stats) {
+	cpuUsage = stats.cpu;
+	memUsage = stats.mem.active / props.meta.mem.total;
+}
+
+function onConnStats(connStats) {
+	inRecent = connStats.net.rx;
+	outRecent = connStats.net.tx;
+}
+
+onMounted(() => {
+	props.connection.on('stats', onStats);
+	props.connection.on('stats', onConnStats);
+});
+
+onBeforeUnmount(() => {
+	props.connection.off('stats', onStats);
+	props.connection.off('stats', onConnStats);
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	padding: 16px 32px;
+}
+
+.div {
+	display: flex;
+}
+
+.pie {
+	height: 42px;
+	flex-shrink: 0;
+	margin-right: 8px;
+}
+
+.div2 {
+	flex: 1;
+	margin: auto;
+
+	> p {
+		margin: 0 0 2px;
+		font-size: 0.8em;
+	}
+}
+
+.divider {
+	margin: 16px 72px;
+	border-top: solid 0.5px var(--divider);
+}
+
+.text {
+	font-weight: bold;
+	fill: currentColor;
+}
+</style>
diff --git a/packages/frontend/src/widgets/server-metric/index.vue b/packages/frontend/src/widgets/server-metric/index.vue
index 5eee3e8a66..75f6b7cab4 100644
--- a/packages/frontend/src/widgets/server-metric/index.vue
+++ b/packages/frontend/src/widgets/server-metric/index.vue
@@ -7,10 +7,12 @@
 	<div v-if="meta" data-cy-mkw-serverMetric class="mkw-serverMetric">
 		<XCpuMemory v-if="widgetProps.view === 0" :connection="connection" :meta="meta"/>
 		<XNet v-else-if="widgetProps.view === 1" :connection="connection" :meta="meta"/>
-		<XCpuMemoryCompact v-if="widgetProps.view === 2" :connection="connection" :meta="meta"/>
-		<XCpu v-else-if="widgetProps.view === 3" :connection="connection" :meta="meta"/>
-		<XMemory v-else-if="widgetProps.view === 4" :connection="connection" :meta="meta"/>
-		<XDisk v-else-if="widgetProps.view === 5" :connection="connection" :meta="meta"/>
+		<XCpuMemoryNetCompact v-if="widgetProps.view === 2" :connection="connection" :meta="meta"/>
+		<XCpuMemoryCompact v-if="widgetProps.view === 3" :connection="connection" :meta="meta"/>
+		<XNetCompact v-if="widgetProps.view === 4" :connection="connection" :meta="meta"/>
+		<XCpu v-else-if="widgetProps.view === 5" :connection="connection" :meta="meta"/>
+		<XMemory v-else-if="widgetProps.view === 6" :connection="connection" :meta="meta"/>
+		<XDisk v-else-if="widgetProps.view === 7" :connection="connection" :meta="meta"/>
 	</div>
 </MkContainer>
 </template>
@@ -21,6 +23,8 @@ import { useWidgetPropsManager, Widget, WidgetComponentExpose } from '../widget'
 import XCpuMemory from './cpu-mem.vue';
 import XCpuMemoryCompact from './cpu-mem-pie.vue';
 import XNet from './net.vue';
+import XNetCompact from './net-pie.vue';
+import XCpuMemoryNetCompact from './cpu-mem-net-pie.vue';
 import XCpu from './cpu.vue';
 import XMemory from './mem.vue';
 import XDisk from './disk.vue';
@@ -69,7 +73,7 @@ os.api('server-info', {}).then(res => {
 });
 
 const toggleView = () => {
-	if (widgetProps.view === 5) {
+	if (widgetProps.view === 7) {
 		widgetProps.view = 0;
 	} else {
 		widgetProps.view++;
diff --git a/packages/frontend/src/widgets/server-metric/net-pie.vue b/packages/frontend/src/widgets/server-metric/net-pie.vue
new file mode 100644
index 0000000000..b89bd9270b
--- /dev/null
+++ b/packages/frontend/src/widgets/server-metric/net-pie.vue
@@ -0,0 +1,73 @@
+<template>
+<div :class="$style.root">
+	<!-- 基準が10MBなので、基準を超えるとグラフが壊れる問題がある -->
+	<XPie :class="$style.pie" :value="inRecent / 10000000"/>
+	<div :class="$style.div">
+		<p>NET rx</p>
+		<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text"><tspan>{{ bytes(inRecent, 1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">{{ bytesSizes(inRecent) }}</span></tspan></text>
+	</div>
+	<!-- 基準が10MBなので、基準を超えるとグラフが壊れる問題がある -->
+	<XPie :class="$style.pie" :value="outRecent / 10000000"/>
+	<div :class="$style.div">
+		<p>NET tx</p>
+		<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text"><tspan>{{ bytes(outRecent, 1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">{{ bytesSizes(outRecent) }}</span></tspan></text>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onBeforeUnmount } from 'vue';
+import XPie from './pie-compact.vue';
+import bytes from '@/filters/bytes-net-v';
+import bytesSizes from '@/filters/bytes-net-sizes';
+
+const props = defineProps<{
+	connection: any,
+	meta: any,
+	value: number
+}>();
+
+let inRecent: number = $ref(0);
+let outRecent: number = $ref(0);
+
+function onStats(connStats) {
+	inRecent = connStats.net.rx;
+	outRecent = connStats.net.tx;
+}
+
+onMounted(() => {
+	props.connection.on('stats', onStats);
+});
+
+onBeforeUnmount(() => {
+	props.connection.off('stats', onStats);
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	display: flex;
+	padding: 16px 32px;
+}
+
+.pie {
+	height: 42px;
+	flex-shrink: 0;
+	margin-right: 8px;
+}
+
+.div {
+	flex: 1;
+	margin: auto;
+
+	> p {
+		margin: 0 0 2px;
+		font-size: 0.8em;
+	}
+}
+
+.text {
+	font-weight: bold;
+	fill: currentColor;
+}
+</style>