etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

compute: Fixing template search (#543) 

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
davidjumani 2020-07-27 15:50:10 +05:30 committed by Rohit Yadav
parent 8e6aac12ee
commit 2b48688a50
3 changed files with 105 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
ui/src/views/compute/DeployVM.vue
View File

@ -89,6 +89,7 @@
:selected="tabKey"
:loading="loading.templates"
:preFillContent="dataPreFill"
@handle-search-filter="($event) => fetchAllTemplates($event)"
@update-template-iso="updateFieldValue" />
<span>
{{ $t('label.override.rootdisk.size') }}
@ -110,6 +111,7 @@
:selected="tabKey"
:loading="loading.isos"
:preFillContent="dataPreFill"
@handle-search-filter="($event) => fetchAllIsos($event)"
@update-template-iso="updateFieldValue" />
<a-form-item :label="this.$t('label.hypervisor')">
<a-select
@ -781,8 +783,23 @@ export default {
}
},
instanceConfig (instanceConfig) {
this.template = _.find(this.options.templates, (option) => option.id === instanceConfig.templateid)
this.iso = _.find(this.options.isos, (option) => option.id === instanceConfig.isoid)
this.template = ''
for (const key in this.options.templates) {
var template = _.find(_.get(this.options.templates[key], 'template', []), (option) => option.id === instanceConfig.templateid)
if (template) {
this.template = template
break
}
}
this.iso = ''
for (const key in this.options.isos) {
var iso = _.find(_.get(this.options.isos[key], 'iso', []), (option) => option.id === instanceConfig.isoid)
if (iso) {
this.iso = iso
break
}
}
if (instanceConfig.hypervisor) {
var hypervisorItem = _.find(this.options.hypervisors, (option) => option.name === instanceConfig.hypervisor)
@ -976,9 +993,16 @@ export default {
templateid: value,
isoid: null
})
const templates = this.options.templates.filter(x => x.id === value)
if (templates.length > 0) {
var size = templates[0].size / (1024 * 1024 * 1024) || 0 // bytes to GB
let template = ''
for (const key in this.options.templates) {
var t = _.find(_.get(this.options.templates[key], 'template', []), (option) => option.id === value)
if (t) {
template = t
break
}
}
if (template) {
var size = template.size / (1024 * 1024 * 1024) || 0 // bytes to GB
this.dataPreFill.minrootdisksize = Math.ceil(size)
}
} else if (name === 'isoid') {
@ -1254,12 +1278,17 @@ export default {
this.loading[name] = false
})
},
fetchTemplates (templateFilter) {
fetchTemplates (templateFilter, params) {
params = params || {}
if (params.keyword || params.category !== templateFilter) {
params.page = 1
params.pageSize = params.pageSize || 10
}
params.zoneid = _.get(this.zone, 'id')
params.templatefilter = templateFilter
return new Promise((resolve, reject) => {
api('listTemplates', {
zoneid: _.get(this.zone, 'id'),
templatefilter: templateFilter
}).then((response) => {
api('listTemplates', params).then((response) => {
resolve(response)
}).catch((reason) => {
// ToDo: Handle errors
@ -1267,13 +1296,18 @@ export default {
})
})
},
fetchIsos (isoFilter) {
fetchIsos (isoFilter, params) {
params = params || {}
if (params.keyword || params.category !== isoFilter) {
params.page = 1
params.pageSize = params.pageSize || 10
}
params.zoneid = _.get(this.zone, 'id')
params.isoFilter = isoFilter
params.bootable = true
return new Promise((resolve, reject) => {
api('listIsos', {
zoneid: _.get(this.zone, 'id'),
isofilter: isoFilter,
bootable: true
}).then((response) => {
api('listIsos', params).then((response) => {
resolve(response)
}).catch((reason) => {
// ToDo: Handle errors
@ -1281,20 +1315,19 @@ export default {
})
})
},
fetchAllTemplates (filterKeys) {
fetchAllTemplates (params) {
const promises = []
this.options.templates = []
const templates = {}
this.loading.templates = true
this.templateFilter.forEach((filter) => {
if (filterKeys && !filterKeys.includes(filter)) {
return true
}
promises.push(this.fetchTemplates(filter))
templates[filter] = { count: 0, template: [] }
promises.push(this.fetchTemplates(filter, params))
})
Promise.all(promises).then(response => {
response.forEach((resItem) => {
const concatTemplates = _.concat(this.options.templates, _.get(resItem, 'listtemplatesresponse.template', []))
this.options.templates = _.uniqWith(concatTemplates, _.isEqual)
this.options.templates = templates
Promise.all(promises).then((response) => {
response.forEach((resItem, idx) => {
templates[this.templateFilter[idx]] = _.isEmpty(resItem.listtemplatesresponse) ? { count: 0, template: [] } : resItem.listtemplatesresponse
this.options.templates = { ...templates }
this.$forceUpdate()
})
}).catch((reason) => {
@ -1303,20 +1336,19 @@ export default {
this.loading.templates = false
})
},
fetchAllIsos (filterKey) {
fetchAllIsos (params) {
const promises = []
this.options.isos = []
const isos = {}
this.loading.isos = true
this.isoFilter.forEach((filter) => {
if (filterKey && filterKey !== filter) {
return true
}
promises.push(this.fetchIsos(filter))
isos[filter] = { count: 0, iso: [] }
promises.push(this.fetchIsos(filter, params))
})
Promise.all(promises).then(response => {
response.forEach((resItem) => {
const concatedIsos = _.concat(this.options.isos, _.get(resItem, 'listisosresponse.iso', []))
this.options.isos = _.uniqWith(concatedIsos, _.isEqual)
this.options.isos = isos
Promise.all(promises).then((response) => {
response.forEach((resItem, idx) => {
isos[this.isoFilter[idx]] = _.isEmpty(resItem.listisosresponse) ? { count: 0, iso: [] } : resItem.listisosresponse
this.options.isos = { ...isos }
this.$forceUpdate()
})
}).catch((reason) => {

22
ui/src/views/compute/wizard/TemplateIsoRadioGroup.vue
View File

@ -45,8 +45,8 @@
<div style="display: block; text-align: right;">
<a-pagination
size="small"
:current="page"
:pageSize="pageSize"
:current="options.page"
:pageSize="options.pageSize"
:total="itemCount"
:showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
:pageSizeOptions="['10', '20', '40', '80', '100', '500']"
@ -92,8 +92,10 @@ export default {
data () {
return {
value: '',
page: 1,
pageSize: 10
options: {
page: 1,
pageSize: 10
}
}
},
mounted () {
@ -119,14 +121,14 @@ export default {
this.$emit('emit-update-template-iso', this.inputDecorator, id)
},
onChangePage (page, pageSize) {
this.page = page
this.pageSize = pageSize
this.$forceUpdate()
this.options.page = page
this.options.pageSize = pageSize
this.$emit('handle-search-filter', this.options)
},
onChangePageSize (page, pageSize) {
this.page = page
this.pageSize = pageSize
this.$forceUpdate()
this.options.page = page
this.options.pageSize = pageSize
this.$emit('handle-search-filter', this.options)
}
}
}

143
ui/src/views/compute/wizard/TemplateIsoSelection.vue
View File

@ -21,12 +21,12 @@
class="search-input"
:placeholder="$t('label.search')"
v-model="filter"
@search="filterDataSource">
@search="handleSearch">
</a-input-search>
<a-spin :spinning="loading">
<a-tabs
:animated="false"
:defaultActiveKey="Object.keys(dataSource)[0]"
:defaultActiveKey="filterOpts[0].id"
v-model="filterType"
tabPosition="top"
@change="changeFilterType">
@ -36,13 +36,13 @@
:tab="$t(filterItem.name)">
<TemplateIsoRadioGroup
v-if="filterType===filterItem.id"
:osList="dataSource[filterItem.id]"
:itemCount="itemCount[filterItem.id]"
:osList="items[filterItem.id][inputDecorator.slice(0, -2)] || []"
:itemCount="items[filterItem.id].count || 0"
:input-decorator="inputDecorator"
:selected="checkedValue"
:preFillContent="preFillContent"
@handle-filter-tag="filterDataSource"
@emit-update-template-iso="updateTemplateIso"
@handle-search-filter="($event) => emitSearchFilter($event)"
></TemplateIsoRadioGroup>
</a-tab-pane>
</a-tabs>
@ -51,17 +51,15 @@
</template>
<script>
import { getNormalizedOsName } from '@/utils/icons'
import TemplateIsoRadioGroup from '@views/compute/wizard/TemplateIsoRadioGroup'
import store from '@/store'
export default {
name: 'TemplateIsoSelection',
components: { TemplateIsoRadioGroup },
props: {
items: {
type: Array,
default: () => []
type: Object,
default: () => {}
},
inputDecorator: {
type: String,
@ -83,11 +81,7 @@ export default {
data () {
return {
filter: '',
filteredItems: this.items,
checkedValue: '',
dataSource: {},
itemCount: {},
visibleFilter: false,
filterOpts: [{
id: 'featured',
name: 'label.featured'
@ -101,25 +95,23 @@ export default {
id: 'sharedexecutable',
name: 'label.sharedexecutable'
}],
osType: '',
filterType: '',
oldInputDecorator: ''
filterType: 'featured'
}
},
watch: {
items (items) {
this.filteredItems = []
this.checkedValue = ''
if (items && items.length > 0) {
this.filteredItems = items
this.checkedValue = items[0].id
const key = this.inputDecorator.slice(0, -2)
for (const filter of this.filterOpts) {
if (items[filter.id] && items[filter.id][key] && items[filter.id][key].length > 0) {
this.filterType = filter.id
this.checkedValue = items[filter.id][key][0].id
break
}
}
this.dataSource = this.mappingDataSource()
this.filterType = Object.keys(this.dataSource)[0]
},
inputDecorator (newValue, oldValue) {
if (newValue !== oldValue) {
this.oldInputDecorator = this.inputDecorator
this.filter = ''
}
}
@ -128,107 +120,22 @@ export default {
this.form = this.$form.createForm(this)
},
methods: {
mappingDataSource () {
const mappedItems = {
featured: [],
community: [],
selfexecutable: [],
sharedexecutable: []
}
const itemCount = {
featured: 0,
community: 0,
selfexecutable: 0,
sharedexecutable: 0
}
this.filteredItems.forEach((os) => {
os.osName = getNormalizedOsName(os.ostypename)
if (os.isPublic && os.isfeatured) {
mappedItems.community.push(os)
itemCount.community = itemCount.community + 1
} else if (os.isfeatured) {
mappedItems.featured.push(os)
itemCount.featured = itemCount.featured + 1
} else {
const isSelf = !os.ispublic && (os.account === store.getters.userInfo.account)
if (isSelf) {
mappedItems.selfexecutable.push(os)
itemCount.selfexecutable = itemCount.selfexecutable + 1
} else {
mappedItems.sharedexecutable.push(os)
itemCount.sharedexecutable = itemCount.sharedexecutable + 1
}
}
})
this.itemCount = itemCount
return mappedItems
},
updateTemplateIso (name, id) {
this.checkedValue = id
this.$emit('update-template-iso', name, id)
},
filterDataSource (strQuery) {
if (strQuery !== '' && strQuery.includes('is:')) {
this.filteredItems = []
this.filter = strQuery
const filters = strQuery.split(';')
filters.forEach((filter) => {
const query = filter.replace(/ /g, '')
const data = this.filterDataSourceByTag(query)
this.filteredItems = this.filteredItems.concat(data)
})
} else if (strQuery !== '') {
this.filteredItems = this.items.filter((item) => item.displaytext.toLowerCase().includes(strQuery.toLowerCase()))
} else {
this.filteredItems = this.items
handleSearch (value) {
this.filter = value
const options = {
page: 1,
pageSize: 10,
keyword: this.filter
}
this.dataSource = this.mappingDataSource()
this.emitSearchFilter(options)
},
filterDataSourceByTag (tag) {
let arrResult = []
if (tag.includes('public')) {
arrResult = this.items.filter((item) => {
return item.ispublic && item.isfeatured
})
} else if (tag.includes('featured')) {
arrResult = this.items.filter((item) => {
return item.isfeatured
})
} else if (tag.includes('self')) {
arrResult = this.items.filter((item) => {
return !item.ispublic && (item.account === store.getters.userInfo.account)
})
} else if (tag.includes('shared')) {
arrResult = this.items.filter((item) => {
return !item.ispublic && (item.account !== store.getters.userInfo.account)
})
}
return arrResult
},
handleSubmit (e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (err) {
return
}
const filtered = values.filter || []
this.filter = ''
filtered.map(item => {
if (this.filter.length === 0) {
this.filter += 'is:' + item
} else {
this.filter += '; is:' + item
}
})
this.filterDataSource(this.filter)
})
},
onClear () {
const field = { filter: undefined }
this.form.setFieldsValue(field)
this.filter = ''
this.filterDataSource('')
emitSearchFilter (options) {
options.category = this.filterType
this.$emit('handle-search-filter', options)
},
changeFilterType (value) {
this.filterType = value