ui: show selected template hypervisor in deploy form

ui/src/utils/imageSelection.js

@@ -0,0 +1,36 @@
+// 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.
+
+export function getImageHypervisor (imageItems, imageType, imageId) {
+  if (imageType !== 'templateid' || !imageId) {
+    return null
+  }
+
+  for (const group of Object.values(imageItems || {})) {
+    const templates = group?.template
+    if (!Array.isArray(templates)) {
+      continue
+    }
+
+    const image = templates.find(item => item.id === imageId)
+    if (image) {
+      return image.hypervisor || null
+    }
+  }
+
+  return null
+}

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

@@ -130,6 +130,7 @@ import OsLogo from '@/components/widgets/OsLogo'
 import OsBasedImageSelectionSearchView from '@views/compute/wizard/OsBasedImageSelectionSearchView'
 import OsBasedImageRadioGroup from '@views/compute/wizard/OsBasedImageRadioGroup'
 import DiskSizeSelection from '@views/compute/wizard/DiskSizeSelection'
+import { getImageHypervisor } from '@/utils/imageSelection'
 
 export default {
   name: 'OsBasedImageSelection',
@@ -234,6 +235,20 @@ export default {
   watch: {
     selectedImageType (newValue) {
       this.localSelectedImageType = newValue
+      this.emitEffectiveHypervisor(newValue, this.selectedImageId)
+    },
+    imageItems () {
+      this.emitEffectiveHypervisor(
+        this.localSelectedImageType,
+        this.selectedImageId,
+        false
+      )
+    },
+    'preFillContent.hypervisor' () {
+      this.emitEffectiveHypervisor(
+        this.localSelectedImageType,
+        this.selectedImageId
+      )
     },
     guestOsCategories (newValue) {
       this.imageSearchFilters = {}
@@ -285,9 +300,30 @@ export default {
       this.localSelectedGuestOsCategoryId = value
       this.$emit('change-guest-os-category', this.localSelectedGuestOsCategoryId)
     },
+    emitEffectiveHypervisor (imageType, imageId, useFallback = true) {
+      const fallbackHypervisor = this.preFillContent?.hypervisor
+      if (!fallbackHypervisor) {
+        return
+      }
+      const imageHypervisor = getImageHypervisor(
+        this.imageItems,
+        imageType,
+        imageId
+      )
+      if (imageHypervisor || useFallback) {
+        this.$emit(
+          'update-image',
+          'hypervisor',
+          imageHypervisor || fallbackHypervisor
+        )
+      }
+    },
     updateImage (decorator, id) {
       this.selectedImageId = id
       this.$emit('update-image', decorator, id)
+      if (decorator === 'templateid') {
+        this.emitEffectiveHypervisor(decorator, id)
+      }
     },
     handleImageSearch (searchFilters) {
       this.imageSearchFilters = {

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

@@ -51,6 +51,7 @@
 
 <script>
 import TemplateIsoRadioGroup from '@views/compute/wizard/TemplateIsoRadioGroup'
+import { getImageHypervisor } from '@/utils/imageSelection'
 
 export default {
   name: 'TemplateIsoSelection',
@@ -98,6 +99,14 @@ export default {
       pagination: false
     }
   },
+  mounted () {
+    if (this.inputDecorator !== 'templateid') {
+      this.emitEffectiveHypervisor(
+        this.inputDecorator,
+        this.checkedValue
+      )
+    }
+  },
   watch: {
     items: {
       deep: true,
@@ -110,7 +119,7 @@ export default {
           if (this.preFillContent.templateid) {
             if (items[filter.id]?.[key]?.some(item => item.id === this.preFillContent.templateid)) {
               this.filterType = filter.id
-              this.checkedValue = items[filter.id][key][0].id
+              this.checkedValue = this.preFillContent.templateid
               break
             }
           } else if (items[filter.id]?.[key]?.length > 0) {
@@ -119,18 +128,51 @@ export default {
             break
           }
         }
+        this.emitEffectiveHypervisor(
+          this.inputDecorator,
+          this.checkedValue,
+          false
+        )
       }
     },
     inputDecorator (newValue, oldValue) {
       if (newValue !== oldValue) {
         this.filter = ''
       }
+      this.emitEffectiveHypervisor(newValue, this.checkedValue)
+    },
+    'preFillContent.hypervisor' () {
+      this.emitEffectiveHypervisor(
+        this.inputDecorator,
+        this.checkedValue
+      )
     }
   },
   methods: {
+    emitEffectiveHypervisor (imageType, imageId, useFallback = true) {
+      const fallbackHypervisor = this.preFillContent?.hypervisor
+      if (!fallbackHypervisor) {
+        return
+      }
+      const imageHypervisor = getImageHypervisor(
+        this.items,
+        imageType,
+        imageId
+      )
+      if (imageHypervisor || useFallback) {
+        this.$emit(
+          'update-template-iso',
+          'hypervisor',
+          imageHypervisor || fallbackHypervisor
+        )
+      }
+    },
     updateTemplateIso (name, id) {
       this.checkedValue = id
       this.$emit('update-template-iso', name, id)
+      if (name === 'templateid') {
+        this.emitEffectiveHypervisor(name, id)
+      }
     },
     handleSearch (value) {
       if (!this.filter && !value) {