UI: Enable shared network with scope option in advanced zone with SG (#7067)

Author: weizhouapache

ui/src/config/section/network.js

@@ -98,6 +98,17 @@ export default {
           docHelp: 'adminguide/networking_and_traffic.html#configure-guest-traffic-in-an-advanced-zone',
           listView: true,
           popup: true,
+          show: () => {
+            if (!store.getters.zones || store.getters.zones.length === 0) {
+              return false
+            }
+            const AdvancedZones = store.getters.zones.filter(zone => zone.networktype === 'Advanced')
+            const AdvancedZonesWithoutSG = store.getters.zones.filter(zone => zone.securitygroupsenabled === false)
+            if ((isAdmin() && AdvancedZones && AdvancedZones.length > 0) || (AdvancedZonesWithoutSG && AdvancedZonesWithoutSG.length > 0)) {
+              return true
+            }
+            return false
+          },
           component: shallowRef(defineAsyncComponent(() => import('@/views/network/CreateNetwork.vue')))
         },
         {

ui/src/views/compute/wizard/NetworkSelection.vue

@@ -22,7 +22,7 @@
       :placeholder="$t('label.search')"
       v-model:value="filter"
       @search="handleSearch" />
-    <a-button type="primary" @click="onCreateNetworkClick" style="float: right; margin-right: 5px; z-index: 8">
+    <a-button type="primary" @click="onCreateNetworkClick" style="float: right; margin-right: 5px; z-index: 8" v-if="showCreateButton">
       {{ $t('label.create.network') }}
     </a-button>
     <a-table
@@ -100,6 +100,7 @@
 <script>
 import _ from 'lodash'
 import { api } from '@/api'
+import { isAdmin } from '@/role'
 import store from '@/store'
 import CreateNetwork from '@/views/network/CreateNetwork'
 import ResourceIcon from '@/components/view/ResourceIcon'
@@ -150,6 +151,7 @@ export default {
         loading: false,
         opts: []
       },
+      showCreateButton: false,
       showCreateForm: false,
       oldZoneId: null,
       options: {
@@ -237,6 +239,13 @@ export default {
       }
     },
     loading () {
+      api('listZones', { id: this.zoneId }).then(json => {
+        const zoneResponse = json.listzonesresponse.zone || []
+        this.showCreateButton = false
+        if (zoneResponse && zoneResponse.length > 0 && (!zoneResponse[0].securitygroupsenabled || (isAdmin() && zoneResponse[0].networktype === 'Advanced'))) {
+          this.showCreateButton = true
+        }
+      })
       if (!this.loading) {
         if (this.preFillContent.networkids) {
           this.selectedRowKeys = this.preFillContent.networkids

ui/src/views/network/CreateL2NetworkForm.vue

@@ -302,7 +302,7 @@ export default {
       api('listZones', params).then(json => {
         for (const i in json.listzonesresponse.zone) {
           const zone = json.listzonesresponse.zone[i]
-          if (zone.networktype === 'Advanced') {
+          if (zone.networktype === 'Advanced' && zone.securitygroupsenabled !== true) {
             this.zones.push(zone)
           }
         }

ui/src/views/network/CreateNetwork.vue

@@ -26,15 +26,15 @@
           @refresh-data="refreshParent"
           @refresh="handleRefresh"/>
       </a-tab-pane>
-      <a-tab-pane :tab="$t('label.l2')" key="2">
+      <a-tab-pane :tab="$t('label.l2')" key="3" v-if="isAdvancedZoneWithoutSGAvailable">
         <CreateL2NetworkForm
           :loading="loading"
           :resource="resource"
           @close-action="closeAction"
           @refresh-data="refreshParent"
           @refresh="handleRefresh"/>
       </a-tab-pane>
-      <a-tab-pane :tab="$t('label.shared')" key="3">
+      <a-tab-pane :tab="$t('label.shared')" key="2">
         <CreateSharedNetworkForm
           :loading="loading"
           :resource="resource"
@@ -74,31 +74,42 @@ export default {
       actionZoneLoading: false
     }
   },
-  created () {
-    const promises = []
-    promises.push(this.fetchActionZoneData())
-    Promise.all(promises).then(() => {
-      this.isAdvancedZoneWithoutSGAvailable = false
-      this.defaultNetworkTypeTabKey = '2'
-
-      for (const i in this.actionZones) {
-        const zone = this.actionZones[i]
-        if (zone.networktype === 'Advanced' && zone.securitygroupsenabled !== true) {
-          this.isAdvancedZoneWithoutSGAvailable = true
-          this.defaultNetworkTypeTabKey = '1'
-          return
-        }
+  watch: {
+    resource: {
+      deep: true,
+      handler () {
+        this.fetchData()
       }
-    })
+    }
+  },
+  created () {
+    this.fetchData()
   },
   methods: {
+    fetchData () {
+      const promises = []
+      promises.push(this.fetchActionZoneData())
+      Promise.all(promises).then(() => {
+        this.isAdvancedZoneWithoutSGAvailable = false
+        this.defaultNetworkTypeTabKey = '2'
+
+        for (const i in this.actionZones) {
+          const zone = this.actionZones[i]
+          if (zone.networktype === 'Advanced' && zone.securitygroupsenabled !== true) {
+            this.isAdvancedZoneWithoutSGAvailable = true
+            this.defaultNetworkTypeTabKey = '1'
+            return
+          }
+        }
+      })
+    },
     fetchActionZoneData () {
       this.loading = true
       const params = {}
-      if (this.resource && this.resource.zoneid) {
+      if (this.resource.zoneid && this.$route.name === 'deployVirtualMachine') {
         params.id = this.resource.zoneid
       }
-      this.actionZonesLoading = true
+      this.actionZoneLoading = true
       return api('listZones', params).then(json => {
         this.actionZones = json.listzonesresponse.zone
       }).finally(() => {

ui/src/views/network/CreateSharedNetworkForm.vue

@@ -139,13 +139,13 @@
               <a-radio-button value="all" v-if="isAdmin()">
                 {{ $t('label.all') }}
               </a-radio-button>
-              <a-radio-button value="domain" v-if="!parseBooleanValueForKey(selectedZone, 'securitygroupsenabled') && isAdminOrDomainAdmin()">
+              <a-radio-button value="domain" v-if="!parseBooleanValueForKey(selectedZone, 'securitygroupsenabled') && isAdminOrDomainAdmin() || 'Advanced' === selectedZone.networktype && isAdmin()">
                 {{ $t('label.domain') }}
               </a-radio-button>
-              <a-radio-button value="account" v-if="!parseBooleanValueForKey(selectedZone, 'securitygroupsenabled')">
+              <a-radio-button value="account" v-if="!parseBooleanValueForKey(selectedZone, 'securitygroupsenabled') || 'Advanced' === selectedZone.networktype && isAdmin()">
                 {{ $t('label.account') }}
               </a-radio-button>
-              <a-radio-button value="project" v-if="!parseBooleanValueForKey(selectedZone, 'securitygroupsenabled')">
+              <a-radio-button value="project" v-if="!parseBooleanValueForKey(selectedZone, 'securitygroupsenabled') || 'Advanced' === selectedZone.networktype && isAdmin()">
                 {{ $t('label.project') }}
               </a-radio-button>
             </a-radio-group>
@@ -648,7 +648,7 @@ export default {
         api('listZones', params).then(json => {
           for (const i in json.listzonesresponse.zone) {
             const zone = json.listzonesresponse.zone[i]
-            if (zone.networktype === 'Advanced') {
+            if (zone.networktype === 'Advanced' && (isAdmin() || zone.securitygroupsenabled !== true)) {
               this.zones.push(zone)
             }
           }