Add sync backup volume option to allow users to manually synchronize backup volume

src/models/backup.js

@@ -1,4 +1,4 @@
-import { query, queryBackupList, execAction, restore, deleteBackup, createVolume, deleteAllBackups, getNodeTags, getDiskTags, queryTarget } from '../services/backup'
+import { query, queryBackupList, execAction, restore, deleteBackup, syncBackupVolume, syncAllBackupVolumes, createVolume, deleteAllBackups, getNodeTags, getDiskTags, queryTarget } from '../services/backup'
 import { message } from 'antd'
 import { wsChanges } from '../utils/websocket'
 import queryString from 'query-string'
@@ -246,6 +246,23 @@ export default {
       const search = yield select(store => { return store.backup.search })
       yield put({ type: 'query', payload: { ...search } })
     },
+    *syncBackupVolume({
+      payload,
+    }, { call }) {
+      const backVolName = payload.name
+      const resp = yield call(syncBackupVolume, backVolName)
+      if (resp && resp.status === 200) {
+        message.success(`Successfully trigger backup volume ${backVolName} synchronization`, 5)
+      }
+    },
+    *syncAllBackupVolumes({
+      // eslint-disable-next-line no-unused-vars
+      _payload }, { call }) {
+      const resp = yield call(syncAllBackupVolumes)
+      if (resp && resp.status === 200) {
+        message.success('Successfully trigger all backup volumes synchronization', 5)
+      }
+    },
     *bulkCreateVolume({
       payload,
     }, { call, put, select }) {

src/routes/backup/BackupBulkActions.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Button } from 'antd'
 import style from './BackupBulkActions.less'
 
-function bulkActions({ selectedRows, restoreLatestBackup, showBulkCreateDisasterRecoveryVolume }) {
+function bulkActions({ selectedRows, backupVolumes, restoreLatestBackup, showBulkCreateDisasterRecoveryVolume, syncAllBackupVolumes }) {
   const handleClick = (action) => {
     switch (action) {
       case 'restoreLatestBackup':
@@ -12,13 +12,17 @@ function bulkActions({ selectedRows, restoreLatestBackup, showBulkCreateDisaster
       case 'bulkCreateDisasterRecoveryVolume':
         showBulkCreateDisasterRecoveryVolume(selectedRows)
         break
+      case 'syncAllBackupVolumes':
+        syncAllBackupVolumes()
+        break
       default:
     }
   }
 
   const allActions = [
     { key: 'restoreLatestBackup', name: 'Restore Latest Backup', disabled() { return selectedRows.length === 0 || selectedRows.some(record => !record.lastBackupName || (record.messages && record.messages.error)) } },
     { key: 'bulkCreateDisasterRecoveryVolume', name: 'Create Disaster Recovery Volume', disabled() { return selectedRows.length === 0 || selectedRows.some(record => !record.lastBackupName || (record.messages && record.messages.error)) } },
+    { key: 'syncAllBackupVolumes', name: 'Sync All Backup Volumes', disabled() { return backupVolumes.length === 0 } },
   ]
 
   return (
@@ -37,6 +41,7 @@ function bulkActions({ selectedRows, restoreLatestBackup, showBulkCreateDisaster
 
 bulkActions.propTypes = {
   selectedRows: PropTypes.array,
+  backupVolumes: PropTypes.array,
   restoreLatestBackup: PropTypes.func,
   showBulkCreateDisasterRecoveryVolume: PropTypes.func,
 }

src/routes/backup/BackupVolumeList.js

@@ -87,6 +87,8 @@ class List extends React.Component {
       this.props.DeleteAllBackups(record)
     } else if (e.key === 'restoreLatestBackup') {
       this.props.restoreLatestBackup(record)
+    } else if (e.key === 'syncBackupVolume') {
+      this.props.syncBackupVolume(record)
     } else if (e.key === 'backingImageInfo') {
       this.props.showBackingImageInfo(record)
     }
@@ -248,6 +250,7 @@ class List extends React.Component {
             <DropOption menuOptions={[
               { key: 'recovery', name: 'Create Disaster Recovery Volume', disabled: !record.lastBackupName || (record.messages && record.messages.error) },
               { key: 'restoreLatestBackup', name: 'Restore Latest Backup', disabled: !record.lastBackupName || (record.messages && record.messages.error) },
+              { key: 'syncBackupVolume', name: 'Sync Backup Volume' },
               { key: 'deleteAll', name: 'Delete All Backups' },
               { key: 'backingImageInfo', name: 'Backing Image Info', disabled: !hasBackingImage, tooltip: hasBackingImage ? '' : 'No backing image is used' },
             ]}
@@ -313,6 +316,7 @@ List.propTypes = {
   DeleteAllBackups: PropTypes.func,
   dispatch: PropTypes.func,
   restoreLatestBackup: PropTypes.func,
+  syncBackupVolume: PropTypes.func,
   showBackingImageInfo: PropTypes.func,
   showWorkloadsStatusDetail: PropTypes.func,
 }

src/routes/backup/index.js

@@ -82,6 +82,12 @@ function Backup({ host, backup, loading, setting, backingImage, dispatch, locati
     showBackingImageInfo(record) {
       showBackingImageInfo(record)
     },
+    syncBackupVolume(record) {
+      dispatch({
+        type: 'backup/syncBackupVolume',
+        payload: record,
+      })
+    },
     restoreLatestBackup(record) {
       dispatch({
         type: 'backup/restoreLatestBackup',
@@ -202,6 +208,7 @@ function Backup({ host, backup, loading, setting, backingImage, dispatch, locati
 
   const backupBulkActionsProps = {
     selectedRows,
+    backupVolumes,
     restoreLatestBackup() {
       dispatch({
         type: 'backup/queryBackupDetailBulkData',
@@ -219,6 +226,11 @@ function Backup({ host, backup, loading, setting, backingImage, dispatch, locati
         },
       })
     },
+    syncAllBackupVolumes() {
+      dispatch({
+        type: 'backup/syncAllBackupVolumes',
+      })
+    },
   }
 
   const createVolumeStandModalProps = {

src/services/backup.js

@@ -31,6 +31,26 @@ export async function createVolume(params) {
   })
 }
 
+export async function syncBackupVolume(volumeName) {
+  return request({
+    url: `/v1/backupvolumes/${volumeName}?action=backupVolumeSync`,
+    method: 'post',
+    data: {
+      syncBackupVolume: true,
+    },
+  })
+}
+
+export async function syncAllBackupVolumes() {
+  return request({
+    url: '/v1/backupvolumes',
+    method: 'put',
+    data: {
+      syncAllBackupVolumes: true,
+    },
+  })
+}
+
 export async function execAction(url, params) {
   return request({
     url,