fix: Fix the issue of abnormal display on the monitoring page (#8007)

frontend/src/lang/modules/en.ts

@@ -338,7 +338,7 @@ const message = {
         aiTools: 'AI',
         container: 'Container',
         cronjob: 'Cronjob',
-        host: 'Host',
+        system: 'System',
         security: 'Security',
         files: 'File',
         monitor: 'Monitor',

frontend/src/lang/modules/ja.ts

@@ -332,7 +332,6 @@ const message = {
         aiTools: 'AI',
         container: 'コンテナ|コンテナ',
         cronjob: 'クロンジョブ|クロンの仕事',
-        host: 'ホスト|ホスト',
         system: 'システム',
         security: '安全',
         files: 'ファイル',

frontend/src/lang/modules/ko.ts

@@ -333,7 +333,6 @@ const message = {
         aiTools: 'AI',
         container: '컨테이너 | 컨테이너들',
         cronjob: '크론 작업 | 크론 작업들',
-        host: '호스트 | 호스트들',
         system: '시스템',
         security: '보안',
         files: '파일',

frontend/src/lang/modules/ms.ts

@@ -339,7 +339,6 @@ const message = {
         aiTools: 'AI',
         container: 'Container | Containers',
         cronjob: 'Cron Job | Cron Jobs',
-        host: 'Host | Hosts',
         system: 'System',
         security: 'Security',
         files: 'Files',

frontend/src/lang/modules/pt-br.ts

@@ -337,7 +337,6 @@ const message = {
         aiTools: 'AI',
         container: 'Container | Containers',
         cronjob: 'Tarefa Cron | Tarefas Cron',
-        host: 'Host | Hosts',
         system: 'Sistema',
         security: 'Segurança',
         files: 'Arquivos',

frontend/src/lang/modules/ru.ts

@@ -333,7 +333,6 @@ const message = {
         aiTools: 'AI',
         container: 'Контейнер | Контейнеры',
         cronjob: 'Cron | Задачи Cron',
-        host: 'Хост | Хосты',
         system: 'Система',
         security: 'Безопасность',
         files: 'Файлы',

frontend/src/lang/modules/tw.ts

@@ -332,7 +332,7 @@ const message = {
         aiTools: 'AI',
         container: '容器',
         cronjob: '計劃任務',
-        host: '主機',
+        system: '系統',
         files: '文件',
         monitor: '監控',
         terminal: '終端',

frontend/src/lang/modules/zh.ts

@@ -330,7 +330,7 @@ const message = {
         aiTools: 'AI',
         container: '容器',
         cronjob: '计划任务',
-        host: '主机',
+        system: '系统',
         files: '文件',
         monitor: '监控',
         terminal: '终端',

frontend/src/routers/modules/host.ts

@@ -7,7 +7,7 @@ const hostRouter = {
     redirect: '/hosts/security',
     meta: {
         icon: 'p-host',
-        title: 'menu.host',
+        title: 'menu.system',
     },
     children: [
         {

frontend/src/views/home/app/index.vue

@@ -4,7 +4,7 @@
             <template #header-r>
                 <el-popover placement="left" :width="226" trigger="click">
                     <el-input size="small" v-model="filter" clearable @input="loadOption()" />
-                    <el-table :show-header="false" :data="options" stripe max-height="500px">
+                    <el-table :show-header="false" :data="options" max-height="500px">
                         <el-table-column prop="key" width="120" show-overflow-tooltip />
                         <el-table-column prop="name">
                             <template #default="{ row }">

frontend/src/views/host/monitor/monitor/index.vue

@@ -4,25 +4,26 @@
 
         <div class="content-container__search">
             <el-card>
-                <span style="font-size: 14px">{{ $t('monitor.globalFilter') }}</span>
+                <div :class="mobile ? 'flx-wrap' : 'flex justify-between'">
-                <el-date-picker
+                    <el-date-picker
-                    @change="searchGlobal()"
+                        @change="searchGlobal()"
-                    v-model="timeRangeGlobal"
+                        v-model="timeRangeGlobal"
-                    type="datetimerange"
+                        type="datetimerange"
-                    range-separator="-"
+                        range-separator="-"
-                    :start-placeholder="$t('commons.search.timeStart')"
+                        :start-placeholder="$t('commons.search.timeStart')"
-                    :end-placeholder="$t('commons.search.timeEnd')"
+                        :end-placeholder="$t('commons.search.timeEnd')"
-                    :shortcuts="shortcuts"
+                        :shortcuts="shortcuts"
-                    style="max-width: 360px; width: 100%; margin-left: 10px"
+                        style="max-width: 360px; width: 100%"
-                    :size="mobile ? 'small' : 'default'"
+                        :size="mobile ? 'small' : 'default'"
-                ></el-date-picker>
+                    ></el-date-picker>
+                </div>
             </el-card>
         </div>
         <el-row :gutter="20" style="margin-top: 20px">
             <el-col :span="24">
                 <el-card style="overflow: inherit">
                     <template #header>
-                        <div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
+                        <div :class="mobile ? 'flx-wrap' : 'flex justify-between'">
                             <span class="title">{{ $t('monitor.avgLoad') }}</span>
                             <el-date-picker
                                 @change="search('load')"
@@ -54,7 +55,7 @@
             <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                 <el-card style="overflow: inherit">
                     <template #header>
-                        <div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
+                        <div :class="mobile ? 'flx-wrap' : 'flex justify-between'">
                             <span class="title">CPU</span>
                             <el-date-picker
                                 @change="search('cpu')"
@@ -84,7 +85,7 @@
             <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                 <el-card style="overflow: inherit">
                     <template #header>
-                        <div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
+                        <div :class="mobile ? 'flx-wrap' : 'flex justify-between'">
                             <span class="title">{{ $t('monitor.memory') }}</span>
                             <el-date-picker
                                 @change="search('memory')"
@@ -116,8 +117,8 @@
             <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                 <el-card style="overflow: inherit">
                     <template #header>
-                        <div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
+                        <div :class="mobile ? 'flx-wrap' : 'flex justify-between'">
-                            <span class="title">{{ $t('monitor.disk') }} IO</span>
+                            <span class="title">{{ $t('monitor.disk') }} I/O</span>
                             <el-date-picker
                                 @change="search('io')"
                                 v-model="timeRangeIO"
@@ -146,23 +147,22 @@
             <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                 <el-card style="overflow: inherit">
                     <template #header>
-                        <div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
+                        <div :class="mobile ? 'flx-wrap' : 'flex justify-between'">
                             <div>
-                                <span class="title">{{ $t('monitor.network') }} IO:</span>
+                                <span class="title">{{ $t('monitor.network') }}{{ $t('commons.colon') }}</span>
-                                <el-dropdown max-height="300px" @command="onChangeNetwork">
+                                <el-dropdown>
                                     <span class="networkOption">
                                         {{ networkChoose === 'all' ? $t('commons.table.all') : networkChoose }}
-                                        <el-icon>
-                                            <arrow-down />
-                                        </el-icon>
                                     </span>
                                     <template #dropdown>
                                         <el-dropdown-menu>
                                             <div v-for="item in netOptions" :key="item">
-                                                <el-dropdown-item v-if="item === 'all'" command="all">
+                                                <el-dropdown-item v-if="item === 'all'" @click="changeNetwork('all')">
                                                     {{ $t('commons.table.all') }}
                                                 </el-dropdown-item>
-                                                <el-dropdown-item v-else :command="item">{{ item }}</el-dropdown-item>
+                                                <el-dropdown-item v-else @click="changeNetwork(item)">
+                                                    {{ item }}
+                                                </el-dropdown-item>
                                             </div>
                                         </el-dropdown-menu>
                                     </template>
@@ -246,11 +246,6 @@ const searchGlobal = () => {
     search('network');
 };
 
-const onChangeNetwork = (command: string) => {
-    networkChoose.value = command;
-    search('network');
-};
-
 const search = async (param: string) => {
     searchInfo.param = param;
     switch (param) {
@@ -366,6 +361,11 @@ const search = async (param: string) => {
     }
 };
 
+const changeNetwork = (item: string) => {
+    networkChoose.value = item;
+    search('network');
+};
+
 const loadNetworkOptions = async () => {
     const res = await getNetworkOptions();
     netOptions.value = res.data;
@@ -399,15 +399,15 @@ function initLoadCharts(item: Host.MonitorData) {
         xData: loadDate,
         yData: [
             {
-                name: '1 ' + i18n.global.t('commons.units.minute'),
+                name: '1 ' + i18n.global.t('commons.units.minute', 1),
                 data: load1Data,
             },
             {
-                name: '5 ' + i18n.global.t('commons.units.minute'),
+                name: '5 ' + i18n.global.t('commons.units.minute', 5),
                 data: load5Data,
             },
             {
-                name: '15 ' + i18n.global.t('commons.units.minute'),
+                name: '15 ' + i18n.global.t('commons.units.minute', 15),
                 data: load15Data,
             },
             {
@@ -417,7 +417,7 @@ function initLoadCharts(item: Host.MonitorData) {
             },
         ],
         yAxis: [
-            { type: 'value', name: i18n.global.t('monitor.loadDetail') + ' ( % )' },
+            { type: 'value', name: i18n.global.t('monitor.loadDetail') },
             {
                 type: 'value',
                 name: i18n.global.t('monitor.resourceUsage') + ' ( % )',
@@ -426,7 +426,22 @@ function initLoadCharts(item: Host.MonitorData) {
             },
         ],
         grid: mobile.value ? { left: '15%', right: '15%', bottom: '20%' } : null,
-        formatStr: '%',
+        tooltip: {
+            trigger: 'axis',
+            formatter: function (datas: any) {
+                let res = datas[0].name + '<br/>';
+                for (const item of datas) {
+                    if (item.seriesName === i18n.global.t('monitor.resourceUsage')) {
+                        res +=
+                            item.marker + ' ' + item.seriesName + i18n.global.t('commons.colon') + item.data + '%<br/>';
+                    } else {
+                        res +=
+                            item.marker + ' ' + item.seriesName + i18n.global.t('commons.colon') + item.data + '<br/>';
+                    }
+                }
+                return res;
+            },
+        },
     };
 }
 
@@ -482,14 +497,20 @@ function initIOCharts(item: Host.MonitorData) {
                         item.seriesName === i18n.global.t('monitor.read') ||
                         item.seriesName === i18n.global.t('monitor.write')
                     ) {
-                        res += item.marker + ' ' + item.seriesName + '：' + computeSizeFromKBs(item.data) + '<br/>';
+                        res +=
+                            item.marker +
+                            ' ' +
+                            item.seriesName +
+                            i18n.global.t('commons.colon') +
+                            computeSizeFromKBs(item.data) +
+                            '<br/>';
                     }
                     if (item.seriesName === i18n.global.t('monitor.readWriteCount')) {
                         res +=
                             item.marker +
                             ' ' +
                             item.seriesName +
-                            '：' +
+                            i18n.global.t('commons.colon') +
                             item.data +
                             ' ' +
                             i18n.global.t('commons.units.time') +
@@ -497,7 +518,14 @@ function initIOCharts(item: Host.MonitorData) {
                             '<br/>';
                     }
                     if (item.seriesName === i18n.global.t('monitor.readWriteTime')) {
-                        res += item.marker + ' ' + item.seriesName + '：' + item.data + ' ms' + '<br/>';
+                        res +=
+                            item.marker +
+                            ' ' +
+                            item.seriesName +
+                            i18n.global.t('commons.colon') +
+                            item.data +
+                            ' ms' +
+                            '<br/>';
                     }
                 }
                 return res;
@@ -550,7 +578,7 @@ onMounted(() => {
 .networkOption {
     font-size: 16px;
     font-weight: 500;
-    margin-left: 5px;
+    margin-top: 3px;
     cursor: pointer;
     color: var(--el-color-primary);
 }

frontend/src/views/terminal/index.vue

@@ -6,7 +6,7 @@
                     {{ $t('menu.terminal') }}
                 </el-radio-button>
                 <el-radio-button class="router_card_button" size="large" value="host">
-                    {{ $t('menu.host') }}
+                    {{ $t('terminal.host') }}
                 </el-radio-button>
                 <el-radio-button class="router_card_button" size="large" value="command">
                     {{ $t('terminal.quickCommand') }}