chore: model list render time

src/components/drop-down-buttons/index.tsx

@@ -1,6 +1,7 @@
 import { MoreOutlined } from '@ant-design/icons';
 import { Button, Dropdown, Tooltip, type MenuProps } from 'antd';
 import _ from 'lodash';
+import { memo, useCallback } from 'react';
 
 interface DropdownButtonsProps {
   items: MenuProps['items'];
@@ -13,16 +14,16 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
   size = 'small',
   onSelect
 }) => {
-  const handleMenuClick = (item: any) => {
+  const handleMenuClick = useCallback((item: any) => {
     console.log('menu click', item.key);
     const selectItem = _.find(items, { key: item.key });
     onSelect(item.key, selectItem);
-  };
+  }, []);
 
-  const handleButtonClick = (e: any) => {
+  const handleButtonClick = useCallback((e: any) => {
     const headItem = _.head(items);
     onSelect(headItem.key, headItem);
-  };
+  }, []);
 
   if (!items?.length) {
     return <span></span>;
@@ -61,4 +62,4 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
   );
 };
 
-export default DropdownButtons;
+export default memo(DropdownButtons);

src/components/seal-table/components/header.tsx

@@ -0,0 +1,51 @@
+import { Col, Row } from 'antd';
+import React from 'react';
+import { SealColumnProps } from '../types';
+import TableHeader from './table-header';
+
+interface HeaderProps {
+  children: React.ReactNode[];
+  onSort?: (dataIndex: string, order: any) => void;
+}
+
+const Header: React.FC<HeaderProps> = (props) => {
+  const { onSort } = props;
+  return (
+    <Row className="row">
+      {React.Children.map(props.children, (child, i) => {
+        const { props: columnProps } = child as any;
+        const {
+          title,
+          dataIndex,
+          align,
+          span,
+          headerStyle,
+          sortOrder,
+          sorter,
+          defaultSortOrder
+        } = columnProps as SealColumnProps;
+        if (React.isValidElement(child)) {
+          return (
+            <Col span={span} key={i}>
+              <TableHeader
+                onSort={onSort}
+                sorter={sorter}
+                dataIndex={dataIndex}
+                sortOrder={sortOrder}
+                defaultSortOrder={defaultSortOrder}
+                title={title}
+                style={headerStyle}
+                firstCell={i === 0}
+                align={align}
+                lastCell={i === props.children.length - 1}
+              ></TableHeader>
+            </Col>
+          );
+        }
+        return null;
+      })}
+    </Row>
+  );
+};
+
+export default Header;

src/components/seal-table/components/pagination.tsx

@@ -0,0 +1,8 @@
+import { Pagination, type PaginationProps } from 'antd';
+import { memo } from 'react';
+
+const PaginationComponent: React.FC<PaginationProps> = (props) => {
+  return <Pagination {...props} />;
+};
+
+export default memo(PaginationComponent);

src/components/seal-table/components/table-header.tsx

@@ -14,8 +14,7 @@ const TableHeader: React.FC<TableHeaderProps> = (props) => {
     sortOrder,
     onSort,
     sorter,
-    dataIndex,
-    defaultSortOrder
+    dataIndex
   } = props;
 
   const handleOnSort = () => {

src/components/seal-table/index.tsx

@@ -2,19 +2,17 @@ import { RightOutlined } from '@ant-design/icons';
 import {
   Button,
   Checkbox,
-  Col,
   Empty,
   Pagination,
-  Row,
   Spin,
   type PaginationProps
 } from 'antd';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import TableHeader from './components/table-header';
+import Header from './components/header';
 import TableRow from './components/table-row';
 import './styles/index.less';
-import { SealColumnProps, SealTableProps } from './types';
+import { SealTableProps } from './types';
 
 const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
   props
@@ -111,48 +109,6 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
     return null;
   };
 
-  const renderHeader = () => {
-    return (
-      <div className="header-row-wrapper">
-        {renderHeaderPrefix()}
-        <Row className="row">
-          {React.Children.map(props.children, (child, i) => {
-            const { props: columnProps } = child as any;
-            const {
-              title,
-              dataIndex,
-              align,
-              span,
-              headerStyle,
-              sortOrder,
-              sorter,
-              defaultSortOrder
-            } = columnProps as SealColumnProps;
-            if (React.isValidElement(child)) {
-              return (
-                <Col span={span} key={i}>
-                  <TableHeader
-                    onSort={onSort}
-                    sorter={sorter}
-                    dataIndex={dataIndex}
-                    sortOrder={sortOrder}
-                    defaultSortOrder={defaultSortOrder}
-                    title={title}
-                    style={headerStyle}
-                    firstCell={i === 0}
-                    align={align}
-                    lastCell={i === props.children.length - 1}
-                  ></TableHeader>
-                </Col>
-              );
-            }
-            return null;
-          })}
-        </Row>
-      </div>
-    );
-  };
-
   const renderContent = useCallback(() => {
     if (!props.dataSource.length) {
       return (
@@ -190,14 +146,12 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
   return (
     <>
       <div className="seal-table-container">
-        {renderHeader()}
-        {/* {loading ? (
-          <div className="spin">
-            <Spin></Spin>
+        {
+          <div className="header-row-wrapper">
+            {renderHeaderPrefix()}
+            <Header onSort={onSort}>{children}</Header>
           </div>
-        ) : (
-          renderContent()
-        )} */}
+        }
 
         <Spin spinning={loading}>{renderContent()}</Spin>
       </div>

src/pages/llmodels/components/instance-item.tsx

@@ -10,7 +10,7 @@ import { useIntl } from '@umijs/max';
 import { Col, Row, Space, Tooltip } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { InstanceStatusMap, InstanceStatusMapValue, status } from '../config';
 import { ModelInstanceListItem } from '../config/types';
 
@@ -49,14 +49,14 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
     }
   ];
 
-  const setChildActionList = (item: ModelInstanceListItem) => {
+  const setChildActionList = useCallback((item: ModelInstanceListItem) => {
     return _.filter(childActionList, (action: any) => {
       if (action.key === 'viewlog') {
         return action.status.includes(item.state);
       }
       return true;
     });
-  };
+  }, []);
 
   const renderWorkerInfo = (item: ModelInstanceListItem) => {
     let workerIp = '-';

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

@@ -39,10 +39,8 @@ import ViewLogsModal from './view-logs-modal';
 interface ModelsProps {
   handleSearch: (e: any) => void;
   handleNameChange: (e: any) => void;
-  fetchData: () => Promise<any>;
   handleShowSizeChange?: (page: number, size: number) => void;
   handlePageChange: (page: number, pageSize: number | undefined) => void;
-  createModelsChunkRequest: () => void;
   queryParams: {
     page: number;
     perPage: number;
@@ -101,14 +99,14 @@ const Models: React.FC<ModelsProps> = ({
     }
   ];
 
-  const setActionList = (record: ListItem) => {
+  const setActionList = useCallback((record: ListItem) => {
     return _.filter(ActionList, (action: any) => {
       if (action.key === 'chat') {
         return record.ready_replicas > 0;
       }
       return true;
     });
-  };
+  }, []);
 
   const handleOnSort = (dataIndex: string, order: any) => {
     console.log('handleTableChange=======', dataIndex, order);

src/pages/llmodels/index.tsx

@@ -22,7 +22,6 @@ const Models: React.FC = () => {
   const [firstLoad, setFirstLoad] = useState(true);
   const chunkRequedtRef = useRef<any>();
   const chunkInstanceRequedtRef = useRef<any>();
-  const dataSourceRef = useRef<any>();
   let axiosToken = createAxiosToken();
   const [queryParams, setQueryParams] = useState({
     page: 1,
@@ -30,8 +29,6 @@ const Models: React.FC = () => {
     search: ''
   });
 
-  // dataSourceRef.current = dataSource;
-
   const { updateChunkedList, cacheDataListRef } = useUpdateChunkedList({
     dataList: dataSource,
     setDataList: setDataSource
@@ -51,7 +48,6 @@ const Models: React.FC = () => {
       if (!firstLoad) {
         setDataSource(res.items);
       }
-      // setDataSource(res.items);
       setTotal(res.pagination.total);
     } catch (error) {
       setDataSource([]);
@@ -154,11 +150,9 @@ const Models: React.FC = () => {
         handleNameChange={handleNameChange}
         handleSearch={handleSearch}
         handlePageChange={handlePageChange}
-        createModelsChunkRequest={createModelsChunkRequest}
         queryParams={queryParams}
         loading={loading}
         total={total}
-        fetchData={fetchData}
       ></TableList>
     </TableContext.Provider>
   );

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

@@ -44,9 +44,8 @@ const ReferenceParams = (props: ReferenceParamsProps) => {
         </Tooltip>
       </span>
 
-      <span>
+      <span className="usage">
         <Tooltip
-          trigger={['click']}
           title={
             <Space>
               <span>

src/pages/resources/components/gpus.tsx

@@ -172,9 +172,13 @@ const GPUList: React.FC = () => {
                 label={
                   <span className="flex-column">
                     <span>
-                      Total: {convertFileSize(record.memory?.total, 0)}
+                      {intl.formatMessage({ id: 'resources.table.total' })}:{' '}
+                      {convertFileSize(record.memory?.total, 0)}
+                    </span>
+                    <span>
+                      {intl.formatMessage({ id: 'resources.table.used' })}:{' '}
+                      {convertFileSize(record.memory?.used, 0)}
                     </span>
-                    <span>Used: {convertFileSize(record.memory?.used, 0)}</span>
                   </span>
                 }
               ></ProgressBar>

src/pages/resources/components/workers.tsx

@@ -315,7 +315,7 @@ const Resources: React.FC = () => {
                             className="m-r-5"
                             style={{ display: 'flex', width: 25 }}
                           >
-                            [{index}]
+                            [{item.index}]
                           </span>
                           <ProgressBar
                             key={index}