From cb4c984e968146698d8174f8a8f1200a20821059 Mon Sep 17 00:00:00 2001 From: jialin Date: Mon, 15 Jul 2024 15:07:11 +0800 Subject: [PATCH] fix: watch api block --- .../seal-table/components/table-row.tsx | 41 +++++++--- src/components/seal-table/index.tsx | 2 + src/components/seal-table/table-context.ts | 5 ++ src/components/seal-table/types.ts | 1 + src/hooks/use-update-chunk-list.ts | 4 +- src/pages/llmodels/components/table-list.tsx | 13 +++- src/pages/llmodels/index.tsx | 77 ++++++++++++++----- 7 files changed, 110 insertions(+), 33 deletions(-) create mode 100644 src/components/seal-table/table-context.ts diff --git a/src/components/seal-table/components/table-row.tsx b/src/components/seal-table/components/table-row.tsx index bc50c639..94ae8bda 100644 --- a/src/components/seal-table/components/table-row.tsx +++ b/src/components/seal-table/components/table-row.tsx @@ -6,6 +6,7 @@ import classNames from 'classnames'; import _ from 'lodash'; import React, { useEffect, useRef, useState } from 'react'; import RowContext from '../row-context'; +import TableContext from '../table-context'; import { RowContextProps, SealTableProps } from '../types'; const TableRow: React.FC< @@ -19,6 +20,7 @@ const TableRow: React.FC< rowSelection, expandedRowKeys, rowKey, + childParentKey, columns, pollingChildren, watchChildren, @@ -27,6 +29,9 @@ const TableRow: React.FC< loadChildren, loadChildrenAPI } = props; + const tableContext: any = React.useContext<{ + allChildren?: any[]; + }>(TableContext); const { setChunkRequest } = useSetChunkRequest(); const [expanded, setExpanded] = useState(false); const [checked, setChecked] = useState(false); @@ -44,6 +49,7 @@ const TableRow: React.FC< setDataList: setChildrenData // callback: (list) => renderChildren?.(list) }); + useEffect(() => { if (rowSelection) { const { selectedRowKeys } = rowSelection; @@ -55,13 +61,13 @@ const TableRow: React.FC< } }, [rowSelection]); - // useEffect(() => { - // if (expandedRowKeys?.includes(record[rowKey])) { - // setExpanded(true); - // } else { - // setExpanded(false); - // } - // }, [expandedRowKeys]); + useEffect(() => { + if (expandedRowKeys?.includes(record[rowKey])) { + setExpanded(true); + } else { + setExpanded(false); + } + }, [expandedRowKeys]); useEffect(() => { return () => { @@ -92,22 +98,31 @@ const TableRow: React.FC< try { setLoading(true); const data = await loadChildren?.(record); + setChildrenData(data || []); setLoading(false); } catch (error) { setChildrenData([]); setLoading(false); } finally { - childrenDataRef.current = childrenData; setFirstLoad(false); } }; + const filterUpdateChildrenHandler = () => { + _.each(tableContext.allChildren || [], (data: any) => { + if (_.get(data, ['data', [childParentKey]]) === _.get(record, [rowKey])) { + updateChunkedList(data); + } + }); + }; + const updateChildrenHandler = (list: any) => { _.each(list, (data: any) => { updateChunkedList(data, childrenDataRef.current); }); }; + const createChunkRequest = () => { chunkRequestRef.current?.current?.cancel?.(); if (!watchChildren) { @@ -167,13 +182,19 @@ const TableRow: React.FC< useEffect(() => { if (!firstLoad && expanded) { - createChunkRequest(); + console.log( + 'update children=====', + record.name, + tableContext.allChildren + ); + cacheDataListRef.current = childrenData; + filterUpdateChildrenHandler(); } return () => { chunkRequestRef.current?.current?.cancel?.(); cacheDataListRef.current = []; }; - }, [firstLoad, expanded]); + }, [firstLoad, expanded, tableContext.allChildren]); const renderRowPrefix = () => { if (expandable && rowSelection) { diff --git a/src/components/seal-table/index.tsx b/src/components/seal-table/index.tsx index e7351b65..8e5efd29 100644 --- a/src/components/seal-table/index.tsx +++ b/src/components/seal-table/index.tsx @@ -11,6 +11,7 @@ const SealTable: React.FC = (props) => { const { children, rowKey, + childParentKey, onExpand, expandedRowKeys, loading, @@ -137,6 +138,7 @@ const SealTable: React.FC = (props) => { rowSelection={rowSelection} expandable={expandable} rowKey={rowKey} + childParentKey={childParentKey} pollingChildren={pollingChildren} watchChildren={watchChildren} renderChildren={renderChildren} diff --git a/src/components/seal-table/table-context.ts b/src/components/seal-table/table-context.ts new file mode 100644 index 00000000..496f0b7a --- /dev/null +++ b/src/components/seal-table/table-context.ts @@ -0,0 +1,5 @@ +import React from 'react'; + +const TableContext = React.createContext({}); + +export default TableContext; diff --git a/src/components/seal-table/types.ts b/src/components/seal-table/types.ts index 64e0d334..9ac0c3d7 100644 --- a/src/components/seal-table/types.ts +++ b/src/components/seal-table/types.ts @@ -24,6 +24,7 @@ export interface RowSelectionProps { onChange: (selectedRowKeys: React.Key[]) => void; } export interface SealTableProps { + childParentKey?: string; expandedRowKeys?: React.Key[]; rowSelection?: RowSelectionProps; children: React.ReactNode[]; diff --git a/src/hooks/use-update-chunk-list.ts b/src/hooks/use-update-chunk-list.ts index 94ca0cd2..3c39d50a 100644 --- a/src/hooks/use-update-chunk-list.ts +++ b/src/hooks/use-update-chunk-list.ts @@ -20,7 +20,7 @@ export function useUpdateChunkedList(options: { const cacheDataListRef = useRef(options.dataList || []); const updateChunkedList = ( data: ChunkedCollection, - dataList: { id: string | number }[] + dataList?: { id: string | number }[] ) => { console.log('updateChunkedList=====', { ids: data?.ids, @@ -54,7 +54,7 @@ export function useUpdateChunkedList(options: { const updateItem = _.cloneDeep(item); newDataList.push(updateItem); } - console.log('create=========', updateIndex, dataList, collections); + console.log('create=========', updateIndex, collections); }); cacheDataListRef.current = [...newDataList, ...cacheDataListRef.current]; options.setDataList?.([...cacheDataListRef.current]); diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx index 4eeae7d0..4f14e011 100644 --- a/src/pages/llmodels/components/table-list.tsx +++ b/src/pages/llmodels/components/table-list.tsx @@ -19,6 +19,7 @@ import { PageContainer } from '@ant-design/pro-components'; import { Access, useAccess, useIntl, useNavigate } from '@umijs/max'; import { Button, Input, Modal, Space, message } from 'antd'; import dayjs from 'dayjs'; +import _ from 'lodash'; import { memo, useCallback, useState } from 'react'; import { MODELS_API, @@ -101,6 +102,15 @@ const Models: React.FC = ({ } ]; + const setActionList = (record: ListItem) => { + return _.filter(ActionList, (action: any) => { + if (action.key === 'chat') { + return record.ready_replicas > 0; + } + return true; + }); + }; + const handleTableChange = (pagination: any, filters: any, sorter: any) => { console.log('handleTableChange=======', pagination, filters, sorter); setSortOrder(sorter.order); @@ -315,6 +325,7 @@ const Models: React.FC = ({ onExpand={handleExpandChange} loading={loading} rowKey="id" + childParentKey="model_id" expandable={true} onChange={handleTableChange} pollingChildren={false} @@ -388,7 +399,7 @@ const Models: React.FC = ({ render={(text, record) => { return !record.transition ? ( handleSelect(val, record)} > ) : null; diff --git a/src/pages/llmodels/index.tsx b/src/pages/llmodels/index.tsx index e6984f10..e8b2b073 100644 --- a/src/pages/llmodels/index.tsx +++ b/src/pages/llmodels/index.tsx @@ -1,10 +1,11 @@ +import TableContext from '@/components/seal-table/table-context'; import useSetChunkRequest, { createAxiosToken } from '@/hooks/use-chunk-request'; import useUpdateChunkedList from '@/hooks/use-update-chunk-list'; import _ from 'lodash'; -import { memo, useCallback, useEffect, useRef, useState } from 'react'; -import { MODELS_API, queryModelsList } from './apis'; +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'; @@ -13,12 +14,15 @@ const Models: React.FC = () => { console.log('model list====1'); const { setChunkRequest } = useSetChunkRequest(); - + const { setChunkRequest: setModelInstanceChunkRequest } = + useSetChunkRequest(); const [total, setTotal] = useState(100); + const [modelInstances, setModelInstances] = useState([]); const [loading, setLoading] = useState(false); const [dataSource, setDataSource] = useState([]); const [firstLoad, setFirstLoad] = useState(true); const chunkRequedtRef = useRef(); + const chunkInstanceRequedtRef = useRef(); const dataSourceRef = useRef(); let axiosToken = createAxiosToken(); const [queryParams, setQueryParams] = useState({ @@ -34,6 +38,13 @@ const Models: React.FC = () => { dataList: dataSource, setDataList: setDataSource }); + const { + updateChunkedList: updateInstanceChunkList, + cacheDataListRef: cacheInstanceDataListRef + } = useUpdateChunkedList({ + dataList: modelInstances, + setDataList: setModelInstances + }); const fetchData = useCallback(async () => { axiosToken?.cancel?.(); @@ -47,9 +58,6 @@ const Models: React.FC = () => { cancelToken: axiosToken.token }); console.log('res=======', res); - // if (!firstLoad) { - // setDataSource(res.items); - // } setDataSource(res.items); setTotal(res.pagination.total); } catch (error) { @@ -84,11 +92,20 @@ const Models: React.FC = () => { ); 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 = () => { chunkRequedtRef.current?.current?.cancel?.(); try { @@ -103,6 +120,18 @@ const Models: React.FC = () => { // ignore } }; + const createModelsInstanceChunkRequest = () => { + chunkInstanceRequedtRef.current?.current?.cancel?.(); + try { + chunkInstanceRequedtRef.current = setModelInstanceChunkRequest({ + url: `${MODEL_INSTANCE_API}`, + params: {}, + handler: updateInstanceHandler + }); + } catch (error) { + // ignore + } + }; const handleSearch = useCallback((e: any) => { fetchData(); @@ -121,11 +150,13 @@ const Models: React.FC = () => { useEffect(() => { if (!firstLoad) { createModelsChunkRequest(); + createModelsInstanceChunkRequest(); } - createModelsChunkRequest(); return () => { chunkRequedtRef.current?.current?.cancel?.(); cacheDataListRef.current = []; + chunkInstanceRequedtRef.current?.current?.cancel?.(); + cacheInstanceDataListRef.current = []; }; }, [firstLoad]); @@ -137,19 +168,25 @@ const Models: React.FC = () => { }, [queryParams]); return ( - + + + ); }; -export default memo(Models); +export default Models;