fix:Supplement available resources in the resource pool

ui/src/components/TopoComponent/constants.ts

@@ -1,5 +1,5 @@
 import { intl } from '@/utils/intl';
-type OperateTypeLabel = { value: string; label: string }[];
+type OperateTypeLabel = { value: string; label: string; disabled?: boolean }[];
 
 const clusterOperate: OperateTypeLabel = [
   {
@@ -78,6 +78,7 @@ const clusterOperateOfTenant: OperateTypeLabel = [
 
 const getZoneOperateOfTenant = (
   haveResourcePool: boolean,
+  tenantReplicas: API.ReplicaDetailType[]
 ): OperateTypeLabel => {
   return haveResourcePool
     ? [
@@ -87,13 +88,15 @@ const getZoneOperateOfTenant = (
             id: 'Dashboard.components.TopoComponent.constants.EditResourcePool',
             defaultMessage: '编辑资源池',
           }),
+          disabled: false
         },
         {
           value: 'deleteResourcePool',
           label: intl.formatMessage({
             id: 'Dashboard.components.TopoComponent.constants.DeleteAResourcePool',
             defaultMessage: '删除资源池',
           }),
+          disabled: tenantReplicas.length <= 2
         },
       ]
     : [
@@ -103,6 +106,7 @@ const getZoneOperateOfTenant = (
             id: 'Dashboard.components.TopoComponent.constants.AddAResourcePool',
             defaultMessage: '新增资源池',
           }),
+          disabled: false
         },
       ];
 };

ui/src/components/TopoComponent/helper.ts

@@ -1,13 +1,14 @@
 import {
-  BADGE_IMG_MAP,
-  CLUSTER_IMG_MAP,
-  SERVER_IMG_MAP,
-  ZONE_IMG_MAP,
-  TOPO_INFO_CONFIG
+BADGE_IMG_MAP,
+CLUSTER_IMG_MAP,
+SERVER_IMG_MAP,
+TOPO_INFO_CONFIG,
+ZONE_IMG_MAP
 } from '@/constants';
 import { intl } from '@/utils/intl';
-import { Graph, IG6GraphEvent, INode, IShape } from '@antv/g6';
+import { Graph,IG6GraphEvent,INode,IShape } from '@antv/g6';
 import _ from 'lodash';
+import type { OperateTypeLabel } from './constants';
 
 export type ShapeEventListner = (
   event: IG6GraphEvent,
@@ -244,3 +245,7 @@ export const getServerNumber = (
   }
   return 0;
 };
+
+export const haveDisabledOperate = (operateList: OperateTypeLabel) => {
+  return operateList.find((operate) => operate.disabled);
+};

ui/src/components/TopoComponent/index.tsx

@@ -1,30 +1,30 @@
 import MoreModal from '@/components/moreModal';
 import { intl } from '@/utils/intl';
-import G6, { IG6GraphEvent } from '@antv/g6';
+import G6,{ IG6GraphEvent } from '@antv/g6';
 import { createNodeFromReact } from '@antv/g6-react-node';
-import { useRequest, useUpdateEffect } from 'ahooks';
+import { useRequest,useUpdateEffect } from 'ahooks';
 import { message } from 'antd';
 import _ from 'lodash';
-import { ReactElement, useEffect, useMemo, useRef, useState } from 'react';
+import { ReactElement,useEffect,useMemo,useRef,useState } from 'react';
 
 import showDeleteConfirm from '@/components/customModal/DeleteModal';
 import OperateModal from '@/components/customModal/OperateModal';
 import { RESULT_STATUS } from '@/constants';
 import BasicInfo from '@/pages/Cluster/Detail/Overview/BasicInfo';
-import { getClusterFromTenant, getZonesOptions } from '@/pages/Tenant/helper';
-import { deleteObcluster, deleteObzone, getClusterDetailReq } from '@/services';
+import { getClusterFromTenant,getOriginResourceUsages,getZonesOptions } from '@/pages/Tenant/helper';
+import { deleteObcluster,deleteObzone,getClusterDetailReq } from '@/services';
 import { deleteObtenantPool } from '@/services/tenant';
 import { getNSName } from '../../pages/Cluster/Detail/Overview/helper';
-import { ReactNode, config } from './G6register';
+import { ReactNode,config } from './G6register';
 import type { OperateTypeLabel } from './constants';
 import {
-  clusterOperate,
-  clusterOperateOfTenant,
-  getZoneOperateOfTenant,
-  serverOperate,
-  zoneOperate,
+clusterOperate,
+clusterOperateOfTenant,
+getZoneOperateOfTenant,
+serverOperate,
+zoneOperate,
 } from './constants';
-import { appenAutoShapeListener, checkIsSame, getServerNumber } from './helper';
+import { appenAutoShapeListener,checkIsSame,getServerNumber,haveDisabledOperate } from './helper';
 
 interface TopoProps {
   tenantReplicas?: API.ReplicaDetailType[];
@@ -55,7 +55,6 @@ export default function TopoComponent({
     useState<OperateTypeLabel>(clusterOperateList);
   const [inNode, setInNode] = useState<boolean>(false);
   const [inModal, setInModal] = useState<boolean>(false);
-  const [operateDisable, setOperateDisable] = useState<boolean>(false);
 
   const [[ns, name]] = useState(
     namespace && clusterNameOfKubectl
@@ -102,7 +101,9 @@ export default function TopoComponent({
             const haveResourcePool = !!tenantReplicas?.find(
               (replica) => replica.zone === zone,
             );
-            setOprateList(getZoneOperateOfTenant(haveResourcePool));
+            setOprateList(
+              getZoneOperateOfTenant(haveResourcePool, tenantReplicas),
+            );
           } else {
             setOprateList(zoneOperate);
           }
@@ -276,22 +277,27 @@ export default function TopoComponent({
 
   const mouseEnter = () => setInModal(true);
   const mouseLeave = () => setInModal(false);
-  //Re-acquire data after successful operation and maintenance operations
-  const operateSuccess = () => {
-    getTopoData({ ns, name, useFor: 'topo', tenantReplicas });
-  };
+  // //Re-acquire data after successful operation and maintenance operations
+  // const operateSuccess = () => {
+  //   getTopoData({ ns, name, useFor: 'topo', tenantReplicas });
+  // };
 
   //Used to re-render the view after data update
   useUpdateEffect(() => {
     let checkStatusTimer: NodeJS.Timer;
     //polling
     if (!RESULT_STATUS.includes(originTopoData.topoData.status)) {
-      if (!operateDisable) setOperateDisable(true);
+      if (!haveDisabledOperate(operateList))
+        setOprateList(operateList.map((item) => ({ ...item, disabled: true })));
+
       checkStatusTimer = setInterval(() => {
         getTopoData({ ns, name, useFor: 'topo', tenantReplicas });
       }, 3000);
     } else {
-      if (operateDisable) setOperateDisable(false);
+      if (haveDisabledOperate(operateList))
+        setOprateList(
+          operateList.map((item) => ({ ...item, disabled: false })),
+        );
     }
     if (graph.current) {
       if (!checkIsSame(beforeTopoData.current, originTopoData.topoData)) {
@@ -339,7 +345,7 @@ export default function TopoComponent({
       modelRef.current?.removeEventListener('mouseleave', mouseLeave);
     };
   }, []);
-  const isCreatePool = modalType.current === 'createResourcePools';
+  const isCreateResourcePool = modalType.current === 'createResourcePools';
 
   // Use different pictures for nodes in different states
   return (
@@ -362,25 +368,33 @@ export default function TopoComponent({
             visible={visible}
             list={operateList}
             ItemClick={ItemClickOperate}
-            disable={operateDisable}
           />
         ),
 
-        [operateDisable, visible],
+        [operateList, visible],
       )}
 
       <OperateModal
         type={modalType.current}
         visible={operateModalVisible}
         setVisible={setOperateModalVisible}
-        successCallback={operateSuccess}
+        successCallback={refreshTenant}
         params={{
           zoneName: chooseZoneName.current,
           defaultValue: chooseServerNum,
           defaultUnitCount: defaultUnitCount,
           ...resourcePoolDefaultValue,
-          newResourcePool: isCreatePool,
-          zonesOptions: isCreatePool
+          essentialParameter: isCreateResourcePool
+            ? resourcePoolDefaultValue.essentialParameter
+            : getOriginResourceUsages(
+                resourcePoolDefaultValue.essentialParameter,
+                resourcePoolDefaultValue?.replicaList?.find(
+                  (replica) =>
+                    replica.zone === resourcePoolDefaultValue.editZone,
+                ),
+              ),
+          newResourcePool: isCreateResourcePool,
+          zonesOptions: isCreateResourcePool
             ? getZonesOptions(
                 getClusterFromTenant(
                   resourcePoolDefaultValue?.clusterList,

ui/src/components/customModal/ModifyUnitDetailModal.tsx

@@ -1,24 +1,24 @@
 import InputNumber from '@/components/InputNumber';
-import { SUFFIX_UNIT, getMinResource } from '@/constants';
+import { SUFFIX_UNIT,getMinResource } from '@/constants';
 import { RULER_ZONE } from '@/constants/rules';
 import { getNSName } from '@/pages/Cluster/Detail/Overview/helper';
 import { TooltipItemContent } from '@/pages/Cluster/New/Observer';
 import type {
-  MaxResourceType,
-  MinResourceConfig,
+MaxResourceType,
+MinResourceConfig,
 } from '@/pages/Tenant/New/ResourcePools';
 import ZoneItem from '@/pages/Tenant/ZoneItem';
 import {
-  findMinParameter,
-  modifyZoneCheckedStatus,
+findMinParameter,
+modifyZoneCheckedStatus,
 } from '@/pages/Tenant/helper';
-import { createObtenantPool, patchObtenantPool } from '@/services/tenant';
+import { createObtenantPool,patchObtenantPool } from '@/services/tenant';
 import { formatPatchPoolData } from '@/utils/helper';
 import { intl } from '@/utils/intl';
-import { useEffect, useState } from 'react';
+import { useEffect,useState } from 'react';
 import SelectWithTooltip from '../SelectWithTooltip';
 
-import { Col, Form, Row, Select, message } from 'antd';
+import { Col,Form,Row,Select,message } from 'antd';
 import type { CommonModalType } from '.';
 import CustomModal from '.';
 
@@ -72,9 +72,9 @@ export default function ModifyUnitDetailModal({
     setClusterList,
     essentialParameter = {},
     clusterResourceName = '',
-    editZone,
+    editZone, 
     replicaList,
-    newResourcePool = false,
+    newResourcePool = false, // This parameter can be used to determine whether to edit or add
     setEditZone,
     zonesOptions,
     zoneName,
@@ -128,8 +128,12 @@ export default function ModifyUnitDetailModal({
             defaultMessage: '修改成功',
           }),
       );
-      successCallback();
+      if (successCallback) successCallback();
       form.resetFields();
+      if (setEditZone) {
+        setEditZone('');
+        setSelectZones([]);
+      }
       setVisible(false);
     }
   };

ui/src/components/customModal/index.tsx

@@ -14,7 +14,7 @@ interface CustomModalProps {
 export type CommonModalType = {
   visible: boolean;
   setVisible: (prop: boolean) => void;
-  successCallback: (val?:any) => void;
+  successCallback?: (val?:any) => void;
 };
 
 export default function CustomModal(props: CustomModalProps) {

ui/src/components/moreModal/index.tsx

@@ -1,19 +1,18 @@
+import type { OperateTypeLabel } from '../TopoComponent/constants';
 import styles from './index.less';
 
 interface MoreModalProps {
   visible: boolean;
   ItemClick: (value: API.ModalType) => void;
-  list: { value: string; label: string }[];
+  list: OperateTypeLabel;
   innerRef: any;
-  disable: boolean;
 }
 
 export default function MoreModal({
   visible,
   list,
   ItemClick,
   innerRef,
-  disable,
 }: MoreModalProps) {
   return (
     <div className={styles.moreModalContainer}>
@@ -24,12 +23,14 @@ export default function MoreModal({
         {list.map((item, index) => (
           <li
             style={
-              disable
+              item?.disabled
                 ? { color: 'rgba(0, 0, 0, 0.45)', cursor: 'not-allowed' }
                 : {}
             }
             onClick={
-              !disable ? () => ItemClick(item.value as API.ModalType) : () => {}
+              !item?.disabled
+                ? () => ItemClick(item.value as API.ModalType)
+                : () => {}
             }
             key={index}
           >

ui/src/i18n/strings/en-US.json

@@ -679,5 +679,7 @@
   "Dashboard.src.constants.MonomerMode": "Monomer mode",
   "Dashboard.src.constants.RequiredKernelVersion": "Required kernel version> = 4.2.0.0",
   "Dashboard.src.constants.ServiceMode": "Service mode",
-  "Dashboard.src.constants.RequiredKernelVersion.1": "Required kernel version> = 4.2.3.0"
+  "Dashboard.src.constants.RequiredKernelVersion.1": "Required kernel version> = 4.2.3.0",
+  "Dashboard.Cluster.New.BasicInfo.ResourceNamesCannotUsePure": "Resource names cannot use pure numbers.",
+  "Dashboard.Tenant.New.BasicInfo.ResourceNamesCannotUsePure": "Resource names cannot use pure numbers."
 }

ui/src/i18n/strings/zh-CN.json

@@ -679,5 +679,7 @@
   "Dashboard.src.constants.MonomerMode": "单体模式",
   "Dashboard.src.constants.RequiredKernelVersion": "要求内核版本 >= 4.2.0.0",
   "Dashboard.src.constants.ServiceMode": "Service模式",
-  "Dashboard.src.constants.RequiredKernelVersion.1": "要求内核版本 >= 4.2.3.0"
+  "Dashboard.src.constants.RequiredKernelVersion.1": "要求内核版本 >= 4.2.3.0",
+  "Dashboard.Cluster.New.BasicInfo.ResourceNamesCannotUsePure": "资源名不能使用纯数字",
+  "Dashboard.Tenant.New.BasicInfo.ResourceNamesCannotUsePure": "资源名不能使用纯数字"
 }

ui/src/models/global.ts

@@ -1,13 +1,16 @@
 import { useState } from 'react';
 
-// 全局共享数据
+// Global shared data
 export default () => {
   const [chooseClusterName, setChooseClusterName] = useState<string>('');
   const [userName, setUsername] = useState<string>();
+  const [appInfo, setAppInfo] = useState({});
   return {
     chooseClusterName,
     setChooseClusterName,
     userName,
     setUsername,
+    appInfo,
+    setAppInfo,
   };
 };

ui/src/pages/Cluster/Detail/index.tsx

@@ -4,7 +4,7 @@ import { intl } from '@/utils/intl';
 import { Menu } from '@oceanbase/design';
 import type { MenuItem } from '@oceanbase/design/es/BasicLayout';
 import { BasicLayout, IconFont } from '@oceanbase/ui';
-import { Outlet, history, useLocation, useParams } from '@umijs/max';
+import { Outlet, history, useLocation, useParams, useModel } from '@umijs/max';
 import { useRequest } from 'ahooks';
 const subSideMenus: MenuItem[] = [
   {
@@ -40,6 +40,7 @@ const ClusterDetail: React.FC = () => {
   const params = useParams();
   const user = localStorage.getItem('user');
   const location = useLocation();
+  const { appInfo } = useModel('global');
   const { clusterId } = params;
   const { run: logout } = useRequest(logoutReq, {
     manual: true,
@@ -109,7 +110,7 @@ const ClusterDetail: React.FC = () => {
           locales: ['zh-CN', 'en-US'],
           appData: {
             shortName: 'ob dashboard',
-            version: '1.0.0',
+            version: appInfo?.version,
           },
         }}
         menus={menus}