feat: cluster_count on dashboard

src/pages/dashboard/apis/index.ts

@@ -6,8 +6,10 @@ export const DASHBOARD_API = '/dashboard';
 export const DASHBOARD_USAGE_API = `${DASHBOARD_API}/usage`;
 export const DASHBOARD_STATS_API = `${DASHBOARD_API}/usage/stats`;
 
-export async function queryDashboardData() {
-  return request(DASHBOARD_API);
+export async function queryDashboardData(params?: { cluster_id?: number }) {
+  return request(DASHBOARD_API, {
+    params
+  });
 }
 
 export async function queryDashboardUsageData<T>(

src/pages/dashboard/components/dahboard-inner.tsx

@@ -1,39 +1,17 @@
-import { memo, useCallback, useEffect, useState } from 'react';
-import { queryDashboardData } from '../apis';
-import DashboardContext from '../config/dashboard-context';
-import { DashboardProps } from '../config/types';
 import ActiveTable from './active-table';
 import Overview from './over-view';
 import SystemLoad from './system-load';
 import Usage from './usage';
 
-const Dashboard: React.FC<{ setLoading: (loading: boolean) => void }> = ({
-  setLoading
-}) => {
-  const [data, setData] = useState<DashboardProps>({} as DashboardProps);
-
-  const getDashboardData = useCallback(async () => {
-    try {
-      setLoading(true);
-      const res = await queryDashboardData();
-      setData(res);
-      setLoading(false);
-    } catch (error) {
-      setLoading(false);
-      setData({} as DashboardProps);
-    }
-  }, []);
-  useEffect(() => {
-    getDashboardData();
-  }, []);
+const Dashboard: React.FC = () => {
   return (
-    <DashboardContext.Provider value={{ ...data, fetchData: getDashboardData }}>
+    <>
       <Overview></Overview>
       <SystemLoad></SystemLoad>
       <Usage></Usage>
       <ActiveTable></ActiveTable>
-    </DashboardContext.Provider>
+    </>
   );
 };
 
-export default memo(Dashboard);
+export default Dashboard;

src/pages/dashboard/components/resource-utilization.tsx

@@ -2,8 +2,7 @@ import LineChart from '@/components/echarts/line-chart';
 import { useIntl } from '@umijs/max';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import { memo, useContext, useMemo } from 'react';
-import { DashboardContext } from '../config/dashboard-context';
+import { memo, useMemo } from 'react';
 
 const TypeKeyMap = {
   cpu: {
@@ -32,9 +31,27 @@ const TypeKeyMap = {
   }
 };
 
-const UtilizationOvertime: React.FC = () => {
+const UtilizationOvertime: React.FC<{
+  data: {
+    cpu: {
+      timestamp: number;
+      value: number;
+    }[];
+    ram: {
+      timestamp: number;
+      value: number;
+    }[];
+    gpu: {
+      timestamp: number;
+      value: number;
+    }[];
+    vram: {
+      timestamp: number;
+      value: number;
+    }[];
+  };
+}> = ({ data }) => {
   const intl = useIntl();
-  const data = useContext(DashboardContext)?.system_load?.history || {};
 
   const typeList = ['gpu', 'cpu', 'ram', 'vram'];
 

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

@@ -1,10 +1,12 @@
 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';
-import { memo, useContext, useMemo } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { DashboardContext } from '../config/dashboard-context';
 import ResourceUtilization from './resource-utilization';
 
@@ -14,9 +16,14 @@ const resourceChartHeight = 400;
 
 const SystemLoad = () => {
   const intl = useIntl();
-  const data = useContext(DashboardContext)?.system_load?.current || {};
+  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 || {};
     return {
       gpu: {
         data: _.round(data.gpu || 0, 1)
@@ -31,7 +38,36 @@ const SystemLoad = () => {
         data: _.round(data.ram || 0, 1)
       }
     };
-  }, [data]);
+  }, [systemLoadData?.current]);
+
+  useEffect(() => {
+    setSystemLoadData(system_load || {});
+  }, [system_load]);
+
+  const handleClusterChange = async (value: number) => {
+    try {
+      const res: any = await fetchData({ cluster_id: value });
+      setSystemLoadData(res.system_load || {});
+    } catch (error) {
+      setSystemLoadData({});
+    }
+  };
+
+  useEffect(() => {
+    const fetchClusters = async () => {
+      try {
+        const res = await queryClusterList({ page: 1, perPage: 100 });
+        const options = res.items.map((cluster) => ({
+          label: cluster.name,
+          value: cluster.id
+        }));
+        setClusterList(options);
+      } catch (error) {
+        setClusterList([]);
+      }
+    };
+    fetchClusters();
+  }, []);
 
   return (
     <div>
@@ -43,11 +79,22 @@ const SystemLoad = () => {
               {intl.formatMessage({ id: 'dashboard.systemload' })}
             </span>
           }
+          right={
+            <BaseSelect
+              allowClear
+              onChange={handleClusterChange}
+              style={{ width: 360 }}
+              options={clusterList}
+              placeholder={intl.formatMessage({
+                id: 'clusters.filterBy.cluster'
+              })}
+            />
+          }
         />
         <Row gutter={[20, 20]}>
           <Col xs={24} sm={24} md={24} lg={24} xl={16}>
             <CardWrapper style={{ height: resourceChartHeight }}>
-              <ResourceUtilization />
+              <ResourceUtilization data={systemLoadData?.history} />
             </CardWrapper>
           </Col>
           <Col xs={24} sm={24} md={24} lg={24} xl={8}>
@@ -55,7 +102,6 @@ const SystemLoad = () => {
               <Row style={{ height: largeChartHeight }}>
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <GaugeChart
-                    name="GPU"
                     height={smallChartHeight}
                     value={chartData.gpu.data}
                     title={intl.formatMessage({
@@ -65,7 +111,6 @@ const SystemLoad = () => {
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <GaugeChart
-                    name="VRAM"
                     title={intl.formatMessage({
                       id: 'dashboard.vramutilization'
                     })}
@@ -75,7 +120,6 @@ const SystemLoad = () => {
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <GaugeChart
-                    name="CPU"
                     title={intl.formatMessage({
                       id: 'dashboard.cpuutilization'
                     })}
@@ -85,7 +129,6 @@ const SystemLoad = () => {
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <GaugeChart
-                    name="RAM"
                     title={intl.formatMessage({
                       id: 'dashboard.memoryutilization'
                     })}
@@ -102,4 +145,4 @@ const SystemLoad = () => {
   );
 };
 
-export default memo(SystemLoad);
+export default SystemLoad;

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

@@ -2,7 +2,13 @@ import { createContext } from 'react';
 import { DashboardProps } from './types';
 
 export const DashboardContext = createContext<
-  DashboardProps & { fetchData: () => Promise<void> }
->({} as DashboardProps & { fetchData: () => Promise<void> });
+  DashboardProps & {
+    fetchData: (params?: { [key: string]: any }) => Promise<void>;
+  }
+>(
+  {} as DashboardProps & {
+    fetchData: (params?: { [key: string]: any }) => Promise<void>;
+  }
+);
 
 export default DashboardContext;

src/pages/dashboard/index.tsx

@@ -1,19 +1,42 @@
+import { useMemoizedFn } from 'ahooks';
 import { Spin } from 'antd';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import PageBox from '../_components/page-box';
+import { queryDashboardData } from './apis';
 import DashboardInner from './components/dahboard-inner';
+import DashboardContext from './config/dashboard-context';
+import { DashboardProps } from './config/types';
 
 const Dashboard: React.FC = () => {
   const [loading, setLoading] = useState(false);
+  const [data, setData] = useState<DashboardProps>({} as DashboardProps);
+
+  const getDashboardData = useMemoizedFn(async () => {
+    try {
+      setLoading(true);
+      const res = await queryDashboardData();
+      setData(res);
+      setLoading(false);
+    } catch (error) {
+      setLoading(false);
+      setData({} as DashboardProps);
+    }
+  });
+
+  useEffect(() => {
+    getDashboardData();
+  }, []);
 
   return (
-    <>
+    <DashboardContext.Provider
+      value={{ ...data, fetchData: queryDashboardData }}
+    >
       <PageBox>
         <Spin spinning={loading}>
-          <DashboardInner setLoading={setLoading} />
+          <DashboardInner />
         </Spin>
       </PageBox>
-    </>
+    </DashboardContext.Provider>
   );
 };