fix: remove instance from cache after deleting

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 } =
-    useClusterList();
+  const { fetchResource, resourceCount, resourceAtom } = 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,
-    Modal,
+    NoResourceModal,
     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({
-        loading: false,
-        loadend: true
-      });
+      setLoading(false);
     }
   });
 
   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>
   );
 };