feat: cluster_count on dashboard

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;