fix: adjust the network policy creation logic and optimize the ui dis…

…play

server/config.yaml

@@ -307,7 +307,7 @@ client:
           icon: cogwheel
           children:
             - { name: base-info, title: Basic Info, skipAuth: true }
-            - { name: networkpolicies, title: Network Policy }
+            - { name: networkpolicies, title: Network Isolation }
             - { name: roles, title: Project Roles }
             - { name: members, title: Project Members }
             - {

src/components/Modals/Network/Policies/IpBlock.jsx

@@ -19,7 +19,7 @@
 import React from 'react'
 import { inject, observer } from 'mobx-react'
 import { set } from 'lodash'
-import { Select, Input, Icon } from '@pitrix/lego-ui'
+import { Select, Input, Icon, RadioGroup, RadioButton } from '@pitrix/lego-ui'
 import { Modal, Button, Form } from 'components/Base'
 import ServiceStore from 'stores/service'
 import { generateId } from 'utils'
@@ -138,18 +138,28 @@ export default class NetworkPoliciesIpBlockModal extends React.Component {
         {...rest}
         onOk={this.handleSave}
       >
-        <Form.Item label={t('Direction')} desc={t('NETWORK_POLICY_D_DESC')}>
-          <Select
+        <Form.Item
+          label={`${t('Direction')}:`}
+          desc={t('NETWORK_POLICY_D_DESC')}
+        >
+          <RadioGroup
+            size="large"
             name="direction"
             defaultValue={specType}
+            wrapClassName={styles.dirCheck}
             onChange={v => this.setState({ specType: v })}
-            options={[
-              { value: 'egress', label: t('NETWORK_POLICY_D_OP1') },
-              { value: 'ingress', label: t('NETWORK_POLICY_D_OP2') },
-            ]}
-          />
+          >
+            <RadioButton value="egress">
+              <Icon name="upload" size={32} />
+              <div>{t('NETWORK_POLICY_D_OP1')}</div>
+            </RadioButton>
+            <RadioButton value="ingress">
+              <Icon name="download" size={32} />
+              <div>{t('NETWORK_POLICY_D_OP2')}</div>
+            </RadioButton>
+          </RadioGroup>
         </Form.Item>
-        <Form.Item label={t('CIDR:')} desc={t('CIDR_DESC')}>
+        <Form.Item label="CIDR:" desc={t('NETWORK_POLICY_D_DESC2')}>
           <div className={styles.cidr}>
             <Input
               name="cidr-ip"
@@ -168,7 +178,7 @@ export default class NetworkPoliciesIpBlockModal extends React.Component {
             />
           </div>
         </Form.Item>
-        <div className={styles.title}>{t('Port')}</div>
+        <div className={styles.title}>{`${t('Port')}:`}</div>
         {portRules.map(({ port, protocol }, idx) => (
           <div className={styles.rulerow} key={`${idx}`}>
             <div>

src/components/Modals/Network/Policies/index.jsx

@@ -19,6 +19,7 @@
 import React from 'react'
 import { inject, observer } from 'mobx-react'
 import { set } from 'lodash'
+import { observable, toJS } from 'mobx'
 import classNames from 'classnames'
 import { Modal, Form, Panel } from 'components/Base'
 import ServiceStore from 'stores/service'
@@ -30,23 +31,28 @@ import {
   Select,
   List,
   Checkbox,
+  Icon,
 } from '@pitrix/lego-ui'
 import styles from './index.scss'
 
 @inject('projectStore')
 @observer
 export default class NetworkPoliciesModal extends React.Component {
+  @observable tabName = 'projects'
+
+  @observable specType = 'egress'
+
+  @observable specNameSpaces = []
+
+  @observable specCurNameSpace = ''
+
+  @observable specServices = []
+
   constructor(props) {
     super(props)
     this.projectStore = props.projectStore
     this.serviceStore = new ServiceStore()
-    this.state = {
-      tabName: 'projects',
-      specType: 'egress',
-      specNameSpaces: [],
-      specServices: [],
-      specCurNameSpace: props.namespace,
-    }
+    this.specCurNameSpace = props.namespace
   }
 
   componentDidMount() {
@@ -65,16 +71,15 @@ export default class NetworkPoliciesModal extends React.Component {
   }
 
   handleTabChange = tabName => {
-    this.setState({
-      tabName,
-    })
+    this.tabName = tabName
+    this.specNameSpaces = []
+    this.specCurNameSpace = this.props.namespace
+    this.specServices = []
   }
 
   handleNameSpaceChange = ns => {
     const { cluster } = this.props
-    this.setState({
-      specCurNameSpace: ns,
-    })
+    this.specCurNameSpace = ns
     this.serviceStore.fetchList({
       namespace: ns,
       cluster,
@@ -83,22 +88,18 @@ export default class NetworkPoliciesModal extends React.Component {
   }
 
   handleNameSpaceChecked = (item, checked) => {
-    const { specNameSpaces } = this.state
+    const { specNameSpaces } = this
     const hasIt = specNameSpaces.filter(ns => ns.name === item.name).length > 0
     if (checked && !hasIt) {
       specNameSpaces.push({ name: item.name })
-      this.setState({
-        specNameSpaces,
-      })
+      this.specNameSpaces = toJS(specNameSpaces)
     } else if (!checked && hasIt) {
-      this.setState({
-        specNameSpaces: specNameSpaces.filter(el => el.name !== item.name),
-      })
+      this.specNameSpaces = specNameSpaces.filter(el => el.name !== item.name)
     }
   }
 
   handleServiceChange = (item, checked) => {
-    const { specServices, specCurNameSpace } = this.state
+    const { specCurNameSpace, specServices } = this
     const hasIt =
       specServices.filter(
         ns => ns.name === item.name && ns.namespace === specCurNameSpace
@@ -109,24 +110,21 @@ export default class NetworkPoliciesModal extends React.Component {
         name: item.name,
         namespace: specCurNameSpace,
       })
-      this.setState({
-        specServices,
-      })
+      this.specServices = toJS(specServices)
     } else if (!checked && hasIt) {
-      this.setState({
-        specServices: specServices.filter(
-          el => !(el.name === item.name && el.namespace === specCurNameSpace)
-        ),
-      })
+      this.specServices = specServices.filter(
+        el => !(el.name === item.name && el.namespace === specCurNameSpace)
+      )
     }
   }
 
   handleSave = () => {
-    const { specType, specNameSpaces, specServices } = this.state
+    const { tabName, specType, specNameSpaces, specServices } = this
     const { formTemplate } = this.props
-    const rules = specNameSpaces
-      .map(ns => ({ namespace: ns }))
-      .concat(specServices.map(s => ({ service: s })))
+    const rules =
+      tabName === 'projects'
+        ? specNameSpaces.map(ns => ({ namespace: ns }))
+        : specServices.map(s => ({ service: s }))
     if (rules.length) {
       const direction = specType === 'egress' ? 'to' : 'from'
       set(formTemplate, `spec.${specType}[0].${direction}`, rules)
@@ -139,8 +137,13 @@ export default class NetworkPoliciesModal extends React.Component {
     const projectList = this.projectStore.list
     const serviceList = this.serviceStore.list
     const { ...rest } = this.props
-    const { tabName, specType, specServices, specCurNameSpace } = this.state
-
+    const {
+      specNameSpaces,
+      specType,
+      tabName,
+      specCurNameSpace,
+      specServices,
+    } = this
     return (
       <Modal.Form
         width={600}
@@ -150,15 +153,28 @@ export default class NetworkPoliciesModal extends React.Component {
         {...rest}
         onOk={this.handleSave}
       >
-        <Form.Item label={t('Direction')} desc={t('NETWORK_POLICY_D_DESC')}>
-          <Select
+        <Form.Item
+          label={`${t('Direction')}:`}
+          desc={t('NETWORK_POLICY_D_DESC')}
+        >
+          <RadioGroup
+            size="large"
+            name="direction"
             defaultValue={specType}
-            onChange={v => this.setState({ specType: v })}
-            options={[
-              { value: 'egress', label: t('NETWORK_POLICY_D_OP1') },
-              { value: 'ingress', label: t('NETWORK_POLICY_D_OP2') },
-            ]}
-          />
+            wrapClassName={styles.dirCheck}
+            onChange={v => {
+              this.specType = v
+            }}
+          >
+            <RadioButton value="egress">
+              <Icon name="upload" size={32} />
+              <div>{t('NETWORK_POLICY_D_OP1')}</div>
+            </RadioButton>
+            <RadioButton value="ingress">
+              <Icon name="download" size={32} />
+              <div>{t('NETWORK_POLICY_D_OP2')}</div>
+            </RadioButton>
+          </RadioGroup>
         </Form.Item>
 
         <Form.Item label={`${t('Type')}:`}>
@@ -185,6 +201,9 @@ export default class NetworkPoliciesModal extends React.Component {
             itemRenderer={item => (
               <Checkbox
                 value={item.name}
+                checked={
+                  specNameSpaces.filter(ns => ns.name === item.name).length > 0
+                }
                 onChange={(e, checked) => {
                   this.handleNameSpaceChecked(item, checked)
                 }}

src/components/Modals/Network/Policies/index.scss

@@ -69,9 +69,41 @@
   padding-top: 12px;
 }
 .title {
-  margin-top: 4px;
+  margin-top: 12px;
+  margin-bottom: 8px;
 }
 .disp {
   margin-top: 4px;
   color: $second-text-color;
 }
+.dirCheck {
+  :global {
+    div.control {
+      margin-right: 15px !important;
+      > label.radio-button {
+        transition: all 0.3s ease-in-out;
+        font-size: 12px;
+        font-weight: 700;
+        color: $dark-color01;
+        &:hover {
+          border-color: $dark-color01;
+          box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.2) !important;
+        }
+        &.radio-button-wrapper-checked {
+          color: $dark-color07;
+          border-color: $dark-color01;
+        }
+        border-radius: 5px !important;
+        padding: 0 15px;
+        height: 60px;
+        .label-value {
+          width: 82px;
+          > span.icon {
+            margin-left: 0;
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+}

src/locales/en/network.js

@@ -17,16 +17,21 @@
  */
 
 export default {
+  'Network Policys': 'Network Policies',
   NETWORK_POLICY_DESC:
-    'The network policy is configured to allow network isolation within the same cluster, that is, the ability to build a firewall between certain instances (pods).',
-  NETWORK_POLICY_Q: 'How to use network policies better?',
+    'The Network policy configuration allows network isolation within the same cluster, which means firewalls can be set up between certain instances (Pods).',
+  NETWORK_ISOLATION_DESC:
+    'By configuring network isolation to control traffic between Pod within the same cluster and traffic from outside, applications are isolated and security is enhanced.',
+  NETWORK_POLICY_Q: 'How to use network policy better??',
+  NETWORK_ISOLATION_Q: 'How to use network isolation better?',
   NETWORK_POLICY_A:
     'We have compiled several common application scenarios based on the actual scenarios, and you can refer to the documentation for more information.',
-  NETWORK_POLICY_Q1: 'Requirement to implement a network policy',
+  NETWORK_POLICY_Q1: 'Requirement to implement a network isolation',
+  NETWORK_ISOLATION_Q1: 'Requirement to implement a network policy',
   NETWORK_POLICY_A1: 'xxxxxxxxxx',
   NETWORK_POLICY_EMP_TITLE: 'Project Network Isolation Not Enabled',
   NETWORK_POLICY_EMP_DESC:
-    'If project network isolation is not enabled for the current project, it will allow other projects in the workspace to access it directly by default. If network isolation is not enabled for the workspace, all projects in the cluster will be allowed to access it.',
+    'Due to the enterprise space setup, the current project allows access by other projects within the cluster. When project network isolation is enabled, other projects are denied access to the current project, and you can customize the items, services, and external addresses that need to be released',
   NETWORK_POLICY_STATUS: 'Project Network Isolation',
   NETWORK_POLICY_R_DESC1:
     'You can set access to the following resources (matching any of the following policies)',
@@ -41,6 +46,8 @@ export default {
   NETWORK_POLICY_R2_DESC1:
     'Select a specific IP CIDR range as an entry source or exit destination. Cluster external IP',
   NETWORK_POLICY_D_DESC: 'Match Egress traffic and Ingress traffic',
+  NETWORK_POLICY_D_DESC2:
+    'CIDR is a string representing the IP Block Valid examples are "192.168.1.1/24"',
   NETWORK_POLICY_D_OP1: 'Egress',
   NETWORK_POLICY_D_OP2: 'Ingress',
   NETWORK_POLICY_CREATE_DESC:

src/locales/zh/network.js

@@ -19,6 +19,8 @@
 export default {
   'Network Policy': '网络策略',
   'Network Policies': '网络策略',
+  'Network Policys': '网络策略',
+  'Network Isolation': '网络隔离',
   'Create Network Policy': '创建网络策略',
   'Add Allowlist': '添加白名单',
   Egress: '出口',
@@ -27,17 +29,21 @@ export default {
   'Traffic Ingress': '流量入口',
   Direction: '方向',
   NETWORK_POLICY_DESC:
-    '通过配置网络策略控制同一集群内 Pod 之间的流量以及来自外部的流量，从而实现隔离应用并增强应用的安全性。',
+    '通过配置网络策略，允许在同个集群内实现网络的隔离，也就是可以在某些实例（Pod）之间架起防火墙。',
+  NETWORK_ISOLATION_DESC:
+    '通过配置网络隔离控制同一集群内 Pod 之间的流量以及来自外部的流量，从而实现隔离应用并增强应用的安全性。',
   NETWORK_POLICY_CREATE_DESC:
     '通过配置网络策略控制同一集群内 Pod 之间的流量以及来自外部的流量，从而实现隔离应用并增强应用的安全性。',
   NETWORK_POLICY_Q: '如何更好的使用网络策略?',
+  NETWORK_ISOLATION_Q: '如何更好的使用网络隔离?',
   NETWORK_POLICY_A:
     '根据实际使用场景我们整理了几种较为常见的应用场景，您可以查阅文档了解更多',
   NETWORK_POLICY_Q1: '实现网络策略的必要条件',
+  NETWORK_ISOLATION_Q1: '实现网络隔离的必要条件',
   NETWORK_POLICY_A1: 'xxxxxxxxxx',
   NETWORK_POLICY_EMP_TITLE: '项目网络隔离未开启',
   NETWORK_POLICY_EMP_DESC:
-    '当前项目未开启项目网络隔离，默认将允许企业空间内其它项目直接进行访问，如果企业空间未开启网络隔离，则将会允许集群内所有项目进行访问',
+    '由于企业空间的设置，当前项目允许集群内其他项目进行访问。启用项目网络隔离后，将禁止其他项目访问当前项目，同时可以自定义需要放行的项目、服务、外部地址',
   NETWORK_POLICY_STATUS: '项目网络隔离',
   NETWORK_POLICY_R_DESC1: '可以设置对以下资源进行访问(匹配下面任意策略)',
   NETWORK_POLICY_R_DESC2:
@@ -51,6 +57,7 @@ export default {
   NETWORK_POLICY_R2_DESC1:
     '选择特定的IP CIDR范围以允许作为入口源或出口目的地。集群外部IP',
   NETWORK_POLICY_D_DESC: '匹配Egress(出口)流量以及Ingress(入口)流量',
+  NETWORK_POLICY_D_DESC2: 'CIDR代表一个合法的IP地址块,例如“192.168.1.1/24”',
   NETWORK_POLICY_D_OP1: 'Egress(出口)',
   NETWORK_POLICY_D_OP2: 'Ingress(入口)',