From 14f7435f823f5b8a9ebe583c84cb922eca85997b Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Sun, 25 Jun 2023 17:50:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A6=82=E8=A7=88=E3=80=81=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E7=AD=89=E7=95=8C=E9=9D=A2=E5=A2=9E=E5=8A=A0=E5=8D=95?=
 =?UTF-8?q?=E4=BD=8D=E5=8C=BA=E5=88=86=E6=98=BE=E7=A4=BA=20(#1440)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/v-charts/components/Line.vue   | 26 +++++++++++++++++--
 frontend/src/utils/util.ts                    | 15 +++++++++++
 .../src/views/host/monitor/monitor/index.vue  | 14 +++++++---
 3 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/v-charts/components/Line.vue b/frontend/src/components/v-charts/components/Line.vue
index ab7edb8b0..94b410e59 100644
--- a/frontend/src/components/v-charts/components/Line.vue
+++ b/frontend/src/components/v-charts/components/Line.vue
@@ -5,6 +5,7 @@
 import { onMounted, onUnmounted, nextTick, watch } from 'vue';
 import * as echarts from 'echarts';
 import { GlobalStore } from '@/store';
+import { computeSizeFromKBs, computeSizeFromMB } from '@/utils/util';
 const globalStore = GlobalStore();
 const props = defineProps({
     id: {
@@ -99,8 +100,29 @@ function initChart() {
             trigger: 'axis',
             formatter: function (datas: any) {
                 let res = datas[0].name + '<br/>';
-                for (const item of datas) {
-                    res += item.marker + ' ' + item.seriesName + '：' + item.data + props.option.formatStr + '<br/>';
+                switch (props.option.formatStr) {
+                    case 'KB/s':
+                        for (const item of datas) {
+                            res += item.marker + ' ' + item.seriesName + '：' + computeSizeFromKBs(item.data) + '<br/>';
+                        }
+                        break;
+                    case 'MB':
+                        for (const item of datas) {
+                            res += item.marker + ' ' + item.seriesName + '：' + computeSizeFromMB(item.data) + '<br/>';
+                        }
+                        break;
+                    default:
+                        for (const item of datas) {
+                            res +=
+                                item.marker +
+                                ' ' +
+                                item.seriesName +
+                                '：' +
+                                item.data +
+                                props.option.formatStr +
+                                '<br/>';
+                        }
+                        break;
                 }
                 return res;
             },
diff --git a/frontend/src/utils/util.ts b/frontend/src/utils/util.ts
index 2509b6f66..8309c5db4 100644
--- a/frontend/src/utils/util.ts
+++ b/frontend/src/utils/util.ts
@@ -129,6 +129,21 @@ export function computeSize(size: number): string {
     return (size / Math.pow(num, 4)).toFixed(2) + ' TB';
 }
 
+export function computeSizeFromMB(size: number): string {
+    const num = 1024.0;
+    if (size < num) return size + ' MB';
+    if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + ' GB';
+    return (size / Math.pow(num, 3)).toFixed(2) + ' TB';
+}
+
+export function computeSizeFromKBs(size: number): string {
+    const num = 1024.0;
+    if (size < num) return size + ' KB/s';
+    if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + ' MB/s';
+    if (size < Math.pow(num, 3)) return (size / Math.pow(num, 2)).toFixed(2) + ' GB/s';
+    return (size / Math.pow(num, 3)).toFixed(2) + ' TB/s';
+}
+
 let icons = new Map([
     ['.zip', 'p-file-zip'],
     ['.gz', 'p-file-zip'],
diff --git a/frontend/src/views/host/monitor/monitor/index.vue b/frontend/src/views/host/monitor/monitor/index.vue
index 6874c05a6..06c2ed501 100644
--- a/frontend/src/views/host/monitor/monitor/index.vue
+++ b/frontend/src/views/host/monitor/monitor/index.vue
@@ -144,7 +144,7 @@ import { ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue';
 import * as echarts from 'echarts';
 import { loadMonitor, getNetworkOptions } from '@/api/modules/monitor';
 import { Monitor } from '@/api/interface/monitor';
-import { dateFormatWithoutYear } from '@/utils/util';
+import { computeSizeFromKBs, dateFormatWithoutYear } from '@/utils/util';
 import i18n from '@/lang';
 import MonitorRouter from '@/views/host/monitor/index.vue';
 import { GlobalStore } from '@/store';
@@ -380,8 +380,14 @@ function initCharts(chartName: string, xDatas: any, yDatas: any, yTitle: string,
             trigger: 'axis',
             formatter: function (datas: any) {
                 let res = datas[0].name + '<br/>';
-                for (const item of datas) {
-                    res += item.marker + ' ' + item.seriesName + '：' + item.data + formatStr + '<br/>';
+                if (chartName !== 'loadNetworkChart') {
+                    for (const item of datas) {
+                        res += item.marker + ' ' + item.seriesName + '：' + item.data + formatStr + '<br/>';
+                    }
+                } else {
+                    for (const item of datas) {
+                        res += item.marker + ' ' + item.seriesName + '：' + computeSizeFromKBs(item.data) + '<br/>';
+                    }
                 }
                 return res;
             },
@@ -574,7 +580,7 @@ function initIOCharts(item: Monitor.MonitorData) {
                         item.seriesName === i18n.global.t('monitor.read') ||
                         item.seriesName === i18n.global.t('monitor.write')
                     ) {
-                        res += item.marker + ' ' + item.seriesName + '：' + item.data + ' KB/s' + '<br/>';
+                        res += item.marker + ' ' + item.seriesName + '：' + computeSizeFromKBs(item.data) + '<br/>';
                     }
                     if (item.seriesName === i18n.global.t('monitor.readWriteCount')) {
                         res +=