ui: allow assigning backup offring during instance deploy

Add backup offering selection to Deploy VM wizard and assign selected backup offering to the VM after successful deployment. This enables users to choose a backup offering during VM creation, and the VM is automatically associated with the selected offering post-deployment.

Signed-off-by: Abhishek Kumar <[email protected]>

Author: shwstppr

ui/public/locales/en.json

@@ -447,7 +447,9 @@
 "label.backup.configure.schedule": "Configure Backup Schedule",
 "label.backup.offering.assign": "Assign Instance to backup offering",
 "label.backup.offering.remove": "Remove Instance from backup offering",
+"label.backup.offering": "Backup Offering",
 "label.backup.offerings": "Backup Offerings",
+"label.backup.offering.assign.failed": "Failed to assign Backup Offering",
 "label.backup.repository": "Backup Repository",
 "label.backup.restore": "Restore Instance backup",
 "label.backuplimit": "Backup Limits",
@@ -2189,6 +2191,7 @@
 "label.select.all": "Select all",
 "label.select.columns": "Select columns",
 "label.select.a.zone": "Select a Zone",
+"label.select.backup.offering": "Select Backup Offering",
 "label.select.deployment.infrastructure": "Select deployment infrastructure",
 "label.select.guest.os.type": "Please select the guest OS type",
 "label.select.network": "Select Network",
@@ -3062,6 +3065,7 @@
 "message.backup.attach.restore": "Please confirm that you want to restore and attach the volume from the backup?",
 "message.backup.create": "Are you sure you want to create an Instance backup?",
 "message.backup.offering.remove": "Are you sure you want to remove Instance from backup offering and delete the backup chain?",
+"message.backup.offering.select.assign.instance": "Select a backup offering to assign to the Instance. Assigning a backup offering helps protect your data by enabling automated backups.",
 "message.backup.restore": "Please confirm that you want to restore the Instance backup?",
 "message.cancel.shutdown": "Please confirm that you would like to cancel the shutdown on this Management Server. It will resume accepting any new Async Jobs.",
 "message.cancel.maintenance": "Please confirm that you would like to cancel the maintenance on this Management Server. It will resume accepting any new Async Jobs.",

ui/src/components/widgets/InfiniteScrollSelect.vue

@@ -77,7 +77,7 @@
     </template>
     <a-select-option v-for="option in options" :key="option.id" :value="option[optionValueKey]">
       <span>
-        <span v-if="showIcon">
+        <span v-if="showIcon && option.showicon !== false">
           <resource-icon v-if="option.icon && option.icon.base64image" :image="option.icon.base64image" size="1x" style="margin-right: 5px"/>
           <render-icon v-else :icon="defaultIcon" style="margin-right: 5px" />
         </span>

ui/src/views/compute/DeployVM.vue

@@ -540,6 +540,25 @@
                   </div>
                 </template>
               </a-step>
+              <a-step
+                v-if="isUserAllowedToListBackupOfferings"
+                :title="$t('label.backup.offering')"
+                :status="zoneSelected ? 'process' : 'wait'">
+                <template #description>
+                  <div v-if="zoneSelected" style="margin-top: 15px">
+                    <div>{{ $t('message.backup.offering.select.assign.instance') }}</div>
+                    <infinite-scroll-select
+                      style="margin-top: 10px; width: 100%;"
+                      v-model:value="selectedBackupOfferingId"
+                      placeholder="Select backup offering"
+                      api="listBackupOfferings"
+                      :apiParams="listBackupOfferingApiParams"
+                      resourceType="backupoffering"
+                      defaultIcon="cloud-upload-outlined"
+                      :defaultOption="backupOfferingDefaultOption" />
+                  </div>
+                </template>
+              </a-step>
               <a-step
                 :title="$t('label.advanced.mode')"
                 :status="zoneSelected ? 'process' : 'wait'">
@@ -930,6 +949,7 @@ import SecurityGroupSelection from '@views/compute/wizard/SecurityGroupSelection
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 import InstanceNicsNetworkSelectListView from '@/components/view/InstanceNicsNetworkSelectListView'
 import DetailsInput from '@/components/widgets/DetailsInput'
+import InfiniteScrollSelect from '@/components/widgets/InfiniteScrollSelect'
 
 export default {
   name: 'Wizard',
@@ -955,7 +975,8 @@ export default {
     SecurityGroupSelection,
     TooltipLabel,
     InstanceNicsNetworkSelectListView,
-    DetailsInput
+    DetailsInput,
+    InfiniteScrollSelect
   },
   props: {
     visible: {
@@ -1135,7 +1156,8 @@ export default {
         opts: []
       },
       externalDetailsEnabled: false,
-      selectedExtensionId: null
+      selectedExtensionId: null,
+      selectedBackupOfferingId: null
     }
   },
   computed: {
@@ -1515,6 +1537,17 @@ export default {
     },
     isTemplateHypervisorExternal () {
       return !!this.template && this.template.hypervisor === 'External'
+    },
+    isUserAllowedToListBackupOfferings () {
+      return Boolean('listBackupOfferings' in this.$store.getters.apis)
+    },
+    listBackupOfferingApiParams () {
+      return {
+        zoneid: this.zone?.id
+      }
+    },
+    backupOfferingDefaultOption () {
+      return { id: null, name: '', showicon: false }
     }
   },
   watch: {
@@ -2507,6 +2540,7 @@ export default {
                     duration: 0
                   })
                 }
+                this.assigneVirtualMachineToBackupOfferingIfNeeded(vm)
                 eventBus.emit('vm-refresh-data')
               },
               loadingMessage: `${title} ${this.$t('label.in.progress')}`,
@@ -3004,6 +3038,7 @@ export default {
       this.resetTemplatesList()
       this.resetIsosList()
       this.imageType = this.queryIsoId ? 'isoid' : 'templateid'
+      this.selectedBackupOfferingId = undefined
       this.fetchZoneOptions()
     },
     onSelectPodId (value) {
@@ -3395,6 +3430,20 @@ export default {
         return
       }
       this.form.externaldetails = undefined
+    },
+    assigneVirtualMachineToBackupOfferingIfNeeded (vm) {
+      if (!this.selectedBackupOfferingId || !vm || !vm.id) {
+        return
+      }
+      postAPI('assignVirtualMachineToBackupOffering', {
+        virtualmachineid: vm.id,
+        backupofferingid: this.selectedBackupOfferingId
+      }).catch(error => {
+        this.$notification.error({
+          message: this.$t('label.backup.offering.assign.failed'),
+          description: error.message || error
+        })
+      })
     }
   }
 }