ui: AntD3 upgrade (#7306)

Continuation of #6369

This PR for Fixes #6342. Upgrade ant-design-vue to version 3.x.
Related https://www.antdv.com/docs/vue/migration-v3.

Co-authored-by: utchoang <hoangnm@unitech.vn>

ui/package.json

@@ -38,7 +38,8 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.2",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@fortawesome/vue-fontawesome": "^3.0.0-4",
-    "ant-design-vue": "^2.2.3",
+    "ant-design-vue": "^3.2.9",
+    "antd": "^4.21.4",
     "antd-theme-webpack-plugin": "^1.3.9",
     "axios": "^0.21.1",
     "babel-plugin-require-context-hook": "^1.0.0",

ui/src/components/CheckBoxSelectPair.vue

@@ -34,13 +34,14 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             @change="val => { handleSelectChange(val) }">
             <a-select-option
               v-for="(opt) in selectSource"
               :key="opt.id"
-              :disabled="opt.enabled === false">
+              :disabled="opt.enabled === false"
+              :label="opt.displaytext || opt.name || opt.description">
               {{ opt.displaytext || opt.name || opt.description }}
             </a-select-option>
           </a-select>

ui/src/components/header/SamlDomainSwitcher.vue

@@ -25,7 +25,7 @@
       showSearch
       optionFilterProp="label"
       :filterOption="(input, option) => {
-        return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
       }"
       @change="changeAccount"
       @focus="fetchData" >
@@ -42,7 +42,7 @@
         </a-tooltip>
       </template>
 
-      <a-select-option v-for="(account, index) in samlAccounts" :key="index">
+      <a-select-option v-for="(account, index) in samlAccounts" :key="index" :label="`${account.accountName} (${account.domainName})`">
         {{ `${account.accountName} (${account.domainName})` }}
       </a-select-option>
     </a-select>

ui/src/components/header/UserMenu.vue

@@ -38,33 +38,25 @@
         <span>{{ nickname() }}</span>
       </span>
       <template #overlay>
-        <a-menu class="user-menu-wrapper">
+        <a-menu class="user-menu-wrapper" @click="handleClickMenu">
-          <router-link :to="{ path: '/accountuser/' + $store.getters.userInfo.id }">
+          <a-menu-item class="user-menu-item" key="profile">
-            <a-menu-item class="user-menu-item" key="0">
             <UserOutlined class="user-menu-item-icon" />
             <span class="user-menu-item-name">{{ $t('label.profilename') }}</span>
           </a-menu-item>
-          </router-link>
+          <a-menu-item class="user-menu-item" key="timezone">
-          <a @click="toggleUseBrowserTimezone">
-            <a-menu-item class="user-menu-item" key="1">
             <ClockCircleOutlined class="user-menu-item-icon" />
             <span class="user-menu-item-name" style="margin-right: 5px">{{ $t('label.use.local.timezone') }}</span>
             <a-switch :checked="$store.getters.usebrowsertimezone" />
           </a-menu-item>
-          </a>
+          <a-menu-item class="user-menu-item" key="document">
-          <a :href="$config.docBase" target="_blank">
-            <a-menu-item class="user-menu-item" key="2">
             <QuestionCircleOutlined class="user-menu-item-icon" />
             <span class="user-menu-item-name">{{ $t('label.help') }}</span>
           </a-menu-item>
-          </a>
           <a-menu-divider/>
-          <a href="javascript:;" @click="handleLogout">
+          <a-menu-item class="user-menu-item" key="logout">
-            <a-menu-item class="user-menu-item" key="3">
             <LogoutOutlined class="user-menu-item-icon" />
             <span class="user-menu-item-name">{{ $t('label.logout') }}</span>
           </a-menu-item>
-          </a>
         </a-menu>
       </template>
     </a-dropdown>
@@ -145,6 +137,22 @@ export default {
         })
       })
     },
+    handleClickMenu (item) {
+      switch (item.key) {
+        case 'profile':
+          this.$router.push(`/accountuser/${this.$store.getters.userInfo.id}`)
+          break
+        case 'timezone':
+          this.toggleUseBrowserTimezone()
+          break
+        case 'document':
+          window.open(this.$config.docBase, '_blank')
+          break
+        case 'logout':
+          this.handleLogout()
+          break
+      }
+    },
     handleLogout () {
       return this.Logout({}).then(() => {
         this.$router.push('/user/login')

ui/src/components/view/AnnotationsTab.vue

@@ -96,7 +96,7 @@
         <template #content>
           <div v-ctrl-enter="saveNote">
             <a-textarea
-              rows="4"
+              :rows="4"
               @change="handleNoteChange"
               v-model:value="annotation"
               :placeholder="$t('label.add.note')" />

ui/src/components/view/BulkActionProgress.vue

@@ -52,37 +52,39 @@
         size="middle"
         :columns="selectedColumns"
         :dataSource="tableChanged ? filteredItems : selectedItems"
-        :rowKey="(record, idx) => ($route.path.includes('/template') || $route.path.includes('/iso')) ? record.zoneid: record.id"
+        :rowKey="record => ($route.path.includes('/template') || $route.path.includes('/iso')) ? record.zoneid: record.id"
         :pagination="true"
         @change="handleTableChange"
         style="overflow-y: auto">
-        <template #status="{text}">
+        <template #bodyCell="{ column, text, record }">
+          <template v-if="column.key === 'status'">
             <status :text=" text ? text : $t('state.inprogress') " displayText></status>
           </template>
-        <template #algorithm="{record}">
+          <template v-if="column.key === 'algorithm'">
             {{ returnAlgorithmName(record.algorithm) }}
           </template>
-        <template #privateport="{record}">
+          <template v-if="column.key === 'privateport'">
             {{ record.privateport }} - {{ record.privateendport }}
           </template>
-        <template #publicport="{record}">
+          <template v-if="column.key === 'publicport'">
             {{ record.publicport }} - {{ record.publicendport }}
           </template>
-        <template #protocol="{record}">
+          <template v-if="column.key === 'protocol'">
             {{ capitalise(record.protocol) }}
           </template>
-        <template #startport="{record}">
+          <template v-if="column.key === 'startport'">
             {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
           </template>
-        <template #endport="{record}">
+          <template v-if="column.key === 'endport'">
             {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
           </template>
-        <template #vm="{record}">
+          <template v-if="column.key === 'vm'">
             <div><desktop-outlined /> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
           </template>
-        <template #cidrlist="{ record }">
+          <template v-if="column.key === 'cidrlist'">
             <span style="white-space: pre-line"> {{ record.cidrlist?.replaceAll(" ", "\n") }}</span>
           </template>
+        </template>
       </a-table>
       <br/>
     </div>

ui/src/components/view/BulkActionView.vue

@@ -55,36 +55,38 @@
           size="middle"
           :columns="selectedColumns"
           :dataSource="selectedItems"
-          :rowKey="(record, idx) => $route.path.includes('/iso/') ? record.zoneid : record.id"
+          :rowKey="record => $route.path.includes('/iso/') ? record.zoneid : record.id"
           :pagination="true"
           style="overflow-y: auto">
-          <template #algorithm="{record}">
+          <template #bodyCell="{ column, text, record }">
+            <template v-if="column.key === 'algorithm'">
               {{ returnAlgorithmName(record.algorithm) }}
             </template>
-          <template #column="{ text }">
+            <template v-if="column.key === 'column'">
               <span v-for="(column, index) in selectedColumns" :key="index"> {{ text }} ==== {{ column }}</span>
             </template>
-          <template #privateport="{record}">
+            <template v-if="column.key === 'privateport'">
               {{ record.privateport }} - {{ record.privateendport }}
             </template>
-          <template #publicport="{record}">
+            <template v-if="column.key === 'publicport'">
               {{ record.publicport }} - {{ record.publicendport }}
             </template>
-          <template #protocol="{record}">
+            <template v-if="column.key === 'protocol'">
               {{ capitalise(record.protocol) }}
             </template>
-          <template #vm="{record}">
+            <template v-if="column.key === 'vm'">
               <div><desktop-outlined /> {{ record.virtualmachinename }} ({{ record.vmguestip }})</div>
             </template>
-          <template #startport="{record}">
+            <template v-if="column.key === 'startport'">
               {{ record.icmptype || record.startport >= 0 ? record.icmptype || record.startport : $t('label.all') }}
             </template>
-          <template #endport="{record}">
+            <template v-if="column.key === 'endport'">
               {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : $t('label.all') }}
             </template>
-          <template #cidrlist="{record}">
+            <template v-if="column.key === 'cidrlist'">
               <span style="white-space: pre-line"> {{ record.cidrlist?.replaceAll(" ", "\n") }}</span>
             </template>
+          </template>
         </a-table>
         <a-divider />
         <br/>

ui/src/components/view/DedicateDomain.vue

@@ -26,12 +26,16 @@
           showSearch
           optionFilterProp="label"
           :filterOption="(input, option) => {
-            return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
           }"
           @change="handleChangeDomain"
           v-focus="true"
           v-model:value="domainId">
-          <a-select-option v-for="(domain, index) in domainsList" :value="domain.id" :key="index">
+          <a-select-option
+            v-for="(domain, index) in domainsList"
+            :value="domain.id"
+            :key="index"
+            :label="domain.path || domain.name || domain.description">
             {{ domain.path || domain.name || domain.description }}
           </a-select-option>
         </a-select>
@@ -43,9 +47,9 @@
         style="width: 100%"
         @change="handleChangeAccount"
         showSearch
-        optionFilterProp="label"
+        optionFilterProp="value"
         :filterOption="(input, option) => {
-          return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
         }" >
         <a-select-option v-for="(account, index) in accountsList" :value="account.name" :key="index">
           {{ account.name }}

ui/src/components/view/DetailsTab.vue

@@ -112,14 +112,14 @@ export default {
       type: Object,
       required: true
     },
-    loading: {
-      type: Boolean,
-      default: false
-    },
     items: {
       type: Object,
       default: () => {}
     },
+    loading: {
+      type: Boolean,
+      default: false
+    },
     bordered: {
       type: Boolean,
       default: false

ui/src/components/view/EventsTab.vue

@@ -152,19 +152,15 @@ export default {
       for (var columnKey of this.columnKeys) {
         if (!this.selectedColumnKeys.includes(columnKey)) continue
         this.columns.push({
+          key: columnKey,
           title: this.$t('label.' + String(columnKey).toLowerCase()),
           dataIndex: columnKey,
-          slots: { customRender: columnKey },
           sorter: function (a, b) { return genericCompare(a[this.dataIndex] || '', b[this.dataIndex] || '') }
         })
       }
-      this.columns.push({
+      if (this.columns.length > 0) {
-        dataIndex: 'dropdownFilter',
+        this.columns[this.columns.length - 1].customFilterDropdown = true
-        slots: {
-          filterDropdown: 'filterDropdown',
-          filterIcon: 'filterIcon'
       }
-      })
     }
   }
 }

ui/src/components/view/InfoCard.vue

@@ -141,7 +141,7 @@
               icon="barcode-outlined"
               type="dashed"
               size="small"
-              :copyResource="resource.id"
+              :copyResource="String(resource.id)"
               @onClick="$message.success($t('label.copied.clipboard'))" />
             <span style="margin-left: 10px;">{{ resource.id }}</span>
           </div>
@@ -866,9 +866,14 @@ export default {
       return this.resource.templateid
     },
     resourceIcon () {
-      if (this.$showIcon() && this.resource?.icon?.base64image) {
+      if (this.$showIcon()) {
+        if (this.resource?.icon?.base64image) {
           return this.resource.icon.base64image
         }
+        if (this.resource?.resourceIcon?.base64image) {
+          return this.resource.resourceIcon.base64image
+        }
+      }
       return null
     },
     routeFromResourceType () {

ui/src/components/view/InstanceNicsNetworkSelectListView.vue

@@ -25,24 +25,26 @@
       :dataSource="nics"
       :pagination="false"
       :rowKey="record => record.InstanceID">
-      <template #displaytext="{record}">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'displaytext'">
           <span>{{ record.elementName + ' - ' + record.name }}
             <a-tooltip :title="record.nicDescription" placement="top">
               <info-circle-outlined class="table-tooltip-icon" />
             </a-tooltip>
           </span>
         </template>
-      <template #size="{record}">
+        <template v-if="column.key === 'size'">
           <span v-if="record.size">
             {{ $bytesToHumanReadableSize(record.size) }}
           </span>
         </template>
-      <template #selectednetwork="{record}">
+        <template v-if="column.key === 'selectednetwork'">
           <span>{{ record.selectednetworkname || '' }}</span>
         </template>
-      <template #select="{record}">
+        <template v-if="column.key === 'select'">
           <div style="display: flex; justify-content: flex-end;"><a-button @click="openNicNetworkSelector(record)">{{ record.selectednetworkid ? $t('label.change') : $t('label.select') }}</a-button></div>
         </template>
+      </template>
     </a-table>
 
     <a-modal
@@ -87,16 +89,16 @@ export default {
     return {
       nicColumns: [
         {
-          title: this.$t('label.nic'),
+          key: 'displaytext',
-          slots: { customRender: 'displaytext' }
+          title: this.$t('label.nic')
         },
         {
-          title: this.$t('label.network'),
+          key: 'selectednetwork',
-          slots: { customRender: 'selectednetwork' }
+          title: this.$t('label.network')
         },
         {
-          title: '',
+          key: 'select',
-          slots: { customRender: 'select' }
+          title: ''
         }
       ],
       selectedNicForNetworkSelection: {}

ui/src/components/view/InstanceVolumesStoragePoolSelectListView.vue

@@ -26,17 +26,19 @@
       :dataSource="volumes"
       :pagination="false"
       :rowKey="record => record.id">
-      <template #size="{ record }">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'size'">
           <span v-if="record.size">
             {{ $bytesToHumanReadableSize(record.size) }}
           </span>
         </template>
-      <template #selectedstorage="{ record }">
+        <template v-if="column.key === 'selectedstorage'">
           <span>{{ record.selectedstoragename || '' }}</span>
         </template>
-      <template #select="{ record }">
+        <template v-if="column.key === 'select'">
           <div style="display: flex; justify-content: flex-end;"><a-button @click="openVolumeStoragePoolSelector(record)">{{ record.selectedstorageid ? $t('label.change') : $t('label.select') }}</a-button></div>
         </template>
+      </template>
     </a-table>
 
     <a-modal
@@ -86,24 +88,26 @@ export default {
       volumesLoading: false,
       volumeColumns: [
         {
+          key: 'name',
           title: this.$t('label.volumeid'),
           dataIndex: 'name'
         },
         {
+          key: 'type',
           title: this.$t('label.type'),
           dataIndex: 'type'
         },
         {
-          title: this.$t('label.size'),
+          key: 'size',
-          slots: { customRender: 'size' }
+          title: this.$t('label.size')
         },
         {
-          title: this.$t('label.storage'),
+          key: 'selectedstorage',
-          slots: { customRender: 'selectedstorage' }
+          title: this.$t('label.storage')
         },
         {
-          title: '',
+          key: 'select',
-          slots: { customRender: 'select' }
+          title: ''
         }
       ],
       selectedVolumeForStoragePoolSelection: {},

ui/src/components/view/ListResourceTable.vue

@@ -34,22 +34,23 @@
       :pagination="defaultPagination"
       @change="handleTableChange"
       @handle-search-filter="handleTableChange" >
-
+      <template #bodyCell="{ column, text, record }">
-      <template
+        <div
-        v-for="(column, index) in Object.keys(routerlinks({}))"
+          v-for="(col, index) in Object.keys(routerlinks({}))"
-        :key="index"
+          :key="index">
-        #[column]="{ text, record }" >
+          <template v-if="column.key === col">
-        <router-link :set="routerlink = routerlinks(record)" :to="{ path: routerlink[column] }" >{{ text }}</router-link>
+            <router-link :set="routerlink = routerlinks(record)" :to="{ path: routerlink[col] }" >{{ text }}</router-link>
           </template>
+        </div>
 
-      <template #state="{text}">
+        <template v-if="column.key === 'state'">
           <status :text="text ? text : ''" />{{ text }}
         </template>
 
-      <template #status="{text}">
+        <template v-if="column.key === 'status'">
           <status :text="text ? text : ''" />{{ text }}
         </template>
-
+      </template>
     </a-table>
 
     <div v-if="!defaultPagination" style="display: block; text-align: right; margin-top: 10px;">
@@ -197,9 +198,9 @@ export default {
       var columns = []
       for (const col of this.columns) {
         columns.push({
+          key: col,
           dataIndex: col,
-          title: this.$t('label.' + col),
+          title: this.$t('label.' + col)
-          slots: { customRender: col }
         })
       }
       return columns

ui/src/components/view/ListView.vue

@@ -23,11 +23,11 @@
     :dataSource="items"
     :rowKey="(record, idx) => record.id || record.name || record.usageType || idx + '-' + Math.random()"
     :pagination="false"
-    :rowSelection=" enableGroupAction() || $route.name === 'event' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
+    :rowSelection=" enableGroupAction() || $route.name === 'event' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange, columnWidth: 30} : null"
     :rowClassName="getRowClassName"
     style="overflow-y: auto"
   >
-    <template #filterDropdown>
+    <template #customFilterDropdown>
       <div style="padding: 8px" class="filter-dropdown">
         <a-menu>
           <a-menu-item v-for="(column, idx) in columnKeys" :key="idx" @click="updateSelectedColumns(column)">
@@ -37,40 +37,8 @@
         </a-menu>
       </div>
     </template>
-    <template #footer>
+    <template #bodyCell="{ column, text, record }">
-      <span v-if="hasSelected">
+      <template v-if="column.key === 'name'">
-        {{ `Selected ${selectedRowKeys.length} items` }}
-      </span>
-    </template>
-
-    <!--
-    <div #expandedRowRender="{ resource }">
-      <info-card :resource="resource style="margin-left: 0px; width: 50%">
-        <div #actions style="padding-top: 12px">
-          <a-tooltip
-            v-for="(action, actionIndex) in $route.meta.actions"
-            :key="actionIndex"
-            placement="bottom">
-            <template #title>
-              {{ $t(action.label) }}
-            </template>
-            <a-button
-              v-if="action.api in $store.getters.apis && action.dataView &&
-                ('show' in action ? action.show(resource, $store.getters.userInfo) : true)"
-              :icon="action.icon"
-              :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
-              shape="circle"
-              style="margin-right: 5px; margin-top: 12px"
-              @click="$parent.execAction(action)"
-            >
-            </a-button>
-          </a-tooltip>
-        </div>
-      </info-card>
-    </div>
-    -->
-
-    <template #name="{text, record}">
         <span v-if="['vm'].includes($route.path.split('/')[1])" style="margin-right: 5px">
           <span v-if="record.icon && record.icon.base64image">
             <resource-icon :image="record.icon.base64image" size="1x"/>
@@ -105,7 +73,6 @@
             <router-link v-else :to="{ path: $route.path + '/' + record.name }" >{{ text }}</router-link>
           </span>
           <span v-else-if="$route.path.startsWith('/globalsetting')">{{ text }}</span>
-        <span v-else-if="$route.path.startsWith('/preferences')">{{ text }}</span>
           <span v-else-if="$route.path.startsWith('/alert')">
             <router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ $t(text.toLowerCase()) }}</router-link>
             <router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ $t(text.toLowerCase()) }}</router-link>
@@ -125,14 +92,14 @@
           </span>
         </span>
       </template>
-    <template #templatetype="{ text, record }">
+      <template v-if="column.key === 'templatetype'">
         <router-link :to="{ path: $route.path + '/' + record.templatetype }">{{ text }}</router-link>
       </template>
-    <template #type="{ text }">
+      <template v-if="column.key === 'type'">
         <span v-if="['USER.LOGIN', 'USER.LOGOUT', 'ROUTER.HEALTH.CHECKS', 'FIREWALL.CLOSE', 'ALERT.SERVICE.DOMAINROUTER'].includes(text)">{{ $t(text.toLowerCase()) }}</span>
         <span v-else>{{ text }}</span>
       </template>
-    <template #displayname="{text, record}">
+      <template v-if="column.key === 'displayname'">
         <QuickView
           style="margin-left: 5px"
           :actions="actions"
@@ -141,7 +108,7 @@
           @exec-action="$parent.execAction"/>
         <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
       </template>
-    <template #username="{text, record}">
+      <template v-if="column.key === 'username'">
         <span v-if="$showIcon() && !['vm'].includes($route.path.split('/')[1])" style="margin-right: 5px">
           <resource-icon v-if="$showIcon() && record.icon && record.icon.base64image" :image="record.icon.base64image" size="1x"/>
           <user-outlined v-else style="font-size: 16px;" />
@@ -150,17 +117,17 @@
         <router-link :to="{ path: '/accountuser', query: { username: record.username, domainid: record.domainid } }" v-else-if="$store.getters.userInfo.roletype !== 'User'">{{ text }}</router-link>
         <span v-else>{{ text }}</span>
       </template>
-    <template #entityid="{ record }" href="javascript:;">
+      <template v-if="column.key === 'entityid'">
         <router-link :to="{ path: generateCommentsPath(record), query: { tab: 'comments' } }">{{ record.entityname }}</router-link>
       </template>
-    <template #entitytype="{ record }" href="javascript:;">
+      <template v-if="column.key === 'entitytype'">
         {{ generateHumanReadableEntityType(record) }}
       </template>
-    <template #adminsonly="{ record }" v-if="['Admin'].includes($store.getters.userInfo.roletype)" href="javascript:;">
+      <template v-if="column.key === 'adminsonly' && ['Admin'].includes($store.getters.userInfo.roletype)">
         <a-checkbox :checked="record.adminsonly" :value="record.id" v-if="record.userid === $store.getters.userInfo.id" @change="e => updateAdminsOnly(e)" />
         <a-checkbox :checked="record.adminsonly" disabled v-else />
       </template>
-    <template #ipaddress="{ text, record }" href="javascript:;">
+      <template v-if="column.key === 'ipaddress'" href="javascript:;">
         <router-link v-if="['/publicip', '/privategw'].includes($route.path)" :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
         <span v-else>{{ text }}</span>
         <span v-if="record.issourcenat">
@@ -172,76 +139,72 @@
           <a-tag>static-nat</a-tag>
         </span>
       </template>
-    <template #ip6address="{ text, record }" href="javascript:;">
+      <template v-if="column.key === 'ip6address'" href="javascript:;">
         <span>{{ ipV6Address(text, record) }}</span>
       </template>
-    <template #publicip="{ text, record }">
+      <template v-if="column.key === 'publicip'">
         <router-link v-if="['/autoscalevmgroup'].includes($route.path)" :to="{ path: '/publicip' + '/' + record.publicipid }">{{ text }}</router-link>
         <router-link v-else :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
       </template>
-    <template #traffictype="{ text }" href="javascript:;">
+      <template v-if="column.key === 'traffictype'">
         {{ text }}
       </template>
-    <template #vmname="{ text, record }">
+      <template v-if="column.key === 'vmname'">
         <router-link :to="{ path: createPathBasedOnVmType(record.vmtype, record.virtualmachineid) }">{{ text }}</router-link>
       </template>
-    <template #virtualmachinename="{ text, record }">
+      <template v-if="column.key === 'virtualmachinename'">
         <router-link :to="{ path: '/vm/' + record.virtualmachineid }">{{ text }}</router-link>
       </template>
-    <template #hypervisor="{ text, record }">
+      <template v-if="column.key === 'hypervisor'">
         <span v-if="$route.name === 'hypervisorcapability'">
         <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
         </span>
         <span v-else>{{ text }}</span>
       </template>
-    <template #state="{ text, record }">
+      <template v-if="column.key === 'state'">
         <status v-if="$route.path.startsWith('/host')" :text="getHostState(record)" displayText />
         <status v-else :text="text ? text : ''" displayText :styles="{ 'min-width': '80px' }" />
       </template>
-    <template #allocationstate="{ text }">
+      <template v-if="column.key === 'allocationstate'">
         <status :text="text ? text : ''" displayText />
       </template>
-    <template #resourcestate="{ text }">
+      <template v-if="column.key === 'resourcestate'">
         <status :text="text ? text : ''" displayText />
       </template>
-    <template #powerstate="{ text }">
+      <template v-if="column.key === 'powerstate'">
         <status :text="text ? text : ''" displayText />
       </template>
-    <template #agentstate="{ text }">
+      <template v-if="column.key === 'agentstate'">
         <status :text="text ? text : ''" displayText />
       </template>
-    <template #quotastate="{ text }">
+      <template v-if="column.key === 'quotastate'">
         <status :text="text ? text : ''" displayText />
       </template>
-    <template #vlan="{ text, record }">
+      <template v-if="column.key === 'vlan'">
         <a href="javascript:;">
           <router-link v-if="$route.path === '/guestvlans'" :to="{ path: '/guestvlans/' + record.id }">{{ text }}</router-link>
         </a>
       </template>
-    <template #guestnetworkname="{ text, record }">
+      <template v-if="column.key === 'guestnetworkname'">
         <router-link :to="{ path: '/guestnetwork/' + record.guestnetworkid }">{{ text }}</router-link>
       </template>
-    <template #associatednetworkname="{ text, record }">
+      <template v-if="column.key === 'associatednetworkname'">
         <router-link :to="{ path: '/guestnetwork/' + record.associatednetworkid }">{{ text }}</router-link>
       </template>
-    <template #vpcname="{ text, record }">
+      <template v-if="column.key === 'vpcname'">
         <router-link :to="{ path: '/vpc/' + record.vpcid }">{{ text }}</router-link>
       </template>
-    <template #hostname="{ text, record }">
+      <template v-if="column.key === 'hostname'">
         <router-link v-if="record.hostid" :to="{ path: '/host/' + record.hostid }">{{ text }}</router-link>
         <router-link v-else-if="record.hostname" :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
         <span v-else>{{ text }}</span>
       </template>
-    <template #storage="{ text, record }">
+      <template v-if="column.key === 'storage'">
         <router-link v-if="record.storageid" :to="{ path: '/storagepool/' + record.storageid }">{{ text }}</router-link>
         <span v-else>{{ text }}</span>
       </template>
-
+      <template v-for="(value, name) in thresholdMapping" :key="name">
-    <template
+        <template v-if="column.key === name">
-      v-for="(value, name) in thresholdMapping"
-      :key="name"
-      #[name]="{ text, record }"
-      href="javascript:;">
           <span>
             <span v-if="record[value.disable]" class="alert-disable-threshold">
               {{ text }}
@@ -254,18 +217,19 @@
             </span>
           </span>
         </template>
+      </template>
 
-    <template #level="{ text, record }">
+      <template v-if="column.key === 'level'">
         <router-link :to="{ path: '/event/' + record.id }">{{ text }}</router-link>
       </template>
 
-    <template #clustername="{ text, record }">
+      <template v-if="column.key === 'clustername'">
         <router-link :to="{ path: '/cluster/' + record.clusterid }">{{ text }}</router-link>
       </template>
-    <template #podname="{ text, record }">
+      <template v-if="column.key === 'podname'">
         <router-link :to="{ path: '/pod/' + record.podid }">{{ text }}</router-link>
       </template>
-    <template #account="{ text, record }">
+      <template v-if="column.key === 'account'">
         <template v-if="record.owner">
           <template v-for="(item, idx) in record.owner" :key="idx">
             <span style="margin-right:5px">
@@ -286,59 +250,59 @@
           <span v-else>{{ text }}</span>
         </template>
       </template>
-    <template #resource="{ record }">
+      <template v-if="column.key === 'resource'">
         <resource-label :resourceType="record.resourcetype" :resourceId="record.resourceid" :resourceName="record.resourcename" />
       </template>
-    <template #domain="{ text, record }">
+      <template v-if="column.key === 'domain'">
         <router-link v-if="record.domainid && !record.domainid.toString().includes(',') && $store.getters.userInfo.roletype !== 'User'" :to="{ path: '/domain/' + record.domainid, query: { tab: 'details' } }">{{ text }}</router-link>
         <span v-else>{{ text }}</span>
       </template>
-    <template #domainpath="{ text, record }">
+      <template v-if="column.key === 'domainpath'">
         <router-link v-if="record.domainid && !record.domainid.includes(',') && $router.resolve('/domain/' + record.domainid).matched[0].redirect !== '/exception/404'" :to="{ path: '/domain/' + record.domainid, query: { tab: 'details' } }">{{ text }}</router-link>
         <span v-else>{{ text }}</span>
       </template>
-    <template #zone="{ text, record }">
+      <template v-if="column.key === 'zone'">
         <router-link v-if="record.zoneid && !record.zoneid.includes(',') && $router.resolve('/zone/' + record.zoneid).matched[0].redirect !== '/exception/404'" :to="{ path: '/zone/' + record.zoneid }">{{ text }}</router-link>
         <span v-else>{{ text }}</span>
       </template>
-    <template #zonename="{ text, record }">
+      <template v-if="column.key === 'zonename'">
         <router-link v-if="$router.resolve('/zone/' + record.zoneid).matched[0].redirect !== '/exception/404'" :to="{ path: '/zone/' + record.zoneid }">{{ text }}</router-link>
         <span v-else>{{ text }}</span>
       </template>
-    <template #rolename="{ text, record }">
+      <template v-if="column.key === 'rolename'">
         <router-link v-if="record.roleid && $router.resolve('/role/' + record.roleid).matched[0].redirect !== '/exception/404'" :to="{ path: '/role/' + record.roleid }">{{ text }}</router-link>
         <span v-else>{{ text }}</span>
       </template>
-    <template #templateversion="{ record }">
+      <template v-if="column.key === 'templateversion'">
         <span>  {{ record.version }} </span>
       </template>
-    <template #softwareversion="{ record }">
+      <template v-if="column.key === 'softwareversion'">
         <span>  {{ record.softwareversion ? record.softwareversion : 'N/A' }} </span>
       </template>
-    <template #access="{ record }">
+      <template v-if="column.key === 'access'">
         <status :text="record.readonly ? 'ReadOnly' : 'ReadWrite'" displayText />
       </template>
-    <template #requiresupgrade="{ record }">
+      <template v-if="column.key === 'requiresupgrade'">
         <status :text="record.requiresupgrade ? 'warning' : ''" />
         {{ record.requiresupgrade ? 'Yes' : 'No' }}
       </template>
-    <template #loadbalancerrule="{ record }">
+      <template v-if="column.key === 'loadbalancerrule'">
         <span>  {{ record.loadbalancerrule }} </span>
       </template>
-    <template #autoscalingenabled="{ record }">
+      <template v-if="column.key === 'autoscalingenabled'">
         <status :text="record.autoscalingenabled ? 'Enabled' : 'Disabled'" />
         {{ record.autoscalingenabled ? 'Enabled' : 'Disabled' }}
       </template>
-    <template #current="{record}">
+      <template v-if="column.key === 'current'">
         <status :text="record.current ? record.current.toString() : 'false'" />
       </template>
-    <template #created="{ text }">
+      <template v-if="column.key === 'created'">
         {{ $toLocaleDate(text) }}
       </template>
-    <template #sent="{ text }">
+      <template v-if="column.key === 'sent'">
         {{ $toLocaleDate(text) }}
       </template>
-    <template #order="{ text, record }">
+      <template v-if="column.key === 'order'">
         <div class="shift-btns">
           <a-tooltip :name="text" placement="top">
             <template #title>{{ $t('label.move.to.top') }}</template>
@@ -373,7 +337,7 @@
         </div>
       </template>
 
-    <template #value="{ text, record }">
+      <template v-if="column.key === 'value'">
         <a-input
           v-if="editableValueKey === record.key"
           v-focus="true"
@@ -387,7 +351,7 @@
           {{ text }}
         </div>
       </template>
-    <template #actions="{ record }">
+      <template v-if="column.key === 'actions'">
         <tooltip-button
           :tooltip="$t('label.edit')"
           :disabled="!('updateConfiguration' in $store.getters.apis)"
@@ -414,7 +378,7 @@
           icon="reload-outlined"
           :disabled="!('updateConfiguration' in $store.getters.apis)" />
       </template>
-    <template #tariffActions="{ record }">
+      <template v-if="column.key === 'tariffActions'">
         <tooltip-button
           :tooltip="$t('label.edit')"
           v-if="editableValueKey !== record.key"
@@ -423,6 +387,12 @@
           @onClick="editTariffValue(record)" />
         <slot></slot>
       </template>
+    </template>
+    <template #footer>
+      <span v-if="hasSelected">
+        {{ `Selected ${selectedRowKeys.length} items` }}
+      </span>
+    </template>
   </a-table>
 </template>
 

ui/src/components/view/NicNetworkSelectForm.vue

@@ -33,12 +33,14 @@
         :dataSource="networks"
         :pagination="false"
         :rowKey="record => record.id">
-        <template #select="{record}">
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'select'">
             <a-radio
               @click="updateSelection(record)"
               :checked="selectedNetwork != null && record.id === selectedNetwork.id">
             </a-radio>
           </template>
+        </template>
       </a-table>
       <a-pagination
         class="top-spaced"
@@ -97,24 +99,28 @@ export default {
       selectedNetwork: null,
       columns: [
         {
+          key: 'name',
           title: this.$t('label.networkid'),
           dataIndex: 'name'
         },
         {
+          key: 'type',
           title: this.$t('label.guestiptype'),
           dataIndex: 'type'
         },
         {
+          key: 'vpcName',
           title: this.$t('label.vpc'),
           dataIndex: 'vpcName'
         },
         {
+          key: 'cidr',
           title: this.$t('label.cidr'),
           dataIndex: 'cidr'
         },
         {
-          title: this.$t('label.select'),
+          key: 'select',
-          slots: { customRender: 'select' }
+          title: this.$t('label.select')
         }
       ]
     }

ui/src/components/view/SearchView.vue

@@ -70,7 +70,7 @@
                       v-for="(opt, idx) in field.opts"
                       :key="idx"
                       :value="opt.id"
-                      :label="$t(opt.name)">
+                      :label="$t(opt.path || opt.name)">
                       <div>
                         <span v-if="(field.name.startsWith('zone'))">
                           <span v-if="opt.icon">
@@ -618,6 +618,7 @@ export default {
     },
     onClear () {
       this.formRef.value.resetFields()
+      this.form = reactive({})
       this.isFiltered = false
       this.inputKey = null
       this.inputValue = null
@@ -630,7 +631,6 @@ export default {
       this.formRef.value.validate().then(() => {
         const values = toRaw(this.form)
         this.isFiltered = true
-        console.log(values)
         for (const key in values) {
           const input = values[key]
           if (input === '' || input === null || input === undefined) {

ui/src/components/view/StoragePoolSelectView.vue

@@ -32,19 +32,22 @@
       :dataSource="storagePools"
       :pagination="false"
       :rowKey="record => record.id">
-      <template #suitabilityCustomTitle>
+      <template #headerCell="{ column }">
+        <template v-if="column.key === 'suitability'">
           {{ $t('label.suitability') }}
           <a-tooltip :title="$t('message.volume.state.primary.storage.suitability')" placement="top">
             <info-circle-outlined class="table-tooltip-icon" />
           </a-tooltip>
         </template>
-      <template #name="{ record }">
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'name'">
           {{ record.name }}
           <a-tooltip v-if="record.name === $t('label.auto.assign')" :title="$t('message.migrate.volume.pool.auto.assign')" placement="top">
             <info-circle-outlined class="table-tooltip-icon" />
           </a-tooltip>
         </template>
-      <template #suitability="{ record }">
+        <template v-if="column.key === 'suitability'">
           <check-circle-two-tone
             class="host-item__suitability-icon"
             twoToneColor="#52c41a"
@@ -54,16 +57,16 @@
             twoToneColor="#f5222d"
             v-else />
         </template>
-      <template #disksizetotal="{ record }">
+        <template v-if="column.key === 'disksizetotal'">
           <span v-if="record.disksizetotal">{{ $bytesToHumanReadableSize(record.disksizetotal) }}</span>
         </template>
-      <template #disksizeused="{ record }">
+        <template v-if="column.key === 'disksizeused'">
           <span v-if="record.disksizeused">{{ $bytesToHumanReadableSize(record.disksizeused) }}</span>
         </template>
-      <template #disksizefree="{ record }">
+        <template v-if="column.key === 'disksizefree'">
           <span v-if="record.disksizetotal && record.disksizeused">{{ $bytesToHumanReadableSize(record.disksizetotal * 1 - record.disksizeused * 1) }}</span>
         </template>
-      <template #select="{ record }">
+        <template v-if="column.key === 'select'">
           <a-tooltip placement="top" :title="record.state !== 'Up' ? $t('message.primary.storage.invalid.state') : ''">
             <a-radio
               :disabled="record.id !== -1 && record.state !== 'Up'"
@@ -72,6 +75,7 @@
             </a-radio>
           </a-tooltip>
         </template>
+      </template>
     </a-table>
     <a-pagination
       class="top-spaced"
@@ -132,8 +136,8 @@ export default {
       selectedStoragePool: null,
       columns: [
         {
-          title: this.$t('label.storageid'),
+          key: 'name',
-          slots: { customRender: 'name' }
+          title: this.$t('label.storageid')
         },
         {
           title: this.$t('label.clusterid'),
@@ -144,27 +148,27 @@ export default {
           dataIndex: 'podname'
         },
         {
-          title: this.$t('label.disksizetotal'),
+          key: 'disksizetotal',
-          slots: { customRender: 'disksizetotal' }
+          title: this.$t('label.disksizetotal')
         },
         {
-          title: this.$t('label.disksizeused'),
+          key: 'disksizeused',
-          slots: { customRender: 'disksizeused' }
+          title: this.$t('label.disksizeused')
         },
         {
-          title: this.$t('label.disksizefree'),
+          key: 'disksizefree',
-          slots: { customRender: 'disksizefree' }
+          title: this.$t('label.disksizefree')
         },
         {
-          title: this.$t('label.select'),
+          key: 'select',
-          slots: { customRender: 'select' }
+          title: this.$t('label.select')
         }
       ]
     }
   },
   created () {
     if (this.suitabilityEnabled) {
-      this.columns.splice(1, 0, { title: 'suitabilityCustomTitle', slots: 'suitability' })
+      this.columns.splice(1, 0, { key: 'suitability' })
     }
     this.preselectStoragePool()
     this.fetchStoragePools()

ui/src/components/view/TreeView.vue

@@ -42,8 +42,9 @@
               @select="onSelect"
               @expand="onExpand"
               :expandedKeys="arrExpand">
-              <template #parent><folder-outlined /></template>
+              <template #icon="{data}">
-              <template #leaf><block-outlined /></template>
+                <block-outlined v-if="data.isLeaf" />
+              </template>
             </a-tree>
           </a-spin>
         </a-card>
@@ -136,6 +137,10 @@ export default {
       default () {
         return {}
       }
+    },
+    treeDeletedKey: {
+      type: String,
+      default: null
     }
   },
   provide: function () {
@@ -183,11 +188,11 @@ export default {
       this.treeViewData = []
       this.arrExpand = []
       if (!this.loading) {
-        this.treeViewData = this.treeData
+        this.treeViewData = this.treeData.slice()
-        this.treeVerticalData = this.treeData
+        this.treeVerticalData = this.treeData.slice()
 
         if (this.treeViewData.length > 0) {
-          this.oldTreeViewData = this.treeViewData
+          this.oldTreeViewData = this.treeViewData.slice()
           this.rootKey = this.treeViewData[0].key
         }
       }
@@ -288,39 +293,47 @@ export default {
             }
           }
 
-          this.onSelectResource()
+          this.handleSelectResource(treeNode.eventKey)
           resolve()
         })
       })
     },
-    onSelectResource () {
+    async handleSelectResource (treeKey) {
-      if (this.treeStore.selected) {
+      if (this.treeDeletedKey && this.treeDeletedKey === this.treeStore?.treeSelected?.key) {
-        this.selectedTreeKey = this.treeStore.selected
+        const treeSelectedKey = this.treeStore.treeSelected.parentdomainid
-        this.defaultSelected = [this.selectedTreeKey]
+        if (treeSelectedKey === this.rootKey) {
-
-        const resource = this.treeVerticalData.filter(item => item.id === this.selectedTreeKey)
-        if (resource.length > 0) {
-          this.resource = resource[0]
-          this.$emit('change-resource', this.resource)
-        } else {
-          const resourceIdx = this.treeVerticalData.findIndex(item => item.id === this.resource.id)
-          const parentIndex = this.treeVerticalData.findIndex(item => item.id === this.resource.parentdomainid)
-          if (resourceIdx !== -1) {
-            this.resource = this.treeVerticalData[resourceIdx]
-          } else if (parentIndex !== 1) {
-            this.resource = this.treeVerticalData[parentIndex]
-          } else {
           this.resource = this.treeVerticalData[0]
-          }
+
-          this.selectedTreeKey = this.resource.key
+          this.selectedTreeKey = treeSelectedKey
-          this.defaultSelected = [this.selectedTreeKey]
+          this.defaultSelected = [treeSelectedKey]
           this.$emit('change-resource', this.resource)
+          await this.setTreeStore(false, false, this.resource)
+          return
         }
+        const resourceIndex = await this.treeVerticalData.findIndex(item => item.id === treeSelectedKey)
+        if (resourceIndex > -1) {
+          const resource = await this.getDetailResource(treeSelectedKey)
+          this.resource = await this.createResourceData(resource)
+
+          this.selectedTreeKey = treeSelectedKey
+          this.defaultSelected = [treeSelectedKey]
+          this.$emit('change-resource', this.resource)
+          await this.setTreeStore(false, false, this.resource)
+          return
+        }
+      }
+      const treeSelectedKey = this.treeStore.treeSelected.key
+      const resourceIndex = await this.treeVerticalData.findIndex(item => item.id === treeSelectedKey)
+      if (resourceIndex > -1) {
+        this.selectedTreeKey = treeSelectedKey
+        this.defaultSelected = [treeSelectedKey]
+
+        this.resource = this.treeStore.treeSelected
+        this.$emit('change-resource', this.resource)
       }
     },
-    onSelect (selectedKeys, event) {
+    async onSelect (selectedKeys, event) {
       if (!event.selected) {
-        setTimeout(() => { event.node.$refs.selectHandle.click() })
         return
       }
 
@@ -331,20 +344,20 @@ export default {
 
       this.defaultSelected = []
       this.defaultSelected.push(this.selectedTreeKey)
+      const resource = await this.getDetailResource(this.selectedTreeKey)
+      this.resource = await this.createResourceData(resource)
+      const index = this.treeVerticalData.findIndex(item => item.key === this.selectedTreeKey)
+      this.treeVerticalData[index] = this.resource
 
-      const treeStore = this.treeStore
+      this.$emit('change-resource', this.resource)
-      treeStore.expands = this.arrExpand
+      await this.setTreeStore(false, false, this.resource)
-      treeStore.selected = this.selectedTreeKey
-      this.$emit('change-tree-store', this.treeStore)
-
-      this.getDetailResource(this.selectedTreeKey)
     },
     onExpand (treeExpand) {
       const treeStore = this.treeStore
       this.arrExpand = treeExpand
       treeStore.isExpand = true
       treeStore.expands = this.arrExpand
-      treeStore.selected = this.selectedTreeKey
+      treeStore.treeSelected = this.resource
       this.$emit('change-tree-store', treeStore)
     },
     onSearch (value) {
@@ -416,7 +429,15 @@ export default {
     onTabChange (key) {
       this.tabActive = key
     },
+    setTreeStore (arrExpand, isExpand, resource) {
+      const treeStore = this.treeStore
+      if (arrExpand) treeStore.expands = arrExpand
+      if (isExpand) treeStore.isExpand = true
+      if (resource) treeStore.treeSelected = resource
+      this.$emit('change-tree-store', treeStore)
+    },
     getDetailResource (selectedKey) {
+      return new Promise(resolve => {
         // set api name and parameter
         const apiName = this.$route.meta.permission[0]
         const params = {}
@@ -431,26 +452,13 @@ export default {
         this.detailLoading = true
         api(apiName, params).then(json => {
           const jsonResponse = this.getResponseJsonData(json)
-
+          resolve(jsonResponse[0])
-        // check json response is empty
+        }).catch(() => {
-        if (!jsonResponse || jsonResponse.length === 0) {
+          resolve()
-          this.resource = []
-        } else {
-          this.resource = jsonResponse[0]
-          this.resource = this.createResourceData(this.resource)
-          // set all value of resource tree data
-          this.treeVerticalData.filter((item, index) => {
-            if (item.id === this.resource.id) {
-              this.treeVerticalData[index] = this.resource
-            }
-          })
-        }
-
-        // emit change resource to parent
-        this.$emit('change-resource', this.resource)
         }).finally(() => {
           this.detailLoading = false
         })
+      })
     },
     getResponseJsonData (json) {
       let responseName
@@ -524,15 +532,13 @@ export default {
       })
       resource.title = resource.name
       resource.key = resource.id
-      resource.slots = {
+      if (resource?.icon) {
-        icon: 'parent'
+        resource.resourceIcon = resource.icon
+        delete resource.icon
       }
 
       if (!resource.haschild) {
         resource.isLeaf = true
-        resource.slots = {
-          icon: 'leaf'
-        }
       }
 
       return resource
@@ -586,8 +592,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.list-tree-view {
+:deep(.ant-tree).list-tree-view {
   overflow-y: hidden;
+  margin-top: 10px;
 }
 :deep(.ant-tree).ant-tree-directory {
   li.ant-tree-treenode-selected {
@@ -615,7 +622,7 @@ export default {
   }
 }
 
-:deep(.ant-tree) li span.ant-tree-switcher.ant-tree-switcher-noop {
+:deep(.ant-tree-show-line) .ant-tree-switcher.ant-tree-switcher-noop {
   display: none
 }
 
@@ -626,10 +633,38 @@ export default {
 
 :deep(.ant-tree-icon__customize) {
   padding-right: 5px;
+  background: transparent;
 }
 
-:deep(.ant-tree) li .ant-tree-node-content-wrapper {
+:deep(.ant-tree) {
-  padding-left: 0;
+  .ant-tree-treenode {
-  margin-left: 3px;
+    .ant-tree-node-content-wrapper {
+      margin-left: 0;
+      margin-bottom: 2px;
+
+      &:before {
+        border-left: 1px solid #d9d9d9;
+        content: " ";
+        height: 100%;
+        height: calc(100% - 15px);
+        left: 12px;
+        margin: 22px 0 0;
+        position: absolute;
+        width: 1px;
+        top: 0;
+      }
+    }
+
+    &.ant-tree-treenode-switcher-close, &.ant-tree-treenode-switcher-open, &.ant-tree-treenode-leaf-last {
+      .ant-tree-node-content-wrapper:before {
+        display: none;
+      }
+    }
+  }
+}
+
+:deep(.ant-tree-show-line) .ant-tree-indent-unit:before {
+  bottom: -2px;
+  top: -5px;
 }
 </style>

ui/src/components/view/VolumesTab.vue

@@ -24,7 +24,8 @@
     :rowKey="item => item.id"
     :pagination="false"
   >
-    <template #name="{ text, record }">
+    <template #bodyCell="{ column, text, record }">
+      <template v-if="column.key === 'name'">
         <hdd-outlined style="margin-right: 5px"/>
         <router-link :to="{ path: '/volume/' + record.id }" style="margin-right: 5px">
           {{ text }}
@@ -33,12 +34,13 @@
           {{  record.provisioningtype  }}
         </a-tag>
       </template>
-    <template #state="{ text }">
+      <template v-if="column.key === 'state'">
         <status :text="text ? text : ''" />{{ text }}
       </template>
-    <template #size="{ record }">
+      <template v-if="column.key === 'size'">
         {{ parseFloat(record.size / (1024.0 * 1024.0 * 1024.0)).toFixed(2) }} GB
       </template>
+    </template>
   </a-table>
 </template>
 
@@ -68,23 +70,23 @@ export default {
       volumes: [],
       volumeColumns: [
         {
+          key: 'name',
           title: this.$t('label.name'),
-          dataIndex: 'name',
+          dataIndex: 'name'
-          slots: { customRender: 'name' }
         },
         {
+          key: 'state',
           title: this.$t('label.state'),
-          dataIndex: 'state',
+          dataIndex: 'state'
-          slots: { customRender: 'state' }
         },
         {
           title: this.$t('label.type'),
           dataIndex: 'type'
         },
         {
+          key: 'size',
           title: this.$t('label.size'),
-          dataIndex: 'size',
+          dataIndex: 'size'
-          slots: { customRender: 'size' }
         }
       ]
     }
@@ -92,7 +94,6 @@ export default {
   created () {
     this.vm = this.resource
     this.fetchData()
-    console.log(this.resource.volumes)
   },
   watch: {
     resource: function (newItem) {

ui/src/components/widgets/Status.vue

@@ -16,6 +16,7 @@
 // under the License.
 
 <template>
+  <div style="display: inline-flex;">
     <a-tooltip placement="bottom" :title="getTooltip(text)">
       <a-badge
         :style="getStyle()"
@@ -24,6 +25,7 @@
         :status="getBadgeStatus(text)"
         :text="getText()" />
     </a-tooltip>
+  </div>
 </template>
 
 <script>

ui/src/config/section/config.js

@@ -25,6 +25,7 @@ export default {
       name: 'globalsetting',
       title: 'label.global.settings',
       icon: 'setting-outlined',
+      docHelp: 'adminguide/index.html#tuning',
       permission: ['listConfigurations'],
       listView: true,
       popup: true,
@@ -34,6 +35,7 @@ export default {
       name: 'ldapsetting',
       title: 'label.ldap.configuration',
       icon: 'team-outlined',
+      docHelp: 'adminguide/accounts.html#using-an-ldap-server-for-user-authentication',
       permission: ['listLdapConfigurations'],
       columns: ['hostname', 'port', 'domainid'],
       details: ['hostname', 'port', 'domainid'],
@@ -72,6 +74,7 @@ export default {
       name: 'hypervisorcapability',
       title: 'label.hypervisor.capabilities',
       icon: 'database-outlined',
+      docHelp: 'adminguide/hosts.html?highlight=Hypervisor%20capabilities#hypervisor-capabilities',
       permission: ['listHypervisorCapabilities'],
       columns: ['hypervisor', 'hypervisorversion', 'maxguestslimit', 'maxhostspercluster'],
       details: ['hypervisor', 'hypervisorversion', 'maxguestslimit', 'maxdatavolumeslimit', 'maxhostspercluster', 'securitygroupenabled', 'storagemotionenabled'],

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

@@ -22,6 +22,7 @@ export default {
   name: 'cluster',
   title: 'label.clusters',
   icon: 'cluster-outlined',
+  docHelp: 'conceptsandterminology/concepts.html#about-clusters',
   permission: ['listClustersMetrics'],
   columns: () => {
     const fields = ['name', 'state', 'allocationstate', 'clustertype', 'hypervisortype', 'hosts']

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

@@ -22,6 +22,7 @@ export default {
   name: 'host',
   title: 'label.hosts',
   icon: 'desktop-outlined',
+  docHelp: 'conceptsandterminology/concepts.html#about-hosts',
   permission: ['listHostsMetrics'],
   resourceType: 'Host',
   params: { type: 'routing' },

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

@@ -20,6 +20,7 @@ export default {
   name: 'ilbvm',
   title: 'label.internal.lb',
   icon: 'share-alt-outlined',
+  docHelp: 'adminguide/networking_and_traffic.html#creating-an-internal-lb-rule',
   permission: ['listInternalLoadBalancerVMs'],
   params: { projectid: '-1' },
   columns: ['name', 'state', 'publicip', 'guestnetworkname', 'vpcname', 'version', 'softwareversion', 'hostname', 'account', 'zonename', 'requiresupgrade'],

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

@@ -22,6 +22,7 @@ export default {
   name: 'managementserver',
   title: 'label.management.servers',
   icon: 'CloudServerOutlined',
+  docHelp: 'conceptsandterminology/concepts.html#management-server-overview',
   permission: ['listManagementServersMetrics'],
   columns: () => {
     const fields = ['name', 'state', 'version']

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

@@ -22,6 +22,7 @@ export default {
   name: 'pod',
   title: 'label.pods',
   icon: 'appstore-outlined',
+  docHelp: 'conceptsandterminology/concepts.html#about-pods',
   permission: ['listPods'],
   columns: ['name', 'allocationstate', 'gateway', 'netmask', 'zonename'],
   details: ['name', 'id', 'allocationstate', 'netmask', 'gateway', 'zonename'],

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

@@ -22,6 +22,7 @@ export default {
   name: 'zone',
   title: 'label.zones',
   icon: 'global-outlined',
+  docHelp: 'conceptsandterminology/concepts.html#about-zones',
   permission: ['listZonesMetrics'],
   columns: () => {
     const fields = ['name', 'allocationstate', 'type', 'networktype', 'clusters']

ui/src/config/section/network.js

@@ -30,6 +30,7 @@ export default {
       name: 'guestnetwork',
       title: 'label.guest.networks',
       icon: 'apartment-outlined',
+      docHelp: 'adminguide/networking_and_traffic.html#adding-an-additional-guest-network',
       permission: ['listNetworks'],
       resourceType: 'Network',
       columns: () => {
@@ -906,6 +907,7 @@ export default {
       name: 'guestvlans',
       title: 'label.guest.vlan',
       icon: 'folder-outlined',
+      docHelp: 'conceptsandterminology/network_setup.html#vlan-allocation-example',
       permission: ['listGuestVlans'],
       resourceType: 'GuestVlan',
       filters: ['allocatedonly', 'all'],

ui/src/layouts/UserLayout.vue

@@ -46,6 +46,7 @@
 <script>
 import RouteView from '@/layouts/RouteView'
 import { mixinDevice } from '@/utils/mixin.js'
+import notification from 'ant-design-vue/es/notification'
 
 export default {
   name: 'UserLayout',
@@ -90,7 +91,7 @@ export default {
   },
   methods: {
     onClearNotification () {
-      this.$notification.destroy()
+      notification.destroy()
       this.$store.commit('SET_COUNT_NOTIFY', 0)
     }
   }

ui/src/permission.js

@@ -26,7 +26,7 @@ import 'nprogress/nprogress.css' // progress bar style
 import message from 'ant-design-vue/es/message'
 import notification from 'ant-design-vue/es/notification'
 import { setDocumentTitle } from '@/utils/domUtil'
-import { ACCESS_TOKEN, APIS, SERVER_MANAGER } from '@/store/mutation-types'
+import { ACCESS_TOKEN, APIS, SERVER_MANAGER, CURRENT_PROJECT } from '@/store/mutation-types'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
@@ -104,7 +104,8 @@ router.beforeEach((to, from, next) => {
               } else {
                 next({ path: redirect })
               }
-              store.dispatch('ToggleTheme', 'light')
+              const project = vueProps.$localStorage.get(CURRENT_PROJECT)
+              store.dispatch('ToggleTheme', project.id === undefined ? 'light' : 'dark')
             })
           })
           .catch(() => {

ui/src/style/dark-mode.less

@@ -83,6 +83,7 @@
 
   .sider.light {
     background: @dark-secondary-bgColor;
+    padding-top: 15px;
 
     .logo {
       background-color: @dark-secondary-bgColor;
@@ -139,6 +140,10 @@
         color: @dark-text-color-3;
       }
     }
+
+    &-inline, &-vertical, &-vertical-left {
+      border-color: transparent;
+    }
   }
 
   .kubernet-icon path
@@ -289,6 +294,10 @@
       & > tr > th.ant-table-column-sort {
         background-color: @dark-bgColor;
       }
+
+      & > tr.ant-table-row:hover > td, & > tr > td.ant-table-cell-row-hover {
+        background: transparent;
+      }
     }
 
     &-footer {
@@ -336,6 +345,12 @@
         border-color: @dark-border-color;
       }
     }
+
+    &-small {
+      .ant-table-thead > tr > th {
+        background-color: transparent;
+      }
+    }
   }
 
   .light-row, .dark-row {
@@ -524,13 +539,17 @@
       background-color: #1890ff;
     }
 
-    &-loading-icon, &:after {
+    &-loading-icon, &::before {
       background-color: @dark-secondary-bgColor;
     }
 
     &:disabled {
       background-color: @disabled-bgColor;
     }
+
+    &-handle::before {
+      background-color: @dark-secondary-bgColor;
+    }
   }
 
   .ant-select-dropdown {
@@ -783,7 +802,7 @@
     background-color: @dark-secondary-bgColor;
   }
 
-  .ant-upload.ant-upload-drag {
+  .ant-form-item .ant-upload.ant-upload-drag {
     background-color: transparent;
     border-color: @dark-border-color;
   }
@@ -792,12 +811,43 @@
     color: @dark-text-color-3;
   }
 
-  .ant-tree.ant-tree-show-line li span.ant-tree-switcher {
+  .ant-upload-list {
+    color: @dark-text-color-3;
+
+    &-item {
+      &:hover {
+        .ant-upload-list-item-info {
+          background: @dark-bgColor;
+        }
+
+        .ant-upload-list-item-card-actions-btn {
+          border-color: transparent;
+        }
+
+        .ant-upload-list-item-card-actions .anticon {
+          color: @dark-text-color-3;
+        }
+      }
+    }
+  }
+
+  .ant-upload-list-item-info {
+    .anticon-loading .anticon,
+    .ant-upload-text-icon .anticon {
+      color: rgba(255, 255, 255, 0.65);
+    }
+  }
+
+  .ant-tree {
+    background: transparent;
+  }
+
+  .ant-tree-show-line .ant-tree-switcher {
     background-color: transparent;
     color: @dark-text-color-3;
   }
 
-  .ant-tree li .ant-tree-node-content-wrapper {
+  .ant-tree .ant-tree-node-content-wrapper {
     color: @dark-text-color-3;
   }
 
@@ -806,7 +856,7 @@
     background-color: transparent;
   }
 
-  .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
+  .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
     .ant-tree-icon__customize {
       color: #000;
     }
@@ -814,7 +864,7 @@
     color: #000;
   }
 
-  .ant-tree li .ant-tree-node-content-wrapper:hover {
+  .ant-tree .ant-tree-node-content-wrapper:hover {
     .ant-tree-icon__customize {
       color: #000;
     }

ui/src/style/index.less

@@ -16,8 +16,8 @@
 // under the License.
 
 //* import all  ## official ant ##  variables; mixins and styles
-@import "~ant-design-vue/lib/style/themes/default";
+@import "~ant-design-vue/es/style/themes/default.less";
-@import "~ant-design-vue/lib/style/core/index";
+@import "~ant-design-vue/es/style/core/index.less";
 
 //* import all  ## custom ##  variables, mixins and styles
 

ui/src/style/vars.less

@@ -506,3 +506,32 @@ a {
 .ant-dropdown-menu-submenu-title:hover {
   background-color: color(~`colorPalette("@{primary-color}", 1)`) !important;
 }
+
+.ant-tabs.tab-center {
+  > .ant-tabs-nav, > div > .ant-tabs-nav,
+  > .ant-tabs-nav .ant-tabs-nav-wrap,
+  > div > .ant-tabs-nav .ant-tabs-nav-wrap {
+    justify-content: center;
+  }
+}
+
+.ant-tabs-large>.ant-tabs-nav .ant-tabs-tab {
+  padding: 16px;
+}
+
+.ant-steps {
+  &-item-container {
+    &:hover {
+      .ant-steps-item-content .ant-steps-item-description {
+        color: inherit !important;
+      }
+    }
+  }
+
+  &-item-process {
+    .ant-steps-item-content .ant-steps-item-title {
+      color: inherit !important;
+      font-weight: 600;
+    }
+  }
+}

ui/src/utils/request.js

@@ -193,6 +193,7 @@ const sourceToken = {
   cancel: () => {
     if (!source) sourceToken.init()
     source.cancel()
+    source = null
   }
 }
 

ui/src/views/AutogenView.vue

@@ -249,11 +249,14 @@
                   showSearch
                   optionFilterProp="label"
                   :filterOption="(input, option) => {
-                    return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                   }"
                 >
-                  <a-select-option key="" >{{ }}</a-select-option>
+                  <a-select-option key="" label="">{{ }}</a-select-option>
-                  <a-select-option v-for="(opt, optIndex) in currentAction.mapping[field.name].options" :key="optIndex">
+                  <a-select-option
+                    v-for="(opt, optIndex) in currentAction.mapping[field.name].options"
+                    :key="optIndex"
+                    :label="opt">
                     {{ opt }}
                   </a-select-option>
                 </a-select>
@@ -266,12 +269,15 @@
                   :loading="field.loading"
                   :placeholder="field.description"
                   :filterOption="(input, option) => {
-                    return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                   }"
                   v-focus="fieldIndex === firstIndex"
                 >
-                  <a-select-option key="">{{ }}</a-select-option>
+                  <a-select-option key="" label="">{{ }}</a-select-option>
-                  <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
+                  <a-select-option
+                    v-for="(opt, optIndex) in field.opts"
+                    :key="optIndex"
+                    :label="opt.name || opt.description || opt.traffictype || opt.publicip">
                     {{ opt.name || opt.description || opt.traffictype || opt.publicip }}
                   </a-select-option>
                 </a-select>
@@ -340,10 +346,13 @@
                   showSearch
                   optionFilterProp="label"
                   :filterOption="(input, option) => {
-                    return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                   }"
                 >
-                  <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
+                  <a-select-option
+                    v-for="(opt, optIndex) in field.opts"
+                    :key="optIndex"
+                    :label="opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description">
                     {{ opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description }}
                   </a-select-option>
                 </a-select>
@@ -405,7 +414,7 @@
         ref="listview"
         @update-selected-columns="updateSelectedColumns"
         @selection-change="onRowSelectionChange"
-        @refresh="this.fetchData"
+        @refresh="fetchData"
         @edit-tariff-action="(showAction, record) => $emit('edit-tariff-action', showAction, record)"/>
       <a-pagination
         class="row-element"
@@ -803,7 +812,6 @@ export default {
         })
       }
 
-      const customRender = {}
       for (var columnKey of this.columnKeys) {
         let key = columnKey
         let title = columnKey === 'cidr' && this.columnKeys.includes('ip6cidr') ? 'ipv4.cidr' : columnKey
@@ -811,18 +819,16 @@ export default {
           if ('customTitle' in columnKey && 'field' in columnKey) {
             key = columnKey.field
             title = columnKey.customTitle
-            customRender[key] = columnKey[key]
           } else {
             key = Object.keys(columnKey)[0]
             title = Object.keys(columnKey)[0]
-            customRender[key] = columnKey[key]
           }
         }
         this.columns.push({
+          key: key,
           title: this.$t('label.' + String(title).toLowerCase()),
           dataIndex: key,
-          slots: { customRender: key },
+          sorter: function (a, b) { return genericCompare(a[key] || '', b[key] || '') }
-          sorter: function (a, b) { return genericCompare(a[this.dataIndex] || '', b[this.dataIndex] || '') }
         })
         this.selectedColumns.push(key)
       }
@@ -844,6 +850,7 @@ export default {
           this.$t('label.linklocalip'), this.$t('label.size'), this.$t('label.sizegb'), this.$t('label.current'),
           this.$t('label.created'), this.$t('label.order')].includes(column.title)
       })
+      this.chosenColumns.splice(this.chosenColumns.length - 1, 1)
 
       if (['listTemplates', 'listIsos'].includes(this.apiName) && this.dataView) {
         delete params.showunique
@@ -951,12 +958,6 @@ export default {
 
         for (let idx = 0; idx < this.items.length; idx++) {
           this.items[idx].key = idx
-          for (const key in customRender) {
-            const func = customRender[key]
-            if (func && typeof func === 'function') {
-              this.items[idx][key] = func(this.items[idx])
-            }
-          }
           if (this.$route.path.startsWith('/ldapsetting')) {
             this.items[idx].id = this.items[idx].hostname
           }
@@ -1280,9 +1281,9 @@ export default {
           this.bulkColumns = this.chosenColumns
           this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
           this.bulkColumns.splice(0, 0, {
+            key: 'status',
             dataIndex: 'status',
             title: this.$t('label.operation.status'),
-            slots: { customRender: 'status' },
             filters: [
               { text: 'In Progress', value: 'InProgress' },
               { text: 'Success', value: 'success' },
@@ -1534,13 +1535,17 @@ export default {
       }
 
       this.columns = this.allColumns.filter(x => this.selectedColumns.includes(x.dataIndex))
-      this.columns.push({
+      const filterColumn = {
-        dataIndex: 'dropdownFilter',
+        key: 'filtercolumn',
-        slots: {
+        dataIndex: 'filtercolumn',
-          filterDropdown: 'filterDropdown',
+        title: '',
-          filterIcon: 'filterIcon'
+        customFilterDropdown: true,
+        width: 5
       }
-      })
+      if (this.columns.length === 0) {
+        filterColumn.width = 'auto'
+      }
+      this.columns.push(filterColumn)
       if (!this.$store.getters.customColumns[this.$store.getters.userInfo.id]) {
         this.$store.getters.customColumns[this.$store.getters.userInfo.id] = {}
       }
@@ -1760,7 +1765,6 @@ export default {
           this.rules[field.name].push(rule)
           break
         default:
-          console.log('hererere')
           rule.required = field.required
           rule.message = this.$t('message.error.required.input')
           this.rules[field.name].push(rule)

ui/src/views/auth/Login.vue

@@ -26,6 +26,7 @@
     v-ctrl-enter="handleSubmit"
   >
     <a-tabs
+      class="tab-center"
       :activeKey="customActiveKey"
       size="large"
       :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
@@ -48,9 +49,9 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }">
-            <a-select-option v-for="item in $config.servers" :key="(item.apiHost || '') + item.apiBase">
+            <a-select-option v-for="item in $config.servers" :key="(item.apiHost || '') + item.apiBase" :label="item.name">
               <template #prefix>
                 <database-outlined />
               </template>
@@ -113,9 +114,9 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
-            <a-select-option v-for="item in $config.servers" :key="(item.apiHost || '') + item.apiBase">
+            <a-select-option v-for="item in $config.servers" :key="(item.apiHost || '') + item.apiBase" :label="item.name">
               <template #prefix>
                 <database-outlined />
               </template>
@@ -129,9 +130,9 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
-            <a-select-option v-for="(idp, idx) in idps" :key="idx" :value="idp.id">
+            <a-select-option v-for="(idp, idx) in idps" :key="idx" :value="idp.id" :label="idp.orgName">
               {{ idp.orgName }}
             </a-select-option>
           </a-select>

ui/src/views/compute/AssignInstance.vue

@@ -35,9 +35,9 @@
           v-model:value="selectedAccountType"
           v-focus="true"
           showSearch
-          optionFilterProp="label"
+          optionFilterProp="value"
           :filterOption="(input, option) => {
-            return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
           }">
           <a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
           <a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>
@@ -71,7 +71,7 @@
             @change="changeAccount"
             v-model:value="selectedAccount"
             showSearch
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
               return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >

ui/src/views/compute/AttachIso.vue

@@ -31,9 +31,9 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }">
-            <a-select-option v-for="iso in isos" :key="iso.id">
+            <a-select-option v-for="iso in isos" :key="iso.id" :label="iso.displaytext || iso.name">
               {{ iso.displaytext || iso.name }}
             </a-select-option>
           </a-select>

ui/src/views/compute/AutoScaleDownPolicyTab.vue

@@ -36,12 +36,13 @@
           showSearch
           optionFilterProp="label"
           :filterOption="(input, option) => {
-                      return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                     }" >
           <a-select-option
             v-for="(scalepolicy, index) in this.policies"
             :value="scalepolicy.id"
-            :key="index">
+            :key="index"
+            :label="scalepolicy.displaytext || scalepolicy.name" >
             {{ scalepolicy.name || scalepolicy.id }}
           </a-select-option>
         </a-select>
@@ -109,16 +110,11 @@
       :dataSource="policy.conditions"
       :pagination="false"
       :rowKey="record => record.id">
-      <template #name="{ record }">
+      <template #bodyCell="{ column, record }">
-        {{ record.name }}
+        <template v-if="column.key === 'relationaloperator'">
-      </template>
-      <template #relationaloperator="{ record }">
           {{ getOperator(record.relationaloperator) }}
         </template>
-      <template #threshold="{ record }">
+        <template v-if="column.key === 'actions'">
-        {{ record.threshold }}
-      </template>
-      <template #actions="{ record }">
           <tooltip-button
             :tooltip="$t('label.edit')"
             :disabled="!('updateCondition' in $store.getters.apis) || resource.state !== 'DISABLED'"
@@ -132,6 +128,7 @@
             icon="delete-outlined"
             @onClick="deleteConditionFromAutoScalePolicy(record.id)" />
         </template>
+      </template>
     </a-table>
 
     <div>
@@ -147,11 +144,15 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             v-focus="true"
             v-model:value="newCondition.counterid">
-            <a-select-option v-for="(counter, index) in countersList" :value="counter.id" :key="index">
+            <a-select-option
+              v-for="(counter, index) in countersList"
+              :value="counter.id"
+              :key="index"
+              :label="counter.name" >
               {{ counter.name }}
             </a-select-option>
           </a-select>
@@ -165,9 +166,9 @@
           <a-select
             v-model:value="newCondition.relationaloperator"
             style="width: 100%;"
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option value="LT" >{{ getOperator('LT') }}</a-select-option>
           </a-select>
@@ -216,9 +217,9 @@
           <a-select
             v-model:value="updateConditionDetails.relationaloperator"
             showSearch
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option value="LT" >{{ getOperator('LT') }}</a-select-option>
           </a-select>
@@ -277,10 +278,14 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             v-model:value="newPolicy.counterid">
-            <a-select-option v-for="(counter, index) in countersList" :value="counter.id" :key="index">
+            <a-select-option
+              v-for="(counter, index) in countersList"
+              :value="counter.id"
+              :key="index"
+              :label="counter.name">
               {{ counter.name }}
             </a-select-option>
           </a-select>
@@ -293,9 +298,9 @@
           <a-select
             v-model:value="newPolicy.relationaloperator"
             showSearch
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option value="LT" >{{ getOperator('LT') }}</a-select-option>
           </a-select>
@@ -338,7 +343,7 @@ export default {
   },
   data () {
     return {
-      filterColumns: ['Action'],
+      filterColumns: ['Actions'],
       loading: true,
       policies: [],
       isEditable: false,
@@ -377,15 +382,15 @@ export default {
         },
         {
           title: this.$t('label.relationaloperator'),
-          slots: { customRender: 'relationaloperator' }
+          key: 'relationaloperator'
         },
         {
           title: this.$t('label.threshold'),
-          slots: { customRender: 'threshold' }
+          dataIndex: 'threshold'
         },
         {
-          title: this.$t('label.action'),
+          title: this.$t('label.actions'),
-          slots: { customRender: 'actions' }
+          key: 'actions'
         }
       ]
     }

ui/src/views/compute/AutoScaleLoadBalancing.vue

@@ -33,17 +33,38 @@
       :dataSource="lbRules"
       :pagination="false"
       :rowKey="record => record.id">
-      <template #algorithm="{ record }">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'algorithm'">
         {{ returnAlgorithmName(record.algorithm) }}
         </template>
-      <template #protocol="{record}">
+        <template v-if="column.key === 'protocol'">
           {{ getCapitalise(record.protocol) }}
         </template>
-      <template #stickiness="{record}">
+        <template v-if="column.key === 'stickiness'">
           <a-button @click="() => openStickinessModal(record.id)">
             {{ returnStickinessLabel(record.id) }}
           </a-button>
         </template>
+        <template v-if="column.key === 'actions'">
+          <div class="actions">
+            <tooltip-button :tooltip="$t('label.edit')" icon="edit-outlined" @onClick="() => openEditRuleModal(record)" />
+            <tooltip-button :tooltip="$t('label.edit.tags')" :disabled="!('updateLoadBalancerRule' in $store.getters.apis)" icon="tag-outlined" @onClick="() => openTagsModal(record.id)" />
+            <a-popconfirm
+              :title="$t('label.delete') + '?'"
+              @confirm="handleDeleteRule(record)"
+              :okText="$t('label.yes')"
+              :cancelText="$t('label.no')"
+            >
+              <tooltip-button
+                :tooltip="$t('label.delete')"
+                :disabled="!('deleteLoadBalancerRule' in $store.getters.apis) || record.autoscalevmgroup"
+                type="primary"
+                :danger="true"
+                icon="delete-outlined" />
+            </a-popconfirm>
+          </div>
+        </template>
+      </template>
       <template #expandedRowRender="{ record }">
         <div class="rule-instance-list">
           <div v-for="instance in record.ruleInstances" :key="instance.loadbalancerruleinstance.id">
@@ -67,25 +88,6 @@
           </div>
         </div>
       </template>
-      <template #actions="{record}">
-        <div class="actions">
-          <tooltip-button :tooltip="$t('label.edit')" icon="edit-outlined" @onClick="() => openEditRuleModal(record)" />
-          <tooltip-button :tooltip="$t('label.edit.tags')" :disabled="!('updateLoadBalancerRule' in $store.getters.apis)" icon="tag-outlined" @onClick="() => openTagsModal(record.id)" />
-          <a-popconfirm
-            :title="$t('label.delete') + '?'"
-            @confirm="handleDeleteRule(record)"
-            :okText="$t('label.yes')"
-            :cancelText="$t('label.no')"
-          >
-            <tooltip-button
-              :tooltip="$t('label.delete')"
-              :disabled="!('deleteLoadBalancerRule' in $store.getters.apis) || record.autoscalevmgroup"
-              type="primary"
-              :danger="true"
-              icon="delete-outlined" />
-          </a-popconfirm>
-        </div>
-      </template>
     </a-table>
     <a-modal
       v-if="tagsModalVisible"
@@ -169,12 +171,12 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
-            <a-select-option value="LbCookie">{{ $t('label.lb.cookie') }}</a-select-option>
+            <a-select-option value="LbCookie" :label="$t('label.lb.cookie')">{{ $t('label.lb.cookie') }}</a-select-option>
-            <a-select-option value="AppCookie">{{ $t('label.app.cookie') }}</a-select-option>
+            <a-select-option value="AppCookie" :label="$t('label.lb.cookie')">{{ $t('label.app.cookie') }}</a-select-option>
-            <a-select-option value="SourceBased">{{ $t('label.source.based') }}</a-select-option>
+            <a-select-option value="SourceBased" :label="$t('label.lb.cookie')">{{ $t('label.source.based') }}</a-select-option>
-            <a-select-option value="none">{{ $t('label.none') }}</a-select-option>
+            <a-select-option value="none" :label="$t('label.lb.cookie')">{{ $t('label.none') }}</a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item
@@ -261,9 +263,9 @@
           <a-select
             v-model:value="editRuleDetails.algorithm"
             showSearch
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option value="roundrobin">{{ $t('label.lb.algorithm.roundrobin') }}</a-select-option>
             <a-select-option value="leastconn">{{ $t('label.lb.algorithm.leastconn') }}</a-select-option>
@@ -275,9 +277,9 @@
           <a-select
             v-model:value="editRuleDetails.protocol"
             showSearch
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option value="tcp-proxy">{{ $t('label.tcp.proxy') }}</a-select-option>
             <a-select-option value="tcp">{{ $t('label.tcp') }}</a-select-option>
@@ -355,11 +357,11 @@ export default {
         },
         {
           title: this.$t('label.algorithm'),
-          slots: { customRender: 'algorithm' }
+          key: 'algorithm'
         },
         {
           title: this.$t('label.protocol'),
-          slots: { customRender: 'protocol' }
+          key: 'protocol'
         },
         {
           title: this.$t('label.state'),
@@ -367,11 +369,11 @@ export default {
         },
         {
           title: this.$t('label.action.configure.stickiness'),
-          slots: { customRender: 'stickiness' }
+          key: 'stickiness'
         },
         {
-          title: this.$t('label.action'),
+          title: this.$t('label.actions'),
-          slots: { customRender: 'actions' }
+          key: 'actions'
         }
       ],
       tiers: {
@@ -382,13 +384,13 @@ export default {
         {
           title: this.$t('label.name'),
           dataIndex: 'name',
-          slots: { customRender: 'name' },
+          key: 'name',
           width: 220
         },
         {
           title: this.$t('label.state'),
           dataIndex: 'state',
-          slots: { customRender: 'state' }
+          key: 'state'
         },
         {
           title: this.$t('label.displayname'),
@@ -404,8 +406,8 @@ export default {
         },
         {
           title: this.$t('label.select'),
-          dataIndex: 'action',
+          dataIndex: 'actions',
-          slots: { customRender: 'action' },
+          key: 'actions',
           width: 80
         }
       ],

ui/src/views/compute/AutoScaleUpPolicyTab.vue

@@ -36,12 +36,13 @@
           showSearch
           optionFilterProp="label"
           :filterOption="(input, option) => {
-                      return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                     }" >
           <a-select-option
             v-for="(scalepolicy, index) in this.policies"
             :value="scalepolicy.id"
-            :key="index">
+            :key="index"
+            :label="scalepolicy.displaytext || scalepolicy.name">
             {{ scalepolicy.name || scalepolicy.id }}
           </a-select-option>
         </a-select>
@@ -109,16 +110,11 @@
       :dataSource="policy.conditions"
       :pagination="false"
       :rowKey="record => record.id">
-      <template #name="{ record }">
+      <template #bodyCell="{ column, record }">
-        {{ record.name }}
+        <template v-if="column.key === 'relationaloperator'">
-      </template>
-      <template #relationaloperator="{ record }">
         {{ getOperator(record.relationaloperator) }}
         </template>
-      <template #threshold="{ record }">
+        <template v-if="column.key === 'actions'">
-        {{ record.threshold }}
-      </template>
-      <template #actions="{ record }">
           <tooltip-button
             :tooltip="$t('label.edit')"
             :disabled="!('updateCondition' in $store.getters.apis) || resource.state !== 'DISABLED'"
@@ -132,6 +128,7 @@
             icon="delete-outlined"
             @onClick="deleteConditionFromAutoScalePolicy(record.id)" />
         </template>
+      </template>
     </a-table>
 
     <div>
@@ -147,11 +144,15 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             v-focus="true"
             v-model:value="newCondition.counterid">
-            <a-select-option v-for="(counter, index) in countersList" :value="counter.id" :key="index">
+            <a-select-option
+              v-for="(counter, index) in countersList"
+              :value="counter.id"
+              :key="index"
+              :label="counter.name">>
               {{ counter.name }}
             </a-select-option>
           </a-select>
@@ -165,9 +166,9 @@
           <a-select
             v-model:value="newCondition.relationaloperator"
             style="width: 100%;"
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option value="GT">{{ getOperator('GT') }}</a-select-option>
           </a-select>
@@ -216,9 +217,9 @@
           <a-select
             v-model:value="updateConditionDetails.relationaloperator"
             showSearch
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option value="GT">{{ getOperator('GT') }}</a-select-option>
           </a-select>
@@ -277,10 +278,14 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             v-model:value="newPolicy.counterid">
-            <a-select-option v-for="(counter, index) in countersList" :value="counter.id" :key="index">
+            <a-select-option
+              v-for="(counter, index) in countersList"
+              :value="counter.id"
+              :key="index"
+              :label="counter.name">
               {{ counter.name }}
             </a-select-option>
           </a-select>
@@ -293,9 +298,9 @@
           <a-select
             v-model:value="newPolicy.relationaloperator"
             showSearch
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option value="GT">{{ getOperator('GT') }}</a-select-option>
           </a-select>
@@ -338,7 +343,7 @@ export default {
   },
   data () {
     return {
-      filterColumns: ['Action'],
+      filterColumns: ['Actions'],
       loading: true,
       policies: [],
       isEditable: false,
@@ -377,15 +382,15 @@ export default {
         },
         {
           title: this.$t('label.relationaloperator'),
-          slots: { customRender: 'relationaloperator' }
+          key: 'relationaloperator'
         },
         {
           title: this.$t('label.threshold'),
-          slots: { customRender: 'threshold' }
+          dataIndex: 'threshold'
         },
         {
-          title: this.$t('label.action'),
+          title: this.$t('label.actions'),
-          slots: { customRender: 'actions' }
+          key: 'actions'
         }
       ]
     }

ui/src/views/compute/AutoScaleVmProfile.vue

@@ -35,11 +35,15 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             v-focus="true"
             v-model:value="autoscaleuserid">
-            <a-select-option v-for="(user, index) in usersList" :value="user.id" :key="index">
+            <a-select-option
+              v-for="(user, index) in usersList"
+              :value="user.id"
+              :key="index"
+              :label="user.username">
               {{ user.username }}
             </a-select-option>
           </a-select>
@@ -90,9 +94,9 @@
           <a-select
             style="width: 100%"
             showSearch
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             v-focus="true"
             v-model:value="newParam.name">
@@ -126,13 +130,8 @@
       :dataSource="allParams"
       :pagination="false"
       :rowKey="record => record.name">
-      <template #name="{ record }">
+      <template #bodyCell="{ column, record }">
-        {{ record.name }}
+        <template v-if="column.key === 'actions'">
-      </template>
-      <template #threshold="{ record }">
-        {{ record.threshold }}
-      </template>
-      <template #actions="{ record }">
         <a-popconfirm
           :title="$t('label.delete') + '?'"
           @confirm="deleteParam(record.name)"
@@ -147,6 +146,7 @@
             icon="delete-outlined" />
         </a-popconfirm>
         </template>
+      </template>
     </a-table>
 
     <a-modal
@@ -166,11 +166,15 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }"
             v-focus="true"
             v-model:value="autoscaleuserid">
-            <a-select-option v-for="(user, index) in usersList" :value="user.id" :key="index">
+            <a-select-option
+              v-for="(user, index) in usersList"
+              :value="user.id"
+              :key="index"
+              :label="user.username">
               {{ user.username }}
             </a-select-option>
           </a-select>
@@ -194,11 +198,15 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
             v-focus="true"
             v-model:value="templateid">
-            <a-select-option v-for="(template, index) in templatesList" :value="template.id" :key="index">
+            <a-select-option
+              v-for="(template, index) in templatesList"
+              :value="template.id"
+              :key="index"
+              :label="template.name">
               {{ template.name }}
             </a-select-option>
           </a-select>
@@ -214,11 +222,15 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
             v-focus="true"
             v-model:value="serviceofferingid">
-            <a-select-option v-for="(offering, index) in serviceOfferingsList" :value="offering.id" :key="index">
+            <a-select-option
+              v-for="(offering, index) in serviceOfferingsList"
+              :value="offering.id"
+              :key="index"
+              :label="offering.name">
               {{ offering.name }}
             </a-select-option>
           </a-select>
@@ -263,7 +275,7 @@ export default {
   },
   data () {
     return {
-      filterColumns: ['Action'],
+      filterColumns: ['Actions'],
       loading: true,
       editProfileModalVisible: false,
       profileid: null,
@@ -292,8 +304,8 @@ export default {
           dataIndex: 'value'
         },
         {
-          title: this.$t('label.action'),
+          title: this.$t('label.actions'),
-          slots: { customRender: 'actions' }
+          key: 'actions'
         }
       ]
     }

ui/src/views/compute/CreateAutoScaleVmGroup.vue

@@ -42,19 +42,17 @@
                               v-model:value="form.zoneid"
                               @change="onSelectZoneId(zoneItem.id)">
                               <a-col :span="8">
-                                <a-card-grid style="width:200px;" :title="zoneItem.name" :hoverable="false">
+                                <a-card style="width:200px;" :hoverable="false">
-                                  <a-radio :value="zoneItem.id">
+                                  <a-radio :value="zoneItem.id" />
-                                    <div>
+                                  <div :style="{fontSize: '36px', marginLeft: '60px', marginTop: '-30px', marginBottom: '10px'}">
                                       <resource-icon
                                         v-if="zoneItem && zoneItem.icon && zoneItem.icon.base64image"
                                         :image="zoneItem.icon.base64image"
-                                        size="36"
+                                        size="36" />
-                                        style="marginTop: -30px; marginLeft: 60px" />
+                                      <global-outlined v-else />
-                                      <global-outlined v-else :style="{fontSize: '36px', marginLeft: '60px', marginTop: '-40px'}"/>
                                     </div>
-                                  </a-radio>
                                   <a-card-meta title="" :description="zoneItem.name" style="text-align:center; paddingTop: 10px;" />
-                                </a-card-grid>
+                                </a-card>
                               </a-col>
                             </a-radio-group>
                           </div>
@@ -152,7 +150,7 @@
                         }"
                         @change="onSelectTemplateConfigurationId"
                       >
-                        <a-select-option v-for="opt in templateConfigurations" :key="opt.id">
+                        <a-select-option v-for="opt in templateConfigurations" :key="opt.id" :label="opt.name || opt.description">
                           {{ opt.name || opt.description }}
                         </a-select-option>
                       </a-select>
@@ -420,11 +418,11 @@
                         <span v-else-if="property.type && property.type==='string' && property.qualifiers && property.qualifiers.startsWith('ValueMap')">
                           <a-select
                             showSearch
-                            optionFilterProp="label"
+                            optionFilterProp="value"
                             v-model:value="form['properties.' + escapePropertyKey(property.key)]"
                             :placeholder="property.description"
                             :filterOption="(input, option) => {
-                              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
                             }"
                           >
                             <a-select-option v-for="opt in getPropertyQualifiers(property.qualifiers, 'select')" :key="opt">
@@ -463,11 +461,12 @@
                       showSearch
                       optionFilterProp="label"
                       :filterOption="(input, option) => {
-                        return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                       }" >
                       <a-select-option
                         v-for="policy in this.scaleUpPolicies"
-                        :key="policy.id">
+                        :key="policy.id"
+                        :label="policy.name">
                         {{ policy.name }}
                       </a-select-option>
                     </a-select>
@@ -516,11 +515,15 @@
                         showSearch
                         optionFilterProp="label"
                         :filterOption="(input, option) => {
-                          return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                         }"
                         v-focus="true"
                         v-model:value="newScaleUpCondition.counterid">
-                        <a-select-option v-for="(counter, index) in countersList" :value="counter.id" :key="index">
+                        <a-select-option
+                          v-for="(counter, index) in countersList"
+                          :value="counter.id"
+                          :key="index"
+                          :label="counter.name">
                           {{ counter.name }}
                         </a-select-option>
                       </a-select>
@@ -534,9 +537,9 @@
                       <a-select
                         v-model:value="newScaleUpCondition.relationaloperator"
                         style="width: 100%;"
-                        optionFilterProp="label"
+                        optionFilterProp="value"
                         :filterOption="(input, option) => {
-                          return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                          return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
                         }" >
                         <a-select-option value="GT">{{ getOperator('GT') }}</a-select-option>
                       </a-select>
@@ -568,21 +571,17 @@
                       :dataSource="scaleUpConditions"
                       :pagination="false"
                       :rowKey="record => record.counterid">
-                      <template #countername="{ record }">
+                      <template #bodyCell="{ column, record }">
-                        {{ record.countername }}
+                        <template v-if="column.key === 'relationaloperator'">
-                      </template>
-                      <template #relationaloperator="{ record }">
                           {{ getOperator(record.relationaloperator) }}
                         </template>
-                      <template #threshold="{ record }">
+                        <template v-if="column.key === 'actions'">
-                        {{ record.threshold }}
-                      </template>
-                      <template #actions="{ record }">
                           <a-button ref="submit" type="primary" :danger="true" @click="deleteScaleUpCondition(record.counterid)">
                             <template #icon><delete-outlined /></template>
                             {{ $t('label.delete') }}
                           </a-button>
                         </template>
+                      </template>
                     </a-table>
                   </div>
                 </template>
@@ -603,11 +602,12 @@
                       showSearch
                       optionFilterProp="label"
                       :filterOption="(input, option) => {
-                        return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                       }" >
                       <a-select-option
                         v-for="policy in this.scaleDownPolicies"
-                        :key="policy.id">
+                        :key="policy.id"
+                        :label="policy.name">
                         {{ policy.name }}
                       </a-select-option>
                     </a-select>
@@ -656,11 +656,15 @@
                         showSearch
                         optionFilterProp="label"
                         :filterOption="(input, option) => {
-                          return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                         }"
                         v-focus="true"
                         v-model:value="newScaleDownCondition.counterid">
-                        <a-select-option v-for="(counter, index) in countersList" :value="counter.id" :key="index">
+                        <a-select-option
+                          v-for="(counter, index) in countersList"
+                          :value="counter.id"
+                          :key="index"
+                          :label="counter.name">
                           {{ counter.name }}
                         </a-select-option>
                       </a-select>
@@ -674,9 +678,9 @@
                       <a-select
                         v-model:value="newScaleDownCondition.relationaloperator"
                         style="width: 100%;"
-                        optionFilterProp="label"
+                        optionFilterProp="value"
                         :filterOption="(input, option) => {
-                          return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                          return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
                         }" >
                         <a-select-option value="LT">{{ getOperator('LT') }}</a-select-option>
                       </a-select>
@@ -699,7 +703,7 @@
                     </div>
                   </div>
                   <a-divider/>
-                  <div>
+                  <div style="display: block">
                     <a-table
                       size="small"
                       style="overflow-y: auto"
@@ -708,21 +712,17 @@
                       :dataSource="scaleDownConditions"
                       :pagination="false"
                       :rowKey="record => record.counterid">
-                      <template #countername="{ record }">
+                      <template #bodyCell="{ column, record }">
-                        {{ record.countername }}
+                        <template v-if="column.key === 'relationaloperator'">
-                      </template>
-                      <template #relationaloperator="{ record }">
                           {{ getOperator(record.relationaloperator) }}
                         </template>
-                      <template #threshold="{ record }">
+                        <template v-if="column.key === 'actions'">
-                        {{ record.threshold }}
-                      </template>
-                      <template #actions="{ record }">
                           <a-button ref="submit" type="primary" :danger="true" @click="deleteScaleDownCondition(record.counterid)">
                             <template #icon><delete-outlined /></template>
                             {{ $t('label.delete') }}
                           </a-button>
                         </template>
+                      </template>
                     </a-table>
                   </div>
                 </template>
@@ -790,11 +790,15 @@
                         showSearch
                         optionFilterProp="label"
                         :filterOption="(input, option) => {
-                          return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                         }"
                         v-focus="true"
                         v-model:value="form.autoscaleuserid">
-                        <a-select-option v-for="(user, index) in usersList" :value="user.id" :key="index">
+                        <a-select-option
+                          v-for="(user, index) in usersList"
+                          :value="user.id"
+                          :key="index"
+                          :label="user.username">
                           {{ user.username }}
                         </a-select-option>
                       </a-select>
@@ -1079,15 +1083,15 @@ export default {
         },
         {
           title: this.$t('label.relationaloperator'),
-          slots: { customRender: 'relationaloperator' }
+          key: 'relationaloperator'
         },
         {
           title: this.$t('label.threshold'),
-          slots: { customRender: 'threshold' }
+          dataIndex: 'threshold'
         },
         {
-          title: this.$t('label.action'),
+          title: this.$t('label.actions'),
-          slots: { customRender: 'actions' }
+          key: 'actions'
         }
       ],
       scaleDownPolicies: [],
@@ -1107,15 +1111,15 @@ export default {
         },
         {
           title: this.$t('label.relationaloperator'),
-          slots: { customRender: 'relationaloperator' }
+          key: 'relationaloperator'
         },
         {
           title: this.$t('label.threshold'),
-          slots: { customRender: 'threshold' }
+          dataIndex: 'threshold'
         },
         {
-          title: this.$t('label.action'),
+          title: this.$t('label.actions'),
-          slots: { customRender: 'actions' }
+          key: 'actions'
         }
       ],
       usersList: [],

ui/src/views/compute/CreateKubernetesCluster.vue

@@ -75,12 +75,12 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="kubernetesVersionLoading"
             :placeholder="apiParams.kubernetesversionid.description"
             @change="val => { handleKubernetesVersionChange(kubernetesVersions[val]) }">
-            <a-select-option v-for="(opt, optIndex) in kubernetesVersions" :key="optIndex">
+            <a-select-option v-for="(opt, optIndex) in kubernetesVersions" :key="optIndex" :label="opt.name || opt.description">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
@@ -95,11 +95,11 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="serviceOfferingLoading"
             :placeholder="apiParams.serviceofferingid.description">
-            <a-select-option v-for="(opt, optIndex) in serviceOfferings" :key="optIndex">
+            <a-select-option v-for="(opt, optIndex) in serviceOfferings" :key="optIndex" :label="opt.name || opt.description">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
@@ -122,11 +122,11 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="networkLoading"
             :placeholder="apiParams.networkid.description">
-            <a-select-option v-for="(opt, optIndex) in networks" :key="optIndex">
+            <a-select-option v-for="(opt, optIndex) in networks" :key="optIndex" :label="opt.name || opt.description">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
@@ -171,11 +171,11 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="keyPairLoading"
             :placeholder="apiParams.keypair.description">
-            <a-select-option v-for="(opt, optIndex) in keyPairs" :key="optIndex">
+            <a-select-option v-for="(opt, optIndex) in keyPairs" :key="optIndex" :label="opt.name || opt.description">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>

ui/src/views/compute/CreateSSHKeyPair.vue

@@ -62,12 +62,12 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="domainLoading"
             :placeholder="apiParams.domainid.description"
             @change="val => { handleDomainChanged(domains[val]) }">
-            <a-select-option v-for="(opt, optIndex) in domains" :key="optIndex">
+            <a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label=" opt.path || opt.name || opt.description || ''">
               {{ opt.path || opt.name || opt.description }}
             </a-select-option>
           </a-select>

ui/src/views/compute/CreateSnapshotWizard.vue

@@ -37,11 +37,12 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }">
             <a-select-option
               v-for="volume in listVolumes"
-              :key="volume.id">
+              :key="volume.id"
+              :label="volume.name">
               {{ volume.name }}
             </a-select-option>
           </a-select>

ui/src/views/compute/DeployVM.vue

@@ -42,19 +42,17 @@
                               v-model:value="form.zoneid"
                               @change="onSelectZoneId(zoneItem.id)">
                               <a-col :span="8">
-                                <a-card-grid style="width:200px;" :title="zoneItem.name" :hoverable="false">
+                                <a-card style="width:200px;" :hoverable="false">
-                                  <a-radio :value="zoneItem.id">
+                                  <a-radio :value="zoneItem.id" />
-                                    <div>
+                                  <div :style="{fontSize: '36px', marginLeft: '60px', marginTop: '-30px', marginBottom: '10px'}">
                                       <resource-icon
                                         v-if="zoneItem && zoneItem.icon && zoneItem.icon.base64image"
                                         :image="zoneItem.icon.base64image"
-                                        size="36"
+                                        size="36" />
-                                        style="marginTop: -30px; marginLeft: 60px" />
+                                      <global-outlined v-else/>
-                                      <global-outlined v-else :style="{fontSize: '36px', marginLeft: '60px', marginTop: '-40px'}"/>
                                     </div>
-                                  </a-radio>
                                   <a-card-meta title="" :description="zoneItem.name" style="text-align:center; paddingTop: 10px;" />
-                                </a-card-grid>
+                                </a-card>
                               </a-col>
                             </a-radio-group>
                           </div>
@@ -221,7 +219,7 @@
                         }"
                         @change="onSelectTemplateConfigurationId"
                       >
-                        <a-select-option v-for="opt in templateConfigurations" :key="opt.id">
+                        <a-select-option v-for="opt in templateConfigurations" :key="opt.id" :label="opt.name || opt.description">
                           {{ opt.name || opt.description }}
                         </a-select-option>
                       </a-select>
@@ -483,11 +481,11 @@
                         <span v-else-if="property.type && property.type==='string' && property.qualifiers && property.qualifiers.startsWith('ValueMap')">
                           <a-select
                             showSearch
-                            optionFilterProp="label"
+                            optionFilterProp="value"
                             v-model:value="form['properties.' + escapePropertyKey(property.key)]"
                             :placeholder="property.description"
                             :filterOption="(input, option) => {
-                              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
                             }"
                           >
                             <a-select-option v-for="opt in getPropertyQualifiers(property.qualifiers, 'select')" :key="opt">
@@ -528,7 +526,7 @@
                           showSearch
                           optionFilterProp="label"
                           :filterOption="filterOption">
-                          <a-select-option v-for="bootType in options.bootTypes" :key="bootType.id">
+                          <a-select-option v-for="bootType in options.bootTypes" :key="bootType.id" :label="bootType.description">
                             {{ bootType.description }}
                           </a-select-option>
                         </a-select>
@@ -539,7 +537,7 @@
                           showSearch
                           optionFilterProp="label"
                           :filterOption="filterOption">
-                          <a-select-option v-for="bootMode in options.bootModes" :key="bootMode.id">
+                          <a-select-option v-for="bootMode in options.bootModes" :key="bootMode.id" :label="bootMode.description">
                             {{ bootMode.description }}
                           </a-select-option>
                         </a-select>
@@ -582,9 +580,11 @@
                                 :dataSource="templateUserDataParams"
                                 :pagination="false"
                                 :rowKey="record => record.key">
-                                <template #value="{ record }">
+                                <template #bodyCell="{ column, record }">
+                                  <template v-if="column.key === 'value'">
                                     <a-input v-model:value="templateUserDataValues[record.key]" />
                                   </template>
+                                </template>
                               </a-table>
                             </a-input-group>
                           </div>
@@ -605,9 +605,11 @@
                                 :dataSource="templateUserDataParams"
                                 :pagination="false"
                                 :rowKey="record => record.key">
-                                <template #value="{ record }">
+                                <template #bodyCell="{ column, record }">
+                                  <template v-if="column.key === 'value'">
                                     <a-input v-model:value="templateUserDataValues[record.key]" />
                                   </template>
+                                </template>
                               </a-table>
                             </a-input-group>
                           </div>
@@ -654,9 +656,11 @@
                                                 :dataSource="userDataParams"
                                                 :pagination="false"
                                                 :rowKey="record => record.key">
-                                                <template #value="{ record }">
+                                                <template #bodyCell="{ column, record }">
+                                                  <template v-if="column.key === 'value'">
                                                     <a-input v-model:value="userDataValues[record.key]" />
                                                   </template>
+                                                </template>
                                               </a-table>
                                             </a-input-group>
                                           </div>
@@ -709,7 +713,7 @@
                         v-model:value="form.iodriverpolicy"
                         optionFilterProp="label"
                         :filterOption="filterOption">
-                        <a-select-option v-for="iodriverpolicy in options.ioPolicyTypes" :key="iodriverpolicy.id">
+                        <a-select-option v-for="iodriverpolicy in options.ioPolicyTypes" :key="iodriverpolicy.id" :label="iodriverpolicy.description">
                           {{ iodriverpolicy.description }}
                         </a-select-option>
                       </a-select>
@@ -967,7 +971,7 @@ export default {
         {
           title: this.$t('label.value'),
           dataIndex: 'value',
-          slots: { customRender: 'value' }
+          key: 'value'
         }
       ],
       userDataValues: {},
@@ -1885,8 +1889,8 @@ export default {
       this.templateUserDataParams = []
 
       api('listUserData', { id: id }).then(json => {
-        const resp = json?.listuserdataresponse?.userdata || []
+        const resp = json.listuserdataresponse.userdata || []
-        if (resp) {
+        if (resp.length > 0) {
           var params = resp[0].params
           if (params) {
             var dataParams = params.split(',')

ui/src/views/compute/DestroyVM.vue

@@ -54,9 +54,9 @@
               showSearch
               optionFilterProp="label"
               :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }" >
-              <a-select-option v-for="volume in volumes" :key="volume.id">
+              <a-select-option v-for="volume in volumes" :key="volume.id" :label="volume.name">
                 {{ volume.name }}
               </a-select-option>
             </a-select>
@@ -102,12 +102,12 @@
                     showSearch
                     optionFilterProp="label"
                     :filterOption="(input, option) => {
-                      return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                     }"
                     :loading="listVolumes[record.id].loading"
                     :placeholder="$t('label.delete.volumes')"
                     @change="(value) => onChangeVolume(record.id, value)">
-                    <a-select-option v-for="item in listVolumes[record.id].opts" :key="item.id">
+                    <a-select-option v-for="item in listVolumes[record.id].opts" :key="item.id" :label="item.name || item.description">
                       {{ item.name || item.description }}
                     </a-select-option>
                   </a-select>
@@ -317,9 +317,9 @@ export default {
       this.selectedItemsProgress = Array.from(this.selectedItems)
       this.selectedItemsProgress = this.selectedItemsProgress.map(v => ({ ...v, status: 'InProgress' }))
       this.selectedColumns.splice(0, 0, {
+        key: 'status',
         dataIndex: 'status',
         title: this.$t('label.operation.status'),
-        scopedSlots: { customRender: 'status' },
         filters: [
           { text: 'In Progress', value: 'InProgress' },
           { text: 'Success', value: 'success' },

ui/src/views/compute/EditVM.vue

@@ -52,11 +52,11 @@
           showSearch
           optionFilterProp="label"
           :filterOption="(input, option) => {
-            return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
           }"
           :loading="osTypes.loading"
           v-model:value="form.ostypeid">
-          <a-select-option v-for="(ostype) in osTypes.opts" :key="ostype.id">
+          <a-select-option v-for="(ostype) in osTypes.opts" :key="ostype.id" :label="ostype.description">
             {{ ostype.description }}
           </a-select-option>
         </a-select>
@@ -103,7 +103,7 @@
           }"
           :loading="securitygroups.loading"
           v-focus="true">
-          <a-select-option v-for="securitygroup in securitygroups.opts" :key="securitygroup.id" :label="securitygroup.name">
+          <a-select-option v-for="securitygroup in securitygroups.opts" :key="securitygroup.id" :label="securitygroup.name ||  securitygroup.id">
             <div>
               {{ securitygroup.name ||  securitygroup.id }}
             </div>

ui/src/views/compute/InstanceTab.vue

@@ -192,9 +192,9 @@
             :loading="listIps.loading"
             v-focus="editNicResource.type==='Shared'"
             showSearch
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }">
             <a-select-option v-for="ip in listIps.opts" :key="ip.ipaddress">
               {{ ip.ipaddress }}
@@ -235,9 +235,9 @@
             :loading="listIps.loading"
             v-focus="editNicResource.type==='Shared'"
             showSearch
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }">
             <a-select-option v-for="ip in listIps.opts" :key="ip.ipaddress">
               {{ ip.ipaddress }}

ui/src/views/compute/KubernetesServiceTab.vue

@@ -101,16 +101,17 @@
           :rowKey="item => item.id"
           :pagination="false"
         >
-          <template #name="{ text, record }" :name="text">
+          <template #bodyCell="{ column, text, record, index }">
+            <template v-if="column.key === 'name'" :name="text">
               <router-link :to="{ path: '/vm/' + record.id }">{{ record.name }}</router-link>
             </template>
-          <template #state="{ text }">
+            <template v-if="column.key === 'state'">
               <status :text="text ? text : ''" displayText />
             </template>
-          <template #port="{ text, record, index }" :name="text" :record="record">
+            <template v-if="column.key === 'port'" :name="text" :record="record">
               {{ cksSshStartingPort + index }}
             </template>
-          <template #action="{record}">
+            <template v-if="column.key === 'actions'">
               <a-tooltip placement="bottom" >
                 <template #title>
                   {{ $t('label.action.delete.node') }}
@@ -123,8 +124,7 @@
                   :disabled="!['Created', 'Running'].includes(resource.state) || resource.autoscalingenabled"
                 >
                   <a-button
-                  danger
+                    type="danger"
-                  type="primary"
                     shape="circle"
                     :disabled="!['Created', 'Running'].includes(resource.state) || resource.autoscalingenabled">
                     <template #icon><delete-outlined /></template>
@@ -132,6 +132,7 @@
                 </a-popconfirm>
               </a-tooltip>
             </template>
+          </template>
         </a-table>
       </a-tab-pane>
       <a-tab-pane :tab="$t('label.firewall')" key="firewall" v-if="publicIpAddress">
@@ -209,14 +210,14 @@ export default {
   created () {
     this.vmColumns = [
       {
+        key: 'name',
         title: this.$t('label.name'),
-        dataIndex: 'name',
+        dataIndex: 'name'
-        slots: { customRender: 'name' }
       },
       {
+        key: 'state',
         title: this.$t('label.state'),
-        dataIndex: 'state',
+        dataIndex: 'state'
-        slots: { customRender: 'state' }
       },
       {
         title: this.$t('label.instancename'),
@@ -227,9 +228,9 @@ export default {
         dataIndex: 'ipaddress'
       },
       {
+        key: 'port',
         title: this.$t('label.ssh.port'),
-        dataIndex: 'port',
+        dataIndex: 'port'
-        slots: { customRender: 'port' }
       },
       {
         title: this.$t('label.zonename'),
@@ -266,9 +267,9 @@ export default {
   mounted () {
     if (this.$store.getters.apis.scaleKubernetesCluster.params.filter(x => x.name === 'nodeids').length > 0) {
       this.vmColumns.push({
-        title: this.$t('label.action'),
+        key: 'actions',
-        dataIndex: 'action',
+        title: this.$t('label.actions'),
-        slots: { customRender: 'action' }
+        dataIndex: 'actions'
       })
     }
     this.handleFetchData()

ui/src/views/compute/MigrateWizard.vue

@@ -37,13 +37,14 @@
       :dataSource="hosts"
       :pagination="false"
       :rowKey="record => record.id">
-      <template #name="{ record }">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'name'">
           {{ record.name }}
           <a-tooltip v-if="record.name === $t('label.auto.assign')" :title="$t('message.migrate.instance.host.auto.assign')" placement="top">
             <info-circle-outlined class="table-tooltip-icon" />
           </a-tooltip>
         </template>
-      <template #suitability="{ record }">
+        <template v-if="column.key === 'suitability'">
           <check-circle-two-tone
             class="host-item__suitability-icon"
             twoToneColor="#52c41a"
@@ -53,30 +54,31 @@
             twoToneColor="#f5222d"
             v-else />
         </template>
-      <template #memused="{ record }">
+        <template v-if="column.key === 'memused'">
           <span v-if="record.memoryused">
             {{ $bytesToHumanReadableSize(record.memoryused) }}
           </span>
         </template>
-      <template #memoryallocatedpercentage="{ record }">
+        <template v-if="column.key === 'memoryallocatedpercentage'">
           {{ record.memoryallocatedpercentage }}
         </template>
-      <template #cluster="{ record }">
+        <template v-if="column.key === 'cluster'">
           {{ record.clustername }}
         </template>
-      <template #pod="{ record }">
+        <template v-if="column.key === 'pod'">
           {{ record.podname }}
         </template>
-      <template #requiresstoragemigration="{ record }">
+        <template v-if="column.key === 'requiresstoragemigration'">
           {{ record.requiresStorageMotion ? $t('label.yes') : $t('label.no') }}
         </template>
-      <template #select="{record}">
+        <template v-if="column.key === 'select'">
           <a-radio
             class="host-item__radio"
             @click="handleSelectedHostChange(record)"
             :checked="record.id === selectedHost.id"
             :disabled="!record.suitableformigration"></a-radio>
         </template>
+      </template>
     </a-table>
     <a-pagination
       class="pagination"
@@ -149,40 +151,40 @@ export default {
       pageSize: 10,
       columns: [
         {
-          title: this.$t('label.hostid'),
+          key: 'name',
-          slots: { customRender: 'name' }
+          title: this.$t('label.hostid')
         },
         {
-          title: this.$t('label.suitability'),
+          key: 'suitability',
-          slots: { customRender: 'suitability' }
+          title: this.$t('label.suitability')
         },
         {
           title: this.$t('label.cpuused'),
           dataIndex: 'cpuused'
         },
         {
-          title: this.$t('label.memoryallocated'),
+          key: 'memoryallocatedpercentage',
-          slots: { customRender: 'memoryallocatedpercentage' }
+          title: this.$t('label.memoryallocated')
         },
         {
-          title: this.$t('label.memused'),
+          key: 'memused',
-          slots: { customRender: 'memused' }
+          title: this.$t('label.memused')
         },
         {
-          title: this.$t('label.cluster'),
+          key: 'cluster',
-          slots: { customRender: 'cluster' }
+          title: this.$t('label.cluster')
         },
         {
-          title: this.$t('label.pod'),
+          key: 'pod',
-          slots: { customRender: 'pod' }
+          title: this.$t('label.pod')
         },
         {
-          title: this.$t('label.storage.migration.required'),
+          key: 'requiresstoragemigration',
-          slots: { customRender: 'requiresstoragemigration' }
+          title: this.$t('label.storage.migration.required')
         },
         {
-          title: this.$t('label.select'),
+          key: 'select',
-          slots: { customRender: 'select' }
+          title: this.$t('label.select')
         }
       ],
       migrateWithStorage: false,

ui/src/views/compute/RegisterUserData.vue

@@ -51,9 +51,9 @@
             mode="tags"
             v-model:value="form.params"
             showSearch
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
-              return option.children?.[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :placeholder="apiParams.params.description">
             <a-select-option v-for="opt in params" :key="opt">
@@ -71,12 +71,15 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
               :loading="domainLoading"
             :placeholder="apiParams.domainid.description"
             @change="val => { handleDomainChanged(domains[val]) }">
-            <a-select-option v-for="(opt, optIndex) in domains" :key="optIndex">
+            <a-select-option
+              v-for="(opt, optIndex) in domains"
+              :key="optIndex"
+              :label="opt.path || opt.name || opt.description || ''">
               {{ opt.path || opt.name || opt.description }}
             </a-select-option>
           </a-select>

ui/src/views/compute/ResetSshKeyPair.vue

@@ -42,8 +42,10 @@
           @handle-search-filter="handleTableChange"
           style="overflow-y: auto" >
 
-          <template #account><user-outlined /> {{ $t('label.account') }}</template>
+          <template #headerCell="{ column }">
-          <template #domain><block-outlined /> {{ $t('label.domain') }}</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>
 
         </a-table>
       </div>
@@ -81,13 +83,13 @@ export default {
           width: '40%'
         },
         {
+          key: 'account',
           dataIndex: 'account',
-          slots: { title: 'account' },
           width: '30%'
         },
         {
+          key: 'domain',
           dataIndex: 'domain',
-          slots: { title: 'domain' },
           width: '30%'
         }
       ],

ui/src/views/compute/ResetUserData.vue

@@ -41,9 +41,11 @@
               :dataSource="templateUserDataParams"
               :pagination="false"
               :rowKey="record => record.key">
-              <template #value="{ record }">
+              <template #bodyCell="{ column, record }">
+                <template v-if="column.key === 'value'">
                   <a-input v-model:value="templateUserDataValues[record.key]" />
                 </template>
+              </template>
             </a-table>
           </a-input-group>
         </div><br/><br/>
@@ -87,9 +89,11 @@
                               :dataSource="userDataParams"
                               :pagination="false"
                               :rowKey="record => record.key">
-                              <template #value="{ record }">
+                              <template #bodyCell="{ column, record }">
+                                <template v-if="column.key === 'value'">
                                   <a-input v-model:value="userDataValues[record.key]" />
                                 </template>
+                              </template>
                             </a-table>
                           </a-input-group>
                         </div>
@@ -152,12 +156,12 @@ export default {
         },
         {
           dataIndex: 'account',
-          slots: { title: 'account' },
+          title: this.$t('account'),
           width: '30%'
         },
         {
           dataIndex: 'domain',
-          slots: { title: 'domain' },
+          title: this.$t('domain'),
           width: '30%'
         }
       ],
@@ -188,7 +192,7 @@ export default {
         {
           title: this.$t('label.value'),
           dataIndex: 'value',
-          slots: { customRender: 'value' }
+          key: 'value'
         }
       ],
       userDataValues: {},
@@ -309,7 +313,7 @@ export default {
       this.userDataParams = []
       api('listUserData', { id: id }).then(json => {
         const resp = json?.listuserdataresponse?.userdata || []
-        if (resp) {
+        if (resp.length > 0) {
           var params = resp[0].params
           if (params) {
             var dataParams = params.split(',')

ui/src/views/compute/ScaleKubernetesCluster.vue

@@ -63,11 +63,11 @@
               showSearch
               optionFilterProp="label"
               :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :loading="serviceOfferingLoading"
               :placeholder="apiParams.serviceofferingid.description">
-              <a-select-option v-for="(opt, optIndex) in serviceOfferings" :key="optIndex">
+              <a-select-option v-for="(opt, optIndex) in serviceOfferings" :key="optIndex" :label="opt.name || opt.description">
                 {{ opt.name || opt.description }}
               </a-select-option>
             </a-select>

ui/src/views/compute/StartVirtualMachine.vue

@@ -38,13 +38,13 @@
               showSearch
               optionFilterProp="label"
               :filterOption="(input, option) => {
-                return option.children[0].children.text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :loading="podsLoading"
               :placeholder="apiParams.podid.description"
               @change="handlePodChange"
               v-focus="$store.getters.userInfo.roletype === 'Admin'">
-              <a-select-option v-for="pod in pods" :key="pod.id">
+              <a-select-option v-for="pod in pods" :key="pod.id" :label="pod.name">
                 {{ pod.name }}
               </a-select-option>
             </a-select>
@@ -59,12 +59,12 @@
               showSearch
               optionFilterProp="label"
               :filterOption="(input, option) => {
-                return option.children[0].children.text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :loading="clustersLoading"
               :placeholder="apiParams.clusterid.description"
               @change="handleClusterChange">
-              <a-select-option v-for="cluster in clusters" :key="cluster.id">
+              <a-select-option v-for="cluster in clusters" :key="cluster.id" :label="cluster.name">
                 {{ cluster.name }}
               </a-select-option>
             </a-select>
@@ -79,11 +79,11 @@
               showSearch
               optionFilterProp="label"
               :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :loading="hostsLoading"
               :placeholder="apiParams.hostid.description">
-              <a-select-option v-for="host in hosts" :key="host.id">
+              <a-select-option v-for="host in hosts" :key="host.id" :label="host.name">
                 {{ host.name }}
               </a-select-option>
             </a-select>

ui/src/views/compute/UpgradeKubernetesCluster.vue

@@ -38,12 +38,12 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="kubernetesVersionLoading"
             :placeholder="apiParams.kubernetesversionid.description"
             v-focus="true" >
-            <a-select-option v-for="(opt, optIndex) in this.kubernetesVersions" :key="optIndex">
+            <a-select-option v-for="(opt, optIndex) in this.kubernetesVersions" :key="optIndex" :label="opt.name || opt.description">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>

ui/src/views/compute/backup/BackupSchedule.vue

@@ -24,7 +24,8 @@
       :rowKey="record => record.virtualmachineid"
       :pagination="false"
       :loading="loading">
-      <template #icon="{ text, record }" :name="text">
+      <template #bodyCell="{ column, text, record }">
+        <template v-if="column.key === 'icon'" :name="text">
           <label class="interval-icon">
             <span v-if="record.intervaltype==='HOURLY'">
               <clock-circle-outlined />
@@ -40,13 +41,13 @@
             </span>
           </label>
         </template>
-      <template #time="{ text, record }" :name="text">
+        <template v-if="column.key === 'time'" :name="text">
           <label class="interval-content">
             <span v-if="record.intervaltype==='HOURLY'">{{ record.schedule + ' ' + $t('label.min.past.hour') }}</span>
             <span v-else>{{ record.schedule.split(':')[1] + ':' + record.schedule.split(':')[0] }}</span>
           </label>
         </template>
-      <template #interval="{ text, record }" :name="text">
+        <template v-if="column.key === 'interval'" :name="text">
           <span v-if="record.intervaltype==='WEEKLY'">
             {{ `${$t('label.every')} ${$t(listDayOfWeek[record.schedule.split(':')[2] - 1])}` }}
           </span>
@@ -54,10 +55,10 @@
             {{ `${$t('label.day')} ${record.schedule.split(':')[2]} ${$t('label.of.month')}` }}
           </span>
         </template>
-      <template #timezone="{ text, record }" :name="text">
+        <template v-if="column.key === 'timezone'" :name="text">
           <label>{{ getTimeZone(record.timezone) }}</label>
         </template>
-      <template #action="{ text, record }" class="account-button-action" :name="text">
+        <template v-if="column.key === 'actions'" class="account-button-action" :name="text">
           <tooltip-button
             tooltipPlacement="top"
             :tooltip="$t('label.delete')"
@@ -68,6 +69,7 @@
             :loading="actionLoading"
             @onClick="handleClickDelete(record)"/>
         </template>
+      </template>
     </a-table>
   </div>
 </template>
@@ -107,31 +109,31 @@ export default {
     columns () {
       return [
         {
+          key: 'icon',
           title: '',
           dataIndex: 'icon',
-          width: 30,
+          width: 30
-          slots: { customRender: 'icon' }
         },
         {
+          key: 'time',
           title: this.$t('label.time'),
-          dataIndex: 'schedule',
+          dataIndex: 'schedule'
-          slots: { customRender: 'time' }
         },
         {
+          key: 'interval',
           title: '',
-          dataIndex: 'interval',
+          dataIndex: 'interval'
-          slots: { customRender: 'interval' }
         },
         {
+          key: 'timezone',
           title: this.$t('label.timezone'),
-          dataIndex: 'timezone',
+          dataIndex: 'timezone'
-          slots: { customRender: 'timezone' }
         },
         {
-          title: this.$t('label.action'),
+          key: 'actions',
-          dataIndex: 'action',
+          title: this.$t('label.actions'),
-          width: 80,
+          dataIndex: 'actions',
-          slots: { customRender: 'action' }
+          width: 80
         }
       ]
     }

ui/src/views/compute/backup/FormSchedule.vue

@@ -70,7 +70,8 @@
                 <a-time-picker
                   use12Hours
                   format="h:mm A"
-                  v-model:value="form.timeSelect" />
+                  v-model:value="form.timeSelect"
+                  style="width: 100%;" />
               </a-form-item>
             </a-col>
             <a-col :md="24" :lg="12" v-if="form.intervaltype==='weekly'">
@@ -80,9 +81,9 @@
                   showSearch
                   optionFilterProp="label"
                   :filterOption="(input, option) => {
-                    return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                   }" >
-                  <a-select-option v-for="(opt, optIndex) in dayOfWeek" :key="optIndex">
+                  <a-select-option v-for="(opt, optIndex) in dayOfWeek" :key="optIndex" :label="opt.name || opt.description">
                     {{ opt.name || opt.description }}
                   </a-select-option>
                 </a-select>
@@ -95,9 +96,9 @@
                   showSearch
                   optionFilterProp="label"
                   :filterOption="(input, option) => {
-                    return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                   }">
-                  <a-select-option v-for="opt in dayOfMonth" :key="opt.name">
+                  <a-select-option v-for="opt in dayOfMonth" :key="opt.name" :label="opt.name || opt.description">
                     {{ opt.name }}
                   </a-select-option>
                 </a-select>
@@ -110,10 +111,10 @@
                   v-model:value="form.timezone"
                   optionFilterProp="label"
                   :filterOption="(input, option) => {
-                    return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                   }"
                   :loading="fetching">
-                  <a-select-option v-for="opt in timeZoneMap" :key="opt.id">
+                  <a-select-option v-for="opt in timeZoneMap" :key="opt.id" :label="opt.name || opt.description">
                     {{ opt.name || opt.description }}
                   </a-select-option>
                 </a-select>

ui/src/views/compute/wizard/ComputeOfferingSelection.vue

@@ -32,8 +32,10 @@
       size="middle"
       :scroll="{ y: 225 }"
     >
-      <template #cpuTitle><appstore-outlined /> {{ $t('label.cpu') }}</template>
+      <template #headerCell="{ column }">
-      <template #ramTitle><bulb-outlined /> {{ $t('label.memory') }}</template>
+        <template v-if="column.key === 'cpu'"><appstore-outlined /> {{ $t('label.cpu') }}</template>
+        <template v-if="column.key === 'ram'"><bulb-outlined /> {{ $t('label.memory') }}</template>
+      </template>
     </a-table>
 
     <div style="display: block; text-align: right;">
@@ -109,18 +111,19 @@ export default {
       filter: '',
       columns: [
         {
+          key: 'name',
           dataIndex: 'name',
           title: this.$t('label.serviceofferingid'),
           width: '40%'
         },
         {
+          key: 'cpu',
           dataIndex: 'cpu',
-          slots: { title: 'cpuTitle' },
           width: '30%'
         },
         {
+          key: 'ram',
           dataIndex: 'ram',
-          slots: { title: 'ramTitle' },
           width: '30%'
         }
       ],

ui/src/views/compute/wizard/DiskOfferingSelection.vue

@@ -32,19 +32,24 @@
       size="middle"
       :scroll="{ y: 225 }"
     >
-      <template #diskSizeTitle><hdd-outlined /> {{ $t('label.disksize') }}</template>
+      <template #headerCell="{ column }">
-      <template #iopsTitle><rocket-outlined /> {{ $t('label.minmaxiops') }}</template>
+        <template v-if="column.key === 'diskSize'"><hdd-outlined /> {{ $t('label.disksize') }}</template>
-      <template #diskSize="{ record }">
+        <template v-if="column.key === 'iops'"><rocket-outlined /> {{ $t('label.minmaxiops') }}</template>
+      </template>
+
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'diskSize'">
           <div v-if="record.isCustomized">{{ $t('label.iscustomized') }}</div>
           <div v-else-if="record.diskSize">{{ record.diskSize }} GB</div>
           <div v-else>-</div>
         </template>
-      <template #iops="{ record }">
+        <template v-if="column.key === 'iops'">
           <span v-if="record.miniops && record.maxiops">{{ record.miniops }} - {{ record.maxiops }}</span>
           <span v-else-if="record.miniops && !record.maxiops">{{ record.miniops }}</span>
           <span v-else-if="!record.miniops && record.maxiops">{{ record.maxiops }}</span>
           <span v-else>-</span>
         </template>
+      </template>
     </a-table>
 
     <div style="display: block; text-align: right;">
@@ -108,19 +113,20 @@ export default {
       filter: '',
       columns: [
         {
+          key: 'name',
           dataIndex: 'name',
           title: this.$t('label.diskoffering'),
           width: '40%'
         },
         {
+          key: 'diskSize',
           dataIndex: 'disksize',
-          width: '30%',
+          width: '30%'
-          slots: { customRender: 'diskSize', title: 'diskSizeTitle' }
         },
         {
+          key: 'iops',
           dataIndex: 'iops',
-          width: '30%',
+          width: '30%'
-          slots: { customRender: 'iops', title: 'iopsTitle' }
         }
       ],
       selectedRowKeys: ['0'],

ui/src/views/compute/wizard/LoadBalancerSelection.vue

@@ -32,9 +32,9 @@
       :rowSelection="rowSelection"
       size="middle"
       :scroll="{ y: 225 }">
-      <template #publicip><environment-outlined /> {{ $t('label.publicip') }}</template>
+      <template #headerCell="{ column }">
-      <template #publicport>{{ $t('label.publicport') }}</template>
+        <template v-if="column.key === 'publicip'"><environment-outlined /> {{ $t('label.publicip') }}</template>
-      <template #privateport>{{ $t('label.privateport') }}</template>
+      </template>
     </a-table>
 
     <div style="display: block; text-align: right;">
@@ -113,6 +113,7 @@ export default {
           width: '40%'
         },
         {
+          key: 'publicip',
           title: this.$t('label.publicip'),
           dataIndex: 'publicip'
         },

ui/src/views/compute/wizard/MultiDiskSelection.vue

@@ -26,7 +26,8 @@
       :rowSelection="rowSelection"
       :scroll="{ y: 225 }" >
 
-      <template #name="{ record }">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'name'">
           <span>{{ record.displaytext || record.name }}</span>
           <div v-if="record.meta">
             <div v-for="meta in record.meta" :key="meta.key">
@@ -34,7 +35,7 @@
             </div>
           </div>
         </template>
-      <template #offering="{ record }">
+        <template v-if="column.key === 'offering'">
           <span
             style="width: 50%"
             v-if="validOfferings[record.id] && validOfferings[record.id].length > 0">
@@ -54,9 +55,9 @@
               showSearch
               optionFilterProp="label"
               :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }" >
-            <a-select-option v-for="offering in validOfferings[record.id]" :key="offering.id">
+              <a-select-option v-for="offering in validOfferings[record.id]" :key="offering.id" :label="offering.displaytext">
                 {{ offering.displaytext }}
               </a-select-option>
             </a-select>
@@ -65,6 +66,7 @@
             {{ $t('label.no.matching.offering') }}
           </span>
         </template>
+      </template>
     </a-table>
   </div>
 </template>
@@ -108,14 +110,14 @@ export default {
     return {
       columns: [
         {
+          key: 'name',
           dataIndex: 'name',
-          title: this.$t('label.data.disk'),
+          title: this.$t('label.data.disk')
-          slots: { customRender: 'name' }
         },
         {
+          key: 'offering',
           dataIndex: 'offering',
-          title: this.$t('label.data.disk.offering'),
+          title: this.$t('label.data.disk.offering')
-          slots: { customRender: 'offering' }
         }
       ],
       loading: false,

ui/src/views/compute/wizard/MultiNetworkSelection.vue

@@ -26,7 +26,8 @@
       :rowSelection="rowSelection"
       :scroll="{ y: 225 }" >
 
-      <template #name="{record}">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'name'">
           <span>{{ record.displaytext || record.name }}</span>
           <div v-if="record.meta">
             <div v-for="meta in record.meta" :key="meta.key">
@@ -34,7 +35,7 @@
             </div>
           </div>
         </template>
-      <template #network="{record}">
+        <template v-if="column.key === 'network'">
           <a-select
             v-if="validNetworks[record.id] && validNetworks[record.id].length > 0"
             :defaultValue="validNetworks[record.id][0].id"
@@ -42,9 +43,12 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-            return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
-          <a-select-option v-for="network in validNetworks[record.id]" :key="network.id">
+            <a-select-option
+              v-for="network in validNetworks[record.id]"
+              :key="network.id"
+              :label="network.displaytext + (network.broadcasturi ? ' (' + network.broadcasturi + ')' : '')">
               {{ network.displaytext + (network.broadcasturi ? ' (' + network.broadcasturi + ')' : '') }}
             </a-select-option>
           </a-select>
@@ -52,7 +56,7 @@
             {{ $t('label.no.matching.network') }}
           </span>
         </template>
-      <template #ipaddress="{record}">
+        <template v-if="column.key === 'ipaddress'">
           <check-box-input-pair
             layout="vertical"
             :resourceKey="record.id"
@@ -62,6 +66,7 @@
             :visible="(indexNum > 0 && ipAddressesEnabled[record.id])"
             @handle-checkinputpair-change="setIpAddress" />
         </template>
+      </template>
     </a-table>
   </div>
 </template>
@@ -102,19 +107,19 @@ export default {
     return {
       columns: [
         {
+          key: 'name',
           dataIndex: 'name',
-          title: this.$t('label.nic'),
+          title: this.$t('label.nic')
-          slots: { customRender: 'name' }
         },
         {
+          key: 'network',
           dataIndex: 'network',
-          title: this.$t('label.network'),
+          title: this.$t('label.network')
-          slots: { customRender: 'network' }
         },
         {
+          key: 'ipaddress',
           dataIndex: 'ipaddress',
-          title: this.$t('label.ipaddress'),
+          title: this.$t('label.ipaddress')
-          slots: { customRender: 'ipaddress' }
         }
       ],
       loading: false,

ui/src/views/compute/wizard/NetworkConfiguration.vue

@@ -29,11 +29,13 @@
       :rowKey="record => record.id"
       size="middle"
       :scroll="{ y: 225 }">
-      <template #name="{ text, record }">
+      <template #bodyCell="{ column, text, record }">
+        <template v-if="column.key === 'name'">
           <div>{{ text }}</div>
           <small v-if="record.type!=='L2'">{{ $t('label.cidr') + ': ' + record.cidr }}</small>
         </template>
-      <template #ipAddress="{ record }" v-if="!this.autoscale">
+        <template  v-if="!this.autoscale">
+          <template v-if="column.key === 'ipAddress'">
             <a-form-item
               style="display: block"
               v-if="record.type !== 'L2'"
@@ -51,7 +53,7 @@
               </a-input>
             </a-form-item>
           </template>
-      <template #macAddress="{ record }" v-if="!this.autoscale">
+          <template v-if="column.key === 'macAddress'">
             <a-form-item style="display: block" :name="'macAddress' + record.id">
               <a-input
                 style="width: 150px;"
@@ -66,6 +68,8 @@
               </a-input>
             </a-form-item>
           </template>
+        </template>
+      </template>
     </a-table>
   </a-form>
 </template>
@@ -97,22 +101,22 @@ export default {
       networks: [],
       columns: [
         {
+          key: 'name',
           dataIndex: 'name',
           title: this.$t('label.defaultnetwork'),
-          width: '30%',
+          width: '30%'
-          slots: { customRender: 'name' }
         },
         {
+          key: 'ipAddress',
           dataIndex: 'ip',
           title: this.$t('label.ip'),
-          width: '30%',
+          width: '30%'
-          slots: { customRender: 'ipAddress' }
         },
         {
+          key: 'macAddress',
           dataIndex: 'mac',
           title: this.$t('label.macaddress'),
-          width: '30%',
+          width: '30%'
-          slots: { customRender: 'macAddress' }
         }
       ],
       selectedRowKeys: [],

ui/src/views/compute/wizard/NetworkSelection.vue

@@ -34,7 +34,8 @@
       :rowSelection="rowSelection"
       :scroll="{ y: 225 }"
     >
-      <template #name="{record}">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'name'">
           <resource-icon
             v-if="record.icon"
             :image="record.icon.base64image"
@@ -43,6 +44,7 @@
           <apartment-outlined v-else style="margin-right: 5px" />
           {{ record.name }}
         </template>
+      </template>
       <template #expandedRowRender="{ record }">
         <a-list
           :key="record.id"
@@ -173,29 +175,35 @@ export default {
           }
         })
       }
+      const vpcCol = {
+        key: 'vpcName',
+        dataIndex: 'vpcName',
+        title: this.$t('label.vpc'),
+        width: '30%'
+      }
+      if (vpcFilter.length > 0) {
+        vpcCol.filters = vpcFilter
+        vpcCol.filteredValue = _.get(this.filteredInfo, 'id')
+        vpcCol.onFilter = (value, record) => {
+          return record.vpcid === value
+        }
+      }
       return [
         {
+          key: 'name',
           dataIndex: 'name',
           title: this.$t('label.networks'),
-          slots: { customRender: 'name' },
           width: '40%'
         },
         {
+          key: 'type',
           dataIndex: 'type',
           title: this.$t('label.guestiptype'),
           width: '15%'
         },
+        vpcCol,
         {
-          dataIndex: 'vpcName',
+          key: 'supportsvmautoscaling',
-          title: this.$t('label.vpc'),
-          width: '20%',
-          filters: vpcFilter,
-          filteredValue: _.get(this.filteredInfo, 'id'),
-          onFilter: (value, record) => {
-            return record.vpcid === value
-          }
-        },
-        {
           dataIndex: 'supportsvmautoscaling',
           title: this.$t('label.supportsvmautoscaling'),
           width: '25%'

ui/src/views/compute/wizard/SshKeyPairSelection.vue

@@ -31,8 +31,10 @@
       :pagination="false"
       size="middle"
       :scroll="{ y: 225 }">
-      <template #account><user-outlined /> {{ $t('label.account') }}</template>
+      <template #headerCell="{ column }">
-      <template #domain><block-outlined /> {{ $t('label.domain') }}</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>
     </a-table>
     <div style="display: block; text-align: right;">
       <a-pagination
@@ -87,18 +89,19 @@ export default {
       filter: '',
       columns: [
         {
+          key: 'name',
           dataIndex: 'name',
           title: this.$t('label.sshkeypairs'),
           width: '40%'
         },
         {
+          key: 'account',
           dataIndex: 'account',
-          slots: { title: 'account' },
           width: '30%'
         },
         {
+          key: 'domain',
           dataIndex: 'domain',
-          slots: { title: 'domain' },
           width: '30%'
         }
       ],

ui/src/views/compute/wizard/UserDataSelection.vue

@@ -32,8 +32,10 @@
       size="middle"
       :scroll="{ y: 225 }"
     >
-      <template #account><user-outlined /> {{ $t('label.account') }}</template>
+      <template #headerCell="{ column }">
-      <template #domain><block-outlined /> {{ $t('label.domain') }}</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>
     </a-table>
   </div>
 </template>
@@ -81,13 +83,13 @@ export default {
           width: '40%'
         },
         {
+          key: 'account',
           dataIndex: 'account',
-          slots: { title: 'account' },
           width: '30%'
         },
         {
+          key: 'domain',
           dataIndex: 'domain',
-          slots: { title: 'domain' },
           width: '30%'
         }
       ],

ui/src/views/dashboard/CapacityDashboard.vue

@@ -280,7 +280,7 @@ export default {
       this.listCapacity(this.zoneSelected)
     },
     filterZone (input, option) {
-      return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
     }
   }
 }

ui/src/views/dashboard/SetupTwoFaAtLogin.vue

@@ -38,10 +38,6 @@
           <a-form-item v-ctrl-enter="submitPin" ref="selectedProvider" name="selectedProvider">
              <a-select
               v-model:value="form.selectedProvider"
-              optionFilterProp="label"
-              :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-              }"
               @change="val => { handleSelectChange(val) }">
               <a-select-option
                 v-for="(opt) in providers"

ui/src/views/iam/AddAccount.vue

@@ -37,9 +37,9 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }">
-            <a-select-option v-for="role in roles" :key="role.id">
+            <a-select-option v-for="role in roles" :key="role.id" :label="role.name + ' (' + role.type + ')'">
               {{ role.name + ' (' + role.type + ')' }}
             </a-select-option>
           </a-select>
@@ -143,9 +143,9 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }">
-            <a-select-option v-for="opt in timeZoneMap" :key="opt.id">
+            <a-select-option v-for="opt in timeZoneMap" :key="opt.id" :label="opt.name || opt.description">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
@@ -173,9 +173,9 @@
               showSearch
               optionFilterProp="label"
               :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }">
-              <a-select-option v-for="idp in idps" :key="idp.id">
+              <a-select-option v-for="idp in idps" :key="idp.id" :label="idp.orgName">
                 {{ idp.orgName }}
               </a-select-option>
             </a-select>

ui/src/views/iam/AddLdapAccount.vue

@@ -59,9 +59,9 @@
                 showSearch
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
-                  return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }">
-                <a-select-option v-for="opt in filters" :key="opt.id" >
+                <a-select-option v-for="opt in filters" :key="opt.id" :label="opt.name">
                   {{ opt.name }}
                 </a-select-option>
               </a-select>
@@ -73,9 +73,9 @@
                 :loading="domainLoading"
                 @change="fetchListLdapUsers($event)"
                 showSearch
-                optionFilterProp="label"
+                optionFilterProp="value"
                 :filterOption="(input, option) => {
-                  return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }" >
                 <a-select-option v-for="opt in listDomains" :key="opt.name">
                   {{ opt.name }}
@@ -94,9 +94,9 @@
                 :placeholder="apiParams.roleid.description"
                 :loading="roleLoading"
                 showSearch
-                optionFilterProp="label"
+                optionFilterProp="value"
                 :filterOption="(input, option) => {
-                  return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }">
                 <a-select-option v-for="opt in listRoles" :key="opt.name">
                   {{ opt.name }}
@@ -111,9 +111,9 @@
                 showSearch
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
-                  return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }">
-                <a-select-option v-for="opt in timeZoneMap" :key="opt.id">
+                <a-select-option v-for="opt in timeZoneMap" :key="opt.id" :label="opt.name || opt.description">
                   {{ opt.name || opt.description }}
                 </a-select-option>
               </a-select>
@@ -142,9 +142,9 @@
                   showSearch
                   optionFilterProp="label"
                   :filterOption="(input, option) => {
-                    return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                   }">
-                  <a-select-option v-for="(idp, idx) in listIdps" :key="idx">
+                  <a-select-option v-for="(idp, idx) in listIdps" :key="idx" :label="idp.orgName">
                     {{ idp.orgName }}
                   </a-select-option>
                 </a-select>
@@ -212,26 +212,26 @@ export default {
     this.listIdps = []
     this.columns = [
       {
+        key: 'name',
         title: this.$t('label.name'),
         dataIndex: 'name',
-        width: 120,
+        width: 120
-        slots: { customRender: 'name' }
       },
       {
+        key: 'username',
         title: this.$t('label.username'),
         dataIndex: 'username',
-        width: 120,
+        width: 120
-        slots: { customRender: 'username' }
       },
       {
+        key: 'email',
         title: this.$t('label.email'),
-        dataIndex: 'email',
+        dataIndex: 'email'
-        slots: { customRender: 'email' }
       },
       {
+        key: 'conflictingusersource',
         title: this.$t('label.user.conflict'),
-        dataIndex: 'conflictingusersource',
+        dataIndex: 'conflictingusersource'
-        slots: { customRender: 'conflictingusersource' }
       }
     ]
     this.filters = [
@@ -487,9 +487,9 @@ export default {
     },
     handleEntityRule () {
       if (this.form.samlEnable) {
-        this.rules.push({
+        this.rules.samlEntity = [{ required: true, message: `${this.$t('message.error.select')}` }]
-          samlEntity: [{ required: true, message: `${this.$t('message.error.select')}` }]
+      } else {
-        })
+        delete this.rules.samlEntity
       }
     }
   }

ui/src/views/iam/AddUser.vue

@@ -140,9 +140,9 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
-            <a-select-option v-for="opt in timeZoneMap" :key="opt.id">
+            <a-select-option v-for="opt in timeZoneMap" :key="opt.id" :label="opt.name || opt.description">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
@@ -161,9 +161,9 @@
               showSearch
               optionFilterProp="label"
               :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }" >
-              <a-select-option v-for="idp in idps" :key="idp.id">
+              <a-select-option v-for="idp in idps" :key="idp.id" :label="idp.orgName">
                 {{ idp.orgName }}
               </a-select-option>
             </a-select>

ui/src/views/iam/ConfigureSamlSsoAuth.vue

@@ -36,9 +36,9 @@
           showSearch
           optionFilterProp="label"
           :filterOption="(input, option) => {
-            return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
           }" >
-          <a-select-option v-for="idp in idps" :key="idp.id">
+          <a-select-option v-for="idp in idps" :key="idp.id" :label="idp.orgName">
             {{ idp.orgName }}
           </a-select-option>
         </a-select>

ui/src/views/iam/CreateRole.vue

@@ -67,9 +67,9 @@
             v-model:value="form.type"
             :placeholder="apiParams.type.description"
             showSearch
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option v-for="role in defaultRoles" :key="role">
               {{ role }}
@@ -87,12 +87,13 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option
               v-for="role in roles"
               :value="role.id"
-              :key="role.id">
+              :key="role.id"
+              :label="role.name">
               {{ role.name }}
             </a-select-option>
           </a-select>

ui/src/views/iam/DomainActionForm.vue

@@ -65,9 +65,9 @@
                 showSearch
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
-                  return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }" >
-                <a-select-option v-for="(opt, optIndex) in action.mapping[field.name].options" :key="optIndex">
+                <a-select-option v-for="(opt, optIndex) in action.mapping[field.name].options" :key="optIndex" :label="opt">
                   {{ opt }}
                 </a-select-option>
               </a-select>
@@ -79,11 +79,14 @@
                 :loading="field.loading"
                 :placeholder="field.description"
                 :filterOption="(input, option) => {
-                  return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }"
                 v-focus="fieldIndex === firstIndex"
               >
-                <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
+                <a-select-option
+                  v-for="(opt, optIndex) in field.opts"
+                  :key="optIndex"
+                  :label="opt.name || opt.description || opt.traffictype || opt.publicip">
                   {{ opt.name || opt.description || opt.traffictype || opt.publicip }}
                 </a-select-option>
               </a-select>
@@ -97,9 +100,12 @@
                 showSearch
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
-                  return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }" >
-                <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
+                <a-select-option
+                  v-for="(opt, optIndex) in field.opts"
+                  :key="optIndex"
+                  :label="opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description">
                   {{ opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description }}
                 </a-select-option>
               </a-select>

ui/src/views/iam/DomainView.vue

@@ -56,13 +56,13 @@
         :loading="loading"
         :tabs="$route.meta.tabs" />
       <tree-view
-        v-else
         :key="treeViewKey"
         :treeData="treeData"
         :treeSelected="treeSelected"
         :treeStore="domainStore"
         :loading="loading"
         :tabs="$route.meta.tabs"
+        :treeDeletedKey="treeDeletedKey"
         @change-resource="changeResource"
         @change-tree-store="changeDomainStore"/>
     </div>
@@ -109,7 +109,8 @@ export default {
       showAction: false,
       action: {},
       dataView: false,
-      domainStore: {}
+      domainStore: {},
+      treeDeletedKey: null
     }
   },
   computed: {
@@ -194,6 +195,7 @@ export default {
       })
     },
     execAction (action) {
+      this.treeDeletedKey = action.api === 'deleteDomain' ? this.resource.key : null
       this.actionData = []
       this.action = action
       this.action.params = store.getters.apis[this.action.api].params
@@ -286,9 +288,8 @@ export default {
 
       rootItem[0].title = rootItem[0].title ? rootItem[0].title : rootItem[0].name
       rootItem[0].key = rootItem[0].id ? rootItem[0].id : 0
-      rootItem[0].slots = {
+      rootItem[0].resourceIcon = rootItem[0].icon || {}
-        icon: 'leaf'
+      delete rootItem[0].icon
-      }
 
       if (!rootItem[0].haschild) {
         rootItem[0].isLeaf = true

ui/src/views/iam/EditUser.vue

@@ -74,9 +74,9 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
-            <a-select-option v-for="opt in timeZoneMap" :key="opt.id">
+            <a-select-option v-for="opt in timeZoneMap" :key="opt.id" :label="opt.name || opt.description">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>

ui/src/views/iam/ImportRole.vue

@@ -31,7 +31,7 @@
           <a-upload-dragger
             :multiple="false"
             :fileList="fileList"
-            :remove="handleRemove"
+            @remove="handleRemove"
             :beforeUpload="beforeUpload"
             @change="handleChange"
             v-model:value="form.file">
@@ -70,9 +70,9 @@
             v-model:value="form.type"
             :placeholder="apiParams.type.description"
             showSearch
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option v-for="role in defaultRoles" :key="role">
               {{ role }}

ui/src/views/iam/PermissionEditable.vue

@@ -23,10 +23,10 @@
     showSearch
     optionFilterProp="label"
     :filterOption="(input, option) => {
-      return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
     }" >
-    <a-select-option value="allow">{{ $t('label.allow') }}</a-select-option>
+    <a-select-option value="allow" :label="$t('label.allow')">{{ $t('label.allow') }}</a-select-option>
-    <a-select-option value="deny">{{ $t('label.deny') }}</a-select-option>
+    <a-select-option value="deny" :label="$t('label.deny')">{{ $t('label.deny') }}</a-select-option>
   </a-select>
 </template>
 

ui/src/views/iam/RolePermissionTab.vue

@@ -69,7 +69,6 @@
         handle=".drag-handle"
         animation="200"
         ghostClass="drag-ghost"
-        tag="transition-group"
         :component-data="{type: 'transition'}"
         item-key="id">
         <template #item="{element}">

ui/src/views/iam/SSLCertificateTab.vue

@@ -28,7 +28,8 @@
           :pagination="false"
           v-if="!quickview"
         >
-          <template #action="{ record }" class="cert-button-action">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'actions'" class="cert-button-action">
               <tooltip-button
                 tooltipPlacement="top"
                 :tooltip="$t('label.quickview')"
@@ -46,6 +47,7 @@
                 size="small"
                 @onClick="onShowConfirm(record)" />
             </template>
+          </template>
         </a-table>
 
         <a-list size="small" :dataSource="detailColumn" v-if="quickview">
@@ -128,22 +130,22 @@ export default {
   created () {
     this.columns = [
       {
+        key: 'name',
         title: this.$t('label.name'),
-        dataIndex: 'name',
+        dataIndex: 'name'
-        slots: { customRender: 'name' }
       },
       {
+        key: 'id',
         title: this.$t('label.certificateid'),
         dataIndex: 'id',
-        width: 450,
+        width: 450
-        slots: { customRender: 'id' }
       },
       {
-        title: this.$t('label.action'),
+        key: 'actions',
-        dataIndex: 'action',
+        title: this.$t('label.actions'),
+        dataIndex: 'actions',
         fixed: 'right',
-        width: 80,
+        width: 80
-        slots: { customRender: 'action' }
       }
     ]
     this.detailColumn = ['name', 'certificate', 'certchain']

ui/src/views/iam/SetupTwoFaAtUserProfile.vue

@@ -29,10 +29,6 @@
           <a-form-item v-ctrl-enter="submitPin" ref="selectedProvider" name="selectedProvider">
              <a-select
               v-model:value="form.selectedProvider"
-              optionFilterProp="label"
-              :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-              }"
               @change="val => { handleSelectChange(val) }">
               <a-select-option
                 v-for="(opt) in providers"

ui/src/views/image/IsoZones.vue

@@ -35,18 +35,19 @@
       :pagination="false"
       :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
       :rowKey="record => record.zoneid">
-      <template #zonename="{record}">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'zonename'">
           <span v-if="fetchZoneIcon(record.zoneid)">
             <resource-icon :image="zoneIcon" size="1x" style="margin-right: 5px"/>
           </span>
           <global-outlined v-else style="margin-right: 5px" />
           <span> {{ record.zonename }} </span>
         </template>
-      <template #isready="{ record }">
+        <template v-if="column.key === 'isready'">
           <span v-if="record.isready">{{ $t('label.yes') }}</span>
           <span v-else>{{ $t('label.no') }}</span>
         </template>
-      <template #action="{ record }">
+        <template v-if="column.key === 'actions'">
           <span style="margin-right: 5px">
             <tooltip-button
               :tooltip="$t('label.action.copy.iso')"
@@ -73,6 +74,7 @@
             </a-popconfirm>
           </span>
         </template>
+      </template>
     </a-table>
     <a-pagination
       class="row-element"
@@ -221,27 +223,27 @@ export default {
     this.initForm()
     this.columns = [
       {
+        key: 'zonename',
         title: this.$t('label.zonename'),
-        dataIndex: 'zonename',
+        dataIndex: 'zonename'
-        slots: { customRender: 'zonename' }
       },
       {
         title: this.$t('label.status'),
         dataIndex: 'status'
       },
       {
+        key: 'isready',
         title: this.$t('label.isready'),
-        dataIndex: 'isready',
+        dataIndex: 'isready'
-        slots: { customRender: 'isready' }
       }
     ]
     if (this.isActionPermitted()) {
       this.columns.push({
+        key: 'actions',
         title: '',
-        dataIndex: 'action',
+        dataIndex: 'actions',
         fixed: 'right',
-        width: 100,
+        width: 100
-        slots: { customRender: 'action' }
       })
     }
 
@@ -355,9 +357,9 @@ export default {
     deleteIsos (e) {
       this.showConfirmationAction = false
       this.selectedColumns.splice(0, 0, {
+        key: 'status',
         dataIndex: 'status',
         title: this.$t('label.operation.status'),
-        slots: { customRender: 'status' },
         filters: [
           { text: 'In Progress', value: 'InProgress' },
           { text: 'Success', value: 'success' },

ui/src/views/image/RegisterOrUploadIso.vue

@@ -50,7 +50,7 @@
           <a-upload-dragger
             :multiple="false"
             :fileList="fileList"
-            :remove="handleRemove"
+            @remove="handleRemove"
             :beforeUpload="beforeUpload"
             v-model:value="form.file">
             <p class="ant-upload-drag-icon">
@@ -131,12 +131,12 @@
                 showSearch
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
-                  return option.children?.[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }"
                 v-model:value="userdataid"
                 :placeholder="linkUserDataParams.userdataid.description"
                 :loading="userdata.loading">
-                <a-select-option v-for="opt in userdata.opts" :key="opt.id">
+                <a-select-option v-for="opt in userdata.opts" :key="opt.id" :label="opt.name || opt.description">
                   {{ opt.name || opt.description }}
                 </a-select-option>
               </a-select>
@@ -148,13 +148,14 @@
                 <tooltip-label :title="$t('label.userdatapolicy')" :tooltip="$t('label.userdatapolicy.tooltip')"/>
               </template>
               <a-select
+                showSearch
                 v-model:value="userdatapolicy"
                 :placeholder="linkUserDataParams.userdatapolicy.description"
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
-                  return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }" >
-                <a-select-option v-for="opt in userdatapolicylist.opts" :key="opt.id">
+                <a-select-option v-for="opt in userdatapolicylist.opts" :key="opt.id" :label="opt.id || opt.description">
                   {{ opt.id || opt.description }}
                 </a-select-option>
               </a-select>

ui/src/views/image/RegisterOrUploadTemplate.vue

@@ -44,7 +44,7 @@
             <a-upload-dragger
               :multiple="false"
               :fileList="fileList"
-              :remove="handleRemove"
+              @remove="handleRemove"
               :beforeUpload="beforeUpload"
               v-model:value="form.file">
               <p class="ant-upload-drag-icon">
@@ -128,9 +128,9 @@
                 showSearch
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
-                  return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }" >
-                <a-select-option v-for="(opt, optIndex) in hyperVisor.opts" :key="optIndex">
+                <a-select-option v-for="(opt, optIndex) in hyperVisor.opts" :key="optIndex" :label="opt.name || opt.description">
                   {{ opt.name || opt.description }}
                 </a-select-option>
               </a-select>
@@ -145,9 +145,9 @@
                 showSearch
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
-                  return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }" >
-                <a-select-option v-for="opt in format.opts" :key="opt.id">
+                <a-select-option v-for="opt in format.opts" :key="opt.id" :label="opt.name || opt.description">
                   {{ opt.name || opt.description }}
                 </a-select-option>
               </a-select>
@@ -191,9 +191,9 @@
                 showSearch
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
-                  return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }" >
-                <a-select-option v-for="opt in rootDisk.opts" :key="opt.id">
+                <a-select-option v-for="opt in rootDisk.opts" :key="opt.id" :label="opt.name || opt.description">
                   {{ opt.name || opt.description }}
                 </a-select-option>
               </a-select>
@@ -206,10 +206,10 @@
                 showSearch
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
-                  return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }"
                 :placeholder="$t('label.nicadaptertype')">
-                <a-select-option v-for="opt in nicAdapterType.opts" :key="opt.id">
+                <a-select-option v-for="opt in nicAdapterType.opts" :key="opt.id" :label="opt.name || opt.description">
                   {{ opt.name || opt.description }}
                 </a-select-option>
               </a-select>
@@ -226,10 +226,10 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :placeholder="$t('label.keyboard')">
-            <a-select-option v-for="opt in keyboardType.opts" :key="opt.id">
+            <a-select-option v-for="opt in keyboardType.opts" :key="opt.id" :label="opt.name || opt.description">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
@@ -243,12 +243,12 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             v-model:value="form.ostypeid"
             :loading="osTypes.loading"
             :placeholder="apiParams.ostypeid.description">
-            <a-select-option v-for="opt in osTypes.opts" :key="opt.id">
+            <a-select-option v-for="opt in osTypes.opts" :key="opt.id" :label="opt.name || opt.description">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
@@ -263,12 +263,12 @@
                 showSearch
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
-                  return option.children?.[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }"
                 v-model:value="userdataid"
                 :placeholder="linkUserDataParams.userdataid.description"
                 :loading="userdata.loading">
-                <a-select-option v-for="opt in userdata.opts" :key="opt.id">
+                <a-select-option v-for="opt in userdata.opts" :key="opt.id" :label="opt.name || opt.description">
                   {{ opt.name || opt.description }}
                 </a-select-option>
               </a-select>
@@ -280,13 +280,14 @@
                 <tooltip-label :title="$t('label.userdatapolicy')" :tooltip="$t('label.userdatapolicy.tooltip')"/>
               </template>
               <a-select
+                showSearch
                 v-model:value="userdatapolicy"
                 :placeholder="linkUserDataParams.userdatapolicy.description"
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
-                  return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }" >
-                <a-select-option v-for="opt in userdatapolicylist.opts" :key="opt.id">
+                <a-select-option v-for="opt in userdatapolicylist.opts" :key="opt.id" :label="opt.id || opt.description">
                   {{ opt.id || opt.description }}
                 </a-select-option>
               </a-select>
@@ -453,7 +454,6 @@ export default {
         ostypeid: [{ required: true, message: this.$t('message.error.select') }],
         groupenabled: [{ type: 'array' }]
       })
-      console.log(this.form)
     },
     fetchData () {
       this.fetchZone()

ui/src/views/image/TemplateZones.vue

@@ -35,28 +35,19 @@
       :pagination="false"
       :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
       :rowKey="record => record.zoneid">
-      <template #zonename="{record}">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'zonename'">
           <span v-if="fetchZoneIcon(record.zoneid)">
             <resource-icon :image="zoneIcon" size="1x" style="margin-right: 5px"/>
           </span>
           <global-outlined v-else style="margin-right: 5px" />
           <span> {{ record.zonename }} </span>
         </template>
-      <template #isready="{ record }">
+        <template v-if="column.key === 'isready'">
           <span v-if="record.isready">{{ $t('label.yes') }}</span>
           <span v-else>{{ $t('label.no') }}</span>
         </template>
-      <template #expandedRowRender="{ record }">
+        <template v-if="column.key === 'actions'">
-        <a-table
-          style="marginLeft: -50px; marginTop: 10px; marginBottom: 10px"
-          :columns="innerColumns"
-          :data-source="record.downloaddetails"
-          :pagination="false"
-          :bordered="true"
-          :rowKey="record => record.zoneid">
-        </a-table>
-      </template>
-      <template #action="{ record }">
           <tooltip-button
             style="margin-right: 5px"
             :disabled="!('copyTemplate' in $store.getters.apis && record.isready)"
@@ -73,6 +64,17 @@
             icon="delete-outlined"
             @onClick="onShowDeleteModal(record)"/>
         </template>
+      </template>
+      <template #expandedRowRender="{ record }">
+        <a-table
+          style="margin: 10px 0;"
+          :columns="innerColumns"
+          :data-source="record.downloaddetails"
+          :pagination="false"
+          :bordered="true"
+          :rowKey="record => record.zoneid">
+        </a-table>
+      </template>
     </a-table>
     <a-pagination
       class="row-element"
@@ -171,12 +173,12 @@
           size="middle"
           :columns="selectedColumns"
           :dataSource="selectedItems"
-          :rowKey="(record, idx) => record.zoneid || record.name"
+          :rowKey="record => record.zoneid || record.name"
           :pagination="true"
           style="overflow-y: auto">
         </a-table>
         <a-spin :spinning="deleteLoading">
-          <a-form-item :label="$t('label.isforced')" style="margin-bottom: 0;">
+          <a-form-item ref="forcedDelete" name="forcedDelete" :label="$t('label.isforced')" style="margin-bottom: 0;">
             <a-switch v-model:checked="forcedDelete" v-focus="true"></a-switch>
           </a-form-item>
           <div :span="24" class="action-button">
@@ -260,18 +262,18 @@ export default {
   created () {
     this.columns = [
       {
+        key: 'zonename',
         title: this.$t('label.zonename'),
-        dataIndex: 'zonename',
+        dataIndex: 'zonename'
-        slots: { customRender: 'zonename' }
       },
       {
         title: this.$t('label.status'),
         dataIndex: 'status'
       },
       {
+        key: 'isready',
         title: this.$t('label.isready'),
-        dataIndex: 'isready',
+        dataIndex: 'isready'
-        slots: { customRender: 'isready' }
       }
     ]
     this.innerColumns = [
@@ -290,10 +292,10 @@ export default {
     ]
     if (this.isActionPermitted()) {
       this.columns.push({
+        key: 'actions',
         title: '',
-        dataIndex: 'action',
+        dataIndex: 'actions',
-        width: 100,
+        width: 100
-        slots: { customRender: 'action' }
       })
     }
 
@@ -422,9 +424,9 @@ export default {
     deleteTemplates (e) {
       this.showConfirmationAction = false
       this.selectedColumns.splice(0, 0, {
+        key: 'status',
         dataIndex: 'status',
         title: this.$t('label.operation.status'),
-        slots: { customRender: 'status' },
         filters: [
           { text: 'In Progress', value: 'InProgress' },
           { text: 'Success', value: 'success' },

ui/src/views/image/UpdateISO.vue

@@ -48,12 +48,15 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             v-model:value="form.ostypeid"
             :loading="osTypes.loading"
             :placeholder="apiParams.ostypeid.description">
-            <a-select-option v-for="opt in osTypes.opts" :key="opt.id">
+            <a-select-option
+              v-for="opt in osTypes.opts"
+              :key="opt.id"
+              :label="opt.name || opt.description">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
@@ -69,12 +72,12 @@
                 showSearch
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
-                  return option.children?.[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }"
                 v-model:value="userdataid"
                 :placeholder="linkUserDataParams.userdataid.description"
                 :loading="userdata.loading">
-                <a-select-option v-for="opt in userdata.opts" :key="opt.id">
+                <a-select-option v-for="opt in userdata.opts" :key="opt.id" :label="opt.name || opt.description">
                   {{ opt.name || opt.description }}
                 </a-select-option>
               </a-select>
@@ -86,13 +89,17 @@
                 <tooltip-label :title="$t('label.userdatapolicy')" :tooltip="$t('label.userdatapolicy.tooltip')"/>
               </template>
               <a-select
+                showSearch
                 v-model:value="userdatapolicy"
                 :placeholder="linkUserDataParams.userdatapolicy.description"
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
-                  return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }" >
-                <a-select-option v-for="opt in userdatapolicylist.opts" :key="opt.id">
+                <a-select-option
+                  v-for="opt in userdatapolicylist.opts"
+                  :key="opt.id"
+                  :label="opt.name || opt.description">
                   {{ opt.id || opt.description }}
                 </a-select-option>
               </a-select>

ui/src/views/image/UpdateKubernetesSupportedVersion.vue

@@ -30,12 +30,12 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="stateLoading"
             :placeholder="apiParams.state.description"
             v-focus="true" >
-            <a-select-option v-for="(opt, optIndex) in states" :key="optIndex">
+            <a-select-option v-for="(opt, optIndex) in states" :key="optIndex" :label="opt.name || opt.description">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>

ui/src/views/image/UpdateTemplate.vue

@@ -92,12 +92,12 @@
                 showSearch
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
-                  return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }"
                 v-model:value="form.ostypeid"
                 :loading="osTypes.loading"
                 :placeholder="apiParams.ostypeid.description">
-                <a-select-option v-for="opt in osTypes.opts" :key="opt.id">
+                <a-select-option v-for="opt in osTypes.opts" :key="opt.id" :label="opt.name || opt.description">
                   {{ opt.name || opt.description }}
                 </a-select-option>
               </a-select>
@@ -114,12 +114,12 @@
                 showSearch
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
-                  return option.children?.[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }"
                 v-model:value="userdataid"
                 :placeholder="linkUserDataParams.userdataid.description"
                 :loading="userdata.loading">
-                <a-select-option v-for="opt in userdata.opts" :key="opt.id">
+                <a-select-option v-for="opt in userdata.opts" :key="opt.id" :label="opt.name || opt.description">
                   {{ opt.name || opt.description }}
                 </a-select-option>
               </a-select>
@@ -131,13 +131,14 @@
                 <tooltip-label :title="$t('label.userdatapolicy')" :tooltip="$t('label.userdatapolicy.tooltip')"/>
               </template>
               <a-select
+                showSearch
                 v-model:value="userdatapolicy"
                 :placeholder="linkUserDataParams.userdatapolicy.description"
                 optionFilterProp="label"
                 :filterOption="(input, option) => {
-                  return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }" >
-                <a-select-option v-for="opt in userdatapolicylist.opts" :key="opt.id">
+                <a-select-option v-for="opt in userdatapolicylist.opts" :key="opt.id" :label="opt.id || opt.description">
                   {{ opt.id || opt.description }}
                 </a-select-option>
               </a-select>
@@ -164,9 +165,9 @@
           </span>
           <a-select
             showSearch
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             v-model:value="form.templatetype"
             :placeholder="apiParams.templatetype.description"

ui/src/views/image/UpdateTemplateIsoPermissions.vue

@@ -29,9 +29,9 @@
         @change="fetchData"
         v-focus="true"
         showSearch
-        optionFilterProp="label"
+        optionFilterProp="value"
         :filterOption="(input, option) => {
-          return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
         }" >
         <a-select-option :value="$t('label.add')">{{ $t('label.add') }}</a-select-option>
         <a-select-option :value="$t('label.remove')">{{ $t('label.remove') }}</a-select-option>
@@ -50,9 +50,9 @@
           :defaultValue="$t('label.account')"
           @change="fetchData"
           showSearch
-          optionFilterProp="label"
+          optionFilterProp="value"
           :filterOption="(input, option) => {
-            return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
           }">
           <a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
           <a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>

ui/src/views/infra/AddPrimaryStorage.vue

@@ -35,11 +35,11 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :placeholder="apiParams.scope.description" >
-            <a-select-option :value="'cluster'"> {{ $t('label.clusterid') }} </a-select-option>
+            <a-select-option :value="'cluster'" :label="$t('label.clusterid')"> {{ $t('label.clusterid') }} </a-select-option>
-            <a-select-option :value="'zone'"> {{ $t('label.zoneid') }} </a-select-option>
+            <a-select-option :value="'zone'" :label="$t('label.zoneid')"> {{ $t('label.zoneid') }} </a-select-option>
           </a-select>
         </a-form-item>
         <div v-if="form.scope === 'zone'">
@@ -50,9 +50,9 @@
             <a-select
               v-model:value="form.hypervisor"
               showSearch
-              optionFilterProp="label"
+              optionFilterProp="value"
               :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :placeholder="apiParams.hypervisor.description" >
               <a-select-option :value="hypervisor" v-for="(hypervisor, idx) in hypervisors" :key="idx">
@@ -93,10 +93,10 @@
               showSearch
               optionFilterProp="label"
               :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :placeholder="apiParams.podid.description">
-              <a-select-option :value="pod.id" v-for="(pod) in pods" :key="pod.id">
+              <a-select-option :value="pod.id" v-for="(pod) in pods" :key="pod.id" :label="pod.name">
                 {{ pod.name }}
               </a-select-option>
             </a-select>
@@ -111,10 +111,10 @@
               showSearch
               optionFilterProp="label"
               :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :placeholder="apiParams.clusterid.description">
-              <a-select-option :value="cluster.id" v-for="cluster in clusters" :key="cluster.id">
+              <a-select-option :value="cluster.id" v-for="cluster in clusters" :key="cluster.id" :label="cluster.name">
                 {{ cluster.name }}
               </a-select-option>
             </a-select>
@@ -127,9 +127,9 @@
               showSearch
               optionFilterProp="label"
               :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }" >
-              <a-select-option :value="host.id" v-for="host in hosts" :key="host.id">
+              <a-select-option :value="host.id" v-for="host in hosts" :key="host.id" :label="host.name">
                 {{ host.name }}
               </a-select-option>
             </a-select>
@@ -148,9 +148,9 @@
           <a-select
             v-model:value="form.protocol"
             showSearch
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :placeholder="apiParams.clusterid.description">
             <a-select-option :value="protocol" v-for="(protocol,idx) in protocols" :key="idx">
@@ -218,9 +218,9 @@
               v-model:value="form.provider"
               @change="updateProviderAndProtocol"
               showSearch
-              optionFilterProp="label"
+              optionFilterProp="value"
               :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               :placeholder="apiParams.provider.description">
               <a-select-option :value="provider" v-for="(provider,idx) in providers" :key="idx">

ui/src/views/infra/AddSecondaryStorage.vue

@@ -33,9 +33,9 @@
             v-model:value="form.provider"
             @change="val => { form.provider = val }"
             showSearch
-            optionFilterProp="label"
+            optionFilterProp="value"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option
               :value="prov"

ui/src/views/infra/ClusterAdd.vue

@@ -49,9 +49,9 @@
           v-model:value="hypervisor"
           @change="resetAllFields"
           showSearch
-          optionFilterProp="label"
+          optionFilterProp="value"
           :filterOption="(input, option) => {
-            return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
           }" >
           <a-select-option
             v-for="hv in hypervisorsList"
@@ -69,12 +69,13 @@
           showSearch
           optionFilterProp="label"
           :filterOption="(input, option) => {
-            return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
           }" >
           <a-select-option
             v-for="pod in podsList"
             :value="pod.id"
-            :key="pod.id">
+            :key="pod.id"
+            :label="pod.name">
             {{ pod.name }}
           </a-select-option>
         </a-select>

ui/src/views/infra/HostAdd.vue

@@ -62,13 +62,14 @@
               showSearch
               optionFilterProp="label"
               :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               @change="fetchClusters">
               <a-select-option
                 v-for="pod in podsList"
                 :value="pod.id"
-                :key="pod.id">
+                :key="pod.id"
+                :label="pod.name">
                 {{ pod.name }}
               </a-select-option>
             </a-select>
@@ -83,13 +84,14 @@
               showSearch
               optionFilterProp="label"
               :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               @change="handleChangeCluster">
               <a-select-option
                 v-for="cluster in clustersList"
                 :value="cluster.id"
-                :key="cluster.id">
+                :key="cluster.id"
+                :label="cluster.name">
                 {{ cluster.name }}
               </a-select-option>
             </a-select>
@@ -206,9 +208,9 @@
             <a-select
               mode="tags"
               showSearch
-              optionFilterProp="label"
+              optionFilterProp="value"
               :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }"
               v-model:value="form.hosttags"
               :placeholder="placeholder.hosttags">

ui/src/views/infra/MigrateData.vue

@@ -37,11 +37,12 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option
               v-for="store in imageStores"
-              :key="store.id"> {{ store.name || opt.url }}
+              :key="store.id"
+              :label="store.name || opt.url"> {{ store.name || opt.url }}
             </a-select-option>
           </a-select>
         </a-form-item>
@@ -56,11 +57,12 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option
               v-for="store in destStores"
-              :key="store.id"> {{ store.name || opt.url }}
+              :key="store.id"
+              :label="store.name || opt.url"> {{ store.name || opt.url }}
             </a-select-option>
           </a-select>
         </a-form-item>
@@ -71,10 +73,10 @@
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
-            <a-select-option value="Complete">{{ $t('label.complete') }}</a-select-option>
+            <a-select-option value="Complete" :label="$t('label.complete')">{{ $t('label.complete') }}</a-select-option>
-            <a-select-option value="Balance">{{ $t('label.balance') }}</a-select-option>
+            <a-select-option value="Balance" :label="$t('label.balance')">{{ $t('label.balance') }}</a-select-option>
           </a-select>
         </a-form-item>
         <div :span="24" class="action-button">

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

@@ -33,7 +33,8 @@
       :dataSource="items"
       :pagination="false"
       :rowKey="record => record.id">
-      <template #actions="{record}">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'actions'">
           <a-popconfirm
             :title="`${$t('label.delete')}?`"
             @confirm="handleDelete(record)"
@@ -49,6 +50,7 @@
               :danger="true" />
           </a-popconfirm>
         </template>
+      </template>
     </a-table>
     <a-pagination
       class="pagination"
@@ -91,10 +93,10 @@
               showSearch
               optionFilterProp="label"
               :filterOption="(input, option) => {
-                return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }" >
-              <a-select-option value="account">{{ $t('label.account') }}</a-select-option>
+              <a-select-option value="account" :label="$t('label.account')">{{ $t('label.account') }}</a-select-option>
-              <a-select-option value="project">{{ $t('label.project') }}</a-select-option>
+              <a-select-option value="project" :label="$t('label.project')">{{ $t('label.project') }}</a-select-option>
             </a-select>
           </a-form-item>
 
@@ -121,7 +123,7 @@
             <a-select
               v-model:value="form.account"
               showSearch
-              optionFilterProp="label"
+              optionFilterProp="value"
               :filterOption="(input, option) => {
                 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }" >
@@ -219,8 +221,8 @@ export default {
           dataIndex: 'account'
         },
         {
-          title: this.$t('label.action'),
+          key: 'actions',
-          slots: { customRender: 'actions' }
+          title: this.$t('label.actions')
         }
       ]
     }