优化 topo 加载中展示，使用组件展示，减少手写逻辑

oceanbase · Jan 9, 2025 · 66c9408 · 66c9408
1 parent b0d047f
commit 66c9408
Showing 1 changed file with 67 additions and 64 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>
   );
 }