Skip to content

Commit 7e77c73

Browse files
shwstpprshwstppr
committed
add deploy button on info card
Signed-off-by: Abhishek Kumar <[email protected]>
1 parent f6d0590 commit 7e77c73

File tree

6 files changed

+2370
-872
lines changed

6 files changed

+2370
-872
lines changed

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

Lines changed: 814 additions & 786 deletions
Large diffs are not rendered by default.

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

Lines changed: 1357 additions & 0 deletions
Large diffs are not rendered by default.

‎ui/src/views/compute/CreateAutoScaleVmGroup.vue

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -949,21 +949,27 @@
949949
</template>
950950
</a-step>
951951
</a-steps>
952-
<div class="card-footer">
953-
<!-- ToDo extract as component -->
954-
<a-button @click="() => $router.back()" :disabled="loading.deploy">
955-
{{ $t('label.cancel') }}
956-
</a-button>
957-
<a-button style="margin-left: 10px" type="primary" ref="submit" @click="handleSubmit" :loading="loading.deploy">
958-
{{ $t('label.create') }}
959-
</a-button>
952+
<div class="card-footer" v-if="isMobile()">
953+
<deploy-buttons
954+
:loading="loading.deploy"
955+
:deployButtonText="$t('label.create')"
956+
@handle-cancel="() => $router.back()"
957+
@handle-deploy="handleSubmit" />
960958
</div>
961959
</a-form>
962960
</a-card>
963961
</a-col>
964962
<a-col :md="24" :lg="7" v-if="!isMobile()">
965963
<a-affix :offsetTop="75" class="vm-info-card">
966-
<info-card :resource="vm" :title="$t('label.your.autoscale.vmgroup')" @change-resource="(data) => resource = data" />
964+
<info-card :footerVisible="true" :resource="vm" :title="$t('label.your.autoscale.vmgroup')" @change-resource="(data) => resource = data">
965+
<template #footer-content>
966+
<deploy-buttons
967+
:loading="loading.deploy"
968+
:deployButtonText="$t('label.create')"
969+
@handle-cancel="() => $router.back()"
970+
@handle-deploy="handleSubmit" />
971+
</template>
972+
</info-card>
967973
</a-affix>
968974
</a-col>
969975
</a-row>
@@ -1033,6 +1039,7 @@ import store from '@/store'
10331039
import eventBus from '@/config/eventBus'
10341040
10351041
import InfoCard from '@/components/view/InfoCard'
1042+
import DeployButtons from '@views/compute/wizard/DeployButtons'
10361043
import ResourceIcon from '@/components/view/ResourceIcon'
10371044
import ComputeOfferingSelection from '@views/compute/wizard/ComputeOfferingSelection'
10381045
import ComputeSelection from '@views/compute/wizard/ComputeSelection'
@@ -1057,6 +1064,9 @@ const STATUS_FAILED = 'error'
10571064
export default {
10581065
name: 'Wizard',
10591066
components: {
1067+
InfoCard,
1068+
DeployButtons,
1069+
ResourceIcon,
10601070
SshKeyPairSelection,
10611071
UserDataSelection,
10621072
NetworkConfiguration,
@@ -1067,11 +1077,9 @@ export default {
10671077
DiskSizeSelection,
10681078
MultiDiskSelection,
10691079
DiskOfferingSelection,
1070-
InfoCard,
10711080
ComputeOfferingSelection,
10721081
ComputeSelection,
10731082
SecurityGroupSelection,
1074-
ResourceIcon,
10751083
TooltipLabel,
10761084
InstanceNicsNetworkSelectListView
10771085
},
@@ -3184,7 +3192,7 @@ export default {
31843192
.vm-info-card {
31853193
.ant-card-body {
31863194
min-height: 250px;
3187-
max-height: calc(100vh - 150px);
3195+
max-height: calc(100vh - 229px);
31883196
overflow-y: auto;
31893197
scroll-behavior: smooth;
31903198
}

‎ui/src/views/compute/DeployVM.vue

Lines changed: 27 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -838,36 +838,31 @@
838838
</template>
839839
</a-step>
840840
</a-steps>
841-
<div class="card-footer">
842-
<a-form-item name="stayonpage" ref="stayonpage">
843-
<a-switch
844-
class="form-item-hidden"
845-
v-model:checked="form.stayonpage" />
846-
</a-form-item>
847-
<!-- ToDo extract as component -->
848-
<a-button @click="() => $router.back()" :disabled="loading.deploy">
849-
{{ $t('label.cancel') }}
850-
</a-button>
851-
<a-dropdown-button style="margin-left: 10px" type="primary" ref="submit" @click="handleSubmit" :loading="loading.deploy">
852-
<rocket-outlined />
853-
{{ this.form.startvm ? $t('label.launch.vm') : $t('label.create.vm') }}
854-
<template #icon><down-outlined /></template>
855-
<template #overlay>
856-
<a-menu type="primary" @click="handleSubmitAndStay" theme="dark" class="btn-stay-on-page">
857-
<a-menu-item type="primary" key="1">
858-
<rocket-outlined />
859-
{{ this.form.startvm ? $t('label.launch.vm.and.stay') : $t('label.create.vm.and.stay') }}
860-
</a-menu-item>
861-
</a-menu>
862-
</template>
863-
</a-dropdown-button>
841+
<div class="card-footer" v-if="isMobile()">
842+
<deploy-buttons
843+
:loading="loading.deploy"
844+
:deployButtonText="form.startvm ? $t('label.launch.vm') : $t('label.create.vm')"
845+
:deployButtonMenuOptions="deployMenuOptions"
846+
@handle-cancel="() => $router.back()"
847+
@handle-deploy="handleSubmit"
848+
@handle-deploy-menu="handleSubmitAndStay" />
864849
</div>
865850
</a-form>
866851
</a-card>
867852
</a-col>
868853
<a-col :md="24" :lg="7" v-if="!isMobile()">
869854
<a-affix :offsetTop="75" class="vm-info-card">
870-
<info-card :resource="vm" :title="$t('label.yourinstance')" @change-resource="(data) => resource = data" />
855+
<info-card :footerVisible="true" :resource="vm" :title="$t('label.yourinstance')" @change-resource="(data) => resource = data">
856+
<template #footer-content>
857+
<deploy-buttons
858+
:loading="loading.deploy"
859+
:deployButtonText="form.startvm ? $t('label.launch.vm') : $t('label.create.vm')"
860+
:deployButtonMenuOptions="deployMenuOptions"
861+
@handle-cancel="() => $router.back()"
862+
@handle-deploy="handleSubmit"
863+
@handle-deploy-menu="handleSubmitAndStay" />
864+
</template>
865+
</info-card>
871866
</a-affix>
872867
</a-col>
873868
</a-row>
@@ -885,6 +880,7 @@ import eventBus from '@/config/eventBus'
885880
886881
import OwnershipSelection from '@views/compute/wizard/OwnershipSelection'
887882
import InfoCard from '@/components/view/InfoCard'
883+
import DeployButtons from '@views/compute/wizard/DeployButtons'
888884
import ResourceIcon from '@/components/view/ResourceIcon'
889885
import ComputeOfferingSelection from '@views/compute/wizard/ComputeOfferingSelection'
890886
import ComputeSelection from '@views/compute/wizard/ComputeSelection'
@@ -905,6 +901,9 @@ export default {
905901
name: 'Wizard',
906902
components: {
907903
OwnershipSelection,
904+
InfoCard,
905+
DeployButtons,
906+
ResourceIcon,
908907
SshKeyPairSelection,
909908
UserDataSelection,
910909
NetworkConfiguration,
@@ -914,11 +913,9 @@ export default {
914913
DiskSizeSelection,
915914
MultiDiskSelection,
916915
DiskOfferingSelection,
917-
InfoCard,
918916
ComputeOfferingSelection,
919917
ComputeSelection,
920918
SecurityGroupSelection,
921-
ResourceIcon,
922919
TooltipLabel,
923920
InstanceNicsNetworkSelectListView
924921
},
@@ -1434,6 +1431,9 @@ export default {
14341431
},
14351432
isCustomizedIOPS () {
14361433
return this.rootDiskSelected?.iscustomizediops || this.serviceOffering?.iscustomizediops || false
1434+
},
1435+
deployMenuOptions () {
1436+
return [this.form.startvm ? this.$t('label.launch.vm.and.stay') : this.$t('label.create.vm.and.stay')]
14371437
}
14381438
},
14391439
watch: {
@@ -2897,10 +2897,6 @@ export default {
28972897
.card-footer {
28982898
text-align: right;
28992899
margin-top: 2rem;
2900-
2901-
button + button {
2902-
margin-left: 8px;
2903-
}
29042900
}
29052901
29062902
.ant-list-item-meta-avatar {
@@ -2940,7 +2936,7 @@ export default {
29402936
.vm-info-card {
29412937
.ant-card-body {
29422938
min-height: 250px;
2943-
max-height: calc(100vh - 150px);
2939+
height: calc(100vh - 229px);
29442940
overflow-y: auto;
29452941
scroll-behavior: smooth;
29462942
}
@@ -2961,12 +2957,4 @@ export default {
29612957
.form-item-hidden {
29622958
display: none;
29632959
}
2964-
2965-
.btn-stay-on-page {
2966-
&.ant-dropdown-menu-dark {
2967-
.ant-dropdown-menu-item:hover {
2968-
background: transparent !important;
2969-
}
2970-
}
2971-
}
29722960
</style>

‎ui/src/views/compute/DeployVnfAppliance.vue

Lines changed: 27 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -818,36 +818,31 @@
818818
</template>
819819
</a-step>
820820
</a-steps>
821-
<div class="card-footer">
822-
<a-form-item name="stayonpage" ref="stayonpage">
823-
<a-switch
824-
class="form-item-hidden"
825-
v-model:checked="form.stayonpage" />
826-
</a-form-item>
827-
<!-- ToDo extract as component -->
828-
<a-button @click="() => $router.back()" :disabled="loading.deploy">
829-
{{ $t('label.cancel') }}
830-
</a-button>
831-
<a-dropdown-button style="margin-left: 10px" type="primary" ref="submit" @click="handleSubmit" :loading="loading.deploy">
832-
<rocket-outlined />
833-
{{ $t('label.launch.vnf.appliance') }}
834-
<template #icon><down-outlined /></template>
835-
<template #overlay>
836-
<a-menu type="primary" @click="handleSubmitAndStay" theme="dark" class="btn-stay-on-page">
837-
<a-menu-item type="primary" key="1">
838-
<rocket-outlined />
839-
{{ $t('label.launch.vnf.appliance.and.stay') }}
840-
</a-menu-item>
841-
</a-menu>
842-
</template>
843-
</a-dropdown-button>
821+
<div class="card-footer" v-if="isMobile()">
822+
<deploy-buttons
823+
:loading="loading.deploy"
824+
:deployButtonText="$t('label.launch.vnf.appliance')"
825+
:deployButtonMenuOptions="deployMenuOptions"
826+
@handle-cancel="() => $router.back()"
827+
@handle-deploy="handleSubmit"
828+
@handle-deploy-menu="handleSubmitAndStay" />
844829
</div>
845830
</a-form>
846831
</a-card>
847832
</a-col>
848833
<a-col :md="24" :lg="7" v-if="!isMobile()">
849834
<a-affix :offsetTop="75" class="vm-info-card">
850-
<info-card :resource="vm" :title="$t('label.vnf.appliance')" @change-resource="(data) => resource = data" />
835+
<info-card :footerVisible="true" :resource="vm" :title="$t('label.vnf.appliance')" @change-resource="(data) => resource = data">
836+
<template #footer-content>
837+
<deploy-buttons
838+
:loading="loading.deploy"
839+
:deployButtonText="$t('label.launch.vnf.appliance')"
840+
:deployButtonMenuOptions="deployMenuOptions"
841+
@handle-cancel="() => $router.back()"
842+
@handle-deploy="handleSubmit"
843+
@handle-deploy-menu="handleSubmitAndStay" />
844+
</template>
845+
</info-card>
851846
</a-affix>
852847
</a-col>
853848
</a-row>
@@ -863,6 +858,7 @@ import store from '@/store'
863858
import eventBus from '@/config/eventBus'
864859
865860
import InfoCard from '@/components/view/InfoCard'
861+
import DeployButtons from '@views/compute/wizard/DeployButtons'
866862
import ResourceIcon from '@/components/view/ResourceIcon'
867863
import ComputeOfferingSelection from '@views/compute/wizard/ComputeOfferingSelection'
868864
import ComputeSelection from '@views/compute/wizard/ComputeSelection'
@@ -883,6 +879,9 @@ import InstanceNicsNetworkSelectListView from '@/components/view/InstanceNicsNet
883879
export default {
884880
name: 'Wizard',
885881
components: {
882+
InfoCard,
883+
DeployButtons,
884+
ResourceIcon,
886885
SshKeyPairSelection,
887886
UserDataSelection,
888887
NetworkConfiguration,
@@ -892,12 +891,10 @@ export default {
892891
DiskSizeSelection,
893892
MultiDiskSelection,
894893
DiskOfferingSelection,
895-
InfoCard,
896894
ComputeOfferingSelection,
897895
ComputeSelection,
898896
SecurityGroupSelection,
899897
VnfNicsSelection,
900-
ResourceIcon,
901898
TooltipLabel,
902899
InstanceNicsNetworkSelectListView
903900
},
@@ -1339,6 +1336,9 @@ export default {
13391336
},
13401337
isCustomizedIOPS () {
13411338
return this.rootDiskSelected?.iscustomizediops || this.serviceOffering?.iscustomizediops || false
1339+
},
1340+
deployMenuOptions () {
1341+
return [this.$t('label.launch.vnf.appliance.and.stay')]
13421342
}
13431343
},
13441344
watch: {
@@ -2887,7 +2887,7 @@ export default {
28872887
.vm-info-card {
28882888
.ant-card-body {
28892889
min-height: 250px;
2890-
max-height: calc(100vh - 150px);
2890+
max-height: calc(100vh - 229px);
28912891
overflow-y: auto;
28922892
scroll-behavior: smooth;
28932893
}
@@ -2908,12 +2908,4 @@ export default {
29082908
.form-item-hidden {
29092909
display: none;
29102910
}
2911-
2912-
.btn-stay-on-page {
2913-
&.ant-dropdown-menu-dark {
2914-
.ant-dropdown-menu-item:hover {
2915-
background: transparent !important;
2916-
}
2917-
}
2918-
}
29192911
</style>

0 commit comments

Comments
 (0)