feat: add update backup target action

src/models/backup.js

@@ -363,14 +363,13 @@ export default {
       }
     },
     updateBackgroundBackups(state, action) {
-      let volumeName = getBackupVolumeName(state.search)
-      if (volumeName && action.payload && action.payload.data) {
-        const backupData = action.payload.data.filter((item) => {
-          return item.volumeName === volumeName
-        })
+      const volumeId = state.search?.keyword
+      const targetBackupVolume = state.backupVolumes.find((item) => item.name === volumeId) || {}
+      if (targetBackupVolume?.volumeName && action.payload?.data) {
+        const backupData = action.payload.data.filter((item) => item.volumeName === targetBackupVolume?.volumeName)
         return {
           ...state,
-          backupData: backupData || [],
+          backupData,
         }
       }
       return {

src/models/volume.js

@@ -51,6 +51,8 @@ export default {
     bulkExpandVolumeModalVisible: false,
     updateBulkReplicaCountModalVisible: false,
     customColumnVisible: false,
+    updateBackupTargetModalVisible: false,
+    updateBulkBackupTargetModalVisible: false,
     volumeCloneModalVisible: false,
     updateDataLocalityModalVisible: false,
     updateSnapshotMaxCountModalVisible: false,
@@ -77,6 +79,7 @@ export default {
     recurringJobList: [],
     softAntiAffinityKey: '',
     updateReplicaSoftAntiAffinityVisible: false,
+    updateBackupTargetModalKey: Math.random(),
     changeVolumeModalKey: Math.random(),
     bulkChangeVolumeModalKey: Math.random(),
     bulkExpandVolumeModalKey: Math.random(),
@@ -93,6 +96,7 @@ export default {
     bulkAttachHostModalKey: Math.random(),
     engineUpgradeModaKey: Math.random(),
     volumeCloneModalKey: Math.random(),
+    updateBulkBackupTargetModalKey: Math.random(),
     bulkEngineUpgradeModalKey: Math.random(),
     expansionVolumeSizeModalKey: Math.random(),
     updateReplicaCountModalKey: Math.random(),
@@ -407,6 +411,20 @@ export default {
       }
       yield put({ type: 'query' })
     },
+    *backupTargetUpdate({
+      payload,
+    }, { call, put }) {
+      yield put({ type: 'hideUpdateBackupTargetModal' })
+      yield call(execAction, payload.url, payload.params)
+      yield put({ type: 'query' })
+    },
+    *bulkBackupTargetUpdate({
+      payload,
+    }, { call, put }) {
+      yield put({ type: 'hideUpdateBulkBackupTargetModal' })
+      yield payload.urls.map(url => call(execAction, url, payload.params))
+      yield put({ type: 'query' })
+    },
     *accessModeUpdate({
       payload,
     }, { call, put }) {
@@ -919,6 +937,12 @@ export default {
     showUpdateAccessMode(state, action) {
       return { ...state, ...action.payload, updateAccessModeModalVisible: true, updateAccessModeModalKey: Math.random() }
     },
+    showUpdateBackupTarget(state, action) {
+      return { ...state, ...action.payload, updateBackupTargetModalVisible: true, updateBackupTargetModalKey: Math.random() }
+    },
+    showUpdateBulkBackupTarget(state, action) {
+      return { ...state, ...action.payload, updateBulkBackupTargetModalVisible: true, updateBulkBackupTargetModalKey: Math.random() }
+    },
     showUpdateBulkReplicaCountModal(state, action) {
       return { ...state, ...action.payload, updateBulkReplicaCountModalVisible: true, updateBulkReplicaCountModalKey: Math.random() }
     },
@@ -952,6 +976,12 @@ export default {
     hideUpdateAccessModeModal(state) {
       return { ...state, updateAccessModeModalVisible: false }
     },
+    hideUpdateBackupTargetModal(state) {
+      return { ...state, updateBackupTargetModalVisible: false }
+    },
+    hideUpdateBulkBackupTargetModal(state) {
+      return { ...state, updateBulkBackupTargetModalVisible: false }
+    },
     showBulkExpandVolumeModal(state, action) {
       return { ...state, bulkExpandVolumeModalVisible: true, selectedRows: action.payload, bulkExpandVolumeModalKey: Math.random() }
     },

src/routes/backup/BackupDetail.js

@@ -22,15 +22,15 @@ function Backup({ backup, volume, setting, backingImage, loading, location, disp
   const defaultReplicaCountSetting = settings.find(s => s.id === 'default-replica-count')
   const defaultNumberOfReplicas = defaultReplicaCountSetting !== undefined ? parseInt(defaultReplicaCountSetting.value, 10) : 3
 
-  const { volumeName } = queryString.parse(location.search)
-  const currentBackUp = backupVolumes.find((item) => item.volumeName === volumeName) || {}
+  const { keyword } = queryString.parse(location.search)
+  const currentBackUp = backupVolumes.find(bkVol => bkVol.name === keyword) || {}
   const v1DataEngineEnabledSetting = settings.find(s => s.id === 'v1-data-engine')
   const v2DataEngineEnabledSetting = settings.find(s => s.id === 'v2-data-engine')
   const v1DataEngineEnabled = v1DataEngineEnabledSetting?.value === 'true'
   const v2DataEngineEnabled = v2DataEngineEnabledSetting?.value === 'true'
 
-  const backups = volumeName ? backupData.filter(bk => bk.volumeName === volumeName) : backupData
-  sortBackups(backupData)
+  const backups = currentBackUp ? backupData.filter(bk => bk.volumeName === currentBackUp.volumeName) : backupData
+  sortBackups(backups)
 
   const backupProps = {
     backup: backups,
@@ -64,7 +64,7 @@ function Backup({ backup, volume, setting, backingImage, loading, location, disp
       dispatch({
         type: 'backup/delete',
         payload: {
-          volumeName,
+          volumeName: currentBackUp.volumeName,
           name: record.id,
           listUrl,
           ...queryString.parse(location.search),
@@ -139,7 +139,7 @@ function Backup({ backup, volume, setting, backingImage, loading, location, disp
       onOk() {
         dispatch({
           type: 'backup/deleteAllBackups',
-          payload: volumeName,
+          payload: currentBackUp.id,
         })
       },
     })

src/routes/backup/BackupVolume.js

@@ -88,11 +88,7 @@ function BackupVolume({ backup, loading, setting, backingImage, dispatch, locati
         payload: record,
       })
     },
-    DeleteAllBackups(record) {
-      // dispatch({
-      //   type: 'backup/CreateStandVolume',
-      //   payload: record,
-      // })
+    deleteAllBackups(record) {
       showDeleteConfirm(record)
     },
     showBackingImageInfo(record) {

src/routes/backup/BackupVolumeList.js

@@ -84,7 +84,7 @@ class List extends React.Component {
     if (e.key === 'recovery') {
       this.props.Create(record)
     } else if (e.key === 'deleteAll') {
-      this.props.DeleteAllBackups(record)
+      this.props.deleteAllBackups(record)
     } else if (e.key === 'restoreLatestBackup') {
       this.props.restoreLatestBackup(record)
     } else if (e.key === 'syncBackupVolume') {
@@ -117,7 +117,6 @@ class List extends React.Component {
                     search: queryString.stringify({
                       field: 'name',
                       keyword: record.name,
-                      volumeName: record.volumeName
                     }),
                   }}>
                   {id}
@@ -326,7 +325,7 @@ List.propTypes = {
   onSorterChange: PropTypes.func,
   Create: PropTypes.func,
   onRowClick: PropTypes.func,
-  DeleteAllBackups: PropTypes.func,
+  deleteAllBackups: PropTypes.func,
   dispatch: PropTypes.func,
   restoreLatestBackup: PropTypes.func,
   syncBackupVolume: PropTypes.func,

src/routes/volume/UpdateBackupTargetModal.js

@@ -0,0 +1,73 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Form, Select } from 'antd'
+import { ModalBlur } from '../../components'
+const FormItem = Form.Item
+const { Option } = Select
+
+const formItemLayout = {
+  labelCol: {
+    span: 6,
+  },
+  wrapperCol: {
+    span: 16,
+  },
+}
+
+const modal = ({
+  item,
+  backupTargets,
+  visible,
+  onCancel,
+  onOk,
+  form: {
+    getFieldDecorator,
+    validateFields,
+    getFieldsValue,
+  },
+}) => {
+  function handleOk() {
+    validateFields((errors) => {
+      if (errors) {
+        return
+      }
+      const data = { ...getFieldsValue() }
+      const url = item?.actions?.updateBackupTargetName
+      onOk(data, url)
+    })
+  }
+
+  const modalOpts = {
+    title: 'Update Backup Target',
+    visible,
+    onCancel,
+    onOk: handleOk,
+  }
+  if (!item) {
+    return null
+  }
+  return (
+    <ModalBlur {...modalOpts}>
+      <Form layout="horizontal">
+        <FormItem label="BackupTarget" {...formItemLayout}>
+        {getFieldDecorator('backupTargetName', {
+          initialValue: backupTargets.find(bt => bt.name === item.backupTargetName)?.name || 'default',
+        })(<Select>
+            { backupTargets.map(bt => <Option key={bt.name} disabled={bt.available === false} value={bt.name}>{bt.name}</Option>)}
+          </Select>)}
+        </FormItem>
+      </Form>
+    </ModalBlur>
+  )
+}
+
+modal.propTypes = {
+  form: PropTypes.object.isRequired,
+  visible: PropTypes.bool,
+  backupTargets: PropTypes.array,
+  onCancel: PropTypes.func,
+  item: PropTypes.object,
+  onOk: PropTypes.func,
+}
+
+export default Form.create()(modal)

src/routes/volume/UpdateBulkBackupTargetModal.js

@@ -0,0 +1,76 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Form, Select } from 'antd'
+import { ModalBlur } from '../../components'
+const FormItem = Form.Item
+const { Option } = Select
+
+const formItemLayout = {
+  labelCol: {
+    span: 6,
+  },
+  wrapperCol: {
+    span: 16,
+  },
+}
+
+const modal = ({
+  items,
+  backupTargets,
+  visible,
+  onCancel,
+  onOk,
+  form: {
+    getFieldDecorator,
+    validateFields,
+    getFieldsValue,
+  },
+}) => {
+  function handleOk() {
+    validateFields((errors) => {
+      if (errors) {
+        return
+      }
+      const data = { ...getFieldsValue() }
+      const urls = items.reduce((final, item) => {
+        final.push(item.actions.updateBackupTargetName)
+        return final
+      }, [])
+      onOk(data, urls)
+    })
+  }
+
+  const modalOpts = {
+    title: 'Update Backup Target',
+    visible,
+    onCancel,
+    onOk: handleOk,
+  }
+  if (!items) {
+    return null
+  }
+  return (
+    <ModalBlur {...modalOpts}>
+      <Form layout="horizontal">
+        <FormItem label="BackupTarget" {...formItemLayout}>
+        {getFieldDecorator('backupTargetName', {
+          initialValue: 'default',
+        })(<Select>
+            { backupTargets.map(bt => <Option key={bt.name} disabled={bt.available === false} value={bt.name}>{bt.name}</Option>)}
+          </Select>)}
+        </FormItem>
+      </Form>
+    </ModalBlur>
+  )
+}
+
+modal.propTypes = {
+  form: PropTypes.object.isRequired,
+  visible: PropTypes.bool,
+  backupTargets: PropTypes.array,
+  onCancel: PropTypes.func,
+  items: PropTypes.array,
+  onOk: PropTypes.func,
+}
+
+export default Form.create()(modal)

src/routes/volume/VolumeActions.js

@@ -25,6 +25,7 @@ function actions({
   changeVolume,
   showUpdateDataLocality,
   showUpdateAccessMode,
+  showUpdateBackupTarget,
   showUpdateReplicaAutoBalanceModal,
   showUnmapMarkSnapChainRemovedModal,
   engineUpgradePerNodeLimit,
@@ -128,6 +129,9 @@ function actions({
       case 'updateAccessMode':
         showUpdateAccessMode(record)
         break
+      case 'updateBackupTargetName':
+        showUpdateBackupTarget(record)
+        break
       case 'pvAndpvcCreate':
         createPVAndPVC(record)
         break
@@ -223,6 +227,7 @@ function actions({
     { key: 'updateDataLocality', name: 'Update Data Locality', disabled: !canUpdateDataLocality() || upgradingEngine() },
     { key: 'updateSnapshotDataIntegrity', name: 'Snapshot Data Integrity', disabled: false },
     { key: 'updateAccessMode', name: 'Update Access Mode', disabled: (selected.kubernetesStatus && selected.kubernetesStatus.pvStatus) || !canUpdateAccessMode() },
+    { key: 'updateBackupTargetName', name: 'Update Backup Target' },
     { key: 'updateReplicaAutoBalance', name: 'Update Replicas Auto Balance', disabled: !canUpdateReplicaAutoBalance() },
     { key: 'updateUnmapMarkSnapChainRemoved', name: 'Allow snapshots removal during trim', disabled: false },
     { key: 'updateReplicaSoftAntiAffinity', name: 'Update Replica Soft Anti Affinity', disabled: false },

src/routes/volume/VolumeBulkActions.js

@@ -28,6 +28,7 @@ function bulkActions({
   backupTargetMessage,
   showBulkUnmapMarkSnapChainRemovedModal,
   trimBulkFilesystem,
+  showUpdateBulkBackupTarget,
   showUpdateBulkSnapshotDataIntegrityModal,
   showUpdateReplicaSoftAntiAffinityModal,
   showUpdateReplicaZoneSoftAntiAffinityModal,
@@ -116,6 +117,9 @@ function bulkActions({
       case 'updateBulkAccessMode':
         showUpdateBulkAccessMode(selectedRows)
         break
+      case 'updateBulkBackupTarget':
+        showUpdateBulkBackupTarget(selectedRows)
+        break
       case 'createPVAndPVC':
         createPVAndPVC(selectedRows)
         break
@@ -200,6 +204,7 @@ function bulkActions({
     { key: 'updateBulkDataLocality', name: 'Update Data Locality', disabled() { return selectedRows.length === 0 || isHasStandy() || disableUpdateBulkDataLocality() || upgradingEngine() } },
     { key: 'updateSnapshotDataIntegrity', name: 'Snapshot Data Integrity', disabled() { return selectedRows.length === 0 } },
     { key: 'updateBulkAccessMode', name: 'Update Access Mode', disabled() { return selectedRows.length === 0 || isHasStandy() || disableUpdateAccessMode() } },
+    { key: 'updateBulkBackupTarget', name: 'Update Backup Target', disabled() { return selectedRows.length === 0 } },
     { key: 'updateReplicaAutoBalance', name: 'Update Replicas Auto Balance', disabled() { return selectedRows.length === 0 || disableUpdateReplicaAutoBalance() } },
     { key: 'createPVAndPVC', name: 'Create PV/PVC', disabled() { return selectedRows.length === 0 || isHasStandy() || hasVolumeRestoring() || isHasPVC() || isFaulted() || !hasAction('pvCreate') || !hasAction('pvcCreate') } },
     { key: 'bulkChangeVolume', name: 'Activate Disaster Recovery Volume', disabled() { return selectedRows.length === 0 || selectedRows.some((item) => !item.standby) } },
@@ -256,6 +261,7 @@ bulkActions.propTypes = {
   showBulkCloneVolume: PropTypes.func,
   showUpdateBulkReplicaCount: PropTypes.func,
   showUpdateBulkDataLocality: PropTypes.func,
+  showUpdateBulkBackupTarget: PropTypes.func,
   showUpdateBulkAccessMode: PropTypes.func,
   showUpdateBulkSnapshotDataIntegrityModal: PropTypes.func,
   showUpdateReplicaAutoBalanceModal: PropTypes.func,