Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
davidjumani wants to merge 5 commits into from
Closed

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8af4b5e
ui: Fetching all records in list* API
davidjumani Aug 4, 2021
70b3a79
ui: Allow searching in dropdowns
davidjumani Aug 4, 2021
1185cb1
Merge branch 'main' of github.com:apache/cloudstack into fix-ui-list-api
davidjumani Aug 23, 2021
3858e15
Adding support for default.ui.page.size
davidjumani Aug 23, 2021
ffeb751
Removing logs
davidjumani Aug 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 68 additions & 9 deletions ui/src/api/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

import { axios } from '@/utils/request'

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'
Expand All @@ -29,14 +29,73 @@ 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 || exemptedAPIs.includes(command) || !command.startsWith('list')) {
return axios({
params: {
...args
},
url: '/',
method,
data: params || {}
})
}

const pagesize = 10
let page = 1
let items = []
let done = false
let response = null

while (!done) {
args.page = page
args.pagesize = pagesize
Copy link
Copy Markdown
Contributor

@shwstppr shwstppr Aug 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@davidjumani do we use default.ui.page.size global setting in the UI?

And just want to know if I have 1000 VMs in my env and I open AttachVolume form will this call listVirtualMachines API 100 times?

Copy link
Copy Markdown
Contributor Author

@davidjumani davidjumani Aug 11, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

10 is a placeholder now since default.page.size is generally 500 and it would be difficult to see it in the test env. Will change it to default.page.size after people test and get back

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])
console.log(command, page, responseName, objectName, items.length, json[responseName].count, 'WIP')
}
if (!json[responseName].count || json[responseName].count === items.length || !json[responseName][objectName]) {
console.log(command, page, responseName, objectName, items.length, json[responseName].count, 'DONE')
done = true
json[responseName][objectName] = items
console.log(json)
response = new Promise((resolve) => {
resolve(json)
})
return
}
page++
}).catch(error => {
response = new Promise((resolve, reject) => {
reject(error)
})
})
}
return response
}

export function login (arg) {
Expand Down
5 changes: 5 additions & 0 deletions ui/src/components/header/SamlDomainSwitcher.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" >

Expand Down
10 changes: 9 additions & 1 deletion ui/src/components/view/DedicateDomain.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 5 additions & 2 deletions ui/src/components/view/FormView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 5 additions & 0 deletions ui/src/components/view/SearchView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
17 changes: 16 additions & 1 deletion ui/src/views/AutogenView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') }}
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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 }}
Expand Down
8 changes: 7 additions & 1 deletion ui/src/views/auth/Login.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,13 @@
{{ $t('label.login.single.signon') }}
</span>
<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>
Expand Down
46 changes: 41 additions & 5 deletions ui/src/views/compute/AssignInstance.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,31 @@

<div class="form__item">
<p class="form__label">{{ $t('label.accounttype') }}</p>
<a-select v-model="selectedAccountType" defaultValue="account" autoFocus>
<a-select
v-model="selectedAccountType"
defaultValue="account"
autoFocus
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.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>
</a-select>
</div>

<div class="form__item">
<p class="form__label"><span class="required">*</span>{{ $t('label.domain') }}</p>
<a-select @change="changeDomain" v-model="selectedDomain" :defaultValue="selectedDomain">
<a-select
@change="changeDomain"
v-model="selectedDomain"
:defaultValue="selectedDomain"
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="domain in domains" :key="domain.name" :value="domain.id">
{{ domain.path || domain.name || domain.description }}
</a-select-option>
Expand All @@ -47,7 +63,14 @@
<template v-if="selectedAccountType === 'Account'">
<div class="form__item">
<p class="form__label"><span class="required">*</span>{{ $t('label.account') }}</p>
<a-select @change="changeAccount" v-model="selectedAccount">
<a-select
@change="changeAccount"
v-model="selectedAccount"
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="account in accounts" :key="account.name" :value="account.name">
{{ account.name }}
</a-select-option>
Expand All @@ -59,7 +82,14 @@
<template v-else>
<div class="form__item">
<p class="form__label"><span class="required">*</span>{{ $t('label.project') }}</p>
<a-select @change="changeProject" v-model="selectedProject">
<a-select
@change="changeProject"
v-model="selectedProject"
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="project in projects" :key="project.id" :value="project.id">
{{ project.name }}
</a-select-option>
Expand All @@ -70,7 +100,13 @@

<div class="form__item">
<p class="form__label">{{ $t('label.network') }}</p>
<a-select v-model="selectedNetwork">
<a-select
v-model="selectedNetwork"
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="network in networks" :key="network.id" :value="network.id">
{{ network.name ? network.name : '-' }}
</a-select-option>
Expand Down
7 changes: 6 additions & 1 deletion ui/src/views/compute/AttachIso.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,12 @@
initialValue: this.selectedIso,
rules: [{ required: true, message: `${this.$t('label.required')}`}]
}]"
autoFocus>
autoFocus
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="iso in isos" :key="iso.id">
{{ iso.displaytext || iso.name }}
</a-select-option>
Expand Down
8 changes: 6 additions & 2 deletions ui/src/views/compute/CreateSnapshotWizard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,18 @@
<a-form-item>
<tooltip-label slot="label" :title="$t('label.volumeid')" :tooltip="apiParams.volumeid.description"/>
<a-select
showSearch
allowClear
v-decorator="['volumeid', {
rules: [{ required: true, message: $t('message.error.select') }]
}]"
@change="onChangeVolume"
:placeholder="apiParams.volumeid.description"
autoFocus>
autoFocus
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option
v-for="volume in listVolumes"
:key="volume.id">
Expand Down
17 changes: 14 additions & 3 deletions ui/src/views/compute/DeployVM.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,10 @@
rules: [{ required: true, message: `${this.$t('message.error.select')}` }]
}]"
:options="hypervisorSelectOptions"
@change="value => this.hypervisor = value" />
@change="value => this.hypervisor = value"
showSearch
optionFilterProp="children"
:filterOption="filterOption" />
</a-form-item>
</p>
</a-card>
Expand Down Expand Up @@ -483,15 +486,20 @@
:autoFocus="vm.templateid && ['KVM', 'VMware'].includes(hypervisor) && !template.deployasis"
v-decorator="['boottype']"
@change="fetchBootModes"
>
showSearch
optionFilterProp="children"
:filterOption="filterOption" >
<a-select-option v-for="bootType in options.bootTypes" :key="bootType.id">
{{ bootType.description }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('label.bootmode')">
<a-select
v-decorator="['bootmode']">
v-decorator="['bootmode']"
showSearch
optionFilterProp="children"
:filterOption="filterOption" >
<a-select-option v-for="bootMode in options.bootModes" :key="bootMode.id">
{{ bootMode.description }}
</a-select-option>
Expand Down Expand Up @@ -555,6 +563,9 @@
<a-select
v-decorator="['keyboard']"
:options="keyboardSelectOptions"
showSearch
optionFilterProp="children"
:filterOption="filterOption"
></a-select>
</a-form-item>
<a-form-item :label="$t('label.action.start.instance')">
Expand Down
7 changes: 6 additions & 1 deletion ui/src/views/compute/DestroyVM.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,12 @@
:placeholder="$t('label.delete.volumes')"
mode="multiple"
:loading="loading"
:autoFocus="$store.getters.userInfo.roletype !== 'Admin' && !$store.getters.features.allowuserexpungerecovervm">
:autoFocus="$store.getters.userInfo.roletype !== 'Admin' && !$store.getters.features.allowuserexpungerecovervm"
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="volume in volumes" :key="volume.id">
{{ volume.name }}
</a-select-option>
Expand Down
Loading