Fix resource pool related defects (oceanbase#279)

* Fix resource pool related defects

* fix:Avoid repeated requests for public keys

ui/src/components/TopoComponent/constants.ts

@@ -1,4 +1,5 @@
 import { intl } from '@/utils/intl';
+import { clone } from 'lodash';
 import type { GraphNodeType } from './helper';
 type OperateTypeLabel = { value: string; label: string; disabled?: boolean }[];
 
@@ -81,6 +82,8 @@ const clusterOperateOfTenant: OperateTypeLabel = [
 const getZoneOperateOfTenant = (
   haveResourcePool: boolean,
   tenantReplicas: API.ReplicaDetailType[],
+  tenantStatus?: string,
+  clusterStatus?: string,
 ): OperateTypeLabel => {
   return haveResourcePool
     ? [
@@ -90,15 +93,18 @@ const getZoneOperateOfTenant = (
             id: 'Dashboard.components.TopoComponent.constants.EditResourcePool',
             defaultMessage: '编辑资源池',
           }),
-          disabled: false,
+          disabled: tenantStatus !== 'running' || clusterStatus !== 'running',
         },
         {
           value: 'deleteResourcePool',
           label: intl.formatMessage({
             id: 'Dashboard.components.TopoComponent.constants.DeleteAResourcePool',
             defaultMessage: '删除资源池',
           }),
-          disabled: tenantReplicas.length <= 2,
+          disabled:
+            tenantReplicas.length <= 2 ||
+            tenantStatus !== 'running' ||
+            clusterStatus !== 'running',
         },
       ]
     : [
@@ -108,25 +114,40 @@ const getZoneOperateOfTenant = (
             id: 'Dashboard.components.TopoComponent.constants.AddAResourcePool',
             defaultMessage: '新增资源池',
           }),
-          disabled: false,
+          disabled: tenantStatus !== 'running' || clusterStatus !== 'running',
         },
       ];
 };
 
 const getZoneOperateOfCluster = (
   topoData: GraphNodeType | undefined,
+  status: string,
 ): OperateTypeLabel => {
   if (!topoData) return [];
-  const isDisabled = topoData?.children?.length <= 2;
+  const isDisabled = topoData?.children?.length <= 2 || status !== 'running';
   zoneOperate.forEach((operate) => {
     if (operate.value === 'deleteZone') operate.disabled = isDisabled;
+    if (operate.value === 'scaleServer')
+      operate.disabled = status !== 'running';
   });
   return zoneOperate;
 };
 
+const getClusterOperates = (
+  clusterOperateList: OperateTypeLabel,
+  disabled: boolean,
+): OperateTypeLabel => {
+  const res = clone(clusterOperateList);
+  res.forEach((item) => {
+    item.disabled = disabled;
+  });
+  return res;
+};
+
 export {
   clusterOperate,
   clusterOperateOfTenant,
+  getClusterOperates,
   getZoneOperateOfCluster,
   getZoneOperateOfTenant,
   serverOperate,

ui/src/components/TopoComponent/index.tsx

@@ -12,20 +12,28 @@ 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, getOriginResourceUsages, getZonesOptions } from '@/pages/Tenant/helper';
+import {
+getClusterFromTenant,
+getOriginResourceUsages,
+getZonesOptions,
+} from '@/pages/Tenant/helper';
 import { getClusterDetailReq } from '@/services';
-import { deleteClusterReportWrap, deleteObzoneReportWrap } from '@/services/reportRequest/clusterReportReq';
+import {
+deleteClusterReportWrap,
+deleteObzoneReportWrap,
+} from '@/services/reportRequest/clusterReportReq';
 import { deleteObtenantPool } from '@/services/tenant';
 import { ReactNode,config } from './G6register';
 import type { OperateTypeLabel } from './constants';
 import {
 clusterOperate,
 clusterOperateOfTenant,
-getZoneOperateOfTenant,
+getClusterOperates,
 getZoneOperateOfCluster,
+getZoneOperateOfTenant,
 serverOperate,
 } from './constants';
-import { appenAutoShapeListener,checkIsSame,getServerNumber,haveDisabledOperate } from './helper';
+import { appenAutoShapeListener,checkIsSame,getServerNumber } from './helper';
 
 interface TopoProps {
   tenantReplicas?: API.ReplicaDetailType[];
@@ -35,6 +43,7 @@ interface TopoProps {
   resourcePoolDefaultValue?: any;
   refreshTenant?: () => void;
   defaultUnitCount?: number;
+  status?: string;
 }
 
 //Cluster topology diagram component
@@ -46,18 +55,19 @@ export default function TopoComponent({
   resourcePoolDefaultValue,
   refreshTenant,
   defaultUnitCount,
+  status,
 }: TopoProps) {
   const { ns:urlNs, name:urlName } = useParams();
   const clusterOperateList = tenantReplicas
     ? clusterOperateOfTenant
     : clusterOperate;
   const modelRef = useRef<HTMLInputElement>(null);
+
   const [visible, setVisible] = useState<boolean>(false);
   const [operateList, setOprateList] =
     useState<OperateTypeLabel>(clusterOperateList);
   const [inNode, setInNode] = useState<boolean>(false);
   const [inModal, setInModal] = useState<boolean>(false);
-
   const [[ns, name]] = useState(
     namespace && clusterNameOfKubectl
       ? [namespace, clusterNameOfKubectl]
@@ -87,13 +97,21 @@ export default function TopoComponent({
       },
     },
   );
+  const clusterStatus = useRef(originTopoData?.basicInfo?.status);
+  const tenantStatus = useRef(status);
 
   //Node more icon click event
   const handleClick = (evt: IG6GraphEvent) => {
     if (modelRef.current) {
       switch (evt.item?._cfg?.model?.type) {
         case 'cluster':
-          setOprateList(clusterOperateList);
+          let disabled = tenantReplicas
+            ? clusterStatus.current !== 'running' ||
+              tenantStatus.current !== 'running'
+            : clusterStatus.current !== 'running';
+          setOprateList(
+            getClusterOperates(clusterOperateList, disabled),
+          );
           break;
         case 'zone':
           const zone = evt.item?._cfg?.model?.label as string;
@@ -104,10 +122,20 @@ export default function TopoComponent({
               (replica) => replica.zone === zone,
             );
             setOprateList(
-              getZoneOperateOfTenant(haveResourcePool, tenantReplicas),
+              getZoneOperateOfTenant(
+                haveResourcePool,
+                tenantReplicas,
+                tenantStatus.current,
+                clusterStatus.current
+              ),
             );
           } else {
-            setOprateList(getZoneOperateOfCluster(originTopoData?.topoData));
+            setOprateList(
+              getZoneOperateOfCluster(
+                originTopoData?.topoData,
+                clusterStatus.current,
+              ),
+            );
           }
           chooseZoneName.current = zone;
           break;
@@ -286,19 +314,12 @@ export default function TopoComponent({
   //Used to re-render the view after data update
   useUpdateEffect(() => {
     let checkStatusTimer: NodeJS.Timer;
+    clusterStatus.current = originTopoData?.basicInfo?.status;
     //polling
     if (!RESULT_STATUS.includes(originTopoData.topoData.status)) {
-      if (!haveDisabledOperate(operateList))
-        setOprateList(operateList.map((item) => ({ ...item, disabled: true })));
-
       checkStatusTimer = setInterval(() => {
         getTopoData({ ns, name, useFor: 'topo', tenantReplicas });
       }, 3000);
-    } else {
-      if (haveDisabledOperate(operateList))
-        setOprateList(
-          operateList.map((item) => ({ ...item, disabled: false })),
-        );
     }
     if (graph.current) {
       if (!checkIsSame(beforeTopoData.current, originTopoData.topoData)) {
@@ -314,6 +335,10 @@ export default function TopoComponent({
     };
   }, [originTopoData]);
 
+  useUpdateEffect(() => {
+    tenantStatus.current = status;
+  }, [status]);
+
   /**
    * Mouseleave will be triggered when the modal is opened,
    * so the modal cannot be closed in the callback function of mouseleave.
@@ -372,7 +397,7 @@ export default function TopoComponent({
           />
         ),
 
-        [operateList, visible],
+        [operateList, visible, status],
       )}
 
       <OperateModal

ui/src/components/customModal/ModifyUnitDetailModal.tsx

@@ -12,9 +12,9 @@ import {
 findMinParameter,
 modifyZoneCheckedStatus,
 } from '@/pages/Tenant/helper';
-import { 
-patchObtenantPoolReportWrap, 
-createObtenantPoolReportWrap 
+import {
+createObtenantPoolReportWrap,
+patchObtenantPoolReportWrap
 } from '@/services/reportRequest/tenantReportReq';
 import { formatPatchPoolData } from '@/utils/helper';
 import { intl } from '@/utils/intl';
@@ -89,6 +89,7 @@ export default function ModifyUnitDetailModal({
   const [minResource, setMinResource] = useState<MinResourceConfig>(
     getMinResource({ minMemory: essentialParameter.minPoolMemory }),
   );
+
   const [selectZones, setSelectZones] = useState<string[]>(
     editZone ? [editZone] : [],
   );
@@ -282,7 +283,12 @@ export default function ModifyUnitDetailModal({
                 style={{ marginRight: 24 }}
               >
                 {/* <Input placeholder={'请输入'} /> */}
-                <Select options={zonesOptions} />
+                <Select
+                  onChange={(val: string) => {
+                    setSelectZones([val]);
+                  }}
+                  options={zonesOptions}
+                />
               </Form.Item>
             </Col>
             <Col span={4}>
@@ -355,6 +361,7 @@ export default function ModifyUnitDetailModal({
             <Form.Item
               label="CPU"
               name={['unitConfig', 'cpuCount']}
+              validateFirst
               rules={[
                 {
                   required: true,
@@ -402,6 +409,7 @@ export default function ModifyUnitDetailModal({
           <Col span={8}>
             <Form.Item
               label="Memory"
+              validateFirst
               name={['unitConfig', 'memorySize']}
               rules={[
                 {
@@ -446,6 +454,7 @@ export default function ModifyUnitDetailModal({
           </Col>
           <Col span={8}>
             <Form.Item
+              validateFirst
               rules={[
                 {
                   required: true,

ui/src/hook/usePublicKey.ts

@@ -1,23 +1,31 @@
-import React, { useEffect } from 'react';
-import { getAppInfoFromStorage } from '@/utils/helper';
+import { getAppInfo } from '@/services';
+import { useModel } from '@umijs/max';
 import JSEncrypt from 'jsencrypt';
+import { useEffect } from 'react';
 
 export const usePublicKey = () => {
-  const [publicKey, setPublicKey] = React.useState<string>('');
+  const { publicKey, setPublicKey } = useModel('global');
 
   useEffect(() => {
-    getAppInfoFromStorage().then((appInfo) => {
-      setPublicKey(appInfo.publicKey); 
-    }).catch((err) => {
-      console.log(err)
-    });
-  }, [])
+    if (!publicKey) {
+      getAppInfo()
+        .then(({ data }) => {
+          setPublicKey(data.publicKey);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+  }, []);
 
   return publicKey;
-}
+};
 
-export const encryptText = (text: string, publicKey: string): string | false => {
-  const encrypt = new JSEncrypt(); 
+export const encryptText = (
+  text: string,
+  publicKey: string,
+): string | false => {
+  const encrypt = new JSEncrypt();
   encrypt.setPublicKey(publicKey);
   return encrypt.encrypt(text);
-}
+};

ui/src/models/global.ts

@@ -4,12 +4,15 @@ import { useRef, useState } from 'react';
 export default () => {
   const [chooseClusterName, setChooseClusterName] = useState<string>('');
   const [userName, setUsername] = useState<string>();
+  const [publicKey, setPublicKey] = useState<string>('')
   const reportDataInterval = useRef<NodeJS.Timer>();
   return {
     chooseClusterName,
     setChooseClusterName,
     userName,
     setUsername,
+    publicKey,
+    setPublicKey,
     reportDataInterval,
   };
 };

ui/src/pages/Tenant/Detail/Topo/index.tsx

@@ -86,6 +86,7 @@ export default function Topo() {
             replicaList: tenantTopoData?.replicas,
             editZone,
           }}
+          status={tenantTopoData?.info?.status}
           refreshTenant={reGetTenantDetail}
           header={
             <BasicInfo

ui/src/pages/Tenant/helper.ts

@@ -286,8 +286,8 @@ export const getOriginResourceUsages = (
   originResourceUsages.obServerResources.forEach((resource) => {
     if (resource.obZone === current.zone) {
       resource.availableCPU += Number(current.minCPU);
-      resource.availableLogDisk += Number(current.logDiskSize);
-      resource.availableMemory += Number(current.memorySize);
+      resource.availableLogDisk += Number(current.logDiskSize.split('Gi')[0]);
+      resource.availableMemory += Number(current.memorySize.split('Gi')[0]);
       originResourceUsages.obZoneResourceMap[current.zone].availableCPU +=
         Number(current.minCPU);
       originResourceUsages.obZoneResourceMap[current.zone].availableLogDisk +=

ui/src/utils/helper.ts

@@ -113,7 +113,5 @@ export const reportPollData = async () => {
       data,
     });
     localStorage.setItem('lastReportTime', Date.now().toString());
-  } catch (err) {
-    throw new Error(err);
-  }
+  } catch (err) {}
 };