createnetwork: Show tabs only when supported networks are determined (#901)

davidjumani · yadvr · commit 5ee41a51c954 · 2021-01-20T07:06:23.000+05:30
Signed-off-by: Rohit Yadav &lt;rohit.yadav@shapeblue.com&gt;
diff --git a/ui/src/views/network/CreateNetwork.vue b/ui/src/views/network/CreateNetwork.vue
@@ -16,9 +16,9 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
-    <a-tabs defaultActiveKey="1" :animated="false">
-      <a-tab-pane :tab="$t('label.isolated')" key="1" v-if="this.isAdvancedZoneWithoutSGAvailable()">
+  <a-spin :spinning="loading" class="form-layout">
+    <a-tabs defaultActiveKey="1" :animated="false" v-if="!loading">
+      <a-tab-pane :tab="$t('label.isolated')" key="1" v-if="isAdvancedZoneWithoutSGAvailable">
         <CreateIsolatedNetworkForm
           :loading="loading"
           :resource="resource"
@@ -43,7 +43,7 @@
           @refresh="handleRefresh"/>
       </a-tab-pane>
     </a-tabs>
-  </div>
+  </a-spin>
 </template>
 
 <script>
@@ -67,6 +67,7 @@ export default {
   },
   data () {
     return {
+      isAdvancedZoneWithoutSGAvailable: true,
       defaultNetworkTypeTabKey: '1',
       loading: false,
       actionZones: [],
@@ -78,40 +79,39 @@ export default {
       this.fetchData()
     }
   },
-  mounted () {
-    this.fetchData()
+  created () {
+    const promises = []
+    promises.push(this.fetchActionZoneData())
+    Promise.all(promises).then(() => {
+      for (const i in this.actionZones) {
+        const zone = this.actionZones[i]
+        if (zone.networktype === 'Advanced' && zone.securitygroupsenabled !== true) {
+          this.isAdvancedZoneWithoutSGAvailable = true
+          return
+        }
+      }
+      this.isAdvancedZoneWithoutSGAvailable = false
+    })
   },
   methods: {
-    fetchData () {
-      this.loading = true
-      this.fetchActionZoneData()
-    },
     isAdmin () {
       return ['Admin'].includes(this.$store.getters.userInfo.roletype)
     },
     fetchActionZoneData () {
+      this.loading = true
       const params = {}
       if (this.resource && this.resource.zoneid) {
         params.id = this.resource.zoneid
       }
       params.listAll = true
       this.actionZonesLoading = true
-      api('listZones', params).then(json => {
+      return api('listZones', params).then(json => {
         this.actionZones = json.listzonesresponse.zone
       }).finally(() => {
         this.actionZoneLoading = false
         this.loading = false
       })
     },
-    isAdvancedZoneWithoutSGAvailable () {
-      for (const i in this.actionZones) {
-        const zone = this.actionZones[i]
-        if (zone.networktype === 'Advanced' && zone.securitygroupsenabled !== true) {
-          return true
-        }
-      }
-      return false
-    },
     handleRefresh () {
       this.fetchData()
     },
