Skip to content

Commit 4bd0b1c

Browse files
shwstpprshwstppr
authored
ui: refactor global createmenu (#9139)
Refactors global create menu code to make it visible only when any menu is accessible. Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
1 parent 7aacbcb commit 4bd0b1c

File tree

1 file changed

+60
-121
lines changed

1 file changed

+60
-121
lines changed

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

Lines changed: 60 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -16,138 +16,25 @@
1616
// under the License.
1717

1818
<template>
19-
<a-dropdown>
19+
<a-dropdown v-if="accessibleCreateActions && accessibleCreateActions.length > 0">
2020
<template #overlay>
2121
<a-menu>
22-
<a-menu-item style="width: 100%; padding: 12px" v-if="'deployVirtualMachine' in $store.getters.apis">
23-
<router-link :to="{ path: '/action/deployVirtualMachine'}">
22+
<a-menu-item style="width: 100%; padding: 12px" v-for="menuItem in accessibleCreateActions" :key="menuItem.api">
23+
<router-link :to="menuItem.route">
2424
<a-row>
2525
<a-col style="margin-right: 12px">
2626
<a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
2727
<template #icon>
28-
<cloud-server-outlined/>
28+
<render-icon v-if="(typeof menuItem.icon === 'string')" :icon="menuItem.icon" />
29+
<font-awesome-icon v-else :icon="menuItem.icon" />
2930
</template>
3031
</a-avatar>
3132
</a-col>
3233
<a-col>
3334
<h3 style="margin-bottom: 0px;">
34-
{{ $t('label.instance') }}
35+
{{ menuItem.title }}
3536
</h3>
36-
<small>{{ $t('label.create.instance') }}</small>
37-
</a-col>
38-
</a-row>
39-
</router-link>
40-
</a-menu-item>
41-
<a-menu-item style="width: 100%; padding: 12px" v-if="'createKubernetesCluster' in $store.getters.apis">
42-
<router-link :to="{ path: '/kubernetes', query: { action: 'createKubernetesCluster' } }">
43-
<a-row>
44-
<a-col style="margin-right: 12px">
45-
<a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
46-
<template #icon>
47-
<font-awesome-icon :icon="['fa-solid', 'fa-dharmachakra']" />
48-
</template>
49-
</a-avatar>
50-
</a-col>
51-
<a-col>
52-
<h3 style="margin-bottom: 0px;">
53-
{{ $t('label.kubernetes') }}
54-
</h3>
55-
<small>{{ $t('label.kubernetes.cluster.create') }}</small>
56-
</a-col>
57-
</a-row>
58-
</router-link>
59-
</a-menu-item>
60-
<a-menu-item style="width: 100%; padding: 12px" v-if="'createVolume' in $store.getters.apis">
61-
<router-link :to="{ path: '/volume', query: { action: 'createVolume' } }">
62-
<a-row>
63-
<a-col style="margin-right: 12px">
64-
<a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
65-
<template #icon>
66-
<hdd-outlined />
67-
</template>
68-
</a-avatar>
69-
</a-col>
70-
<a-col>
71-
<h3 style="margin-bottom: 0px;">
72-
{{ $t('label.volume') }}
73-
</h3>
74-
<small>{{ $t('label.action.create.volume') }}</small>
75-
</a-col>
76-
</a-row>
77-
</router-link>
78-
</a-menu-item>
79-
<a-menu-item style="width: 100%; padding: 12px" v-if="'createNetwork' in $store.getters.apis">
80-
<router-link :to="{ path: '/guestnetwork', query: { action: 'createNetwork' } }">
81-
<a-row>
82-
<a-col style="margin-right: 12px">
83-
<a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
84-
<template #icon>
85-
<apartment-outlined />
86-
</template>
87-
</a-avatar>
88-
</a-col>
89-
<a-col>
90-
<h3 style="margin-bottom: 0px;">
91-
{{ $t('label.network') }}
92-
</h3>
93-
<small>{{ $t('label.add.network') }}</small>
94-
</a-col>
95-
</a-row>
96-
</router-link>
97-
</a-menu-item>
98-
<a-menu-item style="width: 100%; padding: 12px" v-if="'createVPC' in $store.getters.apis">
99-
<router-link :to="{ path: '/vpc', query: { action: 'createVPC' } }">
100-
<a-row>
101-
<a-col style="margin-right: 12px">
102-
<a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
103-
<template #icon>
104-
<deployment-unit-outlined />
105-
</template>
106-
</a-avatar>
107-
</a-col>
108-
<a-col>
109-
<h3 style="margin-bottom: 0px;">
110-
{{ $t('label.vpc') }}
111-
</h3>
112-
<small>{{ $t('label.add.vpc') }}</small>
113-
</a-col>
114-
</a-row>
115-
</router-link>
116-
</a-menu-item>
117-
<a-menu-item style="width: 100%; padding: 12px" v-if="'registerTemplate' in $store.getters.apis">
118-
<router-link :to="{ path: '/template', query: { action: 'registerTemplate' } }">
119-
<a-row>
120-
<a-col style="margin-right: 12px">
121-
<a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
122-
<template #icon>
123-
<picture-outlined />
124-
</template>
125-
</a-avatar>
126-
</a-col>
127-
<a-col>
128-
<h3 style="margin-bottom: 0px;">
129-
{{ $t('label.templatename') }}
130-
</h3>
131-
<small>{{ $t('label.action.register.template') }}</small>
132-
</a-col>
133-
</a-row>
134-
</router-link>
135-
</a-menu-item>
136-
<a-menu-item style="width: 100%; padding: 12px" v-if="'deployVnfAppliance' in $store.getters.apis">
137-
<router-link :to="{ path: '/action/deployVnfAppliance'}">
138-
<a-row>
139-
<a-col style="margin-right: 12px">
140-
<a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
141-
<template #icon>
142-
<font-awesome-icon :icon="['fa-solid', 'fa-dharmachakra']" />
143-
</template>
144-
</a-avatar>
145-
</a-col>
146-
<a-col>
147-
<h3 style="margin-bottom: 0px;">
148-
{{ $t('label.vnf.appliance') }}
149-
</h3>
150-
<small>{{ $t('label.vnf.appliance.add') }}</small>
37+
<small>{{ menuItem.subtitle }}</small>
15138
</a-col>
15239
</a-row>
15340
</router-link>
@@ -165,7 +52,59 @@
16552
16653
export default {
16754
name: 'CreateMenu',
168-
components: {
55+
beforeCreate () {
56+
const menuItems = [
57+
{
58+
api: 'deployVirtualMachine',
59+
title: this.$t('label.instance'),
60+
subtitle: this.$t('label.create.instance'),
61+
icon: 'cloud-server-outlined',
62+
route: { path: '/action/deployVirtualMachine' }
63+
},
64+
{
65+
api: 'createKubernetesCluster',
66+
title: this.$t('label.kubernetes'),
67+
subtitle: this.$t('label.kubernetes.cluster.create'),
68+
icon: ['fa-solid', 'fa-dharmachakra'],
69+
route: { path: '/kubernetes', query: { action: 'createKubernetesCluster' } }
70+
},
71+
{
72+
api: 'createVolume',
73+
title: this.$t('label.volume'),
74+
subtitle: this.$t('label.action.create.volume'),
75+
icon: 'hdd-outlined',
76+
route: { path: '/volume', query: { action: 'createVolume' } }
77+
},
78+
{
79+
api: 'createNetwork',
80+
title: this.$t('label.network'),
81+
subtitle: this.$t('label.add.network'),
82+
icon: 'apartment-outlined',
83+
route: { path: '/guestnetwork', query: { action: 'createNetwork' } }
84+
},
85+
{
86+
api: 'createVPC',
87+
title: this.$t('label.vpc'),
88+
subtitle: this.$t('label.add.vpc'),
89+
icon: 'deployment-unit-outlined',
90+
route: { path: '/vpc', query: { action: 'createVPC' } }
91+
},
92+
{
93+
api: 'registerTemplate',
94+
title: this.$t('label.templatename'),
95+
subtitle: this.$t('label.action.register.template'),
96+
icon: 'picture-outlined',
97+
route: { path: '/template', query: { action: 'registerTemplate' } }
98+
},
99+
{
100+
api: 'deployVnfAppliance',
101+
title: this.$t('label.vnf.appliance'),
102+
subtitle: this.$t('label.vnf.appliance.add'),
103+
icon: 'gateway-outlined',
104+
route: { path: '/action/deployVnfAppliance' }
105+
}
106+
]
107+
this.accessibleCreateActions = menuItems.filter(m => m.api in this.$store.getters.apis)
169108
}
170109
}
171110
</script>

0 commit comments

Comments
 (0)