UI: Fix minor UI issues (#6182)

* UI: Fix minor UI issues

* enable add button for acl tags - only when key and value are provided

* fix autosize deprecation warning

* update form variable

* fix issue observed when opening the createVPNConnection form

* list vpn gateway IPs when creating vpn connection

* fix issue when sumitting create vpn customer gateway form

* Fix updateAccount form - Physical Network View ; add confirmation message during update of physical network state

* revert backend change

* fix migrate data form

* fix disk offering form

* 13: remove redundant form entries

* 14: update form field for vpn customer gateway - dead peer detection

* cleanup

* remove newline

ui/src/config/section/infra/phynetworks.js

@@ -60,6 +60,7 @@ export default {
       api: 'updatePhysicalNetwork',
       icon: 'play-circle-outlined',
       label: 'label.action.enable.physical.network',
+      message: 'message.action.enable.physical.network',
       dataView: true,
       args: ['state'],
       show: (record) => { return record.state === 'Disabled' },
@@ -73,6 +74,7 @@ export default {
       api: 'updatePhysicalNetwork',
       icon: 'stop-outlined',
       label: 'label.action.disable.physical.network',
+      message: 'message.action.disable.physical.network',
       dataView: true,
       args: ['state'],
       show: (record) => { return record.state === 'Enabled' },

ui/src/views/compute/ScaleVM.vue

@@ -84,13 +84,15 @@ import { api } from '@/api'
 import ComputeOfferingSelection from '@views/compute/wizard/ComputeOfferingSelection'
 import ComputeSelection from '@views/compute/wizard/ComputeSelection'
 import DiskSizeSelection from '@views/compute/wizard/DiskSizeSelection'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'ScaleVM',
   components: {
     ComputeOfferingSelection,
     ComputeSelection,
-    DiskSizeSelection
+    DiskSizeSelection,
+    TooltipLabel
   },
   props: {
     resource: {
@@ -147,7 +149,7 @@ export default {
         if (this.total === 0) {
           return
         }
-        this.offerings = response.listserviceofferingsresponse.serviceoffering
+        this.offerings = response.listserviceofferingsresponse.serviceoffering || []
         if (this.resource.state === 'Running' && this.resource.hypervisor === 'KVM') {
           this.offerings = this.offerings.filter(offering => offering.id === this.resource.serviceofferingid)
           this.currentOffer = this.offerings[0]

ui/src/views/dashboard/CapacityDashboard.vue

@@ -23,7 +23,7 @@
           <a-select
             :defaultValue="zoneSelected.name"
             :placeholder="$t('label.select.a.zone')"
-            v-model:value="zoneSelected.name"
+            :value="zoneSelected.name"
             @change="changeZone"
             showSearch
             optionFilterProp="label"

ui/src/views/infra/MigrateData.vue

@@ -31,6 +31,7 @@
           :label="$t('migrate.from')">
           <a-select
             v-model:value="form.srcpool"
+            @change="filterStores"
             :loading="loading"
             v-focus="true"
             showSearch
@@ -40,8 +41,8 @@
             }" >
             <a-select-option
               v-for="store in imageStores"
-              :key="store.id"
-            >{{ store.name || opt.url }}</a-select-option>
+              :key="store.id"> {{ store.name || opt.url }}
+            </a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item
@@ -58,10 +59,9 @@
               return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option
-              v-for="store in imageStores"
-              v-if="store.id !== this.form.srcpool"
-              :key="store.id"
-            >{{ store.name || opt.url }}</a-select-option>
+              v-for="store in destStores"
+              :key="store.id"> {{ store.name || opt.url }}
+            </a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item name="migrationtype" ref="migrationtype" :label="$t('migrationPolicy')">
@@ -95,12 +95,14 @@ export default {
   data () {
     return {
       imageStores: [],
+      destStores: [],
       loading: false
     }
   },
-  created () {
+  async created () {
     this.initForm()
-    this.fetchImageStores()
+    await this.fetchImageStores()
+    this.filterStores()
   },
   methods: {
     initForm () {
@@ -115,14 +117,22 @@ export default {
       })
     },
     fetchImageStores () {
-      this.loading = true
-      api('listImageStores').then(json => {
-        this.imageStores = json.listimagestoresresponse.imagestore || []
-        this.form.srcpool = this.imageStores[0].id || ''
-      }).finally(() => {
-        this.loading = false
+      return new Promise((resolve, reject) => {
+        this.loading = true
+        api('listImageStores').then(json => {
+          this.imageStores = json.listimagestoresresponse.imagestore || []
+          this.form.srcpool = this.imageStores[0].id || ''
+          resolve(this.imageStores)
+        }).catch((error) => {
+          reject(error)
+        }).finally(() => {
+          this.loading = false
+        })
       })
     },
+    filterStores () {
+      this.destStores = this.imageStores.filter(store => { return store.id !== this.form.srcpool })
+    },
     handleSubmit (e) {
       e.preventDefault()
       if (this.loading) return

ui/src/views/infra/network/IpRangesTabPublic.vue

@@ -359,6 +359,8 @@ export default {
     }
   },
   created () {
+    this.initFormUpdateRange()
+    this.initAddIpRangeForm()
     if (!this.basicGuestNetwork) {
       this.columns.splice(5, 0,
         {

ui/src/views/network/AclListRulesTab.vue

@@ -120,7 +120,7 @@
         <a-form
           :ref="formRef"
           :model="form"
-          :rules="tagRules"
+          :rules="rules"
           class="add-tags"
           v-ctrl-enter="handleAddTag"
          >
@@ -138,7 +138,7 @@
               <a-input v-model:value="form.value" />
             </a-form-item>
           </div>
-          <a-button ref="submit" type="primary" @click="handleAddTag">{{ $t('label.add') }}</a-button>
+          <a-button ref="submit" type="primary" :disabled="!(form.key && form.value)" @click="handleAddTag">{{ $t('label.add') }}</a-button>
         </a-form>
 
         <a-divider style="margin-top: 0;" />
@@ -245,7 +245,7 @@
         <a-form-item :label="$t('label.description')" ref="reason" name="reason">
           <a-textarea
             v-model:value="form.reason"
-            :autosize="{ minRows: 2 }"
+            :autoSize="{ minRows: 2 }"
             :placeholder="$t('label.acl.reason.description')" />
         </a-form-item>
 

ui/src/views/network/CreateVpnCustomerGateway.vue

@@ -179,7 +179,7 @@
         <template #label>
           <tooltip-label :title="$t('label.dpd')" :tooltip="apiParams.dpd.description"/>
         </template>
-        <a-switch v-model:checked="form.name"/>
+        <a-switch v-model:checked="form.dpd"/>
       </a-form-item>
       <a-form-item ref="splitconnections" name="splitconnections" v-if="form.ikeversion !== 'ikev1'">
         <template #label>
@@ -197,7 +197,7 @@
         <a-button @click="closeModal">
           {{ $t('label.cancel') }}
         </a-button>
-        <a-button type="primary" html-type="submit">
+        <a-button type="primary" @click="handleSubmit" html-type="submit">
           {{ $t('label.ok') }}
         </a-button>
       </div>

ui/src/views/network/VpcTab.vue

@@ -188,7 +188,7 @@
               <a-form-item :label="$t('label.publicip')" :required="true" ref="ipaddress" name="ipaddress">
                 <a-input
                   :placeholder="placeholders.ipaddress"
-                  v-model:value="form.name"
+                  v-model:value="form.ipaddress"
                 ></a-input>
               </a-form-item>
               <a-form-item :label="$t('label.gateway')" :required="true" ref="gateway" name="gateway">
@@ -565,7 +565,7 @@ export default {
         vpcid: this.resource.id,
         listAll: true
       }).then(json => {
-        this.vpnGateways = json.listvpngatewaysresponse.vpngateway ? json.listvpngatewaysresponse.vpngateway : []
+        this.vpnGateways = json?.listvpngatewaysresponse?.vpngateway || []
       }).catch(error => {
         this.$notifyError(error)
       }).finally(() => {
@@ -623,9 +623,9 @@ export default {
     fetchVpnCustomerGateways () {
       this.modals.vpnConnectionLoading = true
       api('listVpnCustomerGateways', { listAll: true }).then(json => {
-        this.vpncustomergateways = json.listvpncustomergatewaysresponse.vpncustomergateway
+        this.vpncustomergateways = json.listvpncustomergatewaysresponse.vpncustomergateway || []
         if (this.modals.vpnConnection === true) {
-          this.form.vpncustomergateway = this.vpncustomergateways[0].id
+          this.form.vpncustomergateway = this.vpncustomergateways[0]?.id
         }
       }).catch(error => {
         this.$notifyError(error)

ui/src/views/offering/AddComputeOffering.vue

@@ -229,18 +229,6 @@
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item name="limitcpuuse" ref="limitcpuuse">
-          <template #label>
-            <tooltip-label :title="$t('label.limitcpuuse')" :tooltip="apiParams.limitcpuuse.description"/>
-          </template>
-          <a-switch v-model:checked="form.limitcpuuse" />
-        </a-form-item>
-        <a-form-item name="isvolatile" ref="isvolatile" v-if="!isSystem">
-          <template #label>
-            <tooltip-label :title="$t('label.isvolatile')" :tooltip="apiParams.isvolatile.description"/>
-          </template>
-          <a-switch v-model:checked="form.isvolatile" />
-        </a-form-item>
         <a-form-item name="deploymentplanner" ref="deploymentplanner" v-if="!isSystem && isAdmin()">
           <template #label>
             <tooltip-label :title="$t('label.deploymentplanner')" :tooltip="apiParams.deploymentplanner.description"/>

ui/src/views/offering/AddDiskOffering.vue

@@ -371,6 +371,9 @@ export default {
         }]
       })
     },
+    handleWriteCacheTypeChange (val) {
+      this.form.writeCacheType = val
+    },
     fetchData () {
       this.fetchDomainData()
       this.fetchZoneData()