diff --git a/ui/src/components/TopoComponent/helper.ts b/ui/src/components/TopoComponent/helper.ts index d9785da52..85d0517d7 100644 --- 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 index 3677e365c..a7279802c 100644 --- 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 index 9e7df41a6..154799b88 100644 --- 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 >; + backupPolicyRefresh: () => void; } export default function BackupConfiguration({ backupPolicy, setBackupPolicy, + backupPolicyRefresh }: BackupConfigurationProps) { const [form] = Form.useForm(); const scheduleValue = Form.useWatch(['scheduleDates'], form); const [isEdit, setIsEdit] = useState(false); - const [pollingInterval, setPollingInterval] = useState(0); - const [loading, setIsLoading] = useState(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={