feat: display the id/name column in the table in a unified style

1. update the port id/name column in the MemberAllocator component which is used in create load balancer action
2. update the database backup id/name column in the database backup list page
3. update the configuration id/name column in the database configuration list page
4. update the id/name columns in the vpn endpoint/ike policy/ipsec policy/gateway list page
5. update the volume id/name column in the volumeSelectTable component which is used in instance attach volumes action
6. update the port id/name column in the network step in create instance action

Change-Id: Idc3bc161a56b06cb83f9e4c9543edaf0762a4669

src/components/FormItem/MemberAllocator/index.jsx

@@ -17,9 +17,7 @@ import { Form, Button, Row, Col, Select } from 'antd';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import SelectTable from 'components/FormItem/SelectTable';
 import { ipValidate } from 'utils/validate';
-import { isAdminPage } from 'utils/index';
 import { Address4, Address6 } from 'ip-address';
-import { getLinkRender } from 'utils/route-map';
 import Item from './Item';
 
 const { isIPv4, isIpv6 } = ipValidate;
@@ -40,13 +38,6 @@ const MemberAllocator = ({ componentProps, formItemProps }) => {
     onChange && onChange(data);
   };
 
-  function getLink(routerName, item) {
-    const { pathname } = window.location;
-    const key = isAdminPage(pathname) ? `${routerName}Admin` : routerName;
-    const { id } = item;
-    return getLinkRender({ key, params: { id }, value: id });
-  }
-
   let addOuter = () => {};
 
   return (
@@ -69,12 +60,7 @@ const MemberAllocator = ({ componentProps, formItemProps }) => {
             {
               title: t('ID/Name'),
               dataIndex: 'name',
-              render: (n, record) => (
-                <div>
-                  <div>{getLink('portDetail', record)}</div>
-                  <div>{n || '-'}</div>
-                </div>
-              ),
+              routeName: 'portDetail',
             },
             {
               title: t('Binding Instance'),

src/locales/en.json

@@ -403,7 +403,7 @@
   "Configuration": "Configuration",
   "Configuration Detail": "Configuration Detail",
   "Configuration Group": "Configuration Group",
-  "Configuration Group Name": "Configuration Group Name",
+  "Configuration Group ID/Name": "Configuration Group ID/Name",
   "Configuration Groups": "Configuration Groups",
   "Configuration Update": "Configuration Update",
   "Configured Disk (GiB)": "Configured Disk (GiB)",
@@ -1700,7 +1700,6 @@
   "Phone": "Phone",
   "Physical CPU Usage": "Physical CPU Usage",
   "Physical Network": "Physical Network",
-  "Specify Physical Node": "Specify Physical Node",
   "Physical Node": "Physical Node",
   "Physical Nodes": "Physical Nodes",
   "Physical Storage Usage": "Physical Storage Usage",
@@ -2168,6 +2167,7 @@
   "Spawning": "Spawning",
   "Spec": "Spec",
   "Specification": "Specification",
+  "Specify Physical Node": "Specify Physical Node",
   "Specify mount point.": "Specify mount point.",
   "Specify whether future replicated instances will be created on the same hypervisor (affinity) or on different hypervisors (anti-affinity). This value is ignored if the instance to be launched is a replica.": "Specify whether future replicated instances will be created on the same hypervisor (affinity) or on different hypervisors (anti-affinity). This value is ignored if the instance to be launched is a replica.",
   "Specs": "Specs",

src/locales/zh.json

@@ -403,7 +403,7 @@
   "Configuration": "配置",
   "Configuration Detail": "配置详情",
   "Configuration Group": "配置组",
-  "Configuration Group Name": "配置组名称",
+  "Configuration Group ID/Name": "配置组ID/名称",
   "Configuration Groups": "配置组",
   "Configuration Update": "配置变更",
   "Configured Disk (GiB)": "已分配磁盘(GiB)",
@@ -1700,7 +1700,6 @@
   "Phone": "手机",
   "Physical CPU Usage": "物理CPU使用量",
   "Physical Network": "物理网络",
-  "Specify Physical Node": "指定物理节点",
   "Physical Node": "物理节点",
   "Physical Nodes": "物理节点",
   "Physical Storage Usage": "物理存储使用量",
@@ -2168,6 +2167,7 @@
   "Spawning": "孵化中",
   "Spec": "规格",
   "Specification": "规格",
+  "Specify Physical Node": "指定物理节点",
   "Specify mount point.": "指定挂载点",
   "Specify whether future replicated instances will be created on the same hypervisor (affinity) or on different hypervisors (anti-affinity). This value is ignored if the instance to be launched is a replica.": "指定未来的复制实例是在相同的管理程序（亲和）上创建还是在不同的管理程序（反亲和）上创建。如果要启动的实例是副本，则忽略此值。",
   "Specs": "规格",

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

@@ -25,6 +25,7 @@ import {
 import { InstanceVolumeStore } from 'stores/nova/instance-volume';
 import globalVolumeTypeStore from 'stores/cinder/volume-type';
 import globalProjectStore from 'stores/keystone/project';
+import { idNameColumn } from 'utils/table';
 
 export const getWishes = () => {
   const { volumesForSnapshot = [] } = globalServerStore;
@@ -203,19 +204,7 @@ export class CreateSnapshot extends ModalAction {
     }
     const { volumes = [] } = this.state;
     const columns = [
-      {
-        dataIndex: 'id',
-        title: t('ID/Name'),
-        render: (value, record) => {
-          const { name } = record;
-          return (
-            <>
-              <div>{value}</div>
-              <div>{name || '-'}</div>
-            </>
-          );
-        },
-      },
+      idNameColumn,
       {
         dataIndex: 'size',
         title: t('Size'),

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

@@ -46,7 +46,7 @@ export class Backups extends Base {
 
   getColumns = () => [
     {
-      title: t('Name'),
+      title: t('ID/Name'),
       dataIndex: 'name',
       routeName: this.getRouteName('databaseBackupDetail'),
     },

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

@@ -46,7 +46,7 @@ export class Configurations extends Base {
 
   getColumns = () => [
     {
-      title: t('Configuration Group Name'),
+      title: t('Configuration Group ID/Name'),
       dataIndex: 'name',
       routeName: this.getRouteName('configurationsDetail'),
     },

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

@@ -19,6 +19,7 @@ import { VpnEndPointGroupStore } from 'stores/neutron/vpn-endpoint-group';
 import { Col, Popover, Row, Spin } from 'antd';
 import { FileTextOutlined } from '@ant-design/icons';
 import { SubnetStore } from 'stores/neutron/subnet';
+import { idNameColumn } from 'utils/table';
 import { actionConfigs, adminConfigs } from './actions';
 
 export class EndpointGroup extends Base {
@@ -64,16 +65,7 @@ export class EndpointGroup extends Base {
   }
 
   getColumns = () => [
-    {
-      title: t('ID/Name'),
-      dataIndex: 'name',
-      render: (name, record) => (
-        <div>
-          <div>{record.id}</div>
-          <div>{name}</div>
-        </div>
-      ),
-    },
+    idNameColumn,
     {
       title: t('Project ID/Name'),
       dataIndex: 'project_name',

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

@@ -22,6 +22,7 @@ import {
   ikePolicyIKEVersionOptions,
   pfsOptions,
 } from 'resources/neutron/vpn';
+import { idNameColumn } from 'utils/table';
 import { actionConfigs, adminConfigs } from './actions';
 
 export class IKEPolicy extends Base {
@@ -63,16 +64,7 @@ export class IKEPolicy extends Base {
   }
 
   getColumns = () => [
-    {
-      title: t('ID/Name'),
-      dataIndex: 'name',
-      render: (name, record) => (
-        <div>
-          <div>{record.id}</div>
-          <div>{name}</div>
-        </div>
-      ),
-    },
+    idNameColumn,
     {
       title: t('Project ID/Name'),
       dataIndex: 'project_name',

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

@@ -23,6 +23,7 @@ import {
   ipsecPolicyTransformProtocolOptions,
   pfsOptions,
 } from 'resources/neutron/vpn';
+import { idNameColumn } from 'utils/table';
 import { actionConfigs, adminConfigs } from './actions';
 
 export class IPsecPolicy extends Base {
@@ -64,16 +65,7 @@ export class IPsecPolicy extends Base {
   }
 
   getColumns = () => [
-    {
-      title: t('ID/Name'),
-      dataIndex: 'name',
-      render: (name, record) => (
-        <div>
-          <div>{record.id}</div>
-          <div>{name}</div>
-        </div>
-      ),
-    },
+    idNameColumn,
     {
       title: t('Project ID/Name'),
       dataIndex: 'project_name',

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

@@ -16,7 +16,7 @@ import { observer, inject } from 'mobx-react';
 import Base from 'containers/List';
 import { VpnServicesStore } from 'stores/neutron/vpn-service';
 import { vpnStatus, vpnStatusOptions } from 'resources/neutron/vpn';
-import React from 'react';
+import { idNameColumn } from 'utils/table';
 import { actionConfigs, adminConfigs } from './actions';
 
 export class VPNGateway extends Base {
@@ -58,16 +58,7 @@ export class VPNGateway extends Base {
   }
 
   getColumns = () => [
-    {
-      title: t('ID/Name'),
-      dataIndex: 'name',
-      render: (name, record) => (
-        <div>
-          <div>{record.id}</div>
-          <div>{name}</div>
-        </div>
-      ),
-    },
+    idNameColumn,
     {
       title: t('Project ID/Name'),
       dataIndex: 'project_name',

src/resources/cinder/volume.jsx

@@ -18,6 +18,7 @@ import { renderFilterMap } from 'utils/index';
 import globalProjectStore from 'stores/keystone/project';
 import globalVolumeStore from 'stores/cinder/volume';
 import { isEmpty } from 'lodash';
+import { idNameColumn } from 'utils/table';
 
 export const volumeStatus = {
   available: t('Available'),
@@ -144,16 +145,7 @@ export const multiTip = t(
 );
 
 export const volumeColumns = [
-  {
-    title: t('ID/Name'),
-    dataIndex: 'name',
-    render: (value, record) => (
-      <>
-        <p style={{ marginBottom: 0 }}>{record.id}</p>
-        <span>{value || '-'}</span>
-      </>
-    ),
-  },
+  idNameColumn,
   {
     title: t('Type'),
     dataIndex: 'volume_type',

src/resources/neutron/port.jsx

@@ -15,6 +15,7 @@
 import React from 'react';
 import { ipValidate } from 'utils/validate';
 import { getOptions } from 'utils/index';
+import { idNameColumn } from 'utils/table';
 
 const { isIPv4 } = ipValidate;
 
@@ -230,17 +231,7 @@ export function getPortFormItem(withResourceNameAndStatusFilter = true) {
 }
 
 export const portColumns = [
-  {
-    title: t('ID/Name'),
-    dataIndex: 'name',
-    sorter: false,
-    render: (value, record) => (
-      <div>
-        <div>{record.id}</div>
-        <div>{value || '-'}</div>
-      </div>
-    ),
-  },
+  idNameColumn,
   {
     title: t('Owned Network'),
     dataIndex: 'network_name',