fix: remove instance from cache after deleting

src/atoms/models.ts

@@ -35,3 +35,5 @@ export const workerListAtom = atom<
 >([]);
 
 export const backendOptionsAtom = atom<BackendOption[]>([]);
+
+export const resourceOverviewAtom = atom<Record<string, any>>({});

src/components/seal-table/components/table-cell.tsx

@@ -29,7 +29,7 @@ const CellWrapper = styled.div`
 `;
 
 const TableCell: React.FC<SealColumnProps> = (props) => {
-  const { dataIndex, render, align, editable } = props;
+  const { dataIndex, render, align, editable, dataField } = props;
 
   return (
     <CellWrapper
@@ -40,7 +40,7 @@ const TableCell: React.FC<SealColumnProps> = (props) => {
       })}
     >
       <CellContent
-        dataIndex={dataIndex}
+        dataIndex={dataField || dataIndex}
         render={render}
         editable={editable}
       ></CellContent>

src/components/seal-table/types.ts

@@ -25,6 +25,7 @@ export interface SealColumnProps {
   render?: (text: any, record: any) => React.ReactNode;
   dataIndex: string;
   key?: string;
+  dataField?: string; // Added dataField property, aviods conflict with dataIndex, because dataIndex maybe used in sorting
   width?: number;
   span: number;
   align?: 'left' | 'center' | 'right';
@@ -90,7 +91,7 @@ export interface SealTableProps {
   watchChildren?: boolean;
   loading?: boolean;
   loadend?: boolean;
-  onCell?: (record: any, dataIndex: string) => void;
+  onCell?: (record: any, extra: any) => void;
   onTableSort?: (order: TableOrder | Array<TableOrder>) => void;
   onExpand?: (expanded: boolean, record: any, rowKey: any) => void;
   onExpandAll?: (expanded: boolean) => void;

src/layouts/index.tsx

@@ -8,6 +8,7 @@ import routeCachekey from '@/config/route-cachekey';
 import { DEFAULT_ENTER_PAGE } from '@/config/settings';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import useUserSettings from '@/hooks/use-user-settings';
+import useAddResource from '@/pages/dashboard/hooks/use-add-resource';
 import { logout } from '@/pages/login/apis';
 import { useAccessMarkedRoutes } from '@@/plugin-access';
 import { useModel } from '@@/plugin-model';
@@ -48,6 +49,13 @@ const NO_CONTAINER_PAGES = [
   'clusterCreate'
 ];
 
+const CHECK_RESOURCE_PATH = [
+  '/resources/workers',
+  '/cluster-management/clusters/list',
+  '/cluster-management/credentials',
+  '/cluster-management/clusters/create'
+];
+
 const loginPath = DEFAULT_ENTER_PAGE.login;
 
 // Filter out the routes that need to be displayed, where filterFn indicates the levels that should not be shown
@@ -104,6 +112,12 @@ export default (props: any) => {
   const { initialize: initialize } = useOverlayScroller({
     defer: false
   });
+  const {
+    setLoadingStatus,
+    fetchResourceData,
+    NoResourceModal,
+    loadingStatus
+  } = useAddResource();
   const [modal, contextHolder] = Modal.useModal();
   const { themeData, setUserSettings, userSettings } = useUserSettings();
   const [userInfo] = useAtom(userAtom);
@@ -241,6 +255,10 @@ export default (props: any) => {
     const { location } = history;
     const { pathname } = location;
 
+    if (!CHECK_RESOURCE_PATH.includes(pathname)) {
+      // fetchResourceData();
+    }
+
     initRouteCacheValue(pathname);
     dropRouteCache(pathname);
 
@@ -347,6 +365,7 @@ export default (props: any) => {
             </PageContainerInner>
           )}
         </Exception>
+        {NoResourceModal}
       </ProLayout>
       {contextHolder}
     </ConfigProvider>

src/pages/cluster-management/hooks/use-cluster-columns.tsx

@@ -44,7 +44,7 @@ const useClusterColumns = (
         title: intl.formatMessage({ id: 'clusters.table.provider' }),
         dataIndex: 'provider',
         sorter: tableSorter(2),
-        span: 4,
+        span: 3,
         render: (value: string) => (
           <AutoTooltip ghost minWidth={20}>
             {ProviderLabelMap[value]}
@@ -55,17 +55,20 @@ const useClusterColumns = (
         title: 'GPUs',
         dataIndex: 'gpus',
         span: 2,
+        sorter: tableSorter(3),
         render: (value: number) => <span>{value}</span>
       },
       {
         title: intl.formatMessage({ id: 'clusters.table.deployments' }),
         dataIndex: 'models',
-        span: 2,
+        sorter: tableSorter(4),
+        span: 3,
         render: (value: number) => <span>{value}</span>
       },
       {
         title: intl.formatMessage({ id: 'resources.nodes' }),
         dataIndex: 'workers',
+        sorter: tableSorter(5),
         span: 3,
         render: (value: number, record: ClusterListItem) => (
           <span>
@@ -90,7 +93,7 @@ const useClusterColumns = (
         title: intl.formatMessage({ id: 'common.table.createTime' }),
         dataIndex: 'created_at',
         defaultSortOrder: 'descend',
-        sorter: tableSorter(5),
+        sorter: tableSorter(6),
         span: 4,
         render: (value: string) => (
           <AutoTooltip ghost minWidth={20}>

src/pages/cluster-management/hooks/use-cluster-list.ts

@@ -1,8 +1,13 @@
-import { clusterListAtom, workerListAtom } from '@/atoms/models';
+import {
+  clusterListAtom,
+  resourceOverviewAtom,
+  workerListAtom
+} from '@/atoms/models';
 import { queryClusterList } from '@/pages/cluster-management/apis';
 import { queryWorkersList } from '@/pages/resources/apis';
 import { useAtom } from 'jotai';
 import { useState } from 'react';
+import { queryDashboardData } from '../../dashboard/apis';
 
 /**
  * Currently fetch the cluster list and worker list for checking resource existence.
@@ -32,6 +37,11 @@ export default function useClusterList() {
   >([]);
   const [clustersAtom, setClusterListAtom] = useAtom(clusterListAtom);
   const [workersAtom, setWorkerListAtom] = useAtom(workerListAtom);
+  const [resourceAtom, setResourceOverview] = useAtom(resourceOverviewAtom);
+  const [resourceCount, setResourceCount] = useState<Record<string, any>>({
+    cluster_count: 0,
+    worker_count: 0
+  });
 
   const fetchClusterList = async () => {
     try {
@@ -67,7 +77,7 @@ export default function useClusterList() {
     }
   };
 
-  const fetchAll = async () => {
+  const fetchData = async () => {
     const [clusters, workers] = await Promise.all([
       fetchClusterList(),
       fetchWorkerList()
@@ -82,12 +92,33 @@ export default function useClusterList() {
     };
   };
 
+  const fetchResource = async () => {
+    try {
+      const res = await queryDashboardData();
+      setResourceOverview(res.resource_counts);
+      setResourceCount(res.resource_counts);
+      return {
+        hasClusters: res.resource_counts?.cluster_count > 0,
+        hasWorkers: res.resource_counts?.worker_count > 0
+      };
+    } catch (error) {
+      setResourceOverview({});
+      setResourceCount({});
+      return {
+        hasClusters: false,
+        hasWorkers: false
+      };
+    }
+  };
+
   return {
     clusterList,
     workerList,
     clustersAtom,
     workersAtom,
-    fetchAll,
+    resourceAtom,
+    resourceCount,
+    fetchResource,
     fetchWorkerList,
     fetchClusterList
   };

src/pages/dashboard/components/system-load.tsx

@@ -2,6 +2,7 @@ import CardWrapper from '@/components/card-wrapper';
 import GaugeChart from '@/components/echarts/gauge';
 import PageTools from '@/components/page-tools';
 import BaseSelect from '@/components/seal-form/base/select';
+import { queryClusterList } from '@/pages/cluster-management/apis';
 import { useIntl } from '@umijs/max';
 import { Col, Row } from 'antd';
 import _ from 'lodash';
@@ -15,8 +16,11 @@ const resourceChartHeight = 400;
 
 const SystemLoad = () => {
   const intl = useIntl();
-  const { system_load, fetchData, clusterList } = useContext(DashboardContext);
+  const { system_load, fetchData } = useContext(DashboardContext);
   const [systemLoadData, setSystemLoadData] = useState<any>(system_load || {});
+  const [clusterList, setClusterList] = useState<Global.BaseOption<number>[]>(
+    []
+  );
 
   const chartData = useMemo(() => {
     const data = systemLoadData?.current || {};
@@ -49,6 +53,22 @@ const SystemLoad = () => {
     }
   };
 
+  useEffect(() => {
+    const fetchClusters = async () => {
+      try {
+        const res = await queryClusterList({ page: -1 });
+        const options = res.items.map((cluster: any) => ({
+          label: cluster.name,
+          value: cluster.id
+        }));
+        setClusterList(options);
+      } catch (error) {
+        setClusterList([]);
+      }
+    };
+    fetchClusters();
+  }, []);
+
   return (
     <div>
       <div className="system-load">

src/pages/dashboard/config/dashboard-context.ts

@@ -4,7 +4,7 @@ import { DashboardProps } from './types';
 export const DashboardContext = createContext<
   DashboardProps & {
     fetchData: (params?: { [key: string]: any }) => Promise<void>;
-    clusterList: Global.BaseOption<
+    clusterList?: Global.BaseOption<
       number,
       { provider: string; state: string | number }
     >[];

src/pages/dashboard/hooks/use-add-resource.tsx

@@ -58,8 +58,7 @@ export default function useAddResource() {
   const navigate = useNavigate();
   const [, setClusterSession] = useAtom(clusterSessionAtom);
 
-  const { fetchAll, clusterList, workerList, clustersAtom, workersAtom } =
+  const { fetchResource, resourceCount, resourceAtom } = useClusterList();
-    useClusterList();
 
   const [hiddenModal, setHiddenModal] = useState(false);
   const [loadingStatus, setLoadingStatus] = useState({
@@ -68,12 +67,14 @@ export default function useAddResource() {
   });
 
   const isNoResource = useMemo(() => {
-    const noResource = workerList.length === 0 || clusterList.length === 0;
+    const noResource =
+      !resourceAtom?.cluster_count || !resourceAtom?.worker_count;
     return noResource && !loadingStatus.loading && loadingStatus.loadend;
-  }, [workersAtom.length, clustersAtom.length, loadingStatus]);
+  }, [resourceAtom, loadingStatus]);
 
   const contentInfo = useMemo(() => {
-    if (clusterList.length === 0) {
+    console.log('resourceCount=', resourceCount);
+    if (!resourceCount.cluster_count) {
       return {
         title: intl.formatMessage({ id: 'noresult.cluster.title' }),
         subTitle: intl.formatMessage({ id: 'noresult.resources.cluster' }),
@@ -85,14 +86,14 @@ export default function useAddResource() {
       subTitle: intl.formatMessage({ id: 'noresult.resources.worker' }),
       btnText: intl.formatMessage({ id: 'noresult.workers.button.add' })
     };
-  }, [clusterList.length, workerList.length, intl]);
+  }, [resourceCount, intl]);
 
   const open: boolean = useMemo(() => {
     return isNoResource && !hiddenModal;
   }, [isNoResource, hiddenModal]);
 
   const handleCreate = () => {
-    if (clusterList.length === 0) {
+    if (!resourceCount.cluster_count) {
       setClusterSession({
         firstAddWorker: false,
         firstAddCluster: true
@@ -104,7 +105,7 @@ export default function useAddResource() {
       return;
     }
 
-    if (workerList.length === 0) {
+    if (!resourceCount.worker_count) {
       setClusterSession({
         firstAddWorker: true,
         firstAddCluster: false
@@ -117,12 +118,20 @@ export default function useAddResource() {
     setHiddenModal(true);
   };
 
-  const Modal = (
+  const fetchResourceData = async () => {
+    setLoadingStatus({ loading: true, loadend: false });
+    setHiddenModal(false);
+    await fetchResource();
+    setLoadingStatus({ loading: false, loadend: true });
+  };
+
+  const NoResourceModal = (
     <ScrollerModal
       open={open}
       footer={null}
       maskClosable={false}
       closeIcon={null}
+      destroyOnHidden={false}
       onCancel={handleCancel}
     >
       <Content>
@@ -149,11 +158,11 @@ export default function useAddResource() {
     open,
     contentInfo,
     loadingStatus,
-    clusterList,
+    NoResourceModal,
-    Modal,
     handleCreate,
     setLoadingStatus,
     handleCancel,
-    fetchAll
+    fetchResource,
+    fetchResourceData
   };
 }

src/pages/dashboard/index.tsx

@@ -6,57 +6,36 @@ import { queryDashboardData } from './apis';
 import DashboardInner from './components/dahboard-inner';
 import DashboardContext from './config/dashboard-context';
 import { DashboardProps } from './config/types';
-import useAddResource from './hooks/use-add-resource';
 
 const Dashboard: React.FC = () => {
-  const { setLoadingStatus, fetchAll, Modal, loadingStatus, clusterList } =
-    useAddResource();
   const [data, setData] = useState<DashboardProps>({} as DashboardProps);
+  const [loading, setLoading] = useState(false);
 
   const fetchDashboardData = useMemoizedFn(async () => {
     try {
+      setLoading(true);
       const res = await queryDashboardData();
       setData(res);
     } catch (error) {
       setData({} as DashboardProps);
-    }
-  });
-
-  const initData = useMemoizedFn(async () => {
-    try {
-      setLoadingStatus({
-        loading: true,
-        loadend: false
-      });
-      const { hasClusters, hasWorkers } = await fetchAll();
-      if (!hasClusters || !hasWorkers) {
-        return;
-      }
-      await fetchDashboardData();
-    } catch (error) {
-      // ignore
     } finally {
-      setLoadingStatus({
+      setLoading(false);
-        loading: false,
-        loadend: true
-      });
     }
   });
 
   useEffect(() => {
-    initData();
+    fetchDashboardData();
   }, []);
 
   return (
     <DashboardContext.Provider
-      value={{ ...data, fetchData: fetchDashboardData, clusterList }}
+      value={{ ...data, fetchData: fetchDashboardData }}
     >
       <PageBox>
-        <Spin spinning={loadingStatus.loading} style={{ minHeight: 300 }}>
+        <Spin spinning={loading} style={{ minHeight: 300 }}>
           <DashboardInner />
         </Spin>
       </PageBox>
-      {Modal}
     </DashboardContext.Provider>
   );
 };

src/pages/llmodels/components/instance-item.tsx

@@ -693,8 +693,8 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
             </Col>
             <Col span={4}>
               <span
-                style={{ paddingLeft: '62px', gap: 4 }}
+                style={{ paddingLeft: '50px', gap: 4 }}
-                className="flex-center justify-center"
+                className="flex-center"
               >
                 <InstanceStatusTag
                   instanceData={instanceData}

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

@@ -80,6 +80,7 @@ interface ModelsProps {
   onStart?: () => void;
   onTableSort?: (order: TableOrder | Array<TableOrder>) => void;
   onStatusChange: (value?: any) => void;
+  onDeleteInstanceFromCache?: (instanceId: number) => void;
   sortOrder: string[];
   queryParams: {
     page: number;
@@ -122,6 +123,7 @@ const Models: React.FC<ModelsProps> = ({
   onStart,
   onTableSort,
   onStatusChange,
+  onDeleteInstanceFromCache,
   sortOrder,
   deleteIds,
   dataSource,
@@ -231,7 +233,7 @@ const Models: React.FC<ModelsProps> = ({
 
   const handleOnCell = useMemoizedFn(async (record: any, extra: any) => {
     try {
-      await updateModel(getFormattedData(record));
+      await updateModel(getFormattedData(record, { replicas: extra.newValue }));
       message.success(intl.formatMessage({ id: 'common.message.success' }));
       if (extra.newValue > extra.oldValue) {
         updateExpandedRowKeys([record.id, ...expandedRowKeys]);
@@ -367,41 +369,37 @@ const Models: React.FC<ModelsProps> = ({
     navigate(`/playground/chat?model=${row.name}`);
   };
 
-  const handleViewLogs = useCallback(
+  const handleViewLogs = async (row: any) => {
-    async (row: any) => {
+    try {
-      try {
+      setCurrentInstance({
-        setCurrentInstance({
+        url: `${MODEL_INSTANCE_API}/${row.id}/logs`,
-          url: `${MODEL_INSTANCE_API}/${row.id}/logs`,
+        status: row.state,
-          status: row.state,
+        id: row.id,
-          id: row.id,
+        modelId: row.model_id,
-          modelId: row.model_id,
+        tail: InstanceRealtimeLogStatus.includes(row.state)
-          tail: InstanceRealtimeLogStatus.includes(row.state)
+          ? undefined
-            ? undefined
+          : PageSize - 1
-            : PageSize - 1
-        });
-        setOpenLogModal(true);
-        onViewLogs();
-        saveScrollHeight();
-      } catch (error) {
-        console.log('error:', error);
-      }
-    },
-    [onViewLogs]
-  );
-  const handleDeleteInstace = useCallback(
-    (row: any) => {
-      modalRef.current?.show({
-        content: 'models.instances',
-        okText: 'common.button.delrecreate',
-        operation: 'common.delete.single.confirm',
-        name: row.name,
-        async onOk() {
-          await deleteModelInstance(row.id);
-        }
       });
-    },
+      setOpenLogModal(true);
-    [deleteModelInstance]
+      onViewLogs();
-  );
+      saveScrollHeight();
+    } catch (error) {
+      console.log('error:', error);
+    }
+  };
+
+  const handleDeleteInstace = (row: any) => {
+    modalRef.current?.show({
+      content: 'models.instances',
+      okText: 'common.button.delrecreate',
+      operation: 'common.delete.single.confirm',
+      name: row.name,
+      async onOk() {
+        await deleteModelInstance(row.id);
+        onDeleteInstanceFromCache?.(row.id);
+      }
+    });
+  };
 
   const getModelInstances = useCallback(async (row: any, options?: any) => {
     try {

src/pages/llmodels/hooks/use-models-columns.tsx

@@ -107,7 +107,8 @@ const useModelsColumns = ({
         ),
         dataIndex: 'ready_replicas',
         key: 'ready_replicas',
-        align: 'center',
+        dataField: 'replicas',
+        align: 'left',
         sorter: tableSorter(4),
         span: 4,
         editable: {

src/pages/llmodels/index.tsx

@@ -331,6 +331,13 @@ const Models: React.FC = () => {
     });
   };
 
+  const handleDeleteInstanceFromCache = (id: number) => {
+    cacheInsDataListRef.current = cacheInsDataListRef.current.filter(
+      (item) => item.id !== id
+    );
+    setModelInstances(cacheInsDataListRef.current);
+  };
+
   useEffect(() => {
     let timer: any = null;
     // fetch data first time
@@ -436,6 +443,7 @@ const Models: React.FC = () => {
         onStop={handleSearchBySilent}
         onStart={handleSearchBySilent}
         onTableSort={handleOnSortChange}
+        onDeleteInstanceFromCache={handleDeleteInstanceFromCache}
         sortOrder={sortOrder}
         queryParams={queryParams}
         loading={dataSource.loading}