fix: watch api block

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) {

src/components/seal-table/index.tsx

@@ -11,6 +11,7 @@ const SealTable: React.FC<SealTableProps> = (props) => {
   const {
     children,
     rowKey,
+    childParentKey,
     onExpand,
     expandedRowKeys,
     loading,
@@ -137,6 +138,7 @@ const SealTable: React.FC<SealTableProps> = (props) => {
               rowSelection={rowSelection}
               expandable={expandable}
               rowKey={rowKey}
+              childParentKey={childParentKey}
               pollingChildren={pollingChildren}
               watchChildren={watchChildren}
               renderChildren={renderChildren}

src/components/seal-table/table-context.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const TableContext = React.createContext({});
+
+export default TableContext;

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[];

src/hooks/use-update-chunk-list.ts

@@ -20,7 +20,7 @@ export function useUpdateChunkedList(options: {
   const cacheDataListRef = useRef<any[]>(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]);

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<ModelsProps> = ({
     }
   ];
 
+  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<ModelsProps> = ({
           onExpand={handleExpandChange}
           loading={loading}
           rowKey="id"
+          childParentKey="model_id"
           expandable={true}
           onChange={handleTableChange}
           pollingChildren={false}
@@ -388,7 +399,7 @@ const Models: React.FC<ModelsProps> = ({
             render={(text, record) => {
               return !record.transition ? (
                 <DropdownButtons
-                  items={ActionList}
+                  items={setActionList(record)}
                   onSelect={(val) => handleSelect(val, record)}
                 ></DropdownButtons>
               ) : null;

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<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [dataSource, setDataSource] = useState<ListItem[]>([]);
   const [firstLoad, setFirstLoad] = useState(true);
   const chunkRequedtRef = useRef<any>();
+  const chunkInstanceRequedtRef = useRef<any>();
   const dataSourceRef = useRef<any>();
   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 (
-    <TableList
-      dataSource={dataSource}
-      handleNameChange={handleNameChange}
-      handleSearch={handleSearch}
-      handleShowSizeChange={handleShowSizeChange}
-      handlePageChange={handlePageChange}
-      createModelsChunkRequest={createModelsChunkRequest}
-      queryParams={queryParams}
-      loading={loading}
-      total={total}
-      fetchData={fetchData}
-    ></TableList>
+    <TableContext.Provider
+      value={{
+        allChildren: modelInstances
+      }}
+    >
+      <TableList
+        dataSource={dataSource}
+        handleNameChange={handleNameChange}
+        handleSearch={handleSearch}
+        handleShowSizeChange={handleShowSizeChange}
+        handlePageChange={handlePageChange}
+        createModelsChunkRequest={createModelsChunkRequest}
+        queryParams={queryParams}
+        loading={loading}
+        total={total}
+        fetchData={fetchData}
+      ></TableList>
+    </TableContext.Provider>
   );
 };
 
-export default memo(Models);
+export default Models;