From 2750ff92f82de715fb39af88415985a179d6942d Mon Sep 17 00:00:00 2001 From: yuyi Date: Mon, 23 Dec 2024 12:11:24 +0800 Subject: [PATCH 1/4] fix(refresh): #676 fixed unexpected refresh --- .../pages/Cluster/Detail/Overview/index.tsx | 40 ++++++----- .../Detail/Backup/BackupConfiguration.tsx | 68 ++++++++++--------- ui/src/pages/Tenant/Detail/Backup/index.tsx | 38 ++++++----- 3 files changed, 80 insertions(+), 66 deletions(-) diff --git a/ui/src/pages/Cluster/Detail/Overview/index.tsx b/ui/src/pages/Cluster/Detail/Overview/index.tsx index 05ffd74ff..17077818a 100644 --- a/ui/src/pages/Cluster/Detail/Overview/index.tsx +++ b/ui/src/pages/Cluster/Detail/Overview/index.tsx @@ -1,18 +1,3 @@ -import { obcluster } from '@/api'; -import EventsTable from '@/components/EventsTable'; -import IconTip from '@/components/IconTip'; -import OperateModal from '@/components/customModal/OperateModal'; -import showDeleteConfirm from '@/components/customModal/showDeleteConfirm'; -import { REFRESH_CLUSTER_TIME } from '@/constants'; -import { getClusterDetailReq } from '@/services'; -import { deleteClusterReportWrap } from '@/services/reportRequest/clusterReportReq'; -import { floorToTwoDecimalPlaces } from '@/utils/helper'; -import { intl } from '@/utils/intl'; -import { DownOutlined } from '@ant-design/icons'; -import { PageContainer } from '@ant-design/pro-components'; -import { Checkbox } from '@oceanbase/design'; -import { history, useAccess, useModel, useParams } from '@umijs/max'; -import { useRequest } from 'ahooks'; import { Button, Card, @@ -30,14 +15,30 @@ import { Tooltip, message, } from 'antd'; -import { isEmpty } from 'lodash'; +import { history, useAccess, useModel, useParams } from '@umijs/max'; import { useEffect, useRef, useState } from 'react'; + import BasicInfo from './BasicInfo'; +import { Checkbox } from '@oceanbase/design'; +import { DownOutlined } from '@ant-design/icons'; +import EventsTable from '@/components/EventsTable'; +import IconTip from '@/components/IconTip'; import NFSInfoModal from './NFSInfoModal'; +import OperateModal from '@/components/customModal/OperateModal'; +import { PageContainer } from '@ant-design/pro-components'; import ParametersModal from './ParametersModal'; +import { REFRESH_CLUSTER_TIME } from '@/constants'; import ResourceDrawer from './ResourceDrawer'; import ServerTable from './ServerTable'; import ZoneTable from './ZoneTable'; +import { deleteClusterReportWrap } from '@/services/reportRequest/clusterReportReq'; +import { floorToTwoDecimalPlaces } from '@/utils/helper'; +import { getClusterDetailReq } from '@/services'; +import { intl } from '@/utils/intl'; +import { isEmpty } from 'lodash'; +import { obcluster } from '@/api'; +import showDeleteConfirm from '@/components/customModal/showDeleteConfirm'; +import { useRequest } from 'ahooks'; const ClusterOverview: React.FC = () => { const { setChooseClusterName } = useModel('global'); @@ -401,6 +402,7 @@ const ClusterOverview: React.FC = () => { id: 'src.pages.Cluster.Detail.Overview.4FCF90AF', defaultMessage: '托管 operator', }), + width: 140, dataIndex: 'controlParameter', filters: controlParameters.map(({ label, value }) => ({ text: label, @@ -440,7 +442,10 @@ const ClusterOverview: React.FC = () => { ), dataIndex: 'accordance', width: 100, - render: (text: boolean) => { + render: (text: boolean, record: any) => { + if (!record?.controlParameter) { + return "-" + } const tagColor = text ? 'green' : 'gold'; const tagContent = text ? intl.formatMessage({ @@ -461,6 +466,7 @@ const ClusterOverview: React.FC = () => { defaultMessage: '操作', }), dataIndex: 'controlParameter', + align: 'center', render: (text, record) => { return ( diff --git a/ui/src/pages/Tenant/Detail/Backup/BackupConfiguration.tsx b/ui/src/pages/Tenant/Detail/Backup/BackupConfiguration.tsx index 1374697ba..b4b5b642b 100644 --- a/ui/src/pages/Tenant/Detail/Backup/BackupConfiguration.tsx +++ b/ui/src/pages/Tenant/Detail/Backup/BackupConfiguration.tsx @@ -1,13 +1,3 @@ -import showDeleteConfirm from '@/components/customModal/showDeleteConfirm'; -import { BACKUP_RESULT_STATUS } from '@/constants'; -import { usePublicKey } from '@/hook/usePublicKey'; -import { - deleteBackupReportWrap, - editBackupReportWrap, -} from '@/services/reportRequest/backupReportReq'; -import { intl } from '@/utils/intl'; -import { useAccess, useParams } from '@umijs/max'; -import { useRequest } from 'ahooks'; import { Button, Card, @@ -20,17 +10,29 @@ import { Typography, message, } from 'antd'; -import dayjs from 'dayjs'; -import { useRef, useState } from 'react'; import { checkIsSame, checkScheduleDatesHaveFull, formatBackupForm, formatBackupPolicyData, } from '../../helper'; +import { + deleteBackupReportWrap, + editBackupReportWrap, +} from '@/services/reportRequest/backupReportReq'; +import { useAccess, useParams } from '@umijs/max'; +import { useRef, useState } from 'react'; + +import { BACKUP_RESULT_STATUS } from '@/constants'; import BakMethodsList from '../NewBackup/BakMethodsList'; import SchduleSelectFormItem from '../NewBackup/SchduleSelectFormItem'; import ScheduleTimeFormItem from '../NewBackup/ScheduleTimeFormItem'; +import dayjs from 'dayjs'; +import { intl } from '@/utils/intl'; +import showDeleteConfirm from '@/components/customModal/showDeleteConfirm'; +import { usePublicKey } from '@/hook/usePublicKey'; +import { useRequest } from 'ahooks'; + interface BackupConfigurationProps { backupPolicy: API.BackupPolicy; setBackupPolicy: React.Dispatch< @@ -38,6 +40,10 @@ interface BackupConfigurationProps { >; backupPolicyRefresh: () => void; + isEditing: boolean; + setIsEditing: (open: boolean) => void; + onDelete?: () => void; + loading: boolean; } const { Text } = Typography; @@ -46,11 +52,14 @@ export default function BackupConfiguration({ backupPolicy, setBackupPolicy, backupPolicyRefresh, + isEditing, + setIsEditing, + onDelete, + loading, }: BackupConfigurationProps) { const [form] = Form.useForm(); const access = useAccess(); const scheduleValue = Form.useWatch(['scheduleDates'], form); - const [isEdit, setIsEdit] = useState(false); const curConfig = useRef({}); const { ns, name } = useParams(); const publicKey = usePublicKey(); @@ -116,15 +125,6 @@ export default function BackupConfiguration({ : '', }; - const { run: deleteBackupPolicyReq } = useRequest(deleteBackupReportWrap, { - manual: true, - onSuccess: ({ successful }) => { - if (successful) { - backupPolicyRefresh(); - } - }, - }); - const changeStatus = async () => { const param = { ns, @@ -147,8 +147,8 @@ export default function BackupConfiguration({ }; const changeEditBtnStatus = () => { - if (!isEdit) { - setIsEdit(!isEdit); + if (!isEditing) { + setIsEditing(true); return; } @@ -164,7 +164,7 @@ export default function BackupConfiguration({ defaultMessage: '未检测到配置更改', }), ); - setIsEdit(!isEdit); + setIsEditing(!isEditing); return; } @@ -193,7 +193,7 @@ export default function BackupConfiguration({ backupPolicyRefresh(); } setBackupPolicy(data); - setIsEdit(false); + setIsEditing(false); message.success( intl.formatMessage({ id: 'Dashboard.Detail.Backup.BackupConfiguration.OperationSucceeded.2', @@ -205,6 +205,7 @@ export default function BackupConfiguration({ return (