From 73d07faacfaaee05644763ad3fdf5054e3829fc8 Mon Sep 17 00:00:00 2001 From: jialin Date: Wed, 17 Jul 2024 19:23:07 +0800 Subject: [PATCH] chore: model list render time --- config/routes.ts | 2 +- src/components/drop-down-buttons/index.tsx | 11 ++-- .../seal-table/components/header.tsx | 51 ++++++++++++++++ .../seal-table/components/pagination.tsx | 8 +++ .../seal-table/components/table-header.tsx | 3 +- src/components/seal-table/index.tsx | 60 +++---------------- .../llmodels/components/instance-item.tsx | 6 +- src/pages/llmodels/components/table-list.tsx | 6 +- src/pages/llmodels/index.tsx | 6 -- .../components/reference-params.tsx | 3 +- src/pages/resources/components/gpus.tsx | 8 ++- src/pages/resources/components/workers.tsx | 2 +- 12 files changed, 87 insertions(+), 79 deletions(-) create mode 100644 src/components/seal-table/components/header.tsx create mode 100644 src/components/seal-table/components/pagination.tsx diff --git a/config/routes.ts b/config/routes.ts index fc90b19e..5706e256 100644 --- a/config/routes.ts +++ b/config/routes.ts @@ -3,7 +3,7 @@ export default [ name: 'dashboard', path: '/dashboard', key: 'dashboard', - icon: 'home', + icon: 'AppstoreOutlined', access: 'canSeeAdmin', component: './dashboard' }, diff --git a/src/components/drop-down-buttons/index.tsx b/src/components/drop-down-buttons/index.tsx index 2ca48204..775fe9d4 100644 --- a/src/components/drop-down-buttons/index.tsx +++ b/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 = ({ 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 ; @@ -61,4 +62,4 @@ const DropdownButtons: React.FC = ({ ); }; -export default DropdownButtons; +export default memo(DropdownButtons); diff --git a/src/components/seal-table/components/header.tsx b/src/components/seal-table/components/header.tsx new file mode 100644 index 00000000..e624644d --- /dev/null +++ b/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 = (props) => { + const { onSort } = props; + return ( + + {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 ( + + + + ); + } + return null; + })} + + ); +}; + +export default Header; diff --git a/src/components/seal-table/components/pagination.tsx b/src/components/seal-table/components/pagination.tsx new file mode 100644 index 00000000..d6aec43b --- /dev/null +++ b/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 = (props) => { + return ; +}; + +export default memo(PaginationComponent); diff --git a/src/components/seal-table/components/table-header.tsx b/src/components/seal-table/components/table-header.tsx index 7356b780..df624df3 100644 --- a/src/components/seal-table/components/table-header.tsx +++ b/src/components/seal-table/components/table-header.tsx @@ -14,8 +14,7 @@ const TableHeader: React.FC = (props) => { sortOrder, onSort, sorter, - dataIndex, - defaultSortOrder + dataIndex } = props; const handleOnSort = () => { diff --git a/src/components/seal-table/index.tsx b/src/components/seal-table/index.tsx index 70efae4d..402e991d 100644 --- a/src/components/seal-table/index.tsx +++ b/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 = ( props @@ -111,48 +109,6 @@ const SealTable: React.FC = ( return null; }; - const renderHeader = () => { - return ( -
- {renderHeaderPrefix()} - - {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 ( - - - - ); - } - return null; - })} - -
- ); - }; - const renderContent = useCallback(() => { if (!props.dataSource.length) { return ( @@ -190,14 +146,12 @@ const SealTable: React.FC = ( return ( <>
- {renderHeader()} - {/* {loading ? ( -
- + { +
+ {renderHeaderPrefix()} +
{children}
- ) : ( - renderContent() - )} */} + } {renderContent()}
diff --git a/src/pages/llmodels/components/instance-item.tsx b/src/pages/llmodels/components/instance-item.tsx index 1b7771bf..74fdd448 100644 --- a/src/pages/llmodels/components/instance-item.tsx +++ b/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 = ({ } ]; - 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 = '-'; diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx index aadf162e..22a6bc9f 100644 --- a/src/pages/llmodels/components/table-list.tsx +++ b/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; 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 = ({ } ]; - 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); diff --git a/src/pages/llmodels/index.tsx b/src/pages/llmodels/index.tsx index 03c4d492..7a86e27b 100644 --- a/src/pages/llmodels/index.tsx +++ b/src/pages/llmodels/index.tsx @@ -22,7 +22,6 @@ const Models: React.FC = () => { const [firstLoad, setFirstLoad] = useState(true); const chunkRequedtRef = useRef(); const chunkInstanceRequedtRef = useRef(); - const dataSourceRef = useRef(); 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} > ); diff --git a/src/pages/playground/components/reference-params.tsx b/src/pages/playground/components/reference-params.tsx index 008fa435..38af02d1 100644 --- a/src/pages/playground/components/reference-params.tsx +++ b/src/pages/playground/components/reference-params.tsx @@ -44,9 +44,8 @@ const ReferenceParams = (props: ReferenceParamsProps) => { - + diff --git a/src/pages/resources/components/gpus.tsx b/src/pages/resources/components/gpus.tsx index 6270761e..5e22a3b6 100644 --- a/src/pages/resources/components/gpus.tsx +++ b/src/pages/resources/components/gpus.tsx @@ -172,9 +172,13 @@ const GPUList: React.FC = () => { label={ - Total: {convertFileSize(record.memory?.total, 0)} + {intl.formatMessage({ id: 'resources.table.total' })}:{' '} + {convertFileSize(record.memory?.total, 0)} + + + {intl.formatMessage({ id: 'resources.table.used' })}:{' '} + {convertFileSize(record.memory?.used, 0)} - Used: {convertFileSize(record.memory?.used, 0)} } > diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx index 09dbc1bb..7009ae60 100644 --- a/src/pages/resources/components/workers.tsx +++ b/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}]