mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
ui: show deploy/create button on right info pane (#10814)
* add deploy button on info card Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> * info height Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> * fix Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> * hide cancel button Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com> --------- Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
This commit is contained in:
Abhishek Kumar
GitHub
parent
10fc1f3a1c
commit
0b841fefcb
@ -14,10 +14,11 @@
|
||||
// KIND, either express or implied. See the License for the
|
||||
// specific language governing permissions and limitations
|
||||
// under the License.
|
||||
// $message.success(`${$t('label.copied.clipboard')} : ${name}`)
|
||||
<template>
|
||||
<a-spin :spinning="loading">
|
||||
<a-card class="spin-content" :bordered="bordered" :title="title">
|
||||
<div class="card-body">
|
||||
<div class="card-content">
|
||||
<div>
|
||||
<div class="resource-details">
|
||||
<div class="resource-details__name">
|
||||
@ -34,7 +35,7 @@
|
||||
<resource-icon :image="getImage(resource.icon && resource.icon.base64image || images.template || images.iso || resourceIcon)" size="4x" style="margin-right: 5px"/>
|
||||
</span>
|
||||
<span v-else>
|
||||
<os-logo v-if="resource.ostypeid || resource.ostypename" :osId="resource.ostypeid" :osName="resource.ostypename" size="3x" @update-osname="setResourceOsType"/>
|
||||
<os-logo v-if="resource.ostypeid || resource.ostypename || ['guestoscategory'].includes($route.path.split('/')[1])" :osId="resource.ostypeid" :osName="resource.ostypename || resource.name" size="3x" @update-osname="setResourceOsType"/>
|
||||
<render-icon v-else-if="typeof $route.meta.icon ==='string'" style="font-size: 36px" :icon="$route.meta.icon" />
|
||||
<font-awesome-icon
|
||||
v-else-if="$route.meta.icon && Array.isArray($route.meta.icon)"
|
||||
@ -853,6 +854,11 @@
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer" v-if="footerVisible">
|
||||
<slot name="footer-content"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-spin>
|
||||
</template>
|
||||
@ -903,6 +909,10 @@ export default {
|
||||
isStatic: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
footerVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@ -1234,6 +1244,25 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.ant-card-body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
|
||||
@ -949,21 +949,27 @@
|
||||
</template>
|
||||
</a-step>
|
||||
</a-steps>
|
||||
<div class="card-footer">
|
||||
<!-- ToDo extract as component -->
|
||||
<a-button @click="() => $router.back()" :disabled="loading.deploy">
|
||||
{{ $t('label.cancel') }}
|
||||
</a-button>
|
||||
<a-button style="margin-left: 10px" type="primary" ref="submit" @click="handleSubmit" :loading="loading.deploy">
|
||||
{{ $t('label.create') }}
|
||||
</a-button>
|
||||
<div class="card-footer" v-if="isMobile()">
|
||||
<deploy-buttons
|
||||
:loading="loading.deploy"
|
||||
:deployButtonText="$t('label.create')"
|
||||
@handle-cancel="() => $router.back()"
|
||||
@handle-deploy="handleSubmit" />
|
||||
</div>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :md="24" :lg="7" v-if="!isMobile()">
|
||||
<a-affix :offsetTop="75" class="vm-info-card">
|
||||
<info-card :resource="vm" :title="$t('label.your.autoscale.vmgroup')" @change-resource="(data) => resource = data" />
|
||||
<info-card :footerVisible="true" :resource="vm" :title="$t('label.your.autoscale.vmgroup')" @change-resource="(data) => resource = data">
|
||||
<template #footer-content>
|
||||
<deploy-buttons
|
||||
:loading="loading.deploy"
|
||||
:deployButtonText="$t('label.create')"
|
||||
@handle-cancel="() => $router.back()"
|
||||
@handle-deploy="handleSubmit" />
|
||||
</template>
|
||||
</info-card>
|
||||
</a-affix>
|
||||
</a-col>
|
||||
</a-row>
|
||||
@ -1033,6 +1039,7 @@ import store from '@/store'
|
||||
import eventBus from '@/config/eventBus'
|
||||
|
||||
import InfoCard from '@/components/view/InfoCard'
|
||||
import DeployButtons from '@views/compute/wizard/DeployButtons'
|
||||
import ResourceIcon from '@/components/view/ResourceIcon'
|
||||
import ComputeOfferingSelection from '@views/compute/wizard/ComputeOfferingSelection'
|
||||
import ComputeSelection from '@views/compute/wizard/ComputeSelection'
|
||||
@ -1057,6 +1064,9 @@ const STATUS_FAILED = 'error'
|
||||
export default {
|
||||
name: 'Wizard',
|
||||
components: {
|
||||
InfoCard,
|
||||
DeployButtons,
|
||||
ResourceIcon,
|
||||
SshKeyPairSelection,
|
||||
UserDataSelection,
|
||||
NetworkConfiguration,
|
||||
@ -1067,11 +1077,9 @@ export default {
|
||||
DiskSizeSelection,
|
||||
MultiDiskSelection,
|
||||
DiskOfferingSelection,
|
||||
InfoCard,
|
||||
ComputeOfferingSelection,
|
||||
ComputeSelection,
|
||||
SecurityGroupSelection,
|
||||
ResourceIcon,
|
||||
TooltipLabel,
|
||||
InstanceNicsNetworkSelectListView
|
||||
},
|
||||
@ -3184,7 +3192,7 @@ export default {
|
||||
.vm-info-card {
|
||||
.ant-card-body {
|
||||
min-height: 250px;
|
||||
max-height: calc(100vh - 150px);
|
||||
max-height: calc(100vh - 258px);
|
||||
overflow-y: auto;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
@ -838,36 +838,31 @@
|
||||
</template>
|
||||
</a-step>
|
||||
</a-steps>
|
||||
<div class="card-footer">
|
||||
<a-form-item name="stayonpage" ref="stayonpage">
|
||||
<a-switch
|
||||
class="form-item-hidden"
|
||||
v-model:checked="form.stayonpage" />
|
||||
</a-form-item>
|
||||
<!-- ToDo extract as component -->
|
||||
<a-button @click="() => $router.back()" :disabled="loading.deploy">
|
||||
{{ $t('label.cancel') }}
|
||||
</a-button>
|
||||
<a-dropdown-button style="margin-left: 10px" type="primary" ref="submit" @click="handleSubmit" :loading="loading.deploy">
|
||||
<rocket-outlined />
|
||||
{{ this.form.startvm ? $t('label.launch.vm') : $t('label.create.vm') }}
|
||||
<template #icon><down-outlined /></template>
|
||||
<template #overlay>
|
||||
<a-menu type="primary" @click="handleSubmitAndStay" theme="dark" class="btn-stay-on-page">
|
||||
<a-menu-item type="primary" key="1">
|
||||
<rocket-outlined />
|
||||
{{ this.form.startvm ? $t('label.launch.vm.and.stay') : $t('label.create.vm.and.stay') }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown-button>
|
||||
<div class="card-footer" v-if="isMobile()">
|
||||
<deploy-buttons
|
||||
:loading="loading.deploy"
|
||||
:deployButtonText="form.startvm ? $t('label.launch.vm') : $t('label.create.vm')"
|
||||
:deployButtonMenuOptions="deployMenuOptions"
|
||||
@handle-cancel="() => $router.back()"
|
||||
@handle-deploy="handleSubmit"
|
||||
@handle-deploy-menu="handleSubmitAndStay" />
|
||||
</div>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :md="24" :lg="7" v-if="!isMobile()">
|
||||
<a-affix :offsetTop="75" class="vm-info-card">
|
||||
<info-card :resource="vm" :title="$t('label.yourinstance')" @change-resource="(data) => resource = data" />
|
||||
<info-card :footerVisible="true" :resource="vm" :title="$t('label.yourinstance')" @change-resource="(data) => resource = data">
|
||||
<template #footer-content>
|
||||
<deploy-buttons
|
||||
:loading="loading.deploy"
|
||||
:deployButtonText="form.startvm ? $t('label.launch.vm') : $t('label.create.vm')"
|
||||
:deployButtonMenuOptions="deployMenuOptions"
|
||||
@handle-cancel="() => $router.back()"
|
||||
@handle-deploy="handleSubmit"
|
||||
@handle-deploy-menu="handleSubmitAndStay" />
|
||||
</template>
|
||||
</info-card>
|
||||
</a-affix>
|
||||
</a-col>
|
||||
</a-row>
|
||||
@ -885,6 +880,7 @@ import eventBus from '@/config/eventBus'
|
||||
|
||||
import OwnershipSelection from '@views/compute/wizard/OwnershipSelection'
|
||||
import InfoCard from '@/components/view/InfoCard'
|
||||
import DeployButtons from '@views/compute/wizard/DeployButtons'
|
||||
import ResourceIcon from '@/components/view/ResourceIcon'
|
||||
import ComputeOfferingSelection from '@views/compute/wizard/ComputeOfferingSelection'
|
||||
import ComputeSelection from '@views/compute/wizard/ComputeSelection'
|
||||
@ -905,6 +901,9 @@ export default {
|
||||
name: 'Wizard',
|
||||
components: {
|
||||
OwnershipSelection,
|
||||
InfoCard,
|
||||
DeployButtons,
|
||||
ResourceIcon,
|
||||
SshKeyPairSelection,
|
||||
UserDataSelection,
|
||||
NetworkConfiguration,
|
||||
@ -914,11 +913,9 @@ export default {
|
||||
DiskSizeSelection,
|
||||
MultiDiskSelection,
|
||||
DiskOfferingSelection,
|
||||
InfoCard,
|
||||
ComputeOfferingSelection,
|
||||
ComputeSelection,
|
||||
SecurityGroupSelection,
|
||||
ResourceIcon,
|
||||
TooltipLabel,
|
||||
InstanceNicsNetworkSelectListView
|
||||
},
|
||||
@ -1434,6 +1431,9 @@ export default {
|
||||
},
|
||||
isCustomizedIOPS () {
|
||||
return this.rootDiskSelected?.iscustomizediops || this.serviceOffering?.iscustomizediops || false
|
||||
},
|
||||
deployMenuOptions () {
|
||||
return [this.form.startvm ? this.$t('label.launch.vm.and.stay') : this.$t('label.create.vm.and.stay')]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -2897,10 +2897,6 @@ export default {
|
||||
.card-footer {
|
||||
text-align: right;
|
||||
margin-top: 2rem;
|
||||
|
||||
button + button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-list-item-meta-avatar {
|
||||
@ -2940,7 +2936,7 @@ export default {
|
||||
.vm-info-card {
|
||||
.ant-card-body {
|
||||
min-height: 250px;
|
||||
max-height: calc(100vh - 150px);
|
||||
height: calc(100vh - 258px);
|
||||
overflow-y: auto;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
@ -2961,12 +2957,4 @@ export default {
|
||||
.form-item-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-stay-on-page {
|
||||
&.ant-dropdown-menu-dark {
|
||||
.ant-dropdown-menu-item:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -818,36 +818,31 @@
|
||||
</template>
|
||||
</a-step>
|
||||
</a-steps>
|
||||
<div class="card-footer">
|
||||
<a-form-item name="stayonpage" ref="stayonpage">
|
||||
<a-switch
|
||||
class="form-item-hidden"
|
||||
v-model:checked="form.stayonpage" />
|
||||
</a-form-item>
|
||||
<!-- ToDo extract as component -->
|
||||
<a-button @click="() => $router.back()" :disabled="loading.deploy">
|
||||
{{ $t('label.cancel') }}
|
||||
</a-button>
|
||||
<a-dropdown-button style="margin-left: 10px" type="primary" ref="submit" @click="handleSubmit" :loading="loading.deploy">
|
||||
<rocket-outlined />
|
||||
{{ $t('label.launch.vnf.appliance') }}
|
||||
<template #icon><down-outlined /></template>
|
||||
<template #overlay>
|
||||
<a-menu type="primary" @click="handleSubmitAndStay" theme="dark" class="btn-stay-on-page">
|
||||
<a-menu-item type="primary" key="1">
|
||||
<rocket-outlined />
|
||||
{{ $t('label.launch.vnf.appliance.and.stay') }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown-button>
|
||||
<div class="card-footer" v-if="isMobile()">
|
||||
<deploy-buttons
|
||||
:loading="loading.deploy"
|
||||
:deployButtonText="$t('label.launch.vnf.appliance')"
|
||||
:deployButtonMenuOptions="deployMenuOptions"
|
||||
@handle-cancel="() => $router.back()"
|
||||
@handle-deploy="handleSubmit"
|
||||
@handle-deploy-menu="handleSubmitAndStay" />
|
||||
</div>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :md="24" :lg="7" v-if="!isMobile()">
|
||||
<a-affix :offsetTop="75" class="vm-info-card">
|
||||
<info-card :resource="vm" :title="$t('label.vnf.appliance')" @change-resource="(data) => resource = data" />
|
||||
<info-card :footerVisible="true" :resource="vm" :title="$t('label.vnf.appliance')" @change-resource="(data) => resource = data">
|
||||
<template #footer-content>
|
||||
<deploy-buttons
|
||||
:loading="loading.deploy"
|
||||
:deployButtonText="$t('label.launch.vnf.appliance')"
|
||||
:deployButtonMenuOptions="deployMenuOptions"
|
||||
@handle-cancel="() => $router.back()"
|
||||
@handle-deploy="handleSubmit"
|
||||
@handle-deploy-menu="handleSubmitAndStay" />
|
||||
</template>
|
||||
</info-card>
|
||||
</a-affix>
|
||||
</a-col>
|
||||
</a-row>
|
||||
@ -863,6 +858,7 @@ import store from '@/store'
|
||||
import eventBus from '@/config/eventBus'
|
||||
|
||||
import InfoCard from '@/components/view/InfoCard'
|
||||
import DeployButtons from '@views/compute/wizard/DeployButtons'
|
||||
import ResourceIcon from '@/components/view/ResourceIcon'
|
||||
import ComputeOfferingSelection from '@views/compute/wizard/ComputeOfferingSelection'
|
||||
import ComputeSelection from '@views/compute/wizard/ComputeSelection'
|
||||
@ -883,6 +879,9 @@ import InstanceNicsNetworkSelectListView from '@/components/view/InstanceNicsNet
|
||||
export default {
|
||||
name: 'Wizard',
|
||||
components: {
|
||||
InfoCard,
|
||||
DeployButtons,
|
||||
ResourceIcon,
|
||||
SshKeyPairSelection,
|
||||
UserDataSelection,
|
||||
NetworkConfiguration,
|
||||
@ -892,12 +891,10 @@ export default {
|
||||
DiskSizeSelection,
|
||||
MultiDiskSelection,
|
||||
DiskOfferingSelection,
|
||||
InfoCard,
|
||||
ComputeOfferingSelection,
|
||||
ComputeSelection,
|
||||
SecurityGroupSelection,
|
||||
VnfNicsSelection,
|
||||
ResourceIcon,
|
||||
TooltipLabel,
|
||||
InstanceNicsNetworkSelectListView
|
||||
},
|
||||
@ -1339,6 +1336,9 @@ export default {
|
||||
},
|
||||
isCustomizedIOPS () {
|
||||
return this.rootDiskSelected?.iscustomizediops || this.serviceOffering?.iscustomizediops || false
|
||||
},
|
||||
deployMenuOptions () {
|
||||
return [this.$t('label.launch.vnf.appliance.and.stay')]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -2887,7 +2887,7 @@ export default {
|
||||
.vm-info-card {
|
||||
.ant-card-body {
|
||||
min-height: 250px;
|
||||
max-height: calc(100vh - 150px);
|
||||
max-height: calc(100vh - 258px);
|
||||
overflow-y: auto;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
@ -2908,12 +2908,4 @@ export default {
|
||||
.form-item-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-stay-on-page {
|
||||
&.ant-dropdown-menu-dark {
|
||||
.ant-dropdown-menu-item:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
130
ui/src/views/compute/wizard/DeployButtons.vue
Normal file
130
ui/src/views/compute/wizard/DeployButtons.vue
Normal file
@ -0,0 +1,130 @@
|
||||
// Licensed to the Apache Software Foundation (ASF) under one
|
||||
// or more contributor license agreements. See the NOTICE file
|
||||
// distributed with this work for additional information
|
||||
// regarding copyright ownership. The ASF licenses this file
|
||||
// to you under the Apache License, Version 2.0 (the
|
||||
// "License"); you may not use this file except in compliance
|
||||
// with the License. You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing,
|
||||
// software distributed under the License is distributed on an
|
||||
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
// KIND, either express or implied. See the License for the
|
||||
// specific language governing permissions and limitations
|
||||
// under the License.
|
||||
|
||||
<template>
|
||||
<div class="button-container">
|
||||
<a-button
|
||||
v-if="cancekButtonAllowed"
|
||||
@click="handleCancelBtn"
|
||||
:disabled="loading"
|
||||
class="equal-size-button">
|
||||
{{ $t('label.cancel') }}
|
||||
</a-button>
|
||||
<a-dropdown-button
|
||||
v-if="deployButtonMenuOptions"
|
||||
type="primary"
|
||||
ref="submit"
|
||||
@click="handleDeployBtn"
|
||||
:loading="loading"
|
||||
class="equal-size-button">
|
||||
<rocket-outlined />
|
||||
{{ deployButtonText }}
|
||||
<template #icon><down-outlined /></template>
|
||||
<template #overlay>
|
||||
<a-menu type="primary" @click="handleMenu" theme="dark" class="btn-stay-on-page">
|
||||
<a-menu-item type="primary" v-for="(menuOpt, index) in deployButtonMenuOptions" :key="index + 1">
|
||||
<rocket-outlined />
|
||||
{{ menuOpt }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown-button>
|
||||
<a-button
|
||||
v-else
|
||||
class="equal-size-button"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleDeployBtn">
|
||||
{{ deployButtonText }}
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DeployButtons',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
deployButtonText: {
|
||||
type: String,
|
||||
default: () => this.$t('label.create')
|
||||
},
|
||||
deployButtonMenuOptions: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
cancekButtonAllowed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
emits: ['handle-cancel', 'handle-deploy', 'handle-deploy-menu'],
|
||||
methods: {
|
||||
handleCancelBtn () {
|
||||
this.$emit('handle-cancel')
|
||||
},
|
||||
handleDeployBtn (e) {
|
||||
this.$emit('handle-deploy', e)
|
||||
},
|
||||
handleMenu (e) {
|
||||
this.$emit('handle-deploy-menu', e.key - 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.equal-size-button {
|
||||
flex-grow: 1; /* Make each button grow equally */
|
||||
min-width: 120px; /* Set a minimum width so that the buttons don't shrink too much */
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.button-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-stay-on-page {
|
||||
&.ant-dropdown-menu-dark {
|
||||
.ant-dropdown-menu-item:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
.ant-btn-group > .ant-btn:first-child:not(:last-child) {
|
||||
flex-grow: 1; /* Make each button grow equally */
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user