Skip to content

Commit 6d2c124

Browse files
shwstpprshwstppr
committed
fixes for isoid as queryparam
show only required elements when query params are passed Signed-off-by: Abhishek Kumar <[email protected]>
1 parent 7fc3865 commit 6d2c124

File tree

4 files changed

+155
-83
lines changed

4 files changed

+155
-83
lines changed

‎ui/src/views/compute/DeployVM.vue‎

Lines changed: 80 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -127,13 +127,15 @@
127127
<div v-if="zoneSelected" style="margin-top: 15px">
128128
<os-based-image-selection
129129
v-if="isModernImageSelection"
130-
:selectedImageType="form.imagetype"
130+
:selectedImageType="imageType"
131+
:imagePreSelected="this.queryTemplateId || this.queryIsoId"
132+
:guestOsCategoriesSelectionDisallowed="!this.queryGuestOsCategoryId && (this.queryTemplateId || this.queryIsoId)"
131133
:guestOsCategories="options.guestOsCategories"
132134
:guestOsCategoriesLoading="loading.guestOsCategories"
133135
:selectedGuestOsCategoryId="form.guestoscategoryid"
134-
:imageItems="form.imagetype === 'isoid' ? options.isos : options.templates"
135-
:imagesLoading="form.imagetype === 'isoid' ? loading.isos : loading.templates"
136-
:diskSizeSelectionAllowed="form.imagetype !== 'isoid'"
136+
:imageItems="imageType === 'isoid' ? options.isos : options.templates"
137+
:imagesLoading="imageType === 'isoid' ? loading.isos : loading.templates"
138+
:diskSizeSelectionAllowed="imageType !== 'isoid'"
137139
:diskSizeSelectionDeployAsIsMessageVisible="template && template.deployasis"
138140
:rootDiskOverrideDisabled="rootDiskSizeFixed > 0 || (template && template.deployasis) || showOverrideDiskOfferingOption"
139141
:rootDiskOverrideChecked="form.rootdisksizeitem"
@@ -150,14 +152,14 @@
150152
<a-card
151153
v-else
152154
:tabList="imageTabList"
153-
:activeTabKey="form.imagetype"
155+
:activeTabKey="imageType"
154156
@tabChange="key => changeImageType(key)">
155-
<div v-if="form.imagetype === 'templateid'">
157+
<div v-if="imageType === 'templateid'">
156158
{{ $t('message.template.desc') }}
157159
<template-iso-selection
158160
input-decorator="templateid"
159161
:items="options.templates"
160-
:selected="form.imagetype"
162+
:selected="imageType"
161163
:loading="loading.templates"
162164
:preFillContent="dataPreFill"
163165
:key="templateKey"
@@ -186,7 +188,7 @@
186188
<template-iso-selection
187189
input-decorator="isoid"
188190
:items="options.isos"
189-
:selected="form.imagetype"
191+
:selected="imageType"
190192
:loading="loading.isos"
191193
:preFillContent="dataPreFill"
192194
@handle-search-filter="filters => fetchAllIsos(filters)"
@@ -289,7 +291,7 @@
289291
<a-input v-model:value="form.memory"/>
290292
</a-form-item>
291293
</span>
292-
<span v-if="form.imagetype!=='isoid'">
294+
<span v-if="imageType!=='isoid'">
293295
{{ $t('label.override.root.diskoffering') }}
294296
<a-switch
295297
v-model:checked="showOverrideDiskOfferingOption"
@@ -298,7 +300,7 @@
298300
@change="val => { updateOverrideRootDiskShowParam(val) }"
299301
style="margin-left: 10px;"/>
300302
</span>
301-
<span v-if="form.imagetype!=='isoid' && serviceOffering && !serviceOffering.diskofferingstrictness">
303+
<span v-if="imageType!=='isoid' && serviceOffering && !serviceOffering.diskofferingstrictness">
302304
<a-step
303305
:status="zoneSelected ? 'process' : 'wait'"
304306
v-if="template && !template.deployasis && template.childtemplates && template.childtemplates.length > 0" >
@@ -325,7 +327,7 @@
325327
:value="overrideDiskOffering ? overrideDiskOffering.id : ''"
326328
:loading="loading.diskOfferings"
327329
:preFillContent="dataPreFill"
328-
:isIsoSelected="form.imagetype==='isoid'"
330+
:isIsoSelected="imageType==='isoid'"
329331
:isRootDiskOffering="true"
330332
@on-selected-root-disk-size="onSelectRootDiskSize"
331333
@select-disk-offering-item="($event) => updateOverrideDiskOffering($event)"
@@ -367,7 +369,7 @@
367369
</a-step>
368370
<a-step
369371
v-else
370-
:title="form.imagetype === 'templateid' ? $t('label.data.disk') : $t('label.disk.size')"
372+
:title="imageType === 'templateid' ? $t('label.data.disk') : $t('label.disk.size')"
371373
:status="zoneSelected ? 'process' : 'wait'">
372374
<template #description>
373375
<div v-if="zoneSelected">
@@ -378,7 +380,7 @@
378380
:value="diskOffering ? diskOffering.id : ''"
379381
:loading="loading.diskOfferings"
380382
:preFillContent="dataPreFill"
381-
:isIsoSelected="form.imagetype==='isoid'"
383+
:isIsoSelected="imageType==='isoid'"
382384
@on-selected-disk-size="onSelectDiskSize"
383385
@select-disk-offering-item="($event) => updateDiskOffering($event)"
384386
@handle-search-filter="($event) => handleSearchFilter('diskOfferings', $event)"
@@ -564,7 +566,7 @@
564566
</div>
565567
<a-form-item
566568
:label="$t('label.bootintosetup')"
567-
v-if="zoneSelected && ((form.imagetype === 'isoid' && hypervisor === 'VMware') || (form.imagetype === 'templateid' && template && template.hypervisor === 'VMware'))"
569+
v-if="zoneSelected && ((imageType === 'isoid' && hypervisor === 'VMware') || (imageType === 'templateid' && template && template.hypervisor === 'VMware'))"
568570
name="bootintosetup"
569571
ref="bootintosetup">
570572
<a-switch v-model:checked="form.bootintosetup" />
@@ -1256,7 +1258,7 @@ export default {
12561258
options: {
12571259
zoneid: _.get(this.zone, 'id'),
12581260
isfeatured: true,
1259-
isiso: _.get(this.form, 'imagetype') === 'isoid',
1261+
isiso: _.get(this, 'imageType') === 'isoid',
12601262
arch: this.selectedArchitecture
12611263
},
12621264
field: 'guestoscategoryid'
@@ -1752,6 +1754,9 @@ export default {
17521754
},
17531755
async fetchData () {
17541756
this.architectureTypes.opts = this.$fetchCpuArchitectureTypes()
1757+
if (this.queryArchId) {
1758+
this.architectureTypes.opts = this.architectureTypes.opts.filter(o => o.id === this.queryArchId)
1759+
}
17551760
const zones = await this.fetchZoneByQuery()
17561761
if (zones && zones.length === 1) {
17571762
this.selectedZone = zones[0]
@@ -1868,26 +1873,21 @@ export default {
18681873
},
18691874
updateFieldValue (name, value) {
18701875
if (name === 'templateid') {
1871-
this.form.imagetype = 'templateid'
1876+
this.imageType = 'templateid'
18721877
this.form.templateid = value
18731878
this.form.isoid = null
18741879
this.resetFromTemplateConfiguration()
18751880
let template = ''
1876-
for (const key in this.options.templates) {
1877-
var t = _.find(_.get(this.options.templates[key], 'template', []), (option) => option.id === value)
1878-
if (t) {
1879-
this.template = t
1880-
this.templateConfigurations = []
1881-
this.selectedTemplateConfiguration = {}
1882-
this.templateNics = []
1883-
this.templateLicenses = []
1884-
this.templateProperties = {}
1885-
this.updateTemplateParameters()
1886-
template = t
1881+
for (const entry of Object.values(this.options.templates)) {
1882+
template = entry?.template.find(option => option.id === value) || null
1883+
if (template) {
1884+
this.template = template
18871885
break
18881886
}
18891887
}
18901888
if (template) {
1889+
this.resetTemplateAssociatedResources()
1890+
this.updateTemplateParameters()
18911891
var size = template.size / (1024 * 1024 * 1024) || 0 // bytes to GB
18921892
this.dataPreFill.minrootdisksize = Math.ceil(size)
18931893
this.updateTemplateLinkedUserData(template.userdataid)
@@ -1906,17 +1906,23 @@ export default {
19061906
}
19071907
}
19081908
} else if (name === 'isoid') {
1909-
this.templateConfigurations = []
1910-
this.selectedTemplateConfiguration = {}
1911-
this.templateNics = []
1912-
this.templateLicenses = []
1913-
this.templateProperties = {}
1914-
this.form.imagetype = 'isoid'
1909+
this.imageType = 'isoid'
1910+
this.resetTemplateAssociatedResources()
19151911
this.resetFromTemplateConfiguration()
19161912
this.form.isoid = value
19171913
this.form.templateid = null
1918-
this.updateTemplateLinkedUserData(this.iso.userdataid)
1919-
this.userdataDefaultOverridePolicy = this.iso.userdatapolicy
1914+
let iso = null
1915+
for (const entry of Object.values(this.options.isos)) {
1916+
iso = entry?.iso.find(option => option.id === value)
1917+
if (iso) {
1918+
this.iso = iso
1919+
break
1920+
}
1921+
}
1922+
if (iso) {
1923+
this.updateTemplateLinkedUserData(this.iso.userdataid)
1924+
this.userdataDefaultOverridePolicy = this.iso.userdatapolicy
1925+
}
19201926
} else if (['cpuspeed', 'cpunumber', 'memory'].includes(name)) {
19211927
this.vm[name] = value
19221928
this.form[name] = value
@@ -2023,32 +2029,40 @@ export default {
20232029
},
20242030
fetchGuestOsCategories (skipFetchImages) {
20252031
const key = 'guestOsCategories'
2026-
const param = this.params[key]
2027-
return this.fetchOptions(param, key, ['zones'])
2032+
const params = this.params[key]
2033+
if (this.queryGuestOsCategoryId) {
2034+
params.options.id = this.queryGuestOsCategoryId
2035+
} else if (this.queryTemplateId || this.queryIsoId) {
2036+
this.fetchImages()
2037+
return Promise.resolve()
2038+
}
2039+
return this.fetchOptions(params, key, ['zones'])
20282040
.then((res) => {
20292041
if (!this.options.guestOsCategories) {
20302042
this.options.guestOsCategories = []
20312043
}
2032-
if (this.showUserCategoryForModernImageSelection) {
2033-
const userCategory = {
2034-
id: '0',
2035-
name: this.$t('label.user'),
2036-
disableimagefilters: true
2037-
}
2038-
if (this.$store.getters.avatar) {
2039-
userCategory.icon = {
2040-
base64image: this.$store.getters.avatar
2044+
if (!this.queryGuestOsCategoryId) {
2045+
if (this.showUserCategoryForModernImageSelection) {
2046+
const userCategory = {
2047+
id: '0',
2048+
name: this.$t('label.user'),
2049+
disableimagefilters: true
2050+
}
2051+
if (this.$store.getters.avatar) {
2052+
userCategory.icon = {
2053+
base64image: this.$store.getters.avatar
2054+
}
20412055
}
2056+
this.options.guestOsCategories.push(userCategory)
2057+
}
2058+
if (this.showAllCategoryForModernImageSelection) {
2059+
this.options.guestOsCategories.push({
2060+
id: '-1',
2061+
name: this.$t('label.all')
2062+
})
20422063
}
2043-
this.options.guestOsCategories.push(userCategory)
2044-
}
2045-
if (this.showAllCategoryForModernImageSelection) {
2046-
this.options.guestOsCategories.push({
2047-
id: '-1',
2048-
name: this.$t('label.all')
2049-
})
20502064
}
2051-
this.form.guestoscategoryid = this.queryGuestOsCategoryId || this.options.guestOsCategories[0].id
2065+
this.form.guestoscategoryid = this.options.guestOsCategories[0].id
20522066
if (skipFetchImages) {
20532067
return
20542068
}
@@ -2067,7 +2081,7 @@ export default {
20672081
this.fetchImages()
20682082
},
20692083
changeImageType (imageType) {
2070-
this.form.imagetype = imageType
2084+
this.imageType = imageType
20712085
if (this.isModernImageSelection) {
20722086
this.fetchGuestOsCategories()
20732087
} else {
@@ -2137,7 +2151,7 @@ export default {
21372151
deployVmData.userdata = this.$toBase64AndURIEncoded(values.userdata)
21382152
}
21392153
// step 2: select template/iso
2140-
if (this.form.imagetype === 'templateid') {
2154+
if (this.imageType === 'templateid') {
21412155
deployVmData.templateid = values.templateid
21422156
values.hypervisor = null
21432157
} else {
@@ -2565,7 +2579,7 @@ export default {
25652579
})
25662580
},
25672581
fetchImages (params) {
2568-
if (this.form.imagetype === 'isoid') {
2582+
if (this.imageType === 'isoid') {
25692583
this.fetchAllIsos(params)
25702584
return
25712585
}
@@ -2626,6 +2640,13 @@ export default {
26262640
})
26272641
this.options.templates = templates
26282642
},
2643+
resetTemplateAssociatedResources () {
2644+
this.templateConfigurations = []
2645+
this.selectedTemplateConfiguration = {}
2646+
this.templateNics = []
2647+
this.templateLicenses = []
2648+
this.templateProperties = {}
2649+
},
26292650
resetIsosList () {
26302651
const isos = {}
26312652
const isoFilters = this.getImageFilters(null, true)
@@ -2667,7 +2688,7 @@ export default {
26672688
this.zoneSelected = true
26682689
this.isZoneSelectedMultiArch = this.zone.ismultiarch
26692690
if (this.isZoneSelectedMultiArch) {
2670-
this.selectedArchitecture = this.queryArchId || this.architectureTypes.opts[0].id
2691+
this.selectedArchitecture = this.architectureTypes.opts[0].id
26712692
}
26722693
this.form.startvm = true
26732694
this.selectedZone = this.zoneId
@@ -2680,7 +2701,7 @@ export default {
26802701
this.form.isoid = undefined
26812702
this.resetTemplatesList()
26822703
this.resetIsosList()
2683-
this.form.imagetype = this.queryIsoId ? 'isoid' : 'templateid'
2704+
this.imageType = this.queryIsoId ? 'isoid' : 'templateid'
26842705
this.fetchZoneOptions()
26852706
},
26862707
onSelectPodId (value) {

‎ui/src/views/compute/wizard/OsBasedImageSelection.vue‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
<a-radio-group
2222
v-model:value="localSelectedImageType"
2323
button-style="solid"
24+
:disabled="imagePreSelected"
2425
@change="emitChangeImageType()">
2526
<a-radio-button value="templateid">{{ $t('label.template') }}</a-radio-button>
2627
<a-radio-button value="isoid">{{ $t('label.iso') }}</a-radio-button>
@@ -29,7 +30,11 @@
2930
{{ $t('message.' + localSelectedImageType.replace('id', '') + '.desc') }}
3031
</div>
3132
</a-form-item>
32-
<a-form-item :label="$t('label.os')" name="guestoscategoryid" ref="guestoscategoryid">
33+
<a-form-item
34+
:label="$t('label.os')"
35+
name="guestoscategoryid"
36+
ref="guestoscategoryid"
37+
v-if="!guestOsCategoriesSelectionDisallowed">
3338
<block-radio-group-select
3439
:maxBlocks="16"
3540
:items="guestOsCategories"
@@ -65,6 +70,7 @@
6570
</a-form-item>
6671
<a-card>
6772
<os-based-image-selection-search-view
73+
v-if="!imagePreSelected"
6874
class="search-input"
6975
:filtersDisabled="searchFiltersDisabled"
7076
@search="handleImageSearch">
@@ -141,6 +147,14 @@ export default {
141147
type: String,
142148
default: 'templateid'
143149
},
150+
imagePreSelected: {
151+
type: Boolean,
152+
default: false
153+
},
154+
guestOsCategoriesSelectionDisallowed: {
155+
type: Boolean,
156+
default: false
157+
},
144158
guestOsCategories: {
145159
type: Array,
146160
default: () => []

0 commit comments

Comments
 (0)