Allow user to choose backup target when backup backing image

Signed-off-by: andy.lee <andy.lee@suse.com>

src/models/backingImage.js

@@ -1,4 +1,4 @@
-import { create, deleteBackingImage, query, deleteDisksOnBackingImage, uploadChunk, download, bulkDownload } from '../services/backingImage'
+import { create, deleteBackingImage, query, execAction, deleteDisksOnBackingImage, uploadChunk, download, bulkDownload } from '../services/backingImage'
 import { message, notification } from 'antd'
 import { delay } from 'dva/saga'
 import { wsChanges, updateState } from '../utils/websocket'
@@ -89,6 +89,16 @@ export default {
         payload.sourceType === 'upload' && notification.destroy()
       }
     },
+    *createBackingImageBackup({
+      url,
+      payload,
+    }, { call, put }) {
+      const resp = yield call(execAction, url, payload)
+      if (resp && resp.status === 200) {
+        message.success(`Successfully backup backing image ${payload.backingImageName}`, 5)
+      }
+      yield put({ type: 'query' })
+    },
     *delete({
       payload,
     }, { call, put }) {
@@ -155,7 +165,6 @@ export default {
     *startWS({
       payload,
     }, { select }) {
-      // console.log('🚀 ~ backing images payload:', payload)
       let ws = yield select(state => state.backingImage.ws)
       if (ws) {
         ws.open()

src/models/backup.js

@@ -350,7 +350,7 @@ export default {
       if (volumeName && action.payload && action.payload.data) {
         let backupData = action.payload.data.filter((item) => {
           if (item.backupTargetName) {
-            // after support multiple backup targets feature volumeName is composed by ${volumeName}-${backupTargetName}
+            // after implement multiple backup targets feature, backup volume name in backup page is composed by ${volumeName}-${backupTargetName}
             return volumeName === `${item.volumeName}-${item.backupTargetName}`
           } else {
             return item.volumeName === volumeName

src/router.js

@@ -120,7 +120,6 @@ const Routers = function ({ history, app }) {
             <Route exact path={`${path}instanceManager`} component={instanceManager} />
             <Route exact path={`${path}backingImage`} component={backingImage} />
             <Route exact path={`${path}backupTarget`} component={backupTarget} />
-            {/* <Route exact path={`${path}recurringJob`} component={recurringJob} /> */}
             <Route exact path={`${path}recurringJob`} component={recurringJob} />
             <Route path={`${path}engineimage/:id`} component={engineimageDetail} />
             <Route path={`${path}orphanedData`} component={orphanedData} />

src/routes/backingImage/BackingImageActions.js

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types'
 import { Modal } from 'antd'
 import { DropOption } from '../../components'
 import { hasReadyBackingDisk } from '../../utils/status'
+
 const confirm = Modal.confirm
 
-function actions({ selected, deleteBackingImage, downloadBackingImage }) {
+function actions({ selected, deleteBackingImage, downloadBackingImage, openBackupBackingImageModal }) {
   const handleMenuClick = (event, record) => {
     event.domEvent?.stopPropagation?.()
     switch (event.key) {
@@ -20,15 +21,20 @@ function actions({ selected, deleteBackingImage, downloadBackingImage }) {
       case 'download':
         downloadBackingImage(record)
         break
+      case 'backup': {
+        openBackupBackingImageModal(record)
+        break
+      }
       default:
     }
   }
 
   const disableDownloadAction = !hasReadyBackingDisk(selected)
 
   const availableActions = [
-    { key: 'delete', name: 'Delete' },
     { key: 'download', name: 'Download', disabled: disableDownloadAction, tooltip: disableDownloadAction ? 'Missing disk with ready state' : '' },
+    { key: 'backup', name: 'Backup' },
+    { key: 'delete', name: 'Delete' },
   ]
 
   return (
@@ -42,6 +48,7 @@ actions.propTypes = {
   selected: PropTypes.object,
   deleteBackingImage: PropTypes.func,
   downloadBackingImage: PropTypes.func,
+  openBackupBackingImageModal: PropTypes.func,
 }
 
 export default actions

src/routes/backingImage/BackingImageList.js

@@ -5,10 +5,11 @@ import BackingImageActions from './BackingImageActions'
 import { pagination } from '../../utils/page'
 import { formatMib } from '../../utils/formatter'
 
-function list({ loading, dataSource, deleteBackingImage, showDiskStateMapDetail, rowSelection, downloadBackingImage, height }) {
+function list({ loading, dataSource, openBackupBackingImageModal, deleteBackingImage, showDiskStateMapDetail, rowSelection, downloadBackingImage, height }) {
   const backingImageActionsProps = {
     deleteBackingImage,
     downloadBackingImage,
+    openBackupBackingImageModal,
   }
   const state = (record) => {
     if (record.deletionTimestamp) {
@@ -107,6 +108,7 @@ list.propTypes = {
   dataSource: PropTypes.array,
   deleteBackingImage: PropTypes.func,
   showDiskStateMapDetail: PropTypes.func,
+  openBackupBackingImageModal: PropTypes.func,
   rowSelection: PropTypes.object,
   height: PropTypes.number,
 }

src/routes/backingImage/CreateBackupBackingImageModal.js

@@ -0,0 +1,80 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Form, Select, Icon } from 'antd'
+import { ModalBlur } from '../../components'
+
+const FormItem = Form.Item
+const Option = Select.Option
+
+const formItemLayout = {
+  labelCol: {
+    span: 6,
+  },
+  wrapperCol: {
+    span: 15,
+  },
+}
+
+const modal = ({
+  backingImage,
+  availBackupTargets,
+  visible,
+  onCancel,
+  onOk,
+  form: {
+    getFieldDecorator,
+    getFieldValue,
+  },
+}) => {
+  function handleOk() {
+    const backupTarget = availBackupTargets.find(bkTarget => bkTarget.name === getFieldValue('backupTargetName'))
+    if (backupTarget) {
+      const url = backingImage.actions?.backupBackingImageCreate
+      const payload = {
+        ...backingImage,
+        backingImageName: backingImage.name,
+        backupTargetName: backupTarget.name,
+        backupTargetURL: backupTarget.backupTargetURL,
+      }
+      onOk(url, payload)
+    }
+  }
+
+  const modalOpts = {
+    title: 'Create Backup Backing Image',
+    visible,
+    onCancel,
+    onOk: handleOk,
+  }
+
+  return (
+    <ModalBlur {...modalOpts}>
+      <p type="warning">
+        <Icon style={{ marginRight: '10px' }} type="exclamation-circle" />Choose a backup target to backup <strong>{backingImage.name}</strong> backing image
+      </p>
+      <div style={{ display: 'flex' }}>
+        <FormItem label="Backup Target" style={{ width: '100%' }} {...formItemLayout}>
+          {getFieldDecorator('backupTargetName', {
+            initialValue: availBackupTargets.length > 0 ? availBackupTargets[0].name : '',
+          })(
+          <Select style={{ width: '100%' }}>
+            {availBackupTargets.map(bkTarget => <Option key={bkTarget.name} value={bkTarget.name}>{bkTarget.name}</Option>)}
+          </Select>
+          )}
+        </FormItem>
+      </div>
+    </ModalBlur>
+  )
+}
+
+modal.propTypes = {
+  backingImage: PropTypes.object,
+  availBackupTargets: PropTypes.array,
+  form: PropTypes.object.isRequired,
+  visible: PropTypes.bool,
+  onCancel: PropTypes.func,
+  item: PropTypes.object,
+  onOk: PropTypes.func,
+}
+
+export default Form.create()(modal)

src/routes/backingImage/index.js

@@ -6,9 +6,11 @@ import { Row, Col, Button, Progress, notification } from 'antd'
 import CreateBackingImage from './CreateBackingImage'
 import BackingImageList from './BackingImageList'
 import DiskStateMapDetail from './DiskStateMapDetail'
+import CreateBackupBackingImageModal from './CreateBackupBackingImageModal'
 import { Filter } from '../../components/index'
 import BackingImageBulkActions from './BackingImageBulkActions'
 import queryString from 'query-string'
+import { getAvailBackupTargets } from '../../utils/backupTarget'
 import style from './BackingImage.less'
 import C from '../../utils/constants'
 
@@ -18,6 +20,8 @@ class BackingImage extends React.Component {
     this.state = {
       height: 300,
       message: null,
+      backupBackingImageModalVisible: false,
+      selectedBackingImage: {},
     }
   }
 
@@ -37,6 +41,22 @@ class BackingImage extends React.Component {
     })
   }
 
+  handleBackupBackingImageModalOpen = (record) => {
+    this.setState({
+      ...this.state,
+      backupBackingImageModalVisible: true,
+      selectedBackingImage: record,
+    })
+  }
+
+  handleBackupBackingImageModalClose = () => {
+    this.setState({
+      ...this.state,
+      backupBackingImageModalVisible: false,
+      selectedBackingImage: {},
+    })
+  }
+
   uploadFile = (file, record) => {
     let totalSize = file.size
     this.props.dispatch({
@@ -65,8 +85,9 @@ class BackingImage extends React.Component {
   }
 
   render() {
-    const { dispatch, loading, location } = this.props
-    const { uploadFile } = this
+    const { dispatch, loading, location, backupTarget } = this.props
+    const { uploadFile, handleBackupBackingImageModalOpen, handleBackupBackingImageModalClose } = this
+    const { backupBackingImageModalVisible, selectedBackingImage } = this.state
     const { data: volumeData } = this.props.volume
     const { data, selected, createBackingImageModalVisible, createBackingImageModalKey, diskStateMapDetailModalVisible, diskStateMapDetailModalKey, diskStateMapDeleteDisabled, diskStateMapDeleteLoading, selectedDiskStateMapRows, selectedDiskStateMapRowKeys, selectedRows } = this.props.backingImage
     const { backingImageUploadPercent, backingImageUploadStarted } = this.props.app
@@ -103,6 +124,9 @@ class BackingImage extends React.Component {
           payload: record,
         })
       },
+      openBackupBackingImageModal: (record) => {
+        handleBackupBackingImageModalOpen(record)
+      },
       downloadBackingImage(record) {
         dispatch({
           type: 'backingImage/downloadBackingImage',
@@ -128,6 +152,23 @@ class BackingImage extends React.Component {
       },
     }
 
+    const createBackupBackingImageModalProps = {
+      backingImage: selectedBackingImage,
+      availBackupTargets: getAvailBackupTargets(backupTarget),
+      visible: backupBackingImageModalVisible,
+      onOk(url, payload) {
+        dispatch({
+          type: 'backingImage/createBackingImageBackup',
+          url,
+          payload,
+        })
+        handleBackupBackingImageModalClose()
+      },
+      onCancel() {
+        handleBackupBackingImageModalClose()
+      },
+    }
+
     const addBackingImage = () => {
       dispatch({
         type: 'backingImage/showCreateBackingImageModal',
@@ -315,6 +356,7 @@ class BackingImage extends React.Component {
         <BackingImageList {...backingImageListProps} />
         { createBackingImageModalVisible ? <CreateBackingImage key={createBackingImageModalKey} {...createBackingImageModalProps} /> : ''}
         { diskStateMapDetailModalVisible ? <DiskStateMapDetail key={diskStateMapDetailModalKey} {...diskStateMapDetailModalProps} /> : ''}
+        <CreateBackupBackingImageModal {...createBackupBackingImageModalProps} />
       </div>
     )
   }
@@ -323,10 +365,11 @@ class BackingImage extends React.Component {
 BackingImage.propTypes = {
   app: PropTypes.object,
   backingImage: PropTypes.object,
+  backupTarget: PropTypes.object,
   loading: PropTypes.bool,
   location: PropTypes.object,
   volume: PropTypes.object,
   dispatch: PropTypes.func,
 }
 
-export default connect(({ app, volume, backingImage, loading }) => ({ app, volume, backingImage, loading: loading.models.backingImage }))(BackingImage)
+export default connect(({ app, volume, backupTarget, backingImage, loading }) => ({ app, volume, backupTarget, backingImage, loading: loading.models.backingImage }))(BackingImage)