fix: list pagination

config/routes.ts

@@ -1,10 +1,4 @@
 export default [
-  // {
-  //   path: '/',
-  //   key: 'root',
-  //   icon: 'home',
-  //   redirect: ''
-  // },
   {
     name: 'dashboard',
     path: '/dashboard',

package.json

@@ -16,7 +16,7 @@
     "@huggingface/hub": "^0.15.1",
     "@monaco-editor/react": "^4.6.0",
     "@types/lodash": "^4.17.4",
-    "@umijs/max": "^4.2.1",
+    "@umijs/max": "^4.2.11",
     "ansi-to-html": "^0.7.2",
     "antd": "^5.18.3",
     "antd-style": "^3.6.2",
@@ -31,8 +31,8 @@
     "lodash": "^4.17.21",
     "numeral": "^2.0.6",
     "query-string": "^9.0.0",
-    "react": "~18.2.0",
+    "react": "^18.2.0",
-    "react-dom": "~18.2.0",
+    "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^4.5.0",
     "umi-presets-pro": "^2.0.3"
   },

src/app.tsx

@@ -1,11 +1,11 @@
 import { GPUStackVersionAtom } from '@/atoms/user';
 import { setAtomStorage } from '@/atoms/utils';
-import { RequestConfig, history } from '@umijs/max';
+import { requestConfig } from '@/request-config';
-import { requestConfig } from './request-config';
 import {
   queryCurrentUserState,
   queryVersionInfo
-} from './services/profile/apis';
+} from '@/services/profile/apis';
+import { RequestConfig, history } from '@umijs/max';
 
 const loginPath = '/login';
 let currentUserInfo: any = {};

src/components/Guide/Guide.less

@@ -1,4 +0,0 @@
-.title {
-  margin: 0 auto;
-  font-weight: 200;
-}

src/components/Guide/Guide.tsx

@@ -1,23 +0,0 @@
-import { Layout, Row, Typography } from 'antd';
-import React from 'react';
-import styles from './Guide.less';
-
-interface Props {
-  name: string;
-}
-
-// 脚手架示例组件
-const Guide: React.FC<Props> = (props) => {
-  const { name } = props;
-  return (
-    <Layout>
-      <Row>
-        <Typography.Title level={3} className={styles.title}>
-          欢迎使用 <strong>{name}</strong> ！
-        </Typography.Title>
-      </Row>
-    </Layout>
-  );
-};
-
-export default Guide;

src/components/Guide/index.ts

@@ -1,2 +0,0 @@
-import Guide from './Guide';
-export default Guide;

src/components/footer/index.tsx

@@ -1,7 +1,7 @@
 import { GPUStackVersionAtom } from '@/atoms/user';
 import { getAtomStorage } from '@/atoms/utils';
 import VersionInfo, { modalConfig } from '@/components/version-info';
-import externalLinks from '@/config/external-links';
+import externalLinks from '@/constants/external-links';
 import { useIntl } from '@umijs/max';
 import { Button, Modal, Space } from 'antd';
 import './index.less';

src/components/glass-bg/index.less

@@ -1,39 +0,0 @@
-.g-polygon {
-  position: absolute;
-  opacity: 0.5;
-}
-
-.g-polygon-1 {
-  // 定位代码，容器高宽随意
-  background: #fe5;
-  clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
-  width: 50%;
-  height: 50%;
-}
-
-.g-polygon-2 {
-  // 定位代码，容器高宽随意
-  background: #e950d1;
-  clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
-  width: 50%;
-  height: 50%;
-}
-
-.g-polygon-3 {
-  // 定位代码，容器高宽随意
-  background: rgba(87, 80, 233);
-  clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
-  width: 50%;
-  height: 50%;
-}
-
-.g-bg::before {
-  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  backdrop-filter: blur(150px);
-  z-index: 1;
-}

src/components/glass-bg/index.tsx

@@ -1,13 +0,0 @@
-import './index.less';
-
-const GlassBg = () => {
-  return (
-    <div className="g-bg">
-      <div className="g-polygon g-polygon-1"></div>
-      <div className="g-polygon g-polygon-2"></div>
-      <div className="g-polygon g-polygon-3"></div>
-    </div>
-  );
-};
-
-export default GlassBg;

src/components/seal-table/index.tsx

@@ -1,5 +1,14 @@
 import { RightOutlined } from '@ant-design/icons';
-import { Button, Checkbox, Col, Empty, Row, Spin } from 'antd';
+import {
+  Button,
+  Checkbox,
+  Col,
+  Empty,
+  Pagination,
+  Row,
+  Spin,
+  type PaginationProps
+} from 'antd';
 import _ from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import TableHeader from './components/table-header';
@@ -7,7 +16,9 @@ import TableRow from './components/table-row';
 import './styles/index.less';
 import { SealColumnProps, SealTableProps } from './types';
 
-const SealTable: React.FC<SealTableProps> = (props) => {
+const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
+  props
+) => {
   const {
     children,
     rowKey,
@@ -19,6 +30,7 @@ const SealTable: React.FC<SealTableProps> = (props) => {
     pollingChildren,
     watchChildren,
     rowSelection,
+    pagination,
     renderChildren,
     loadChildren,
     loadChildrenAPI
@@ -55,6 +67,15 @@ const SealTable: React.FC<SealTableProps> = (props) => {
       setIndeterminate(false);
     }
   };
+
+  const handlePageChange = (page: number, pageSize: number) => {
+    pagination?.onChange?.(page, pageSize);
+  };
+
+  const handlePageSizeChange = (current: number, size: number) => {
+    pagination?.onShowSizeChange?.(current, size);
+  };
+
   const renderHeaderPrefix = () => {
     if (expandable && rowSelection) {
       return (
@@ -153,16 +174,27 @@ const SealTable: React.FC<SealTableProps> = (props) => {
     );
   };
   return (
-    <div className="seal-table-container">
+    <>
-      {renderHeader()}
+      <div className="seal-table-container">
-      {loading ? (
+        {renderHeader()}
-        <div className="spin">
+        {loading ? (
-          <Spin></Spin>
+          <div className="spin">
+            <Spin></Spin>
+          </div>
+        ) : (
+          renderContent()
+        )}
+      </div>
+      {pagination && (
+        <div className="pagination-wrapper">
+          <Pagination
+            {...pagination}
+            onChange={handlePageChange}
+            onShowSizeChange={handlePageSizeChange}
+          ></Pagination>
         </div>
-      ) : (
-        renderContent()
       )}
-    </div>
+    </>
   );
 };
 

src/components/seal-table/styles/index.less

@@ -1,3 +1,9 @@
+.pagination-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  margin: var(--ant-margin) 0;
+}
+
 .seal-table-container {
   display: flex;
   flex-direction: column;

src/constants/defaultSettins.ts

@@ -1,28 +0,0 @@
-import { ProLayoutProps } from '@ant-design/pro-components';
-
-/**
- * @name
- */
-const Settings: ProLayoutProps & {
-  pwa?: boolean;
-  logo?: string;
-} = {
-  navTheme: 'light',
-  // 拂晓蓝
-  colorPrimary: '#2fbf85',
-  layout: 'mix',
-  contentWidth: 'Fluid',
-  fixedHeader: false,
-  fixSiderbar: true,
-  colorWeak: false,
-  title: 'seal',
-  pwa: false,
-  logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
-  iconfontUrl: '',
-  token: {
-    // 参见ts声明，demo 见文档，通过token 修改样式
-    //https://procomponents.ant.design/components/layout#%E9%80%9A%E8%BF%87-token-%E4%BF%AE%E6%94%B9%E6%A0%B7%E5%BC%8F
-  },
-};
-
-export default Settings;

src/constants/external-links.ts

@@ -1,6 +1,6 @@
 export default {
   documentation: 'https://docs.gpustack.ai/',
   github: 'https://github.com/gpustack/gpustack',
-  discord: 'https://discord.gg/2ZvXuaYq',
+  discord: 'https://discord.gg/VXYJzuaqwD',
   site: 'https://seal.io/'
 };

src/layouts/rightRender.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 
 import avatarImg from '@/assets/images/avatar.png';
-import externalLinks from '@/config/external-links';
+import externalLinks from '@/constants/external-links';
 import langConfigMap from '@/locales/lang-config-map';
 import {
   DiscordOutlined,

src/layouts/runtime.tsx

@@ -35,5 +35,5 @@ export function renderMenuIcon(icon: string) {
       icons[upperIcon] || icons[upperIcon + 'Outlined']
     );
   }
-  return null;
+  return <span></span>;
 }

src/pages/api-keys/index.tsx

@@ -1,4 +1,3 @@
-import CopyButton from '@/components/copy-button';
 import PageTools from '@/components/page-tools';
 import { PageAction } from '@/config';
 import type { PageActionType } from '@/config/types';
@@ -8,19 +7,10 @@ import { handleBatchRequest } from '@/utils';
 import { DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
-import {
+import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd';
-  Button,
-  Input,
-  Modal,
-  Space,
-  Table,
-  Tag,
-  Tooltip,
-  message
-} from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import { StrictMode, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { deleteApisKey, queryApisKeysList } from './apis';
 import AddAPIKeyModal from './components/add-apikey';
 import { ListItem } from './config/types';
@@ -38,26 +28,18 @@ const Models: React.FC = () => {
   const [openAddModal, setOpenAddModal] = useState(false);
   const [loading, setLoading] = useState(false);
   const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
-  const [title, setTitle] = useState<string>('');
   const [queryParams, setQueryParams] = useState({
     page: 1,
     perPage: 10,
     search: ''
   });
 
-  const handleShowSizeChange = (page: number, size: number) => {
+  const handlePageChange = (page: number, pageSize: number) => {
-    console.log(page, size);
+    console.log('handlePageChange====', page, pageSize);
     setQueryParams({
       ...queryParams,
-      perPage: size
+      page: page,
-    });
+      perPage: pageSize || 10
-  };
-
-  const handlePageChange = (page: number, pageSize: number | undefined) => {
-    console.log(page, pageSize);
-    setQueryParams({
-      ...queryParams,
-      page: page
     });
   };
 
@@ -151,35 +133,12 @@ const Models: React.FC = () => {
     });
   };
 
-  const renderSecrectKey = (text: string, record: ListItem) => {
-    const { value } = record;
-
-    return (
-      <Space direction="vertical">
-        <span>{text}</span>
-        {value && (
-          <span>
-            <Tag color="error" style={{ padding: '10px 12px' }}>
-              {intl.formatMessage({ id: 'apikeys.table.save.tips' })}
-            </Tag>
-            <span className="flex-center">
-              <Tooltip
-                title={value}
-              >{`${value?.slice(0, 8)}...${value?.slice(-8, -1)}`}</Tooltip>
-              <CopyButton text={value}></CopyButton>
-            </span>
-          </span>
-        )}
-      </Space>
-    );
-  };
-
   useEffect(() => {
     fetchData();
   }, [queryParams]);
 
   return (
-    <StrictMode>
+    <>
       <PageContainer
         ghost
         header={{
@@ -236,8 +195,7 @@ const Models: React.FC = () => {
             pageSize: queryParams.perPage,
             current: queryParams.page,
             total: total,
-            hideOnSinglePage: true,
+            hideOnSinglePage: queryParams.perPage === 10,
-            onShowSizeChange: handleShowSizeChange,
             onChange: handlePageChange
           }}
         >
@@ -308,7 +266,7 @@ const Models: React.FC = () => {
         onCancel={handleModalCancel}
         onOk={handleModalOk}
       ></AddAPIKeyModal>
-    </StrictMode>
+    </>
   );
 };
 

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

@@ -1,42 +0,0 @@
-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

@@ -1,191 +0,0 @@
-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={false}
-        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

@@ -1,291 +0,0 @@
-import PageTools from '@/components/page-tools';
-import StatusTag from '@/components/status-tag';
-import useTableRowSelection from '@/hooks/use-table-row-selection';
-import { NodeItem } from '@/pages/resources/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: '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 ModelNodes: 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}
-          rowKey={(record) => record.id}
-          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 ModelNodes;

src/pages/dashboard/index.tsx

@@ -1,19 +1,19 @@
 import { PageContainer } from '@ant-design/pro-components';
 import { Spin } from 'antd';
-import { StrictMode, memo, useState } from 'react';
+import { memo, useState } from 'react';
 import DashboardInner from './components/dahboard-inner';
 
 const Dashboard: React.FC = () => {
   const [loading, setLoading] = useState(false);
 
   return (
-    <StrictMode>
+    <>
       <PageContainer ghost extra={[]}>
         <Spin spinning={loading}>
           <DashboardInner setLoading={setLoading} />
         </Spin>
       </PageContainer>
-    </StrictMode>
+    </>
   );
 };
 

src/pages/home/index.less

@@ -1,3 +0,0 @@
-.container {
-  padding-top: 80px;
-}

src/pages/home/index.tsx

@@ -1,18 +0,0 @@
-import Guide from '@/components/Guide';
-import { trim } from '@/utils/format';
-import { PageContainer } from '@ant-design/pro-components';
-import { useModel } from '@umijs/max';
-import styles from './index.less';
-
-const HomePage: React.FC = () => {
-  const { name } = useModel('global');
-  return (
-    <PageContainer ghost>
-      <div className={styles.container}>
-        <Guide name={trim(name)} />
-      </div>
-    </PageContainer>
-  );
-};
-
-export default HomePage;

src/pages/llmodels/components/table-list.tsx

@@ -40,7 +40,7 @@ interface ModelsProps {
   handleSearch: (e: any) => void;
   handleNameChange: (e: any) => void;
   fetchData: () => Promise<any>;
-  handleShowSizeChange: (page: number, size: number) => void;
+  handleShowSizeChange?: (page: number, size: number) => void;
   handlePageChange: (page: number, pageSize: number | undefined) => void;
   createModelsChunkRequest: () => void;
   queryParams: {
@@ -57,7 +57,6 @@ const Models: React.FC<ModelsProps> = ({
   dataSource,
   handleNameChange,
   handleSearch,
-  handleShowSizeChange,
   handlePageChange,
   queryParams,
   loading,
@@ -338,8 +337,7 @@ const Models: React.FC<ModelsProps> = ({
             pageSize: queryParams.perPage,
             current: queryParams.page,
             total: total,
-            hideOnSinglePage: true,
+            hideOnSinglePage: queryParams.perPage === 10,
-            onShowSizeChange: handleShowSizeChange,
             onChange: handlePageChange
           }}
         >

src/pages/llmodels/index.tsx

@@ -4,7 +4,7 @@ import useSetChunkRequest, {
 } from '@/hooks/use-chunk-request';
 import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
 import _ from 'lodash';
-import { StrictMode, useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { MODELS_API, MODEL_INSTANCE_API, queryModelsList } from './apis';
 import TableList from './components/table-list';
 import { ListItem } from './config/types';
@@ -38,13 +38,6 @@ const Models: React.FC = () => {
     dataList: dataSource,
     setDataList: setDataSource
   });
-  const {
-    updateChunkedList: updateInstanceChunkList,
-    cacheDataListRef: cacheInstanceDataListRef
-  } = useUpdateChunkedList({
-    dataList: modelInstances,
-    setDataList: setModelInstances
-  });
 
   const fetchData = useCallback(async () => {
     axiosToken?.cancel?.();
@@ -57,7 +50,6 @@ const Models: React.FC = () => {
       const res: any = await queryModelsList(params, {
         cancelToken: axiosToken.token
       });
-      console.log('res=======', res);
       setDataSource(res.items);
       setTotal(res.pagination.total);
     } catch (error) {
@@ -69,41 +61,25 @@ const Models: React.FC = () => {
     }
   }, [queryParams]);
 
-  const handleShowSizeChange = useCallback(
-    (page: number, size: number) => {
-      console.log(page, size);
-      setQueryParams({
-        ...queryParams,
-        perPage: size
-      });
-    },
-    [queryParams]
-  );
-
   const handlePageChange = useCallback(
     (page: number, pageSize: number | undefined) => {
-      console.log(page, pageSize);
       setQueryParams({
         ...queryParams,
-        page: page
+        page: page,
+        perPage: pageSize || 10
       });
     },
     [queryParams]
   );
 
   const updateHandler = (list: any) => {
-    console.log('updateHandler=====', list);
     _.each(list, (data: any) => {
       updateChunkedList(data, dataSourceRef.current);
     });
   };
 
   const updateInstanceHandler = (list: any) => {
-    console.log('updateInstanceHandler=====', list);
     setModelInstances(list);
-    // _.each(list, (data: any) => {
-    //   updateInstanceChunkList(data);
-    // });
   };
 
   const createModelsChunkRequest = () => {
@@ -156,7 +132,6 @@ const Models: React.FC = () => {
       chunkRequedtRef.current?.current?.cancel?.();
       cacheDataListRef.current = [];
       chunkInstanceRequedtRef.current?.current?.cancel?.();
-      cacheInstanceDataListRef.current = [];
     };
   }, [firstLoad]);
 
@@ -168,26 +143,23 @@ const Models: React.FC = () => {
   }, [queryParams]);
 
   return (
-    <StrictMode>
+    <TableContext.Provider
-      <TableContext.Provider
+      value={{
-        value={{
+        allChildren: modelInstances
-          allChildren: modelInstances
+      }}
-        }}
+    >
-      >
+      <TableList
-        <TableList
+        dataSource={dataSource}
-          dataSource={dataSource}
+        handleNameChange={handleNameChange}
-          handleNameChange={handleNameChange}
+        handleSearch={handleSearch}
-          handleSearch={handleSearch}
+        handlePageChange={handlePageChange}
-          handleShowSizeChange={handleShowSizeChange}
+        createModelsChunkRequest={createModelsChunkRequest}
-          handlePageChange={handlePageChange}
+        queryParams={queryParams}
-          createModelsChunkRequest={createModelsChunkRequest}
+        loading={loading}
-          queryParams={queryParams}
+        total={total}
-          loading={loading}
+        fetchData={fetchData}
-          total={total}
+      ></TableList>
-          fetchData={fetchData}
+    </TableContext.Provider>
-        ></TableList>
-      </TableContext.Provider>
-    </StrictMode>
   );
 };
 

src/pages/playground/components/params-settings.tsx

@@ -203,7 +203,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
           >
             <Slider
               defaultValue={1024}
-              max={16384}
+              max={2048}
               step={1}
               style={{ marginBottom: 0, marginTop: 16 }}
               tooltip={{ open: false }}

src/pages/playground/index.tsx

@@ -1,7 +1,7 @@
 import { PageContainer } from '@ant-design/pro-components';
 import { useSearchParams } from '@umijs/max';
 import { Divider } from 'antd';
-import { StrictMode, useState } from 'react';
+import { useState } from 'react';
 import GroundLeft from './components/ground-left';
 import ParamsSettings from './components/params-settings';
 import './style/play-ground.less';
@@ -12,7 +12,7 @@ const Playground: React.FC = () => {
   const [params, setParams] = useState({});
 
   return (
-    <StrictMode>
+    <>
       <PageContainer ghost extra={[]}>
         <div className="play-ground">
           <div className="chat">
@@ -27,7 +27,7 @@ const Playground: React.FC = () => {
           </div>
         </div>
       </PageContainer>
-    </StrictMode>
+    </>
   );
 };
 

src/pages/resources/components/gpus.tsx

@@ -24,18 +24,13 @@ const GPUList: React.FC = () => {
     perPage: 10,
     search: ''
   });
-  const handleShowSizeChange = (current: number, size: number) => {
-    setQueryParams({
-      ...queryParams,
-      perPage: size
-    });
-  };
 
   const handlePageChange = (page: number, perPage: number | undefined) => {
     console.log(page, perPage);
     setQueryParams({
       ...queryParams,
-      page: page
+      page: page,
+      perPage: perPage || 10
     });
   };
 
@@ -109,8 +104,7 @@ const GPUList: React.FC = () => {
           pageSize: queryParams.perPage,
           current: queryParams.page,
           total: total,
-          hideOnSinglePage: true,
+          hideOnSinglePage: queryParams.perPage === 10,
-          onShowSizeChange: handleShowSizeChange,
           onChange: handlePageChange
         }}
       >

src/pages/resources/components/workers.tsx

@@ -50,7 +50,8 @@ const Resources: React.FC = () => {
   const handleShowSizeChange = (current: number, size: number) => {
     setQueryParams({
       ...queryParams,
-      perPage: size
+      page: current,
+      perPage: size || 10
     });
   };
 
@@ -58,7 +59,8 @@ const Resources: React.FC = () => {
     console.log(page, perPage);
     setQueryParams({
       ...queryParams,
-      page: page
+      page: page,
+      perPage: perPage || 10
     });
   };
 
@@ -199,8 +201,7 @@ const Resources: React.FC = () => {
           pageSize: queryParams.perPage,
           current: queryParams.page,
           total: total,
-          hideOnSinglePage: true,
+          hideOnSinglePage: queryParams.perPage === 10,
-          onShowSizeChange: handleShowSizeChange,
           onChange: handlePageChange
         }}
       >

src/pages/resources/index.tsx

@@ -2,7 +2,7 @@ import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
 import type { TabsProps } from 'antd';
 import { Tabs } from 'antd';
-import { StrictMode, useState } from 'react';
+import { useState } from 'react';
 import GPUs from './components/gpus';
 import Workers from './components/workers';
 
@@ -29,7 +29,7 @@ const Resources = () => {
   };
 
   return (
-    <StrictMode>
+    <>
       <PageContainer
         ghost
         header={{
@@ -47,7 +47,7 @@ const Resources = () => {
           ></Tabs>
         </div>
       </PageContainer>
-    </StrictMode>
+    </>
   );
 };
 

src/pages/users/index.tsx

@@ -18,7 +18,7 @@ import { useIntl } from '@umijs/max';
 import { Button, Input, Modal, Space, Table, message } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import { StrictMode, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { createUser, deleteUser, queryUsersList, updateUser } from './apis';
 import AddModal from './components/add-modal';
 import { FormData, ListItem } from './config/types';
@@ -77,17 +77,11 @@ const Users: React.FC = () => {
     }
   };
 
-  const handleShowSizeChange = (page: number, size: number) => {
-    setQueryParams({
-      ...queryParams,
-      perPage: size
-    });
-  };
-
   const handlePageChange = (page: number, pageSize: number | undefined) => {
     console.log(page, pageSize);
     setQueryParams({
       ...queryParams,
+      perPage: pageSize || 10,
       page: page
     });
   };
@@ -201,7 +195,7 @@ const Users: React.FC = () => {
   }, [queryParams]);
 
   return (
-    <StrictMode>
+    <>
       <PageContainer
         ghost
         header={{
@@ -258,8 +252,7 @@ const Users: React.FC = () => {
             pageSize: queryParams.perPage,
             current: queryParams.page,
             total: total,
-            hideOnSinglePage: true,
+            hideOnSinglePage: queryParams.perPage === 10,
-            onShowSizeChange: handleShowSizeChange,
             onChange: handlePageChange
           }}
         >
@@ -330,7 +323,7 @@ const Users: React.FC = () => {
         onCancel={handleModalCancel}
         onOk={handleModalOk}
       ></AddModal>
-    </StrictMode>
+    </>
   );
 };
 

typings.d.ts

@@ -15,5 +15,7 @@ declare module 'numeral';
 declare module 'mockjs';
 declare module 'react-fittext';
 declare module 'lodash';
+declare module 'crypto-js';
+declare module 'has-ansi';
 
 declare const REACT_APP_ENV: 'test' | 'dev' | 'pre' | false;