ui: Fetch all records in list* API and allow searching in dropdowns

engine/schema/src/main/resources/META-INF/db/schema-41510to41600.sql

@@ -708,26 +708,26 @@ CREATE PROCEDURE `cloud`.`ADD_GUEST_OS_AND_HYPERVISOR_MAPPING` (
     IN guest_os_hypervisor_hypervisor_version VARCHAR(32),
     IN guest_os_hypervisor_guest_os_name VARCHAR(255)
 )
-BEGIN	
-	INSERT  INTO cloud.guest_os (uuid, category_id, display_name, created) 
+BEGIN
+	INSERT  INTO cloud.guest_os (uuid, category_id, display_name, created)
 	SELECT 	UUID(), guest_os_category_id, guest_os_display_name, now()
 	FROM    DUAL
-	WHERE 	not exists( SELECT  1 
+	WHERE 	not exists( SELECT  1
 	                    FROM    cloud.guest_os
 	                    WHERE   cloud.guest_os.category_id = guest_os_category_id
-	                    AND     cloud.guest_os.display_name = guest_os_display_name)	
-						
-;	INSERT  INTO cloud.guest_os_hypervisor (uuid, hypervisor_type, hypervisor_version, guest_os_name, guest_os_id, created) 
+	                    AND     cloud.guest_os.display_name = guest_os_display_name)
+
+;	INSERT  INTO cloud.guest_os_hypervisor (uuid, hypervisor_type, hypervisor_version, guest_os_name, guest_os_id, created)
 	SELECT 	UUID(), guest_os_hypervisor_hypervisor_type, guest_os_hypervisor_hypervisor_version, guest_os_hypervisor_guest_os_name, guest_os.id, now()
 	FROM 	cloud.guest_os
 	WHERE 	guest_os.category_id = guest_os_category_id
 	AND 	guest_os.display_name = guest_os_display_name
-	AND	NOT EXISTS (SELECT  1 
+	AND	NOT EXISTS (SELECT  1
 	                    FROM    cloud.guest_os_hypervisor as hypervisor
-	                    WHERE   hypervisor_type = guest_os_hypervisor_hypervisor_type			
+	                    WHERE   hypervisor_type = guest_os_hypervisor_hypervisor_type
 	                    AND     hypervisor_version = guest_os_hypervisor_hypervisor_version
 	                    AND     hypervisor.guest_os_id = guest_os.id
-	                    AND     hypervisor.guest_os_name = guest_os_hypervisor_guest_os_name)    
+	                    AND     hypervisor.guest_os_name = guest_os_hypervisor_guest_os_name)
 ;END;
 
 -- PR#4699 Call procedure `ADD_GUEST_OS_AND_HYPERVISOR_MAPPING` to add new data to guest_os and guest_os_hypervisor.
@@ -757,3 +757,5 @@ UPDATE cloud.user_vm_deploy_as_is_details SET value='' WHERE value IS NULL;
 ALTER TABLE cloud.user_vm_deploy_as_is_details MODIFY value text NOT NULL;
 UPDATE cloud.user_vm_details SET value='' WHERE value IS NULL;
 ALTER TABLE cloud.user_vm_details MODIFY value varchar(5120) NOT NULL;
+
+UPDATE `cloud`.`configuration` SET `value` = 20, `default_value` = 20 WHERE `name` = 'default.ui.page.size';

ui/src/api/index.js

@@ -16,8 +16,9 @@
 // under the License.
 
 import { axios } from '@/utils/request'
+import store from '@/store'
 
-export function api (command, args = {}, method = 'GET', data = {}) {
+export async function api (command, args = {}, method = 'GET', data = {}) {
   let params = {}
   args.command = command
   args.response = 'json'
@@ -29,14 +30,70 @@ export function api (command, args = {}, method = 'GET', data = {}) {
     })
   }
 
-  return axios({
-    params: {
-      ...args
-    },
-    url: '/',
-    method,
-    data: params || {}
-  })
+  const exemptedAPIs = ['listLdapConfigurations', 'listCapabilities', 'listIdps', 'listApis', 'listInfrastructure', 'listAndSwitchSamlAccount']
+
+  if ('page' in args || 'id' in args || exemptedAPIs.includes(command) || !command.startsWith('list')) {
+    return axios({
+      params: {
+        ...args
+      },
+      url: '/',
+      method,
+      data: params || {}
+    })
+  }
+
+  const pagesize = store.getters.defaultPageSize
+  let page = 1
+  let items = []
+  let done = false
+  let response = null
+
+  while (!done) {
+    args.page = page
+    args.pagesize = pagesize
+    await axios({
+      params: {
+        ...args
+      },
+      url: '/',
+      method,
+      data: params || {}
+    }).then(json => {
+      var responseName
+      var objectName
+      for (const key in json) {
+        if (key.includes('response')) {
+          responseName = key
+          break
+        }
+      }
+      for (const key in json[responseName]) {
+        if (key === 'count') {
+          continue
+        }
+        objectName = key
+        break
+      }
+      if (json[responseName][objectName]) {
+        items = items.concat(json[responseName][objectName])
+      }
+      if (!json[responseName].count || json[responseName].count === items.length || !json[responseName][objectName]) {
+        done = true
+        json[responseName][objectName] = items
+        response = new Promise((resolve) => {
+          resolve(json)
+        })
+        return
+      }
+      page++
+    }).catch(error => {
+      response = new Promise((resolve, reject) => {
+        reject(error)
+      })
+    })
+  }
+  return response
 }
 
 export function login (arg) {

ui/src/components/header/SamlDomainSwitcher.vue

@@ -22,6 +22,11 @@
       :loading="loading"
       :defaultValue="currentAccount"
       :value="currentAccount"
+      showSearch
+      optionFilterProp="children"
+      :filterOption="(input, option) => {
+        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }"
       @change="changeAccount"
       @focus="fetchData" >
 

ui/src/components/view/DedicateDomain.vue

@@ -21,7 +21,15 @@
       <a-spin :spinning="domainsLoading">
         <p class="form__label">{{ $t('label.domain') }}<span class="required">*</span></p>
         <p class="required required-label">{{ $t('label.required') }}</p>
-        <a-select style="width: 100%" @change="handleChangeDomain" v-model="domainId">
+        <a-select
+          style="width: 100%"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }"
+          @change="handleChangeDomain"
+          v-model="domainId">
           <a-select-option v-for="(domain, index) in domainsList" :value="domain.id" :key="index">
             {{ domain.path || domain.name || domain.description }}
           </a-select-option>

ui/src/components/view/FormView.vue

@@ -52,8 +52,11 @@
                 rules: [{ required: field.required, message: `${this.$t('message.error.select')}` }]
               }]"
               :placeholder="field.description"
-
-            >
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
                 {{ opt.name || opt.description }}
               </a-select-option>

ui/src/components/view/SearchView.vue

@@ -56,6 +56,11 @@
                   v-decorator="[field.name, {
                     initialValue: fieldValues[field.name] || null
                   }]"
+                  showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }"
                   :loading="field.loading">
                   <a-select-option
                     v-for="(opt, idx) in field.opts"

ui/src/store/getters.js

@@ -39,7 +39,9 @@ const getters = {
   server: state => state.app.server,
   domainStore: state => state.user.domainStore,
   darkMode: state => state.user.darkMode,
-  themeSetting: state => state.user.themeSetting
+  themeSetting: state => state.user.themeSetting,
+  defaultPageSize: state => state.user.defaultPageSize,
+  listviewPageSize: state => state.user.listviewPageSize
 }
 
 export default getters

ui/src/store/modules/user.js

@@ -55,7 +55,9 @@ const user = {
     usebrowsertimezone: false,
     domainStore: {},
     darkMode: false,
-    themeSetting: {}
+    themeSetting: {},
+    defaultPageSize: 500,
+    listviewPageSize: 20
   },
 
   mutations: {
@@ -118,6 +120,12 @@ const user = {
     SET_THEME_SETTING (state, setting) {
       state.themeSetting = setting
       Vue.ls.set(THEME_SETTING, setting)
+    },
+    SET_DEFAULT_PAGE_SIZE: (state, defaultPageSize) => {
+      state.defaultPageSize = defaultPageSize
+    },
+    SET_DEFAULT_LISTVIEW_PAGE_SIZE: (state, listviewPageSize) => {
+      state.listviewPageSize = listviewPageSize
     }
   },
 
@@ -254,6 +262,15 @@ const user = {
           reject(error)
         })
 
+        api('listConfigurations', { keyword: 'page.size' }).then(response => {
+          const defaultPageSize = parseInt(response.listconfigurationsresponse.configuration.filter(x => x.name === 'default.page.size')[0].value)
+          const listviewPageSize = parseInt(response.listconfigurationsresponse.configuration.filter(x => x.name === 'default.ui.page.size')[0].value)
+          commit('SET_DEFAULT_PAGE_SIZE', defaultPageSize)
+          commit('SET_DEFAULT_LISTVIEW_PAGE_SIZE', listviewPageSize)
+        }).catch(error => {
+          reject(error)
+        })
+
         api('listLdapConfigurations').then(response => {
           const ldapEnable = (response.ldapconfigurationresponse.count > 0)
           commit('SET_LDAP', ldapEnable)

ui/src/views/AutogenView.vue

@@ -49,7 +49,12 @@
                     ['Admin', 'DomainAdmin'].includes($store.getters.userInfo.roletype) && ['vm', 'iso', 'template'].includes($route.name)
                     ? 'all' : ['guestnetwork'].includes($route.name) ? 'all' : 'self')"
                   style="min-width: 100px; margin-left: 10px"
-                  @change="changeFilter">
+                  @change="changeFilter"
+                  showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }" >
                   <a-icon slot="suffixIcon" type="filter" />
                   <a-select-option v-if="['Admin', 'DomainAdmin'].includes($store.getters.userInfo.roletype) && ['vm', 'iso', 'template'].includes($route.name)" key="all">
                     {{ $t('label.all') }}
@@ -211,6 +216,11 @@
                   }]"
                   :placeholder="field.description"
                   :autoFocus="fieldIndex === firstIndex"
+                  showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }"
                 >
                   <a-select-option key="" >{{ }}</a-select-option>
                   <a-select-option v-for="(opt, optIndex) in currentAction.mapping[field.name].options" :key="optIndex">
@@ -270,6 +280,11 @@
                   }]"
                   :placeholder="field.description"
                   :autoFocus="fieldIndex === firstIndex"
+                  showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }"
                 >
                   <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
                     {{ opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description }}
@@ -358,7 +373,7 @@
         :pageSize="pageSize"
         :total="itemCount"
         :showTotal="total => `${$t('label.showing')} ${Math.min(total, 1+((page-1)*pageSize))}-${Math.min(page*pageSize, total)} ${$t('label.of')} ${total} ${$t('label.items')}`"
-        :pageSizeOptions="device === 'desktop' ? ['20', '50', '100', '200'] : ['10', '20', '50', '100', '200']"
+        :pageSizeOptions="pageSizeOptions"
         @change="changePage"
         @showSizeChange="changePageSize"
         showSizeChanger
@@ -435,7 +450,7 @@ export default {
       modalInfo: {},
       itemCount: 0,
       page: 1,
-      pageSize: 10,
+      pageSize: this.$store.getters.listviewPageSize,
       resource: {},
       selectedRowKeys: [],
       currentAction: {},
@@ -542,9 +557,6 @@ export default {
       }
     })
 
-    if (this.device === 'desktop') {
-      this.pageSize = 20
-    }
     this.currentPath = this.$route.fullPath
     this.fetchData()
     if ('projectid' in this.$route.query) {
@@ -567,7 +579,6 @@ export default {
           this.pageSize = Number(to.query.pagesize)
         } else {
           this.page = 1
-          this.pageSize = (this.device === 'desktop' ? 20 : 10)
         }
         this.itemCount = 0
         this.fetchData()
@@ -588,6 +599,15 @@ export default {
   computed: {
     hasSelected () {
       return this.selectedRowKeys.length > 0
+    },
+    pageSizeOptions () {
+      var sizes = [20, 50, 100, 200, this.$store.getters.listviewPageSize]
+      if (this.device !== 'desktop') {
+        sizes.unshift(10)
+      }
+      return [...new Set(sizes)].sort(function (a, b) {
+        return a - b
+      }).map(String)
     }
   },
   methods: {

ui/src/views/auth/Login.vue

@@ -121,7 +121,13 @@
           </a-select>
         </a-form-item>
         <a-form-item>
-          <a-select v-decorator="['idp', { initialValue: selectedIdp } ]">
+          <a-select
+            v-decorator="['idp', { initialValue: selectedIdp } ]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="(idp, idx) in idps" :key="idx" :value="idp.id">
               {{ idp.orgName }}
             </a-select-option>