feat: Support network port_security_enabled

1. Update create instance with `port_security_enabled = false` network:
if one of selected networks is disable port security, disable select security group
2. Update create ironic with `port_security_enabled = false` network:
if one of selected networks is disable port security, disable select
security group
3. Update instance manage security group in instance detail page:
disable manage security group for disable security group interface
4. Update create network with port_security_enabled prop:
can change port_security_enabled prop value
5. Update edit network with port_security_enabled prop:
can change port_security_enabled prop value
6. Add port_security_enabled prop in network detail page:
show network port_security_enabled value

Change-Id: I2227a9cb84ed87b5d1eedaea206004498ef0fab9

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

@@ -194,31 +194,34 @@ export default class SecurityGroup extends React.Component {
 
   render() {
     const { interfaces, isLoading } = this.store.securityGroups;
-    const { filterData, activeInterfaceId } = this.state;
+    const { filterData, activeInterfaceId, activeInterface } = this.state;
+    const { port_security_enabled = false } = activeInterface || {};
+
     return (
       <div className={classnames(styles.wrapper, this.className)}>
-        {interfaces && interfaces.length ? (
+        <Spin spinning={isLoading}>
-          <Spin spinning={isLoading}>
+          <Radio.Group
-            <Radio.Group
+            defaultValue={0}
-              defaultValue={0}
+            size="large"
-              size="large"
+            marginBottom="20"
-              marginBottom="20"
+            onChange={this.onChange}
-              onChange={this.onChange}
+            className={styles['radio-button']}
-              className={styles['radio-button']}
+          >
-            >
+            {interfaces
-              {toJS(interfaces).map((item, index) =>
+              ? toJS(interfaces).map((item, index) =>
-                this.renderRadio(item, index)
+                  this.renderRadio(item, index)
-              )}
+                )
-            </Radio.Group>
+              : null}
-          </Spin>
+          </Radio.Group>
-        ) : null}
+        </Spin>
-        {!this.isAdminPage && (
+        {!this.isAdminPage && port_security_enabled && (
           <div style={{ marginBottom: 20, marginTop: 20 }}>
             <PrimaryActionButtons
               primaryActions={[ManageSecurityGroup]}
               onFinishAction={this.actionCallback}
               containerProps={{
                 port: activeInterfaceId,
+                portItem: activeInterface,
                 filterData,
               }}
             >

src/pages/compute/containers/Instance/actions/CreateIronic/ConfirmStep/index.jsx

@@ -63,11 +63,9 @@ export default class ConfirmStep extends Base {
 
   getSecurityGroups() {
     const { context } = this.props;
-    const { securityGroup } = context;
+    const { securityGroup: { selectedRows = [] } = {} } = context;
-    const { selectedRows } = securityGroup;
     const values = selectedRows.map((it) => it.name);
     return values;
-    // return values.join(<br />);
   }
 
   getLoginType() {

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

@@ -159,6 +159,9 @@ export default class NetworkStep extends Base {
   get formItems() {
     const { networkSelectRows = [], subnets, initValue = [] } = this.state;
     const showNetworks = networkSelectRows.length > 0;
+    const showSecurityGroups =
+      networkSelectRows.length &&
+      networkSelectRows.every((it) => it.port_security_enabled);
     return [
       {
         name: 'networkSelect',
@@ -229,7 +232,8 @@ export default class NetworkStep extends Base {
         ),
         backendPageStore: this.securityGroupStore,
         extraParams: { project_id: this.currentProjectId },
-        required: true,
+        required: showSecurityGroups,
+        hidden: !showSecurityGroups,
         isMulti: true,
         header: (
           <div style={{ marginBottom: 8 }}>

src/pages/compute/containers/Instance/actions/CreateIronic/index.jsx

@@ -264,8 +264,10 @@ export default class CreateIronic extends StepAction {
     //   // delete_on_termination: deleteType === 1,
     // };
     let hasIp = false;
+    const { selectedRows: securityGroupSelectedRows = [] } =
+      securityGroup || {};
     const server = {
-      security_groups: securityGroup.selectedRows.map((it) => ({
+      security_groups: securityGroupSelectedRows.map((it) => ({
         name: it.id,
       })),
       name,

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

@@ -89,8 +89,7 @@ export default class ConfirmStep extends Base {
 
   getSecurityGroups() {
     const { context } = this.props;
-    const { securityGroup } = context;
+    const { securityGroup: { selectedRows = [] } = {} } = context;
-    const { selectedRows } = securityGroup;
     const values = selectedRows.map((it) => it.name);
     return values;
     // return values.join(<br />);

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

@@ -159,6 +159,9 @@ export default class NetworkStep extends Base {
   get formItems() {
     const { networkSelectRows = [], subnets, initValue = [] } = this.state;
     const showNetworks = networkSelectRows.length > 0;
+    const showSecurityGroups =
+      networkSelectRows.length &&
+      networkSelectRows.every((it) => it.port_security_enabled);
     return [
       {
         name: 'networkSelect',
@@ -229,7 +232,8 @@ export default class NetworkStep extends Base {
         ),
         backendPageStore: this.securityGroupStore,
         extraParams: { project_id: this.currentProjectId },
-        required: true,
+        hidden: !showSecurityGroups,
+        required: showSecurityGroups,
         isMulti: true,
         header: (
           <div style={{ marginBottom: 8 }}>

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

@@ -297,8 +297,10 @@ class StepCreate extends StepAction {
       // rootVolume.disk_bus = 'ide';
       // dataVolumes[0].disk_bus = 'virtio';
     }
+    const { selectedRows: securityGroupSelectedRows = [] } =
+      securityGroup || {};
     const server = {
-      security_groups: securityGroup.selectedRows.map((it) => ({
+      security_groups: securityGroupSelectedRows.map((it) => ({
         name: it.id,
       })),
       name,

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

@@ -62,6 +62,11 @@ export default class BaseDetail extends Base {
         dataIndex: 'qos_policy_id',
         render: (data) => data || '-',
       },
+      {
+        label: t('Port Security Enabled'),
+        dataIndex: 'port_security_enabled',
+        valueRender: 'yesNo',
+      },
     ];
     return {
       title: t('Base Info'),

src/pages/network/containers/Network/actions/CreateNetwork.jsx

@@ -73,6 +73,7 @@ export default class CreateNetwork extends ModalAction {
       ip_version: 'ipv4',
       disable_gateway: false,
       more: false,
+      port_security_enabled: true,
     };
   }
 
@@ -91,6 +92,7 @@ export default class CreateNetwork extends ModalAction {
       host_routes,
       description,
       mtu,
+      port_security_enabled,
       ...rest
     } = values;
 
@@ -103,6 +105,7 @@ export default class CreateNetwork extends ModalAction {
       description,
       availability_zone_hints: [availableZone],
       mtu,
+      port_security_enabled,
     };
 
     const networkAdminPageData = {
@@ -303,6 +306,12 @@ export default class CreateNetwork extends ModalAction {
         type: 'check',
         hidden: !this.isSystemAdmin,
       },
+      {
+        name: 'port_security_enabled',
+        label: t('Port Security Enabled'),
+        type: 'switch',
+        required: true,
+      },
       // {
       //   name: 'admin_state_up',
       //   label: t('Enable Admin State'),

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

@@ -17,6 +17,7 @@ import { ModalAction } from 'containers/Action';
 import globalNetworkStore from 'stores/neutron/network';
 import checkPolicy, { checkPolicyRule } from 'resources/policy';
 import globalRootStore from 'stores/root';
+import { getYesNoList } from 'utils/index';
 
 @inject('rootStore')
 @observer
@@ -49,8 +50,8 @@ export default class Edit extends ModalAction {
 
   onSubmit = (values) => {
     const { item: { id } = {} } = this.props;
-    const { name, description, ...rest } = values;
+    const { name, description, port_security_enabled, ...rest } = values;
-    const data = { name, description };
+    const data = { name, description, port_security_enabled };
     if (this.isSystemAdmin) {
       data.shared = rest.shared;
     }
@@ -85,18 +86,15 @@ export default class Edit extends ModalAction {
       {
         name: 'shared',
         label: t('Shared'),
-        type: 'select',
+        type: 'radio',
         hidden: !this.isSystemAdmin,
-        options: [
+        options: getYesNoList(),
-          {
+      },
-            label: t('Yes'),
+      {
-            value: true,
+        name: 'port_security_enabled',
-          },
+        label: t('Port Security Enabled'),
-          {
+        type: 'switch',
-            label: t('No'),
+        required: true,
-            value: false,
-          },
-        ],
       },
       {
         name: 'router:external',

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

@@ -74,9 +74,9 @@ export default class VirtualAdapterDetail extends Base {
         dataIndex: 'network_id',
       },
       {
-        title: t('Port Security'),
+        title: t('Port Security Enabled'),
         dataIndex: 'port_security_enabled',
-        render: (data) => (data ? t('Open') : t('Close')),
+        valueRender: 'yesNo',
       },
       {
         title: t('Mac Address'),
@@ -98,12 +98,12 @@ export default class VirtualAdapterDetail extends Base {
       },
       {
         title: t('Fixed IPs'),
-        key: 'fixed ips',
+        key: 'fixed_ips',
         component: FixedIPs,
       },
       {
         title: t('Security Groups'),
-        key: 'security groups',
+        key: 'security_groups',
         component: SecurityGroups,
       },
       {
@@ -112,6 +112,10 @@ export default class VirtualAdapterDetail extends Base {
         component: AllowedAddressPair,
       },
     ];
+    const { port_security_enabled } = this.detailData;
+    if (!port_security_enabled) {
+      return tabs.filter((it) => it.key !== 'security_groups');
+    }
     return tabs;
   }
 

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

@@ -35,7 +35,7 @@ export default class ManageSecurityGroup extends ModalAction {
 
   static policy = 'update_port:port_security_enabled';
 
-  static allowed = () => Promise.resolve(true);
+  static allowed = (item) => Promise.resolve(item.port_security_enabled);
 
   init() {
     this.securityGroupStore = new SecurityGroupStore();