Skip to content

Commit e3e8ea3

Browse files
shwstpprshwstppr
committed
fix icons
VM will show resource icon as VM's own > Template/ISO icon > OS Category icon Template/ISO will show resource icon as Own icon > OS Category icon Gues OS will show OS Category icon Signed-off-by: Abhishek Kumar <[email protected]>
1 parent fceb522 commit e3e8ea3

File tree

3 files changed

+59
-58
lines changed

3 files changed

+59
-58
lines changed

‎ui/src/components/view/ImageDeployInstanceButton.vue‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -53,15 +53,18 @@ export default {
5353
resource: {
5454
type: Object,
5555
required: true
56+
},
57+
osCategoryId: {
58+
type: String,
59+
default: null
5660
}
5761
},
5862
emits: ['update-zones'],
5963
data () {
6064
return {
6165
imageApi: 'listTemplates',
6266
loading: false,
63-
zones: [],
64-
osCategoryId: null
67+
zones: []
6568
}
6669
},
6770
mounted () {
@@ -84,7 +87,6 @@ export default {
8487
},
8588
fetchData () {
8689
this.fetchResourceData()
87-
this.fetchOsCategoryIdIfNeeded()
8890
},
8991
fetchResourceData () {
9092
const params = {}
@@ -129,19 +131,6 @@ export default {
129131
}
130132
})
131133
},
132-
fetchOsCategoryIdIfNeeded () {
133-
const needed = this.allowed &&
134-
'listOsTypes' in this.$store.getters.apis &&
135-
!!this.resource && !!this.resource.ostypeid &&
136-
(this.$config.imageSelectionInterface === undefined ||
137-
this.$config.imageSelectionInterface === 'modern')
138-
if (!needed) {
139-
return
140-
}
141-
api('listOsTypes', { id: this.resource.ostypeid }).then(json => {
142-
this.osCategoryId = json?.listostypesresponse?.ostype?.[0]?.oscategoryid || null
143-
})
144-
},
145134
handleDeployInstanceMenu (e) {
146135
const query = { zoneid: e.key }
147136
query[this.$route.meta.name + 'id'] = this.resource.id

‎ui/src/components/view/InfoCard.vue‎

Lines changed: 46 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -158,11 +158,16 @@
158158
<div class="resource-detail-item" v-if="resource.ostypename && resource.ostypeid">
159159
<div class="resource-detail-item__label">{{ $t('label.ostypename') }}</div>
160160
<div class="resource-detail-item__details">
161-
<span v-if="resource.icon && resource.icon.base64image || images.template || images.iso">
162-
<resource-icon :image="getImage(images.template || images.iso)" size="1x" style="margin-right: 5px"/>
161+
<span v-if="images.guestoscategory">
162+
<resource-icon :image="images.guestoscategory" size="1x" style="margin-right: 5px"/>
163163
</span>
164164
<os-logo v-else :osId="resource.ostypeid" :osName="resource.ostypename" size="lg" style="margin-left: -1px" />
165-
<span style="margin-left: 8px">{{ resource.ostypename }}</span>
165+
<span style="margin-left: 8px">
166+
<router-link v-if="$router.resolve('/guestos/' + resource.ostypeid).matched[0].redirect !== '/exception/404'" :to="{ path: '/guestos/' + resource.ostypeid }">
167+
{{ resource.ostypename }}
168+
</router-link>
169+
<span v-else>{{ resource.ostypename }}</span>
170+
</span>
166171
</div>
167172
</div>
168173
<div class="resource-detail-item" v-if="resource.ipaddress">
@@ -449,7 +454,7 @@
449454
<div class="resource-detail-item__label">{{ $t('label.project') }}</div>
450455
<div class="resource-detail-item__details">
451456
<span v-if="images.project">
452-
<resource-icon :image="getImage(images.project)" size="1x" style="margin-right: 5px"/>
457+
<resource-icon :image="images.project" size="1x" style="margin-right: 5px"/>
453458
</span>
454459
<project-outlined v-else />
455460
<router-link v-if="!isStatic && resource.projectid" :to="{ path: '/project/' + resource.projectid }">{{ resource.project || resource.projectname || resource.projectid }}</router-link>
@@ -546,7 +551,7 @@
546551
<div class="resource-detail-item__label">{{ $t('label.vpcname') }}</div>
547552
<div class="resource-detail-item__details">
548553
<span v-if="images.vpc">
549-
<resource-icon :image="getImage(images.vpc)" size="1x" style="margin-right: 5px"/>
554+
<resource-icon :image="images.vpc" size="1x" style="margin-right: 5px"/>
550555
</span>
551556
<deployment-unit-outlined v-else />
552557
<router-link :to="{ path: '/vpc/' + resource.vpcid }">{{ resource.vpcname || resource.vpcid }}</router-link>
@@ -557,7 +562,7 @@
557562
<div class="resource-detail-item__label">{{ $t('label.aclid') }}</div>
558563
<div class="resource-detail-item__details">
559564
<span v-if="images.acl">
560-
<resource-icon :image="getImage(images.acl)" size="1x" style="margin-right: 5px"/>
565+
<resource-icon :image="images.acl" size="1x" style="margin-right: 5px"/>
561566
</span>
562567
<deployment-unit-outlined v-else />
563568
<router-link :to="{ path: '/acllist/' + resource.aclid }">{{ resource.aclname || resource.aclid }}</router-link>
@@ -578,15 +583,15 @@
578583
<div class="resource-detail-item" v-if="resource.templateid">
579584
<div class="resource-detail-item__label">{{ resource.templateformat === 'ISO'? $t('label.iso') : $t('label.templatename') }}</div>
580585
<div class="resource-detail-item__details">
581-
<resource-icon v-if="resource.icon" :image="getImage(resource.icon.base64image)" size="1x" style="margin-right: 5px"/>
586+
<resource-icon v-if="images.template || images.guestoscategory" :image="images.template || images.guestoscategory" size="1x" style="margin-right: 5px"/>
582587
<SaveOutlined v-else />
583588
<router-link :to="{ path: (resource.templateformat === 'ISO' ? '/iso/' : '/template/') + resource.templateid }">{{ resource.templatedisplaytext || resource.templatename || resource.templateid }} </router-link>
584589
</div>
585590
</div>
586591
<div class="resource-detail-item" v-if="resource.isoid">
587592
<div class="resource-detail-item__label">{{ $t('label.isoname') }}</div>
588593
<div class="resource-detail-item__details">
589-
<resource-icon v-if="resource.icon" :image="getImage(resource.icon.base64image)" size="1x" style="margin-right: 5px"/>
594+
<resource-icon v-if="images.iso || (resource.isoid === resource.templateid && images.guestoscategory)" :image="images.iso || images.guestoscategory" size="1x" style="margin-right: 5px"/>
590595
<UsbOutlined v-else />
591596
<router-link :to="{ path: '/iso/' + resource.isoid }">{{ resource.isodisplaytext || resource.isoname || resource.isoid }} </router-link>
592597
</div>
@@ -677,7 +682,7 @@
677682
<div class="resource-detail-item__label">{{ $t('label.zone') }}</div>
678683
<div class="resource-detail-item__details">
679684
<span v-if="images.zone">
680-
<resource-icon :image="getImage(images.zone)" size="1x" style="margin-right: 5px"/>
685+
<resource-icon :image="images.zone" size="1x" style="margin-right: 5px"/>
681686
</span>
682687
<global-outlined v-else />
683688
<router-link v-if="!isStatic && $router.resolve('/zone/' + resource.zoneid).matched[0].redirect !== '/exception/404'" :to="{ path: '/zone/' + resource.zoneid }">{{ resource.zone || resource.zonename || resource.zoneid }}</router-link>
@@ -712,7 +717,7 @@
712717
<div class="resource-detail-item__label">{{ $t('label.account') }}</div>
713718
<div class="resource-detail-item__details">
714719
<span v-if="images.account">
715-
<resource-icon :image="getImage(images.account)" size="1x" style="margin-right: 5px"/>
720+
<resource-icon :image="images.account" size="1x" style="margin-right: 5px"/>
716721
</span>
717722
<user-outlined v-else />
718723
<router-link v-if="!isStatic && $store.getters.userInfo.roletype !== 'User'" :to="{ path: '/account', query: { name: resource.account, domainid: resource.domainid } }">{{ resource.account }}</router-link>
@@ -730,7 +735,7 @@
730735
<div class="resource-detail-item" v-if="resource.domainid">
731736
<div class="resource-detail-item__label">{{ $t('label.domain') }}</div>
732737
<div class="resource-detail-item__details">
733-
<resource-icon v-if="images.domain" :image="getImage(images.domain)" size="1x" style="margin-right: 5px"/>
738+
<resource-icon v-if="images.domain" :image="images.domain" size="1x" style="margin-right: 5px"/>
734739
<block-outlined v-else />
735740
<router-link v-if="!isStatic && $store.getters.userInfo.roletype !== 'User'" :to="{ path: '/domain/' + resource.domainid, query: { tab: 'details'} }">{{ resource.domain || resource.domainid }}</router-link>
736741
<span v-else>{{ resource.domain || resource.domainid }}</span>
@@ -790,7 +795,8 @@
790795
</div>
791796
<image-deploy-instance-button
792797
v-if="'deployVirtualMachine' in $store.getters.apis && ['template', 'iso'].includes($route.meta.name)"
793-
:resource="resource" />
798+
:resource="resource"
799+
:osCategoryId="osCategoryId" />
794800
</div>
795801

796802
<div class="account-center-tags" v-if="showKeys || resource.apikeyaccess">
@@ -956,7 +962,8 @@ export default {
956962
network: ''
957963
},
958964
newResource: {},
959-
validLinks: {}
965+
validLinks: {},
966+
osCategoryId: null
960967
}
961968
},
962969
watch: {
@@ -1009,8 +1016,16 @@ export default {
10091016
}
10101017
return [this.resource.keypairs.toString()]
10111018
},
1019+
isResourceShowingParentResourceIcon () {
1020+
const resourcesShowParentResourceIcon = ['guestos']
1021+
const routeName = this.$route.path.split('/')?.[1] || null
1022+
if (!routeName) {
1023+
return false
1024+
}
1025+
return resourcesShowParentResourceIcon.includes(routeName)
1026+
},
10121027
resourceIcon () {
1013-
if (!this.$showIcon()) {
1028+
if (!this.$showIcon() && !this.isResourceShowingParentResourceIcon) {
10141029
return null
10151030
}
10161031
if (this.resource?.icon?.base64image) {
@@ -1019,7 +1034,7 @@ export default {
10191034
if (this.resource?.resourceIcon?.base64image) {
10201035
return this.resource.resourceIcon.base64image
10211036
}
1022-
return this.images.template || this.images.iso || null
1037+
return this.images.template || this.images.iso || this.images.guestoscategory || null
10231038
},
10241039
routeFromResourceType () {
10251040
return this.$getRouteFromResourceType(this.resource.resourcetype)
@@ -1040,6 +1055,15 @@ export default {
10401055
this.getTags()
10411056
}
10421057
}
1058+
const osId = this.resource.guestosid || this.resource.ostypeid
1059+
if (osId && 'listOsTypes' in this.$store.getters.apis) {
1060+
api('listOsTypes', { id: osId }).then(json => {
1061+
this.osCategoryId = json?.listostypesresponse?.ostype?.[0]?.oscategoryid || null
1062+
if (this.osCategoryId) {
1063+
this.fetchResourceIcon(this.osCategoryId, 'guestoscategory')
1064+
}
1065+
})
1066+
}
10431067
this.getIcons()
10441068
},
10451069
showUploadModal (show) {
@@ -1051,20 +1075,8 @@ export default {
10511075
this.showUpload = false
10521076
}
10531077
},
1054-
getImage (image) {
1055-
return (image || this.resource?.icon?.base64image)
1056-
},
10571078
getIcons () {
1058-
this.images = {
1059-
zone: '',
1060-
template: '',
1061-
iso: '',
1062-
domain: '',
1063-
account: '',
1064-
project: '',
1065-
vpc: '',
1066-
network: ''
1067-
}
1079+
this.images = {}
10681080
if (this.resource.templateid) {
10691081
this.fetchResourceIcon(this.resource.templateid, 'template')
10701082
}
@@ -1089,6 +1101,9 @@ export default {
10891101
if (this.resource.networkid) {
10901102
this.fetchResourceIcon(this.resource.networkid, 'network')
10911103
}
1104+
if (this.resource.oscategoryid) {
1105+
this.fetchResourceIcon(this.resource.oscategoryid, 'guestoscategory')
1106+
}
10921107
},
10931108
fetchAccount () {
10941109
return new Promise((resolve, reject) => {
@@ -1112,19 +1127,14 @@ export default {
11121127
resourcetype: type
11131128
}).then(json => {
11141129
const response = json.listresourceiconresponse.icon || []
1115-
if (response?.[0]) {
1116-
this.images[type] = response[0].base64image
1117-
resolve(this.images)
1118-
} else {
1119-
this.images[type] = ''
1120-
resolve(this.images)
1121-
}
1130+
this.images[type] = response?.[0]?.base64image || null
1131+
resolve(this.images)
11221132
}).catch(error => {
11231133
reject(error)
11241134
})
11251135
})
11261136
} else {
1127-
this.images.type = ''
1137+
this.images.type = null
11281138
}
11291139
},
11301140
setData () {

‎ui/src/components/view/ResourceIcon.vue‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
// under the License.
1717

1818
<template>
19-
<img :src="getImg()" :height="getDimensions()" :width="getDimensions()" :style="{ marginTop: (getDimensions() === 56 || ['deployVirtualMachine'].includes($route.path.split('/')[2])) ? '' : '-5px' }"/>
19+
<img :src="computedImage" :height="dimensions" :width="dimensions" :style="{ marginTop: (dimensions === 56 || ['deployVirtualMachine'].includes($route.path.split('/')[2])) ? '' : '-5px' }"/>
2020
</template>
2121
<script>
2222
export default {
@@ -34,15 +34,17 @@ export default {
3434
data () {
3535
return {}
3636
},
37-
methods: {
38-
getImg () {
37+
computed: {
38+
computedImage () {
39+
if (!this.image) {
40+
return null
41+
}
3942
if (this.image.startsWith('data:image/png')) {
4043
return this.image
41-
} else {
42-
return 'data:image/png;charset=utf-8;base64, ' + this.image
4344
}
45+
return 'data:image/png;charset=utf-8;base64, ' + this.image
4446
},
45-
getDimensions () {
47+
dimensions () {
4648
const num = Number(this.size)
4749
if (Number.isInteger(num) && num > 0) {
4850
return num

0 commit comments

Comments
 (0)