feat: add resource for first login

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

@@ -2,7 +2,6 @@ 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';
@@ -16,11 +15,8 @@ const resourceChartHeight = 400;
 
 const SystemLoad = () => {
   const intl = useIntl();
-  const { system_load, fetchData } = useContext(DashboardContext);
+  const { system_load, fetchData, clusterList } = useContext(DashboardContext);
   const [systemLoadData, setSystemLoadData] = useState<any>(system_load || {});
-  const [clusterList, setClusterList] = useState<Global.BaseOption<number>[]>(
-    []
-  );
 
   const chartData = useMemo(() => {
     const data = systemLoadData?.current || {};
@@ -53,22 +49,6 @@ 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,10 +4,18 @@ import { DashboardProps } from './types';
 export const DashboardContext = createContext<
   DashboardProps & {
     fetchData: (params?: { [key: string]: any }) => Promise<void>;
+    clusterList: Global.BaseOption<
+      number,
+      { provider: string; state: string | number }
+    >[];
   }
 >(
   {} as DashboardProps & {
     fetchData: (params?: { [key: string]: any }) => Promise<void>;
+    clusterList: Global.BaseOption<
+      number,
+      { provider: string; state: string | number }
+    >[];
   }
 );
 

src/pages/dashboard/index.tsx

@@ -1,3 +1,6 @@
+import useClusterList from '@/pages/cluster-management/hooks/use-cluster-list';
+import useNoResourceResult from '@/pages/llmodels/hooks/use-no-resource-result';
+import { useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { Spin } from 'antd';
 import { useEffect, useState } from 'react';
@@ -8,32 +11,70 @@ import DashboardContext from './config/dashboard-context';
 import { DashboardProps } from './config/types';
 
 const Dashboard: React.FC = () => {
+  const intl = useIntl();
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState<DashboardProps>({} as DashboardProps);
+  const { fetchAll, clusterList, workerList } = useClusterList();
 
-  const getDashboardData = useMemoizedFn(async () => {
+  const { noResourceResult } = useNoResourceResult({
+    loadend: true,
+    loading: false,
+    dataSource: clusterList.length > 0 ? workerList : [],
+    queryParams: {},
+    iconType: 'icon-dashboard',
+    title:
+      clusterList.length > 0
+        ? intl.formatMessage({ id: 'noresult.workers.title' })
+        : intl.formatMessage({ id: 'noresult.cluster.title' }),
+    noClusters: !clusterList.length,
+    noWorkers: workerList.length === 0 && clusterList.length > 0,
+    defaultContent: {
+      subTitle: intl.formatMessage({ id: 'noresult.workers.subTitle' }),
+      noFoundText: intl.formatMessage({ id: 'noresult.workers.nofound' }),
+      buttonText: intl.formatMessage({ id: 'noresult.workers.button.add' }),
+      onClick: () => {}
+    }
+  });
+
+  const fetchDashboardData = useMemoizedFn(async () => {
     try {
-      setLoading(true);
       const res = await queryDashboardData();
       setData(res);
-      setLoading(false);
     } catch (error) {
-      setLoading(false);
       setData({} as DashboardProps);
     }
   });
 
+  const initData = useMemoizedFn(async () => {
+    try {
+      setLoading(true);
+      const { hasClusters, hasWorkers } = await fetchAll();
+      if (!hasClusters || !hasWorkers) {
+        setLoading(false);
+        return;
+      }
+      await fetchDashboardData();
+      setLoading(false);
+    } catch (error) {
+      setLoading(false);
+    }
+  });
+
   useEffect(() => {
-    getDashboardData();
+    initData();
   }, []);
 
   return (
     <DashboardContext.Provider
-      value={{ ...data, fetchData: queryDashboardData }}
+      value={{ ...data, fetchData: fetchDashboardData, clusterList }}
     >
       <PageBox>
-        <Spin spinning={loading}>
-          <DashboardInner />
+        <Spin spinning={loading} style={{ minHeight: 300 }}>
+          {(!clusterList.length || !workerList.length) && !loading ? (
+            noResourceResult
+          ) : loading ? null : (
+            <DashboardInner />
+          )}
         </Spin>
       </PageBox>
     </DashboardContext.Provider>