fix:Resolve the problem of polling

oceanbase · Mar 12, 2024 · 9b6ac7c · 9b6ac7c
1 parent cdf86b7
commit 9b6ac7c
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 81 deletions.
diff --git a/ui/src/components/TopoComponent/helper.ts b/ui/src/components/TopoComponent/helper.ts
@@ -117,7 +117,8 @@ function getTooltipInfo(zone: any, tenantTopoData: API.ReplicaDetailType[]) {
   let targetZone = tenantTopoData.find((item) => item.zone === zone.zone);
   if (targetZone) {
     return {
-      cpuCount: targetZone.cpuCount,
+      maxCPU: targetZone.maxCPU,
+      minCPU: targetZone.minCPU,
       memorySize: targetZone.memorySize,
       minIops: targetZone.minIops,
       maxIops: targetZone.maxIops,

diff --git a/ui/src/constants/index.ts b/ui/src/constants/index.ts
@@ -60,6 +60,8 @@ const MINIMAL_CONFIG = {
 
 const RESULT_STATUS = ['running','failed'];
 
+const BACKUP_RESULT_STATUS = ['RUNNING','FAILED','PAUSED']
+
 const RESOURCE_NAME_REG = /^[a-z\-]+$/;
 // use for tenant name or zone name
 const TZ_NAME_REG =  /^[_a-zA-Z][^-\n]*$/;
@@ -78,6 +80,7 @@ export {
   SUFFIX_UNIT,
   ZONE_IMG_MAP,
   RESULT_STATUS,
+  BACKUP_RESULT_STATUS,
   RESOURCE_NAME_REG,
   TZ_NAME_REG
 };
diff --git a/ui/src/pages/Tenant/Detail/Backup/BackupConfiguration.tsx b/ui/src/pages/Tenant/Detail/Backup/BackupConfiguration.tsx
@@ -1,30 +1,30 @@
+import { BACKUP_RESULT_STATUS } from '@/constants';
+import { usePublicKey } from '@/hook/usePublicKey';
 import { getNSName } from '@/pages/Cluster/Detail/Overview/helper';
 import {
-  deletePolicyOfTenant,
-  getBackupPolicy,
-  updateBackupPolicyOfTenant,
+deletePolicyOfTenant,
+updateBackupPolicyOfTenant,
 } from '@/services/tenant';
 import { intl } from '@/utils/intl';
 import { useRequest } from 'ahooks';
-import { usePublicKey } from '@/hook/usePublicKey';
 import {
-  Button,
-  Card,
-  Col,
-  Descriptions,
-  Form,
-  InputNumber,
-  Row,
-  Select,
-  Space,
-  message,
+Button,
+Card,
+Col,
+Descriptions,
+Form,
+InputNumber,
+Row,
+Select,
+Space,
+message,
 } from 'antd';
 import dayjs from 'dayjs';
-import { useRef, useState } from 'react';
+import { useEffect,useRef,useState } from 'react';
 import {
-  checkIsSame,
-  formatBackupForm,
-  formatBackupPolicyData,
+checkIsSame,
+formatBackupForm,
+formatBackupPolicyData,
 } from '../../helper';
 import BakMethodsList from '../NewBackup/BakMethodsList';
 import SchduleSelectFormItem from '../NewBackup/SchduleSelectFormItem';
@@ -34,20 +34,20 @@ interface BackupConfigurationProps {
   setBackupPolicy: React.Dispatch<
     React.SetStateAction<API.BackupPolicy | undefined>
   >;
+  backupPolicyRefresh: () => void;
 }
 
 export default function BackupConfiguration({
   backupPolicy,
   setBackupPolicy,
+  backupPolicyRefresh
 }: BackupConfigurationProps) {
   const [form] = Form.useForm();
   const scheduleValue = Form.useWatch(['scheduleDates'], form);
   const [isEdit, setIsEdit] = useState<boolean>(false);
-  const [pollingInterval, setPollingInterval] = useState<number>(0);
-  const [loading, setIsLoading] = useState<boolean>(false);
   const curConfig = useRef({});
   const [ns, name] = getNSName();
-  const publicKey = usePublicKey()
+  const publicKey = usePublicKey();
 
   const INFO_CONFIG = {
     archivePath: {
@@ -118,42 +118,11 @@ export default function BackupConfiguration({
     scheduleTime: dayjs(backupPolicy.scheduleTime, 'HH:mm'),
   };
 
-  const { run: getBackupPolicyReq } = useRequest(getBackupPolicy, {
-    manual: true,
-    pollingInterval, //Polling
-    onSuccess: ({ successful, data }) => {
-      if (successful) {
-        if (
-          !checkIsSame(
-            data,
-            JSON.stringify(form.getFieldsValue()) === '{}'
-              ? curConfig.current
-              : form.getFieldsValue(),
-          ) &&
-          pollingInterval === 0
-        ) {
-          setPollingInterval(300);
-        } else {
-          setIsLoading(false);
-          setBackupPolicy(data);
-          setPollingInterval(0); //Stop polling
-          message.success(
-            intl.formatMessage({
-              id: 'Dashboard.Detail.Backup.BackupConfiguration.OperationSucceeded',
-              defaultMessage: '操作成功',
-            }),
-          );
-        }
-      }
-    },
-  });
-
   const { run: deleteBackupPolicyReq } = useRequest(deletePolicyOfTenant, {
     manual: true,
-    onSuccess: ({ successful, data }) => {
+    onSuccess: ({ successful }) => {
       if (successful) {
-        setIsLoading(true);
-        getBackupPolicyReq({ ns, name });
+        backupPolicyRefresh();
       }
     },
   });
@@ -167,8 +136,7 @@ export default function BackupConfiguration({
     const { successful, data } = await updateBackupPolicyOfTenant(param);
     if (successful) {
       if (data.status === backupPolicy.status) {
-        setIsLoading(true);
-        getBackupPolicyReq({ ns, name });
+        backupPolicyRefresh()
       } else {
         message.success(
           intl.formatMessage({
@@ -188,8 +156,8 @@ export default function BackupConfiguration({
 
     if (
       checkIsSame(
-        formatBackupForm(initialValues,publicKey),
-        formatBackupForm(form.getFieldsValue(),publicKey),
+        formatBackupForm(initialValues, publicKey),
+        formatBackupForm(form.getFieldsValue(), publicKey),
       )
     ) {
       message.info(
@@ -209,23 +177,22 @@ export default function BackupConfiguration({
     const { successful, data } = await updateBackupPolicyOfTenant({
       ns,
       name,
-      ...formatBackupForm(values,publicKey),
+      ...formatBackupForm(values, publicKey),
     });
     if (successful) {
-      curConfig.current = formatBackupForm(form.getFieldsValue(),publicKey);
-      if (checkIsSame(data, curConfig.current)) {
-        setIsLoading(true);
-        getBackupPolicyReq({ ns, name });
-      } else {
-        setBackupPolicy(data);
-        setIsEdit(!isEdit);
-        message.success(
-          intl.formatMessage({
-            id: 'Dashboard.Detail.Backup.BackupConfiguration.OperationSucceeded.2',
-            defaultMessage: '操作成功!',
-          }),
-        );
+      curConfig.current = formatBackupForm(form.getFieldsValue(), publicKey);
+      // Updates are asynchronous
+      if (!BACKUP_RESULT_STATUS.includes(data.status)) {
+        backupPolicyRefresh();
       }
+      setBackupPolicy(data);
+      setIsEdit(false);
+      message.success(
+        intl.formatMessage({
+          id: 'Dashboard.Detail.Backup.BackupConfiguration.OperationSucceeded.2',
+          defaultMessage: '操作成功!',
+        }),
+      );
     }
   };
 
@@ -236,7 +203,6 @@ export default function BackupConfiguration({
         defaultMessage: '备份策略配置',
       })}
       style={{ width: '100%' }}
-      loading={loading}
       extra={
         <Space>
           <Button type="primary" onClick={changeEditBtnStatus}>
@@ -339,7 +305,7 @@ export default function BackupConfiguration({
             Object.keys(DATE_CONFIG).map((key, index) => (
               <Col span={8} key={index}>
                 <Form.Item label={DATE_CONFIG[key]} name={key}>
-                  <InputNumber min={0} />
+                  <InputNumber addonAfter={'天'} min={0} />
                 </Form.Item>
               </Col>
             ))

diff --git a/ui/src/pages/Tenant/Detail/Backup/index.tsx b/ui/src/pages/Tenant/Detail/Backup/index.tsx
@@ -1,30 +1,45 @@
 import EmptyImg from '@/assets/empty.svg';
+import { BACKUP_RESULT_STATUS,REFRESH_TENANT_TIME } from '@/constants';
 import { getNSName } from '@/pages/Cluster/Detail/Overview/helper';
 import { getBackupPolicy,getTenant } from '@/services/tenant';
 import { intl } from '@/utils/intl';
 import { PageContainer } from '@ant-design/pro-components';
 import { history } from '@umijs/max';
 import { useRequest } from 'ahooks';
 import { Button,Card,Col,Row } from 'antd';
-import { useState } from 'react';
+import { useEffect,useRef,useState } from 'react';
 import BasicInfo from '../Overview/BasicInfo';
 import BackupConfiguration from './BackupConfiguration';
 import BackupJobs from './BackupJobs';
 
 export default function Backup() {
   const [ns, name] = getNSName();
-  const [backupPolicy,setBackupPolicy] = useState<API.BackupPolicy>()
+  const [backupPolicy,setBackupPolicy] = useState<API.BackupPolicy>();
+  const timerRef = useRef<NodeJS.Timeout>()
 
-  useRequest(getBackupPolicy, {
+  const { refresh: backupPolicyRefresh } = useRequest(getBackupPolicy, {
     defaultParams: [{ ns, name }],
-    onSuccess:({successful,data})=>{
-      if(successful)setBackupPolicy(data)
-    }
+    onSuccess: ({ successful, data }) => {
+      if (successful) {
+        setBackupPolicy(data);
+        if (!BACKUP_RESULT_STATUS.includes(data.status)) {
+          timerRef.current = setTimeout(()=>{
+            backupPolicyRefresh();
+          },REFRESH_TENANT_TIME)
+        }
+      }
+    },
   });
   const { data: tenantDetailResponse } = useRequest(getTenant, {
     defaultParams: [{ ns, name }],
   });
   const tenantDetail = tenantDetailResponse?.data;
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(timerRef.current);
+    };
+  }, []);
 
   return (
     <PageContainer>
@@ -75,6 +90,7 @@ export default function Backup() {
             <BackupConfiguration
               backupPolicy={backupPolicy}
               setBackupPolicy={setBackupPolicy}
+              backupPolicyRefresh={backupPolicyRefresh}
             />
           </Col>
           <BackupJobs />