feat: use the port list page to instead of the virutal adapter

1. Add port list page, the old virtual adapter list page only show the
compute:nova bouned ports and unbouned ports
2. Update actions's allowed check: detach fip
3. Update port store: from virtualAdatperStore to portStore
4. Adjust file/folder path: from virtualAdapter to port

Change-Id: Iceec96731a9fd17de429b4e6061490a26e562162

docs/en/test/2-catalog-introduction.md

@@ -46,7 +46,7 @@ test
 │   │       │   ├── router.spec.js  (Router)
 │   │       │   ├── security-group.spec.js  (Security group)
 │   │       │   ├── topology.spec.js    (Network topology)
-│   │       │   ├── virtual-adapter.spec.js (Virtual Adapter)
+│   │       │   ├── port.spec.js (Virtual Adapter)
 │   │       │   └── vpn.spec.js (VPN)
 │   │       └── storage (Storage)
 │   │           ├── backup.spec.js  (Backup)

docs/en/test/3-4-E2E-resource-operation.md

@@ -36,7 +36,7 @@ In the E2E process, when creating a resource, it is often necessary to create th
 - `createNetworkPolicy`
   - Create network QoS policy
   - Parameter `name`, the name of the strategy
-  - Take virtual adapter modification QoS as an example: `test/e2e/integration/pages/network/virtual-adapter.spec.js`
+  - Take virtual adapter modification QoS as an example: `test/e2e/integration/pages/network/port.spec.js`
     - Created a policy named `policyName` in preparation for modifying QoS
 
     ```javascript
@@ -119,7 +119,7 @@ In the E2E process, when creating a resource, it is often necessary to create th
 - `createSecurityGroup`
   - Create a security group
   - Parameter `name`, the name of the security group
-  - Take the virtual adapter card as an example: `test/e2e/integration/pages/network/virtual-adapter.spec.js`
+  - Take the virtual adapter card as an example: `test/e2e/integration/pages/network/port.spec.js`
      -To test management security group, you need to prepare the security group first
 
     ```javascript
@@ -249,7 +249,7 @@ In the E2E process, when creating a resource, it is often necessary to create th
       router: routerListUrl,
       networkQosPolicy: policyListUrl,
       fip: fipListUrl,
-      virtualAdapter: virtualAdapterListUrl,
+      port: portListUrl,
 
       // security
       securityGroup: securityGroupListUrl,

docs/zh/test/2-catalog-introduction.md

@@ -46,7 +46,7 @@ test
 │   │       │   ├── router.spec.js  (路由器)
 │   │       │   ├── security-group.spec.js  (安全组)
 │   │       │   ├── topology.spec.js    (网络拓扑)
-│   │       │   ├── virtual-adapter.spec.js (虚拟网卡)
+│   │       │   ├── port.spec.js (端口)
 │   │       │   └── vpn.spec.js (VPN)
 │   │       └── storage (存储)
 │   │           ├── backup.spec.js  (备份)

docs/zh/test/3-4-E2E-resource-operation.md

@@ -36,7 +36,7 @@
 - `createNetworkPolicy`
   - 创建网络QoS策略
   - 参数`name`，策略的名称
-  - 以虚拟网卡修改QoS为例`test/e2e/integration/pages/network/virtual-adapter.spec.js`为例
+  - 以端口修改QoS为例`test/e2e/integration/pages/network/port.spec.js`为例
     - 创建了名称为`policyName`的策略，为修改QoS做准备
 
     ```javascript
@@ -119,7 +119,7 @@
 - `createSecurityGroup`
   - 创建安全组
   - 参数`name`，安全组的名称
-  - 以虚拟网卡`test/e2e/integration/pages/network/virtual-adapter.spec.js`为例
+  - 以虚拟网卡`test/e2e/integration/pages/network/port.spec.js`为例
     - 测试管理安全组，需要先准备好安全组
 
     ```javascript
@@ -249,7 +249,7 @@
       router: routerListUrl,
       networkQosPolicy: policyListUrl,
       fip: fipListUrl,
-      virtualAdapter: virtualAdapterListUrl,
+      port: portListUrl,
 
       // security
       securityGroup: securityGroupListUrl,

src/components/FormItem/MemberAllocator/index.jsx

@@ -71,7 +71,7 @@ const MemberAllocator = ({ componentProps, formItemProps }) => {
               dataIndex: 'name',
               render: (n, record) => (
                 <div>
-                  <div>{getLink('virtualAdapterDetail', record)}</div>
+                  <div>{getLink('portDetail', record)}</div>
                   <div>{n || '-'}</div>
                 </div>
               ),

src/components/MagicInput/index.less

@@ -2,6 +2,7 @@
 
 .magic-input-outer-wrapper {
   display: flex;
+  align-items: center;
 }
 
 .magic-input-wrapper {

src/layouts/admin-menu.jsx

@@ -296,17 +296,17 @@ const renderMenu = (t) => {
           ],
         },
         {
-          path: '/network/virtual_adapter_admin',
+          path: '/network/port-admin',
-          name: t('Virtual Adapters'),
+          name: t('Ports'),
-          key: 'virtualAdapterAdmin',
+          key: 'port',
           level: 1,
           children: [
             {
-              path: /^\/network\/virtual_adapter_admin\/detail\/.[^/]+$/,
+              path: /^\/network\/port-admin\/detail\/.[^/]+$/,
-              name: t('Virtual Adapter Detail'),
+              name: t('Port Detail'),
-              key: 'virtualAdapterDetailAdmin',
+              key: 'portDetailAdmin',
               level: 2,
-              routePath: '/network/virtual_adapter_admin/detail/:id',
+              routePath: '/network/port-admin/detail/:id',
             },
           ],
         },

src/layouts/menu.jsx

@@ -262,17 +262,17 @@ const renderMenu = (t) => {
           ],
         },
         {
-          path: '/network/virtual_adapter',
+          path: '/network/port',
-          name: t('Virtual Adapters'),
+          name: t('Ports'),
-          key: 'virtualAdapter',
+          key: 'port',
           level: 1,
           children: [
             {
-              path: /^\/network\/virtual_adapter\/detail\/.[^/]+$/,
+              path: /^\/network\/port\/detail\/.[^/]+$/,
-              name: t('Virtual Adapter Detail'),
+              name: t('Port Detail'),
-              key: 'virtualAdapterDetail',
+              key: 'portDetail',
               level: 2,
-              routePath: '/network/virtual_adapter/detail/:id',
+              routePath: '/network/port/detail/:id',
             },
           ],
         },

src/locales/en.json

@@ -428,7 +428,6 @@
   "Container Deleting": "Container Deleting",
   "Container Detail": "Container Detail",
   "Container Format": "Container Format",
-  "Container ID": "Container ID",
   "Container Killing": "Container Killing",
   "Container Name": "Container Name",
   "Container Orchestration Engine": "Container Orchestration Engine",
@@ -581,6 +580,7 @@
   "DELETE FAILED": "DELETE FAILED",
   "DELETE_IN PROGRESS": "DELETE_IN PROGRESS",
   "DHCP": "DHCP",
+  "DHCP Agent": "DHCP Agent",
   "DHCP Agents": "DHCP Agents",
   "DISK IOPS": "DISK IOPS",
   "DISK Usage(%)": "DISK Usage(%)",
@@ -987,6 +987,7 @@
   "French Guiana": "French Guiana",
   "French Polynesia": "French Polynesia",
   "Frequent login failure will cause the account to be temporarily locked, please operate after 5 minutes": "Frequent login failure will cause the account to be temporarily locked, please operate after 5 minutes",
+  "From port": "From port",
   "Front End": "Front End",
   "Frontend": "Frontend",
   "Full": "Full",
@@ -1333,7 +1334,6 @@
   "Liechtenstein": "Liechtenstein",
   "Lifetime": "Lifetime",
   "Lifetime Value": "Lifetime Value",
-  "Links": "Links",
   "Listener": "Listener",
   "Listener Connection Limit": "Listener Connection Limit",
   "Listener Description": "Listener Description",
@@ -2437,6 +2437,7 @@
   "Unattached": "Unattached",
   "Unavailable": "Unavailable",
   "Unbootable": "Unbootable",
+  "Unbounded": "Unbounded",
   "United Arab Emirates": "United Arab Emirates",
   "United Kingdom": "United Kingdom",
   "United States": "United States",
@@ -2542,17 +2543,15 @@
   "View": "View",
   "View Detail": "View Detail",
   "View Rules": "View Rules",
+  "View virtual adapters": "View virtual adapters",
   "Virgin Islands (U.S.)": "Virgin Islands (U.S.)",
   "Virtual Adapter": "Virtual Adapter",
-  "Virtual Adapter Detail": "Virtual Adapter Detail",
   "Virtual Adapter ID": "Virtual Adapter ID",
-  "Virtual Adapters": "Virtual Adapters",
   "Virtual LAN": "Virtual LAN",
   "Virtual LANs": "Virtual LANs",
   "Virtual Resource Overview": "Virtual Resource Overview",
   "Virtual Resources Used": "Virtual Resources Used",
   "Virtual adapter mainly used for binding instance and other operations, occupying the quota of the port.": "Virtual adapter mainly used for binding instance and other operations, occupying the quota of the port.",
-  "VirtualAdapter Mac": "VirtualAdapter Mac",
   "Visibility": "Visibility",
   "Visualization Compute Optimized Type with GPU": "Visualization Compute Optimized Type with GPU",
   "Volume": "Volume",
@@ -2876,8 +2875,6 @@
   "users": "users",
   "vCPUs": "vCPUs",
   "vCPUs and ram are not used for bare metal scheduling": "vCPUs and ram are not used for bare metal scheduling",
-  "virtual adapter": "virtual adapter",
-  "virtual adapters": "virtual adapters",
   "volume": "volume",
   "volume backup": "volume backup",
   "volume backups": "volume backups",

src/locales/zh.json

@@ -428,7 +428,6 @@
   "Container Deleting": "容器删除中",
   "Container Detail": "容器详情",
   "Container Format": "容器格式",
-  "Container ID": "容器ID",
   "Container Killing": "容器终止中",
   "Container Name": "容器名称",
   "Container Orchestration Engine": "容器编排引擎",
@@ -581,6 +580,7 @@
   "DELETE FAILED": "删除失败",
   "DELETE_IN PROGRESS": "删除中",
   "DHCP": "DHCP",
+  "DHCP Agent": "DHCP服务",
   "DHCP Agents": "DHCP服务",
   "DISK IOPS": "硬盘IOPS",
   "DISK Usage(%)": "硬盘使用率(%)",
@@ -987,6 +987,7 @@
   "French Guiana": "法属圭亚那",
   "French Polynesia": "法属玻里尼西亚",
   "Frequent login failure will cause the account to be temporarily locked, please operate after 5 minutes": "频繁登陆失败会导致账户暂时锁定，请 5min 后再操作",
+  "From port": "从端口自动获取",
   "Front End": "前端",
   "Frontend": "前端",
   "Full": "爆满",
@@ -1333,7 +1334,6 @@
   "Liechtenstein": "列支敦士登",
   "Lifetime": "生存期",
   "Lifetime Value": "生存期值",
-  "Links": "链接",
   "Listener": "监听器",
   "Listener Connection Limit": "监听器连接限制",
   "Listener Description": "监听器描述",
@@ -2437,6 +2437,7 @@
   "Unattached": "未挂载",
   "Unavailable": "不可用",
   "Unbootable": "不可启动",
+  "Unbounded": "未绑定",
   "United Arab Emirates": "阿拉伯联合酋长国",
   "United Kingdom": "英国",
   "United States": "美国",
@@ -2542,17 +2543,15 @@
   "View": "查看",
   "View Detail": "查看详情",
   "View Rules": "查看规则",
+  "View virtual adapters": "仅查看虚拟网卡",
   "Virgin Islands (U.S.)": "维尔京群岛",
   "Virtual Adapter": "虚拟网卡",
-  "Virtual Adapter Detail": "虚拟网卡详情",
   "Virtual Adapter ID": "虚拟网卡ID",
-  "Virtual Adapters": "虚拟网卡",
   "Virtual LAN": "虚拟网卡",
   "Virtual LANs": "块虚拟网卡",
   "Virtual Resource Overview": "虚拟资源总览",
   "Virtual Resources Used": "虚拟资源用量",
   "Virtual adapter mainly used for binding instance and other operations, occupying the quota of the port.": "虚拟网卡，主要用于绑定云主机等操作，占用端口的配额。",
-  "VirtualAdapter Mac": "虚拟网卡的MAC",
   "Visibility": "可见性",
   "Visualization Compute Optimized Type with GPU": "GPU虚拟化型",
   "Volume": "云硬盘",
@@ -2876,8 +2875,6 @@
   "users": "用户",
   "vCPUs": "虚拟CPU",
   "vCPUs and ram are not used for bare metal scheduling": "vCPUs 和 ram 不用于裸机调度",
-  "virtual adapter": "虚拟网卡",
-  "virtual adapters": "虚拟网卡",
   "volume": "云硬盘",
   "volume backup": "云硬盘备份",
   "volume backups": "云硬盘备份",

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

@@ -22,7 +22,7 @@ import { ServerStore } from 'stores/nova/instance';
 import Base from 'containers/TabDetail';
 import Volumes from 'pages/storage/containers/Volume';
 import FloatingIps from 'pages/network/containers/FloatingIp';
-import VirtualAdapter from 'pages/network/containers/VirtualAdapter';
+import VirtualAdapter from 'pages/network/containers/Port';
 import actionConfigsRecycleBin from 'pages/management/containers/RecycleBin/actions';
 import { toJS } from 'mobx';
 import BaseDetail from './BaseDetail';

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

@@ -16,8 +16,7 @@ import React from 'react';
 import { inject, observer } from 'mobx-react';
 import { ModalAction } from 'containers/Action';
 import globalServerStore from 'stores/nova/instance';
-import { VirtualAdapterStore } from 'stores/neutron/virtual-adapter';
+import { PortStore } from 'stores/neutron/port-extension';
-import { PortStore } from 'stores/neutron/port';
 import { SecurityGroupStore } from 'stores/neutron/security-group';
 import { portStatus } from 'resources/neutron/port';
 import {
@@ -36,8 +35,7 @@ export class ManageSecurityGroup extends ModalAction {
   init() {
     this.store = globalServerStore;
     this.securityGroupStore = new SecurityGroupStore();
-    this.portStore = new VirtualAdapterStore();
+    this.portStore = new PortStore();
-    this.portStoreOrigin = new PortStore();
     this.getPorts();
     this.securityGroupMap = {};
   }
@@ -45,21 +43,16 @@ export class ManageSecurityGroup extends ModalAction {
   static policy = 'update_port';
 
   getPorts() {
-    Promise.all([
+    this.portStore.fetchList({ device_id: this.item.id });
-      this.portStore.fetchList({ device_id: this.item.id }),
-      this.portStoreOrigin.fetchList({ device_id: this.item.id }),
-    ]);
   }
 
   get ports() {
     const portsBeauty = toJS(this.portStore.list.data) || [];
-    const portsOrigin = toJS(this.portStoreOrigin.list.data) || [];
     return portsBeauty.map((port) => {
-      const originPort = portsOrigin.find((it) => it.id === port.id);
       return {
         ...port,
         name: port.id,
-        security_groups: originPort.security_groups,
+        security_groups: port.origin_data.security_groups,
       };
     });
   }
@@ -140,8 +133,7 @@ export class ManageSecurityGroup extends ModalAction {
         type: 'select-table',
         required: true,
         data: this.ports,
-        isLoading:
+        isLoading: this.portStore.list.isLoading,
-          this.portStore.list.isLoading && this.portStoreOrigin.list.isLoading,
         isMulti: false,
         onChange: this.onPortChange,
         filterParams: [

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

@@ -18,7 +18,7 @@ import { isEmpty, isArray } from 'lodash';
 import { NetworkStore } from 'stores/neutron/network';
 import { SubnetStore } from 'stores/neutron/subnet';
 import { SecurityGroupStore } from 'stores/neutron/security-group';
-import { VirtualAdapterStore } from 'stores/neutron/virtual-adapter';
+import { PortStore } from 'stores/neutron/port-extension';
 import { ipValidate } from 'utils/validate';
 import Base from 'components/Form';
 import NetworkSelect from 'components/FormItem/NetworkSelect';
@@ -38,7 +38,7 @@ export class NetworkStep extends Base {
     this.networkStore = new NetworkStore();
     this.subnetStore = new SubnetStore();
     this.securityGroupStore = new SecurityGroupStore();
-    this.portStore = new VirtualAdapterStore();
+    this.portStore = new PortStore();
     this.subnetMap = {};
   }
 

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

@@ -164,7 +164,7 @@ export class BaseDetail extends Base {
           <>
             {value.length
               ? value.map((it) => {
-                  const link = this.getLinkRender('virtualAdapterDetail', it, {
+                  const link = this.getLinkRender('portDetail', it, {
                     id: it,
                   });
                   return <div key={it}>{link}</div>;

src/pages/container-service/containers/Containers/actions/StepCreate/StepNetworks/index.jsx

@@ -12,7 +12,7 @@
 
 import React from 'react';
 import { SecurityGroupStore } from 'stores/neutron/security-group';
-import { VirtualAdapterStore } from 'stores/neutron/virtual-adapter';
+import { PortStore } from 'stores/neutron/port-extension';
 import Base from 'components/Form';
 import { inject, observer } from 'mobx-react';
 import { portColumns, portFilters } from 'src/resources/neutron/port';
@@ -24,7 +24,7 @@ import { getLinkRender } from 'utils/route-map';
 
 export class StepNetworks extends Base {
   init() {
-    this.portStore = new VirtualAdapterStore();
+    this.portStore = new PortStore();
     this.securityGroupStore = new SecurityGroupStore();
   }
 

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

@@ -70,7 +70,7 @@ export class Resource extends Base {
       },
       {
         key: 'OS::Ironic::Port',
-        routeName: 'virtualAdapterDetail',
+        routeName: 'portDetail',
       },
       {
         key: 'OS::Keystone::Domain',
@@ -111,7 +111,7 @@ export class Resource extends Base {
       },
       {
         key: 'OS::Neutron::Port',
-        routeName: 'virtualAdapterDetail',
+        routeName: 'portDetail',
       },
       {
         key: 'OS::Neutron::QoSPolicy',

src/pages/network/containers/LoadBalancers/Listener/Detail/Member/Actions/CreateMember.jsx

@@ -16,7 +16,7 @@ import React from 'react';
 import { inject, observer } from 'mobx-react';
 import { ModalAction } from 'containers/Action';
 import { PoolMemberStore } from 'stores/octavia/pool-member';
-import { VirtualAdapterStore } from 'stores/neutron/virtual-adapter';
+import { PortStore } from 'stores/neutron/port-extension';
 import { toJS } from 'mobx';
 import { uniqWith, get } from 'lodash';
 import globalLbaasStore from 'stores/octavia/loadbalancer';
@@ -39,7 +39,7 @@ export class CreateAction extends ModalAction {
     );
 
   init() {
-    this.store = new VirtualAdapterStore();
+    this.store = new PortStore();
     this.memberStore = new PoolMemberStore();
     this.lbDetail = {};
     this.state = {

src/pages/network/containers/LoadBalancers/StepCreateComponents/MemberStep/index.jsx

@@ -14,14 +14,12 @@
 
 import { inject, observer } from 'mobx-react';
 import Base from 'components/Form';
-import { PortStore } from 'stores/neutron/port';
+import { PortStore } from 'stores/neutron/port-extension';
-import { VirtualAdapterStore } from 'stores/neutron/virtual-adapter';
 import { get } from 'lodash';
 
 export class MemberStep extends Base {
   init() {
-    this.store = new VirtualAdapterStore();
+    this.store = new PortStore();
-    this.portStore = new PortStore();
     this.state = {
       ports: [],
     };

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

@@ -16,7 +16,7 @@ import { inject, observer } from 'mobx-react';
 import Base from 'containers/TabDetail';
 import { NetworkStore } from 'stores/neutron/network';
 import { networkStatus } from 'resources/neutron/network';
-import VirtualAdapter from 'src/pages/network/containers/VirtualAdapter';
+import Port from 'src/pages/network/containers/Port';
 import globalRootStore from 'stores/root';
 import Subnets from './Subnets';
 import Detail from './Detail';
@@ -145,7 +145,7 @@ export class NetworkDetail extends Base {
       {
         title: t('Ports'),
         key: 'ports',
-        component: VirtualAdapter,
+        component: Port,
       },
     ];
     return tabs;

src/pages/network/containers/Port/Detail/AllowedAddressPair/actions/CreateAllowedAddressPair.jsx

@@ -14,7 +14,7 @@
 
 import { inject, observer } from 'mobx-react';
 import { ModalAction } from 'containers/Action';
-import globalVirtualAdapterStore from 'stores/neutron/virtual-adapter';
+import globalPortStore from 'stores/neutron/port-extension';
 import { ipValidate } from 'utils/validate';
 import { isEmpty } from 'lodash';
 
@@ -28,7 +28,7 @@ export class CreateAllowedAddressPair extends ModalAction {
   static policy = 'update_port';
 
   init() {
-    this.store = globalVirtualAdapterStore;
+    this.store = globalPortStore;
   }
 
   get name() {
@@ -62,12 +62,12 @@ export class CreateAllowedAddressPair extends ModalAction {
       ip_address,
     };
     mac_address.type === 'manual' && (data.mac_address = mac_address.mac);
-    return globalVirtualAdapterStore
+    return globalPortStore
       .update(this.item, {
         allowed_address_pairs: [data, ...allowed_address_pairs],
       })
       .then((ret) => {
-        globalVirtualAdapterStore.setDetail(ret.port);
+        globalPortStore.setDetail(ret.port);
       });
   };
 
@@ -137,7 +137,7 @@ export class CreateAllowedAddressPair extends ModalAction {
         type: 'mac-address',
         options: [
           {
-            label: t('VirtualAdapter Mac'),
+            label: t('From port'),
             value: 'auto',
           },
           {

src/pages/network/containers/Port/Detail/AllowedAddressPair/actions/Delete.jsx

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { ConfirmAction } from 'containers/Action';
-import globalVirtualAdapterStore from 'stores/neutron/virtual-adapter';
+import globalPortStore from 'stores/neutron/port-extension';
 
 export default class DeleteAction extends ConfirmAction {
   get id() {
@@ -57,7 +57,7 @@ export default class DeleteAction extends ConfirmAction {
     const newData = allowed_address_pairs.filter(
       (i) => i.ip_address !== data.ip_address
     );
-    return globalVirtualAdapterStore
+    return globalPortStore
       .update(
         { id },
         {
@@ -65,7 +65,7 @@ export default class DeleteAction extends ConfirmAction {
         }
       )
       .then((ret) => {
-        globalVirtualAdapterStore.setDetail(ret.port);
+        globalPortStore.setDetail(ret.port);
       });
   };
 }

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

@@ -14,13 +14,13 @@
 
 import { observer, inject } from 'mobx-react';
 import Base from 'containers/List';
-import globalVirtualAdapterStore from 'stores/neutron/virtual-adapter';
+import globalPortStore from 'stores/neutron/port-extension';
 import List from 'stores/base-list';
 import actionConfigs from './actions';
 
 export class AllowedAddressPair extends Base {
   init() {
-    this.store = globalVirtualAdapterStore;
+    this.store = globalPortStore;
     // because of the father component use new Store
     // so set detail to globalStore to share data
     this.store.setDetail(this.props.detail);

src/pages/network/containers/Port/Detail/FixedIPs/actions/ReleaseIP.jsx

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { ConfirmAction } from 'containers/Action';
-import globalVirtualAdapterStore from 'stores/neutron/virtual-adapter';
+import globalPortStore from 'stores/neutron/port-extension';
 
 export default class DeleteAction extends ConfirmAction {
   get id() {
@@ -64,7 +64,7 @@ export default class DeleteAction extends ConfirmAction {
         (it) => it.ip_address !== ip_address || it.subnet_id !== subnet_id
       );
     }
-    return globalVirtualAdapterStore.update(
+    return globalPortStore.update(
       { id },
       {
         fixed_ips: newFixedIps,

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

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import AllocateIP from 'pages/network/containers/VirtualAdapter/actions/AllocateIP';
+import AllocateIP from 'pages/network/containers/Port/actions/AllocateIP';
 import ReleaseIP from './ReleaseIP';
 
 const actionConfigs = {

src/pages/network/containers/Port/Detail/SecurityGroups/actions/Detach.jsx

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { ConfirmAction } from 'containers/Action';
-import globalVirtualAdapterStore from 'stores/neutron/virtual-adapter';
+import globalPortStore from 'stores/neutron/port-extension';
 
 export default class DetachAction extends ConfirmAction {
   get id() {
@@ -45,6 +45,6 @@ export default class DetachAction extends ConfirmAction {
     const data = {
       security_groups: security_groups.filter((it) => it !== item.id),
     };
-    return globalVirtualAdapterStore.update({ id }, data);
+    return globalPortStore.update({ id }, data);
   };
 }

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

@@ -12,18 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import ManageSecurityGroup from 'pages/network/containers/VirtualAdapter/actions/ManageSecurityGroup';
+import ManageSecurityGroup from 'pages/network/containers/Port/actions/ManageSecurityGroup';
 
 const actionConfigs = {
-  rowActions: {
+  rowActions: {},
-    // firstAction: EditAction,
+  batchActions: [],
-    // moreActions: [{
-    //   action: Attach,
-    // }],
-  },
-  batchActions: [
-    //   DeleteAction,
-  ],
   primaryActions: [ManageSecurityGroup],
 };
 

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

@@ -14,9 +14,9 @@
 
 import React from 'react';
 import { observer, inject } from 'mobx-react';
-import { VirtualAdapterStore } from 'stores/neutron/virtual-adapter';
+import { PortStore } from 'stores/neutron/port-extension';
 import { Button, Table, Collapse, Divider, Col, Row, Spin, Empty } from 'antd';
-import ManageSecurityGroup from 'pages/network/containers/VirtualAdapter/actions/ManageSecurityGroup';
+import ManageSecurityGroup from 'pages/network/containers/Port/actions/ManageSecurityGroup';
 import { Link } from 'react-router-dom';
 import classnames from 'classnames';
 import { toJS } from 'mobx';
@@ -34,7 +34,7 @@ const { Panel } = Collapse;
 export class SecurityGroup extends React.Component {
   constructor(props) {
     super(props);
-    this.store = new VirtualAdapterStore();
+    this.store = new PortStore();
   }
 
   componentDidMount() {

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

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { inject, observer } from 'mobx-react';
-import { VirtualAdapterStore } from 'stores/neutron/virtual-adapter';
+import { PortStore } from 'stores/neutron/port-extension';
 import Base from 'containers/TabDetail';
 import { networkStatus } from 'resources/neutron/network';
 import FixedIPs from './FixedIPs';
@@ -22,9 +22,9 @@ import AllowedAddressPair from './AllowedAddressPair';
 import BaseDetail from './BaseDetail';
 import actionConfigs from '../actions';
 
-export class VirtualAdapterDetail extends Base {
+export class PortDetail extends Base {
   get name() {
-    return t('virtual adapter');
+    return t('port');
   }
 
   get policy() {
@@ -32,7 +32,7 @@ export class VirtualAdapterDetail extends Base {
   }
 
   get listUrl() {
-    return this.getRoutePath('virtualAdapter');
+    return this.getRoutePath('port');
   }
 
   get actionConfigs() {
@@ -118,8 +118,8 @@ export class VirtualAdapterDetail extends Base {
   }
 
   init() {
-    this.store = new VirtualAdapterStore();
+    this.store = new PortStore();
   }
 }
 
-export default inject('rootStore')(observer(VirtualAdapterDetail));
+export default inject('rootStore')(observer(PortDetail));

src/pages/network/containers/Port/actions/AllocateIP.jsx

@@ -14,7 +14,7 @@
 
 import { inject, observer } from 'mobx-react';
 import { ModalAction } from 'containers/Action';
-import globalVirtualAdapterStore from 'stores/neutron/virtual-adapter';
+import globalPortStore from 'stores/neutron/port-extension';
 import { NetworkStore } from 'stores/neutron/network';
 import { SubnetStore } from 'stores/neutron/subnet';
 
@@ -79,7 +79,7 @@ export class AllocateIP extends ModalAction {
       }
       return ret;
     });
-    return globalVirtualAdapterStore.update(this.item, {
+    return globalPortStore.update(this.item, {
       fixed_ips: [...data, ...this.item.fixed_ips],
     });
   };

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

@@ -20,7 +20,7 @@ import { Button } from 'antd';
 import { NetworkStore } from 'stores/neutron/network';
 import { SecurityGroupStore } from 'stores/neutron/security-group';
 import { QoSPolicyStore } from 'stores/neutron/qos-policy';
-import globalVirtualAdapterStore from 'stores/neutron/virtual-adapter';
+import globalPortStore from 'stores/neutron/port-extension';
 import globalProjectStore from 'stores/keystone/project';
 import { SubnetStore } from 'stores/neutron/subnet';
 import { getQoSPolicyTabs } from 'resources/neutron/qos-policy';
@@ -200,7 +200,7 @@ export class CreateAction extends ModalAction {
       (data.security_groups = security_groups.selectedRowKeys || undefined);
     data.project_id = this.currentProjectId;
     bindingProfile && (data['binding:profile'] = JSON.parse(bindingProfile));
-    return globalVirtualAdapterStore.create(data);
+    return globalPortStore.create(data);
   };
 
   get formItems() {

src/pages/network/containers/Port/actions/Delete.jsx

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { ConfirmAction } from 'containers/Action';
-import globalVirtualAdapter from 'stores/neutron/virtual-adapter';
+import globalPortStore from 'stores/neutron/port-extension';
 
 export default class DeleteAction extends ConfirmAction {
   get id() {
@@ -50,5 +50,5 @@ export default class DeleteAction extends ConfirmAction {
     return true;
   }
 
-  onSubmit = (data) => globalVirtualAdapter.delete(data);
+  onSubmit = (data) => globalPortStore.delete(data);
 }

src/pages/network/containers/Port/actions/Detach.jsx

@@ -38,7 +38,8 @@ export default class Detach extends ConfirmAction {
 
   policy = 'os_compute_api:os-attach-interfaces:delete';
 
-  allowedCheckFunc = (item) => !!item.device_id;
+  allowedCheckFunc = (item) =>
+    !!item.device_id && item.device_owner === 'compute:nova';
 
   onSubmit = async () => {
     const { id, device_id } = this.item;

src/pages/network/containers/Port/actions/Edit.jsx

@@ -14,7 +14,7 @@
 
 import { inject, observer } from 'mobx-react';
 import { ModalAction } from 'containers/Action';
-import globalVirtualAdapterStore from 'stores/neutron/virtual-adapter';
+import globalPortStore from 'stores/neutron/port-extension';
 
 const portTypes =
   'normal,macvtap,direct,baremetal,direct-physical,virtio-forwarder,smart-nic';
@@ -60,7 +60,7 @@ export class Edit extends ModalAction {
     if (type && type !== 'auto') {
       data.mac_address = mac;
     }
-    return globalVirtualAdapterStore.update({ id }, data);
+    return globalPortStore.update({ id }, data);
   };
 
   get formItems() {

src/pages/network/containers/Port/actions/ManageSecurityGroup.jsx

@@ -14,7 +14,7 @@
 
 import { inject, observer } from 'mobx-react';
 import { ModalAction } from 'containers/Action';
-import globalVirtualAdapterStore from 'stores/neutron/virtual-adapter';
+import globalPortStore from 'stores/neutron/port-extension';
 import { SecurityGroupStore } from 'stores/neutron/security-group';
 import {
   securityGroupColumns,
@@ -74,7 +74,7 @@ export class ManageSecurityGroup extends ModalAction {
     const { id, security_groups, port_security_enabled } = this.item;
     let sgs = security_groups;
     if (!security_groups) {
-      const detail = await globalVirtualAdapterStore.fetchDetail({ id });
+      const detail = await globalPortStore.fetchDetail({ id });
       sgs = detail.security_groups;
     }
     const results = await Promise.all(

src/pages/network/containers/Port/actions/ModifyQoS.jsx

@@ -16,7 +16,7 @@ import React from 'react';
 import { inject, observer } from 'mobx-react';
 import { ModalAction } from 'containers/Action';
 import { QoSPolicyStore } from 'stores/neutron/qos-policy';
-import globalVirtualAdapterStore from 'stores/neutron/virtual-adapter';
+import globalPortStore from 'stores/neutron/port-extension';
 import { getQoSPolicyTabs } from 'resources/neutron/qos-policy';
 import { qosEndpoint } from 'client/client/constants';
 
@@ -103,7 +103,7 @@ export class ModifyQoS extends ModalAction {
             ? null
             : qos_policy_id.selectedRowKeys[0]);
     }
-    return globalVirtualAdapterStore.update({ id }, data);
+    return globalPortStore.update({ id }, data);
   };
 
   get formItems() {

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

@@ -1,4 +1,4 @@
-// Copyright 2021 99cloud
+// Copyright 2022 99cloud
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -15,15 +15,15 @@
 import React from 'react';
 import { observer, inject } from 'mobx-react';
 import Base from 'containers/List';
-import { VirtualAdapterStore } from 'stores/neutron/virtual-adapter';
+import { PortStore } from 'stores/neutron/port-extension';
 import { portStatus } from 'resources/neutron/port';
 import { emptyActionConfig } from 'utils/constants';
 import actionConfigs from './actions';
 
-export class VirtualAdapter extends Base {
+export class Port extends Base {
   init() {
-    this.store = new VirtualAdapterStore();
+    this.store = new PortStore();
-    this.downloadStore = new VirtualAdapterStore();
+    this.downloadStore = new PortStore();
   }
 
   get isInstanceDetail() {
@@ -61,8 +61,6 @@ export class VirtualAdapter extends Base {
       newParams.device_id = id;
     } else if (this.isNetworkDetail) {
       newParams.network_id = id;
-    } else {
-      newParams.device_owner = ['compute:nova', ''];
     }
     return newParams;
   };
@@ -72,7 +70,7 @@ export class VirtualAdapter extends Base {
   }
 
   get name() {
-    return t('virtual adapters');
+    return t('ports');
   }
 
   get adminPageHasProjectFilter() {
@@ -99,16 +97,56 @@ export class VirtualAdapter extends Base {
     return actionConfigs.actionConfigs;
   }
 
-  // get hideCustom () {
+  renderResource = (serverName, item) => {
-  //   return true;
+    const { device_id, device_owner } = item;
-  // }
+    if (!device_owner) {
+      return device_id || '-';
+    }
+    let value = device_id;
+    let link = null;
+    if (device_owner === 'compute:nova') {
+      value = serverName ? `${device_id} (${serverName})` : device_id;
+      link = this.getLinkRender(
+        'instanceDetail',
+        value,
+        { id: device_id },
+        { tab: 'interface' }
+      );
+    } else if (
+      [
+        'network:router_interface',
+        'network:ha_router_replicated_interface',
+        'network:router_ha_interface',
+      ].includes(device_owner)
+    ) {
+      link = this.getLinkRender('routerDetail', value, { id: device_id });
+    } else if (device_owner === 'network:floatingip') {
+      link = this.getLinkRender('fipDetail', value, { id: device_id });
+    }
+    if (link) {
+      return (
+        <>
+          {device_owner}
+          <br />
+          {link}
+        </>
+      );
+    }
+    return (
+      <>
+        {device_owner}
+        <br />
+        {device_id || '-'}
+      </>
+    );
+  };
 
   getColumns = () => {
     const columns = [
       {
         title: t('ID/Name'),
         dataIndex: 'name',
-        routeName: this.getRouteName('virtualAdapterDetail'),
+        routeName: this.getRouteName('portDetail'),
       },
       {
         title: t('Project ID/Name'),
@@ -120,43 +158,17 @@ export class VirtualAdapter extends Base {
       {
         title: t('Bind Resource'),
         dataIndex: 'server_name',
-        stringify: (server_name, item) => {
+        stringify: (serverName, item) => {
-          if (item.device_id && item.device_owner === 'compute:nova') {
+          const { device_id, device_owner } = item;
-            return `${item.device_owner} \n ${item.device_id} (${server_name})`;
+          if (device_id && device_owner === 'compute:nova' && serverName) {
+            return `${device_owner} \n ${device_id} (${serverName})`;
           }
           return `
-            ${item.device_owner} ${item.device_owner && `\n`}
+            ${device_owner} ${device_owner && `\n`}
-            ${item.device_id || '-'}
+            ${device_id || '-'}
           `;
         },
-        render: (server_name, item) => {
+        render: this.renderResource,
-          const { device_id, device_owner } = item;
-          if (device_id && device_owner === 'compute:nova') {
-            const value = server_name
-              ? `${device_id} (${server_name})`
-              : device_id;
-            const link = this.getLinkRender(
-              'instanceDetail',
-              value,
-              { id: item.device_id },
-              { tab: 'interface' }
-            );
-            return (
-              <>
-                {item.device_owner}
-                <br />
-                {link}
-              </>
-            );
-          }
-          return (
-            <>
-              {item.device_owner}
-              {item.device_owner && <br />}
-              {item.device_id || '-'}
-            </>
-          );
-        },
         isHideable: true,
         sorter: false,
       },
@@ -228,8 +240,38 @@ export class VirtualAdapter extends Base {
         name: 'network_name',
       });
     }
+    const deviceOwner = {
+      label: t('Device Owner'),
+      name: 'device_owner',
+      options: [
+        {
+          label: t('Instance'),
+          key: 'compute:nova',
+          checkLabel: t('View virtual adapters'),
+          isQuick: true,
+        },
+        {
+          label: t('Router'),
+          key: 'network:router_ha_interface,network:ha_router_replicated_interface,network:router_interface,network:router_gateway,network:router_interface_distributed,network:router_centralized_snat',
+        },
+        {
+          label: t('Floating IP'),
+          key: 'network:floatingip,network:floatingip_agent_gateway,',
+        },
+        { label: t('DHCP Agent'), key: 'network:dhcp' },
+        {
+          label: t('Others'),
+          key: 'network:local_ip,network:routed,network:distributed',
+        },
+        {
+          label: t('Unbounded'),
+          key: 'none',
+        },
+      ],
+    };
+    ret.push(deviceOwner);
     return ret;
   }
 }
 
-export default inject('rootStore')(observer(VirtualAdapter));
+export default inject('rootStore')(observer(Port));

src/pages/network/routes/index.js

@@ -22,9 +22,9 @@ import FloatingIp from '../containers/FloatingIp';
 import FloatingIpDetail from '../containers/FloatingIp/Detail';
 import Topology from '../containers/Topology';
 import RouterDetail from '../containers/Router/Detail';
-import PortDetail from '../containers/Router/Port/Detail';
+import RouterPortDetail from '../containers/Router/Port/Detail';
-import VirtualAdapter from '../containers/VirtualAdapter';
+import Port from '../containers/Port';
-import VirtualAdapterDetail from '../containers/VirtualAdapter/Detail';
+import PortDetail from '../containers/Port/Detail';
 import QoSPolicy from '../containers/QoSPolicy';
 import AdminQoSPolicy from '../containers/QoSPolicy/QoSPolicy';
 import QoSPolicyDetail from '../containers/QoSPolicy/Detail';
@@ -72,12 +72,12 @@ export default [
       },
       {
         path: `${PATH}/router/:routerId/port/:id`,
-        component: PortDetail,
+        component: RouterPortDetail,
         exact: true,
       },
       {
         path: `${PATH}/router-admin/:routerId/port/:id`,
-        component: PortDetail,
+        component: RouterPortDetail,
         exact: true,
       },
       { path: `${PATH}/floatingip`, component: FloatingIp, exact: true },
@@ -93,23 +93,23 @@ export default [
         exact: true,
       },
       {
-        path: `${PATH}/virtual_adapter`,
+        path: `${PATH}/port`,
-        component: VirtualAdapter,
+        component: Port,
         exact: true,
       },
       {
-        path: `${PATH}/virtual_adapter_admin`,
+        path: `${PATH}/port-admin`,
-        component: VirtualAdapter,
+        component: Port,
         exact: true,
       },
       {
-        path: `${PATH}/virtual_adapter/detail/:id`,
+        path: `${PATH}/port/detail/:id`,
-        component: VirtualAdapterDetail,
+        component: PortDetail,
         exact: true,
       },
       {
-        path: `${PATH}/virtual_adapter_admin/detail/:id`,
+        path: `${PATH}/port-admin/detail/:id`,
-        component: VirtualAdapterDetail,
+        component: PortDetail,
         exact: true,
       },
       { path: `${PATH}/qos-policy`, component: QoSPolicy, exact: true },

src/resources/neutron/port.jsx

@@ -112,7 +112,7 @@ export function getPortFormItem(device_owner) {
         {
           title: t('ID/Name'),
           dataIndex: 'name',
-          routeName: this.getRouteName('virtualAdapterDetail'),
+          routeName: this.getRouteName('portDetail'),
         },
         {
           title: t('Description'),

src/stores/index.jsx

@@ -12,7 +12,7 @@ import globalServerGroupStore from 'stores/nova/server-group';
 import globalSnapshotStore from 'stores/cinder/snapshot';
 import globalStaticRouteStore from 'stores/neutron/static-route';
 import globalSubnetStore from 'stores/neutron/subnet';
-import globalVirtualAdapterStore from 'stores/neutron/virtual-adapter';
+import globalPortStore from 'stores/neutron/port-extension';
 import globalVolumeStore from 'stores/cinder/volume';
 import globalComputeHostStore from 'stores/nova/compute-host';
 import globalHypervisorStore from 'stores/nova/hypervisor';
@@ -33,9 +33,9 @@ export default {
   globalSnapshotStore,
   globalStaticRouteStore,
   globalSubnetStore,
-  globalVirtualAdapterStore,
   globalVolumeStore,
   globalComputeHostStore,
   globalHypervisorStore,
   globalStackStore,
+  globalPortStore,
 };

src/stores/neutron/port-extension.js

@@ -19,8 +19,9 @@ import globalFloatingIpsStore from 'stores/neutron/floatingIp';
 import client from 'client';
 import List from 'stores/base-list';
 import Base from 'stores/base';
+import { isString } from 'lodash';
 
-export class VirtualAdapterStore extends Base {
+export class PortStore extends Base {
   get client() {
     return client.neutron.ports;
   }
@@ -40,6 +41,24 @@ export class VirtualAdapterStore extends Base {
     }
   };
 
+  get paramsFuncPage() {
+    return (params, all_projects) => {
+      const { current, device_owner, ...rest } = params;
+      const newParams = { ...rest };
+      if (device_owner && isString(device_owner)) {
+        if (device_owner === 'none') {
+          newParams.device_owner = [''];
+        } else {
+          newParams.device_owner = device_owner.split(',');
+        }
+      }
+      if (!all_projects) {
+        newParams.tenant_id = this.currentProjectId;
+      }
+      return newParams;
+    };
+  }
+
   @observable
   fixed_ips = new List();
 
@@ -133,6 +152,6 @@ export class VirtualAdapterStore extends Base {
   }
 }
 
-const globalVirtualAdapterStore = new VirtualAdapterStore();
+const globalPortStore = new PortStore();
 
-export default globalVirtualAdapterStore;
+export default globalPortStore;

test/e2e/config/config-network.yaml

@@ -21,7 +21,7 @@ testFiles:
   # network
   - pages/network/router.spec.js
   - pages/network/network.spec.js
-  - pages/network/virtual-adapter.spec.js
+  - pages/network/port.spec.js
   - pages/network/qos-policy.spec.js
   - pages/network/floatingip.spec.js
   - pages/network/security-group.spec.js

test/e2e/config/config.yaml

@@ -43,7 +43,7 @@ testFiles:
   # network
   - pages/network/router.spec.js
   - pages/network/network.spec.js
-  - pages/network/virtual-adapter.spec.js
+  - pages/network/port.spec.js
   - pages/network/qos-policy.spec.js
   - pages/network/floatingip.spec.js
   - pages/network/security-group.spec.js

test/e2e/integration/pages/network/port.spec.js

@@ -13,18 +13,18 @@
 // limitations under the License.
 
 import { onlyOn } from '@cypress/skip-test';
-import { virtualAdapterListUrl } from '../../../support/constants';
+import { portListUrl } from '../../../support/constants';
 
-describe('The Virtual Adapter Page', () => {
+describe('The Port Page', () => {
-  const listUrl = virtualAdapterListUrl;
+  const listUrl = portListUrl;
   const uuid = Cypress._.random(0, 1e6);
-  const name = `e2e-virtual-adapter-${uuid}`;
+  const name = `e2e-port-${uuid}`;
   const newname = `${name}-1`;
-  const securityGroupName = `e2e-sg-for-virtual-adapter-${uuid}`;
+  const securityGroupName = `e2e-sg-for-port-${uuid}`;
-  const policyName = `e2e-policy-for-virtual-adapter-${uuid}`;
+  const policyName = `e2e-policy-for-port-${uuid}`;
-  const networkName = `e2e-network-for-virtual-adapter-${uuid}`;
+  const networkName = `e2e-network-for-port-${uuid}`;
-  const instanceName = `e2e-instance-for-virtual-adapter-${uuid}`;
+  const instanceName = `e2e-instance-for-port-${uuid}`;
-  const routerName = `e2e-router-for-virtual-adapter-${uuid}`;
+  const routerName = `e2e-router-for-port-${uuid}`;
   const qosServiceEnabled = (Cypress.env('extensions') || []).includes(
     'neutron::qos'
   );

test/e2e/support/constants.js

@@ -36,7 +36,7 @@ export const networkListUrl = '/network/networks';
 export const routerListUrl = '/network/router';
 export const policyListUrl = '/network/qos-policy-admin';
 export const fipListUrl = '/network/floatingip';
-export const virtualAdapterListUrl = '/network/virtual_adapter';
+export const portListUrl = '/network/port';
 export const vpnListUrl = '/network/vpn';
 export const lbListUrl = '/network/load-balancers';
 export const topologyUrl = '/network/topo';
@@ -85,7 +85,7 @@ export default {
   router: routerListUrl,
   networkQosPolicy: policyListUrl,
   fip: fipListUrl,
-  virtualAdapter: virtualAdapterListUrl,
+  port: portListUrl,
 
   // security
   securityGroup: securityGroupListUrl,