Hide register template, create/upload volume and create vpc buttons when zone is not created. (#10243)

ui/src/config/section/compute.js

@@ -17,6 +17,7 @@
 
 import { shallowRef, defineAsyncComponent } from 'vue'
 import store from '@/store'
+import { isZoneCreated } from '@/utils/zone'
 
 export default {
   name: 'compute',
@@ -99,6 +100,7 @@ export default {
           label: 'label.vm.add',
           docHelp: 'adminguide/virtual_machines.html#creating-vms',
           listView: true,
+          show: () => { isZoneCreated() },
           component: () => import('@/views/compute/DeployVM.vue')
         },
         {
@@ -567,6 +569,7 @@ export default {
           docHelp: 'plugins/cloudstack-kubernetes-service.html#creating-a-new-kubernetes-cluster',
           listView: true,
           popup: true,
+          show: () => { isZoneCreated() },
           component: shallowRef(defineAsyncComponent(() => import('@/views/compute/CreateKubernetesCluster.vue')))
         },
         {
@@ -695,6 +698,7 @@ export default {
           icon: 'plus-outlined',
           label: 'label.new.autoscale.vmgroup',
           listView: true,
+          show: () => { isZoneCreated() },
           component: () => import('@/views/compute/CreateAutoScaleVmGroup.vue')
         },
         {
@@ -785,6 +789,7 @@ export default {
           icon: 'plus-outlined',
           label: 'label.new.instance.group',
           listView: true,
+          show: () => { isZoneCreated() },
           args: ['name']
         },
         {

ui/src/config/section/image.js

@@ -17,6 +17,7 @@
 
 import { shallowRef, defineAsyncComponent } from 'vue'
 import store from '@/store'
+import { isZoneCreated } from '@/utils/zone'
 
 export default {
   name: 'image',
@@ -110,16 +111,17 @@ export default {
           docHelp: 'adminguide/templates.html#uploading-templates-from-a-remote-http-server',
           listView: true,
           popup: true,
+          show: () => { isZoneCreated() },
           component: shallowRef(defineAsyncComponent(() => import('@/views/image/RegisterOrUploadTemplate.vue')))
         },
         {
           api: 'registerTemplate',
           icon: 'cloud-upload-outlined',
           label: 'label.upload.template.from.local',
-          show: () => { return 'getUploadParamsForTemplate' in store.getters.apis },
           docHelp: 'adminguide/templates.html#uploading-templates-and-isos-from-a-local-computer',
           listView: true,
           popup: true,
+          show: () => { return isZoneCreated() && 'getUploadParamsForTemplate' in store.getters.apis },
           component: shallowRef(defineAsyncComponent(() => import('@/views/image/RegisterOrUploadTemplate.vue')))
         },
         {
@@ -270,13 +272,14 @@ export default {
           docHelp: 'adminguide/templates.html#id10',
           listView: true,
           popup: true,
+          show: () => { isZoneCreated() },
           component: shallowRef(defineAsyncComponent(() => import('@/views/image/RegisterOrUploadIso.vue')))
         },
         {
           api: 'registerIso',
           icon: 'cloud-upload-outlined',
           label: 'label.upload.iso.from.local',
-          show: () => { return 'getUploadParamsForIso' in store.getters.apis },
+          show: () => { return isZoneCreated() && 'getUploadParamsForIso' in store.getters.apis },
           docHelp: 'adminguide/templates.html#id10',
           listView: true,
           popup: true,
@@ -389,6 +392,7 @@ export default {
           label: 'label.kubernetes.version.add',
           listView: true,
           popup: true,
+          show: () => { isZoneCreated() },
           component: shallowRef(defineAsyncComponent(() => import('@/views/image/AddKubernetesSupportedVersion.vue')))
         },
         {

ui/src/config/section/network.js

@@ -19,6 +19,7 @@ import { shallowRef, defineAsyncComponent } from 'vue'
 import store from '@/store'
 import tungsten from '@/assets/icons/tungsten.svg?inline'
 import { isAdmin } from '@/role'
+import { isZoneCreated } from '@/utils/zone'
 
 export default {
   name: 'network',
@@ -123,7 +124,7 @@ export default {
           listView: true,
           popup: true,
           show: () => {
-            if (!store.getters.zones || store.getters.zones.length === 0) {
+            if (!isZoneCreated()) {
               return false
             }
             const AdvancedZones = store.getters.zones.filter(zone => zone.networktype === 'Advanced')
@@ -245,6 +246,7 @@ export default {
           icon: 'plus-outlined',
           label: 'label.add.vpc',
           docHelp: 'adminguide/networking_and_traffic.html#adding-a-virtual-private-cloud',
+          show: () => { isZoneCreated() },
           listView: true,
           popup: true,
           component: shallowRef(defineAsyncComponent(() => import('@/views/network/CreateVpc.vue')))
@@ -306,7 +308,7 @@ export default {
         component: shallowRef(defineAsyncComponent(() => import('@/views/network/IngressEgressRuleConfigure.vue')))
       }],
       show: () => {
-        if (!store.getters.zones || store.getters.zones.length === 0) {
+        if (!isZoneCreated()) {
           return false
         }
         const listZoneHaveSGEnabled = store.getters.zones.filter(zone => zone.securitygroupsenabled === true)
@@ -394,6 +396,7 @@ export default {
           label: 'label.vnf.appliance.add',
           docHelp: 'adminguide/networking/vnf_templates_appliances.html#deploying-vnf-appliances',
           listView: true,
+          show: () => { isZoneCreated() },
           component: () => import('@/views/compute/DeployVnfAppliance.vue')
         },
         {
@@ -941,6 +944,7 @@ export default {
           label: 'label.add.vpn.gateway',
           docHelp: 'adminguide/networking_and_traffic.html#creating-a-vpn-gateway-for-the-vpc',
           listView: true,
+          show: () => { isZoneCreated() },
           args: ['vpcid']
         },
         {
@@ -1116,6 +1120,7 @@ export default {
           icon: 'plus-outlined',
           label: 'label.add.vpn.user',
           listView: true,
+          show: () => { isZoneCreated() },
           args: (record, store) => {
             if (store.userInfo.roletype === 'User') {
               return ['username', 'password']
@@ -1195,6 +1200,7 @@ export default {
           docHelp: 'adminguide/networking_and_traffic.html#creating-and-updating-a-vpn-customer-gateway',
           listView: true,
           popup: true,
+          show: () => { isZoneCreated() },
           component: shallowRef(defineAsyncComponent(() => import('@/views/network/CreateVpnCustomerGateway.vue')))
         },
         {
@@ -1384,12 +1390,7 @@ export default {
         component: shallowRef(defineAsyncComponent(() => import('@/views/network/GuestVlanNetworksTab.vue'))),
         show: (record) => { return (record.allocationstate === 'Allocated') }
       }],
-      show: () => {
+      show: () => { isZoneCreated() }
-        if (!store.getters.zones || store.getters.zones.length === 0) {
-          return false
-        }
-        return true
-      }
     }
   ]
 }

ui/src/config/section/storage.js

@@ -17,6 +17,7 @@
 
 import { shallowRef, defineAsyncComponent } from 'vue'
 import store from '@/store'
+import { isZoneCreated } from '@/utils/zone'
 
 export default {
   name: 'storage',
@@ -103,6 +104,7 @@ export default {
           icon: 'plus-outlined',
           docHelp: 'adminguide/storage.html#creating-a-new-volume',
           label: 'label.action.create.volume',
+          show: () => { isZoneCreated() },
           listView: true,
           popup: true,
           component: shallowRef(defineAsyncComponent(() => import('@/views/storage/CreateVolume.vue')))
@@ -112,7 +114,7 @@ export default {
           icon: 'cloud-upload-outlined',
           docHelp: 'adminguide/storage.html#uploading-an-existing-volume-to-a-virtual-machine',
           label: 'label.upload.volume.from.local',
-          show: () => { return 'getUploadParamsForVolume' in store.getters.apis },
+          show: () => { return isZoneCreated() && 'getUploadParamsForVolume' in store.getters.apis },
           listView: true,
           popup: true,
           component: shallowRef(defineAsyncComponent(() => import('@/views/storage/UploadLocalVolume.vue')))
@@ -122,6 +124,7 @@ export default {
           icon: 'link-outlined',
           docHelp: 'adminguide/storage.html#uploading-an-existing-volume-to-a-virtual-machine',
           label: 'label.upload.volume.from.url',
+          show: () => { isZoneCreated() },
           listView: true,
           popup: true,
           component: shallowRef(defineAsyncComponent(() => import('@/views/storage/UploadVolume.vue')))

ui/src/utils/zone.js

@@ -0,0 +1,25 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import store from '@/store'
+
+export function isZoneCreated () {
+  if (!store.getters.zones || store.getters.zones.length === 0) {
+    return false
+  }
+  return true
+}