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

// 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>
    <a-form-item v-if="imageTypeSelectionAllowed" :label="$t('label.type')" name="imagetype" ref="imagetype">
      <a-radio-group
        v-model:value="localSelectedImageType"
        button-style="solid"
        :disabled="imagePreSelected"
        @change="emitChangeImageType()">
        <a-radio-button value="templateid">{{ $t('label.template') }}</a-radio-button>
        <a-radio-button value="isoid">{{ $t('label.iso') }}</a-radio-button>
        <a-radio-button value="volumeid">{{ $t('label.volume') }}</a-radio-button>
        <a-radio-button value="snapshotid">{{ $t('label.snapshot') }}</a-radio-button>
      </a-radio-group>
      <div style="margin-top: 5px; margin-bottom: 5px;">
        {{ $t('message.' + localSelectedImageType.replace('id', '') + '.desc') }}
      </div>
    </a-form-item>
    <a-form-item
      :label="$t('label.os')"
      name="guestoscategoryid"
      ref="guestoscategoryid"
      v-if="!guestOsCategoriesSelectionDisallowed">
      <block-radio-group-select
        :maxBlocks="16"
        :items="guestOsCategories"
        :selectedValue="localSelectedGuestOsCategoryId"
        :horizontalGutter="6"
        :verticalGutter="6"
        blockSize="square"
        @change="handleGuestOsCategoryChange">
        <template #radio-option="{ item }">
          <div class="radio-option">
            <div class="radio-option__icon">
              <resource-icon v-if="item.icon && item.icon.base64image" :image="item.icon.base64image" size="os" style="margin-bottom: 2px; margin-left: 1px" />
              <font-awesome-icon v-else-if="['-1', '0'].includes(item.id)" :icon="['fas', item.id === '0' ? 'user' : 'images']" size="2x" :style="categoryFontAwesomeIconStyle" />
              <os-logo v-else size="2x" :os-name="item.name" />
            </div>
            <a-tooltip placement="top" :title="item.name">
              <div class="ellipsis">{{ item.name }}</div>
            </a-tooltip>
          </div>
        </template>
        <template #select-option="{ item }">
          <span>
            <resource-icon v-if="item.icon && item.icon.base64image" :image="item.icon.base64image" size="2x" style="margin-right: 5px"/>
            <font-awesome-icon
              v-else-if="item.id === '0'"
              :icon="['fas', 'user']"
              size="2x"
              :style="[$store.getters.darkMode ? { color: 'rgba(255, 255, 255, 0.65)' } : { color: '#666' }]"
            />
            <os-logo v-else :os-name="item.name" style="margin-right: 5px" />
            {{ item.name }}
          </span>
        </template>
      </block-radio-group-select>
    </a-form-item>
    <a-card>
      <os-based-image-selection-search-view
        v-if="!imagePreSelected"
        class="search-input"
        :filtersDisabled="searchFiltersDisabled"
        @search="handleImageSearch">
      </os-based-image-selection-search-view>
      <a-spin :spinning="imagesLoading">
        <os-based-image-radio-group
          :imagesList="imagesList"
          :itemCount="imagesCount"
          :input-decorator="localSelectedImageType"
          :selected="selectedImageId"
          :preFillContent="preFillContent"
          @emit-update-image="updateImage"
          @handle-search-filter="($event) => eventPagination($event)"
        />
      </a-spin>
      <div v-if="diskSizeSelectionAllowed">
        <div>
          {{ $t('label.override.rootdisk.size') }}
          <a-switch
            v-model:checked="localRootDiskOverrideChecked"
            :disabled="rootDiskOverrideDisabled"
            @change="handleRootDiskOverrideCheckedChange"
            style="margin-left: 10px;"/>
          <div v-if="diskSizeSelectionDeployAsIsMessageVisible">  {{ $t('message.deployasis') }} </div>
        </div>
        <disk-size-selection
          v-if="showRootDiskSizeChanger"
          :input-decorator="diskSizeSelectionInputDecorator"
          :preFillContent="preFillContent"
          :isCustomized="true"
          :minDiskSize="preFillContent.minrootdisksize"
          @update-disk-size="emitUpdateDiskSize"
          style="margin-top: 10px;"/>
      </div>
      <a-form-item :label="$t('label.hypervisor')" v-if="localSelectedImageType === 'isoid'">
        <a-select
          v-model:value="localSelectedIsoHypervisor"
          :preFillContent="preFillContent"
          :options="isoHypervisorItems"
          @change="handleIsoHypervisorChange"
          showSearch
          optionFilterProp="label"
          :filterOption="filterOption" />
      </a-form-item>
    </a-card>
  </div>
</template>

<script>
import BlockRadioGroupSelect from '@/components/widgets/BlockRadioGroupSelect.vue'
import ResourceIcon from '@/components/view/ResourceIcon'
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'

export default {
  name: 'OsBasedImageSelection',
  components: {
    BlockRadioGroupSelect,
    ResourceIcon,
    OsLogo,
    OsBasedImageSelectionSearchView,
    OsBasedImageRadioGroup,
    DiskSizeSelection
  },
  props: {
    imageTypeSelectionAllowed: {
      type: Boolean,
      default: true
    },
    selectedImageType: {
      type: String,
      default: 'templateid'
    },
    imagePreSelected: {
      type: Boolean,
      default: false
    },
    guestOsCategoriesSelectionDisallowed: {
      type: Boolean,
      default: false
    },
    guestOsCategories: {
      type: Array,
      default: () => []
    },
    guestOsCategoriesLoading: {
      type: Boolean,
      default: false
    },
    selectedGuestOsCategoryId: {
      type: String,
      default: undefined
    },
    imageItems: {
      type: Object,
      default: () => {}
    },
    imagesLoading: {
      type: Boolean,
      default: false
    },
    diskSizeSelectionAllowed: {
      type: Boolean,
      default: true
    },
    diskSizeSelectionDeployAsIsMessageVisible: {
      type: Boolean,
      default: false
    },
    diskSizeSelectionInputDecorator: {
      type: String,
      default: 'rootdisksize'
    },
    rootDiskOverrideDisabled: {
      type: Boolean,
      default: false
    },
    rootDiskOverrideChecked: {
      type: Boolean,
      default: false
    },
    isoHypervisorItems: {
      type: Array,
      default: () => []
    },
    selectedIsoHypervisor: {
      type: String,
      default: undefined
    },
    filterOption: {
      type: Function,
      required: true
    },
    preFillContent: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      filterType: 'executable',
      selectedImageId: '',
      imageSearchFilters: {},
      showRootDiskSizeChanger: false,
      // Local data properties to mirror props
      localSelectedImageType: this.selectedImageType,
      localSelectedGuestOsCategoryId: this.selectedGuestOsCategoryId,
      localRootDiskOverrideChecked: this.rootDiskOverrideChecked,
      localSelectedIsoHypervisor: this.selectedIsoHypervisor
    }
  },
  mounted () {
    this.filterType = this.defaultImageFilter
  },
  watch: {
    selectedImageType (newValue) {
      this.localSelectedImageType = newValue
    },
    guestOsCategories (newValue) {
      this.imageSearchFilters = {}
    },
    selectedGuestOsCategoryId (newValue) {
      this.localSelectedGuestOsCategoryId = newValue
      this.updateImageFilterType()
    },
    rootDiskOverrideChecked (newValue) {
      this.localRootDiskOverrideChecked = newValue
    },
    selectedIsoHypervisor (newValue) {
      this.localSelectedIsoHypervisor = newValue
    }
  },
  computed: {
    defaultImageFilter () {
      return ['DomainAdmin', 'User'].includes(this.$store.getters.userInfo.roletype) ? 'executable' : 'all'
    },
    imagesList () {
      if (!this.localSelectedImageType || !this.imageItems || !this.imageItems[this.filterType]) {
        return []
      }
      const imageTypeKey = this.localSelectedImageType.slice(0, -2)
      return this.imageItems[this.filterType][imageTypeKey] || []
    },
    imagesCount () {
      return this.imageItems[this.filterType] ? this.imageItems[this.filterType].count || 0 : 0
    },
    selectedCategory () {
      if (this.localSelectedGuestOsCategoryId && this.guestOsCategories) {
        return this.guestOsCategories.find(option => option.id === this.localSelectedGuestOsCategoryId)
      }
      return null
    },
    categoryFontAwesomeIconStyle () {
      return [this.$store.getters.darkMode ? { color: 'rgba(255, 255, 255, 0.65)' } : { color: '#666' }]
    },
    searchFiltersDisabled () {
      return this.selectedCategory?.disableimagefilters
    }
  },
  emits: ['change-image-type', 'change-guest-os-category', 'update-image', 'handle-image-search-filter', 'change-root-disk-override-checked', 'update-disk-size', 'change-iso-hypervisor'],
  methods: {
    emitChangeImageType () {
      this.$emit('change-image-type', this.localSelectedImageType)
    },
    handleGuestOsCategoryChange (value) {
      this.localSelectedGuestOsCategoryId = value
      this.$emit('change-guest-os-category', this.localSelectedGuestOsCategoryId)
    },
    updateImage (decorator, id) {
      this.selectedImageId = id
      this.$emit('update-image', decorator, id)
    },
    handleImageSearch (searchFilters) {
      this.imageSearchFilters = {
        page: 1,
        pageSize: 10
      }
      Object.assign(this.imageSearchFilters, searchFilters)
      this.updateImageFilterType()
      this.emitSearchFilter()
    },
    updateImageFilterType () {
      this.filterType = this.defaultImageFilter
      if (this.localSelectedGuestOsCategoryId === '0') {
        this.filterType = 'self'
      } else {
        if (this.imageSearchFilters?.featured) {
          this.filterType = 'featured'
        } else if (this.imageSearchFilters?.public) {
          this.filterType = 'community'
        }
      }
    },
    eventPagination (pagination) {
      Object.assign(this.imageSearchFilters, pagination)
      this.emitSearchFilter()
    },
    emitSearchFilter () {
      this.$emit('handle-image-search-filter', this.imageSearchFilters)
    },
    changeFilterType (value) {
      this.filterType = value
    },
    handleRootDiskOverrideCheckedChange (value) {
      this.showRootDiskSizeChanger = value
      this.$emit('change-root-disk-override-checked', value)
    },
    emitUpdateDiskSize (decorator, value) {
      this.$emit('update-disk-size', decorator, value)
    },
    handleIsoHypervisorChange (hypervisor) {
      this.$emit('change-iso-hypervisor', hypervisor)
    }
  }
}
</script>

<style lang="less" scoped>
  .search-input {
    z-index: 8;

    @media (max-width: 600px) {
      position: relative;
      width: 100%;
      top: 0;
      right: 0;
    }
  }

  :deep(.ant-tabs-nav-scroll) {
    min-height: 45px;
  }

  .radio-option {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 8px;
  }

  .ellipsis {
    max-width: 80px;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .radio-option__icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }
</style>