feat: support V2 Backing Image in UI

src/routes/backingImage/BackingImageActions.js

@@ -52,10 +52,28 @@ function actions({
   }
 
   const availableActions = [
-    { key: 'updateMinCopies', name: 'Update Minimum Copies Count', disabled: disableAction, tooltip: disableAction ? 'Missing disk with ready state' : '' },
-    { key: 'backup', name: ' Back Up', disabled: disableAction || backupTargetAvailable === false, tooltip: getBackupActionTooltip() },
-    { key: 'download', name: 'Download', disabled: disableAction, tooltip: disableAction ? 'Missing disk with ready state' : '' },
-    { key: 'delete', name: 'Delete' },
+    {
+      key: 'updateMinCopies',
+      name: 'Update Minimum Copies Count',
+      disabled: disableAction,
+      tooltip: disableAction ? 'Missing disk with ready state' : ''
+    },
+    {
+      key: 'backup',
+      name: ' Back Up',
+      disabled: disableAction || backupTargetAvailable === false,
+      tooltip: getBackupActionTooltip()
+    },
+    {
+      key: 'download',
+      name: 'Download',
+      disabled: disableAction || selected.dataEngine === 'v2',
+      tooltip: disableAction ? 'Missing disk with ready state' : ''
+    },
+    {
+      key: 'delete',
+      name: 'Delete'
+    },
   ]
 
   return (

src/routes/backingImage/BackingImageBulkActions.js

@@ -90,9 +90,29 @@ function bulkActions({ selectedRows, backupProps, deleteBackingImages, downloadS
   }
 
   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: 'Back Up', disabled() { return selectedRows.length === 0 || backupTargetAvailable === false || selectedRows.every(row => !hasReadyBackingDisk(row)) } },
+    {
+      key: 'delete',
+      name: 'Delete',
+      disabled() { return selectedRows.length === 0 }
+    },
+    {
+      key: 'download',
+      name: 'Download',
+      disabled() {
+        return selectedRows.length === 0
+          || selectedRows.every(row => !hasReadyBackingDisk(row))
+          || selectedRows.some(row => row.dataEngine === 'v2')
+      }
+    },
+    {
+      key: 'backup',
+      name: 'Back Up',
+      disabled() {
+        return selectedRows.length === 0
+          || backupTargetAvailable === false
+          || selectedRows.every(row => !hasReadyBackingDisk(row))
+      }
+    },
   ]
 
   return (

src/routes/backingImage/BackingImageList.js

@@ -126,6 +126,19 @@ function list({
           </div>
         )
       },
+    }, {
+      title: 'Data Engine',
+      dataIndex: 'dataEngine',
+      key: 'dataEngine',
+      width: 130,
+      sorter: (a, b) => (a.dataEngine || '').toString().localeCompare((b.dataEngine || '').toString()),
+      render: (text) => {
+        return (
+          <div>
+            {text}
+          </div>
+        )
+      },
     }, {
       title: 'Node Tags',
       key: 'nodeSelector',

src/routes/backingImage/BackupBackingImageList.js

@@ -47,7 +47,7 @@ function BackupBackingImageList({ loading, dataSource, deleteBackupBackingImage,
       title: 'State',
       dataIndex: 'state',
       key: 'state',
-      width: 80,
+      width: 120,
       sorter: (a, b) => a.state.localeCompare(b.state),
       render: (text) => {
         return (
@@ -58,7 +58,7 @@ function BackupBackingImageList({ loading, dataSource, deleteBackupBackingImage,
       title: 'Backup Target',
       dataIndex: 'backupTargetName',
       key: 'backupTargetName',
-      width: 100,
+      width: 180,
       sorter: (a, b) => sortTable(a, b, 'backupTargetName'),
       render: (text) => {
         return (
@@ -71,7 +71,7 @@ function BackupBackingImageList({ loading, dataSource, deleteBackupBackingImage,
       title: 'Size',
       dataIndex: 'size',
       key: 'size',
-      width: 80,
+      width: 120,
       sorter: (a, b) => parseInt(a.size, 10) - parseInt(b.size, 10),
       render: (text) => {
         return (
@@ -100,7 +100,7 @@ function BackupBackingImageList({ loading, dataSource, deleteBackupBackingImage,
       title: 'Created Time',
       dataIndex: 'created',
       key: 'created',
-      width: 120,
+      width: 180,
       sorter: (a, b) => a.created.localeCompare(b.created),
       render: (text) => {
         return (

src/routes/backingImage/CreateBackingImage.js

@@ -24,6 +24,7 @@ const genDataFromType = (type, getFieldValue) => {
     name: getFieldValue('name'),
     sourceType: getFieldValue('sourceType'),
     minNumberOfCopies: getFieldValue('minNumberOfCopies'),
+    dataEngine: getFieldValue('dataEngine'),
     diskSelector: getFieldValue('diskSelector'),
     nodeSelector: getFieldValue('nodeSelector'),
   }
@@ -85,6 +86,8 @@ const modal = ({
     getFieldValue,
     setFieldsValue,
   },
+  v1DataEngineEnabled = true,
+  v2DataEngineEnabled = false
 }) => {
   function handleOk() {
     validateFields((errors) => {
@@ -309,6 +312,27 @@ const modal = ({
             ],
           })(<InputNumber min={1} />)}
         </FormItem>
+        <FormItem label="Data Engine" hasFeedback {...formItemLayout}>
+          {getFieldDecorator('dataEngine', {
+            initialValue: v2DataEngineEnabled ? 'v2' : 'v1',
+            rules: [
+              {
+                validator: (_rule, value, callback) => {
+                  if ((value === 'v1' && !v1DataEngineEnabled) || (value === 'v2' && !v2DataEngineEnabled)) {
+                    callback(`${value} data engine is not enabled`)
+                  } else {
+                    callback()
+                  }
+                },
+              },
+            ],
+          })(
+            <Select>
+              <Option value="v1">v1</Option>
+              <Option value="v2">v2</Option>
+            </Select>
+          )}
+        </FormItem>
         <Spin spinning={tagsLoading}>
           <FormItem label="Node Tag" {...formItemLayout}>
             {getFieldDecorator('nodeSelector', {
@@ -344,6 +368,8 @@ modal.propTypes = {
   nodeTags: PropTypes.array,
   diskTags: PropTypes.array,
   backingImageOptions: PropTypes.array,
+  v1DataEngineEnabled: PropTypes.bool,
+  v2DataEngineEnabled: PropTypes.bool,
 }
 
 export default Form.create()(modal)

src/routes/backingImage/index.js

@@ -117,8 +117,11 @@ class BackingImage extends React.Component {
     } = this.props.backingImage
     const { backingImageUploadPercent, backingImageUploadStarted } = this.props.app
 
-    const defaultReplicaCount = settingData.find(s => s.id === 'default-replica-count')
-    const defaultNumberOfReplicas = defaultReplicaCount ? parseInt(defaultReplicaCount.value, 10) : 3
+    const settingsMap = Object.fromEntries(settingData.map(setting => [setting.id, setting.value]))
+    const v1DataEngineEnabled = settingsMap['v1-data-engine'] === 'true'
+    const v2DataEngineEnabled = settingsMap['v2-data-engine'] === 'true'
+    const defaultReplicaCount = settingsMap['default-replica-count']
+    const defaultNumberOfReplicas = defaultReplicaCount ? parseInt(defaultReplicaCount, 10) : 3
 
     const backingImages = filterBackingImage(data, biSearchField, biSearchValue)
     const volumeNameOptions = volumeData.map((volume) => volume.name)
@@ -209,6 +212,8 @@ class BackingImage extends React.Component {
       nodeTags,
       diskTags,
       tagsLoading,
+      v1DataEngineEnabled,
+      v2DataEngineEnabled,
       onOk(newBackingImage) {
         const payload = { ...newBackingImage }
         if (newBackingImage.sourceType === 'upload') {