From bab25eb10cb02f762a45f6cdc03122c14617ddb9 Mon Sep 17 00:00:00 2001 From: "andy.lee" Date: Sun, 19 May 2024 23:08:27 +0800 Subject: [PATCH] move Clean up action in backing image detail modal Signed-off-by: andy.lee --- src/models/backingImage.js | 10 ++- .../backingImage/BackingImageActions.js | 7 +- .../backingImage/BackingImageBulkActions.js | 4 +- src/routes/backingImage/BackingImageList.js | 8 +- .../backingImage/DiskStateMapActions.js | 4 +- src/routes/backingImage/DiskStateMapDetail.js | 83 +++++++++++-------- src/routes/backingImage/index.js | 11 +-- 7 files changed, 68 insertions(+), 59 deletions(-) diff --git a/src/models/backingImage.js b/src/models/backingImage.js index d223ce7a..26087c7d 100644 --- a/src/models/backingImage.js +++ b/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 } diff --git a/src/routes/backingImage/BackingImageActions.js b/src/routes/backingImage/BackingImageActions.js index e7399eae..ef519420 100644 --- a/src/routes/backingImage/BackingImageActions.js +++ b/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, } diff --git a/src/routes/backingImage/BackingImageBulkActions.js b/src/routes/backingImage/BackingImageBulkActions.js index 7488b1eb..cd7e7f31 100644 --- a/src/routes/backingImage/BackingImageBulkActions.js +++ b/src/routes/backingImage/BackingImageBulkActions.js @@ -42,11 +42,11 @@ function bulkActions({ selectedRows, deleteBackingImages, downloadSelectedBackin okText: 'Download', width: 'fit-content', title: (<> -

Below Ready status Backing {count === 1 ? 'Image' : 'Images' } will be downloaded.

+

Below backing {count === 1 ? 'image' : 'images' } with Ready status disk will be downloaded

-

Note. You need allow Automatic Download permission
in browser settings to download multiple files at once.

+

Note. You need allow Automatic Downloads permission
in browser settings to download multiple files at once.

), onOk() { downloadSelectedBackingImages(downloadableImages) diff --git a/src/routes/backingImage/BackingImageList.js b/src/routes/backingImage/BackingImageList.js index af95d758..06116c4a 100644 --- a/src/routes/backingImage/BackingImageList.js +++ b/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 (
{ 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 (
{text}
@@ -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 (
@@ -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 (
@@ -104,7 +107,6 @@ list.propTypes = { dataSource: PropTypes.array, deleteBackingImage: PropTypes.func, showDiskStateMapDetail: PropTypes.func, - cleanUpDiskMap: PropTypes.func, rowSelection: PropTypes.object, height: PropTypes.number, } diff --git a/src/routes/backingImage/DiskStateMapActions.js b/src/routes/backingImage/DiskStateMapActions.js index 03b77987..a1707522 100644 --- a/src/routes/backingImage/DiskStateMapActions.js +++ b/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 ( - + ) } diff --git a/src/routes/backingImage/DiskStateMapDetail.js b/src/routes/backingImage/DiskStateMapDetail.js index a90eeace..8f2416d5 100644 --- a/src/routes/backingImage/DiskStateMapDetail.js +++ b/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,8 +22,6 @@ 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) => { @@ -30,7 +29,7 @@ const modal = ({ }) const modalOpts = { - title: cleanUp ? 'Operate files in disks' : currentData.name, + title:

{currentData.name}

, 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 (
- { text === 'in-progress' ?
: ''} + { text === 'in-progress' && ( + +
+ +
+ + )} -
{text} {record.message ? : ''}
+ {text ? ( +
{text}
+ ) : } + {record.message ? : ''}
) @@ -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 ( handleMenuClick(record, e)} /> - ) - }, - }) - } + ) + }, + }) const diskStateMapProps = { selectedRows, @@ -135,23 +151,23 @@ const modal = ({ return (
- { !cleanUp ?
+
-
UUID:
+
UUID
{currentData.uuid} -
Created From:
+
Created From
{currentData.sourceType === 'download' && 'Download from URL'} {currentData.sourceType === 'upload' && 'Upload'} {currentData.sourceType === 'export-from-volume' && 'Export from a Longhorn volume'} -
Parameters During Creation:
+
Parameters During Creation
{currentData.parameters && Object.keys(currentData.parameters).length > 0 ? Object.keys(currentData.parameters).map((key) => { return
-
{key}:
-
{currentData.parameters[key]}
+
{key}:
+
{currentData.parameters[key]}
}) : }
@@ -167,14 +183,14 @@ const modal = ({ : ((currentData.expectedChecksum !== '' && isReady) && Failed )} - Current SHA512 Checksum: + Current SHA512 Checksum
{currentData.currentChecksum ? currentData.currentChecksum : ''}
-
: ''} +
- { cleanUp ? : '' } +
{ @@ -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' })