feat:Delete resource pool

oceanbase · Mar 14, 2024 · 9da3d50 · 9da3d50
1 parent 81ebf94
commit 9da3d50
Show file tree

Hide file tree

Showing 16 changed files with 336 additions and 196 deletions.
diff --git a/ui/src/components/TopoComponent/helper.ts b/ui/src/components/TopoComponent/helper.ts
@@ -3,6 +3,7 @@ import {
   CLUSTER_IMG_MAP,
   SERVER_IMG_MAP,
   ZONE_IMG_MAP,
+  TOPO_INFO_CONFIG
 } from '@/constants';
 import { intl } from '@/utils/intl';
 import { Graph, IG6GraphEvent, INode, IShape } from '@antv/g6';
@@ -199,12 +200,18 @@ export const formatTopoData = (
   };
   topoData.children = getChildren(responseData.topology, tenantReplicas);
 
-  let basicInfo: BasicInfoType = {
-    name: responseData.name,
-    namespace: responseData.namespace,
-    status: responseData.status,
-    image: responseData.image,
-  };
+  // let basicInfo: BasicInfoType = {
+  //   name: responseData.name,
+  //   namespace: responseData.namespace,
+  //   status: responseData.status,
+  //   image: responseData.image,
+  // };
+  let basicInfo:API.ClusterInfo = {};
+  for(let key of Object.keys(responseData)){
+    if(TOPO_INFO_CONFIG.includes(key)){
+      basicInfo[key] = responseData[key];
+    }
+  }
 
   return {
     topoData,

diff --git a/ui/src/components/TopoComponent/index.tsx b/ui/src/components/TopoComponent/index.tsx
@@ -49,11 +49,13 @@ export default function TopoComponent({
   const [inNode, setInNode] = useState<boolean>(false);
   const [inModal, setInModal] = useState<boolean>(false);
   const [operateDisable, setOperateDisable] = useState<boolean>(false);
+
   const [[ns, name]] = useState(
     namespace && clusterNameOfKubectl
       ? [namespace, clusterNameOfKubectl]
       : getNSName(),
   );
+
   //Control the visibility of operation and maintenance modal
   const [operateModalVisible, setOperateModalVisible] =
     useState<boolean>(false);
@@ -114,7 +116,7 @@ export default function TopoComponent({
       zoneName: chooseZoneName.current,
     });
     if (res.successful) {
-      message.success(res.message);
+      message.success(res.message || '删除成功');
       getTopoData({ ns, name, useFor: 'topo', tenantReplicas });
     }
   };
@@ -286,6 +288,7 @@ export default function TopoComponent({
         ? header
         : originTopoData && (
             <BasicInfo
+              extra={false}
               style={{ backgroundColor: '#f5f8fe', border:'none' }}
               {...(originTopoData.basicInfo as API.ClusterInfo)}
             />

diff --git a/ui/src/constants/index.ts b/ui/src/constants/index.ts
@@ -60,7 +60,30 @@ const MINIMAL_CONFIG = {
 
 const RESULT_STATUS = ['running','failed'];
 
-const BACKUP_RESULT_STATUS = ['RUNNING','FAILED','PAUSED']
+const BACKUP_RESULT_STATUS = ['RUNNING','FAILED','PAUSED'];
+
+const CLUSTER_INFO_CONFIG = [
+  'name',
+  'namespace',
+  'status',
+  'image',
+  'resource',
+  'storage',
+  'backupVolume',
+  'monitor',
+  'rootPasswordSecret',
+  'mode',
+  'parameters'
+]
+
+const TOPO_INFO_CONFIG = [
+  'name',
+  'namespace',
+  'status',
+  'image',
+  'mode',
+  'rootPasswordSecret',
+]
 
 const RESOURCE_NAME_REG = /^[a-z\-]+$/;
 // use for tenant name or zone name
@@ -82,5 +105,7 @@ export {
   RESULT_STATUS,
   BACKUP_RESULT_STATUS,
   RESOURCE_NAME_REG,
-  TZ_NAME_REG
+  TZ_NAME_REG,
+  CLUSTER_INFO_CONFIG,
+  TOPO_INFO_CONFIG
 };
diff --git a/ui/src/i18n/strings/zh-CN.json b/ui/src/i18n/strings/zh-CN.json
@@ -628,6 +628,6 @@
   "Dashboard.Detail.Overview.Replicas.MinimumAvailableCpu": "最小可用 CPU",
   "Dashboard.Detail.Overview.Replicas.ClogDiskSize": "Clog 盘大小",
   "Dashboard.Detail.Overview.Replicas.ResourcePool": "资源池",
-  "Dashboard.Detail.Overview.Replicas.ResourcePoolReplicazone": "资源池 - {{replicaZone}}",
+  "Dashboard.Detail.Overview.Replicas.ResourcePoolReplicazone": "资源池 - {replicaZone}",
   "Dashboard.Detail.Overview.TenantOverview": "租户概览"
 }
diff --git a/ui/src/pages/Cluster/Detail/Overview/BasicInfo.tsx b/ui/src/pages/Cluster/Detail/Overview/BasicInfo.tsx
@@ -1,6 +1,6 @@
 import { COLOR_MAP } from '@/constants';
 import { intl } from '@/utils/intl';
-import { Card, Col, Descriptions, Switch, Tag } from 'antd';
+import { Card,Col,Descriptions,Switch,Tag } from 'antd';
 import { useState } from 'react';
 
 import styles from './index.less';
@@ -10,69 +10,72 @@ export default function BasicInfo({
   namespace,
   status,
   image,
+  mode,
+  rootPasswordSecret,
   resource,
   storage,
   backupVolume,
   monitor,
-  rootPasswordSecret,
-  mode,
   parameters,
+  extra = true,
   style,
-}: API.ClusterInfo & { style: React.CSSProperties }) {
+}: API.ClusterInfo & { style?: React.CSSProperties,extra?: boolean }) {
   const [checked, setChecked] = useState<boolean>(false);
-  const OBServerConfig = [
-    {
-      label: 'CPU',
-      value: resource.cpu,
-    },
-    {
-      label: 'Memory',
-      value: resource.memory,
-    },
-    {
-      label: intl.formatMessage({
-        id: 'Dashboard.Detail.Overview.BasicInfo.DatafileStorageClass',
-        defaultMessage: 'Datafile 存储类',
-      }),
-      value: storage.dataStorage.storageClass,
-    },
-    {
-      label: intl.formatMessage({
-        id: 'Dashboard.Detail.Overview.BasicInfo.DatafileStorageSize',
-        defaultMessage: 'Datafile 存储大小',
-      }),
-      value: storage.dataStorage.size,
-    },
-    {
-      label: intl.formatMessage({
-        id: 'Dashboard.Detail.Overview.BasicInfo.RedologStorageClass',
-        defaultMessage: 'RedoLog 存储类',
-      }),
-      value: storage.redoLogStorage.storageClass,
-    },
-    {
-      label: intl.formatMessage({
-        id: 'Dashboard.Detail.Overview.BasicInfo.RedologSize',
-        defaultMessage: 'RedoLog 大小',
-      }),
-      value: storage.redoLogStorage.size,
-    },
-    {
-      label: intl.formatMessage({
-        id: 'Dashboard.Detail.Overview.BasicInfo.SystemLogStorageClass',
-        defaultMessage: '系统日志存储类',
-      }),
-      value: storage.sysLogStorage.storageClass,
-    },
-    {
-      label: intl.formatMessage({
-        id: 'Dashboard.Detail.Overview.BasicInfo.SystemLogStorageSize',
-        defaultMessage: '系统日志存储大小',
-      }),
-      value: storage.sysLogStorage.size,
-    },
-  ];
-
+  const OBServerConfig = extra
+    ? [
+        {
+          label: 'CPU',
+          value: resource.cpu,
+        },
+        {
+          label: 'Memory',
+          value: resource.memory,
+        },
+        {
+          label: intl.formatMessage({
+            id: 'Dashboard.Detail.Overview.BasicInfo.DatafileStorageClass',
+            defaultMessage: 'Datafile 存储类',
+          }),
+          value: storage.dataStorage.storageClass,
+        },
+        {
+          label: intl.formatMessage({
+            id: 'Dashboard.Detail.Overview.BasicInfo.DatafileStorageSize',
+            defaultMessage: 'Datafile 存储大小',
+          }),
+          value: storage.dataStorage.size,
+        },
+        {
+          label: intl.formatMessage({
+            id: 'Dashboard.Detail.Overview.BasicInfo.RedologStorageClass',
+            defaultMessage: 'RedoLog 存储类',
+          }),
+          value: storage.redoLogStorage.storageClass,
+        },
+        {
+          label: intl.formatMessage({
+            id: 'Dashboard.Detail.Overview.BasicInfo.RedologSize',
+            defaultMessage: 'RedoLog 大小',
+          }),
+          value: storage.redoLogStorage.size,
+        },
+        {
+          label: intl.formatMessage({
+            id: 'Dashboard.Detail.Overview.BasicInfo.SystemLogStorageClass',
+            defaultMessage: '系统日志存储类',
+          }),
+          value: storage.sysLogStorage.storageClass,
+        },
+        {
+          label: intl.formatMessage({
+            id: 'Dashboard.Detail.Overview.BasicInfo.SystemLogStorageSize',
+            defaultMessage: '系统日志存储大小',
+          }),
+          value: storage.sysLogStorage.size,
+        },
+      ]
+    : [];
+
   return (
     <Col span={24}>
       <Card style={style}>
@@ -135,26 +138,28 @@ export default function BasicInfo({
             {rootPasswordSecret || '-'}
           </Descriptions.Item>
         </Descriptions>
-        <div style={{ marginBottom: 12 }}>
-          <span
-            style={{
-              color: '#132039',
-              fontSize: 16,
-              fontWeight: 600,
-              marginRight: 8,
-            }}
-          >
-            {intl.formatMessage({
-              id: 'Dashboard.Detail.Overview.BasicInfo.DetailedClusterConfiguration',
-              defaultMessage: '集群详细配置',
-            })}
-          </span>
-          <Switch
-            checked={checked}
-            onChange={(checked) => setChecked(checked)}
-          />
-        </div>
-        {checked && (
+        {extra && (
+          <div style={{ marginBottom: 12 }}>
+            <span
+              style={{
+                color: '#132039',
+                fontSize: 16,
+                fontWeight: 600,
+                marginRight: 8,
+              }}
+            >
+              {intl.formatMessage({
+                id: 'Dashboard.Detail.Overview.BasicInfo.DetailedClusterConfiguration',
+                defaultMessage: '集群详细配置',
+              })}
+            </span>
+            <Switch
+              checked={checked}
+              onChange={(checked) => setChecked(checked)}
+            />
+          </div>
+        )}
+        {checked && extra && (
           <div className={styles.detailConfig}>
             <Descriptions
               style={{ width: '50%' }}

diff --git a/ui/src/pages/Cluster/Detail/Overview/ZoneTable.tsx b/ui/src/pages/Cluster/Detail/Overview/ZoneTable.tsx
@@ -93,6 +93,7 @@ export default function ZoneTable({
                 })}
               </a>
               <a
+                style={{ color:'#ff4b4b' }}
                 onClick={() => {
                   showDeleteConfirm({
                     onOk: () => remove(record.zone),

diff --git a/ui/src/pages/Cluster/Detail/Overview/helper.ts b/ui/src/pages/Cluster/Detail/Overview/helper.ts
@@ -1,4 +1,5 @@
 // Functions without UI
+import { CLUSTER_INFO_CONFIG } from "@/constants";
 
 /**
  * Get the namespace, name and cluster name or tenant name through the path of the url
@@ -32,20 +33,6 @@ const getNSName = () => {
   return res;
 };
 
-const clusterInfoConfig = [
-  'name',
-  'namespace',
-  'status',
-  'image',
-  'resource',
-  'storage',
-  'backupVolume',
-  'monitor',
-  'rootPasswordSecret',
-  'mode',
-  'parameters'
-]
-
 // if there is cluster｜zone｜server whose status isn't running,the return status is operating.
 const formatClusterData = (responseData: any): API.ClusterDetail => {
   const res: any = {
@@ -59,7 +46,7 @@ const formatClusterData = (responseData: any): API.ClusterDetail => {
     if (key === 'status' && responseData[key] !== 'running') {
       status = 'operating';
     }
-    if(clusterInfoConfig.includes(key)){
+    if(CLUSTER_INFO_CONFIG.includes(key)){
       res['info'][key] = responseData[key];
     }
     if (key === 'metrics') {