Fix parameters display and unexpected refresh in backup policy page (#…

…690) * fix(refresh): #676 fixed unexpected refresh * style(code): run npm run format * fix(backup): fixed backup policy * chore(githooks): polish the git hook before commiting ui code
oceanbase · Dec 24, 2024 · 2e9eac8 · 2e9eac8
1 parent 274d2d2
commit 2e9eac8
Show file tree

Hide file tree

Showing 8 changed files with 144 additions and 74 deletions.
diff --git a/ui/.husky/pre-commit b/ui/.husky/pre-commit
@@ -2,6 +2,19 @@
 . "$(dirname "$0")/_/husky.sh"
 CHANGED_FILES=$(git diff --cached --name-only --diff-filter=ACMR | grep "ui/" || true) 
 if [ -n "$CHANGED_FILES" ]; then
-  cd ui && npm run check-style && npm run lint
+  cd ui && npm run check-style
+  if [ $? -ne 0 ]; then
+    echo "Style check failed (npm run check-style), please fix the errors before committing."
+    exit 1
+  else
+    echo "Style check passed."
+  fi
+  npm run lint
+  if [ $? -ne 0 ]; then
+    echo "Lint check failed (npm run lint), please fix the errors before committing."
+    exit 1
+  else
+    echo "Lint check passed."
+  fi
 fi
 exit 0
diff --git a/ui/eslint.config.js b/ui/eslint.config.js
@@ -25,6 +25,8 @@ export default [
       '**/G6register.tsx',
       '**/.umi/*',
       '**/.umi-production/*',
+      '**/dist/*',
+      '**/generated/*',
     ],
   },
 ];
diff --git a/ui/src/i18n/strings/zh-CN.json b/ui/src/i18n/strings/zh-CN.json
@@ -355,7 +355,7 @@
   "Dashboard.Detail.NewBackup.DataRecoveryWindow": "数据恢复窗口",
   "Dashboard.Detail.NewBackup.EnterTheDataRecoveryWindow": "请输入数据恢复窗口",
   "Dashboard.Detail.NewBackup.ArchiveSliceInterval": "归档切片间隔",
-  "Dashboard.Detail.Overview.Backups.FilePath": "档案路径",
+  "Dashboard.Detail.Overview.Backups.FilePath": "日志归档路径",
   "Dashboard.Detail.Overview.Backups.PlanType": "计划类型",
   "Dashboard.Detail.Overview.Backups.PlannedDate": "计划日期",
   "Dashboard.Detail.Overview.Backups.ScheduledTime": "计划时间",

diff --git a/ui/src/pages/Cluster/Detail/Overview/index.tsx b/ui/src/pages/Cluster/Detail/Overview/index.tsx
@@ -1,18 +1,4 @@
-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,8 +16,23 @@ import {
   Tooltip,
   message,
 } from 'antd';
-import { isEmpty } from 'lodash';
 import { useEffect, useRef, useState } from 'react';
+
+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 { useRequest } from 'ahooks';
+import { isEmpty } from 'lodash';
 import BasicInfo from './BasicInfo';
 import NFSInfoModal from './NFSInfoModal';
 import ParametersModal from './ParametersModal';
@@ -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 (
           <Space size={1}>

diff --git a/ui/src/pages/Tenant/Detail/Backup/BackupConfiguration.tsx b/ui/src/pages/Tenant/Detail/Backup/BackupConfiguration.tsx
@@ -1,13 +1,8 @@
-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,24 +15,34 @@ import {
   Typography,
   message,
 } from 'antd';
-import dayjs from 'dayjs';
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import {
   checkIsSame,
   checkScheduleDatesHaveFull,
   formatBackupForm,
   formatBackupPolicyData,
 } from '../../helper';
+
+import showDeleteConfirm from '@/components/customModal/showDeleteConfirm';
+import { BACKUP_RESULT_STATUS } from '@/constants';
+import { usePublicKey } from '@/hook/usePublicKey';
+import { intl } from '@/utils/intl';
+import dayjs from 'dayjs';
 import BakMethodsList from '../NewBackup/BakMethodsList';
 import SchduleSelectFormItem from '../NewBackup/SchduleSelectFormItem';
 import ScheduleTimeFormItem from '../NewBackup/ScheduleTimeFormItem';
+
 interface BackupConfigurationProps {
   backupPolicy: API.BackupPolicy;
   setBackupPolicy: React.Dispatch<
     React.SetStateAction<API.BackupPolicy | undefined>
   >;
 
   backupPolicyRefresh: () => void;
+  isEditing: boolean;
+  setIsEditing: (open: boolean) => void;
+  onDelete?: () => void;
+  loading: boolean;
 }
 
 const { Text } = Typography;
@@ -46,11 +51,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<boolean>(false);
   const curConfig = useRef({});
   const { ns, name } = useParams();
   const publicKey = usePublicKey();
@@ -116,15 +124,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 +146,8 @@ export default function BackupConfiguration({
   };
 
   const changeEditBtnStatus = () => {
-    if (!isEdit) {
-      setIsEdit(!isEdit);
+    if (!isEditing) {
+      setIsEditing(true);
       return;
     }
 
@@ -164,7 +163,7 @@ export default function BackupConfiguration({
           defaultMessage: '未检测到配置更改',
         }),
       );
-      setIsEdit(!isEdit);
+      setIsEditing(!isEditing);
       return;
     }
 
@@ -193,7 +192,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 +204,7 @@ export default function BackupConfiguration({
 
   return (
     <Card
+      loading={loading}
       title={intl.formatMessage({
         id: 'Dashboard.Detail.Backup.BackupConfiguration.BackupPolicyConfiguration',
         defaultMessage: '备份策略配置',
@@ -214,7 +214,7 @@ export default function BackupConfiguration({
         access.obclusterwrite ? (
           <Space>
             <Button type="primary" onClick={changeEditBtnStatus}>
-              {isEdit
+              {isEditing
                 ? intl.formatMessage({
                     id: 'Dashboard.Detail.Backup.BackupConfiguration.UpdateConfiguration',
                     defaultMessage: '更新配置',
@@ -247,7 +247,16 @@ export default function BackupConfiguration({
               danger
               onClick={() =>
                 showDeleteConfirm({
-                  onOk: () => deleteBackupPolicyReq({ ns, name }),
+                  onOk: async () => {
+                    await deleteBackupReportWrap({ ns: ns!, name: name! });
+                    message.success(
+                      intl.formatMessage({
+                        id: 'OBDashboard.Detail.Overview.DeletedSuccessfully',
+                        defaultMessage: '删除成功！',
+                      }),
+                    );
+                    onDelete?.();
+                  },
                   title: intl.formatMessage({
                     id: 'Dashboard.Detail.Backup.BackupConfiguration.AreYouSureYouWant',
                     defaultMessage: '确定要删除该备份策略吗？',
@@ -287,17 +296,19 @@ export default function BackupConfiguration({
         <Row>
           <Col span={12}>
             <SchduleSelectFormItem
-              disable={!isEdit || !access.obclusterwrite}
+              disable={!isEditing || !access.obclusterwrite}
               form={form}
               scheduleValue={scheduleValue}
             />
           </Col>
           <Col span={12}>
-            <ScheduleTimeFormItem disable={!isEdit || !access.obclusterwrite} />
+            <ScheduleTimeFormItem
+              disable={!isEditing || !access.obclusterwrite}
+            />
           </Col>
           <Col span={12}>
             <BakMethodsList
-              disable={!isEdit || !access.obclusterwrite}
+              disable={!isEditing || !access.obclusterwrite}
               form={form}
             />
           </Col>
@@ -316,7 +327,7 @@ export default function BackupConfiguration({
             </Descriptions>
           </Col>
 
-          {isEdit || !access.obclusterwrite ? (
+          {isEditing || !access.obclusterwrite ? (
             Object.keys(DATE_CONFIG).map((key, index) => (
               <Col span={8} key={index}>
                 <Form.Item label={DATE_CONFIG[key]} name={key}>

diff --git a/ui/src/pages/Tenant/Detail/Backup/BackupJobs.tsx b/ui/src/pages/Tenant/Detail/Backup/BackupJobs.tsx
@@ -1,9 +1,10 @@
+import { Card, Col, Tabs } from 'antd';
+
 import { getBackupJobs } from '@/services/tenant';
 import { intl } from '@/utils/intl';
 import { useParams } from '@umijs/max';
 import { useRequest } from 'ahooks';
 import type { TabsProps } from 'antd';
-import { Card, Col, Tabs } from 'antd';
 import { useState } from 'react';
 import JobTable from './JobTable';
 
@@ -16,6 +17,7 @@ export default function BackupJobs() {
     },
     {
       refreshDeps: [curSelect],
+      pollingInterval: 10000,
     },
   );
 

diff --git a/ui/src/pages/Tenant/Detail/Backup/index.tsx b/ui/src/pages/Tenant/Detail/Backup/index.tsx
@@ -1,12 +1,13 @@
-import EmptyImg from '@/assets/empty.svg';
 import { BACKUP_RESULT_STATUS, REFRESH_TENANT_TIME } from '@/constants';
 import { getBackupPolicy, getTenant } from '@/services/tenant';
-import { intl } from '@/utils/intl';
-import { PageContainer } from '@ant-design/pro-components';
 import { history, useAccess, useParams } from '@umijs/max';
-import { useRequest } from 'ahooks';
 import { Button, Card, Col, Row } from 'antd';
 import { useEffect, useRef, useState } from 'react';
+
+import EmptyImg from '@/assets/empty.svg';
+import { intl } from '@/utils/intl';
+import { PageContainer } from '@ant-design/pro-components';
+import { useRequest } from 'ahooks';
 import BasicInfo from '../Overview/BasicInfo';
 import BackupConfiguration from './BackupConfiguration';
 import BackupJobs from './BackupJobs';
@@ -16,24 +17,19 @@ export default function Backup() {
   const access = useAccess();
   const [backupPolicy, setBackupPolicy] = useState<API.BackupPolicy>();
   const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const [isEditing, setIsEditing] = useState<boolean>(false);
 
   const { refresh: backupPolicyRefresh, loading } = useRequest(
     getBackupPolicy,
     {
       defaultParams: [{ ns: ns!, name: name! }],
+      pollingInterval: REFRESH_TENANT_TIME,
+      ready:
+        !backupPolicy ||
+        (!isEditing && !BACKUP_RESULT_STATUS.includes(backupPolicy.status)),
       onSuccess: ({ successful, data }) => {
         if (successful) {
           setBackupPolicy(data);
-          if (!BACKUP_RESULT_STATUS.includes(data.status)) {
-            if (!timerRef.current) {
-              timerRef.current = setInterval(() => {
-                backupPolicyRefresh();
-              }, REFRESH_TENANT_TIME);
-            }
-          } else if (timerRef.current) {
-            clearInterval(timerRef.current);
-            timerRef.current = null;
-          }
         }
       },
     },
@@ -53,7 +49,7 @@ export default function Backup() {
   }, []);
 
   return (
-    <PageContainer loading={loading}>
+    <PageContainer>
       {!backupPolicy ? (
         <Card
           style={{
@@ -116,6 +112,21 @@ export default function Backup() {
 
           <Col span={24}>
             <BackupConfiguration
+              loading={loading}
+              onDelete={() => {
+                if (timerRef.current) {
+                  clearInterval(timerRef.current);
+                  timerRef.current = null;
+                }
+                setBackupPolicy((prev) => {
+                  if (!prev) {
+                    return prev;
+                  }
+                  return { ...prev, status: 'DELETING' };
+                });
+              }}
+              isEditing={isEditing}
+              setIsEditing={setIsEditing}
               backupPolicy={backupPolicy}
               setBackupPolicy={setBackupPolicy}
               backupPolicyRefresh={backupPolicyRefresh}