fix: cluster filter do not work in dashboard

src/pages/cluster-management/cluster-create.tsx

@@ -71,6 +71,7 @@ const ClusterCreate = () => {
     provider: ProviderValueMap.Docker
   } as ClusterFormData);
   const [formValues, setFormValues] = useState<Record<string, any>>({});
+  const [submitLoading, setSubmitLoading] = useState<boolean>(false);
 
   const formRefs: Record<string, any> = {
     [moduleMap.BasicForm]: useRef<any>(null),
@@ -273,8 +274,10 @@ const ClusterCreate = () => {
       ...extraData,
       ...(typeof values === 'object' ? values : {})
     };
+    setSubmitLoading(true);
     const res = await createCluster({ data });
     const info = await queryClusterToken({ id: res.id });
+    setSubmitLoading(false);
     setRegistrationInfo({
       ...info,
       cluster_id: res.id
@@ -318,6 +321,7 @@ const ClusterCreate = () => {
           onNext={onNext}
           handleCancel={handleCancel}
           handleSubmit={handleSubmit}
+          loading={submitLoading}
           showButtons={showButtons}
         />
       ]}

src/pages/cluster-management/components/footer-buttons.tsx

@@ -20,10 +20,18 @@ interface FooterButtonsProps {
   handleCancel: () => void;
   handleSubmit: () => void;
   showButtons: Record<string, boolean>;
+  loading?: boolean;
 }
 
 const FooterButtons: React.FC<FooterButtonsProps> = (props) => {
-  const { onPrevious, onNext, handleCancel, handleSubmit, showButtons } = props;
+  const {
+    onPrevious,
+    onNext,
+    handleCancel,
+    handleSubmit,
+    showButtons,
+    loading
+  } = props;
   const intl = useIntl();
   const handleOnNext = () => {
     onNext();
@@ -52,6 +60,7 @@ const FooterButtons: React.FC<FooterButtonsProps> = (props) => {
             type="primary"
             onClick={handleSubmit}
             style={{ minWidth: 88 }}
+            loading={loading}
           >
             {intl.formatMessage({ id: 'common.button.save' })}
           </Button>

src/pages/dashboard/components/over-view.tsx

@@ -1,5 +1,5 @@
 import { useIntl } from '@umijs/max';
-import { Card, Col, Row, Space } from 'antd';
+import { Card, Col, Row } from 'antd';
 import _ from 'lodash';
 import React, { useContext } from 'react';
 import { overviewConfigs } from '../config';
@@ -30,26 +30,6 @@ const Overview: React.FC = () => {
   const intl = useIntl();
   const data = useContext(DashboardContext).resource_counts || {};
 
-  const renderValue = (
-    value:
-      | number
-      | {
-          healthy: number;
-          warning: number;
-          error: number;
-        }
-  ) => {
-    if (typeof value === 'number') {
-      return value;
-    }
-    return (
-      <Space className="value-box" size={20}>
-        <span className={'value-healthy'}>{value.healthy}</span>
-        <span className={'value-warning'}>{value.warning}</span>
-        <span className={'value-error'}>{value.error}</span>
-      </Space>
-    );
-  };
   return (
     <div>
       <Row gutter={[20, 20]} className={styles.row}>
@@ -64,7 +44,7 @@ const Overview: React.FC = () => {
           >
             {renderCardItem({
               label: intl.formatMessage({ id: config.label }),
-              value: renderValue(_.get(data, config.key, 0)),
+              value: _.get(data, config.key, 0),
               bgColor: config.backgroundColor
             })}
           </Col>

src/pages/dashboard/index.tsx

@@ -1,5 +1,6 @@
 import { useMemoizedFn } from 'ahooks';
 import { Spin } from 'antd';
+import { omit } from 'lodash';
 import { useEffect, useState } from 'react';
 import PageBox from '../_components/page-box';
 import { queryDashboardData } from './apis';
@@ -11,17 +12,26 @@ const Dashboard: React.FC = () => {
   const [data, setData] = useState<DashboardProps>({} as DashboardProps);
   const [loading, setLoading] = useState(false);
 
-  const fetchDashboardData = useMemoizedFn(async () => {
+  const fetchDashboardData = useMemoizedFn(
-    try {
+    async (params?: { cluster_id?: number }) => {
-      setLoading(true);
+      try {
-      const res = await queryDashboardData();
+        setLoading(true);
-      setData(res);
+        const res = await queryDashboardData(params);
-    } catch (error) {
+        setData((prev) => {
-      setData({} as DashboardProps);
+          return params?.cluster_id
-    } finally {
+            ? {
-      setLoading(false);
+                ...omit(prev, ['system_load']),
+                system_load: res.system_load
+              }
+            : res;
+        });
+      } catch (error) {
+        setData({} as DashboardProps);
+      } finally {
+        setLoading(false);
+      }
     }
-  });
+  );
 
   useEffect(() => {
     fetchDashboardData();