bug fix (#720)

oceanbase · Jan 10, 2025 · ab279b3 · ab279b3
1 parent badd20b
commit ab279b3
Show file tree

Hide file tree

Showing 7 changed files with 200 additions and 159 deletions.
diff --git a/ui/src/components/TopoComponent/index.tsx b/ui/src/components/TopoComponent/index.tsx
@@ -3,7 +3,7 @@ import G6, { IG6GraphEvent } from '@antv/g6';
 import { createNodeFromReact } from '@antv/g6-react-node';
 import { useAccess, useParams } from '@umijs/max';
 import { useRequest, useUpdateEffect } from 'ahooks';
-import { Spin, message } from 'antd';
+import { message } from 'antd';
 import _ from 'lodash';
 import { ReactElement, useEffect, useMemo, useRef, useState } from 'react';
 
@@ -24,6 +24,7 @@ import {
 } from '@/services/reportRequest/clusterReportReq';
 import { deleteObtenantPool } from '@/services/tenant';
 import type { Topo } from '@/type/topo';
+import { PageContainer } from '@ant-design/pro-components';
 import MoreModal from '../moreModal';
 import { ReactNode, config } from './G6register';
 import {
@@ -39,7 +40,6 @@ import {
   checkTopoDataIsSame,
   getServerNumber,
 } from './helper';
-import styles from './index.less';
 
 interface TopoProps {
   tenantReplicas?: API.ReplicaDetailType[];
@@ -487,71 +487,74 @@ export default function TopoComponent({
 
   // Use different pictures for nodes in different states
   return (
-    <div style={{ position: 'relative', height: '100vh' }}>
-      {header
-        ? header
-        : originTopoData && (
-            <BasicInfo
-              extra={false}
-              style={{ backgroundColor: '#f5f8fe', border: 'none' }}
-              {...(originTopoData.basicInfo as API.ClusterInfo)}
-            />
-          )}
+    <PageContainer
+      loading={loading || clusterTopoLoading}
+      // 去除原有组件自带 header 间距，与项目内样式保持一致
+      style={{
+        margin: -32,
+        marginLeft: -40,
+      }}
+    >
+      <div style={{ position: 'relative', height: '100vh' }}>
+        {header
+          ? header
+          : originTopoData && (
+              <BasicInfo
+                extra={false}
+                style={{ backgroundColor: '#f5f8fe', border: 'none' }}
+                {...(originTopoData.basicInfo as API.ClusterInfo)}
+              />
+            )}
 
-      <div style={{ height: '100%' }} id="topoContainer"></div>
-      {useMemo(
-        () => (
-          <MoreModal
-            innerRef={modelRef}
-            visible={visible}
-            list={operateList}
-            ItemClick={ItemClickOperate}
-          />
-        ),
+        <div style={{ height: '100%' }} id="topoContainer"></div>
+        {useMemo(
+          () => (
+            <MoreModal
+              innerRef={modelRef}
+              visible={visible}
+              list={operateList}
+              ItemClick={ItemClickOperate}
+            />
+          ),
 
-        [operateList, visible, status],
-      )}
+          [operateList, visible, status],
+        )}
 
-      <OperateModal
-        type={modalType.current}
-        visible={operateModalVisible}
-        setVisible={setOperateModalVisible}
-        successCallback={() => {
-          if (refreshTenant) refreshTenant();
-          operateSuccess();
-        }}
-        params={{
-          zoneName: chooseZoneName.current,
-          defaultValue: chooseServerNum,
-          defaultUnitCount: defaultUnitCount,
-          ...resourcePoolDefaultValue,
-          essentialParameter: isCreateResourcePool
-            ? resourcePoolDefaultValue?.essentialParameter
-            : getOriginResourceUsages(
-                resourcePoolDefaultValue?.essentialParameter,
-                resourcePoolDefaultValue?.replicaList?.find(
-                  (replica) =>
-                    replica.zone === resourcePoolDefaultValue.editZone,
+        <OperateModal
+          type={modalType.current}
+          visible={operateModalVisible}
+          setVisible={setOperateModalVisible}
+          successCallback={() => {
+            if (refreshTenant) refreshTenant();
+            operateSuccess();
+          }}
+          params={{
+            zoneName: chooseZoneName.current,
+            defaultValue: chooseServerNum,
+            defaultUnitCount: defaultUnitCount,
+            ...resourcePoolDefaultValue,
+            essentialParameter: isCreateResourcePool
+              ? resourcePoolDefaultValue?.essentialParameter
+              : getOriginResourceUsages(
+                  resourcePoolDefaultValue?.essentialParameter,
+                  resourcePoolDefaultValue?.replicaList?.find(
+                    (replica) =>
+                      replica.zone === resourcePoolDefaultValue.editZone,
+                  ),
                 ),
-              ),
-          newResourcePool: isCreateResourcePool,
-          zonesOptions: isCreateResourcePool
-            ? getZonesOptions(
-                getClusterFromTenant(
-                  resourcePoolDefaultValue?.clusterList,
-                  resourcePoolDefaultValue?.clusterResourceName,
-                ),
-                resourcePoolDefaultValue?.replicaList,
-              )
-            : undefined,
-        }}
-      />
-
-      <Spin
-        spinning={Boolean(clusterTopoLoading || loading)}
-        size="large"
-        className={styles.topoSpin}
-      />
-    </div>
+            newResourcePool: isCreateResourcePool,
+            zonesOptions: isCreateResourcePool
+              ? getZonesOptions(
+                  getClusterFromTenant(
+                    resourcePoolDefaultValue?.clusterList,
+                    resourcePoolDefaultValue?.clusterResourceName,
+                  ),
+                  resourcePoolDefaultValue?.replicaList,
+                )
+              : undefined,
+          }}
+        />
+      </div>
+    </PageContainer>
   );
 }
diff --git a/ui/src/i18n/strings/en-US.json b/ui/src/i18n/strings/en-US.json
@@ -1252,7 +1252,8 @@
   "src.pages.Cluster.Detail.Overview.FF85D01F": "Unmanaged Successfully",
   "src.pages.Cluster.New.AE7F8E70": "Please select {topologyConfiguration} Key",
   "src.pages.Cluster.New.5344AD47": "Please select {topologyConfiguration} Operator",
-  "src.pages.Cluster.New.870724D5": "Please select {topologyConfiguration} Value",
+  "src.pages.Cluster.New.870724D5": "Please enter {topologyConfiguration} Value",
   "src.pages.Cluster.New.AC56EBD8": "Please select PodAffinity Type",
-  "src.pages.Cluster.New.9DDB4176": "Please select the Tolerations Effect"
+  "src.pages.Cluster.New.9DDB4176": "Please select the Tolerations Effect",
+  "src.pages.Cluster.New.DB6FD585": "Input content and press Enter to add"
 }
diff --git a/ui/src/i18n/strings/zh-CN.json b/ui/src/i18n/strings/zh-CN.json
@@ -1274,7 +1274,8 @@
   "src.pages.Cluster.Detail.Overview.FF85D01F": "解除托管已成功",
   "src.pages.Cluster.New.AE7F8E70": "请选择 {topologyConfiguration} Key",
   "src.pages.Cluster.New.5344AD47": "请选择 {topologyConfiguration} Operator",
-  "src.pages.Cluster.New.870724D5": "请选择 {topologyConfiguration} Value",
+  "src.pages.Cluster.New.870724D5": "请输入 {topologyConfiguration} Value",
   "src.pages.Cluster.New.AC56EBD8": "请选择 PodAffinity Type",
-  "src.pages.Cluster.New.9DDB4176": "请选择 Tolerations Effect"
+  "src.pages.Cluster.New.9DDB4176": "请选择 Tolerations Effect",
+  "src.pages.Cluster.New.DB6FD585": "输入后按回车添加"
 }
diff --git a/ui/src/pages/Cluster/Detail/Overview/index.tsx b/ui/src/pages/Cluster/Detail/Overview/index.tsx
@@ -60,43 +60,24 @@ const ClusterOverview: React.FC = () => {
 
   const { setFieldsValue, validateFields } = form;
 
-  const {
-    data: listOBClusterParameters,
-    loading,
-    refresh,
-  } = useRequest(obcluster.listOBClusterParameters, {
-    defaultParams: [ns, name],
-    onSuccess: (res) => {
-      const newData = getNewData(res?.data);
-      setParametersData(newData);
-    },
-  });
-
   const getNewData = (data) => {
-    const obt = data
-      ?.map((element) => {
-        // obcluster 的 parameters 里面加了个 specValue 的字段，
-        // 如果 specValue 不等于 value，状态写 "不匹配" (黄色tag)，如果两个值相等，写"已匹配"(绿色tag)
-        const findSpec = parameters?.find(
-          (item: any) => item.value === item.specValue,
-        );
-        if (!isEmpty(findSpec)) {
-          return { ...element, accordance: true };
-        } else if (isEmpty(findSpec)) {
-          return { ...element, accordance: false };
-        }
-      })
-      ?.map((element: any) => {
-        // 在 obcluster 的 parameters  里面的就是托管给 operator
-        const findName = parameters?.find(
-          (item: any) => element.name === item.name,
-        );
-        if (!isEmpty(findName)) {
-          return { ...element, controlParameter: true };
-        } else if (isEmpty(findName)) {
-          return { ...element, controlParameter: false };
-        }
-      });
+    const obt = data?.map((element: any) => {
+      // 在 obcluster 的 parameters  里面的就是托管给 operator
+      const findName = parameters?.find(
+        (item: any) => element.name === item.name,
+      );
+
+      if (!isEmpty(findName)) {
+        return {
+          ...element,
+          controlParameter: true,
+          accordance: findName?.value === findName?.specValue,
+        };
+      } else if (isEmpty(findName)) {
+        return { ...element, controlParameter: false, accordance: undefined };
+      }
+    });
+
     return obt;
   };
 
@@ -112,13 +93,27 @@ const ClusterOverview: React.FC = () => {
       if (data.status === 'operating') {
         timerRef.current = setTimeout(() => {
           getClusterDetail({ ns: ns!, name: name! });
+          refresh();
         }, REFRESH_CLUSTER_TIME);
       } else if (timerRef.current) {
         clearTimeout(timerRef.current);
       }
     },
   });
 
+  const {
+    data: listOBClusterParameters,
+    loading,
+    refresh,
+  } = useRequest(obcluster.listOBClusterParameters, {
+    defaultParams: [ns, name],
+    refreshDeps: [clusterDetail?.status],
+    onSuccess: (res) => {
+      const newData = getNewData(res?.data);
+      setParametersData(newData);
+    },
+  });
+
   const { runAsync: patchOBCluster, loading: patchOBClusterloading } =
     useRequest(obcluster.patchOBCluster, {
       manual: true,
@@ -402,6 +397,12 @@ const ClusterOverview: React.FC = () => {
         defaultMessage: '参数值',
       }),
       dataIndex: 'value',
+      render: (text: string, record) => {
+        const content =
+          parameters?.find((item) => item.name === record.name)?.value || text;
+
+        return <span>{content}</span>;
+      },
     },
     {
       title: intl.formatMessage({
@@ -456,7 +457,7 @@ const ClusterOverview: React.FC = () => {
 
       dataIndex: 'accordance',
       width: 100,
-      render: (text: boolean, record) => {
+      render: (text) => {
         const tagColor = text ? 'green' : 'gold';
         const tagContent = text
           ? intl.formatMessage({
@@ -468,10 +469,10 @@ const ClusterOverview: React.FC = () => {
               defaultMessage: '不匹配',
             });
 
-        return record?.controlParameter ? (
-          <Tag color={tagColor}>{tagContent}</Tag>
-        ) : (
+        return text === undefined ? (
           '/'
+        ) : (
+          <Tag color={tagColor}>{tagContent}</Tag>
         );
       },
     },
@@ -491,13 +492,20 @@ const ClusterOverview: React.FC = () => {
           'max_syslog_file_count',
         ];
 
+        const valueContent =
+          parameters?.find((item) => item.name === record.name)?.value ||
+          record?.value;
+
         return (
           <Space size={1}>
             <Button
               type="link"
               onClick={() => {
                 setIsDrawerOpen(true);
-                setParametersRecord(record);
+                setParametersRecord({
+                  ...record,
+                  value: valueContent,
+                });
               }}
             >
               {intl.formatMessage({
@@ -839,6 +847,13 @@ const ClusterOverview: React.FC = () => {
         onSuccess={() => {
           setIsDrawerOpen(false);
           clusterDetailRefresh();
+          // 编辑成功后，清空搜索条件，刷新参数列表
+          setFieldsValue({
+            name: undefined,
+            controlParameter: undefined,
+            accordance: undefined,
+          });
+          refresh();
         }}
         initialValues={parametersRecord}
         {...(clusterDetail?.info as API.ClusterInfo)}