feat(api, cluster/backup): support backup tasks cancel (#137)

Author: Yuiham

apps/main/[3]cluster/[1]instances/[-2]_clusterId/[5]backup/components/BackupTable/index.tsx

@@ -16,6 +16,7 @@ import {
 } from '@/api/model'
 import {
   invalidateClusterBackups,
+  useCancelClusterBackup,
   useDeleteClusterBackup,
   useQueryClusterBackups,
 } from '@/api/hooks/cluster'
@@ -122,9 +123,9 @@ function useTableColumn({ cluster }: { cluster: ClusterInfo }) {
   const clusterId = cluster.clusterId!
   const { t, i18n } = useI18n()
   const history = useHistory()
+  const queryClient = useQueryClient()
 
   const deleteBackup = useDeleteClusterBackup()
-  const queryClient = useQueryClient()
   const deleteAction = useCallback(
     (backupId) =>
       deleteBackup.mutateAsync(
@@ -147,6 +148,29 @@ function useTableColumn({ cluster }: { cluster: ClusterInfo }) {
     [queryClient, deleteBackup.mutateAsync, clusterId]
   )
 
+  const cancelBackup = useCancelClusterBackup()
+  const cancelAction = useCallback(
+    (backupId) =>
+      cancelBackup.mutateAsync(
+        {
+          payload: {
+            backupId,
+            clusterId,
+          },
+          options: {
+            successMessage: t('cancel.message.success'),
+            errorMessage: t('cancel.message.failed'),
+          },
+        },
+        {
+          onSettled() {
+            return invalidateClusterBackups(queryClient, clusterId)
+          },
+        }
+      ),
+    [queryClient, cancelBackup.mutateAsync, clusterId]
+  )
+
   const restoreAction = useCallback(
     (backup: ClusterBackupItem) => {
       history.push({
@@ -158,15 +182,16 @@ function useTableColumn({ cluster }: { cluster: ClusterInfo }) {
   )
 
   return useMemo(
-    () => getColumns(t, restoreAction, deleteAction),
-    [i18n.language, deleteAction]
+    () => getColumns(t, restoreAction, deleteAction, cancelAction),
+    [i18n.language, deleteAction, cancelAction, restoreAction]
   )
 }
 
 function getColumns(
   t: TFunction<''>,
   restoreAction: (backup: ClusterBackupItem) => any,
-  deleteAction: (backupId: string) => any
+  deleteAction: (backupId: string) => any,
+  cancelAction: (backupId: string) => any
 ): ProColumns<ClusterBackupItem>[] {
   return [
     {
@@ -280,8 +305,24 @@ function getColumns(
         const deleteDisabled =
           record.status !== BackupStatus.success &&
           record.status !== BackupStatus.failed
+        const cancelDisabled =
+          record.status !== BackupStatus.initializing &&
+          record.status !== BackupStatus.processing
 
         return [
+          cancelDisabled ? null : (
+            <IntlPopConfirm
+              key="cancel"
+              placement="topRight"
+              title={t('cancel.confirm')}
+              icon={<QuestionCircleOutlined />}
+              onConfirm={async () => {
+                await cancelAction(record.id!)
+              }}
+            >
+              <a>{t('actions.cancel')}</a>
+            </IntlPopConfirm>
+          ),
           restoreDisabled ? (
             <span className="disabled-text-btn" key="restore">
               {t('actions.restore')}

apps/main/[3]cluster/[1]instances/[-2]_clusterId/[5]backup/components/BackupTable/translations/en.yaml

@@ -4,10 +4,16 @@ delete:
   message:
     success: The backup files are deleted
     failed: Failed to delete the backup files
+cancel:
+  confirm: Are you sure you want to cancel this backup?
+  message:
+    success: The backup is canceled
+    failed: Failed to cancel the backup
 restore:
   confirm: Are you sure you want to restore the cluster from this backup?
 columns:
   actions: Actions
 actions:
   restore: Restore
   delete: Delete
+  cancel: Cancel

apps/main/[3]cluster/[1]instances/[-2]_clusterId/[5]backup/components/BackupTable/translations/zh.yaml

@@ -4,10 +4,16 @@ delete:
   message:
     success: 备份文件删除成功
     failed: 备份文件删除失败
+cancel:
+  confirm: 确认取消该备份吗?
+  message:
+    success: 备份取消成功
+    failed: 备份取消失败
 restore:
   confirm: 确认使用该备份恢复集群吗?
 columns:
   actions: 操作
 actions:
   restore: 恢复
   delete: 删除
+  cancel: 取消

external/api/swagger.json

@@ -173,7 +173,7 @@
         "description": "cancel backup",
         "consumes": ["application/json"],
         "produces": ["application/json"],
-        "tags": ["cancel cluster backup"],
+        "tags": ["cluster backup"],
         "summary": "cancel backup",
         "parameters": [
           {

src/api/hooks/cluster.ts

@@ -7,6 +7,7 @@ import {
   RequestBackupCreate,
   RequestBackupRestore,
   RequestBackupStrategyUpdate,
+  RequestBackupCancel,
   RequestClusterCreate,
   RequestClusterDataReplicationCreate,
   RequestClusterDataReplicationUpdate,
@@ -384,6 +385,19 @@ export function useRestoreClusterBackup() {
   return useMutation(restoreClusterBackup)
 }
 
+/**
+ * Cancel a cluster backup task
+ */
+const cancelClusterBackup = ({
+  payload,
+  options,
+}: PayloadWithOptions<RequestBackupCancel>) =>
+  APIS.ClusterBackups.backupsCancelPost(payload, options)
+
+export function useCancelClusterBackup() {
+  return useMutation(cancelClusterBackup)
+}
+
 /**
  * Cluster Dashboard
  */

src/api/model/index.ts

@@ -9,6 +9,7 @@ import {
   ClusterQueryClusterDetailResp,
   ClusterRestoreNewClusterReq,
   ClusterSaveBackupStrategyReq,
+  ClusterCancelBackupReq,
   ClusterUpdateClusterParametersReq,
   ControllerCommonResult,
   ControllerResultWithPage,
@@ -102,6 +103,7 @@ export type UserLoginRequest = MessageLoginReq
 export type RequestBackupCreate = ClusterBackupClusterDataReq
 export type RequestBackupStrategyUpdate = ClusterSaveBackupStrategyReq
 export type RequestBackupRestore = ClusterRestoreNewClusterReq
+export type RequestBackupCancel = ClusterCancelBackupReq
 export type RequestTransportExport = MessageDataExportReq
 export type RequestTransportImport = MessageDataImportReq
 export type RequestClusterCreate = ClusterCreateClusterReq