bug fix (#727)

oceanbase · Jan 13, 2025 · e2148bf · e2148bf
1 parent 3b20a2d
commit e2148bf
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 73 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 { message } from 'antd';
+import { Spin, message } from 'antd';
 import _ from 'lodash';
 import { ReactElement, useEffect, useMemo, useRef, useState } from 'react';
 
@@ -24,7 +24,6 @@ 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 {
@@ -40,6 +39,7 @@ import {
   checkTopoDataIsSame,
   getServerNumber,
 } from './helper';
+import styles from './index.less';
 
 interface TopoProps {
   tenantReplicas?: API.ReplicaDetailType[];
@@ -487,74 +487,70 @@ export default function TopoComponent({
 
   // Use different pictures for nodes in different states
   return (
-    <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={{ 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}
+          />
+        ),
 
-          [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,
                 ),
-            newResourcePool: isCreateResourcePool,
-            zonesOptions: isCreateResourcePool
-              ? getZonesOptions(
-                  getClusterFromTenant(
-                    resourcePoolDefaultValue?.clusterList,
-                    resourcePoolDefaultValue?.clusterResourceName,
-                  ),
-                  resourcePoolDefaultValue?.replicaList,
-                )
-              : undefined,
-          }}
-        />
-      </div>
-    </PageContainer>
+                resourcePoolDefaultValue?.replicaList,
+              )
+            : undefined,
+        }}
+      />
+      <Spin
+        spinning={Boolean(clusterTopoLoading || loading)}
+        size="large"
+        className={styles.topoSpin}
+      />
+    </div>
   );
 }
diff --git a/ui/src/i18n/strings/en-US.json b/ui/src/i18n/strings/en-US.json
@@ -1255,5 +1255,7 @@
   "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.DB6FD585": "Input content and press Enter to add"
+  "src.pages.Cluster.New.DB6FD585": "Input content and press Enter to add",
+  "src.pages.Cluster.Detail.Overview.A89209B9": "Please select",
+  "src.pages.Cluster.Detail.Overview.5C55A022": "Please select"
 }
diff --git a/ui/src/i18n/strings/zh-CN.json b/ui/src/i18n/strings/zh-CN.json
@@ -1277,5 +1277,7 @@
   "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.DB6FD585": "输入后按回车添加"
+  "src.pages.Cluster.New.DB6FD585": "输入后按回车添加",
+  "src.pages.Cluster.Detail.Overview.A89209B9": "请选择",
+  "src.pages.Cluster.Detail.Overview.5C55A022": "请选择"
 }
diff --git a/ui/src/pages/Cluster/Detail/Overview/BasicInfo.tsx b/ui/src/pages/Cluster/Detail/Overview/BasicInfo.tsx
@@ -123,7 +123,11 @@ export default function BasicInfo({
   deletionProtection,
   clusterDetailRefresh,
   ...props
-}: ResponseOBCluster & { style?: React.CSSProperties; extra?: boolean }) {
+}: ResponseOBCluster & {
+  style?: React.CSSProperties;
+  extra?: boolean;
+  clusterDetailRefresh?: () => void;
+}) {
   const statusItem = findByValue(STATUS_LIST, status);
   const statusDetailItem = findByValue(STATUS_LIST, statusDetail);
   const topologyRendering: ITopologyRendering = useMemo(() => {
@@ -180,7 +184,7 @@ export default function BasicInfo({
               defaultMessage: '修改删除保护已成功',
             }),
           );
-          clusterDetailRefresh();
+          clusterDetailRefresh?.();
         }
       },
     },

diff --git a/ui/src/pages/Cluster/Detail/Overview/index.tsx b/ui/src/pages/Cluster/Detail/Overview/index.tsx
@@ -662,7 +662,14 @@ const ClusterOverview: React.FC = () => {
                     })}
                     name={'controlParameter'}
                   >
-                    <Select options={controlParameters} allowClear={true} />
+                    <Select
+                      options={controlParameters}
+                      allowClear={true}
+                      placeholder={intl.formatMessage({
+                        id: 'src.pages.Cluster.Detail.Overview.A89209B9',
+                        defaultMessage: '请选择',
+                      })}
+                    />
                   </Form.Item>
                 </Col>
                 <Col span={6}>
@@ -673,7 +680,14 @@ const ClusterOverview: React.FC = () => {
                     })}
                     name={'accordance'}
                   >
-                    <Select options={accordanceList} allowClear={true} />
+                    <Select
+                      options={accordanceList}
+                      allowClear={true}
+                      placeholder={intl.formatMessage({
+                        id: 'src.pages.Cluster.Detail.Overview.5C55A022',
+                        defaultMessage: '请选择',
+                      })}
+                    />
                   </Form.Item>
                 </Col>
                 <Col>