chore: dashboard api

src/components/charts/column-bar.tsx

@@ -6,38 +6,60 @@ interface BarChartProps {
   yField: string;
   title?: string;
   height?: number;
+  group?: boolean;
+  colorField?: string;
+  seriesField?: string;
+  stack?: boolean;
+  legend?: any;
 }
 const BarChart: React.FC<BarChartProps> = (props) => {
-  const { data, xField, yField, title, height = 260 } = props;
+  const {
+    data,
+    xField,
+    yField,
+    title,
+    height = 260,
+    group,
+    colorField,
+    seriesField,
+    stack,
+    legend = undefined
+  } = props;
   const config = {
     data,
     xField,
     yField,
-    // colorField: 'name',
+    colorField: colorField || 'name',
     direction: 'vertical',
+    stack,
+    seriesField,
     height,
-    group: true,
+    group,
     scale: {
       x: {
         type: 'band',
         padding: 0.5
       }
     },
-    legend: {
+    legend:
-      color: {
+      legend === 'undefined'
-        position: 'top',
+        ? {
-        layout: {
+            color: {
-          justifyContent: 'center'
+              position: 'top',
-        }
+              layout: {
-      }
+                justifyContent: 'center'
-    },
+              }
+            }
+          }
+        : legend,
     axis: {
       x: {
         xAxis: true,
         tick: false
       },
       y: {
-        tick: false
+        tick: false,
+        labelAutoWrap: true
       }
     },
     title: {
@@ -61,7 +83,12 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     },
 
     style: {
-      fill: 'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)',
+      fill: (params: any) => {
+        return (
+          params.color ||
+          'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)'
+        );
+      },
       radiusTopLeft: 12,
       radiusTopRight: 12,
       align: 'center',

src/components/charts/h-bar.tsx

@@ -6,25 +6,46 @@ interface BarChartProps {
   yField: string;
   title?: string;
   height?: number;
+  group?: boolean;
+  colorField?: string;
+  seriesField?: string;
+  stack?: boolean;
+  legend?: any;
 }
 const BarChart: React.FC<BarChartProps> = (props) => {
-  const { data, xField, yField, title, height } = props;
+  const {
+    data,
+    xField,
+    yField,
+    title,
+    height,
+    group,
+    colorField,
+    seriesField,
+    stack,
+    legend = undefined
+  } = props;
   const config = {
     data,
     xField,
     yField,
-    // colorField: 'name',
+    colorField: colorField || 'name',
     direction: 'vertical',
+    seriesField,
     height,
-    group: true,
+    group,
-    legend: {
+    stack,
-      color: {
+    legend:
-        position: 'top',
+      legend === 'undefined'
-        layout: {
+        ? {
-          justifyContent: 'center'
+            color: {
-        }
+              position: 'top',
-      }
+              layout: {
-    },
+                justifyContent: 'center'
+              }
+            }
+          }
+        : legend,
     scale: {
       x: {
         type: 'band',
@@ -59,7 +80,12 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     },
     markBackground: {},
     style: {
-      fill: 'linear-gradient(180deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)',
+      fill: (params: any) => {
+        return (
+          params.color ||
+          'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)'
+        );
+      },
       radiusTopLeft: 12,
       radiusTopRight: 12,
       height: 20

src/components/charts/line-chart.tsx

@@ -7,10 +7,12 @@ interface LineChartProps {
   color?: string[];
   xField?: string;
   yField?: string;
-  slider?: boolean;
+  labelFormatter?: (v: any) => string;
+  slider?: any;
 }
 const LineChart: React.FC<LineChartProps> = (props) => {
-  const { data, title, color, xField, yField, slider, height } = props;
+  const { data, title, color, xField, yField, slider, height, labelFormatter } =
+    props;
   const config = {
     title,
     height,
@@ -28,7 +30,12 @@ const LineChart: React.FC<LineChartProps> = (props) => {
         }
       },
       y: {
-        tick: false
+        tick: false,
+        // size: 14,
+        // title: '%',
+        titlePosition: 'top',
+        titleFontSize: 12,
+        labelFormatter
       }
     },
     // point: {

src/components/charts/liquid.tsx

@@ -12,7 +12,7 @@ interface LiquidChartProps {
 }
 const LiquidChart: React.FC<LiquidChartProps> = (props) => {
   const {
-    percent,
+    percent = 0,
     color,
     title,
     width,

src/global.less

@@ -289,6 +289,14 @@ body {
 
   .ant-pro-sider {
     .ant-menu {
+      .ant-menu-item {
+        border-radius: 16px;
+
+        &:active {
+          background-color: var(--ant-menu-item-selected-bg);
+        }
+      }
+
       .ant-menu-item:not(.ant-menu-item-selected) {
         color: var(--ant-color-text);
       }
@@ -300,6 +308,11 @@ body {
       .ant-menu-item.ant-menu-item-selected:hover {
         color: var(--ant-color-primary);
       }
+
+      .ant-menu-item.ant-menu-item-selected {
+        color: var(--ant-color-primary);
+        background-color: unset;
+      }
     }
   }
 }

src/pages/dashboard/apis/index.ts

@@ -0,0 +1,7 @@
+import { request } from '@umijs/max';
+
+export const DASHBOARD_API = '/dashboard';
+
+export async function queryDashboardData() {
+  return request(DASHBOARD_API);
+}

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

@@ -1,6 +1,9 @@
-// import div from '@/components/content-wrapper';
 import PageTools from '@/components/page-tools';
+import ProgressBar from '@/components/progress-bar';
 import { Col, Row, Table } from 'antd';
+import _ from 'lodash';
+import { useContext } from 'react';
+import { DashboardContext } from '../config/dashboard-context';
 
 const modelColumns = [
   {
@@ -9,28 +12,30 @@ const modelColumns = [
     key: 'name'
   },
   {
-    title: 'Allocated GPUs',
+    title: 'GPU Utilization',
-    dataIndex: 'allocated',
+    dataIndex: 'gpu_utilization',
-    key: 'allocated',
+    key: 'gpu_utilization',
-    render: (text: any, record: any) => <span>{record.gpu.allocated}</span>
+    render: (text: any, record: any) => (
+      <ProgressBar percent={_.round(text, 2)}></ProgressBar>
+    )
   },
   {
-    title: 'GPU Utilization',
+    title: 'VRAM Utilization',
-    dataIndex: 'utilization',
+    dataIndex: 'gpu_memory_utilization',
-    key: 'utilization',
+    key: 'gpu_memory_utilization',
-    render: (text: any, record: any) => <span>{record.gpu.utilization}</span>
+    render: (text: any, record: any) => (
+      <ProgressBar percent={_.round(text, 2)}></ProgressBar>
+    )
   },
   {
     title: 'Running Instances',
-    dataIndex: 'running',
+    dataIndex: 'instance_count',
-    key: 'running',
+    key: 'instance_count'
-    render: (text: any, record: any) => <span>{record.instances.running}</span>
   },
   {
-    title: 'Pending Instances',
+    title: 'Tokens',
-    dataIndex: 'pending',
+    dataIndex: 'token_count',
-    key: 'pending',
+    key: 'token_count'
-    render: (text: any, record: any) => <span>{record.instances.pending}</span>
   }
 ];
 
@@ -59,39 +64,6 @@ const projectColumns = [
   }
 ];
 
-const modelData = [
-  {
-    id: 1,
-    name: 'qwen2',
-    gpu: { allocated: 4, utilization: '50%' },
-    instances: { running: 1, pending: 0 }
-  },
-  {
-    id: 2,
-    name: 'llama3:70b',
-    gpu: { allocated: 3, utilization: '70%' },
-    instances: { running: 1, pending: 0 }
-  },
-  {
-    id: 3,
-    name: 'llama3',
-    gpu: { allocated: 5, utilization: '20%' },
-    instances: { running: 1, pending: 0 }
-  },
-  {
-    id: 4,
-    name: 'gemma',
-    gpu: { allocated: 1, utilization: '25%' },
-    instances: { running: 1, pending: 0 }
-  },
-  {
-    id: 5,
-    name: 'phi3',
-    gpu: { allocated: 2, utilization: '46%' },
-    instances: { running: 1, pending: 0 }
-  }
-];
-
 const projectData = [
   {
     id: 1,
@@ -130,6 +102,7 @@ const projectData = [
   }
 ];
 const ActiveTable = () => {
+  const data = useContext(DashboardContext).active_models || [];
   return (
     <Row gutter={[20, 0]}>
       <Col xs={24} sm={24} md={24} lg={24} xl={24}>
@@ -147,7 +120,7 @@ const ActiveTable = () => {
         <div>
           <Table
             columns={modelColumns}
-            dataSource={modelData}
+            dataSource={data}
             pagination={false}
             rowKey="id"
           />

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

@@ -1,6 +1,8 @@
 import { Card, Col, Row, Space } from 'antd';
-import React from 'react';
+import _ from 'lodash';
+import React, { useContext } from 'react';
 import { overviewConfigs } from '../config';
+import { DashboardContext } from '../config/dashboard-context';
 import '../styles/index.less';
 import styles from './over-view.less';
 
@@ -23,23 +25,8 @@ const renderCardItem = (data: {
     </Card>
   );
 };
-const Overview: React.FC = (props) => {
+const Overview: React.FC = () => {
-  // const { data = {} } = props;
+  const data = useContext(DashboardContext).resource_counts || {};
-  const data = {
-    workers: 8,
-    models: {
-      healthy: 10,
-      warning: 2,
-      error: 1
-    },
-    gpus: 30,
-    allocatedGpus: 12,
-    instances: {
-      healthy: 32,
-      warning: 3,
-      error: 2
-    }
-  };
 
   const renderValue = (
     value:
@@ -75,7 +62,7 @@ const Overview: React.FC = (props) => {
           >
             {renderCardItem({
               label: config.label,
-              value: renderValue(data[config.key] || 0),
+              value: renderValue(_.get(data, config.key, 0)),
               bgColor: config.backgroundColor
             })}
           </Col>

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

@@ -1,68 +1,68 @@
 import LineChart from '@/components/charts/line-chart';
-import { generateFluctuatingData } from '@/utils';
+import dayjs from 'dayjs';
 import _ from 'lodash';
+import { useContext, useEffect, useState } from 'react';
+import { DashboardContext } from '../config/dashboard-context';
 
-const mockData = {
+const TypeKeyMap = {
-  GPU: generateFluctuatingData({
+  cpu: 'CPU',
-    total: 17,
+  memory: 'Memory',
-    max: 80,
+  gpu: 'GPU',
-    min: 20
+  gpu_memory: 'VRAM'
-  }),
-  CPU: generateFluctuatingData({
-    total: 17,
-    max: 70,
-    min: 10
-  }),
-  Memory: generateFluctuatingData({
-    total: 17,
-    max: 60,
-    min: 20
-  }),
-  VRAM: generateFluctuatingData({
-    total: 17,
-    max: 90,
-    min: 15
-  })
 };
+
 const UtilizationOvertime: React.FC = () => {
-  const timeList = [
+  const data = useContext(DashboardContext)?.system_load?.history || {};
-    '08:00:00',
+  const [result, setResult] = useState<
-    '09:00:00',
+    { time: string; value: number; type: string }[]
-    '10:00:00',
+  >([]);
-    '11:00:00',
+
-    '12:00:00',
+  const typeList = ['gpu', 'cpu', 'memory', 'gpu_memory'];
-    '13:00:00',
+  const sliderConfig = {
-    '14:00:00',
+    y: false,
-    '15:00:00',
+    x: {
-    '16:00:00',
+      style: {
-    '17:00:00',
+        selectionFill: 'rgb(84, 204, 152)',
-    '18:00:00',
+        selectionFillOpacity: 0.1,
-    '19:00:00',
+        handleIconFill: 'rgb(84, 204, 152)',
-    '20:00:00',
+        handleIconFillOpacity: 0.15,
-    '21:00:00',
+        handleIconStrokeOpacity: 0,
-    '22:00:00',
+        sparklineType: 'line',
-    '23:00:00',
+        sparkline: true
-    '24:00:00'
+      },
-  ];
+      sparkline: true
-  const typeList = ['GPU', 'CPU', 'Memory', 'VRAM'];
-  const generateData = () => {
-    const data = [];
-    for (let i = 0; i < timeList.length; i++) {
-      for (let j = 0; j < typeList.length; j++) {
-        data.push({
-          time: timeList[i],
-          type: typeList[j],
-          value: _.get(mockData, typeList[j])[i]
-        });
-      }
     }
-    return data;
   };
-  const data = generateData();
+
+  const labelFormatter = (value: any) => {
+    return `${value}%`;
+  };
+  const generateData = () => {
+    const list: { value: number; time: string; type: string }[] = [];
+    _.each(typeList, (type: any) => {
+      const dataList = _.map(_.get(data, type, []), (item: any) => {
+        return {
+          value: _.round(item.value, 2) || 0,
+          time: dayjs(item.timestamp * 1000).format('HH:mm:ss'),
+          type: _.get(TypeKeyMap, type, '')
+        };
+      });
+      list.push(...dataList);
+    });
+    setResult(list);
+  };
+
+  useEffect(() => {
+    generateData();
+  }, [data]);
 
   return (
     <>
-      <LineChart data={data} />
+      <LineChart
+        data={result}
+        labelFormatter={labelFormatter}
+        slider={sliderConfig}
+      />
     </>
   );
 };

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

@@ -4,7 +4,9 @@ import PageTools from '@/components/page-tools';
 import breakpoints from '@/config/breakpoints';
 import useWindowResize from '@/hooks/use-window-resize';
 import { Col, DatePicker, Row } from 'antd';
-import { useEffect, useState } from 'react';
+import _ from 'lodash';
+import { useContext, useEffect, useState } from 'react';
+import { DashboardContext } from '../config/dashboard-context';
 import ResourceUtilization from './resource-utilization';
 
 const SystemLoad = () => {
@@ -13,7 +15,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 data = useContext(DashboardContext)?.system_load?.current || {};
   const { size } = useWindowResize();
   const [paddingRight, setPaddingRight] = useState<string>('20px');
   const [smallChartHeight, setSmallChartHeight] = useState<number>(190);
@@ -64,7 +66,7 @@ const SystemLoad = () => {
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <LiquidChart
                     title="GPU Compute Utilization"
-                    percent={0.2}
+                    percent={_.round(data.gpu?.utilization_rate || 0, 2) / 100}
                     thresholds={thresholds}
                     rangColor={colors}
                   ></LiquidChart>
@@ -72,7 +74,9 @@ const SystemLoad = () => {
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <LiquidChart
                     title="GPU Memory Utilization"
-                    percent={0.3}
+                    percent={
+                      _.round(data.gpu_memory?.utilization_rate || 0, 2) / 100
+                    }
                     thresholds={thresholds}
                     rangColor={colors}
                   ></LiquidChart>
@@ -80,7 +84,7 @@ const SystemLoad = () => {
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <LiquidChart
                     title="CPU Compute Utilization"
-                    percent={0.8}
+                    percent={_.round(data.cpu?.utilization_rate || 0, 2) / 100}
                     thresholds={thresholds}
                     rangColor={colors}
                   ></LiquidChart>
@@ -88,7 +92,9 @@ const SystemLoad = () => {
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <LiquidChart
                     title="CPU Memory Utilization"
-                    percent={0.7}
+                    percent={
+                      _.round(data.memory?.utilization_rate || 0, 2) / 100
+                    }
                     thresholds={thresholds}
                     rangColor={colors}
                   ></LiquidChart>

src/pages/dashboard/components/usage.tsx

@@ -6,7 +6,10 @@ import breakpoints from '@/config/breakpoints';
 import useWindowResize from '@/hooks/use-window-resize';
 import { generateRandomArray } from '@/utils';
 import { Col, DatePicker, Row } from 'antd';
-import { useEffect, useState } from 'react';
+import dayjs from 'dayjs';
+import _ from 'lodash';
+import { useContext, useEffect, useState } from 'react';
+import { DashboardContext } from '../config/dashboard-context';
 
 const { RangePicker } = DatePicker;
 const times = [
@@ -92,9 +95,82 @@ const tokenUsage = TokensData.map((val, i) => {
 const Usage = () => {
   const { size } = useWindowResize();
   const [paddingRight, setPaddingRight] = useState<string>('20px');
+  const [requestData, setRequestData] = useState<
+    { time: string; value: number }[]
+  >([]);
+  const [tokenData, setTokenData] = useState<{ time: string; value: number }[]>(
+    []
+  );
+  const [userData, setUserData] = useState<{ name: string; value: number }[]>(
+    []
+  );
+  const data = useContext(DashboardContext)?.model_usage || {};
 
   const handleSelectDate = (dateString: string) => {};
 
+  const generateData = () => {
+    const requestList: { time: string; value: number }[] = [];
+    const tokenList: {
+      time: string;
+      value: number;
+      name: string;
+      color: string;
+    }[] = [];
+    const userList: {
+      name: string;
+      value: number;
+      type: string;
+      color: string;
+    }[] = [];
+
+    _.each(data.api_request_history, (item: any) => {
+      requestList.push({
+        time: dayjs(item.timestamp * 1000).format('YYYY-MM-DD'),
+        value: item.value
+      });
+    });
+
+    _.each(data.completion_token_history, (item: any) => {
+      tokenList.push({
+        time: dayjs(item.timestamp * 1000).format('YYYY-MM-DD'),
+        name: 'completion_token',
+        color:
+          'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)',
+        value: item.value
+      });
+    });
+    _.each(data.prompt_token_history, (item: any) => {
+      tokenList.push({
+        time: dayjs(item.timestamp * 1000).format('YYYY-MM-DD'),
+        name: 'prompt_token',
+        color:
+          'linear-gradient(90deg,rgba(0, 170, 173, 0.8) 0%,rgba(0, 109, 193, 0.7) 100%)',
+        value: item.value
+      });
+    });
+
+    _.each(data.top_users, (item: any) => {
+      userList.push({
+        name: item.username,
+        type: 'completion_token',
+        color:
+          'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)',
+        value: item.completion_token_count
+      });
+      userList.push({
+        name: item.username,
+        type: 'prompt_token',
+        color:
+          'linear-gradient(90deg,rgba(0, 170, 173, 0.8) 0%,rgba(0, 109, 193, 0.7) 100%)',
+        value: item.prompt_token_count
+      });
+    });
+
+    setRequestData(requestList);
+    setTokenData(tokenList);
+    setUserData(userList);
+  };
+
   useEffect(() => {
     if (size.width < breakpoints.xl) {
       setPaddingRight('0');
@@ -103,6 +179,10 @@ const Usage = () => {
     }
   }, [size.width]);
 
+  useEffect(() => {
+    generateData();
+  }, [data]);
+
   return (
     <>
       <PageTools
@@ -126,7 +206,7 @@ const Usage = () => {
               <Col span={12}>
                 <ColumnBar
                   title="API Request"
-                  data={dataList}
+                  data={requestData}
                   xField="time"
                   yField="value"
                   height={360}
@@ -135,8 +215,12 @@ const Usage = () => {
               <Col span={12}>
                 <ColumnBar
                   title="Tokens"
-                  data={tokenUsage}
+                  data={tokenData}
+                  group={false}
+                  colorField="name"
+                  stack={true}
                   xField="time"
+                  legend={false}
                   yField="value"
                   height={360}
                 ></ColumnBar>
@@ -148,8 +232,11 @@ const Usage = () => {
           <CardWrapper>
             <HBar
               title="Top Users"
-              data={userDataList}
+              data={userData}
-              xField="time"
+              colorField="type"
+              stack={true}
+              legend={false}
+              xField="name"
               yField="value"
               height={360}
             ></HBar>

src/pages/dashboard/config/dashboard-context.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+import { DashboardProps } from './types';
+
+export const DashboardContext = createContext<DashboardProps>(
+  {} as DashboardProps
+);
+
+export default DashboardContext;

src/pages/dashboard/config/index.ts

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

src/pages/dashboard/config/types.ts

@@ -0,0 +1,62 @@
+export interface DashboardProps {
+  resource_counts: {
+    worker_count: number;
+    gpu_count: number;
+    model_count: number;
+    model_instance_count: number;
+  };
+  system_load: {
+    current: {
+      cpu: {
+        total: number;
+        used: number;
+        utilization_rate: number;
+      };
+      memory: {
+        total: number;
+        used: number;
+        utilization_rate: number;
+      };
+      gpu: {
+        total: number;
+        used: number;
+        utilization_rate: number;
+      };
+      gpu_memory: {
+        total: number;
+        used: number;
+        utilization_rate: number;
+      };
+    };
+    history: {
+      cpu: {
+        timestamp: number;
+        value: number;
+      }[];
+      memory: {
+        timestamp: number;
+        value: number;
+      }[];
+      gpu: {
+        timestamp: number;
+        value: number;
+      }[];
+      gpu_memory: {
+        timestamp: number;
+        value: number;
+      }[];
+    };
+  };
+  model_usage: {
+    api_request_history: any[];
+    completion_token_history: any[];
+    prompt_token_history: any[];
+    top_users: {
+      user_id: number;
+      username: string;
+      prompt_token_count: number;
+      completion_token_count: number;
+    }[];
+  };
+  active_models: any[];
+}

src/pages/dashboard/index.tsx

@@ -1,16 +1,40 @@
+import { Spin } from 'antd';
+import { useEffect, useState } from 'react';
+import { queryDashboardData } from './apis';
 import ActiveTable from './components/active-table';
 import Overview from './components/over-view';
 import SystemLoad from './components/system-load';
 import Usage from './components/usage';
+import DashboardContext from './config/dashboard-context';
+import { DashboardProps } from './config/types';
 
 const Dashboard: React.FC = () => {
+  const [data, setData] = useState<DashboardProps>({} as DashboardProps);
+  const [loading, setLoading] = useState(false);
+
+  const getDashboardData = async () => {
+    try {
+      setLoading(true);
+      const res = await queryDashboardData();
+      setData(res);
+      setLoading(false);
+    } catch (error) {
+      setLoading(false);
+      setData({} as DashboardProps);
+    }
+  };
+  useEffect(() => {
+    getDashboardData();
+  }, []);
   return (
-    <>
+    <Spin spinning={loading}>
-      <Overview></Overview>
+      <DashboardContext.Provider value={{ ...data }}>
-      <SystemLoad></SystemLoad>
+        <Overview></Overview>
-      <Usage></Usage>
+        <SystemLoad></SystemLoad>
-      <ActiveTable></ActiveTable>
+        <Usage></Usage>
-    </>
+        <ActiveTable></ActiveTable>
+      </DashboardContext.Provider>
+    </Spin>
   );
 };
 

src/pages/llmodels/components/add-modal.tsx

@@ -26,7 +26,7 @@ type AddModalProps = {
 
 const sourceOptions = [
   { label: 'Huggingface', value: 'huggingface', key: 'huggingface' },
-  { label: 'Ollama', value: 'ollama_library', key: 'ollama_library' }
+  { label: 'Ollama Library', value: 'ollama_library', key: 'ollama_library' }
 ];
 
 const AddModal: React.FC<AddModalProps> = (props) => {

src/pages/llmodels/index.tsx

@@ -114,7 +114,7 @@ const Models: React.FC = () => {
     clearInterval(timer.current);
     timer.current = setInterval(() => {
       fetchData(true);
-    }, 3000);
+    }, 5000);
   };
 
   const handleShowSizeChange = (page: number, size: number) => {

src/pages/playground/components/chat-footer.tsx

@@ -18,11 +18,20 @@ interface ChatFooterProps {
   onView: () => void;
   disabled?: boolean;
   feedback?: React.ReactNode;
+  hasTokenResult?: boolean;
 }
 
 const ChatFooter: React.FC<ChatFooterProps> = (props) => {
   const intl = useIntl();
-  const { onSubmit, onClear, onNewMessage, onView, feedback, disabled } = props;
+  const {
+    onSubmit,
+    onClear,
+    onNewMessage,
+    onView,
+    feedback,
+    disabled,
+    hasTokenResult
+  } = props;
   useHotkeys(
     HotKeys.SUBMIT.join(','),
     () => {
@@ -34,7 +43,7 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
   return (
     <div className="chat-footer">
       <Row style={{ width: '100%' }}>
-        <Col span={8}>
+        <Col span={hasTokenResult ? 8 : 12}>
           <Space size={20}>
             <Button
               disabled={disabled}
@@ -53,8 +62,8 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
             </Button>
           </Space>
         </Col>
-        <Col span={8}>{feedback}</Col>
+        <Col span={hasTokenResult ? 8 : 0}>{feedback}</Col>
-        <Col span={8} style={{ textAlign: 'right' }}>
+        <Col span={hasTokenResult ? 8 : 12} style={{ textAlign: 'right' }}>
           <Space size={20}>
             <Button
               icon={<CodeOutlined></CodeOutlined>}

src/pages/playground/components/ground-left.tsx

@@ -235,6 +235,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
           onSubmit={handleSubmit}
           onView={handleView}
           disabled={loading}
+          hasTokenResult={!!tokenResult}
           feedback={<ReferenceParams usage={tokenResult}></ReferenceParams>}
         ></ChatFooter>
       </div>

src/pages/playground/style/ground-left.less

@@ -6,6 +6,10 @@
   .message-list-wrap {
     max-height: calc(100vh - 152px);
     overflow-y: auto;
+
+    .ant-pro-page-container-children-container {
+      padding-inline: 26px;
+    }
   }
 
   .ground-left-footer {

src/pages/resources/components/workers.tsx

@@ -201,14 +201,7 @@ const Models: React.FC = () => {
             );
           }}
         />
-        <Column
+
-          title={intl.formatMessage({ id: 'resources.table.disk' })}
-          dataIndex="storage"
-          key="storage"
-          render={(text, record: ListItem) => {
-            return <ProgressBar percent={0}></ProgressBar>;
-          }}
-        />
         <Column
           title={intl.formatMessage({ id: 'resources.table.vram' })}
           dataIndex="VRAM"
@@ -240,6 +233,14 @@ const Models: React.FC = () => {
             );
           }}
         />
+        <Column
+          title={intl.formatMessage({ id: 'resources.table.disk' })}
+          dataIndex="storage"
+          key="storage"
+          render={(text, record: ListItem) => {
+            return <ProgressBar percent={0}></ProgressBar>;
+          }}
+        />
       </Table>
     </>
   );