feat: 概览、监控等界面增加单位区分显示 (#1440)

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) {
+                switch (props.option.formatStr) {
-                    res += item.marker + ' ' + item.seriesName + '：' + item.data + props.option.formatStr + '<br/>';
+                    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;
             },

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'],

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) {
+                if (chartName !== 'loadNetworkChart') {
-                    res += item.marker + ' ' + item.seriesName + '：' + item.data + formatStr + '<br/>';
+                    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 +=