(cloudstack) branch 4.20 updated: UI: Fix userdata and load balancer selection (#10016)

[dahn]

This is an automated email from the ASF dual-hosted git repository.

dahn pushed a commit to branch 4.20
in repository https://gitbox.apache.org/repos/asf/cloudstack.git


The following commit(s) were added to refs/heads/4.20 by this push:
     new 9960e400309 UI: Fix userdata and load balancer selection (#10016)
9960e400309 is described below

commit 9960e400309a74520c94a6ca9c8f02147bbce14c
Author: Bernardo De Marco Gonçalves <bernardomg2...@gmail.com>
AuthorDate: Wed Dec 4 09:04:50 2024 -0300

    UI: Fix userdata and load balancer selection (#10016)
---
 ui/src/views/compute/DeployVM.vue                     | 12 +++++-------
 ui/src/views/compute/wizard/LoadBalancerSelection.vue |  9 +++++++++
 ui/src/views/compute/wizard/UserDataSelection.vue     | 10 +++++-----
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/ui/src/views/compute/DeployVM.vue 
b/ui/src/views/compute/DeployVM.vue
index 3c4742d64b2..cb9f4a6dce7 100644
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@@ -1940,18 +1940,16 @@ export default {
         this.form.userdataid = undefined
         return
       }
+
       this.form.userdataid = id
       this.userDataParams = []
       api('listUserData', { id: id }).then(json => {
         const resp = json?.listuserdataresponse?.userdata || []
         if (resp[0]) {
-          var params = resp[0].params
-          if (params) {
-            var dataParams = params.split(',')
-          }
-          var that = this
-          dataParams.forEach(function (val, index) {
-            that.userDataParams.push({
+          const params = resp[0].params
+          const dataParams = params ? params.split(',') : []
+          dataParams.forEach((val, index) => {
+            this.userDataParams.push({
               id: index,
               key: val
             })
diff --git a/ui/src/views/compute/wizard/LoadBalancerSelection.vue 
b/ui/src/views/compute/wizard/LoadBalancerSelection.vue
index e2ffb991e98..3ba66241d56 100644
--- a/ui/src/views/compute/wizard/LoadBalancerSelection.vue
+++ b/ui/src/views/compute/wizard/LoadBalancerSelection.vue
@@ -30,6 +30,7 @@
       :rowKey="record => record.id"
       :pagination="false"
       :rowSelection="rowSelection"
+      :customRow="onClickRow"
       size="middle"
       :scroll="{ y: 225 }">
       <template #headerCell="{ column }">
@@ -197,6 +198,14 @@ export default {
       this.options.page = page
       this.options.pageSize = pageSize
       this.$emit('handle-search-filter', this.options)
+    },
+    onClickRow (record) {
+      return {
+        onClick: () => {
+          this.selectedRowKeys = [record.id]
+          this.$emit('select-load-balancer-item', record.id)
+        }
+      }
     }
   }
 }
diff --git a/ui/src/views/compute/wizard/UserDataSelection.vue 
b/ui/src/views/compute/wizard/UserDataSelection.vue
index 87e0bb3f32a..74e3a3be400 100644
--- a/ui/src/views/compute/wizard/UserDataSelection.vue
+++ b/ui/src/views/compute/wizard/UserDataSelection.vue
@@ -33,6 +33,7 @@
       :scroll="{ y: 225 }"
     >
       <template #headerCell="{ column }">
+        <template v-if="column.key === 'name'"><solution-outlined /> {{ 
$t('label.userdata') }}</template>
         <template v-if="column.key === 'account'"><user-outlined /> {{ 
$t('label.account') }}</template>
         <template v-if="column.key === 'domain'"><block-outlined /> {{ 
$t('label.domain') }}</template>
       </template>
@@ -78,6 +79,7 @@ export default {
       filter: '',
       columns: [
         {
+          key: 'name',
           dataIndex: 'name',
           title: this.$t('label.userdata'),
           width: '40%'
@@ -181,11 +183,9 @@ export default {
     },
     onClickRow (record) {
       return {
-        on: {
-          click: () => {
-            this.selectedRowKeys = [record.key]
-            this.$emit('select-user-data-item', record.key)
-          }
+        onClick: () => {
+          this.selectedRowKeys = [record.key]
+          this.$emit('select-user-data-item', record.key)
         }
       }
     }