move Clean up action in backing image detail modal

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

src/models/backingImage.js

@@ -13,7 +13,6 @@ export default {
     resourceType: 'backingImage',
     selected: {},
     selectedRows: [],
-    cleanUp: false,
     createBackingImageModalVisible: false,
     createBackingImageModalKey: Math.random(),
     diskStateMapDetailModalVisible: false,
@@ -196,10 +195,15 @@ export default {
       return { ...state, createBackingImageModalVisible: false }
     },
     showDiskStateMapDetailModal(state, action) {
-      return { ...state, selected: action.payload.record, cleanUp: action.payload.cleanUp, diskStateMapDetailModalVisible: true, diskStateMapDetailModalKey: Math.random() }
+      return {
+        ...state,
+        selected: action.payload.record,
+        diskStateMapDetailModalVisible: true,
+        diskStateMapDetailModalKey: Math.random(),
+      }
     },
     hideDiskStateMapDetailModal(state) {
-      return { ...state, diskStateMapDetailModalVisible: false, cleanUp: false, diskStateMapDetailModalKey: Math.random() }
+      return { ...state, diskStateMapDetailModalVisible: false, diskStateMapDetailModalKey: Math.random() }
     },
     disableDiskStateMapDelete(state) {
       return { ...state, diskStateMapDeleteDisabled: true }

src/routes/backingImage/BackingImageActions.js

@@ -5,7 +5,7 @@ import { DropOption } from '../../components'
 import { hasReadyBackingDisk } from '../../utils/status'
 const confirm = Modal.confirm
 
-function actions({ selected, deleteBackingImage, cleanUpDiskMap, downloadBackingImage }) {
+function actions({ selected, deleteBackingImage, downloadBackingImage }) {
   const handleMenuClick = (event, record) => {
     event.domEvent?.stopPropagation?.()
     switch (event.key) {
@@ -20,9 +20,6 @@ function actions({ selected, deleteBackingImage, cleanUpDiskMap, downloadBacking
       case 'download':
         downloadBackingImage(record)
         break
-      case 'cleanUp':
-        cleanUpDiskMap(record)
-        break
       default:
     }
   }
@@ -32,7 +29,6 @@ function actions({ selected, deleteBackingImage, cleanUpDiskMap, downloadBacking
   const availableActions = [
     { key: 'delete', name: 'Delete' },
     { key: 'download', name: 'Download', disabled: disableDownloadAction, tooltip: disableDownloadAction ? 'Missing disk with ready state' : '' },
-    { key: 'cleanUp', name: 'Clean Up' },
   ]
 
   return (
@@ -45,7 +41,6 @@ function actions({ selected, deleteBackingImage, cleanUpDiskMap, downloadBacking
 actions.propTypes = {
   selected: PropTypes.object,
   deleteBackingImage: PropTypes.func,
-  cleanUpDiskMap: PropTypes.func,
   downloadBackingImage: PropTypes.func,
 }
 

src/routes/backingImage/BackingImageBulkActions.js

@@ -42,11 +42,11 @@ function bulkActions({ selectedRows, deleteBackingImages, downloadSelectedBackin
           okText: 'Download',
           width: 'fit-content',
           title: (<>
-                    <p>Below <strong style={readyTextStyle}>Ready</strong> status Backing {count === 1 ? 'Image' : 'Images' } will be downloaded.</p>
+                    <p>Below backing {count === 1 ? 'image' : 'images' } with <strong style={readyTextStyle}>Ready</strong> status disk will be downloaded</p>
                     <ul>
                       {downloadableImages.map(item => <li>{item.name}</li>)}
                     </ul>
-                    <p>Note. You need allow <strong>Automatic Download</strong> permission<br />in browser settings to download multiple files at once.</p>
+                    <p>Note. You need allow <strong>Automatic Downloads</strong> permission<br />in browser settings to download multiple files at once.</p>
                   </>),
           onOk() {
             downloadSelectedBackingImages(downloadableImages)

src/routes/backingImage/BackingImageList.js

@@ -5,10 +5,9 @@ import BackingImageActions from './BackingImageActions'
 import { pagination } from '../../utils/page'
 import { formatMib } from '../../utils/formatter'
 
-function list({ loading, dataSource, deleteBackingImage, cleanUpDiskMap, showDiskStateMapDetail, rowSelection, downloadBackingImage, height }) {
+function list({ loading, dataSource, deleteBackingImage, showDiskStateMapDetail, rowSelection, downloadBackingImage, height }) {
   const backingImageActionsProps = {
     deleteBackingImage,
-    cleanUpDiskMap,
     downloadBackingImage,
   }
   const state = (record) => {
@@ -28,6 +27,7 @@ function list({ loading, dataSource, deleteBackingImage, cleanUpDiskMap, showDis
       dataIndex: 'name',
       key: 'name',
       width: 200,
+      sorter: (a, b) => a.name.localeCompare(b.name),
       render: (text, record) => {
         return (
           <div onClick={() => { showDiskStateMapDetail(record) }} style={{ width: '100%', cursor: 'pointer' }}>
@@ -40,6 +40,7 @@ function list({ loading, dataSource, deleteBackingImage, cleanUpDiskMap, showDis
       dataIndex: 'uuid',
       key: 'uuid',
       width: 150,
+      sorter: (a, b) => a.uuid.localeCompare(b.uuid),
       render: (text) => {
         return (
           <div>{text}</div>
@@ -50,6 +51,7 @@ function list({ loading, dataSource, deleteBackingImage, cleanUpDiskMap, showDis
       dataIndex: 'size',
       key: 'size',
       width: 150,
+      sorter: (a, b) => a.size - b.size,
       render: (text) => {
         return (
           <div>
@@ -62,6 +64,7 @@ function list({ loading, dataSource, deleteBackingImage, cleanUpDiskMap, showDis
       dataIndex: 'sourceType',
       key: 'sourceType',
       width: 200,
+      sorter: (a, b) => a.sourceType.localeCompare(b.sourceType),
       render: (text) => {
         return (
           <div>
@@ -104,7 +107,6 @@ list.propTypes = {
   dataSource: PropTypes.array,
   deleteBackingImage: PropTypes.func,
   showDiskStateMapDetail: PropTypes.func,
-  cleanUpDiskMap: PropTypes.func,
   rowSelection: PropTypes.object,
   height: PropTypes.number,
 }

src/routes/backingImage/DiskStateMapActions.js

@@ -6,7 +6,7 @@ const confirm = Modal.confirm
 function DiskStateMapActions({ selectedRows, deleteButtonDisabled, deleteButtonLoading, deleteDisksOnBackingImage }) {
   const deleteButtonClick = () => {
     confirm({
-      title: `Are you sure to delete the image files from the disks (${selectedRows.map(item => item.disk).join(',')}) ?`,
+      title: `Are you sure to clean up the image file from the disks (${selectedRows.map(item => item.disk).join(',')}) ?`,
       onOk() {
         deleteDisksOnBackingImage(selectedRows)
       },
@@ -21,7 +21,7 @@ function DiskStateMapActions({ selectedRows, deleteButtonDisabled, deleteButtonL
   }
 
   return (
-    <Button {...deleteButtonProps}>Delete</Button>
+    <Button {...deleteButtonProps}>Clean Up</Button>
   )
 }
 

src/routes/backingImage/DiskStateMapDetail.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { Table, Modal, Progress, Tooltip, Card, Icon } from 'antd'
 import DiskStateMapActions from './DiskStateMapActions'
 import { ModalBlur, DropOption } from '../../components'
+import { diskStatusColorMap } from '../../utils/filter'
 import style from './BackingImage.less'
 const confirm = Modal.confirm
 
@@ -21,16 +22,14 @@ const modal = ({
   rowSelection,
   diskStateMapDeleteDisabled,
   diskStateMapDeleteLoading,
-  // CleanUp is true if this popup is for a delete operation
-  cleanUp,
 }) => {
   // update detail list
   let currentData = backingImages.find((item) => {
     return item.id === selected.id
   })
 
   const modalOpts = {
-    title: cleanUp ? 'Operate files in disks' : currentData.name,
+    title: <p style={{ fontWeight: '700', fontSize: '18px', marginBottom: 0 }}>{currentData.name}</p>,
     visible,
     onCancel,
     hasOnCancel: true,
@@ -46,9 +45,9 @@ const modal = ({
 
   const handleMenuClick = (record, event) => {
     switch (event.key) {
-      case 'delete':
+      case 'cleanUp':
         confirm({
-          title: `Are you sure to delete the images image file from the disk ${record.disk} ?`,
+          title: `Are you sure to clean up the image file from the disk (${record.disk}) ?`,
           onOk() {
             deleteDisksOnBackingImage([record])
           },
@@ -74,14 +73,36 @@ const modal = ({
       title: 'Status',
       dataIndex: 'status',
       key: 'status',
-      width: 150,
+      width: 200,
       className: 'active',
       render: (text, record) => {
+        const defaultGreyColor = { color: '#dee1e3', bg: 'rgba(222,225,227,.05)' }
+        const colorMap = diskStatusColorMap[text] || defaultGreyColor
         return (
           <div>
-            { text === 'in-progress' ? <Tooltip title={`${record.progress}%`}><div><Progress showInfo={false} percent={record.progress} /></div></Tooltip> : ''}
+            { text === 'in-progress' && (
+              <Tooltip title={`${record.progress}%`}>
+                <div>
+                  <Progress showInfo={false} percent={record.progress} />
+                </div>
+              </Tooltip>
+            )}
             <Tooltip title={record.message}>
-              <div>{text} {record.message ? <Icon type="message" className="color-warning" /> : ''}</div>
+              {text ? (
+                <div
+                  style={{
+                    display: 'inline-block',
+                    width: 'max-content',
+                    padding: '0 4px',
+                    marginRight: '5px',
+                    color: colorMap.color,
+                    border: `1px solid ${colorMap.color}`,
+                    backgroundColor: colorMap.bg,
+                    textTransform: 'capitalize',
+                  }}
+                >{text}</div>
+              ) : <Icon type="sync" style={{ color: '#0077ea' }} spin />}
+              {record.message ? <Icon type="message" className="color-warning" /> : ''}
             </Tooltip>
           </div>
         )
@@ -98,26 +119,21 @@ const modal = ({
     },
   ]
 
-  // If cleanUp is true tableRowSelection will equal props rowSelection, to support select rows.
-  let tableRowSelection = null
-
-  if (cleanUp) {
-    tableRowSelection = rowSelection
-    columns.push({
-      title: 'Operation',
-      key: 'operation',
-      width: 100,
-      render: (text, record) => {
-        return (
+  const tableRowSelection = rowSelection
+  columns.push({
+    title: 'Operation',
+    key: 'operation',
+    width: 100,
+    render: (_text, record) => {
+      return (
           <DropOption menuOptions={[
-            { key: 'delete', name: 'Delete' },
+            { key: 'cleanUp', name: 'Clean Up' },
           ]}
             onMenuClick={e => handleMenuClick(record, e)}
           />
-        )
-      },
-    })
-  }
+      )
+    },
+  })
 
   const diskStateMapProps = {
     selectedRows,
@@ -135,23 +151,23 @@ const modal = ({
   return (
     <ModalBlur {...modalOpts}>
       <div style={{ width: '100%', overflow: 'auto', padding: '10px 20px 10px' }}>
-        { !cleanUp ? <div className={style.backingImageModalContainer}>
+        <div className={style.backingImageModalContainer}>
           <Card>
             <div className={style.parametersContainer} style={{ marginBottom: 0 }}>
-              <div>UUID: </div>
+              <div>UUID</div>
               <span>{currentData.uuid}</span>
-              <div>Created From: </div>
+              <div>Created From</div>
               <span>
                 {currentData.sourceType === 'download' && 'Download from URL'}
                 {currentData.sourceType === 'upload' && 'Upload'}
                 {currentData.sourceType === 'export-from-volume' && 'Export from a Longhorn volume'}
               </span>
-              <div style={{ textAlign: 'left' }}>Parameters During Creation:</div>
+              <div style={{ textAlign: 'left' }}>Parameters During Creation</div>
               <div>
                 {currentData.parameters && Object.keys(currentData.parameters).length > 0 ? Object.keys(currentData.parameters).map((key) => {
                   return <div style={{ display: 'flex' }} key={key}>
-                    <div style={{ minWidth: 60, fontWeight: 'normal' }}>{key}:</div>
-                    <div style={{ marginLeft: 10, fontWeight: 'normal' }}>{currentData.parameters[key]}</div>
+                    <div style={{ minWidth: 'fit-content', fontWeight: 'normal' }}>{key}:</div>
+                    <div style={{ marginLeft: 5, fontWeight: 'normal' }}>{currentData.parameters[key]}</div>
                   </div>
                 }) : <Tooltip title="empty"><Icon type="stop" className="color-warning" /></Tooltip>}
               </div>
@@ -167,14 +183,14 @@ const modal = ({
                 </Tooltip> : ((currentData.expectedChecksum !== '' && isReady) && <Tooltip title={'Current checksum doesn’t match the expected value'}>
                   <summary className="color-error">Failed</summary>
                 </Tooltip>)}
-                Current SHA512 Checksum:
+                Current SHA512 Checksum
               </div>
               <span>{currentData.currentChecksum ? currentData.currentChecksum : ''}</span>
             </div>
           </Card>
-        </div> : ''}
+        </div>
         <div style={{ marginBottom: 12 }}>
-          { cleanUp ? <DiskStateMapActions {...diskStateMapProps} /> : '' }
+          <DiskStateMapActions {...diskStateMapProps} />
         </div>
         <Table
           bordered={false}
@@ -193,7 +209,6 @@ const modal = ({
 
 modal.propTypes = {
   visible: PropTypes.bool,
-  cleanUp: PropTypes.bool,
   diskStateMapDeleteDisabled: PropTypes.bool,
   diskStateMapDeleteLoading: PropTypes.bool,
   selected: PropTypes.object,

src/routes/backingImage/index.js

@@ -68,7 +68,7 @@ class BackingImage extends React.Component {
     const { dispatch, loading, location } = this.props
     const { uploadFile } = this
     const { data: volumeData } = this.props.volume
-    const { data, selected, createBackingImageModalVisible, createBackingImageModalKey, diskStateMapDetailModalVisible, diskStateMapDetailModalKey, diskStateMapDeleteDisabled, diskStateMapDeleteLoading, selectedDiskStateMapRows, selectedDiskStateMapRowKeys, selectedRows, cleanUp } = this.props.backingImage
+    const { data, selected, createBackingImageModalVisible, createBackingImageModalKey, diskStateMapDetailModalVisible, diskStateMapDetailModalKey, diskStateMapDeleteDisabled, diskStateMapDeleteLoading, selectedDiskStateMapRows, selectedDiskStateMapRowKeys, selectedRows } = this.props.backingImage
     const { backingImageUploadPercent, backingImageUploadStarted } = this.props.app
     const { field, value } = queryString.parse(this.props.location.search)
     let backingImages = data.filter((item) => {
@@ -91,12 +91,6 @@ class BackingImage extends React.Component {
           payload: record,
         })
       },
-      cleanUpDiskMap(record) {
-        dispatch({
-          type: 'backingImage/showDiskStateMapDetailModal',
-          payload: { record, cleanUp: true },
-        })
-      },
       downloadBackingImage(record) {
         dispatch({
           type: 'backingImage/downloadBackingImage',
@@ -106,7 +100,7 @@ class BackingImage extends React.Component {
       showDiskStateMapDetail(record) {
         dispatch({
           type: 'backingImage/showDiskStateMapDetailModal',
-          payload: { record, cleanUp: false },
+          payload: { record },
         })
       },
       rowSelection: {
@@ -190,7 +184,6 @@ class BackingImage extends React.Component {
     const diskStateMapDetailModalProps = {
       selected,
       backingImages,
-      cleanUp,
       visible: diskStateMapDetailModalVisible,
       onCancel: () => {
         dispatch({ type: 'backingImage/hideDiskStateMapDetailModal' })