前端优化

2026-01-15 04:38:16 +08:00 · 2022-08-24 21:29:57 +08:00
parent 9465c6f198
commit 47887a20c6
19 changed files with 115 additions and 97 deletions
--- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/CustomCheckGroup.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/CustomCheckGroup.tsx
@@ -7,18 +7,18 @@ const CheckboxGroup = Checkbox.Group;

 interface IVersion {
  firstLine: string[];
-  leftVersion: string[];
+  leftVersions: string[];
 }

-const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: any }) => {
-  const { kafkaVersion, onChangeCheckGroup } = props;
+const CustomCheckGroup = (props: { kafkaVersions: string[]; onChangeCheckGroup: any }) => {
+  const { kafkaVersions, onChangeCheckGroup } = props;
  const [checkedKafkaVersion, setCheckedKafkaVersion] = React.useState<IVersion>({
    firstLine: [],
-    leftVersion: [],
+    leftVersions: [],
  });
  const [allVersion, setAllVersion] = React.useState<IVersion>({
    firstLine: [],
-    leftVersion: [],
+    leftVersions: [],
  });

  const [indeterminate, setIndeterminate] = React.useState(false);
@@ -30,27 +30,27 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
    document.addEventListener('click', handleDocumentClick);
    return () => {
      document.removeEventListener('click', handleDocumentClick);
-    }
+    };
  }, []);

  const handleDocumentClick = (e: Event) => {
    setShowMore(false);
-  }
+  };

  const setCheckAllStauts = (list: string[], otherList: string[]) => {
    onChangeCheckGroup([...list, ...otherList]);
-    setIndeterminate(!!list.length && list.length + otherList.length < kafkaVersion.length);
-    setCheckAll(list.length + otherList.length === kafkaVersion.length);
+    setIndeterminate(!!list.length && list.length + otherList.length < kafkaVersions.length);
+    setCheckAll(list.length + otherList.length === kafkaVersions.length);
  };

  const getTwoPanelVersion = () => {
    const width = (document.getElementsByClassName('custom-check-group')[0] as any)?.offsetWidth;
    const checkgroupWidth = width - 100 - 86;
    const num = (checkgroupWidth / 108) | 0;
-    const firstLine = Array.from(kafkaVersion).splice(0, num);
+    const firstLine = Array.from(kafkaVersions).splice(0, num);
    setMoreGroupWidth(num * 108 + 88 + 66);
-    const leftVersion = Array.from(kafkaVersion).splice(num);
-    return { firstLine, leftVersion };
+    const leftVersions = Array.from(kafkaVersions).splice(num);
+    return { firstLine, leftVersions };
  };

  const onFirstVersionChange = (list: []) => {
@@ -59,13 +59,13 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
      firstLine: list,
    });

-    setCheckAllStauts(list, checkedKafkaVersion.leftVersion);
+    setCheckAllStauts(list, checkedKafkaVersion.leftVersions);
  };

  const onLeftVersionChange = (list: []) => {
    setCheckedKafkaVersion({
      ...checkedKafkaVersion,
-      leftVersion: list,
+      leftVersions: list,
    });
    setCheckAllStauts(list, checkedKafkaVersion.firstLine);
  };
@@ -77,11 +77,11 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
      e.target.checked
        ? versions
        : {
-          firstLine: [],
-          leftVersion: [],
-        }
+            firstLine: [],
+            leftVersions: [],
+          }
    );
-    onChangeCheckGroup(e.target.checked ? [...versions.firstLine, ...versions.leftVersion] : []);
+    onChangeCheckGroup(e.target.checked ? [...versions.firstLine, ...versions.leftVersions] : []);

    setIndeterminate(false);
    setCheckAll(e.target.checked);
@@ -112,16 +112,20 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
          <CheckboxGroup
            style={{ width: moreGroupWidth }}
            className="more-check-group"
-            options={allVersion.leftVersion}
-            value={checkedKafkaVersion.leftVersion}
+            options={allVersion.leftVersions}
+            value={checkedKafkaVersion.leftVersions}
            onChange={onLeftVersionChange}
          />
        ) : null}
-        <div className="more-btn" onClick={() => setShowMore(!showMore)}>
-          <a>
-            {!showMore ? '展开更多' : '收起更多'} <DoubleRightOutlined style={{ transform: `rotate(${showMore ? '270' : '90'}deg)` }} />
-          </a>
-        </div>
+        {allVersion.leftVersions.length ? (
+          <div className="more-btn" onClick={() => setShowMore(!showMore)}>
+            <a>
+              {!showMore ? '展开更多' : '收起更多'} <DoubleRightOutlined style={{ transform: `rotate(${showMore ? '270' : '90'}deg)` }} />
+            </a>
+          </div>
+        ) : (
+          <></>
+        )}
      </div>
    </>
  );
--- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/HomePage.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/HomePage.tsx
@@ -17,11 +17,12 @@ const MultiClusterPage = () => {
  const [run, setRun] = useState<boolean>(false);
  const [global] = AppContainer.useGlobalValue();
  const [statusList, setStatusList] = React.useState([1, 0]);
-  const [kafkaVersion, setKafkaVersion] = React.useState({});
+  const [kafkaVersions, setKafkaVersions] = React.useState<string[]>([]);
+  const [existKafkaVersion, setExistKafkaVersion] = React.useState<string[]>([]);
  const [visible, setVisible] = React.useState(false);
  const [list, setList] = useState<[]>([]);
  const [healthScoreRange, setHealthScoreRange] = React.useState([0, 100]);
-  const [checkedKafkaVersion, setCheckedKafkaVersion] = React.useState({});
+  const [checkedKafkaVersions, setCheckedKafkaVersions] = React.useState<string[]>([]);
  const [sortInfo, setSortInfo] = React.useState({
    sortField: 'HealthScore',
    sortType: 'asc',
@@ -59,7 +60,7 @@ const MultiClusterPage = () => {
      preciseFilterDTOList: [
        {
          fieldName: 'kafkaVersion',
-          fieldValueList: checkedKafkaVersion,
+          fieldValueList: checkedKafkaVersions as (string | number)[],
        },
      ],
      rangeFilterDTOList: [
@@ -83,12 +84,18 @@ const MultiClusterPage = () => {
  };

  const getSupportKafkaVersion = () => {
+    Utils.request(API.supportKafkaVersion).then((res) => {
+      setKafkaVersions(Object.keys(res || {}));
+    });
+  };
+
+  const getExistKafkaVersion = () => {
    setVersionLoading(true);
-    Utils.request(API.supportKafkaVersion)
-      .then((res) => {
-        setKafkaVersion(res || {});
+    Utils.request(API.getClustersVersion)
+      .then((versions: string[]) => {
+        setExistKafkaVersion(versions || []);
        setVersionLoading(false);
-        setCheckedKafkaVersion(res ? Object.keys(res) : []);
+        setCheckedKafkaVersions(versions || []);
      })
      .catch((err) => {
        setVersionLoading(false);
@@ -108,6 +115,7 @@ const MultiClusterPage = () => {
  useEffect(() => {
    getPhyClusterState();
    getSupportKafkaVersion();
+    getExistKafkaVersion();
  }, []);

  useEffect(() => {
@@ -128,7 +136,7 @@ const MultiClusterPage = () => {
      .finally(() => {
        setClusterLoading(false);
      });
-  }, [sortInfo, checkedKafkaVersion, healthScoreRange, statusList, searchKeywords, isReload]);
+  }, [sortInfo, checkedKafkaVersions, healthScoreRange, statusList, searchKeywords, isReload]);

  const onSilderChange = (value: number[]) => {
    setHealthScoreRange(value);
@@ -151,7 +159,7 @@ const MultiClusterPage = () => {
  };

  const onChangeCheckGroup = (list: []) => {
-    setCheckedKafkaVersion(list);
+    setCheckedKafkaVersions(list);
  };

  const afterSubmitSuccessAccessClusters = () => {
@@ -247,10 +255,10 @@ const MultiClusterPage = () => {

                <div className="header-filter-bottom">
                  <div className="header-filter-bottom-item header-filter-bottom-item-checkbox">
-                    <h3 className="header-filter-bottom-item-title">版本选择</h3>
+                    <h3 className="header-filter-bottom-item-title">版本分布</h3>
                    <div className="header-filter-bottom-item-content flex">
-                      {Object.keys(kafkaVersion).length ? (
-                        <CustomCheckGroup kafkaVersion={Object.keys(kafkaVersion)} onChangeCheckGroup={onChangeCheckGroup} />
+                      {existKafkaVersion.length ? (
+                        <CustomCheckGroup kafkaVersions={existKafkaVersion} onChangeCheckGroup={onChangeCheckGroup} />
                      ) : null}
                    </div>
                  </div>
@@ -307,7 +315,7 @@ const MultiClusterPage = () => {
      <AccessClusters
        visible={visible}
        setVisible={setVisible}
-        kafkaVersion={Object.keys(kafkaVersion)}
+        kafkaVersion={kafkaVersions}
        afterSubmitSuccess={afterSubmitSuccessAccessClusters}
      />
    </>
--- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/index.less
+++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/index.less
@@ -295,6 +295,7 @@

                .more-btn {
                  height: 30px;
+                  line-height: 23px;
                }
              }
            }
@@ -652,7 +653,7 @@
    display: -webkit-inline-box;
    margin-right: 16px;

-    &.adjust-height-style{
+    &.adjust-height-style {
      .dcloud-form-item-label {
        padding: 0;
        label {