UI: Fix userdata and load balancer selection (#10016)

Author: bernardodemarco

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
             })

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)
+        }
+      }
     }
   }
 }

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)
         }
       }
     }