ui: Make 'ACL' field as mandatory and add warning message for default_allow and default_deny (#5003)

Co-authored-by: Wei Zhou <weizhouapache@gmail.com>

ui/public/locales/en.json

@@ -2953,6 +2953,8 @@
 "message.move.acl.order.failed": "Failed to move ACL rule",
 "message.move.acl.order.processing": "Moving ACL rule...",
 "message.ncc.delete.confirm": "Please confirm you want to delete this NCC",
+"message.network.acl.default.allow": "Warning: With this policy all traffic will be allowed through the firewall to this VPC tier. You should consider securing your network.",
+"message.network.acl.default.deny": "Warning: With this policy all traffic will be denied through the firewall to this VPC tier. In order to allow traffic through you will need to change policies.",
 "message.network.addvm.desc": "Please specify the network that you would like to add this VM to. A new NIC will be added for this network.",
 "message.network.addvmnic": "Please confirm that you would like to add a new VM NIC for this network.",
 "message.network.description": "Setup network and traffic",

ui/src/views/network/VpcTab.vue

@@ -176,7 +176,7 @@
               <a-form-item :label="$t('label.aclid')">
                 <a-select v-decorator="['acl']">
                   <a-select-option v-for="item in networkAcls" :key="item.id" :value="item.id">
-                    {{ item.name }}
+                    <strong>{{ item.name }}</strong> ({{ item.description }})
                   </a-select-option>
                 </a-select>
               </a-form-item>

ui/src/views/network/VpcTiersTab.vue

@@ -190,12 +190,20 @@
               v-decorator="['externalId']"></a-input>
           </a-form-item>
           <a-form-item :label="$t('label.aclid')">
-            <a-select v-decorator="['acl']">
+            <a-select
+              v-decorator="['acl',{rules: [{ required: true, message: `${$t('label.required')}` }]}]"
+              @change="val => { this.handleNetworkAclChange(val) }">
               <a-select-option v-for="item in networkAclList" :key="item.id" :value="item.id">
-                {{ item.name }}
+                <strong>{{ item.name }}</strong> ({{ item.description }})
               </a-select-option>
             </a-select>
           </a-form-item>
+          <a-alert v-if="this.selectedNetworkAcl.name==='default_allow'" type="warning" show-icon>
+            <span slot="message" v-html="$t('message.network.acl.default.allow')" />
+          </a-alert>
+          <a-alert v-else-if="this.selectedNetworkAcl.name==='default_deny'" type="warning" show-icon>
+            <span slot="message" v-html="$t('message.network.acl.default.deny')" />
+          </a-alert>
         </a-form>
       </a-spin>
     </a-modal>
@@ -279,6 +287,7 @@ export default {
       showAddInternalLB: false,
       networkOfferings: [],
       networkAclList: [],
+      selectedNetworkAcl: {},
       modalLoading: false,
       internalLB: {},
       LBPublicIPs: {},
@@ -412,11 +421,7 @@ export default {
       this.modalLoading = true
       api('listNetworkACLLists', { vpcid: this.resource.id }).then(json => {
         this.networkAclList = json.listnetworkacllistsresponse.networkacllist || []
-        this.$nextTick(function () {
-          this.form.setFieldsValue({
-            acl: this.networkAclList[0].id
-          })
-        })
+        this.handleNetworkAclChange(null)
       }).catch(error => {
         this.$notifyError(error)
       }).finally(() => {
@@ -519,6 +524,13 @@ export default {
         this.fetchLoading = false
       })
     },
+    handleNetworkAclChange (aclId) {
+      if (aclId) {
+        this.selectedNetworkAcl = this.networkAclList.filter(acl => acl.id === aclId)[0]
+      } else {
+        this.selectedNetworkAcl = {}
+      }
+    },
     closeModal () {
       this.$emit('close-action')
     },