UI: Add domain column to list views and fix VPC/network form issues

api/src/main/java/org/apache/cloudstack/api/command/admin/vpc/CreatePrivateGatewayByAdminCmd.java

@@ -47,7 +47,7 @@ public class CreatePrivateGatewayByAdminCmd extends CreatePrivateGatewayCmd impl
             description = "The Physical Network ID the network belongs to")
     private Long physicalNetworkId;
 
-    @Parameter(name = ApiConstants.VLAN, type = CommandType.STRING, description = "The network implementation uri for the private gateway")
+    @Parameter(name = ApiConstants.VLAN, type = CommandType.STRING, description = "The network implementation uri for the private gateway. Can't be specified along with associatednetworkid")
     private String broadcastUri;
 
     @Parameter(name = ApiConstants.BYPASS_VLAN_OVERLAP_CHECK, type = CommandType.BOOLEAN, description = "When true bypasses VLAN id/range overlap check during private gateway creation")

ui/src/config/section/compute.js

@@ -83,8 +83,10 @@ export default {
           fields.splice(2, 0, 'instancename')
           fields.push('hostname')
           fields.push('account')
+          fields.push('domain')
         } else if (store.getters.userInfo.roletype === 'DomainAdmin') {
           fields.push('account')
+          fields.push('domain')
         } else {
           fields.push('serviceofferingname')
         }
@@ -582,6 +584,7 @@ export default {
         var fields = ['name', 'state', 'clustertype', 'size', 'cpunumber', 'memory', 'kubernetesversionname']
         if (['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) {
           fields.push('account')
+          fields.push('domain')
         }
         if (store.listAllProjects) {
           fields.push('project')
@@ -897,6 +900,9 @@ export default {
       searchFilters: ['name', 'zoneid', 'domainid', 'account'],
       columns: (store) => {
         var fields = ['name', 'state', 'associatednetworkname', 'publicip', 'publicport', 'privateport', 'minmembers', 'maxmembers', 'availablevirtualmachinecount', 'account']
+        if (['Admin', 'DomainAdmin'].includes(store.userInfo.roletype)) {
+          fields.push('domain')
+        }
         if (store.listAllProjects) {
           fields.push('project')
         }

ui/src/config/section/image.js

@@ -48,6 +48,7 @@ export default {
         if (['Admin', 'DomainAdmin'].includes(store.getters.userInfo.roletype)) {
           fields.push('size')
           fields.push('account')
+          fields.push('domain')
         }
         if (store.getters.listAllProjects) {
           fields.push('project')
@@ -225,6 +226,7 @@ export default {
         if (['Admin', 'DomainAdmin'].includes(store.getters.userInfo.roletype)) {
           fields.push('size')
           fields.push('account')
+          fields.push('domain')
         }
         if (store.getters.listAllProjects) {
           fields.push('project')

ui/src/config/section/storage.js

@@ -54,8 +54,10 @@ export default {
         if (store.getters.userInfo.roletype === 'Admin') {
           fields.push('storage')
           fields.push('account')
+          fields.push('domain')
         } else if (store.getters.userInfo.roletype === 'DomainAdmin') {
           fields.push('account')
+          fields.push('domain')
         }
         if (store.getters.listAllProjects) {
           fields.push('project')
@@ -625,7 +627,18 @@ export default {
       title: 'label.buckets',
       icon: 'funnel-plot-outlined',
       permission: ['listBuckets'],
-      columns: ['name', 'state', 'objectstore', 'size', 'account'],
+      columns: () => {
+        var fields = ['name', 'state', 'objectstore', 'size', 'account']
+        if (['Admin', 'DomainAdmin'].includes(store.getters.userInfo.roletype)) {
+          if (store.getters.listAllProjects) {
+            fields.push('project')
+          }
+          fields.push('domain')
+        } else if (store.getters.listAllProjects) {
+          fields.push('project')
+        }
+        return fields
+      },
       details: ['id', 'name', 'state', 'objectstore', 'size', 'url', 'accesskey', 'usersecretkey', 'account', 'domain', 'created', 'quota', 'encryption', 'versioning', 'objectlocking', 'policy'],
       tabs: [
         {
@@ -695,8 +708,10 @@ export default {
         if (store.getters.userInfo.roletype === 'Admin') {
           fields.push('storage')
           fields.push('account')
+          fields.push('domain')
         } else if (store.getters.userInfo.roletype === 'DomainAdmin') {
           fields.push('account')
+          fields.push('domain')
         }
         if (store.getters.listAllProjects) {
           fields.push('project')

ui/src/style/ant-overwrite/ant-form.less

@@ -26,3 +26,9 @@
 .ant-select-open .ant-select-arrow .ant-select-suffix:not(.anticon-search) svg {
   transform: rotateZ(-180deg);
 }
+
+// Wrap long option labels instead of truncating them with an ellipsis
+.ant-select-dropdown.select-wrap-options .ant-select-item-option-content {
+  white-space: normal;
+  word-break: break-word;
+}

ui/src/views/network/CreateIsolatedNetworkForm.vue

@@ -91,8 +91,9 @@
               }"
               :loading="networkOfferingLoading"
               :placeholder="apiParams.networkofferingid.description"
+              dropdownClassName="select-wrap-options"
               @change="val => { handleNetworkOfferingChange(networkOfferings[val]) }">
-              <a-select-option v-for="(opt, optIndex) in networkOfferings" :key="optIndex" :label="opt.displaytext || opt.name || opt.description">
+              <a-select-option v-for="(opt, optIndex) in networkOfferings" :key="optIndex" :label="opt.displaytext || opt.name || opt.description" :title="opt.displaytext || opt.name || opt.description">
                 {{ opt.displaytext || opt.name || opt.description }}
               </a-select-option>
             </a-select>

ui/src/views/network/CreateL2NetworkForm.vue

@@ -87,8 +87,9 @@
               }"
               :loading="networkOfferingLoading"
               :placeholder="apiParams.networkofferingid.description"
+              dropdownClassName="select-wrap-options"
               @change="val => { handleNetworkOfferingChange(networkOfferings[val]) }">
-              <a-select-option v-for="(opt, optIndex) in networkOfferings" :key="optIndex" :label="opt.displaytext || opt.name || opt.description">
+              <a-select-option v-for="(opt, optIndex) in networkOfferings" :key="optIndex" :label="opt.displaytext || opt.name || opt.description" :title="opt.displaytext || opt.name || opt.description">
                 {{ opt.displaytext || opt.name || opt.description }}
               </a-select-option>
             </a-select>

ui/src/views/network/CreateSharedNetworkForm.vue

@@ -234,8 +234,9 @@
               }"
               :loading="networkOfferingLoading"
               :placeholder="apiParams.networkofferingid.description"
+              dropdownClassName="select-wrap-options"
               @change="val => { handleNetworkOfferingChange(networkOfferings[val]) }">
-              <a-select-option v-for="(opt, optIndex) in networkOfferings" :key="optIndex" :label="opt.displaytext || opt.name || opt.description">
+              <a-select-option v-for="(opt, optIndex) in networkOfferings" :key="optIndex" :label="opt.displaytext || opt.name || opt.description" :title="opt.displaytext || opt.name || opt.description">
                 {{ opt.displaytext || opt.name || opt.description }}
               </a-select-option>
             </a-select>

ui/src/views/network/CreateVpc.vue

@@ -102,8 +102,9 @@
             :filterOption="(input, option) => {
               return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
+            dropdownClassName="select-wrap-options"
             @change="handleVpcOfferingChange" >
-            <a-select-option :value="offering.id" v-for="offering in vpcOfferings" :key="offering.id" :label="offering.name">
+            <a-select-option :value="offering.id" v-for="offering in vpcOfferings" :key="offering.id" :label="offering.name" :title="offering.name">
               {{ offering.name }}
             </a-select-option>
           </a-select>

ui/src/views/network/PortForwarding.vue

@@ -124,7 +124,7 @@
           </router-link>
         </template>
         <template v-if="column.key === 'vm'">
-          <div><desktop-outlined/>
+          <div><desktop-outlined/>&nbsp;
             <router-link
               :to="{ path: '/vm/' + record.virtualmachineid }">
               {{ record.virtualmachinename }}</router-link> ({{ record.vmguestip }})</div>

ui/src/views/network/StaticRoutesTab.vue

@@ -22,7 +22,7 @@
         <a-input v-model:value="newRoute" :placeholder="$t('label.cidr.destination.network')" v-focus="true"></a-input>
       </div>
       <div class="form__label" v-if="this.$route.fullPath.startsWith('/vpc')">
-        <div :span="24" class="form__label">via</div>
+        <div :span="24" class="form__label">&nbsp;via&nbsp;</div>
       </div>
       <div class="form__label" v-if="this.$route.fullPath.startsWith('/vpc')">
         <a-input v-model:value="nexthop" :placeholder="$t('label.nexthop')"></a-input>

ui/src/views/network/UpdateNetwork.vue

@@ -120,8 +120,9 @@
             }"
             :loading="networkOfferingLoading"
             :placeholder="apiParams.networkofferingid.description"
+            dropdownClassName="select-wrap-options"
             @change="val => { networkOffering = networkOfferings[val] }">
-            <a-select-option v-for="(opt, optIndex) in networkOfferings" :key="optIndex" :label="opt.displaytext || opt.name">
+            <a-select-option v-for="(opt, optIndex) in networkOfferings" :key="optIndex" :label="opt.displaytext || opt.name" :title="opt.displaytext || opt.name">
               {{ opt.displaytext || opt.name }}
             </a-select-option>
           </a-select>

ui/src/views/network/VpcTab.vue

@@ -89,12 +89,18 @@
             @finish="handleNetworkAclFormSubmit"
             v-ctrl-enter="handleNetworkAclFormSubmit"
            >
-            <a-form-item :label="$t('label.add.acl.name')" ref="name" name="name">
+            <a-form-item ref="name" name="name">
+              <template #label>
+                <tooltip-label :title="$t('label.add.acl.name')" :tooltip="aclParams.name?.description"/>
+              </template>
               <a-input
                 v-model:value="form.name"
                 v-focus="true"></a-input>
             </a-form-item>
-            <a-form-item :label="$t('label.description')"  ref="description" name="description">
+            <a-form-item ref="description" name="description">
+              <template #label>
+                <tooltip-label :title="$t('label.description')" :tooltip="aclParams.description?.description"/>
+              </template>
               <a-input v-model:value="form.description" />
             </a-form-item>
 
@@ -163,7 +169,10 @@
               :model="form"
               :rules="rules"
              >
-              <a-form-item :label="$t('label.physicalnetworkid')" ref="physicalnetwork" name="physicalnetwork" v-if="this.isAdmin()">
+              <a-form-item ref="physicalnetwork" name="physicalnetwork" v-if="this.isAdmin()">
+                <template #label>
+                  <tooltip-label :title="$t('label.physicalnetworkid')" :tooltip="gatewayParams.physicalnetworkid?.description"/>
+                </template>
                 <a-select
                   v-model:value="form.physicalnetwork"
                   v-focus="true"
@@ -177,7 +186,10 @@
                   </a-select-option>
                 </a-select>
               </a-form-item>
-              <a-form-item :label="$t('label.vlan')" ref="vlan" name="vlan" v-if="this.isAdmin()">
+              <a-form-item ref="vlan" name="vlan" v-if="this.isAdmin()">
+                <template #label>
+                  <tooltip-label :title="$t('label.vlan')" :tooltip="gatewayParams.vlan?.description"/>
+                </template>
                 <a-input
                   :placeholder="placeholders.vlan"
                   v-model:value="form.vlan"
@@ -186,13 +198,18 @@
               <a-form-item
                 ref="bypassvlanoverlapcheck"
                 name="bypassvlanoverlapcheck"
-                :label="$t('label.bypassvlanoverlapcheck')"
                 v-if="this.isAdmin()">
+                <template #label>
+                  <tooltip-label :title="$t('label.bypassvlanoverlapcheck')" :tooltip="gatewayParams.bypassvlanoverlapcheck?.description"/>
+                </template>
                 <a-checkbox
                   v-model:checked="form.bypassvlanoverlapcheck"
                 ></a-checkbox>
               </a-form-item>
-              <a-form-item :label="$t('label.associatednetwork')" ref="associatednetworkid" name="associatednetworkid">
+              <a-form-item ref="associatednetworkid" name="associatednetworkid">
+                <template #label>
+                  <tooltip-label :title="$t('label.associatednetwork')" :tooltip="gatewayParams.associatednetworkid?.description"/>
+                </template>
                 <a-select
                   v-model:value="form.associatednetworkid"
                   showSearch
@@ -209,28 +226,43 @@
                   </a-select-option>
                 </a-select>
               </a-form-item>
-              <a-form-item :label="$t('label.publicip')" ref="ipaddress" name="ipaddress">
+              <a-form-item ref="ipaddress" name="ipaddress">
+                <template #label>
+                  <tooltip-label :title="$t('label.publicip')" :tooltip="gatewayParams.ipaddress?.description"/>
+                </template>
                 <a-input
                   :placeholder="placeholders.ipaddress"
                   v-model:value="form.ipaddress"
                 ></a-input>
               </a-form-item>
-              <a-form-item :label="$t('label.gateway')" ref="gateway" name="gateway">
+              <a-form-item ref="gateway" name="gateway">
+                <template #label>
+                  <tooltip-label :title="$t('label.gateway')" :tooltip="gatewayParams.gateway?.description"/>
+                </template>
                 <a-input
                   :placeholder="placeholders.gateway"
                   v-model:value="form.gateway"
                 ></a-input>
               </a-form-item>
-              <a-form-item :label="$t('label.netmask')" ref="netmask" name="netmask">
+              <a-form-item ref="netmask" name="netmask">
+                <template #label>
+                  <tooltip-label :title="$t('label.netmask')" :tooltip="gatewayParams.netmask?.description"/>
+                </template>
                 <a-input
                   :placeholder="placeholders.netmask"
                   v-model:value="form.netmask"
                 ></a-input>
               </a-form-item>
-              <a-form-item :label="$t('label.sourcenat')" ref="nat" name="nat">
+              <a-form-item ref="nat" name="nat">
+                <template #label>
+                  <tooltip-label :title="$t('label.sourcenat')" :tooltip="gatewayParams.sourcenatsupported?.description"/>
+                </template>
                 <a-checkbox v-model:checked="form.nat"></a-checkbox>
               </a-form-item>
-              <a-form-item :label="$t('label.aclid')" ref="acl" name="acl">
+              <a-form-item ref="acl" name="acl">
+                <template #label>
+                  <tooltip-label :title="$t('label.aclid')" :tooltip="gatewayParams.aclid?.description"/>
+                </template>
                 <a-select
                   v-model:value="form.acl"
                   showSearch
@@ -291,7 +323,10 @@
               :model="form"
               :rules="rules"
             >
-              <a-form-item :label="$t('label.ip')" ref="ipaddress" name="ipaddress">
+              <a-form-item ref="ipaddress" name="ipaddress">
+                <template #label>
+                  <tooltip-label :title="$t('label.ip')" :tooltip="vpnGatewayParams.ipaddressid?.description"/>
+                </template>
                 <a-select
                   v-focus="true"
                   v-model:value="form.ipaddress"
@@ -370,7 +405,10 @@
               :model="form"
               :rules="rules"
              >
-              <a-form-item :label="$t('label.vpncustomergatewayid')" ref="vpncustomergateway" name="vpncustomergateway">
+              <a-form-item ref="vpncustomergateway" name="vpncustomergateway">
+                <template #label>
+                  <tooltip-label :title="$t('label.vpncustomergatewayid')" :tooltip="vpnConnectionParams.s2scustomergatewayid?.description"/>
+                </template>
                 <a-select
                   v-model:value="form.vpncustomergateway"
                   v-focus="true"
@@ -384,7 +422,10 @@
                   </a-select-option>
                 </a-select>
               </a-form-item>
-              <a-form-item :label="$t('label.passive')" ref="passive" name="passive">
+              <a-form-item ref="passive" name="passive">
+                <template #label>
+                  <tooltip-label :title="$t('label.passive')" :tooltip="vpnConnectionParams.passive?.description"/>
+                </template>
                 <a-checkbox v-model:checked="form.passive"></a-checkbox>
               </a-form-item>
 
@@ -434,6 +475,7 @@ import VnfAppliancesTab from './VnfAppliancesTab'
 import EventsTab from '@/components/view/EventsTab'
 import AnnotationsTab from '@/components/view/AnnotationsTab'
 import ResourceIcon from '@/components/view/ResourceIcon'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 import BgpPeersTab from '@/views/infra/zone/BgpPeersTab.vue'
 import StaticRoutesTab from './StaticRoutesTab'
 import RunCustomAction from '@/views/extension/RunCustomAction'
@@ -452,7 +494,8 @@ export default {
     RunCustomAction,
     EventsTab,
     AnnotationsTab,
-    ResourceIcon
+    ResourceIcon,
+    TooltipLabel
   },
   mixins: [mixinDevice],
   props: {
@@ -567,6 +610,12 @@ export default {
       this.setCurrentTab()
     }
   },
+  beforeCreate () {
+    this.aclParams = this.$getApiParams('createNetworkACLList')
+    this.gatewayParams = this.$getApiParams('createPrivateGateway')
+    this.vpnGatewayParams = this.$getApiParams('createVpnGateway')
+    this.vpnConnectionParams = this.$getApiParams('createVpnConnection')
+  },
   created () {
     this.initForm()
     this.setCurrentTab()
@@ -851,21 +900,18 @@ export default {
             },
             errorMessage: this.$t('message.add.private.gateway.failed'),
             errorMethod: () => {
-              this.modals.gateway = false
               this.handleFetchData()
             },
             loadingMessage: this.$t('message.add.private.gateway.processing'),
             catchMessage: this.$t('error.fetching.async.job.result'),
             catchMethod: () => {
-              this.modals.gateway = false
               this.handleFetchData()
             }
           })
         }).catch(error => {
           this.$notifyError(error)
         }).finally(() => {
           this.modals.gatewayLoading = false
-          this.modals.gateway = false
           this.handleFetchData()
         })
       }).catch(error => {

ui/src/views/network/VpcTiersTab.vue

@@ -194,7 +194,7 @@
               :filterOption="(input, option) => {
                 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
-               >
+              dropdownClassName="select-wrap-options">
               <a-select-option
                 v-for="item in networkOfferings"
                 :key="item.id"