add clone sourceType in filter option

Signed-off-by: andy.lee <andy.lee@suse.com>
longhorn · Jul 8, 2024 · 046addd · 046addd
1 parent d92f9a4
commit 046addd
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 47 deletions.
diff --git a/src/routes/backingImage/BackingImageList.js b/src/routes/backingImage/BackingImageList.js
@@ -22,19 +22,6 @@ function list({ loading, dataSource, deleteBackingImage, showDiskStateMapDetail,
         </Tooltip>
       )
     }
-    if (Object.values(record.diskFileStatusMap).length > 0
-    && Object.values(record.diskFileStatusMap).some((diskStatus) => ['starting', 'pending', 'in-progress', 'ready-for-transfer'].includes(diskStatus.state))) {
-      // some creating states
-      const state = Object.values(record.diskFileStatusMap)[0]?.state || ''
-      const percentage = Object.values(record.diskFileStatusMap)[0]?.progress?.toString() || ''
-      return (
-        <Tooltip title={state}>
-          <Icon type="sync" style={{ color: '#00558b', marginRight: 4 }} spin />
-          {percentage && <span style={{ color: '#00558b' }}>{`${percentage} %`}</span>}
-        </Tooltip>
-      )
-    }
-
     return ''
   }
 

diff --git a/src/routes/backingImage/CreateBackingImage.js b/src/routes/backingImage/CreateBackingImage.js
@@ -1,7 +1,8 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Form, Input, Select, Upload, Button, Icon, InputNumber, Spin } from 'antd'
-import { ModalBlur, AutoComplete } from '../../components'
+import { ModalBlur } from '../../components'
 import { hasReadyBackingDisk } from '../../utils/status'
 
 const FormItem = Form.Item
@@ -22,6 +23,9 @@ const genDataFromType = (type, getFieldValue) => {
   const payload = {
     name: getFieldValue('name'),
     sourceType: getFieldValue('sourceType'),
+    minNumberOfCopies: getFieldValue('minNumberOfCopies'),
+    diskSelector: getFieldValue('diskSelector'),
+    nodeSelector: getFieldValue('nodeSelector'),
   }
 
   switch (type) {
@@ -110,16 +114,6 @@ const modal = ({
     },
   }
 
-
-  const autoCompleteProps = {
-    options: volumeNameOptions,
-    autoCompleteChange: (value) => {
-      setFieldsValue({
-        volumeName: value,
-      })
-    },
-  }
-
   const creationType = getFieldValue('sourceType')
   const availBackingImages = backingImageOptions?.filter(image => hasReadyBackingDisk(image)) || []
 
@@ -149,8 +143,8 @@ const modal = ({
           })(<Select defaultValue={'download'} onChange={() => {}}>
             <Option value={'download'}>Download From URL</Option>
             <Option value={'upload'}>Upload From Local</Option>
-            <Option value={'volume'}>Export from a Longhorn volume</Option>
-            <Option value={'clone'}>Clone from existing backing image</Option>
+            <Option value={'volume'}>Export From a Longhorn Volume</Option>
+            <Option value={'clone'}>Clone From Existing Backing Image</Option>
           </Select>)}
         </FormItem>
         {/* Display when select type = volume */}
@@ -159,27 +153,15 @@ const modal = ({
             <FormItem label="Volume Name" {...formItemLayout}>
               {getFieldDecorator('volumeName', {
                 initialValue: '',
-                valuePropName: 'value',
                 rules: [
                   {
                     required: creationType === 'volume',
-                    message: 'Please input volume name',
-                  },
-                  {
-                    validator: (_rule, value, callback) => {
-                      if (creationType === 'volume') {
-                        if (volumeNameOptions && volumeNameOptions.includes(value)) {
-                          callback()
-                        } else {
-                          callback('Please select an existing Longhorn volume.')
-                        }
-                      } else {
-                        callback()
-                      }
-                    },
+                    message: 'Please select an existing volume',
                   },
                 ],
-              })(<AutoComplete {...autoCompleteProps}></AutoComplete>)}
+              })(<Select>
+            {volumeNameOptions.map(vol => <Option key={vol} value={vol}>{vol}</Option>)}
+          </Select>)}
             </FormItem>
             <FormItem label="Exported Backing Image Type" {...formItemLayout}>
               {getFieldDecorator('exportType', {

diff --git a/src/routes/backingImage/DiskStateMapDetail.js b/src/routes/backingImage/DiskStateMapDetail.js
@@ -160,6 +160,7 @@ const modal = ({
                 {currentData.sourceType === 'download' && 'Download from URL'}
                 {currentData.sourceType === 'upload' && 'Upload'}
                 {currentData.sourceType === 'export-from-volume' && 'Export from a Longhorn volume'}
+                {currentData.sourceType === 'clone' && 'Clone from existing backing image'}
               </span>
               <div style={{ textAlign: 'left' }}>Parameters During Creation</div>
               <div>

diff --git a/src/routes/backingImage/index.js b/src/routes/backingImage/index.js
@@ -187,11 +187,6 @@ class BackingImage extends React.Component {
             duration: 0,
           })
         }
-        params.expectedChecksum = newBackingImage.expectedChecksum
-        params.diskSelector = newBackingImage.diskSelector
-        params.nodeSelector = newBackingImage.nodeSelector
-        params.minNumberOfCopies = newBackingImage.minNumberOfCopies
-
         dispatch({
           type: 'backingImage/create',
           payload,
@@ -278,6 +273,7 @@ class BackingImage extends React.Component {
         { value: 'download', name: 'download' },
         { value: 'upload', name: 'upload' },
         { value: 'export-from-volume', name: 'export-from-volume' },
+        { value: 'clone', name: 'clone' },
       ],
       onSearch(filter) {
         const { field: filterField, value: filterValue, createdFromValue: createdFromPropValue } = filter