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

@@ -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);

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);
       }

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);
       }

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 '-';
     }

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'),

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,
       },
       {

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'),

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'),

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'),

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'),

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'),

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,
       },
       {

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'),

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,
     },
     {

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'),

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,
           },
           {

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,
           },
           {

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'),

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;
+};