allow input secret/secretNamespace when restore bbi

Signed-off-by: andy.lee <andy.lee@suse.com>
longhorn · Jul 10, 2024 · b5d8515 · b5d8515
1 parent 4ebb877
commit b5d8515
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 27 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -33,7 +33,6 @@
     "linebreak-style": [0 ,"error", "windows"],
     "react/no-access-state-in-setstate": 0,
     "react/jsx-first-prop-new-line": 0,
-    "react/jsx-props-no-spreading": 0,
     "import/prefer-default-export": 0,
     "react/jsx-filename-extension": 0,
     "react/jsx-props-no-spreading": 0,

diff --git a/src/models/backingImage.js b/src/models/backingImage.js
@@ -3,7 +3,7 @@ import {
   deleteBackingImage,
   deleteBackupBackingImage,
   execAction,
-  queryBbiList,
+  queryBackupBackingImageList,
   query,
   deleteDisksOnBackingImage,
   uploadChunk,
@@ -27,6 +27,7 @@ export default {
     data: [],
     bbiData: [], // backupBackingImage data
     selected: {},
+    bbiSelected: {},
     selectedRows: [],
     nodeTags: [],
     diskTags: [],
@@ -37,6 +38,7 @@ export default {
     createBackingImageModalKey: Math.random(),
     diskStateMapDetailModalVisible: false,
     diskStateMapDetailModalKey: Math.random(),
+    restoreBackupBackingImageModalVisible: false,
     diskStateMapDeleteDisabled: true,
     diskStateMapDeleteLoading: false,
     selectedDiskStateMapRows: [],
@@ -73,7 +75,7 @@ export default {
       // eslint-disable-next-line no-unused-vars
       _payload,
     }, { call, put }) {
-      const resp = yield call(queryBbiList)
+      const resp = yield call(queryBackupBackingImageList)
       if (resp && resp.data) {
         const bbiData = resp.data
         sortByCreatedTime(bbiData)
@@ -148,11 +150,17 @@ export default {
     *restoreBackingImage({
       payload,
     }, { call, put }) {
-      const resp = yield call(execAction, payload.actions.backupBackingImageRestore)
-      if (resp && resp.status === 200) {
-        message.success(`Successfully restore ${payload.name} backing image`)
+      yield put({ type: 'hideRestoreBackingImageModal' })
+      const restoreUrl = payload.item?.actions?.backupBackingImageRestore
+      if (restoreUrl) {
+        const resp = yield call(execAction, restoreUrl, payload.params)
+        if (resp && resp.status === 200) {
+          message.success(`Successfully restore ${payload.item.name} backing image`)
+        }
+        yield put({ type: 'query' })
+      } else {
+        message.error('Missing restore backup backing image url')
       }
-      yield put({ type: 'query' })
     },
     *deleteBackupBackingImage({
       payload,
@@ -186,7 +194,7 @@ export default {
       if (payload && payload.length > 0) {
         yield payload.map(item => call(deleteBackupBackingImage, item))
       }
-      yield delay(2000)
+      yield delay(3000)
       yield put({ type: 'queryBackupBackingImage' })
     },
     *bulkBackup({
@@ -200,7 +208,7 @@ export default {
           }
         }
       }
-      yield delay(4000)
+      yield delay(3000)
       yield put({ type: 'queryBackupBackingImage' })
     },
     *bulkDownload({
@@ -321,6 +329,9 @@ export default {
         }
       }
     },
+    showRestoreBackingImage(state, action) {
+      return { ...state, ...action.payload, restoreBackupBackingImageModalVisible: true }
+    },
     showCreateBackingImageModal(state, action) {
       return { ...state, ...action.payload, createBackingImageModalVisible: true, createBackingImageModalKey: Math.random() }
     },
@@ -331,6 +342,9 @@ export default {
         selected: action.payload,
       }
     },
+    hideRestoreBackingImageModal(state, action) {
+      return { ...state, ...action.payload, restoreBackupBackingImageModalVisible: false, bbiSelected: {} }
+    },
     hideCreateBackingImageModal(state) {
       return { ...state, createBackingImageModalVisible: false }
     },

diff --git a/src/routes/backingImage/BackingImageBulkActions.js b/src/routes/backingImage/BackingImageBulkActions.js
@@ -90,7 +90,7 @@ function bulkActions({ selectedRows, deleteBackingImages, downloadSelectedBackin
   const allActions = [
     { key: 'delete', name: 'Delete', disabled() { return selectedRows.length === 0 } },
     { key: 'download', name: 'Download', disabled() { return (selectedRows.length === 0 || selectedRows.every(row => !hasReadyBackingDisk(row))) } },
-    { key: 'backup', name: 'Backup', disabled() { return selectedRows.length === 0 } },
+    { key: 'backup', name: 'Backup', disabled() { return selectedRows.length === 0 || selectedRows.every(row => !hasReadyBackingDisk(row)) } },
   ]
 
   return (

diff --git a/src/routes/backingImage/RestoreBackupBackingImageModal.js b/src/routes/backingImage/RestoreBackupBackingImageModal.js
@@ -0,0 +1,76 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Form, Input } from 'antd'
+import { ModalBlur } from '../../components'
+
+const FormItem = Form.Item
+
+const formItemLayout = {
+  labelCol: {
+    span: 10,
+  },
+  wrapperCol: {
+    span: 12,
+  },
+}
+
+const modal = ({
+  item,
+  visible,
+  onOk,
+  onCancel,
+  form: {
+    getFieldDecorator,
+    validateFields,
+    getFieldValue,
+  },
+}) => {
+  function handleOk() {
+    validateFields((errors) => {
+      if (errors) {
+        return
+      }
+      const data = {
+        secret: getFieldValue('secret') || '',
+        secretNamespace: getFieldValue('secretNamespace') || '',
+      }
+      onOk(item, data)
+    })
+  }
+
+  const modalOpts = {
+    title: `Restore ${item.name} Backup Backing Image`,
+    visible,
+    onCancel,
+    onOk: handleOk,
+  }
+  if (!item) {
+    return null
+  }
+  return (
+    <ModalBlur {...modalOpts}>
+      <Form layout="horizontal">
+         <FormItem label="Secret" hasFeedback {...formItemLayout}>
+              {getFieldDecorator('secret', {
+                initialValue: '',
+              })(<Input />)}
+            </FormItem>
+            <FormItem label="Secret Namespace" hasFeedback {...formItemLayout}>
+              {getFieldDecorator('secretNamespace', {
+                initialValue: '',
+              })(<Input />)}
+            </FormItem>
+      </Form>
+    </ModalBlur>
+  )
+}
+
+modal.propTypes = {
+  form: PropTypes.object.isRequired,
+  visible: PropTypes.bool,
+  onCancel: PropTypes.func,
+  item: PropTypes.object,
+  onOk: PropTypes.func,
+}
+
+export default Form.create()(modal)
diff --git a/src/routes/backingImage/index.js b/src/routes/backingImage/index.js
@@ -10,6 +10,7 @@ import { Filter } from '../../components/index'
 import BackingImageBulkActions from './BackingImageBulkActions'
 import UpdateMinCopiesCount from './UpdateMinCopiesCount'
 import BackupBackingImageBulkActions from './BackupBackingImageBulkActions'
+import RestoreBackupBackingImageModal from './RestoreBackupBackingImageModal'
 import style from './BackingImage.less'
 
 const filterBackingImage = (data, field, value) => {
@@ -21,9 +22,11 @@ const filterBackingImage = (data, field, value) => {
     case 'name':
     case 'uuid':
     case 'minNumberOfCopies':
+      backingImages = backingImages.filter((image) => (value ? image[field].toString().includes(value.toString().trim()) : true))
+      break
     case 'diskSelector':
     case 'nodeSelector':
-      backingImages = backingImages.filter((image) => (value ? image[field].toString().includes(value.toString().trim()) : true))
+      backingImages = backingImages.filter((image) => (value ? image[field]?.toString().includes(value.trim()) || false : true))
       break
     case 'sourceType':
       backingImages = backingImages.filter((image) => (value ? image.sourceType === value.trim() : true))
@@ -132,10 +135,12 @@ class BackingImage extends React.Component {
       bbiSearchField,
       bbiSearchValue,
       selected,
+      bbiSelected,
       nodeTags,
       diskTags,
       tagsLoading,
       minCopiesCountModalVisible,
+      restoreBackupBackingImageModalVisible,
       createBackingImageModalVisible,
       createBackingImageModalKey,
       diskStateMapDetailModalVisible,
@@ -169,8 +174,10 @@ class BackingImage extends React.Component {
       },
       restoreBackingImage(record) {
         dispatch({
-          type: 'backingImage/restoreBackingImage',
-          payload: record,
+          type: 'backingImage/showRestoreBackingImage',
+          payload: {
+            bbiSelected: record,
+          },
         })
       },
       rowSelection: {
@@ -286,6 +293,25 @@ class BackingImage extends React.Component {
       },
     }
 
+    const restoreBBiModalProps = {
+      item: bbiSelected,
+      visible: restoreBackupBackingImageModalVisible,
+      onOk(item, params) {
+        dispatch({
+          type: 'backingImage/restoreBackingImage',
+          payload: {
+            item,
+            params,
+          },
+        })
+      },
+      onCancel() {
+        dispatch({
+          type: 'backingImage/hideRestoreBackingImageModal',
+        })
+      },
+    }
+
     const diskStateMapDetailModalProps = {
       selected,
       backingImages,
@@ -475,6 +501,7 @@ class BackingImage extends React.Component {
             <span>Uploading</span>
           </div>
         )}
+        { restoreBackupBackingImageModalVisible && <RestoreBackupBackingImageModal {...restoreBBiModalProps} />}
         { minCopiesCountModalVisible && <UpdateMinCopiesCount {...minCopiesCountProps} />}
         { createBackingImageModalVisible ? <CreateBackingImage key={createBackingImageModalKey} {...createBackingImageModalProps} /> : ''}
         { diskStateMapDetailModalVisible ? <DiskStateMapDetail key={diskStateMapDetailModalKey} {...diskStateMapDetailModalProps} /> : ''}

diff --git a/src/routes/systemBackups/index.js b/src/routes/systemBackups/index.js
@@ -238,7 +238,7 @@ class SystemBackups extends React.Component {
           <SystemBackupsList {...systemBackupsListProps} />
         </div>
         <div className={style.systemRestores}>
-          <Icon type="file-done" className="ant-breadcrumb anticon" style={{ display: 'flex', alignItems: 'center' }} />
+          <Icon type="file-done" />
           <span style={{ marginLeft: '4px' }}>System Restore</span>
         </div>
         <div id="systemRestoresTable" style={{ height: '43%', padding: '8px 12px 0px' }}>

diff --git a/src/services/backingImage.js b/src/services/backingImage.js
@@ -17,7 +17,7 @@ export async function execAction(url, params) {
   })
 }
 
-export async function queryBbiList() {
+export async function queryBackupBackingImageList() {
   return request({
     url: '/v1/backupbackingimages',
     method: 'get',

diff --git a/src/utils/dataDependency.js b/src/utils/dataDependency.js
@@ -76,9 +76,6 @@ const dependency = {
     }, {
       ns: 'setting',
       key: 'settings',
-    }, {
-      ns: 'backup',
-      key: 'backup',
     }],
   },
   settings: {
@@ -170,7 +167,7 @@ const httpDataDependency = {
   '/volume': ['volume', 'host', 'setting', 'backingImage', 'engineimage', 'recurringJob', 'backup'],
   '/engineimage': ['engineimage'],
   '/recurringJob': ['recurringJob'],
-  '/backingImage': ['volume', 'backingImage', 'setting', 'backup'],
+  '/backingImage': ['volume', 'backingImage', 'setting'],
   '/setting': ['setting'],
   '/backup': ['host', 'setting', 'backingImage', 'backup'],
   '/instanceManager': ['volume', 'instanceManager'],
@@ -186,7 +183,6 @@ export function getDataDependency(pathName) {
     }
     return false
   })
-  // console.log('🚀 ~ keys ~ keys:', keys)
 
   if (keys && keys.length === 1) {
     let modal = dependency[keys[0]]

diff --git a/src/utils/websocket.js b/src/utils/websocket.js
@@ -20,7 +20,6 @@ export function constructWebsocketURL(type, period) {
 }
 
 export function wsChanges(dispatch, type, period, ns, search) {
-  console.log('🚀 ~ wsChanges ~ type:', type)
   const url = constructWebsocketURL(type, period)
   const options = {
     timeout: 4000,
@@ -77,9 +76,6 @@ export function wsChanges(dispatch, type, period, ns, search) {
   }, 30000)
   // TODO: can refactor this to use a single event listener and dispatch to the correct action
   rws.addEventListener('message', (msg) => {
-    if (ns === 'backingImage') {
-      console.log('message rws.addEventListener ~ type =', backupType, ' msg:', JSON.parse(msg.data))
-    }
     recentWrite = true
     if (ns === 'backup') {
       if (backupType === 'backupvolumes') {
@@ -95,16 +91,13 @@ export function wsChanges(dispatch, type, period, ns, search) {
         })
       }
     } else if (ns === 'backingImage') {
-      console.log('message data ns:', ns, 'backupType:', backupType)
       if (backupType === 'backingimages') {
-        console.log('message backupType === backingimages call ns/updateBackground', JSON.parse(msg.data).data)
         dispatch({
           type: `${ns}/updateBackground`,
           payload: JSON.parse(msg.data),
         })
       }
       if (backupType === 'backupbackingimages') {
-        console.log('message backupType === backupbackingimages call ns/updateBackgroundBBi', JSON.parse(msg.data).data)
         dispatch({
           type: `${ns}/updateBackgroundBBi`,
           payload: JSON.parse(msg.data),