feat: dashboard

config/routes.ts

@@ -4,14 +4,14 @@ export default [
     key: 'dashboard',
     layout: false,
     icon: 'home',
-    redirect: '/dashboard',
+    redirect: '/dashboard'
   },
   {
     name: 'Dashboard',
     path: '/dashboard',
     key: 'dashboard',
     icon: 'home',
-    component: './dashboard',
+    component: './dashboard'
   },
   {
     name: 'Playground',
@@ -19,52 +19,34 @@ export default [
     path: '/playground',
     key: 'playground',
     icon: 'Comment',
-    component: './playground',
+    component: './playground'
   },
   {
     name: 'Models',
     path: '/models',
     key: 'models',
     icon: 'Block',
-    component: './models',
+    component: './models'
   },
   {
     name: 'Nodes',
     path: '/nodes',
     key: 'nodes',
     icon: 'CloudServer',
-    component: './nodes',
+    component: './nodes'
   },
   {
     name: 'Users',
     path: '/users',
     key: 'users',
     icon: 'Team',
-    component: './users',
+    component: './users'
   },
-  // {
-  //   name: '首页',
-  //   path: '/home',
-  //   key: 'homes',
-  //   component: './Home',
-  // },
-  // {
-  //   name: '权限演示',
-  //   path: '/access',
-  //   key: 'access',
-  //   component: './Access',
-  // },
-  // {
-  //   name: ' CRUD 示例',
-  //   path: '/table',
-  //   key: 'table',
-  //   component: './Table',
-  // },
   {
     name: '404',
     path: '*',
     key: '404',
     layout: false,
-    component: './404',
+    component: './404'
-  },
+  }
 ];

package.json

@@ -12,13 +12,15 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.3.7",
+    "@ant-design/plots": "^2.2.2",
     "@ant-design/pro-components": "^2.7.1",
     "@types/lodash": "^4.17.4",
     "@umijs/max": "^4.2.1",
     "antd": "^5.17.0",
     "antd-style": "^3.6.2",
     "classnames": "^2.5.1",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "numeral": "^2.0.6"
   },
   "devDependencies": {
     "@types/react": "^18.3.1",

plugin.ts

@@ -0,0 +1,24 @@
+import { IApi } from '@umijs/max';
+
+export default (api: IApi) => {
+  api.modifyHTML(($) => {
+    return $;
+  });
+  api.onStart(() => {
+    console.log('pllugins=========start');
+  });
+
+  // api.modifyConfig((memo: any) => {
+  //   // some beautiful code
+  //   console.log('pllugins=========memo', memo);
+  //   return memo;
+  // });
+  // api.addLayouts(() => {
+  //   return [
+  //     {
+  //       id: 'layout',
+  //       file: require.resolve('./src/global-layouts/index.tsx')
+  //     }
+  //   ];
+  // });
+};

src/access.ts

@@ -1,11 +1,10 @@
 export default (initialState: API.UserInfo) => {
-  console.log('initialState==========', initialState)
   // 在这里按照初始化数据定义项目中的权限，统一管理
   // 参考文档 https://umijs.org/docs/max/access
   const canSeeAdmin = !!(
     initialState && initialState.name !== 'dontHaveAccess'
   );
   return {
-    canSeeAdmin,
+    canSeeAdmin
   };
 };

src/components/divider-line/index.less

@@ -0,0 +1,20 @@
+.divider-line {
+  height: 8px;
+  // border-radius: 4px;
+  width: 100%;
+  // background-color: var(--color-fill-1);
+  z-index: 100;
+  margin: 0;
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -9px;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+    background: var(--color-fill-1);
+    // border-radius: 4px;
+  }
+}

src/components/divider-line/index.tsx

@@ -0,0 +1,6 @@
+import styles from './index.less';
+const DividerLine: React.FC = () => {
+  return <div className={styles['divider-line']}></div>;
+};
+
+export default DividerLine;

src/components/page-tools/index.less

@@ -3,4 +3,14 @@
   justify-content: space-between;
   align-items: center;
   margin-top: 70px;
+  .left {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+  }
+  .right {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+  }
 }

src/components/page-tools/index.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import styles from './index.less';
+import './index.less';
 
 type PageToolsProps = {
   left?: React.ReactNode;
@@ -9,21 +9,17 @@ type PageToolsProps = {
 };
 
 const PageTools: React.FC<PageToolsProps> = (props) => {
-  const { left, right, marginBottom, marginTop } = props;
+  const { left, right, marginBottom = 0, marginTop = 70 } = props;
 
   const newStyle: Record<string, string> = useMemo(() => {
     const style: Record<string, string> = {};
-    if (marginBottom) {
+    style.marginBottom = `${marginBottom}px`;
-      style.marginBottom = `${marginBottom}px`;
+    style.marginTop = `${marginTop}px`;
-    }
-    if (marginTop) {
-      style.marginTop = `${marginTop}px`;
-    }
     return style;
   }, [marginBottom, marginTop]);
 
   return (
-    <div className={styles['page-tools']} style={newStyle}>
+    <div className="page-tools" style={newStyle}>
       <div className="left">{left}</div>
       <div className="right">{right}</div>
     </div>

src/global.less

@@ -207,8 +207,14 @@ body {
 .ant-pro-layout {
   .ant-pro-sider {
     .ant-menu {
+      .ant-menu-item:not(.ant-menu-item-selected) {
+        color: var(--ant-color-text);
+      }
       .ant-menu-item:hover {
-        color: inherit;
+        color: var(--ant-color-text);
+      }
+      .ant-menu-item.ant-menu-item-selected:hover {
+        color: var(--ant-color-primary);
       }
     }
   }

src/layouts/index.tsx

@@ -91,6 +91,7 @@ export default (props: any) => {
   };
 
   const formatMessage = undefined;
+
   const runtimeConfig = pluginManager.applyPlugins({
     key: 'layout',
     type: 'modify',
@@ -101,7 +102,7 @@ export default (props: any) => {
     }
   });
   console.log(
-    'clientRoute===========',
+    'clientRoute==========2=',
     clientRoutes,
     runtimeConfig,
     initialInfo

src/layouts/rightRender.tsx

@@ -71,6 +71,8 @@ export function getRightRenderContent(opts: {
     ]
   };
   // antd@5 和  4.24 之后推荐使用 menu，性能更好
+
+  console.log('version+++++++++=', opts.runtimeConfig, version);
   let dropdownProps;
   if (version.startsWith('5.') || version.startsWith('4.24.')) {
     dropdownProps = { menu: langMenu };

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

@@ -0,0 +1,42 @@
+import { Pie } from '@ant-design/plots';
+import numeral from 'numeral';
+
+const TooltipContent = (props: any) => {
+  return (
+    <div>
+      <div>{props.x}</div>
+      <div>{props.y}</div>
+    </div>
+  );
+};
+const GPUUtilization: React.FC = () => {
+  const data = [
+    { label: 'Idle GPUs', value: 20 },
+    { label: 'Allocated GPUs', value: 120 }
+  ];
+  return (
+    <Pie
+      height={340}
+      radius={0.9}
+      angleField="value"
+      colorField="label"
+      data={data as any}
+      legend={{
+        color: {
+          position: 'bottom',
+          layout: {
+            justifyContent: 'center'
+          }
+        }
+      }}
+      label={{
+        position: 'outside',
+        text: (item: { label: number; value: number }) => {
+          return `${item.label}: ${numeral(item.value).format('0,0')}`;
+        }
+      }}
+    />
+  );
+};
+
+export default GPUUtilization;

src/pages/dashboard/components/model-bills.tsx

@@ -0,0 +1,191 @@
+import PageTools from '@/components/page-tools';
+import { Column } from '@ant-design/plots';
+import { DatePicker, Select, Space } from 'antd';
+import { useState } from 'react';
+
+const { RangePicker } = DatePicker;
+
+const ModelBills: React.FC = () => {
+  const [selectName, setSelectName] = useState('model1');
+  const handleNameChange = (value: string) => {
+    setSelectName(value);
+  };
+  const models = [
+    {
+      value: 'model1',
+      label: 'model1'
+    },
+    {
+      value: 'model2',
+      label: 'model2'
+    },
+    {
+      value: 'model3',
+      label: 'model3'
+    }
+  ];
+  const config = {
+    data: [
+      {
+        time: '2021-01',
+        name: 'model1',
+        value: 3.9
+      },
+      {
+        time: '2021-01',
+        name: 'model2',
+        value: 4.3
+      },
+      {
+        time: '2021-01',
+        name: 'model3',
+        value: 3.8
+      },
+      {
+        time: '2021-02',
+        name: 'model1',
+        value: 4.1
+      },
+      {
+        time: '2021-02',
+        name: 'model2',
+        value: 5.7
+      },
+      {
+        time: '2021-02',
+        name: 'model3',
+        value: 3.9
+      },
+      {
+        time: '2021-03',
+        name: 'model1',
+        value: 5.6
+      },
+      {
+        time: '2021-03',
+        name: 'model2',
+        value: 7.3
+      },
+      {
+        time: '2021-03',
+        name: 'model3',
+        value: 4.9
+      },
+      {
+        time: '2021-04',
+        name: 'model1',
+        value: 7.2
+      },
+      {
+        time: '2021-04',
+        name: 'model2',
+        value: 9.6
+      },
+      {
+        time: '2021-04',
+        name: 'model3',
+        value: 6.3
+      },
+      {
+        time: '2021-05',
+        name: 'model1',
+        value: 9.3
+      },
+      {
+        time: '2021-05',
+        name: 'model2',
+        value: 11.9
+      },
+      {
+        time: '2021-05',
+        name: 'model3',
+        value: 8.6
+      },
+      {
+        time: '2021-06',
+        name: 'model1',
+        value: 10.3
+      },
+      {
+        time: '2021-06',
+        name: 'model2',
+        value: 13.9
+      },
+      {
+        time: '2021-06',
+        name: 'model3',
+        value: 9.6
+      }
+    ],
+    xField: 'time',
+    yField: 'value',
+    colorField: 'name',
+    group: true,
+    legend: {
+      color: {
+        position: 'top',
+        layout: {
+          justifyContent: 'center'
+        }
+      }
+    },
+    axis: {
+      x: {
+        xAxis: true
+      }
+    },
+
+    split: {
+      type: 'line',
+      line: {
+        color: 'red',
+        style: {
+          color: 'red',
+          lineDash: [4, 5]
+        }
+      }
+    },
+
+    style: {
+      radiusTopLeft: 10,
+      radiusTopRight: 10,
+      width: 25
+    }
+  };
+
+  const handleSelectDate = (value: any) => {
+    console.log(value);
+  };
+  return (
+    <>
+      <PageTools
+        marginBottom={10}
+        marginTop={0}
+        left={<span>Bills by model</span>}
+        right={
+          <Space>
+            <Select
+              size="middle"
+              options={models}
+              value={selectName}
+              style={{ width: 300, height: 34 }}
+              onChange={handleNameChange}
+            ></Select>
+            <RangePicker
+              showTime={false}
+              format="YYYY-MM-DD"
+              onChange={(value, dateString) => {
+                console.log('Selected Time: ', value);
+                console.log('Formatted Selected Time: ', dateString);
+              }}
+              onOk={handleSelectDate}
+            />
+          </Space>
+        }
+      ></PageTools>
+      <Column {...config} />
+    </>
+  );
+};
+
+export default ModelBills;

src/pages/dashboard/components/model-nodes.tsx

@@ -0,0 +1,268 @@
+import PageTools from '@/components/page-tools';
+import StatusTag from '@/components/status-tag';
+import useTableRowSelection from '@/hooks/use-table-row-selection';
+import { NodeItem } from '@/pages/nodes/config/types';
+import { Progress, Select, Space, Table } from 'antd';
+import _ from 'lodash';
+import { memo, useMemo, useState } from 'react';
+const { Column } = Table;
+
+const models = [
+  { value: 'llama3:latest', label: 'llama3:latest' },
+  { value: 'wangfuyun/AnimateLCM', label: 'wangfuyun/AnimateLCM' },
+  { value: 'Revanthraja/Text_to_Vision', label: 'Revanthraja/Text_to_Vision' }
+];
+const dataSource: NodeItem[] = [
+  {
+    id: 1,
+    name: '192.168.1.2',
+    address: '192.168.1.2',
+    hostname: 'node-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: 'ALIVE'
+  },
+  {
+    id: 1,
+    name: '192.168.1.2',
+    address: '192.168.1.5',
+    hostname: 'node-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: 'ALIVE'
+  },
+  {
+    id: 3,
+    name: '192.168.1.3',
+    address: '192.168.1.3',
+    hostname: 'node-3',
+    labels: {},
+    resources: {
+      capacity: {
+        cpu: 4,
+        gpu: 2,
+        memory: '64 GiB',
+        gram: '24 Gib'
+      },
+      allocable: {
+        cpu: 1,
+        gpu: 0.5,
+        memory: '28 GiB',
+        gram: '6 Gib'
+      }
+    },
+    state: 'ALIVE'
+  }
+];
+
+const Models: React.FC = () => {
+  const rowSelection = useTableRowSelection();
+
+  const [selectName, setSelectName] = useState<string>('llama3:latest');
+  const [loading, setLoading] = useState(false);
+  const [queryParams, setQueryParams] = useState({
+    current: 1,
+    pageSize: 10,
+    name: ''
+  });
+  const handleShowSizeChange = (current: number, size: number) => {
+    console.log(current, size);
+  };
+
+  const handlePageChange = (page: number, pageSize: number | undefined) => {
+    console.log(page, pageSize);
+  };
+
+  const handleTableChange = (pagination: any, filters: any, sorter: any) => {
+    // console.log('handleTableChange=======', pagination, filters, sorter);
+  };
+
+  const fetchData = async () => {
+    console.log('fetchData');
+  };
+  const handleSearch = (e: any) => {
+    fetchData();
+  };
+
+  const handleNameChange = (value: string) => {
+    setSelectName(value);
+    setQueryParams({
+      ...queryParams,
+      name: value
+    });
+  };
+
+  const RenderProgress = memo(
+    (props: { record: NodeItem; dataIndex: string }) => {
+      const { record, dataIndex } = props;
+      const value1 = useMemo(() => {
+        let value = _.get(record, ['resources', 'allocable', dataIndex]);
+        if (['gram', 'memory'].includes(dataIndex)) {
+          value = _.toNumber(value.replace(/GiB|Gib/, ''));
+        }
+        return value;
+      }, [record, dataIndex]);
+
+      const value2 = useMemo(() => {
+        let value = _.get(record, ['resources', 'capacity', dataIndex]);
+        if (['gram', 'memory'].includes(dataIndex)) {
+          value = _.toNumber(value.replace(/GiB|Gib/, ''));
+        }
+        return value;
+      }, [record, dataIndex]);
+
+      if (!value1 || !value2) {
+        return <Progress percent={0} strokeColor="var(--ant-color-primary)" />;
+      }
+      const percent = _.round(value1 / value2, 2) * 100;
+      const strokeColor = useMemo(() => {
+        if (percent <= 50) {
+          return 'var(--ant-color-primary)';
+        }
+        if (percent <= 80) {
+          return 'var(--ant-color-warning)';
+        }
+        return 'var(--ant-color-error)';
+      }, [percent]);
+      return (
+        <Progress
+          steps={5}
+          format={() => {
+            return (
+              <span style={{ color: 'var(--ant-color-text)' }}>{percent}%</span>
+            );
+          }}
+          percent={percent}
+          strokeColor={strokeColor}
+        />
+      );
+    }
+  );
+
+  return (
+    <>
+      <div>
+        <PageTools
+          marginBottom={10}
+          marginTop={0}
+          left={<span>Nodes by model</span>}
+          right={
+            <Space>
+              <Select
+                size="middle"
+                options={models}
+                value={selectName}
+                style={{ width: 300, height: 34 }}
+                onChange={handleNameChange}
+              ></Select>
+            </Space>
+          }
+        ></PageTools>
+        <Table
+          dataSource={dataSource}
+          loading={loading}
+          onChange={handleTableChange}
+          pagination={false}
+        >
+          <Column title="Host Name" dataIndex="hostname" key="hostname" />
+          <Column
+            title="State"
+            dataIndex="state"
+            key="state"
+            render={(text, record) => {
+              return (
+                <StatusTag
+                  statusValue={{
+                    status: 'success',
+                    text: 'ALIVE'
+                  }}
+                ></StatusTag>
+              );
+            }}
+          />
+          <Column title="IP / PID" dataIndex="address" key="address" />
+          <Column
+            title="CPU"
+            dataIndex="CPU"
+            key="CPU"
+            render={(text, record: NodeItem) => {
+              return (
+                <RenderProgress
+                  record={record}
+                  dataIndex="cpu"
+                ></RenderProgress>
+              );
+            }}
+          />
+          <Column
+            title="Memory"
+            dataIndex="memory"
+            key="Memory"
+            render={(text, record: NodeItem) => {
+              return (
+                <RenderProgress
+                  record={record}
+                  dataIndex="memory"
+                ></RenderProgress>
+              );
+            }}
+          />
+          <Column
+            title="GPU"
+            dataIndex="GPU"
+            key="GPU"
+            render={(text, record: NodeItem) => {
+              return (
+                <RenderProgress
+                  record={record}
+                  dataIndex="gpu"
+                ></RenderProgress>
+              );
+            }}
+          />
+          <Column
+            title="GRAM"
+            dataIndex="GRAM"
+            key="GRAM"
+            render={(text, record: NodeItem) => {
+              return (
+                <RenderProgress
+                  record={record}
+                  dataIndex="gram"
+                ></RenderProgress>
+              );
+            }}
+          />
+        </Table>
+      </div>
+    </>
+  );
+};
+
+export default Models;

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

@@ -0,0 +1,20 @@
+:local(.card-body) {
+  :global(.ant-card-body) {
+    height: 100px;
+    display: flex;
+    justify-content: space-around;
+  }
+}
+:local(.row) {
+  :global(.ant-col-5) {
+    flex: 0 0 20%;
+    max-width: 20%;
+  }
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+}

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

@@ -0,0 +1,41 @@
+import { Card, Col, Row } from 'antd';
+import { overviewConfigs } from '../config';
+import styles from './over-view.less';
+
+const CardItem: React.FC<{ label: string; value: number; bgColor: string }> = ({
+  label,
+  value,
+  bgColor
+}) => {
+  return (
+    <Card
+      bordered={false}
+      style={{ background: bgColor }}
+      className={styles['card-body']}
+    >
+      <div className={styles.content}>
+        <div className="label">{label}</div>
+        <div className="value">{value}</div>
+      </div>
+    </Card>
+  );
+};
+const Overview: React.FC = (props) => {
+  const { data = {} } = props;
+  return (
+    <Row gutter={[20, 20]} className={styles.row}>
+      {overviewConfigs.map((config, index) => (
+        <Col span={5}>
+          <CardItem
+            key={config.key}
+            label={config.label}
+            value={data[config.key] || 0}
+            bgColor={config.backgroundColor}
+          />
+        </Col>
+      ))}
+    </Row>
+  );
+};
+
+export default Overview;

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

@@ -0,0 +1,93 @@
+import PageTools from '@/components/page-tools';
+import { Line } from '@ant-design/plots';
+import { DatePicker } from 'antd';
+import _ from 'lodash';
+
+const UtilizationOvertime: React.FC = () => {
+  const timeList = [
+    '01:00:00',
+    '02:00:00',
+    '03:00:00',
+    '04:00:00',
+    '05:00:00',
+    '06:00:00',
+    '07:00:00',
+    '08:00:00',
+    '09:00:00',
+    '10:00:00',
+    '11:00:00',
+    '12:00:00',
+    '13:00:00',
+    '14:00:00',
+    '15:00:00'
+  ];
+  const typeList = ['GPU', 'CPU', 'Memory'];
+  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: _.round(Math.random(), 3)
+        });
+      }
+    }
+    return data;
+  };
+  const data = generateData();
+
+  const handleSelectDate = (date: string) => {
+    console.log('dateString============', date);
+  };
+  const config = {
+    xField: 'time',
+    yField: 'value',
+    color: ['red', 'blue', 'green'],
+    colorField: 'type',
+    slider: false,
+    axis: {
+      x: {
+        textStyle: {
+          autoRoate: true
+        }
+      }
+    },
+    xAxis: {
+      autoRotate: true
+    },
+    yAxis: {
+      nice: true,
+      label: {
+        autoRotate: true
+      }
+    },
+    point: {
+      shapeField: 'circle',
+      sizeField: 2
+    },
+    legend: {
+      color: {
+        layout: { justifyContent: 'center' }
+      }
+    },
+    label: {
+      autoRotate: true
+    }
+  };
+  return (
+    <>
+      <PageTools
+        marginBottom={10}
+        marginTop={0}
+        left={<span>Utilization Over Time</span>}
+        right={
+          <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
+        }
+      />
+      <Line height={400} data={data} {...config} />
+    </>
+  );
+};
+
+export default UtilizationOvertime;

src/pages/dashboard/config/index.ts

@@ -0,0 +1,32 @@
+export const overviewConfigs = [
+  {
+    key: 'models',
+    label: 'Models',
+    backgroundColor:
+      'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)'
+  },
+  {
+    key: 'nodes',
+    label: 'Nodes',
+    backgroundColor:
+      'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)'
+  },
+  {
+    key: 'gpus',
+    label: 'Total GPUs',
+    backgroundColor:
+      'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)'
+  },
+  {
+    key: 'idleGpus',
+    label: 'Idle GPUs',
+    backgroundColor:
+      'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)'
+  },
+  {
+    key: 'allocatedGpus',
+    label: 'Allocated GPUs',
+    backgroundColor:
+      'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)'
+  }
+];

src/pages/dashboard/index.tsx

@@ -1,19 +1,59 @@
+import DividerLine from '@/components/divider-line';
+import PageTools from '@/components/page-tools';
 import { PageContainer } from '@ant-design/pro-components';
-import { Access, useAccess } from '@umijs/max';
+import { Col, Row } from 'antd';
-import { Button } from 'antd';
+import GPUUtilization from './components/gpu-utilization';
+import ModelBills from './components/model-bills';
+import ModelNodes from './components/model-nodes';
+import Overview from './components/over-view';
+import UtilizationOvertime from './components/utilization-overtime';
 
 const Dashboard: React.FC = () => {
-  const access = useAccess();
   return (
-    <PageContainer
+    <>
-      ghost
+      <PageContainer ghost title={false}>
-    
+        <Overview></Overview>
-    >
+      </PageContainer>
-      <Access accessible={access.canSeeAdmin}>
+      <DividerLine></DividerLine>
-        <Button type="primary">只有 Admin 可以看到这个按钮</Button>
+      <PageContainer ghost title={false}>
-      </Access>
+        <Row gutter={20} style={{ marginTop: '0px' }}>
-    </PageContainer>
+          <Col span={17}>
+            <ModelNodes></ModelNodes>
+          </Col>
+          <Col span={7}>
+            <PageTools
+              marginBottom={10}
+              marginTop={0}
+              left={
+                <div
+                  style={{
+                    height: '34px',
+                    display: 'flex',
+                    alignItems: 'center'
+                  }}
+                >
+                  GPU Utilization
+                </div>
+              }
+            ></PageTools>
+            <GPUUtilization></GPUUtilization>
+          </Col>
+        </Row>
+      </PageContainer>
+      <DividerLine></DividerLine>
+      <PageContainer ghost title={false}>
+        <div style={{ marginTop: '0px' }}>
+          <ModelBills></ModelBills>
+        </div>
+      </PageContainer>
+      <DividerLine></DividerLine>
+      <PageContainer ghost title={false}>
+        <div style={{ marginTop: '0px' }}>
+          <UtilizationOvertime></UtilizationOvertime>
+        </div>
+      </PageContainer>
+    </>
   );
 };
 
-export default Dashboard;
+export default Dashboard;

src/pages/models/index.tsx

@@ -10,6 +10,7 @@ import {
   WechatWorkOutlined
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
+import { useNavigate } from '@umijs/max';
 import {
   Button,
   Input,
@@ -43,6 +44,7 @@ const dataSource = [
 ];
 
 const Models: React.FC = () => {
+  const navigate = useNavigate();
   const rowSelection = useTableRowSelection();
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
@@ -117,6 +119,11 @@ const Models: React.FC = () => {
       }
     });
   };
+
+  const handleOpenPlayGround = (row: any) => {
+    console.log('handleOpenPlayGround', row);
+    navigate('/playground');
+  };
   return (
     <>
       <PageContainer
@@ -214,6 +221,7 @@ const Models: React.FC = () => {
                     <Button
                       size="small"
                       type="primary"
+                      onClick={() => handleOpenPlayGround(record)}
                       icon={<WechatWorkOutlined />}
                     ></Button>
                   </Tooltip>