add uuid and create from for backing image filter

Signed-off-by: andy.lee <andy.lee@suse.com>
longhorn · May 15, 2024 · 4b65102 · 4b65102
1 parent 21a0d48
commit 4b65102
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 30 deletions.
diff --git a/src/components/Filter/Filter.js b/src/components/Filter/Filter.js
@@ -9,7 +9,7 @@ const Option = Select.Option
 class Filter extends React.Component {
   constructor(props) {
     super(props)
-    const { field = props.defaultField || 'name', value = '', stateValue = '', nodeRedundancyValue = '', engineImageUpgradableValue = '', scheduleValue = '', pvStatusValue = '', revisionCounterValue = '', isGroupValue = '' } = queryString.parse(props.location.search)
+    const { field = props.defaultField || 'name', value = '', stateValue = '', nodeRedundancyValue = '', engineImageUpgradableValue = '', scheduleValue = '', pvStatusValue = '', revisionCounterValue = '', isGroupValue = '', createdFromValue = '' } = queryString.parse(props.location.search)
     this.state = {
       field,
       stateValue,
@@ -19,6 +19,7 @@ class Filter extends React.Component {
       scheduleValue,
       pvStatusValue,
       revisionCounterValue,
+      createdFromValue,
       isGroupValue,
       keyword: value,
     }
@@ -63,12 +64,16 @@ class Filter extends React.Component {
     this.setState({ ...this.state, isGroupValue })
   }
 
+  handleCreatedFromValueChange = (createdFromValue) => {
+    this.setState({ ...this.state, createdFromValue })
+  }
+
   handleFieldChange = (field) => {
     this.setState({ ...this.state, field })
   }
 
   render() {
-    const { field = this.props.defaultField || 'name', value = '', stateValue = '', nodeRedundancyValue = '', engineImageUpgradableValue = '', scheduleValue = '', pvStatusValue = '', revisionCounterValue = '', isGroup = '' } = queryString.parse(this.props.location.search)
+    const { field = this.props.defaultField || 'name', value = '', stateValue = '', nodeRedundancyValue = '', engineImageUpgradableValue = '', scheduleValue = '', pvStatusValue = '', revisionCounterValue = '', isGroup = '', createdFromValue = '' } = queryString.parse(this.props.location.search)
 
     let defaultContent = {
       field,
@@ -79,6 +84,7 @@ class Filter extends React.Component {
       scheduleValue,
       pvStatusValue,
       revisionCounterValue,
+      createdFromValue,
       isGroup,
     }
 
@@ -153,22 +159,32 @@ class Filter extends React.Component {
     >
     {this.props.revisionCounterOption.map(item => (<Option key={item.value} value={item.value}>{item.name}</Option>))}
     </Select>)
+    } else if (this.state.field === 'sourceType' && this.props.createdFromOption) {
+      valueForm = (<Select key="sourceType"
+        style={{ width: '100%' }}
+        size="large"
+        allowClear
+        defaultValue={this.state.createdFromValue}
+        onChange={this.handleCreatedFromValueChange}
+    >
+    {this.props.createdFromOption.map(item => (<Option key={item.value} value={item.value}>{item.name}</Option>))}
+    </Select>)
     }
 
     let content = ''
-    let popoverVsible = false
+    let popoverVisible = false
 
     for (let key in defaultContent) {
       if (defaultContent[key] !== '' && key !== 'field' && this.state[key] !== defaultContent[key]) {
         content = (<div style={{ maxWidth: '200px', wordBreak: 'break-word' }}>{`Current Filter: ${defaultContent[key]}`}</div>)
-        popoverVsible = true
+        popoverVisible = true
       }
     }
 
     return (
       <Form>
       <Input.Group compact className={styles.filter}>
-      <Popover placement="topLeft" content={content} visible={popoverVsible}>
+      <Popover placement="topLeft" content={content} visible={popoverVisible}>
         <Select size="large" defaultValue={this.state.field} className={styles.filterSelect} onChange={this.handleFieldChange}>
           {this.props.fieldOption.map(item => (<Option key={item.value} value={item.value}>{item.name}</Option>))}
         </Select>
@@ -194,6 +210,7 @@ Filter.propTypes = {
   pvStatusOption: PropTypes.array,
   revisionCounterOption: PropTypes.array,
   recurringJobIsGroupOption: PropTypes.array,
+  createdFromOption: PropTypes.array,
 }
 
 export default Filter
diff --git a/src/routes/backingImage/index.js b/src/routes/backingImage/index.js
@@ -70,13 +70,25 @@ class BackingImage extends React.Component {
     const { data: volumeData } = this.props.volume
     const { data, selected, createBackingImageModalVisible, createBackingImageModalKey, diskStateMapDetailModalVisible, diskStateMapDetailModalKey, diskStateMapDeleteDisabled, diskStateMapDeleteLoading, selectedDiskStateMapRows, selectedDiskStateMapRowKeys, selectedRows, cleanUp } = this.props.backingImage
     const { backingImageUploadPercent, backingImageUploadStarted } = this.props.app
-    const { field, value } = queryString.parse(this.props.location.search)
-    let backingImages = data.filter((item) => {
-      if (field && value) {
-        return item[field] && item[field].indexOf(value.trim()) > -1
+    const { field, value, createdFromValue } = queryString.parse(this.props.location.search)
+
+    let backingImages = data
+    if (field && (value || createdFromValue)) {
+      switch (field) {
+        case 'name':
+          backingImages = backingImages.filter((image) => image.name.includes(value.trim()))
+          break
+        case 'uuid':
+          backingImages = backingImages.filter((image) => image.uuid.includes(value.trim()))
+          break
+        case 'sourceType':
+          backingImages = backingImages.filter((image) => image.sourceType === createdFromValue.trim())
+          break
+        default:
+          break
       }
-      return true
-    })
+    }
+
     if (backingImages && backingImages.length > 0) {
       backingImages.sort((a, b) => a.name.localeCompare(b.name))
     }
@@ -239,20 +251,32 @@ class BackingImage extends React.Component {
       defaultField: 'name',
       fieldOption: [
         { value: 'name', name: 'Name' },
+        { value: 'uuid', name: 'UUID' },
+        { value: 'sourceType', name: 'Created From' },
+      ],
+      createdFromOption: [
+        { value: 'download', name: 'download' },
+        { value: 'upload', name: 'upload' },
+        { value: 'export-from-volume', name: 'export-from-volume' },
       ],
       onSearch(filter) {
-        const { field: filterField, value: filterValue } = filter
-        filterField && filterValue ? dispatch(routerRedux.push({
-          pathname: '/backingImage',
-          search: queryString.stringify({
-            ...queryString.parse(location.search),
-            field: filterField,
-            value: filterValue,
-          }),
-        })) : dispatch(routerRedux.push({
-          pathname: '/backingImage',
-          search: queryString.stringify({}),
-        }))
+        const { field: filterField, value: filterValue, createdFromValue: createdFromPropValue } = filter
+        if (filterField && (filterValue || createdFromPropValue)) {
+          dispatch(routerRedux.push({
+            pathname: '/backingImage',
+            search: queryString.stringify({
+              ...queryString.parse(location.search),
+              field: filterField,
+              value: filterValue,
+              createdFromValue: createdFromPropValue,
+            }),
+          }))
+        } else {
+          dispatch(routerRedux.push({
+            pathname: '/backingImage',
+            search: queryString.stringify({}),
+          }))
+        }
       },
     }
 
@@ -278,13 +302,17 @@ class BackingImage extends React.Component {
             <Filter {...backingImageFilterProps} />
           </Col>
         </Row>
-        { inUploadProgress ? <div className={style.backingImageUploadingContainer}>
-          <div>
-            <Progress percent={backingImageUploadPercent} />
-            <span>Uploading</span>
+        { inUploadProgress ? (
+          <div className={style.backingImageUploadingContainer}>
+            <div>
+              <Progress percent={backingImageUploadPercent} />
+              <span>Uploading</span>
+            </div>
           </div>
-        </div> : ''}
-        <Button className="out-container-button" size="large" type="primary" disabled={inUploadProgress || loading} onClick={addBackingImage}>Create Backing Image</Button>
+        ) : ''}
+        <Button className="out-container-button" size="large" type="primary" disabled={inUploadProgress || loading} onClick={addBackingImage}>
+          Create Backing Image
+        </Button>
         <BackingImageList {...backingImageListProps} />
         { createBackingImageModalVisible ? <CreateBackingImage key={createBackingImageModalKey} {...createBackingImageModalProps} /> : ''}
         { diskStateMapDetailModalVisible ? <DiskStateMapDetail key={diskStateMapDetailModalKey} {...diskStateMapDetailModalProps} /> : ''}

diff --git a/src/utils/filter.js b/src/utils/filter.js
@@ -62,7 +62,7 @@ export function schedulingDisabledNode(data) { return data.filter(node => isDisa
 // Node is not ready by condition.
 export function downNode(data) { return data.filter(node => isDown(node)) }
 
-function filterData(data, field, value) {
+export function filterData(data, field, value) {
   return data.filter(item => (item[field] || '').toLowerCase().indexOf(value.toLowerCase()) > -1)
 }