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>

ui/src/views/compute/CreateAutoScaleVmGroup.vue

@@ -949,21 +949,27 @@
                 </template>
               </a-step>
             </a-steps>
-            <div class="card-footer">
+            <div class="card-footer" v-if="isMobile()">
-              <!-- ToDo extract as component -->
+              <deploy-buttons
-              <a-button @click="() => $router.back()" :disabled="loading.deploy">
+                :loading="loading.deploy"
-                {{ $t('label.cancel') }}
+                :deployButtonText="$t('label.create')"
-              </a-button>
+                @handle-cancel="() => $router.back()"
-              <a-button style="margin-left: 10px" type="primary" ref="submit" @click="handleSubmit" :loading="loading.deploy">
+                @handle-deploy="handleSubmit" />
-                {{ $t('label.create') }}
-              </a-button>
             </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;
     }

ui/src/views/compute/DeployVM.vue

@@ -838,36 +838,31 @@
                 </template>
               </a-step>
             </a-steps>
-            <div class="card-footer">
+            <div class="card-footer" v-if="isMobile()">
-              <a-form-item name="stayonpage" ref="stayonpage">
+              <deploy-buttons
-                <a-switch
+                :loading="loading.deploy"
-                  class="form-item-hidden"
+                :deployButtonText="form.startvm ? $t('label.launch.vm') : $t('label.create.vm')"
-                  v-model:checked="form.stayonpage" />
+                :deployButtonMenuOptions="deployMenuOptions"
-              </a-form-item>
+                @handle-cancel="() => $router.back()"
-              <!-- ToDo extract as component -->
+                @handle-deploy="handleSubmit"
-              <a-button @click="() => $router.back()" :disabled="loading.deploy">
+                @handle-deploy-menu="handleSubmitAndStay" />
-                {{ $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>
           </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>

ui/src/views/compute/DeployVnfAppliance.vue

@@ -818,36 +818,31 @@
                 </template>
               </a-step>
             </a-steps>
-            <div class="card-footer">
+            <div class="card-footer" v-if="isMobile()">
-              <a-form-item name="stayonpage" ref="stayonpage">
+              <deploy-buttons
-                <a-switch
+                :loading="loading.deploy"
-                  class="form-item-hidden"
+                :deployButtonText="$t('label.launch.vnf.appliance')"
-                  v-model:checked="form.stayonpage" />
+                :deployButtonMenuOptions="deployMenuOptions"
-              </a-form-item>
+                @handle-cancel="() => $router.back()"
-              <!-- ToDo extract as component -->
+                @handle-deploy="handleSubmit"
-              <a-button @click="() => $router.back()" :disabled="loading.deploy">
+                @handle-deploy-menu="handleSubmitAndStay" />
-                {{ $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>
           </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>

ui/src/views/compute/wizard/DeployButtons.vue

@@ -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>