OS Image doesn't need to be lazy

This commit is contained in:
Vincent Fiduccia 2020-12-16 15:47:58 -07:00
parent 0d62b6d70f
commit f7521a94c0
No known key found for this signature in database
GPG Key ID: 2B29AD6BB2BB2582
2 changed files with 12 additions and 27 deletions

View File

@ -4,10 +4,9 @@ import { sortBy } from '@/utils/sort';
import { findBy } from '@/utils/array'; import { findBy } from '@/utils/array';
import { mapGetters, mapState } from 'vuex'; import { mapGetters, mapState } from 'vuex';
import Select from '@/components/form/Select'; import Select from '@/components/form/Select';
import LazyImage from '@/components/LazyImage';
export default { export default {
components: { LazyImage, Select }, components: { Select },
computed: { computed: {
...mapState(['isMultiCluster']), ...mapState(['isMultiCluster']),
@ -42,7 +41,7 @@ export default {
id: x.id, id: x.id,
label: x.nameDisplay, label: x.nameDisplay,
ready: x.isReady, ready: x.isReady,
osLogo: x.providerOSLogo, osLogo: x.providerOsLogo,
}; };
}); });
@ -71,7 +70,7 @@ export default {
> >
<template #selected-option="opt"> <template #selected-option="opt">
<span class="cluster-label-container"> <span class="cluster-label-container">
<LazyImage class="cluster-switcher-os-logo" :src="currentCluster.providerOSLogo" /> <img v-if="currentCluster" class="cluster-switcher-os-logo" :src="currentCluster.providerOsLogo" />
<span class="cluster-label"> <span class="cluster-label">
{{ opt.label }} {{ opt.label }}
</span> </span>

View File

@ -1,17 +1,6 @@
import { CATALOG } from '@/config/labels-annotations'; import { CATALOG } from '@/config/labels-annotations';
import { FLEET } from '@/config/types'; import { FLEET } from '@/config/types';
import { insertAt, findBy } from '@/utils/array'; import { insertAt } from '@/utils/array';
export const OS_LOGOS = [
{
id: 'linux',
logo: require(`~/assets/images/logo-linux.svg`)
},
{
id: 'windows',
logo: require(`~/assets/images/logo-windows.svg`)
},
];
export default { export default {
_availableActions() { _availableActions() {
@ -69,19 +58,16 @@ export default {
}; };
}, },
providerOSLogo() { providerOs() {
const providerOSOptions = OS_LOGOS; if ( this.status?.provider === 'rke.windows' ) {
const provider = this.status.provider || ''; return 'windows';
let match = findBy(providerOSOptions, 'id', 'linux');
let { logo } = match;
if (provider === 'rke.windows') {
match = findBy(providerOSOptions, 'id', 'windows');
logo = match.logo;
} }
return logo; return 'linux';
},
providerOsLogo() {
return require(`~/assets/images/logo-${ this.providerOs }.svg`);
}, },
scope() { scope() {