mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
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>
This commit is contained in:
Abhishek Kumar
GitHub
parent
7aacbcb559
commit
4bd0b1c24f
@ -16,138 +16,25 @@
|
||||
// under the License.
|
||||
|
||||
<template>
|
||||
<a-dropdown>
|
||||
<a-dropdown v-if="accessibleCreateActions && accessibleCreateActions.length > 0">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item style="width: 100%; padding: 12px" v-if="'deployVirtualMachine' in $store.getters.apis">
|
||||
<router-link :to="{ path: '/action/deployVirtualMachine'}">
|
||||
<a-menu-item style="width: 100%; padding: 12px" v-for="menuItem in accessibleCreateActions" :key="menuItem.api">
|
||||
<router-link :to="menuItem.route">
|
||||
<a-row>
|
||||
<a-col style="margin-right: 12px">
|
||||
<a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
|
||||
<template #icon>
|
||||
<cloud-server-outlined/>
|
||||
<render-icon v-if="(typeof menuItem.icon === 'string')" :icon="menuItem.icon" />
|
||||
<font-awesome-icon v-else :icon="menuItem.icon" />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<h3 style="margin-bottom: 0px;">
|
||||
{{ $t('label.instance') }}
|
||||
{{ menuItem.title }}
|
||||
</h3>
|
||||
<small>{{ $t('label.create.instance') }}</small>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item style="width: 100%; padding: 12px" v-if="'createKubernetesCluster' in $store.getters.apis">
|
||||
<router-link :to="{ path: '/kubernetes', query: { action: 'createKubernetesCluster' } }">
|
||||
<a-row>
|
||||
<a-col style="margin-right: 12px">
|
||||
<a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
|
||||
<template #icon>
|
||||
<font-awesome-icon :icon="['fa-solid', 'fa-dharmachakra']" />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<h3 style="margin-bottom: 0px;">
|
||||
{{ $t('label.kubernetes') }}
|
||||
</h3>
|
||||
<small>{{ $t('label.kubernetes.cluster.create') }}</small>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item style="width: 100%; padding: 12px" v-if="'createVolume' in $store.getters.apis">
|
||||
<router-link :to="{ path: '/volume', query: { action: 'createVolume' } }">
|
||||
<a-row>
|
||||
<a-col style="margin-right: 12px">
|
||||
<a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
|
||||
<template #icon>
|
||||
<hdd-outlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<h3 style="margin-bottom: 0px;">
|
||||
{{ $t('label.volume') }}
|
||||
</h3>
|
||||
<small>{{ $t('label.action.create.volume') }}</small>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item style="width: 100%; padding: 12px" v-if="'createNetwork' in $store.getters.apis">
|
||||
<router-link :to="{ path: '/guestnetwork', query: { action: 'createNetwork' } }">
|
||||
<a-row>
|
||||
<a-col style="margin-right: 12px">
|
||||
<a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
|
||||
<template #icon>
|
||||
<apartment-outlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<h3 style="margin-bottom: 0px;">
|
||||
{{ $t('label.network') }}
|
||||
</h3>
|
||||
<small>{{ $t('label.add.network') }}</small>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item style="width: 100%; padding: 12px" v-if="'createVPC' in $store.getters.apis">
|
||||
<router-link :to="{ path: '/vpc', query: { action: 'createVPC' } }">
|
||||
<a-row>
|
||||
<a-col style="margin-right: 12px">
|
||||
<a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
|
||||
<template #icon>
|
||||
<deployment-unit-outlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<h3 style="margin-bottom: 0px;">
|
||||
{{ $t('label.vpc') }}
|
||||
</h3>
|
||||
<small>{{ $t('label.add.vpc') }}</small>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item style="width: 100%; padding: 12px" v-if="'registerTemplate' in $store.getters.apis">
|
||||
<router-link :to="{ path: '/template', query: { action: 'registerTemplate' } }">
|
||||
<a-row>
|
||||
<a-col style="margin-right: 12px">
|
||||
<a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
|
||||
<template #icon>
|
||||
<picture-outlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<h3 style="margin-bottom: 0px;">
|
||||
{{ $t('label.templatename') }}
|
||||
</h3>
|
||||
<small>{{ $t('label.action.register.template') }}</small>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item style="width: 100%; padding: 12px" v-if="'deployVnfAppliance' in $store.getters.apis">
|
||||
<router-link :to="{ path: '/action/deployVnfAppliance'}">
|
||||
<a-row>
|
||||
<a-col style="margin-right: 12px">
|
||||
<a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
|
||||
<template #icon>
|
||||
<font-awesome-icon :icon="['fa-solid', 'fa-dharmachakra']" />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<h3 style="margin-bottom: 0px;">
|
||||
{{ $t('label.vnf.appliance') }}
|
||||
</h3>
|
||||
<small>{{ $t('label.vnf.appliance.add') }}</small>
|
||||
<small>{{ menuItem.subtitle }}</small>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</router-link>
|
||||
@ -165,7 +52,59 @@
|
||||
|
||||
export default {
|
||||
name: 'CreateMenu',
|
||||
components: {
|
||||
beforeCreate () {
|
||||
const menuItems = [
|
||||
{
|
||||
api: 'deployVirtualMachine',
|
||||
title: this.$t('label.instance'),
|
||||
subtitle: this.$t('label.create.instance'),
|
||||
icon: 'cloud-server-outlined',
|
||||
route: { path: '/action/deployVirtualMachine' }
|
||||
},
|
||||
{
|
||||
api: 'createKubernetesCluster',
|
||||
title: this.$t('label.kubernetes'),
|
||||
subtitle: this.$t('label.kubernetes.cluster.create'),
|
||||
icon: ['fa-solid', 'fa-dharmachakra'],
|
||||
route: { path: '/kubernetes', query: { action: 'createKubernetesCluster' } }
|
||||
},
|
||||
{
|
||||
api: 'createVolume',
|
||||
title: this.$t('label.volume'),
|
||||
subtitle: this.$t('label.action.create.volume'),
|
||||
icon: 'hdd-outlined',
|
||||
route: { path: '/volume', query: { action: 'createVolume' } }
|
||||
},
|
||||
{
|
||||
api: 'createNetwork',
|
||||
title: this.$t('label.network'),
|
||||
subtitle: this.$t('label.add.network'),
|
||||
icon: 'apartment-outlined',
|
||||
route: { path: '/guestnetwork', query: { action: 'createNetwork' } }
|
||||
},
|
||||
{
|
||||
api: 'createVPC',
|
||||
title: this.$t('label.vpc'),
|
||||
subtitle: this.$t('label.add.vpc'),
|
||||
icon: 'deployment-unit-outlined',
|
||||
route: { path: '/vpc', query: { action: 'createVPC' } }
|
||||
},
|
||||
{
|
||||
api: 'registerTemplate',
|
||||
title: this.$t('label.templatename'),
|
||||
subtitle: this.$t('label.action.register.template'),
|
||||
icon: 'picture-outlined',
|
||||
route: { path: '/template', query: { action: 'registerTemplate' } }
|
||||
},
|
||||
{
|
||||
api: 'deployVnfAppliance',
|
||||
title: this.$t('label.vnf.appliance'),
|
||||
subtitle: this.$t('label.vnf.appliance.add'),
|
||||
icon: 'gateway-outlined',
|
||||
route: { path: '/action/deployVnfAppliance' }
|
||||
}
|
||||
]
|
||||
this.accessibleCreateActions = menuItems.filter(m => m.api in this.$store.getters.apis)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user