ui: show zones and offerings to users (#7557)

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/.env.primate-qa

@@ -1 +1 @@
-CS_URL=http://primate-qa.cloudstack.cloud:8080
+CS_URL=https://qa.cloudstack.cloud/

ui/src/components/view/InfoCard.vue

@@ -26,7 +26,7 @@
               @click="showUploadModal(true)"
               v-clipboard:copy="name" >
               <upload-resource-icon v-if="'uploadResourceIcon' in $store.getters.apis" :visible="showUpload" :resource="resource" @handle-close="showUpload(false)"/>
-              <div class="ant-upload-preview" v-if="$showIcon()">
+              <div class="ant-upload-preview" v-if="$showIcon() && !$route.path.includes('zones')">
                 <camera-outlined class="upload-icon"/>
               </div>
               <slot name="avatar">

ui/src/config/router.js

@@ -34,6 +34,7 @@ import account from '@/config/section/account'
 import domain from '@/config/section/domain'
 import role from '@/config/section/role'
 import infra from '@/config/section/infra'
+import zone from '@/config/section/zone'
 import offering from '@/config/section/offering'
 import config from '@/config/section/config'
 import tools from '@/config/section/tools'
@@ -44,7 +45,7 @@ function generateRouterMap (section) {
   var map = {
     name: section.name,
     path: '/' + section.name,
-    hidden: section.hidden,
+    hidden: 'show' in section ? !section.show() : section.hidden,
     meta: {
       title: section.title,
       icon: section.icon,
@@ -235,6 +236,7 @@ export function asyncRouterMap () {
       generateRouterMap(account),
       generateRouterMap(domain),
       generateRouterMap(infra),
+      generateRouterMap(zone),
       generateRouterMap(offering),
       generateRouterMap(config),
       generateRouterMap(tools),

ui/src/config/section/offering.js

@@ -21,15 +21,21 @@ export default {
   name: 'offering',
   title: 'label.menu.service.offerings',
   icon: 'shopping-outlined',
-  permission: ['listServiceOfferings', 'listDiskOfferings', 'listDomains'],
+  permission: ['listServiceOfferings', 'listDiskOfferings'],
   children: [
     {
       name: 'computeoffering',
       title: 'label.compute.offerings',
       docHelp: 'adminguide/service_offerings.html#compute-and-disk-service-offerings',
       icon: 'cloud-outlined',
-      permission: ['listServiceOfferings', 'listDomains'],
-      params: { isrecursive: 'true' },
+      permission: ['listServiceOfferings'],
+      params: () => {
+        var params = {}
+        if (['Admin', 'DomainAdmin'].includes(store.getters.userInfo.roletype)) {
+          params = { isrecursive: 'true' }
+        }
+        return params
+      },
       columns: ['name', 'displaytext', 'cpunumber', 'cpuspeed', 'memory', 'domain', 'zone', 'order'],
       details: () => {
         var fields = ['name', 'id', 'displaytext', 'offerha', 'provisioningtype', 'storagetype', 'iscustomized', 'iscustomizediops', 'limitcpuuse', 'cpunumber', 'cpuspeed', 'memory', 'hosttags', 'tags', 'storagetags', 'domain', 'zone', 'created', 'dynamicscalingenabled', 'diskofferingstrictness', 'encryptroot']
@@ -51,7 +57,8 @@ export default {
         },
         {
           name: 'comments',
-          component: shallowRef(defineAsyncComponent(() => import('@/components/view/AnnotationsTab.vue')))
+          component: shallowRef(defineAsyncComponent(() => import('@/components/view/AnnotationsTab.vue'))),
+          show: (record, route, user) => { return ['Admin', 'DomainAdmin'].includes(user.roletype) }
         }
       ],
       related: [{
@@ -138,8 +145,14 @@ export default {
       title: 'label.disk.offerings',
       icon: 'hdd-outlined',
       docHelp: 'adminguide/service_offerings.html#compute-and-disk-service-offerings',
-      permission: ['listDiskOfferings', 'listDomains'],
-      params: { isrecursive: 'true' },
+      permission: ['listDiskOfferings'],
+      params: () => {
+        var params = {}
+        if (['Admin', 'DomainAdmin'].includes(store.getters.userInfo.roletype)) {
+          params = { isrecursive: 'true' }
+        }
+        return params
+      },
       columns: ['name', 'displaytext', 'disksize', 'domain', 'zone', 'order'],
       details: () => {
         var fields = ['name', 'id', 'displaytext', 'disksize', 'provisioningtype', 'storagetype', 'iscustomized', 'disksizestrictness', 'iscustomizediops', 'tags', 'domain', 'zone', 'created', 'encrypt']
@@ -157,7 +170,8 @@ export default {
         },
         {
           name: 'comments',
-          component: shallowRef(defineAsyncComponent(() => import('@/components/view/AnnotationsTab.vue')))
+          component: shallowRef(defineAsyncComponent(() => import('@/components/view/AnnotationsTab.vue'))),
+          show: (record, route, user) => { return ['Admin', 'DomainAdmin'].includes(user.roletype) }
         }
       ],
       related: [{
@@ -205,7 +219,7 @@ export default {
       title: 'label.backup.offerings',
       icon: 'cloud-upload-outlined',
       docHelp: 'adminguide/virtual_machines.html#backup-offerings',
-      permission: ['listBackupOfferings', 'listInfrastructure'],
+      permission: ['listBackupOfferings'],
       columns: ['name', 'description', 'zonename'],
       details: ['name', 'id', 'description', 'externalid', 'zone', 'allowuserdrivenbackups', 'created'],
       related: [{
@@ -246,7 +260,7 @@ export default {
       title: 'label.network.offerings',
       icon: 'wifi-outlined',
       docHelp: 'adminguide/networking.html#network-offerings',
-      permission: ['listNetworkOfferings', 'listInfrastructure'],
+      permission: ['listNetworkOfferings'],
       columns: ['name', 'state', 'guestiptype', 'traffictype', 'networkrate', 'domain', 'zone', 'order'],
       details: ['name', 'id', 'displaytext', 'guestiptype', 'traffictype', 'internetprotocol', 'networkrate', 'ispersistent', 'egressdefaultpolicy', 'availability', 'conservemode', 'specifyvlan', 'specifyipranges', 'supportspublicaccess', 'supportsstrechedl2subnet', 'service', 'tags', 'domain', 'zone'],
       resourceType: 'NetworkOffering',
@@ -257,7 +271,8 @@ export default {
         },
         {
           name: 'comments',
-          component: shallowRef(defineAsyncComponent(() => import('@/components/view/AnnotationsTab.vue')))
+          component: shallowRef(defineAsyncComponent(() => import('@/components/view/AnnotationsTab.vue'))),
+          show: (record, route, user) => { return ['Admin', 'DomainAdmin'].includes(user.roletype) }
         }
       ],
       actions: [{
@@ -337,7 +352,7 @@ export default {
       title: 'label.vpc.offerings',
       icon: 'deployment-unit-outlined',
       docHelp: 'plugins/nuage-plugin.html?#vpc-offerings',
-      permission: ['listVPCOfferings', 'listInfrastructure'],
+      permission: ['listVPCOfferings'],
       resourceType: 'VpcOffering',
       columns: ['name', 'state', 'displaytext', 'domain', 'zone', 'order'],
       details: ['name', 'id', 'displaytext', 'internetprotocol', 'distributedvpcrouter', 'tags', 'service', 'domain', 'zone', 'created'],

ui/src/config/section/zone.js

@@ -0,0 +1,45 @@
+// 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 { shallowRef, defineAsyncComponent } from 'vue'
+import store from '@/store'
+
+export default {
+  name: 'zones',
+  title: 'label.zones',
+  icon: 'global-outlined',
+  permission: ['listZones'],
+  params: { showicon: true },
+  show: () => {
+    return ['DomainAdmin', 'User'].includes(store.getters.userInfo.roletype)
+  },
+  columns: () => {
+    const fields = ['name', 'allocationstate', 'type', 'networktype']
+    return fields
+  },
+  details: ['name', 'id', 'allocationstate', 'type', 'networktype', 'guestcidraddress', 'localstorageenabled', 'securitygroupsenabled', 'dns1', 'dns2', 'internaldns1', 'internaldns2'],
+  related: [{
+    name: 'vm',
+    title: 'label.vms',
+    param: 'zoneid'
+  }],
+  resourceType: 'Zone',
+  tabs: [{
+    name: 'details',
+    component: shallowRef(defineAsyncComponent(() => import('@/components/view/DetailsTab.vue')))
+  }]
+}

ui/src/utils/plugins.js

@@ -345,7 +345,7 @@ export const showIconPlugin = {
       if (resource) {
         resourceType = resource
       }
-      if (['zone', 'template', 'iso', 'account', 'accountuser', 'vm', 'domain', 'project', 'vpc', 'guestnetwork'].includes(resourceType)) {
+      if (['zone', 'zones', 'template', 'iso', 'account', 'accountuser', 'vm', 'domain', 'project', 'vpc', 'guestnetwork'].includes(resourceType)) {
         return true
       } else {
         return false