From d3eea42e482a41f3c4cedba81b74050c751a4cdd Mon Sep 17 00:00:00 2001 From: "Jingwei.Zhang" Date: Mon, 29 Aug 2022 14:32:39 +0800 Subject: [PATCH] refactor: optimize the rendering of data with unit Update Table/SimpleTable/DetailCard/TabDetail component to optimize the rendering of data with unit, such as size value Change-Id: I0e4971eeee1353bce03e6ae1f583c8b6ace87489 --- src/components/DetailCard/index.jsx | 6 ++++-- src/components/Tables/Base/index.jsx | 5 +++++ src/components/Tables/SimpleTable/index.jsx | 5 +++++ src/containers/TabDetail/index.jsx | 7 +++++-- .../containers/Instance/actions/DetachVolume.jsx | 2 +- .../actions/StepCreate/BaseStep/index.jsx | 4 ++-- .../containers/Instances/Detail/BaseDetail.jsx | 2 +- .../database/containers/Instances/index.jsx | 2 +- .../share/containers/Share/Detail/BaseDetail.jsx | 2 +- src/pages/share/containers/Share/index.jsx | 2 +- .../storage/containers/Backup/Detail/index.jsx | 2 +- src/pages/storage/containers/Backup/index.jsx | 2 +- .../storage/containers/Snapshot/Detail/index.jsx | 2 +- src/pages/storage/containers/Snapshot/index.jsx | 2 +- .../storage/containers/Volume/Detail/index.jsx | 2 +- .../containers/Volume/actions/Create/index.jsx | 2 +- .../containers/Volume/actions/Restore.jsx | 2 +- src/resources/cinder/volume.jsx | 4 ++-- src/utils/table.jsx | 16 ++++++++++++++++ 19 files changed, 51 insertions(+), 20 deletions(-) diff --git a/src/components/DetailCard/index.jsx b/src/components/DetailCard/index.jsx index f1b8ce75..da9f8715 100644 --- a/src/components/DetailCard/index.jsx +++ b/src/components/DetailCard/index.jsx @@ -19,7 +19,7 @@ import { has, get, isNumber } from 'lodash'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { renderFilterMap } from 'utils/index'; -import { getValueMapRender } from 'utils/table'; +import { getValueMapRender, getUnitRender } from 'utils/table'; import Status from 'components/Status'; import styles from './index.less'; @@ -47,7 +47,7 @@ const getContentValue = (value, dataIndex, data, copyable) => { }; const getContent = (data, option) => { - const { content, dataIndex, render, valueRender, copyable, valueMap } = + const { content, dataIndex, render, valueRender, copyable, valueMap, unit } = option; if (has(option, 'content')) { return copyable ? ( @@ -63,6 +63,8 @@ const getContent = (data, option) => { value = renderFunc && renderFunc(value); } else if (valueMap) { value = getValueMapRender(option)(value); + } else if (unit) { + value = getUnitRender(option)(value); } } else { value = render(value, data); diff --git a/src/components/Tables/Base/index.jsx b/src/components/Tables/Base/index.jsx index 16f751d7..0dbd575c 100644 --- a/src/components/Tables/Base/index.jsx +++ b/src/components/Tables/Base/index.jsx @@ -42,6 +42,7 @@ import { getNameRender, columnRender, getValueMapRender, + getUnitRender, } from 'utils/table'; import { getNoValue } from 'utils/index'; import { getLocalStorageItem, setLocalStorageItem } from 'utils/local-storage'; @@ -418,6 +419,7 @@ export class BaseTable extends React.Component { linkPrefix, isPrice, valueMap, + unit, ...rest } = column; const newSorter = getColumnSorter(column, this.props); @@ -427,6 +429,9 @@ export class BaseTable extends React.Component { if (valueMap) { newRender = getValueMapRender(column); } + if (unit) { + newRender = getUnitRender(column); + } if (checkIsStatusColumn(dataIndex, isStatus)) { newRender = getStatusRender(newRender); } diff --git a/src/components/Tables/SimpleTable/index.jsx b/src/components/Tables/SimpleTable/index.jsx index ff63d6b2..7fec5545 100644 --- a/src/components/Tables/SimpleTable/index.jsx +++ b/src/components/Tables/SimpleTable/index.jsx @@ -27,6 +27,7 @@ import { getNameRender, getNameRenderByRouter, getValueMapRender, + getUnitRender, } from 'utils/table'; import { Link } from 'react-router-dom'; import { getNoValue } from 'utils/index'; @@ -87,6 +88,7 @@ export default class SimpleTable extends React.Component { routeName, linkPrefix, valueMap, + unit, ...rest } = column; if (column.key === 'operation') { @@ -99,6 +101,9 @@ export default class SimpleTable extends React.Component { if (valueMap) { newRender = getValueMapRender(column); } + if (unit) { + newRender = getUnitRender(column); + } if (checkIsStatusColumn(dataIndex, isStatus)) { newRender = getStatusRender(newRender); } diff --git a/src/containers/TabDetail/index.jsx b/src/containers/TabDetail/index.jsx index 3301d4a5..1169afc2 100644 --- a/src/containers/TabDetail/index.jsx +++ b/src/containers/TabDetail/index.jsx @@ -27,7 +27,7 @@ import checkItemPolicy from 'resources/skyline/policy'; import ItemActionButtons from 'components/Tables/Base/ItemActionButtons'; import { emptyActionConfig } from 'utils/constants'; import { getPath, getLinkRender } from 'utils/route-map'; -import { getValueMapRender } from 'utils/table'; +import { getValueMapRender, getUnitRender } from 'utils/table'; import styles from './index.less'; export default class DetailBase extends React.Component { @@ -231,7 +231,7 @@ export default class DetailBase extends React.Component { }; getDesc = (data, dataConf) => { - const { dataIndex, render, valueRender, valueMap } = dataConf; + const { dataIndex, render, valueRender, valueMap, unit } = dataConf; const value = get(data, dataIndex); if (render) { return render(value, data); @@ -243,6 +243,9 @@ export default class DetailBase extends React.Component { if (valueMap) { return getValueMapRender(dataConf)(value); } + if (unit) { + return getUnitRender(dataConf)(value); + } if (value === undefined || value === '') { return '-'; } diff --git a/src/pages/compute/containers/Instance/actions/DetachVolume.jsx b/src/pages/compute/containers/Instance/actions/DetachVolume.jsx index d3273e1a..6bc57576 100644 --- a/src/pages/compute/containers/Instance/actions/DetachVolume.jsx +++ b/src/pages/compute/containers/Instance/actions/DetachVolume.jsx @@ -100,7 +100,7 @@ export class DetachVolume extends ModalAction { { title: t('Size'), dataIndex: 'size', - render: (value) => `${value}GiB`, + unit: 'GiB', }, { title: t('Status'), diff --git a/src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx b/src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx index 4a603431..b7d180f4 100644 --- a/src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx +++ b/src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx @@ -488,7 +488,7 @@ export class BaseStep extends Base { { title: t('Min System Disk'), dataIndex: 'min_disk', - render: (text) => `${text}GiB`, + unit: 'GiB', }, { title: t('Min Memory'), @@ -518,7 +518,7 @@ export class BaseStep extends Base { { title: t('Size'), dataIndex: 'size', - render: (value) => `${value}GiB`, + unit: 'GiB', width: 80, }, { diff --git a/src/pages/database/containers/Instances/Detail/BaseDetail.jsx b/src/pages/database/containers/Instances/Detail/BaseDetail.jsx index d2f995ef..b0587aed 100644 --- a/src/pages/database/containers/Instances/Detail/BaseDetail.jsx +++ b/src/pages/database/containers/Instances/Detail/BaseDetail.jsx @@ -77,7 +77,7 @@ export class BaseDetail extends Base { { label: t('Volume Size'), dataIndex: 'size', - render: (value) => (value ? `${value}GiB` : '-'), + unit: 'GiB', }, { label: t('Created'), diff --git a/src/pages/database/containers/Instances/index.jsx b/src/pages/database/containers/Instances/index.jsx index c5c6474a..50995684 100644 --- a/src/pages/database/containers/Instances/index.jsx +++ b/src/pages/database/containers/Instances/index.jsx @@ -104,7 +104,7 @@ export class Instances extends Base { title: t('Database Disk (GiB)'), dataIndex: 'size', isHideable: true, - render: (value) => (value ? `${value}GiB` : '-'), + unit: 'GiB', }, { title: t('Status'), diff --git a/src/pages/share/containers/Share/Detail/BaseDetail.jsx b/src/pages/share/containers/Share/Detail/BaseDetail.jsx index 94eef8a2..31508834 100644 --- a/src/pages/share/containers/Share/Detail/BaseDetail.jsx +++ b/src/pages/share/containers/Share/Detail/BaseDetail.jsx @@ -52,7 +52,7 @@ export class BaseDetail extends Base { { label: t('Size'), dataIndex: 'size', - render: (value) => `${value}GiB`, + unit: 'GiB', }, { label: t('Protocol'), diff --git a/src/pages/share/containers/Share/index.jsx b/src/pages/share/containers/Share/index.jsx index e3f3df87..274c6006 100644 --- a/src/pages/share/containers/Share/index.jsx +++ b/src/pages/share/containers/Share/index.jsx @@ -118,7 +118,7 @@ export class Share extends Base { { title: t('Size'), dataIndex: 'size', - render: (value) => `${value}GiB`, + unit: 'GiB', }, { title: t('Protocol'), diff --git a/src/pages/storage/containers/Backup/Detail/index.jsx b/src/pages/storage/containers/Backup/Detail/index.jsx index dfe9a5f0..b65145d9 100644 --- a/src/pages/storage/containers/Backup/Detail/index.jsx +++ b/src/pages/storage/containers/Backup/Detail/index.jsx @@ -57,7 +57,7 @@ export class Detail extends Base { { title: t('Size'), dataIndex: 'size', - render: (value) => `${value} GiB`, + unit: 'GiB', }, { title: t('Description'), diff --git a/src/pages/storage/containers/Backup/index.jsx b/src/pages/storage/containers/Backup/index.jsx index 8e4c8e19..7f105570 100644 --- a/src/pages/storage/containers/Backup/index.jsx +++ b/src/pages/storage/containers/Backup/index.jsx @@ -98,7 +98,7 @@ export class Backup extends Base { title: t('Size'), dataIndex: 'size', isHideable: true, - render: (value) => `${value}GiB`, + unit: 'GiB', sorter: false, }, { diff --git a/src/pages/storage/containers/Snapshot/Detail/index.jsx b/src/pages/storage/containers/Snapshot/Detail/index.jsx index b20eec6c..224c852b 100644 --- a/src/pages/storage/containers/Snapshot/Detail/index.jsx +++ b/src/pages/storage/containers/Snapshot/Detail/index.jsx @@ -58,7 +58,7 @@ export class Detail extends Base { { title: t('Size'), dataIndex: 'size', - render: (data) => `${data} GiB`, + unit: 'GiB', }, { title: t('Created At'), diff --git a/src/pages/storage/containers/Snapshot/index.jsx b/src/pages/storage/containers/Snapshot/index.jsx index 59d2654e..6236d9ce 100644 --- a/src/pages/storage/containers/Snapshot/index.jsx +++ b/src/pages/storage/containers/Snapshot/index.jsx @@ -106,7 +106,7 @@ export class Snapshots extends Base { title: t('Size'), dataIndex: 'size', isHideable: true, - render: (data) => `${data} GiB`, + unit: 'GiB', sorter: false, }, { diff --git a/src/pages/storage/containers/Volume/Detail/index.jsx b/src/pages/storage/containers/Volume/Detail/index.jsx index 02dc9e8c..b62fe20d 100644 --- a/src/pages/storage/containers/Volume/Detail/index.jsx +++ b/src/pages/storage/containers/Volume/Detail/index.jsx @@ -68,7 +68,7 @@ export class VolumeDetail extends Base { { title: t('Size'), dataIndex: 'size', - render: (value) => `${value}GiB`, + unit: 'GiB', }, { title: t('Created At'), diff --git a/src/pages/storage/containers/Volume/actions/Create/index.jsx b/src/pages/storage/containers/Volume/actions/Create/index.jsx index d5b91d21..d918f65a 100644 --- a/src/pages/storage/containers/Volume/actions/Create/index.jsx +++ b/src/pages/storage/containers/Volume/actions/Create/index.jsx @@ -462,7 +462,7 @@ export class Create extends FormAction { { title: t('Size'), dataIndex: 'size', - render: (value) => `${value}GiB`, + unit: 'GiB', sorter: false, }, { diff --git a/src/pages/storage/containers/Volume/actions/Restore.jsx b/src/pages/storage/containers/Volume/actions/Restore.jsx index 4d9af9dd..ebd85a73 100644 --- a/src/pages/storage/containers/Volume/actions/Restore.jsx +++ b/src/pages/storage/containers/Volume/actions/Restore.jsx @@ -78,7 +78,7 @@ export class RestoreAction extends ModalAction { { title: t('Size'), dataIndex: 'size', - render: (value) => `${value}GiB`, + unit: 'GiB', sorter: false, }, { diff --git a/src/resources/cinder/volume.jsx b/src/resources/cinder/volume.jsx index b4ac56d5..ff5333e4 100644 --- a/src/resources/cinder/volume.jsx +++ b/src/resources/cinder/volume.jsx @@ -162,7 +162,7 @@ export const volumeColumns = [ { title: t('Size'), dataIndex: 'size', - render: (value) => `${value}GiB`, + unit: 'GiB', }, { title: t('Status'), @@ -272,7 +272,7 @@ export const getVolumeColumnsList = (self) => { title: t('Size'), dataIndex: 'size', isHideable: true, - render: (value) => `${value}GiB`, + unit: 'GiB', }, { title: t('Status'), diff --git a/src/utils/table.jsx b/src/utils/table.jsx index 2b40c5e6..9d6fae3c 100644 --- a/src/utils/table.jsx +++ b/src/utils/table.jsx @@ -254,3 +254,19 @@ export const getValueMapRender = (column) => { } return null; }; + +export const getUnitRender = (column) => { + const { unit, render } = column; + if (render) { + return render; + } + if (unit) { + return (value) => { + if (value === undefined || value === null) { + return '-'; + } + return `${value}${unit}`; + }; + } + return null; +};