Skip to content

Commit 4e1f9b9

Browse files
shwstpprshwstppr
committed
make component
Signed-off-by: Abhishek Kumar <[email protected]>
1 parent 5aadb37 commit 4e1f9b9

File tree

6 files changed

+420
-294
lines changed

6 files changed

+420
-294
lines changed

‎ui/src/components/header/UserMenu.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,13 +139,18 @@ export default {
139139
},
140140
fetchResourceIcon (id) {
141141
return new Promise((resolve, reject) => {
142+
if (this.$store.getters.avatar) {
143+
this.image = this.$store.getters.avatar
144+
resolve(this.image)
145+
}
142146
api('listUsers', {
143147
id: id,
144148
showicon: true
145149
}).then(json => {
146150
const response = json.listusersresponse.user || []
147151
if (response?.[0]) {
148152
this.image = response[0]?.icon?.base64image || ''
153+
this.$store.commit('SET_AVATAR', this.image)
149154
resolve(this.image)
150155
}
151156
}).catch(error => {

‎ui/src/store/modules/user.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -386,10 +386,11 @@ const user = {
386386
}).catch(ignored => {})
387387
}
388388

389-
api('listUsers', { id: Cookies.get('userid') }).then(response => {
389+
api('listUsers', { id: Cookies.get('userid'), showicon: true }).then(response => {
390390
const result = response.listusersresponse.user[0]
391391
commit('SET_INFO', result)
392392
commit('SET_NAME', result.firstname + ' ' + result.lastname)
393+
commit('SET_AVATAR', result.icon?.base64image || '')
393394
store.dispatch('SetCsLatestVersion', result.rolename)
394395
}).catch(error => {
395396
reject(error)

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

Lines changed: 69 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -159,10 +159,14 @@
159159
<a-radio-button
160160
:value="opt.id"
161161
style="border-width: 2px"
162-
class="zone-radio-button">
162+
class="medium-block-radio-button">
163163
<span>
164164
{{ opt.name || opt.description }}
165-
</span>
165+
</span>
166+
<br>
167+
<span>
168+
{{ opt.id }}
169+
</span>
166170
</a-radio-button>
167171
</a-col>
168172
</a-radio-group>
@@ -188,117 +192,36 @@
188192
:status="zoneSelected ? 'process' : 'wait'">
189193
<template #description>
190194
<div v-if="zoneSelected" style="margin-top: 15px">
191-
<div v-if="templateview === 'new'">
192-
<a-form-item :label="$t('label.type')" name="imagetype" ref="imagetype">
193-
<a-radio-group
194-
v-model:value="form.imagetype"
195-
button-style="solid"
196-
@change="changeImageType()">
197-
<a-radio-button value="templateid">{{ $t('label.template') }}</a-radio-button>
198-
<a-radio-button value="isoid">{{ $t('label.iso') }}</a-radio-button>
199-
</a-radio-group>
200-
</a-form-item>
201-
<a-form-item :label="$t('label.os')" name="guestoscategoryid" ref="guestoscategoryid">
202-
<div v-if="options.guestOsCategories.length <= 16">
203-
<a-row type="flex" :gutter="[6, 6]" justify="start">
204-
<div v-for="(item, idx) in options.guestOsCategories" :key="idx">
205-
<a-radio-group
206-
:key="idx"
207-
v-model:value="form.guestoscategoryid"
208-
@change="onSelectGuestOsCategory(item.id)">
209-
<a-col :span="6">
210-
<a-radio-button
211-
:value="item.id"
212-
style="border-width: 2px"
213-
:class="'square-block-radio-button'">
214-
<div style="text-align: center;">
215-
<resource-icon
216-
v-if="item.icon && item.icon.base64image"
217-
class="radio-group__os-logo"
218-
:image="item.icon.base64image"
219-
size="2x"/>
220-
<os-logo
221-
v-else
222-
class="radio-group__os-logo"
223-
size="2x"
224-
:os-name="item.name" />
225-
<br>
226-
{{ item.name }}
227-
</div>
228-
</a-radio-button>
229-
</a-col>
230-
</a-radio-group>
231-
</div>
232-
</a-row>
233-
</div>
234-
<a-select
235-
v-else
236-
v-model:value="form.guestOsCategoryId"
237-
showSearch
238-
optionFilterProp="label"
239-
:filterOption="(input, option) => {
240-
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
241-
}"
242-
@change="onSelectGuestOsCategory"
243-
:loading="loading.guestOsCategories"
244-
v-focus="true"
245-
>
246-
<a-select-option v-for="item in options.guestOsCategories" :key="item.id" :label="item.name">
247-
<span>
248-
<resource-icon v-if="item.icon && item.icon.base64image" :image="item.icon.base64image" size="2x" style="margin-right: 5px"/>
249-
<os-logo v-else :os-name="item.name" style="margin-right: 5px" />
250-
{{ item.name }}
251-
</span>
252-
</a-select-option>
253-
</a-select>
254-
</a-form-item>
255-
<a-card>
256-
<new-template-iso-selection
257-
:input-decorator="form.imagetype"
258-
:items="form.imagetype === 'isoid' ? options.isos : options.templates"
259-
:loading="form.imagetype === 'isoid' ? loading.isos : loading.templates"
260-
:preFillContent="dataPreFill"
261-
@handle-search-filter="($event) => fetchImages($event)"
262-
@update-template-iso="updateFieldValue" />
263-
<div v-if="form.imagetype !== 'isoid'">
264-
<div>
265-
{{ $t('label.override.rootdisk.size') }}
266-
<a-switch
267-
v-model:checked="form.rootdisksizeitem"
268-
:disabled="rootDiskSizeFixed > 0 || template.deployasis || showOverrideDiskOfferingOption"
269-
@change="val => { showRootDiskSizeChanger = val }"
270-
style="margin-left: 10px;"/>
271-
<div v-if="template.deployasis"> {{ $t('message.deployasis') }} </div>
272-
</div>
273-
<disk-size-selection
274-
v-if="showRootDiskSizeChanger"
275-
input-decorator="rootdisksize"
276-
:preFillContent="dataPreFill"
277-
:isCustomized="true"
278-
:minDiskSize="dataPreFill.minrootdisksize"
279-
@update-disk-size="updateFieldValue"
280-
style="margin-top: 10px;"/>
281-
</div>
282-
</a-card>
283-
</div>
195+
<os-based-image-selection
196+
v-if="isModernImageSelection"
197+
:selectedImageType="form.imagetype"
198+
:guestOsCategories="options.guestOsCategories"
199+
:guestOsCategoriesLoading="loading.guestOsCategories"
200+
:selectedGuestOsCategoryId="form.guestoscategoryid"
201+
:imageItems="form.imagetype === 'isoid' ? options.isos : options.templates"
202+
:imagesLoading="form.imagetype === 'isoid' ? loading.isos : loading.templates"
203+
:diskSizeSelectionAllowed="form.imagetype !== 'isoid'"
204+
:diskSizeSelectionDeployAsIsMessageVisible="template && template.deployasis"
205+
:rootDiskOverrideDisabled="rootDiskSizeFixed > 0 || template.deployasis || showOverrideDiskOfferingOption"
206+
:rootDiskOverrideChecked="form.rootdisksizeitem"
207+
:isoHypervisor="form.hypervisor"
208+
:isoHypervisorItems="hypervisorSelectOptions"
209+
:filterOption="filterOption"
210+
:preFillContent="dataPreFill"
211+
@change-image-type="changeImageType"
212+
@change-guest-os-category="onSelectGuestOsCategory"
213+
@handle-image-search-filter="($event) => fetchImages($event)"
214+
@update-image="updateFieldValue"
215+
@update-disk-size="updateFieldValue"
216+
@change-iso-hypervisor="value => hypervisor = value" />
284217
<a-card
285218
v-else
286219
:tabList="tabList"
287220
:activeTabKey="form.imagetype"
288221
@tabChange="key => changeImageType(key)">
289222
<div v-if="form.imagetype === 'templateid'">
290223
{{ $t('message.template.desc') }}
291-
<new-template-iso-selection
292-
v-if="templateview === 'new'"
293-
input-decorator="templateid"
294-
:items="options.templates"
295-
:selected="form.imagetype"
296-
:loading="loading.templates"
297-
:preFillContent="dataPreFill"
298-
@handle-search-filter="($event) => fetchAllTemplates($event)"
299-
@update-template-iso="updateFieldValue" />
300224
<template-iso-selection
301-
v-else
302225
input-decorator="templateid"
303226
:items="options.templates"
304227
:selected="form.imagetype"
@@ -327,29 +250,7 @@
327250
</div>
328251
<div v-else>
329252
{{ $t('message.iso.desc') }}
330-
<div v-if="isZoneSelectedMultiArch" style="width: 100%; margin-top: 5px">
331-
{{ $t('message.iso.arch') }}
332-
<a-select
333-
style="width: 100%"
334-
v-model:value="selectedArchitecture"
335-
:defaultValue="architectureTypes.opts[0].id"
336-
@change="arch => changeArchitecture(arch)">
337-
<a-select-option v-for="opt in architectureTypes.opts" :key="opt.id">
338-
{{ opt.name || opt.description }}
339-
</a-select-option>
340-
</a-select>
341-
</div>
342-
<new-template-iso-selection
343-
v-if="templateview === 'new'"
344-
input-decorator="isoid"
345-
:items="options.isos"
346-
:selected="form.imagetype"
347-
:loading="loading.isos"
348-
:preFillContent="dataPreFill"
349-
@handle-search-filter="($event) => fetchAllIsos($event)"
350-
@update-template-iso="updateFieldValue" />
351253
<template-iso-selection
352-
v-else
353254
input-decorator="isoid"
354255
:items="options.isos"
355256
:selected="form.imagetype"
@@ -1035,7 +936,8 @@ import ComputeSelection from '@views/compute/wizard/ComputeSelection'
1035936
import DiskOfferingSelection from '@views/compute/wizard/DiskOfferingSelection'
1036937
import DiskSizeSelection from '@views/compute/wizard/DiskSizeSelection'
1037938
import MultiDiskSelection from '@views/compute/wizard/MultiDiskSelection'
1038-
import NewTemplateIsoSelection from '@views/compute/wizard/NewTemplateIsoSelection'
939+
import TemplateIsoSelection from '@views/compute/wizard/TemplateIsoSelection'
940+
import OsBasedImageSelection from '@views/compute/wizard/OsBasedImageSelection'
1039941
import AffinityGroupSelection from '@views/compute/wizard/AffinityGroupSelection'
1040942
import NetworkSelection from '@views/compute/wizard/NetworkSelection'
1041943
import NetworkConfiguration from '@views/compute/wizard/NetworkConfiguration'
@@ -1044,7 +946,6 @@ import UserDataSelection from '@views/compute/wizard/UserDataSelection'
1044946
import SecurityGroupSelection from '@views/compute/wizard/SecurityGroupSelection'
1045947
import TooltipLabel from '@/components/widgets/TooltipLabel'
1046948
import InstanceNicsNetworkSelectListView from '@/components/view/InstanceNicsNetworkSelectListView.vue'
1047-
import OsLogo from '@/components/widgets/OsLogo'
1048949
1049950
export default {
1050951
name: 'Wizard',
@@ -1055,7 +956,8 @@ export default {
1055956
NetworkConfiguration,
1056957
NetworkSelection,
1057958
AffinityGroupSelection,
1058-
NewTemplateIsoSelection,
959+
TemplateIsoSelection,
960+
OsBasedImageSelection,
1059961
DiskSizeSelection,
1060962
MultiDiskSelection,
1061963
DiskOfferingSelection,
@@ -1065,8 +967,7 @@ export default {
1065967
SecurityGroupSelection,
1066968
ResourceIcon,
1067969
TooltipLabel,
1068-
InstanceNicsNetworkSelectListView,
1069-
OsLogo
970+
InstanceNicsNetworkSelectListView
1070971
},
1071972
props: {
1072973
visible: {
@@ -1253,10 +1154,10 @@ export default {
12531154
opts: [
12541155
{
12551156
id: 'x86_64',
1256-
description: 'AMD 64 bits (x86_64)'
1157+
description: 'AMD 64 bits'
12571158
}, {
12581159
id: 'aarch64',
1259-
description: 'ARM 64 bits (aarch64)'
1160+
description: 'ARM 64 bits'
12601161
}
12611162
]
12621163
}
@@ -1602,6 +1503,15 @@ export default {
16021503
},
16031504
isCustomizedIOPS () {
16041505
return this.rootDiskSelected?.iscustomizediops || this.serviceOffering?.iscustomizediops || false
1506+
},
1507+
isModernImageSelection () {
1508+
return this.$config.imageSelectionInterface === undefined || this.$config.imageSelectionInterface === 'modern'
1509+
},
1510+
showUserCategoryForModernImageSelection () {
1511+
return this.$config.showUserCategoryForModernImageSelection === undefined || this.$config.showUserCategoryForModernImageSelection
1512+
},
1513+
showAllCategoryForModernImageSelection () {
1514+
return this.$config.showAllCategoryForModernImageSelection
16051515
}
16061516
},
16071517
watch: {
@@ -2169,10 +2079,24 @@ export default {
21692079
if (!this.options.guestOsCategories) {
21702080
this.options.guestOsCategories = []
21712081
}
2172-
this.options.guestOsCategories.push({
2173-
id: 0,
2174-
name: this.$t('label.all')
2175-
})
2082+
if (this.showUserCategoryForModernImageSelection) {
2083+
const userCategory = {
2084+
id: 0,
2085+
name: this.$t('label.user')
2086+
}
2087+
if (this.$store.getters.avatar) {
2088+
userCategory.icon = {
2089+
base64image: this.$store.getters.avatar
2090+
}
2091+
}
2092+
this.options.guestOsCategories.push(userCategory)
2093+
}
2094+
if (this.showAllCategoryForModernImageSelection) {
2095+
this.options.guestOsCategories.push({
2096+
id: -1,
2097+
name: this.$t('label.all')
2098+
})
2099+
}
21762100
this.form.guestoscategoryid = this.options.guestOsCategories[0].id
21772101
if (skipFetchImages) {
21782102
return
@@ -2185,7 +2109,7 @@ export default {
21852109
},
21862110
changeArchitecture (arch) {
21872111
this.selectedArchitecture = arch
2188-
if (this.templateview === 'new') {
2112+
if (this.isModernImageSelection) {
21892113
this.fetchGuestOsCategories()
21902114
return
21912115
}
@@ -2196,10 +2120,10 @@ export default {
21962120
}
21972121
},
21982122
changeImageType (imageType) {
2199-
if (this.templateview === 'new') {
2123+
this.form.imagetype = imageType
2124+
if (this.isModernImageSelection) {
22002125
this.fetchGuestOsCategories()
22012126
} else {
2202-
this.form.imagetype = imageType
22032127
this.fetchImages()
22042128
}
22052129
},
@@ -2755,14 +2679,14 @@ export default {
27552679
}
27562680
const shouldLoad = !('isLoad' in param) || param.isLoad
27572681
if (!shouldLoad) continue
2758-
if (this.templateview === 'new' && name === 'guestOsCategories') {
2682+
if (this.isModernImageSelection && name === 'guestOsCategories') {
27592683
guestOsFetch = this.fetchGuestOsCategories(true)
27602684
} else {
27612685
this.fetchOptions(param, name, ['zones'])
27622686
}
27632687
}
27642688
2765-
if (this.templateview === 'new' && guestOsFetch) {
2689+
if (this.isModernImageSelection && guestOsFetch) {
27662690
await guestOsFetch
27672691
}
27682692
this.fetchImages()
@@ -3160,21 +3084,9 @@ export default {
31603084
align-items: center;
31613085
}
31623086
3163-
.square-block-radio-button {
3164-
width: 88px;
3165-
height: 88px;
3166-
display: flex;
3167-
align-items: center;
3168-
text-align: center;
3169-
}
3170-
3171-
.square-block-radio-button span {
3172-
width: 100%;
3173-
}
3174-
3175-
.small-block-radio-button {
3087+
.medium-block-radio-button {
31763088
width:100%;
3177-
min-width: 80px;
3089+
min-width: 160px;
31783090
height: 60px;
31793091
display: flex;
31803092
padding-left: 20px;

0 commit comments

Comments
 (0)