fix: dashboard intl settings

config/config.ts

@@ -44,23 +44,12 @@ export default defineConfig({
                 minRatio: 0.8
               }
             ]);
-          // config.module
+        },
-          //   .rule('images')
+        terserOptions: {
-          //   .test(/\.(png|jpe?g|gif|svg|ico)(\?.*)?$/)
+          compress: {
-          //   .use('url-loader')
+            drop_console: true,
-          //   .loader(require.resolve('url-loader'))
+            drop_debugger: true
-          //   .tap((options: any) => {
+          }
-          //     return {
-          //       ...options,
-          //       limit: 8192, // 小于8KB的图片会被转为base64
-          //       fallback: {
-          //         loader: require.resolve('file-loader'),
-          //         options: {
-          //           name: 'static/[name].[hash:8].[ext]' // 将所有图片输出到 static 目录
-          //         }
-          //       }
-          //     };
-          //   });
         }
       }
     : {}),

src/assets/styles/menu.less

@@ -1,6 +1,5 @@
 .ant-pro-layout {
   .ant-pro-sider {
-    padding: 10px;
     // &.ant-layout-sider {
     //   background: var(--color-white-1);
     // }

src/components/charts/column-bar.tsx

@@ -1,5 +1,7 @@
 import { Column } from '@ant-design/plots';
 
+import EmptyData from './empty-data';
+
 interface BarChartProps {
   data: any[];
   xField: string;
@@ -99,7 +101,11 @@ const BarChart: React.FC<BarChartProps> = (props) => {
 
   return (
     <>
-      <Column {...config} />
+      {data.length > 0 ? (
+        <Column {...config} />
+      ) : (
+        <EmptyData height={height} title={title} />
+      )}
     </>
   );
 };

src/components/charts/empty-data.tsx

@@ -0,0 +1,32 @@
+import { Empty } from 'antd';
+import React from 'react';
+
+const EmptyData: React.FC<{
+  height: string | number;
+  title: React.ReactNode;
+}> = ({ height, title }) => {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: height || '100%'
+      }}
+      className="flex-center  flex-column "
+    >
+      <h3
+        className="justify-center"
+        style={{ padding: '16px 0', marginBottom: 0 }}
+      >
+        {title}
+      </h3>
+      <div
+        className="flex-center justify-center flex-column"
+        style={{ height: '100%' }}
+      >
+        <Empty />
+      </div>
+    </div>
+  );
+};
+
+export default EmptyData;

src/components/charts/h-bar.tsx

@@ -1,4 +1,5 @@
 import { Bar } from '@ant-design/plots';
+import EmptyData from './empty-data';
 
 interface BarChartProps {
   data: any[];
@@ -11,6 +12,7 @@ interface BarChartProps {
   seriesField?: string;
   stack?: boolean;
   legend?: any;
+  showYAxis?: boolean;
 }
 const BarChart: React.FC<BarChartProps> = (props) => {
   const {
@@ -23,6 +25,7 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     colorField,
     seriesField,
     stack,
+    showYAxis = true,
     legend = undefined
   } = props;
   const config = {
@@ -57,9 +60,11 @@ const BarChart: React.FC<BarChartProps> = (props) => {
         xAxis: true,
         tick: false
       },
-      y: {
+      y: showYAxis
-        tick: false
+        ? {
-      }
+            tick: false
+          }
+        : null
     },
     title: {
       title,
@@ -94,7 +99,11 @@ const BarChart: React.FC<BarChartProps> = (props) => {
 
   return (
     <>
-      <Bar {...config} />
+      {data.length === 0 ? (
+        <EmptyData height={height} title={title} />
+      ) : (
+        <Bar {...config} />
+      )}
     </>
   );
 };

src/components/charts/line-chart.tsx

@@ -7,12 +7,22 @@ interface LineChartProps {
   color?: string[];
   xField?: string;
   yField?: string;
+  locale: string;
   labelFormatter?: (v: any) => string;
   slider?: any;
 }
 const LineChart: React.FC<LineChartProps> = (props) => {
-  const { data, title, color, xField, yField, slider, height, labelFormatter } =
+  const {
-    props;
+    data,
+    title,
+    color,
+    xField,
+    locale,
+    yField,
+    slider,
+    height,
+    labelFormatter
+  } = props;
   const config = {
     title,
     height,
@@ -56,6 +66,7 @@ const LineChart: React.FC<LineChartProps> = (props) => {
       color: {
         layout: { justifyContent: 'center' }
       },
+
       size: {
         itemLabelFontSize: 14,
         itemLabelFontWeight: 500

src/components/util-bar/index.tsx

@@ -16,7 +16,7 @@ const UitilBar: React.FC<UitilBarProps> = (props) => {
     percent,
     steps = 10,
     gapDegree = 170,
-    strokeWidth = 12,
+    strokeWidth = 10,
     title,
     size = 160,
     strokeColor,

src/locales/en-US.ts

@@ -1,5 +1,6 @@
 import apikeys from './en-US/apikeys';
 import common from './en-US/common';
+import dashboard from './en-US/dashboard';
 import menu from './en-US/menu';
 import models from './en-US/models';
 import playground from './en-US/playground';
@@ -13,5 +14,6 @@ export default {
   ...playground,
   ...resources,
   ...apikeys,
-  ...users
+  ...users,
+  ...dashboard
 };

src/locales/en-US/dashboard.ts

@@ -0,0 +1,24 @@
+export default {
+  'dashboard.title': 'Dashboard',
+  'dashboard.workers': 'Workers',
+  'dashboard.models': 'Models',
+  'dashboard.totalgpus': 'Total GPUs',
+  'dashboard.allocategpus': 'Allocated GPUs',
+  'dashboard.instances': 'Instances',
+  'dashboard.systemload': 'System Load',
+  'dashboard.memory': 'Memory',
+  'dashboard.disk': 'Storage',
+  'dashboard.vram': 'VRAM',
+  'dashboard.cpuutilization': 'CPU Utilization',
+  'dashboard.memoryutilization': 'Memory Utilization',
+  'dashboard.diskutilization': 'Storage Utilization',
+  'dashboard.vramutilization': 'VRAM Utilization',
+  'dashboard.gpuutilization': 'GPU Utilization',
+  'dashboard.usage': 'Usage',
+  'dashboard.apirequest': 'API Request',
+  'dashboard.tokens': 'Tokens',
+  'dashboard.topusers': 'Top Users',
+  'dashboard.activeModels': 'Active Models',
+  'dashboard.runninginstances': 'Running Instances',
+  'dashboard.activeModels.name': 'Model Name'
+};

src/locales/en-US/resources.ts

@@ -7,5 +7,12 @@ export default {
   'resources.table.memory': 'Memory',
   'resources.table.gpu': 'GPU',
   'resources.table.disk': 'Storage',
-  'resources.table.vram': 'VRAM'
+  'resources.table.vram': 'VRAM',
+  'resources.table.index': 'Index',
+  'resources.table.workername': 'Wroker Name',
+  'resources.table.vender': 'Vender',
+  'resources.table.temperature': 'Temperature',
+  'resources.table.core': 'Core',
+  'resources.table.gpuutilization': 'GPU Utilization',
+  'resources.table.vramutilization': 'VRAM Utilization'
 };

src/locales/zh-CN.ts

@@ -1,5 +1,6 @@
 import apikeys from './zh-CN/apikeys';
 import common from './zh-CN/common';
+import dashboard from './zh-CN/dashboard';
 import menu from './zh-CN/menu';
 import models from './zh-CN/models';
 import playground from './zh-CN/playground';
@@ -13,5 +14,6 @@ export default {
   ...playground,
   ...resources,
   ...apikeys,
-  ...users
+  ...users,
+  ...dashboard
 };

src/locales/zh-CN/dashboard.ts

@@ -0,0 +1,24 @@
+export default {
+  'dashboard.title': '概览',
+  'dashboard.workers': '节点',
+  'dashboard.models': '模型',
+  'dashboard.totalgpus': '总 GPU 数量',
+  'dashboard.allocategpus': '已分配 GPU 数量',
+  'dashboard.instances': '实例',
+  'dashboard.systemload': '系统负载',
+  'dashboard.memory': '内存',
+  'dashboard.disk': '磁盘',
+  'dashboard.vram': '显存',
+  'dashboard.cpuutilization': 'CPU 利用率',
+  'dashboard.memoryutilization': '内存利用率',
+  'dashboard.diskutilization': '磁盘利用率',
+  'dashboard.vramutilization': '显存利用率',
+  'dashboard.gpuutilization': 'GPU 利用率',
+  'dashboard.usage': '使用量',
+  'dashboard.apirequest': 'API 请求',
+  'dashboard.tokens': 'Tokens',
+  'dashboard.topusers': '用户排行',
+  'dashboard.activeModels': '活跃模型',
+  'dashboard.activeModels.name': '模型名称',
+  'dashboard.runninginstances': '运行实例'
+};

src/locales/zh-CN/resources.ts

@@ -7,5 +7,12 @@ export default {
   'resources.table.memory': '内存',
   'resources.table.gpu': 'GPU',
   'resources.table.disk': '磁盘',
-  'resources.table.vram': '显存'
+  'resources.table.vram': '显存',
+  'resources.table.index': '序号',
+  'resources.table.workername': '节点名称',
+  'resources.table.vender': '厂商',
+  'resources.table.temperature': '温度',
+  'resources.table.core': '核数',
+  'resources.table.gpuutilization': 'GPU 利用率',
+  'resources.table.vramutilization': '显存利用率'
 };

src/pages/dashboard/components/active-table.tsx

@@ -1,44 +1,11 @@
 import PageTools from '@/components/page-tools';
 import ProgressBar from '@/components/progress-bar';
+import { useIntl } from '@umijs/max';
 import { Col, Row, Table } from 'antd';
 import _ from 'lodash';
 import { useContext } from 'react';
 import { DashboardContext } from '../config/dashboard-context';
 
-const modelColumns = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-    key: 'name'
-  },
-  {
-    title: 'GPU Utilization',
-    dataIndex: 'gpu_utilization',
-    key: 'gpu_utilization',
-    render: (text: any, record: any) => (
-      <ProgressBar percent={_.round(text, 0)}></ProgressBar>
-    )
-  },
-  {
-    title: 'VRAM Utilization',
-    dataIndex: 'gpu_memory_utilization',
-    key: 'gpu_memory_utilization',
-    render: (text: any, record: any) => (
-      <ProgressBar percent={_.round(text, 0)}></ProgressBar>
-    )
-  },
-  {
-    title: 'Running Instances',
-    dataIndex: 'instance_count',
-    key: 'instance_count'
-  },
-  {
-    title: 'Tokens',
-    dataIndex: 'token_count',
-    key: 'token_count'
-  }
-];
-
 const projectColumns = [
   {
     title: 'Name',
@@ -102,7 +69,41 @@ const projectData = [
   }
 ];
 const ActiveTable = () => {
+  const intl = useIntl();
   const data = useContext(DashboardContext).active_models || [];
+  const modelColumns = [
+    {
+      title: intl.formatMessage({ id: 'dashboard.activeModels.name' }),
+      dataIndex: 'name',
+      key: 'name'
+    },
+    {
+      title: intl.formatMessage({ id: 'dashboard.gpuutilization' }),
+      dataIndex: 'gpu_utilization',
+      key: 'gpu_utilization',
+      render: (text: any, record: any) => (
+        <ProgressBar percent={_.round(text, 0)}></ProgressBar>
+      )
+    },
+    {
+      title: intl.formatMessage({ id: 'dashboard.vramutilization' }),
+      dataIndex: 'gpu_memory_utilization',
+      key: 'gpu_memory_utilization',
+      render: (text: any, record: any) => (
+        <ProgressBar percent={_.round(text, 0)}></ProgressBar>
+      )
+    },
+    {
+      title: intl.formatMessage({ id: 'dashboard.runninginstances' }),
+      dataIndex: 'instance_count',
+      key: 'instance_count'
+    },
+    {
+      title: 'Tokens',
+      dataIndex: 'token_count',
+      key: 'token_count'
+    }
+  ];
   return (
     <Row gutter={[20, 0]}>
       <Col xs={24} sm={24} md={24} lg={24} xl={24}>
@@ -112,7 +113,7 @@ const ActiveTable = () => {
             <span
               style={{ fontSize: 'var(--font-size-large)', padding: '9px 0' }}
             >
-              Active Models
+              {intl.formatMessage({ id: 'dashboard.activeModels' })}
             </span>
           }
           right={false}

src/pages/dashboard/components/over-view.tsx

@@ -1,3 +1,4 @@
+import { useIntl } from '@umijs/max';
 import { Card, Col, Row, Space } from 'antd';
 import _ from 'lodash';
 import React, { useContext } from 'react';
@@ -26,6 +27,7 @@ const renderCardItem = (data: {
   );
 };
 const Overview: React.FC = () => {
+  const intl = useIntl();
   const data = useContext(DashboardContext).resource_counts || {};
 
   const renderValue = (
@@ -61,7 +63,7 @@ const Overview: React.FC = () => {
             key={config.key}
           >
             {renderCardItem({
-              label: config.label,
+              label: intl.formatMessage({ id: config.label }),
               value: renderValue(_.get(data, config.key, 0)),
               bgColor: config.backgroundColor
             })}

src/pages/dashboard/components/resource-utilization.tsx

@@ -1,32 +1,43 @@
 import LineChart from '@/components/charts/line-chart';
+import { getLocale, useIntl } from '@umijs/max';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import { useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { DashboardContext } from '../config/dashboard-context';
 
 const TypeKeyMap = {
   cpu: {
     label: 'CPU',
+    type: 'CPU',
+    intl: false,
     color:
       'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgba(0, 168, 143,.7) 100%)'
   },
   memory: {
-    label: 'Memory',
+    label: 'dashboard.memory',
+    type: 'Memory',
+    intl: true,
     color:
       'linear-gradient(90deg,rgba(249, 248, 113,.8) 0%,rgba(255, 199, 92,0.7) 100%)'
   },
   gpu: {
     label: 'GPU',
+    type: 'GPU',
+    intl: false,
     color: 'rgba(84, 204, 152,0.8)'
   },
   gpu_memory: {
-    label: 'VRAM',
+    label: 'dashboard.vram',
+    type: 'VRAM',
+    intl: true,
     color:
       'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgba(0, 168, 143,.7) 100%)'
   }
 };
 
 const UtilizationOvertime: React.FC = () => {
+  const intl = useIntl();
+  const locale = getLocale();
   const data = useContext(DashboardContext)?.system_load?.history || {};
   const [result, setResult] = useState<
     { time: string; value: number; type: string }[]
@@ -52,30 +63,38 @@ const UtilizationOvertime: React.FC = () => {
   const labelFormatter = (value: any) => {
     return `${value}%`;
   };
-  const generateData = () => {
+  const generateData = useCallback(() => {
     const list: { value: number; time: string; type: string }[] = [];
     _.each(typeList, (type: any) => {
       const dataList = _.map(_.get(data, type, []), (item: any) => {
+        const value = _.get(item, 'value', 0);
+        const time = dayjs(item.timestamp * 1000).format('HH:mm:ss');
+        const itemtype = _.get(TypeKeyMap, [type, 'intl'], false)
+          ? intl.formatMessage({
+              id: _.get(TypeKeyMap, [type, 'label'], '')
+            })
+          : _.get(TypeKeyMap, [type, 'label'], '');
         return {
-          value: _.round(item.value, 2) || 0,
+          value,
-          time: dayjs(item.timestamp * 1000).format('HH:mm:ss'),
+          time,
-          type: _.get(TypeKeyMap, [type, 'label'], ''),
+          type: itemtype,
           color: 'red'
         };
       });
       list.push(...dataList);
     });
     setResult(list);
-  };
+  }, [data, locale]);
 
   useEffect(() => {
     generateData();
-  }, [data]);
+  }, [data, locale]);
 
   return (
     <>
       <LineChart
         data={result}
+        locale={locale}
         labelFormatter={labelFormatter}
         slider={sliderConfig}
       />

src/pages/dashboard/components/system-load.tsx

@@ -2,6 +2,7 @@ import CardWrapper from '@/components/card-wrapper';
 import PageTools from '@/components/page-tools';
 import breakpoints from '@/config/breakpoints';
 import useWindowResize from '@/hooks/use-window-resize';
+import { useIntl } from '@umijs/max';
 import { Col, DatePicker, Row } from 'antd';
 import _ from 'lodash';
 import { useContext, useEffect, useState } from 'react';
@@ -15,6 +16,7 @@ const SystemLoad = () => {
     'linear-gradient(90deg, rgba(255, 214, 102,.8) 0%, rgba(255, 214, 102,0.5) 50%,  rgba(255, 214, 102,.8) 100%)',
     'linear-gradient(90deg, rgba(255, 120, 117,.8) 0%, rgba(255, 120, 117,0.5) 50%,  rgba(255, 120, 117,.8) 100%)'
   ];
+  const intl = useIntl();
   const data = useContext(DashboardContext)?.system_load?.current || {};
   const { size } = useWindowResize();
   const [paddingRight, setPaddingRight] = useState<string>('20px');
@@ -40,7 +42,7 @@ const SystemLoad = () => {
           style={{ margin: '32px 8px' }}
           left={
             <span style={{ fontSize: 'var(--font-size-large)' }}>
-              System Load
+              {intl.formatMessage({ id: 'dashboard.systemload' })}
             </span>
           }
           right={
@@ -65,25 +67,33 @@ const SystemLoad = () => {
               <Row style={{ height: largeChartHeight, width: '100%' }}>
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <UitilBar
-                    title="GPU Utilization"
+                    title={intl.formatMessage({
+                      id: 'dashboard.gpuutilization'
+                    })}
                     percent={_.round(data.gpu?.utilization_rate || 0, 1)}
                   ></UitilBar>
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <UitilBar
-                    title="VRAM Utilization"
+                    title={intl.formatMessage({
+                      id: 'dashboard.vramutilization'
+                    })}
                     percent={_.round(data.gpu_memory?.utilization_rate || 0, 1)}
                   ></UitilBar>
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <UitilBar
-                    title="CPU Utilization"
+                    title={intl.formatMessage({
+                      id: 'dashboard.cpuutilization'
+                    })}
                     percent={_.round(data.cpu?.utilization_rate || 0, 1)}
                   ></UitilBar>
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <UitilBar
-                    title="CPU Memory Utilization"
+                    title={intl.formatMessage({
+                      id: 'dashboard.memoryutilization'
+                    })}
                     percent={_.round(data.memory?.utilization_rate || 0, 1)}
                   ></UitilBar>
                 </Col>

src/pages/dashboard/components/usage.tsx

@@ -5,6 +5,7 @@ import PageTools from '@/components/page-tools';
 import breakpoints from '@/config/breakpoints';
 import useWindowResize from '@/hooks/use-window-resize';
 import { generateRandomArray } from '@/utils';
+import { useIntl } from '@umijs/max';
 import { Col, DatePicker, Row } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
@@ -93,6 +94,7 @@ const tokenUsage = TokensData.map((val, i) => {
 });
 
 const Usage = () => {
+  const intl = useIntl();
   const { size } = useWindowResize();
   const [paddingRight, setPaddingRight] = useState<string>('20px');
   const [requestData, setRequestData] = useState<
@@ -125,14 +127,14 @@ const Usage = () => {
 
     _.each(data.api_request_history, (item: any) => {
       requestList.push({
-        time: dayjs(item.timestamp * 1000).format('YYYY-MM-DD'),
+        time: dayjs(item.timestamp * 1000).format('YYYY-MM'),
         value: item.value
       });
     });
 
     _.each(data.completion_token_history, (item: any) => {
       tokenList.push({
-        time: dayjs(item.timestamp * 1000).format('YYYY-MM-DD'),
+        time: dayjs(item.timestamp * 1000).format('YYYY-MM'),
         name: 'completion_token',
         color: 'rgba(84, 204, 152,0.8)',
         value: item.value
@@ -140,7 +142,7 @@ const Usage = () => {
     });
     _.each(data.prompt_token_history, (item: any) => {
       tokenList.push({
-        time: dayjs(item.timestamp * 1000).format('YYYY-MM-DD'),
+        time: dayjs(item.timestamp * 1000).format('YYYY-MM'),
         name: 'prompt_token',
         color: 'rgba(0, 170, 173, 0.8)',
         value: item.value
@@ -183,7 +185,11 @@ const Usage = () => {
     <>
       <PageTools
         style={{ margin: '32px 8px' }}
-        left={<span style={{ fontSize: 'var(--font-size-large)' }}>Usage</span>}
+        left={
+          <span style={{ fontSize: 'var(--font-size-large)' }}>
+            {intl.formatMessage({ id: 'dashboard.usage' })}
+          </span>
+        }
         right={
           <RangePicker onChange={handleSelectDate} style={{ width: 300 }} />
         }
@@ -201,7 +207,7 @@ const Usage = () => {
             <Row style={{ width: '100%' }}>
               <Col span={12}>
                 <ColumnBar
-                  title="API Request"
+                  title={intl.formatMessage({ id: 'dashboard.apirequest' })}
                   data={requestData}
                   xField="time"
                   yField="value"
@@ -210,7 +216,7 @@ const Usage = () => {
               </Col>
               <Col span={12}>
                 <ColumnBar
-                  title="Tokens"
+                  title={intl.formatMessage({ id: 'dashboard.tokens' })}
                   data={tokenData}
                   group={false}
                   colorField="name"
@@ -227,11 +233,12 @@ const Usage = () => {
         <Col xs={24} sm={24} md={24} lg={24} xl={8}>
           <CardWrapper>
             <HBar
-              title="Top Users"
+              title={intl.formatMessage({ id: 'dashboard.topusers' })}
               data={userData}
-              colorField="type"
               stack={true}
               legend={false}
+              showYAxis={false}
+              colorField="type"
               xField="name"
               yField="value"
               height={360}

src/pages/dashboard/config/index.ts

@@ -1,31 +1,31 @@
 export const overviewConfigs = [
   {
     key: 'workworker_count',
-    label: 'Workers',
+    label: 'dashboard.workers',
     // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
     backgroundColor: 'var(--color-white-1)'
   },
   {
     key: 'gpu_count',
-    label: 'Total GPUs',
+    label: 'dashboard.totalgpus',
     backgroundColor: 'var(--color-white-1)'
     // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
   },
   {
     key: 'allocatedGpus',
-    label: 'Allocated GPUs',
+    label: 'dashboard.allocategpus',
     backgroundColor: 'var(--color-white-1)'
     // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
   },
   {
     key: 'model_count',
-    label: 'Models',
+    label: 'dashboard.models',
     backgroundColor: 'var(--color-white-1)'
     // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
   },
   {
     key: 'model_instance_count',
-    label: 'Instances',
+    label: 'dashboard.instances',
     backgroundColor: 'var(--color-white-1)'
     // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
   }

src/pages/llmodels/index.tsx

@@ -372,10 +372,7 @@ const Models: React.FC = () => {
 
   useEffect(() => {
     fetchData();
-    setTimeout(() => {
+    createModelsChunkRequest();
-      createModelsChunkRequest();
-    }, 1000);
-
     return () => {
       chunkRequedtRef.current?.current?.cancel?.();
     };

src/pages/login/components/password-form.tsx

@@ -76,10 +76,9 @@ const PasswordForm: React.FC = () => {
             {
               required: true,
               pattern: PasswordReg,
-              message: intl.formatMessage(
+              message: intl.formatMessage({
-                { id: 'common.form.rule.input' },
+                id: 'users.form.rule.password'
-                { name: intl.formatMessage({ id: 'users.form.newpassword' }) }
+              })
-              )
             }
           ]}
         >

src/pages/resources/components/gpus.tsx

@@ -12,97 +12,6 @@ import { queryGpuDevicesList } from '../apis';
 import { GPUDeviceItem } from '../config/types';
 const { Column } = Table;
 
-const dataSource: GPUDeviceItem[] = [
-  {
-    id: 1,
-    name: 'bj-web-service-1',
-    address: '183.14.31.136',
-    hostname: 'bj-web-service-1',
-    labels: {},
-    resources: {
-      capacity: {
-        cpu: 4,
-        gpu: 2,
-        memory: '64 GiB',
-        gram: '24 Gib'
-      },
-      allocable: {
-        cpu: 2.5,
-        gpu: 1.6,
-        memory: '64',
-        gram: '24 Gib'
-      }
-    },
-    state: 'ACTIVE'
-  },
-  {
-    id: 2,
-    name: 'bj-db-service-2',
-    address: '172.24.1.36',
-    hostname: 'bj-db-service-2',
-    labels: {},
-    resources: {
-      capacity: {
-        cpu: 4,
-        gpu: 2,
-        memory: '64 GiB',
-        gram: '24 Gib'
-      },
-      allocable: {
-        cpu: 2,
-        gpu: 1.5,
-        memory: '32 GiB',
-        gram: '12 Gib'
-      }
-    },
-    state: 'ACTIVE'
-  },
-  {
-    id: 3,
-    name: 'guangzhou-computed-node-2',
-    address: '170.10.2.10',
-    hostname: 'guangzhou-computed-node-2',
-    labels: {},
-    resources: {
-      capacity: {
-        cpu: 8,
-        gpu: 4,
-        memory: '64 GiB',
-        gram: '24 Gib'
-      },
-      allocable: {
-        cpu: 2,
-        gpu: 1.5,
-        memory: '32 GiB',
-        gram: '12 Gib'
-      }
-    },
-    state: 'ACTIVE'
-  },
-  {
-    id: 4,
-    name: 'hangzhou-cache-node-1',
-    address: '115.2.21.10',
-    hostname: 'hangzhou-cache-node-1',
-    labels: {},
-    resources: {
-      capacity: {
-        cpu: 8,
-        gpu: 4,
-        memory: '64 GiB',
-        gram: '24 Gib'
-      },
-      allocable: {
-        cpu: 4,
-        gpu: 2.5,
-        memory: '40 GiB',
-        gram: '16 Gib'
-      }
-    },
-    state: 'ACTIVE'
-  }
-];
-
 const Models: React.FC = () => {
   const intl = useIntl();
   const rowSelection = useTableRowSelection();
@@ -205,20 +114,32 @@ const Models: React.FC = () => {
           onChange: handlePageChange
         }}
       >
-        <Column title="Name" dataIndex="name" key="name" />
         <Column
-          title="Index"
+          title={intl.formatMessage({ id: 'common.table.name' })}
+          dataIndex="name"
+          key="name"
+        />
+        <Column
+          title={intl.formatMessage({ id: 'resources.table.index' })}
           dataIndex="index"
           key="index"
           render={(text, record: GPUDeviceItem) => {
             return <span>{record.index}</span>;
           }}
         />
-        <Column title="Worker Name" dataIndex="worker_name" key="worker_name" />
+        <Column
-        <Column title="Vendor" dataIndex="vendor" key="vendor" />
+          title={intl.formatMessage({ id: 'resources.table.workername' })}
+          dataIndex="worker_name"
+          key="worker_name"
+        />
+        <Column
+          title={intl.formatMessage({ id: 'resources.table.vender' })}
+          dataIndex="vendor"
+          key="vendor"
+        />
 
         <Column
-          title="Temperature(˚C)"
+          title={`${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`}
           dataIndex="temperature"
           key="Temperature"
           render={(text, record: GPUDeviceItem) => {
@@ -226,7 +147,7 @@ const Models: React.FC = () => {
           }}
         />
         <Column
-          title="Core"
+          title={intl.formatMessage({ id: 'resources.table.core' })}
           dataIndex="core"
           key="Core"
           render={(text, record: GPUDeviceItem) => {
@@ -234,7 +155,7 @@ const Models: React.FC = () => {
           }}
         />
         <Column
-          title="GPU Utilization"
+          title={intl.formatMessage({ id: 'resources.table.gpuutilization' })}
           dataIndex="gpuUtil"
           key="gpuUtil"
           render={(text, record: GPUDeviceItem) => {
@@ -247,8 +168,8 @@ const Models: React.FC = () => {
         />
 
         <Column
-          title="VRAM"
+          title={intl.formatMessage({ id: 'resources.table.vramutilization' })}
-          dataIndex="GRAM"
+          dataIndex="VRAM"
           key="VRAM"
           render={(text, record: GPUDeviceItem) => {
             return (

src/request-config.ts

@@ -13,7 +13,7 @@ export const requestConfig: RequestConfig = {
     errorHandler: (error: any, opts: any) => {
       const { message: errorMessage, response } = error;
       const errMsg = response?.data?.message || errorMessage;
-      if (!opts?.skipErrorHandler) {
+      if (!opts?.skipErrorHandler && response?.status) {
         message.error(errMsg);
       }
       console.log('errorHandler+++++++++++++++', error, opts);