chore: watch request counts

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

@@ -58,6 +58,8 @@ interface ModelsProps {
   handleShowSizeChange?: (page: number, size: number) => void;
   handlePageChange: (page: number, pageSize: number | undefined) => void;
   handleDeleteSuccess: () => void;
+  onViewLogs: () => void;
+  onCancelViewLogs: () => void;
   queryParams: {
     page: number;
     perPage: number;
@@ -106,6 +108,8 @@ const Models: React.FC<ModelsProps> = ({
   handleSearch,
   handlePageChange,
   handleDeleteSuccess,
+  onViewLogs,
+  onCancelViewLogs,
   dataSource,
   gpuDeviceList,
   workerList,
@@ -400,6 +404,7 @@ const Models: React.FC<ModelsProps> = ({
 
   const handleLogModalCancel = useCallback(() => {
     setOpenLogModal(false);
+    onCancelViewLogs();
   }, []);
 
   const handleDelete = async (row: any) => {
@@ -454,31 +459,38 @@ const Models: React.FC<ModelsProps> = ({
     navigate(`/playground/chat?model=${row.name}`);
   };
 
-  const handleViewLogs = async (row: any) => {
-    try {
-      setCurrentInstance({
-        url: `${MODEL_INSTANCE_API}/${row.id}/logs`,
-        status: row.state,
-        id: row.id,
-        modelId: row.model_id,
-        tail: InstanceRealLogStatus.includes(row.state) ? undefined : PageSize
-      });
-      setOpenLogModal(true);
-    } catch (error) {
-      console.log('error:', error);
-    }
-  };
-  const handleDeleteInstace = (row: any, list: ModelInstanceListItem[]) => {
-    modalRef.current.show({
-      content: 'models.instances',
-      okText: 'common.button.delrecreate',
-      operation: 'common.delete.single.confirm',
-      name: row.name,
-      async onOk() {
-        await deleteModelInstance(row.id);
+  const handleViewLogs = useCallback(
+    async (row: any) => {
+      try {
+        setCurrentInstance({
+          url: `${MODEL_INSTANCE_API}/${row.id}/logs`,
+          status: row.state,
+          id: row.id,
+          modelId: row.model_id,
+          tail: InstanceRealLogStatus.includes(row.state) ? undefined : PageSize
+        });
+        setOpenLogModal(true);
+        onViewLogs();
+      } catch (error) {
+        console.log('error:', error);
       }
-    });
-  };
+    },
+    [onViewLogs]
+  );
+  const handleDeleteInstace = useCallback(
+    (row: any, list: ModelInstanceListItem[]) => {
+      modalRef.current.show({
+        content: 'models.instances',
+        okText: 'common.button.delrecreate',
+        operation: 'common.delete.single.confirm',
+        name: row.name,
+        async onOk() {
+          await deleteModelInstance(row.id);
+        }
+      });
+    },
+    [deleteModelInstance]
+  );
 
   const getModelInstances = async (row: any) => {
     const params = {
@@ -539,7 +551,7 @@ const Models: React.FC<ModelsProps> = ({
         handleViewLogs(row);
       }
     },
-    []
+    [handleViewLogs, handleDeleteInstace]
   );
 
   const renderModelTags = useCallback(

src/pages/llmodels/index.tsx

@@ -1,9 +1,7 @@
 import TableContext from '@/components/seal-table/table-context';
-import useSetChunkRequest, {
-  createAxiosToken
-} from '@/hooks/use-chunk-request';
+import useSetChunkRequest from '@/hooks/use-chunk-request';
 import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
-import { queryGpuDevicesList, queryWorkersList } from '@/pages/resources/apis';
+import { queryWorkersList } from '@/pages/resources/apis';
 import {
   GPUDeviceItem,
   ListItem as WokerListItem
@@ -17,7 +15,7 @@ import { ListItem } from './config/types';
 const Models: React.FC = () => {
   console.log('model list====1');
 
-  const { setChunkRequest } = useSetChunkRequest();
+  const { setChunkRequest, createAxiosToken } = useSetChunkRequest();
   const { setChunkRequest: setModelInstanceChunkRequest } =
     useSetChunkRequest();
   const [modelInstances, setModelInstances] = useState<any[]>([]);
@@ -45,24 +43,16 @@ const Models: React.FC = () => {
   const { updateChunkedList, cacheDataListRef } = useUpdateChunkedList({
     dataList: dataSource.dataList,
     setDataList(list) {
-      setDataSource({
-        total: dataSource.total,
-        loading: false,
-        dataList: list
+      setDataSource((pre) => {
+        return {
+          total: pre.total,
+          loading: false,
+          dataList: list
+        };
       });
     }
   });
 
-  const getDeviceList = async () => {
-    try {
-      const data = await queryGpuDevicesList({ page: 1, perPage: 100 });
-      const gpuDeviceMap = _.groupBy(data.items, 'worker_name');
-      setGpuDeviceList(data.items || []);
-    } catch (error) {
-      // ingore
-    }
-  };
-
   const getWorkerList = async () => {
     try {
       const data = await queryWorkersList({ page: 1, perPage: 100 });
@@ -98,7 +88,7 @@ const Models: React.FC = () => {
         loading: false,
         total: dataSource.total
       });
-      console.log('error', error);
+      console.log('error+++', error);
     } finally {
       setFirstLoad(false);
     }
@@ -122,7 +112,6 @@ const Models: React.FC = () => {
   };
 
   const updateInstanceHandler = (list: any) => {
-    console.log('updateInstanceHandler=====', list);
     setModelInstances(list);
   };
 
@@ -170,19 +159,16 @@ const Models: React.FC = () => {
     [queryParams]
   );
 
-  useEffect(() => {
-    if (!firstLoad) {
-      setTimeout(() => {
-        createModelsChunkRequest();
-        createModelsInstanceChunkRequest();
-      }, 100);
-    }
-    return () => {
-      chunkRequedtRef.current?.current?.cancel?.();
-      cacheDataListRef.current = [];
-      chunkInstanceRequedtRef.current?.current?.cancel?.();
-    };
-  }, [firstLoad]);
+  const handleOnViewLogs = useCallback(() => {
+    chunkRequedtRef.current?.current?.cancel?.();
+    cacheDataListRef.current = [];
+    chunkInstanceRequedtRef.current?.current?.cancel?.();
+  }, []);
+
+  const handleOnCancelViewLogs = useCallback(() => {
+    createModelsChunkRequest();
+    createModelsInstanceChunkRequest();
+  }, []);
 
   useEffect(() => {
     fetchData();
@@ -193,8 +179,37 @@ const Models: React.FC = () => {
 
   useEffect(() => {
     getWorkerList();
+
+    return () => {
+      chunkRequedtRef.current?.current?.cancel?.();
+      cacheDataListRef.current = [];
+      chunkInstanceRequedtRef.current?.current?.cancel?.();
+    };
   }, []);
 
+  useEffect(() => {
+    if (!firstLoad) {
+      setTimeout(() => {
+        createModelsChunkRequest();
+        createModelsInstanceChunkRequest();
+      }, 100);
+      document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'visible') {
+          createModelsChunkRequest();
+          createModelsInstanceChunkRequest();
+        } else {
+          chunkRequedtRef.current?.current?.cancel?.();
+          cacheDataListRef.current = [];
+          chunkInstanceRequedtRef.current?.current?.cancel?.();
+        }
+      });
+    }
+
+    return () => {
+      document.removeEventListener('visibilitychange', () => {});
+    };
+  }, [firstLoad]);
+
   return (
     <TableContext.Provider
       value={{
@@ -207,6 +222,8 @@ const Models: React.FC = () => {
         handleSearch={handleSearch}
         handlePageChange={handlePageChange}
         handleDeleteSuccess={fetchData}
+        onViewLogs={handleOnViewLogs}
+        onCancelViewLogs={handleOnCancelViewLogs}
         queryParams={queryParams}
         loading={dataSource.loading}
         total={dataSource.total}