fix: watch api block

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;