Merge pull request #87 from Shenhan11/fix/node-detail-ui

optimize node detail page chart display&fix internationalization issue of time retriever

Author: Nimbus318

packages/web/projects/vgpu/views/card/admin/Detail.vue

@@ -597,7 +597,7 @@ watch(
 
     li {
       display: flex;
-      align-items: flex-start;
+      align-items: center;
       min-width: 0;
     }
 
@@ -616,7 +616,7 @@ watch(
       font-size: 14px;
       line-height: 22px;
       display: inline-flex;
-      align-items: flex-start;
+      align-items: center;
       min-width: 0;
     }
 
@@ -625,7 +625,7 @@ watch(
   &.is-en {
     .card-detail-info {
       .label {
-        width: 90px;
+        width: 110px;
       }
     }
   }

packages/web/projects/vgpu/views/node/admin/Detail.vue

@@ -134,25 +134,25 @@
     <trend-time-filter v-model="times" />
 
     <div class="line-box">
-      <block-box :title="$t('node.detail.resourceAllocTrend')">
+      <block-box :title="$t('dashboard.gpuComputeAllocUsageTrend')">
         <div class="trend-chart">
           <echarts-plus
               :options="
               getRangeOptions({
-                core: gaugeConfig[0].data,
-                memory: gaugeConfig[1].data,
+                allocation: gaugeConfig[0].data,
+                usage: gaugeConfig[2].data,
               }, t)
             "
           />
         </div>
       </block-box>
-      <block-box :title="$t('node.detail.resourceUsageTrend')">
+      <block-box :title="$t('dashboard.gpuMemAllocUsageTrend')">
         <div class="trend-chart">
           <echarts-plus
             :options="
               getRangeOptions({
-                core: gaugeConfig[2].data,
-                memory: gaugeConfig[3].data,
+                allocation: gaugeConfig[1].data,
+                usage: gaugeConfig[3].data,
               }, t)
             "
           />

packages/web/projects/vgpu/views/node/admin/getOptions.js

@@ -1,25 +1,27 @@
 import { timeParse } from '@/utils';
 
-export const getRangeOptions = ({ core = [], memory = [] }, t = (v) => v) => {
+export const getRangeOptions = ({ allocation = [], usage = [] }, t = (v) => v) => {
+  const xDataSource = allocation?.length ? allocation : usage;
   return {
     legend: {
-      bottom: 0,
-      orient: 'horizontal',
+      bottom: 10,
+      left: 'center',
     },
     tooltip: {
       trigger: 'axis',
       axisPointer: {
         type: 'cross',
       },
       formatter: function (params) {
+        if (!params || params.length === 0) return '';
         var res = params[0].name + '<br/>';
         for (var i = 0; i < params.length; i++) {
           res +=
             params[i].marker +
             params[i].seriesName +
             ' : ' +
             (+params[i].value).toFixed(0) +
-            `%<br/>`;
+            '<br/>';
         }
 
         return res;
@@ -28,12 +30,12 @@ export const getRangeOptions = ({ core = [], memory = [] }, t = (v) => v) => {
     grid: {
       top: 20, // 上边距
       bottom: 60, // 下边距
-      left: '8%', // 左边距
+      left: '7%', // 左边距
       right: 10, // 右边距
     },
     xAxis: {
       type: 'category',
-      data: core.map((item) => timeParse(+item.timestamp)),
+      data: xDataSource.map((item) => timeParse(+item.timestamp)),
       axisLabel: {
         formatter: function (value) {
           return timeParse(value, 'HH:mm');
@@ -44,31 +46,31 @@ export const getRangeOptions = ({ core = [], memory = [] }, t = (v) => v) => {
       type: 'value',
       axisLabel: {
         formatter: function (value) {
-          return `${value} %`;
+          return `${value}`;
         },
       },
     },
     series: [
       {
-        name: t('dashboard.compute'),
-        data: core,
+        name: t('dashboard.allocRateLegend'),
+        data: allocation,
         type: 'line',
         itemStyle: {
-          color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
+          color: 'rgb(84, 112, 198)',
         },
         lineStyle: {
-          color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
+          color: 'rgb(84, 112, 198)',
         },
       },
       {
-        name: t('dashboard.memory'),
-        data: memory,
+        name: t('dashboard.usageRateLegend'),
+        data: usage,
         type: 'line',
         itemStyle: {
-          color: 'rgb(145, 204, 117)', // 设置线条颜色为橙色
+          color: 'rgb(145, 204, 117)',
         },
         lineStyle: {
-          color: 'rgb(145, 204, 117)', // 设置线条颜色为橙色
+          color: 'rgb(145, 204, 117)',
         },
       },
     ],

packages/web/src/components/TrendTimeFilter.vue

@@ -9,6 +9,7 @@
       <t-date-range-picker
         v-if="showCustomDateRangePicker"
         v-model="customDateRange"
+        :placeholder="[t('common.pleaseSelectDate'), t('common.pleaseSelectDate')]"
         :separator="t('common.to')"
         enable-time-picker
         allow-input

packages/web/src/layout/components/TopBar/logo.vue

@@ -7,7 +7,7 @@
         class="navbar__icon"
       />
     </div>
-    <b class="navbar__title text--truncate">HAMi</b>
+    <b class="navbar__title text--truncate">HAMi WebUI</b>
   </a>
 </template>
 

packages/web/src/locales/en.js

@@ -21,6 +21,7 @@ export default {
     search: 'Search',
     reset: 'Reset',
     pleaseSelect: 'Please select',
+    pleaseSelectDate: 'Please select date',
     pleaseInput: 'Please enter',
     advanced: 'Advanced',
     operation: 'Operation',
@@ -242,8 +243,8 @@ export default {
     appName: 'App Name',
     createTime: 'Creation Time',
     times: 'x',
-    computeUsageTrend: 'Compute Usage Trend (%)',
-    memUsageTrend: 'Memory Usage Trend (%)',
+    computeUsageTrend: 'GPU Compute Usage Trend (%)',
+    memUsageTrend: 'GPU Memory Usage Trend (%)',
     noMonitorSupport: 'Vendor does not support task-level monitoring',
     topCount: 'Workload Count Top5',
     topApply: 'Workload Requests Top5',

packages/web/src/locales/zh.js

@@ -21,6 +21,7 @@ export default {
     search: '搜索',
     reset: '重置',
     pleaseSelect: '请选择',
+    pleaseSelectDate: '请选择日期',
     pleaseInput: '请输入',
     advanced: '高级',
     operation: '操作',