refactor: optimize the rendering of data with map values

Update Table/SimpleTable/DetailCard/TabDetail component to optimize the rendering of data with map values, such as status value, which has a value map to deal with the i18n display

Change-Id: I9696c194e15db14197334f31d09a49de8170fe20

src/components/DetailCard/index.jsx

@@ -19,6 +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 Status from 'components/Status';
 import styles from './index.less';
 
@@ -46,7 +47,8 @@ const getContentValue = (value, dataIndex, data, copyable) => {
 };
 
 const getContent = (data, option) => {
-  const { content, dataIndex, render, valueRender, copyable } = option;
+  const { content, dataIndex, render, valueRender, copyable, valueMap } =
+    option;
   if (has(option, 'content')) {
     return copyable ? (
       <Paragraph copyable={copyable}>{content}</Paragraph>
@@ -59,6 +61,8 @@ const getContent = (data, option) => {
     if (valueRender) {
       const renderFunc = renderFilterMap[valueRender];
       value = renderFunc && renderFunc(value);
+    } else if (valueMap) {
+      value = getValueMapRender(option)(value);
     }
   } else {
     value = render(value, data);

src/components/Tables/Base/index.jsx

@@ -41,6 +41,7 @@ import {
   getNameRenderByRouter,
   getNameRender,
   columnRender,
+  getValueMapRender,
 } from 'utils/table';
 import { getNoValue } from 'utils/index';
 import { getLocalStorageItem, setLocalStorageItem } from 'utils/local-storage';
@@ -416,12 +417,16 @@ export class BaseTable extends React.Component {
         routeName,
         linkPrefix,
         isPrice,
+        valueMap,
         ...rest
       } = column;
       const newSorter = getColumnSorter(column, this.props);
       const newSortOrder =
         sortOrder || newSorter ? getSortOrder(dataIndex, this.props) : null;
       let newRender = render || getRender(valueRender);
+      if (valueMap) {
+        newRender = getValueMapRender(column);
+      }
       if (checkIsStatusColumn(dataIndex, isStatus)) {
         newRender = getStatusRender(newRender);
       }

src/components/Tables/SimpleTable/index.jsx

@@ -26,6 +26,7 @@ import {
   getRender,
   getNameRender,
   getNameRenderByRouter,
+  getValueMapRender,
 } from 'utils/table';
 import { Link } from 'react-router-dom';
 import { getNoValue } from 'utils/index';
@@ -85,6 +86,7 @@ export default class SimpleTable extends React.Component {
         isLink,
         routeName,
         linkPrefix,
+        valueMap,
         ...rest
       } = column;
       if (column.key === 'operation') {
@@ -94,6 +96,9 @@ export default class SimpleTable extends React.Component {
       const newSortOrder =
         sortOrder || newSorter ? getSortOrder(dataIndex, this.props) : null;
       let newRender = render || getRender(valueRender);
+      if (valueMap) {
+        newRender = getValueMapRender(column);
+      }
       if (checkIsStatusColumn(dataIndex, isStatus)) {
         newRender = getStatusRender(newRender);
       }

src/containers/TabDetail/index.jsx

@@ -27,6 +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 styles from './index.less';
 
 export default class DetailBase extends React.Component {
@@ -230,19 +231,22 @@ export default class DetailBase extends React.Component {
   };
 
   getDesc = (data, dataConf) => {
-    const { dataIndex, render, valueRender } = dataConf;
+    const { dataIndex, render, valueRender, valueMap } = dataConf;
+    const value = get(data, dataIndex);
     if (render) {
-      return render(data[dataIndex], data);
+      return render(value, data);
     }
     if (valueRender) {
       const renderFunc = renderFilterMap[valueRender];
-      return renderFunc && renderFunc(data[dataIndex]);
+      return renderFunc && renderFunc(value);
     }
-    const desc = get(data, dataIndex);
-    if (desc === undefined || desc === '') {
+    if (valueMap) {
+      return getValueMapRender(dataConf)(value);
+    }
+    if (value === undefined || value === '') {
       return '-';
     }
-    return desc;
+    return value;
   };
 
   getActionData() {

src/pages/compute/containers/BareMetalNode/Detail/index.jsx

@@ -52,12 +52,12 @@ export class Detail extends Base {
       {
         title: t('Power State'),
         dataIndex: 'power_state',
-        render: (value) => powerState[value] || value,
+        valueMap: powerState,
       },
       {
         title: t('Provision State'),
         dataIndex: 'provision_state',
-        render: (value) => provisioningState[value] || value,
+        valueMap: provisioningState,
       },
       {
         title: t('Maintained'),

src/pages/compute/containers/BareMetalNode/index.jsx

@@ -66,12 +66,12 @@ export class BareMetalNode extends Base {
     {
       title: t('Power State'),
       dataIndex: 'power_state',
-      render: (value) => powerState[value] || value,
+      valueMap: powerState,
     },
     {
       title: t('Provision State'),
       dataIndex: 'provision_state',
-      render: (value) => provisioningState[value] || value,
+      valueMap: provisioningState,
     },
     {
       title: t('Maintained'),

src/pages/compute/containers/Flavor/Detail/BaseDetail.jsx

@@ -227,17 +227,17 @@ export class BaseDetail extends Base {
       {
         label: t('CPU Policy'),
         dataIndex: 'hw:cpu_policy',
-        render: (value) => cpuPolicyList[value] || value,
+        valueMap: cpuPolicyList,
       },
       {
         label: t('CPU Thread Policy'),
         dataIndex: 'hw:cpu_thread_policy',
-        render: (value) => cpuThreadPolicyMap[value] || value,
+        valueMap: cpuThreadPolicyMap,
       },
       {
         label: t('Memory Page Size'),
         dataIndex: 'hw:mem_page_size',
-        render: (value) => pageTypeMap[value] || value,
+        valueMap: pageTypeMap,
       },
     ];
     const options = [...numa, ...others];

src/pages/compute/containers/Flavor/Detail/index.jsx

@@ -48,12 +48,12 @@ export class Detail extends Base {
       {
         title: t('Architecture'),
         dataIndex: 'architecture',
-        render: (value) => flavorArchitectures[value] || value,
+        valueMap: flavorArchitectures,
       },
       {
         title: t('Category'),
         dataIndex: 'category',
-        render: (value) => flavorCategoryList[value] || value,
+        valueMap: flavorCategoryList,
       },
       {
         title: t('CPU'),

src/pages/compute/containers/HostAggregate/Aggregate/actions/ManageHost.jsx

@@ -109,7 +109,7 @@ export class ManageHost extends ModalAction {
             title: t('Admin Status'),
             dataIndex: 'status',
             isHideable: true,
-            render: (value) => serviceStatus[value] || value,
+            valueMap: serviceStatus,
             tip: (value, record) => {
               const { disabled_reason } = record || {};
               if (disabled_reason) {
@@ -122,7 +122,7 @@ export class ManageHost extends ModalAction {
             title: t('State'),
             dataIndex: 'state',
             isHideable: true,
-            render: (value) => serviceState[value] || value,
+            valueMap: serviceState,
           },
           {
             title: t('Last Updated'),

src/pages/compute/containers/Hypervisors/ComputeHost/index.jsx

@@ -61,7 +61,7 @@ export class ComputeHost extends Base {
     {
       title: t('Service Status'),
       dataIndex: 'status',
-      render: (value) => serviceStatus[value] || value,
+      valueMap: serviceStatus,
       tip: (value, record) => {
         const { disabled_reason } = record || {};
         if (disabled_reason) {
@@ -73,7 +73,7 @@ export class ComputeHost extends Base {
     {
       title: t('Service State'),
       dataIndex: 'state',
-      render: (value) => serviceState[value] || value,
+      valueMap: serviceState,
     },
     {
       title: t('Last Updated'),

src/pages/compute/containers/Image/Detail/BaseDetail.jsx

@@ -60,7 +60,7 @@ export class BaseDetail extends Base {
       {
         label: t('OS'),
         dataIndex: 'os_distro',
-        render: (value) => imageOS[value] || value,
+        valueMap: imageOS,
       },
       {
         label: t('OS Version'),
@@ -93,7 +93,7 @@ export class BaseDetail extends Base {
       {
         label: t('Visibility'),
         dataIndex: 'visibility',
-        render: (value) => imageVisibility[value] || value,
+        valueMap: imageVisibility,
       },
       {
         label: t('Protected'),

src/pages/compute/containers/Image/Detail/index.jsx

@@ -61,7 +61,7 @@ export class ImageDetail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (data) => imageStatus[data] || '-',
+        valueMap: imageStatus,
       },
       {
         title: t('Project ID'),

src/pages/compute/containers/Image/Image.jsx

@@ -138,7 +138,7 @@ export class Image extends Base {
       title: t('Use Type'),
       dataIndex: 'usage_type',
       isHideable: true,
-      render: (value) => imageUsage[value] || value,
+      valueMap: imageUsage,
       sorter: false,
     },
     {
@@ -152,19 +152,19 @@ export class Image extends Base {
     {
       title: t('Status'),
       dataIndex: 'status',
-      render: (value) => imageStatus[value] || value,
+      valueMap: imageStatus,
     },
     {
       title: t('Visibility'),
       dataIndex: 'visibility',
-      render: (value) => imageVisibility[value] || value,
+      valueMap: imageVisibility,
       sorter: false,
     },
     {
       title: t('Disk Format'),
       dataIndex: 'disk_format',
       isHideable: true,
-      render: (value) => imageFormats[value] || value,
+      valueMap: imageFormats,
     },
     {
       title: t('Size'),

src/pages/compute/containers/Instance/Detail/index.jsx

@@ -91,7 +91,7 @@ export class InstanceDetail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (data) => instanceStatus[data] || data,
+        valueMap: instanceStatus,
       },
       {
         title: t('Lock Status'),

src/pages/compute/containers/Instance/actions/DetachInterface.jsx

@@ -118,7 +118,7 @@ export class DetachInterface extends ModalAction {
           {
             title: t('State'),
             dataIndex: 'port_state',
-            render: (value) => portStatus[value] || value,
+            valueMap: portStatus,
           },
           {
             title: t('Mac Address'),

src/pages/compute/containers/Instance/actions/DetachVolume.jsx

@@ -105,7 +105,7 @@ export class DetachVolume extends ModalAction {
           {
             title: t('Status'),
             dataIndex: 'status',
-            render: (value) => volumeStatus[value] || value,
+            valueMap: volumeStatus,
           },
           {
             title: t('Type'),

src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx

@@ -483,7 +483,7 @@ export class BaseStep extends Base {
       {
         title: t('Disk Format'),
         dataIndex: 'disk_format',
-        render: (value) => imageFormats[value] || value,
+        valueMap: imageFormats,
       },
       {
         title: t('Min System Disk'),
@@ -498,7 +498,7 @@ export class BaseStep extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => imageStatus[value] || value,
+        valueMap: imageStatus,
       },
       {
         title: t('Created At'),
@@ -524,7 +524,7 @@ export class BaseStep extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => volumeStatus[value] || value,
+        valueMap: volumeStatus,
         width: 80,
       },
       {

src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx

@@ -408,7 +408,7 @@ export class SystemStep extends Base {
           {
             title: t('Policy'),
             dataIndex: 'policy',
-            render: (value) => policyType[value] || value,
+            valueMap: policyType,
           },
         ],
         filterParams: [

src/pages/compute/containers/ServerGroup/Detail/index.jsx

@@ -52,7 +52,7 @@ export class ServerGroupDetail extends Base {
       {
         title: t('Policy'),
         dataIndex: 'policy',
-        render: (value) => policyType[value] || value,
+        valueMap: policyType,
       },
       {
         title: t('Member Count'),

src/pages/compute/containers/ServerGroup/index.jsx

@@ -60,7 +60,7 @@ export class ServerGroup extends Base {
     {
       title: t('Policy'),
       dataIndex: 'policy',
-      render: (value) => policyType[value] || value,
+      valueMap: policyType,
     },
   ];
 

src/pages/configuration/containers/SystemInfo/CinderService/index.jsx

@@ -62,7 +62,7 @@ export class CinderService extends Base {
     {
       title: t('Service Status'),
       dataIndex: 'status',
-      render: (value) => serviceStatus[value] || value,
+      valueMap: serviceStatus,
       tip: (value, record) => {
         if (value === 'enabled') {
           return '';
@@ -77,7 +77,7 @@ export class CinderService extends Base {
     {
       title: t('Service State'),
       dataIndex: 'state',
-      render: (value) => serviceState[value] || value,
+      valueMap: serviceState,
     },
     {
       title: t('Last Updated'),

src/pages/configuration/containers/SystemInfo/ComputeService/index.jsx

@@ -62,7 +62,7 @@ export class ComputeService extends Base {
     {
       title: t('Service Status'),
       dataIndex: 'status',
-      render: (value) => serviceStatus[value] || value,
+      valueMap: serviceStatus,
       tip: (value, record) => {
         const { disabled_reason } = record || {};
         if (disabled_reason) {
@@ -74,7 +74,7 @@ export class ComputeService extends Base {
     {
       title: t('Service State'),
       dataIndex: 'state',
-      render: (value) => serviceState[value] || value,
+      valueMap: serviceState,
     },
     {
       title: t('Last Updated'),

src/pages/configuration/containers/SystemInfo/HeatService.jsx

@@ -57,7 +57,7 @@ export class HeatService extends Base {
     {
       title: t('Status'),
       dataIndex: 'status',
-      render: (value) => serviceState[value] || value,
+      valueMap: serviceState,
     },
     {
       title: t('Last Updated'),

src/pages/container-infra/containers/Clusters/Detail/index.jsx

@@ -60,7 +60,7 @@ export class ClustersDetail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => clusterStatus[value] || value,
+        valueMap: clusterStatus,
       },
       {
         title: t('Status Reason'),
@@ -69,7 +69,7 @@ export class ClustersDetail extends Base {
       {
         title: t('Health Status'),
         dataIndex: 'health_status',
-        render: (value) => healthStatus[value] || value || '-',
+        valueMap: healthStatus,
       },
       {
         title: t('Health Status Reason'),

src/pages/container-infra/containers/Clusters/index.jsx

@@ -46,13 +46,13 @@ export class Clusters extends Base {
       title: t('Status'),
       isHideable: true,
       dataIndex: 'status',
-      render: (value) => clusterStatus[value] || value,
+      valueMap: clusterStatus,
     },
     {
       title: t('Health Status'),
       isHideable: true,
       dataIndex: 'health_status',
-      render: (value) => healthStatus[value] || value || '-',
+      valueMap: healthStatus,
     },
     {
       title: t('Keypair'),

src/pages/container-service/containers/Capsules/Detail/index.jsx

@@ -44,7 +44,7 @@ export class CapsulesDetail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => capsuleStatus[value] || value,
+        valueMap: capsuleStatus,
       },
       {
         title: t('Created At'),

src/pages/container-service/containers/Capsules/index.jsx

@@ -48,7 +48,7 @@ export class Capsules extends Base {
       title: t('Status'),
       isHideable: true,
       dataIndex: 'status',
-      render: (value) => capsuleStatus[value] || value,
+      valueMap: capsuleStatus,
     },
     {
       title: t('CPU'),

src/pages/container-service/containers/Containers/Detail/BaseDetail.jsx

@@ -38,7 +38,7 @@ export class BaseDetail extends Base {
       {
         label: t('Status Detail'),
         dataIndex: 'status_detail',
-        render: (value) => containerStatus[value] || value,
+        valueMap: containerStatus,
       },
       {
         label: t('Status Reason'),

src/pages/container-service/containers/Containers/Detail/index.jsx

@@ -53,7 +53,7 @@ export class ContainerDetail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => containerStatus[value] || value,
+        valueMap: containerStatus,
       },
     ];
   }

src/pages/container-service/containers/Containers/index.jsx

@@ -55,7 +55,7 @@ export class Containers extends Base {
       title: t('Status'),
       isHideable: true,
       dataIndex: 'status',
-      render: (value) => containerStatus[value] || value,
+      valueMap: containerStatus,
     },
     {
       title: t('Image'),
@@ -66,7 +66,7 @@ export class Containers extends Base {
       title: t('Task State'),
       isHideable: true,
       dataIndex: 'task_state',
-      render: (value) => containerTaskStatus[value] || value,
+      valueMap: containerTaskStatus,
     },
   ];
 }

src/pages/container-service/containers/Services/index.jsx

@@ -67,7 +67,7 @@ export class Services extends Base {
     {
       title: t('Service State'),
       dataIndex: 'state',
-      render: (value) => serviceState[value] || value,
+      valueMap: serviceState,
     },
     {
       title: t('Last Updated'),

src/pages/database/containers/Instances/Detail/BaseDetail.jsx

@@ -43,12 +43,12 @@ export class BaseDetail extends Base {
       {
         label: t('Status'),
         dataIndex: 'status',
-        render: (value) => InstanceStatus[value] || value,
+        valueMap: InstanceStatus,
       },
       {
         label: t('Locality'),
         dataIndex: 'locality',
-        render: (value) => policyType[value] || value,
+        valueMap: policyType,
       },
     ];
 

src/pages/database/containers/Instances/Detail/index.jsx

@@ -58,7 +58,7 @@ export class InstancesDetail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => InstanceStatus[value] || value,
+        valueMap: InstanceStatus,
       },
       {
         title: t('Project ID'),

src/pages/database/containers/Instances/index.jsx

@@ -109,7 +109,7 @@ export class Instances extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => InstanceStatus[value] || value,
+        valueMap: InstanceStatus,
       },
     ];
   }

src/pages/heat/containers/Stack/Detail/Event.jsx

@@ -67,7 +67,7 @@ export class Event extends Base {
       title: t('Resource Status'),
       dataIndex: 'resource_status',
       isHideable: true,
-      render: (value) => stackStatus[value] || value,
+      valueMap: stackStatus,
     },
     {
       title: t('Resource Status Reason'),

src/pages/heat/containers/Stack/Detail/Resource.jsx

@@ -193,7 +193,7 @@ export class Resource extends Base {
       title: t('Resource Status'),
       dataIndex: 'resource_status',
       isHideable: true,
-      render: (value) => stackStatus[value] || value,
+      valueMap: stackStatus,
     },
     {
       title: t('Resource Status Reason'),

src/pages/heat/containers/Stack/Detail/index.jsx

@@ -52,7 +52,7 @@ export class StackDetail extends Base {
       {
         title: t('Stack Status'),
         dataIndex: 'stack_status',
-        render: (value) => stackStatus[value] || value,
+        valueMap: stackStatus,
       },
       {
         title: t('Description'),

src/pages/heat/containers/Stack/index.jsx

@@ -79,7 +79,7 @@ export class Stack extends Base {
       title: t('Stack Status'),
       dataIndex: 'stack_status',
       isHideable: true,
-      render: (value) => stackStatus[value] || value,
+      valueMap: stackStatus,
     },
     {
       title: t('Created At'),

src/pages/network/containers/Certificate/Certificate.jsx

@@ -88,7 +88,7 @@ export class Certificate extends Base {
       {
         title: t('Certificate Type'),
         dataIndex: 'mode',
-        render: (value) => certificateMode[value] || value,
+        valueMap: certificateMode,
         isHideable: true,
       },
       {
@@ -130,7 +130,7 @@ export class Certificate extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => certificateStatus[value] || value,
+        valueMap: certificateStatus,
       },
       {
         title: t('Created At'),

src/pages/network/containers/FloatingIp/Detail/PortForwarding/index.jsx

@@ -95,7 +95,7 @@ export class PortForwarding extends Base {
       title: t('Protocol'),
       dataIndex: 'protocol',
       isHideable: true,
-      render: (value) => portForwardingProtocols[value] || value,
+      valueMap: portForwardingProtocols,
     },
     {
       title: t('Description'),

src/pages/network/containers/FloatingIp/Detail/index.jsx

@@ -50,7 +50,7 @@ export class FloatingIpDetail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (data) => floatingIpStatus[data] || '-',
+        valueMap: floatingIpStatus,
       },
       {
         title: t('Project ID'),

src/pages/network/containers/FloatingIp/index.jsx

@@ -297,7 +297,7 @@ export class FloatingIps extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => floatingIpStatus[value] || value,
+        valueMap: floatingIpStatus,
       },
       {
         title: t('Created At'),

src/pages/network/containers/LoadBalancers/Listener/Detail/Member/index.jsx

@@ -75,7 +75,7 @@ export class Members extends Base {
     {
       title: t('Status'),
       dataIndex: 'provisioning_status',
-      render: (data) => provisioningStatusCodes[data],
+      valueMap: provisioningStatusCodes,
       isHideable: true,
     },
     {

src/pages/network/containers/LoadBalancers/Listener/Detail/index.jsx

@@ -60,7 +60,7 @@ export class ListenerDetail extends Base {
       {
         title: t('Status'),
         dataIndex: 'provisioning_status',
-        render: (t) => provisioningStatusCodes[t],
+        valueMap: provisioningStatusCodes,
       },
       {
         title: t('Max connect'),

src/pages/network/containers/LoadBalancers/Listener/index.jsx

@@ -74,7 +74,7 @@ export class Listeners extends Base {
     {
       title: t('Status'),
       dataIndex: 'provisioning_status',
-      render: (t) => provisioningStatusCodes[t],
+      valueMap: provisioningStatusCodes,
       isHideable: true,
     },
     {

src/pages/network/containers/LoadBalancers/LoadBalancerInstance/Detail/index.jsx

@@ -60,7 +60,7 @@ export class LoadBalancerDetail extends Base {
       {
         title: t('Status'),
         dataIndex: 'provisioning_status',
-        render: (data) => provisioningStatusCodes[data],
+        valueMap: provisioningStatusCodes,
       },
       {
         title: t('Network'),

src/pages/network/containers/LoadBalancers/LoadBalancerInstance/index.jsx

@@ -118,7 +118,7 @@ export class LoadBalancerInstance extends Base {
       {
         title: t('Operating Status'),
         dataIndex: 'operating_status',
-        render: (t) => operatingStatusCodes[t],
+        valueMap: operatingStatusCodes,
         titleTip: (
           <Row>
             <Col>
@@ -135,7 +135,7 @@ export class LoadBalancerInstance extends Base {
       {
         title: t('Provisioning Status'),
         dataIndex: 'provisioning_status',
-        render: (t) => provisioningStatusCodes[t],
+        valueMap: provisioningStatusCodes,
       },
       {
         title: t('Listener Number'),

src/pages/network/containers/Network/Detail/index.jsx

@@ -76,7 +76,7 @@ export class NetworkDetail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (data) => networkStatus[data] || '-',
+        valueMap: networkStatus,
       },
       {
         title: t('Admin State'),

src/pages/network/containers/Port/Detail/BaseDetail/index.jsx

@@ -57,7 +57,7 @@ export class BaseDetail extends Base {
       {
         label: t('VNIC Type'),
         dataIndex: 'binding:vnic_type',
-        render: (value) => bindingTypes[value] || value,
+        valueMap: bindingTypes,
       },
     ];
     if (this.qosEndpoint) {

src/pages/network/containers/Port/Detail/index.jsx

@@ -95,7 +95,7 @@ export class PortDetail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (data) => networkStatus[data] || '-',
+        valueMap: networkStatus,
       },
       {
         title: t('Owned Network'),

src/pages/network/containers/Port/index.jsx

@@ -250,7 +250,7 @@ export class Port extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => portStatus[value] || value,
+        valueMap: portStatus,
       },
     ];
     if (this.isInstanceDetail) {

src/pages/network/containers/Router/Detail/index.jsx

@@ -49,7 +49,7 @@ export class RouterDetail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (data) => routerStatus[data] || '-',
+        valueMap: routerStatus,
       },
       {
         title: t('Admin State'),

src/pages/network/containers/Router/Port/Detail/BaseDetail.jsx

@@ -146,7 +146,7 @@ export class BaseDetail extends Base {
       {
         label: t('VNIC Type'),
         dataIndex: 'binding__vnic_type',
-        render: (value) => bindingTypes[value] || value,
+        valueMap: bindingTypes,
       },
     ];
     if (this.detailData.binding__host_id) {

src/pages/network/containers/Router/Port/Detail/index.jsx

@@ -45,7 +45,7 @@ export class PortDetail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (data) => portStatus[data] || '-',
+        valueMap: portStatus,
       },
       {
         title: t('Project ID'),

src/pages/network/containers/Router/Port/index.jsx

@@ -89,7 +89,7 @@ export class Ports extends Base {
     {
       title: t('Status'),
       dataIndex: 'status',
-      render: (value) => portStatus[value] || value,
+      valueMap: portStatus,
     },
     {
       title: t('Created At'),

src/pages/network/containers/Router/actions/Create.jsx

@@ -181,12 +181,12 @@ export class Create extends ModalAction {
           {
             title: t('State'),
             dataIndex: 'state',
-            render: (value) => availabilityZoneState[value] || value,
+            valueMap: availabilityZoneState,
           },
           {
             title: t('Resource Type'),
             dataIndex: 'resource',
-            render: (value) => availabilityZoneResource[value] || value,
+            valueMap: availabilityZoneResource,
           },
         ],
       },
@@ -218,7 +218,7 @@ export class Create extends ModalAction {
           {
             title: t('Status'),
             dataIndex: 'status',
-            render: (value) => networkStatus[value] || value,
+            valueMap: networkStatus,
           },
           {
             title: t('Created At'),

src/pages/network/containers/Router/actions/SetGateway.jsx

@@ -73,7 +73,7 @@ export class SetGateway extends ModalAction {
           {
             title: t('Status'),
             dataIndex: 'status',
-            render: (value) => networkStatus[value] || value,
+            valueMap: networkStatus,
           },
           {
             title: t('Created At'),

src/pages/network/containers/VPN/IPsecSiteConnection/index.jsx

@@ -87,7 +87,7 @@ export class IPsecSiteConnection extends Base {
     {
       title: t('Status'),
       dataIndex: 'status',
-      render: (v) => vpnStatus[v],
+      valueMap: vpnStatus,
     },
   ];
 

src/pages/network/containers/VPN/VPNGateway/index.jsx

@@ -88,7 +88,7 @@ export class VPNGateway extends Base {
     {
       title: t('Status'),
       dataIndex: 'status',
-      render: (v) => vpnStatus[v],
+      valueMap: vpnStatus,
     },
   ];
 

src/pages/share/containers/Share/Detail/AccessRule/index.jsx

@@ -59,12 +59,12 @@ export class ShareAccessRule extends Base {
     {
       title: t('Access Level'),
       dataIndex: 'access_level',
-      render: (value) => shareAccessLevel[value] || value,
+      valueMap: shareAccessLevel,
     },
     {
       title: t('State'),
       dataIndex: 'state',
-      render: (value) => shareAccessRuleState[value] || value,
+      valueMap: shareAccessRuleState,
     },
     {
       title: t('Access Key'),

src/pages/share/containers/Share/Detail/BaseDetail.jsx

@@ -57,7 +57,7 @@ export class BaseDetail extends Base {
       {
         label: t('Protocol'),
         dataIndex: 'share_proto',
-        render: (value) => shareProtocol[value] || value,
+        valueMap: shareProtocol,
       },
       {
         label: t('Public'),

src/pages/share/containers/Share/Detail/index.jsx

@@ -53,7 +53,7 @@ export class Detail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => shareStatus[value] || value,
+        valueMap: shareStatus,
       },
       {
         title: t('Created At'),

src/pages/share/containers/Share/index.jsx

@@ -123,7 +123,7 @@ export class Share extends Base {
       {
         title: t('Protocol'),
         dataIndex: 'share_proto',
-        render: (value) => shareProtocol[value] || value,
+        valueMap: shareProtocol,
       },
       {
         title: t('Public'),
@@ -135,7 +135,7 @@ export class Share extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => shareStatus[value] || value,
+        valueMap: shareStatus,
       },
       {
         title: t('Share Network'),

src/pages/share/containers/ShareGroup/Detail/index.jsx

@@ -52,7 +52,7 @@ export class Detail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => shareGroupStatus[value] || value,
+        valueMap: shareGroupStatus,
       },
       {
         title: t('Created At'),

src/pages/share/containers/ShareInstance/Detail/BaseDetail.jsx

@@ -52,7 +52,7 @@ export class BaseDetail extends Base {
       {
         label: t('Access Rules Status'),
         dataIndex: 'access_rules_status',
-        render: (value) => accessRuleStatus[value] || value,
+        valueMap: accessRuleStatus,
       },
       {
         label: t('Progress'),

src/pages/share/containers/ShareInstance/Detail/index.jsx

@@ -45,7 +45,7 @@ export class Detail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => shareStatus[value] || value,
+        valueMap: shareStatus,
       },
       {
         title: t('Created'),

src/pages/share/containers/ShareInstance/index.jsx

@@ -55,7 +55,7 @@ export class ShareInstance extends Base {
     {
       title: t('Status'),
       dataIndex: 'status',
-      render: (value) => shareStatus[value] || value,
+      valueMap: shareStatus,
     },
     {
       title: t('Availability Zone'),

src/pages/share/containers/ShareServer/Detail/index.jsx

@@ -46,7 +46,7 @@ export class Detail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => shareServerStatus[value] || value,
+        valueMap: shareServerStatus,
       },
       {
         title: t('Created'),

src/pages/share/containers/ShareServer/index.jsx

@@ -56,7 +56,7 @@ export class ShareServer extends Base {
     {
       title: t('Status'),
       dataIndex: 'status',
-      render: (value) => shareServerStatus[value] || value,
+      valueMap: shareServerStatus,
     },
     {
       title: t('Share Network'),

src/pages/storage/containers/Backup/Detail/index.jsx

@@ -66,7 +66,7 @@ export class Detail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => backupStatus[value] || value,
+        valueMap: backupStatus,
       },
       {
         title: t('Project ID'),

src/pages/storage/containers/Backup/index.jsx

@@ -105,7 +105,7 @@ export class Backup extends Base {
         title: t('Status'),
         dataIndex: 'status',
         isHideable: true,
-        render: (value) => backupStatus[value] || value,
+        valueMap: backupStatus,
       },
       {
         title: t('Created At'),

src/pages/storage/containers/Snapshot/Detail/index.jsx

@@ -52,7 +52,7 @@ export class Detail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (data) => volumeStatus[data] || '-',
+        valueMap: volumeStatus,
       },
       {
         title: t('Size'),

src/pages/storage/containers/Snapshot/index.jsx

@@ -112,7 +112,7 @@ export class Snapshots extends Base {
     {
       title: t('Status'),
       dataIndex: 'status',
-      render: (value) => volumeStatus[value] || value,
+      valueMap: volumeStatus,
     },
     {
       title: t('Volume ID/Name'),

src/pages/storage/containers/Volume/Detail/index.jsx

@@ -63,7 +63,7 @@ export class VolumeDetail extends Base {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => volumeStatus[value] || value,
+        valueMap: volumeStatus,
       },
       {
         title: t('Size'),

src/pages/storage/containers/Volume/actions/Create/index.jsx

@@ -468,7 +468,7 @@ export class Create extends FormAction {
           {
             title: t('Status'),
             dataIndex: 'status',
-            render: (value) => volumeStatus[value] || value,
+            valueMap: volumeStatus,
           },
           {
             title: t('Description'),

src/pages/storage/containers/Volume/actions/Restore.jsx

@@ -84,7 +84,7 @@ export class RestoreAction extends ModalAction {
           {
             title: t('Status'),
             dataIndex: 'status',
-            render: (value) => volumeStatus[value] || value,
+            valueMap: volumeStatus,
           },
           {
             title: t('Created At'),

src/pages/storage/containers/VolumeType/QosSpec/Detail/index.jsx

@@ -49,7 +49,7 @@ export class Detail extends Base {
       {
         title: t('Consumer'),
         dataIndex: 'consumer',
-        render: (value) => consumerTypes[value] || value,
+        valueMap: consumerTypes,
       },
     ];
   }

src/pages/storage/containers/VolumeType/QosSpec/index.jsx

@@ -50,7 +50,7 @@ export class QosSpecs extends Base {
       title: t('Consumer'),
       dataIndex: 'consumer',
       isHideable: true,
-      render: (value) => consumerTypes[value] || value,
+      valueMap: consumerTypes,
     },
     {
       title: t('Specs'),

src/pages/storage/containers/VolumeType/VolumeType/Detail/BaseDetail.jsx

@@ -30,7 +30,7 @@ export class BaseDetail extends Base {
       {
         label: t('Control Location'),
         dataIndex: 'encryption.control_location',
-        render: (value) => controls[value] || value,
+        valueMap: controls,
       },
       {
         label: t('Cipher'),

src/pages/storage/containers/VolumeType/VolumeType/actions/ManageQos.jsx

@@ -93,7 +93,7 @@ export class ManageQos extends ModalAction {
           {
             title: t('Consumer'),
             dataIndex: 'consumer',
-            render: (value) => consumerTypes[value] || value,
+            valueMap: consumerTypes,
           },
           {
             title: t('Specs'),

src/resources/cinder/backup.jsx

@@ -74,7 +74,7 @@ export const backupPointColumns = [
   {
     title: t('Status'),
     dataIndex: 'status',
-    render: (value) => backupStatus[value] || value,
+    valueMap: backupStatus,
   },
   {
     title: t('Backup Mode'),

src/resources/cinder/volume.jsx

@@ -167,7 +167,7 @@ export const volumeColumns = [
   {
     title: t('Status'),
     dataIndex: 'status',
-    render: (value) => volumeStatus[value] || value,
+    valueMap: volumeStatus,
   },
   {
     title: t('Shared'),
@@ -277,7 +277,7 @@ export const getVolumeColumnsList = (self) => {
     {
       title: t('Status'),
       dataIndex: 'status',
-      render: (value) => volumeStatus[value] || value,
+      valueMap: volumeStatus,
     },
     {
       title: t('Type'),
@@ -290,7 +290,7 @@ export const getVolumeColumnsList = (self) => {
       title: t('Disk Tag'),
       dataIndex: 'disk_tag',
       isHideable: true,
-      render: (value) => diskTag[value] || value,
+      valueMap: diskTag,
       sorter: false,
     },
     {
@@ -330,7 +330,7 @@ export const getVolumeColumnsList = (self) => {
       ),
       dataIndex: 'bootable',
       isHideable: true,
-      render: (value) => bootableType[value] || value,
+      valueMap: bootableType,
     },
     {
       title: t('Shared'),

src/resources/glance/image.jsx

@@ -189,7 +189,7 @@ export const getImageColumns = (self) => [
   {
     title: t('System'),
     dataIndex: 'os_distro',
-    render: (value) => imageOS[value] || value,
+    valueMap: imageOS,
   },
   {
     title: t('OS Version'),
@@ -208,12 +208,12 @@ export const getImageColumns = (self) => [
   {
     title: t('Access Control'),
     dataIndex: 'visibility',
-    render: (value) => imageVisibility[value] || value,
+    valueMap: imageVisibility,
   },
   {
     title: t('Format'),
     dataIndex: 'disk_format',
-    render: (value) => imageFormats[value] || value,
+    valueMap: imageFormats,
   },
   {
     title: t('Image Size'),

src/resources/glance/instance-snapshot.js

@@ -37,12 +37,12 @@ export const getBaseSnapshotColumns = (self) => [
     title: t('Disk Format'),
     dataIndex: 'disk_format',
     isHideable: true,
-    render: (value) => imageFormats[value] || value,
+    valueMap: imageFormats,
   },
   {
     title: t('Status'),
     dataIndex: 'status',
-    render: (value) => imageStatus[value] || value,
+    valueMap: imageStatus,
   },
   {
     title: t('Created At'),

src/resources/manila/share-group.js

@@ -46,7 +46,7 @@ export const getShareGroupColumns = (self) => {
     {
       title: t('Status'),
       dataIndex: 'status',
-      render: (value) => shareGroupStatus[value] || value,
+      valueMap: shareGroupStatus,
     },
     {
       title: t('Created At'),

src/resources/neutron/network.jsx

@@ -55,7 +55,7 @@ export const networkColumns = (self) => [
   {
     title: t('Status'),
     dataIndex: 'status',
-    render: (value) => networkStatus[value] || value,
+    valueMap: networkStatus,
   },
   {
     title: t('Subnet Count'),

src/resources/neutron/port.jsx

@@ -152,7 +152,7 @@ export function getPortFormItem(withResourceNameAndStatusFilter = true) {
       {
         title: t('Status'),
         dataIndex: 'status',
-        render: (value) => portStatus[value] || value,
+        valueMap: portStatus,
       },
       {
         title: t('Bind Resource'),
@@ -268,7 +268,7 @@ export const portColumns = [
   {
     title: t('Status'),
     dataIndex: 'status',
-    render: (value) => portStatus[value] || value,
+    valueMap: portStatus,
     sorter: false,
   },
 ];

src/resources/neutron/router.jsx

@@ -48,7 +48,7 @@ export const getRouterColumns = (self) => [
   {
     title: t('Status'),
     dataIndex: 'status',
-    render: (value) => routerStatus[value] || value,
+    valueMap: routerStatus,
   },
   {
     title: t('Open External Gateway'),

src/resources/nova/flavor.js

@@ -146,7 +146,7 @@ export const getBaseColumns = (self) => [
   {
     title: t('Category'),
     dataIndex: 'category',
-    render: (value) => flavorCategoryList[value] || value,
+    valueMap: flavorCategoryList,
   },
   {
     title: t('CPU'),
@@ -224,19 +224,19 @@ export const gpuColumns = [
     title: t('CPU Policy'),
     dataIndex: 'hw:cpu_policy',
     isHideable: true,
-    render: (value) => cpuPolicyList[value] || value,
+    valueMap: cpuPolicyList,
   },
   {
     title: t('CPU Thread Policy'),
     dataIndex: 'hw:cpu_thread_policy',
     isHideable: true,
-    render: (value) => cpuThreadPolicyMap[value] || value,
+    valueMap: cpuThreadPolicyMap,
   },
   {
     title: t('Memory Page'),
     dataIndex: 'hw:mem_page_size',
     isHideable: true,
-    render: (value) => pageTypeMap[value] || value,
+    valueMap: pageTypeMap,
   },
 ];
 

src/resources/nova/instance.jsx

@@ -510,7 +510,7 @@ export const actionColumn = (self) => {
     {
       title: t('Operation Name'),
       dataIndex: 'action',
-      render: (value) => actionMap[value],
+      valueMap: actionMap,
     },
     {
       title: t('Project ID/Name'),

src/resources/octavia/lb.jsx

@@ -50,7 +50,7 @@ export const getCertificateColumns = (self) => [
   {
     title: t('Certificate Type'),
     dataIndex: 'mode',
-    render: (value) => certificateMode[value] || value,
+    valueMap: certificateMode,
   },
   {
     title: t('Expires At'),
@@ -86,7 +86,7 @@ export const getCertificateColumns = (self) => [
   {
     title: t('Status'),
     dataIndex: 'status',
-    render: (value) => certificateStatus[value] || value,
+    valueMap: certificateStatus,
   },
   {
     title: t('Created At'),

src/resources/zun/actions.jsx

@@ -48,7 +48,7 @@ export const actionColumn = (self) => {
     {
       title: t('Operation Name'),
       dataIndex: 'action',
-      render: (value) => actionMap[value] || value,
+      valueMap: actionMap,
     },
     {
       title: t('Project ID/Name'),

src/utils/table.jsx

@@ -14,7 +14,15 @@
 
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { isArray, get, isString, isBoolean, isNil, isObjectLike } from 'lodash';
+import {
+  isArray,
+  get,
+  isString,
+  isBoolean,
+  isNil,
+  isObjectLike,
+  isObject,
+} from 'lodash';
 import Status from 'components/Status';
 import { renderFilterMap } from 'utils/index';
 import { getLinkRender } from 'utils/route-map';
@@ -235,3 +243,14 @@ export const idNameColumn = {
     );
   },
 };
+
+export const getValueMapRender = (column) => {
+  const { valueMap, render } = column;
+  if (render) {
+    return render;
+  }
+  if (valueMap && isObject(valueMap)) {
+    return (value) => valueMap[value] || value;
+  }
+  return null;
+};