bfg-common 1.0.0

package/components/common/vm/actions/add/customizeHardware/vmoptions/remoteConsoleOptions/zlibCompression/ZlibCompression.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.zlibCompression }}
+      </template>
+      <template #stackBlockContent>
+        <atoms-tooltip-error
+          :has-error="!!apiError"
+          selector="#vm-wizard-zlib-compression-field"
+          @remove="onRemoveValidationError"
+        >
+          <template #elem>
+            <div class="select">
+              <select
+                id="vm-wizard-zlib-compression-field"
+                v-model="zlibCompressionLocal"
+              >
+                <option
+                  v-for="(item, key) in zlibCompressionOptions"
+                  :key="key"
+                  :value="item.value"
+                >
+                  {{ item.text }}
+                </option>
+              </select>
+            </div>
+          </template>
+          <template #content>
+            {{ apiError }}
+          </template>
+        </atoms-tooltip-error>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import { zlibCompressionOptionsFunc } from '~/components/common/vm/actions/add/customizeHardware/vmoptions/remoteConsoleOptions/zlibCompression/config/config'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  zlibCompression: string
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:zlib-compression', value: string): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const zlibCompressionOptions = ref<UI_I_OptionItem[]>(
+  zlibCompressionOptionsFunc(localization.value)
+)
+
+const zlibCompressionLocal = computed<string>({
+  get() {
+    return props.zlibCompression
+  },
+  set(newValue) {
+    emits('update:zlib-compression', newValue)
+  },
+})
+
+const typeError = 'options.remote_console.spice.zlib_glz_compression'
+
+const apiError = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find((message) => message.field === typeError)
+      ?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError)
+}
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/add/customizeHardware/vmoptions/remoteConsoleOptions/zlibCompression/config/config.ts

@@ -0,0 +1,12 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export const zlibCompressionOptionsFunc = (
+  localization: UI_I_Localization
+): UI_I_OptionItem[] => {
+  return [
+    { text: localization.auto, value: 'auto' },
+    { text: localization.always, value: 'always' },
+    { text: localization.never, value: 'never' },
+  ]
+}

package/components/common/vm/actions/add/customizeHardware/vmoptions/tools/Tools.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="hardware-cpu">
+    <atoms-stack-block :has-children="true">
+      <template #stackBlockKey>
+        <div class="flex-align-center">
+          <span>{{ localization.tools }}</span>
+        </div>
+      </template>
+      <template #stackChildren>
+        <atoms-stack-block :has-children="false">
+          <template #stackBlockKey>
+            {{ localization.toolsEnable }}
+          </template>
+          <template #stackBlockContent>
+            <input id="tools-2" v-model="tools" type="checkbox" />
+            <label for="tools-2" class="label-text-normal">{{
+              localization.enable
+            }}</label>
+          </template>
+        </atoms-stack-block>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_SendDataTools } from '~/components/common/vm/actions/add/customizeHardware/vmoptions/models/interfaces'
+import { UI_I_Localization } from '~/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    tools: boolean
+  }>(),
+  {
+    tools: true,
+  }
+)
+const emits = defineEmits<{
+  (event: 'send-data', value: UI_I_SendDataTools): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const tools = ref<boolean>(props.tools)
+
+watch(
+  tools,
+  () => {
+    emits('send-data', {
+      enabled: tools.value,
+      synchronized_time: tools.value,
+    })
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+#tools-1,
+#tools-2 {
+  margin: 0 4px 4px 0;
+}
+</style>

package/components/common/vm/actions/add/models/enums.ts

@@ -0,0 +1,89 @@
+export enum UI_E_Fields {
+  'storage.id' = 2,
+  'storage.name' = 2,
+  'storage.type' = 2,
+  'storage.pool' = 2,
+  'compatibility' = 3,
+  'guest_os_family' = 4,
+  'guest_os_version' = 4,
+  'machine_type' = 4,
+  'cpu.vcpus' = 5,
+  'cpu.max_vcpus' = 5,
+  'cpu.shares' = 5,
+  'cpu.core_per_socket' = 5,
+  'cpu.model' = 5,
+  'memory.size_mb' = 5,
+  'memory.limit_mb' = 5,
+  'memory.reservation_mb' = 5,
+  'video_card.adapter' = 5,
+  'video_card.displays' = 5,
+  'video_card.memory_mb' = 5,
+  'options.remote_console.type' = 5,
+  'options.remote_console.spice.img_compression' = 5,
+  'options.remote_console.spice.jpeg_compression' = 5,
+  'options.remote_console.spice.zlib_glz_compression' = 5,
+  'options.remote_console.spice.streaming_mode' = 5,
+  'options.boot_options.firmware' = 5,
+  'disk_devices' = 5,
+  'network_devices' = 5,
+}
+
+export enum UI_E_GetElemByField {
+  'storage.id' = '#none',
+  'storage.name' = '#none',
+  'storage.type' = '#none',
+  'storage.pool' = '#none',
+  'compatibility' = '#version-select',
+  'guest_os_family' = '#os-select',
+  'guest_os_version' = '#os-version-select',
+  'machine_type' = '#machine-type-select',
+  'cpu.vcpus' = '#vm-wizard-vcpus-field input',
+  'cpu.max_vcpus' = '#vm-wizard-max-vcpus-field input',
+  'cpu.shares' = '#vm-wizard-shares-field input',
+  'cpu.core_per_socket' = '#vm-wizard-core-per-socket-field',
+  'cpu.model' = '#vm-wizard-cpu-model-field',
+  'memory.size_mb' = '#vm-wizard-memory-field input',
+  'memory.limit_mb' = '.memory-limit .combobox-container input',
+  'memory.reservation_mb' = '.memory-reservation .combobox-container input',
+  'video_card.adapter' = '#vm-wizard-video-card-adapter-field',
+  'video_card.displays' = '#vm-wizard-video-card-display-field',
+  'video_card.memory_mb' = '#vm-wizard-video-card-memory-field',
+  'options.remote_console.type' = '#vm-wizard-remote-console-type-field',
+  'options.remote_console.spice.img_compression' = '#vm-wizard-img-compression-field',
+  'options.remote_console.spice.jpeg_compression' = '#vm-wizard-jpeg-compression-field',
+  'options.remote_console.spice.zlib_glz_compression' = '#vm-wizard-zlib-compression-field',
+  'options.remote_console.spice.streaming_mode' = '#vm-wizard-streaming-mode-field',
+  'options.boot_options.firmware' = '#vm-wizard-firmware-field',
+  'disk_devices.bus' = '.vm-wizard-disk-device-bus-field',
+  'disk_devices.target' = '.vm-wizard-disk-device-target-field',
+  'disk_devices.provision_type' = '.vm-wizard-disk-device-provisioning-field',
+  'disk_devices.disk_mode' = '.vm-wizard-disk-device-mode-field',
+  'disk_devices.cache' = '.vm-wizard-disk-device-cache-field',
+  'disk_devices.io' = '.vm-wizard-disk-device-io-field',
+  'disk_devices.sharing' = '.vm-wizard-disk-device-sharing-field',
+  'network_devices.network' = '.vm-wizard-network-field',
+  'network_devices.mac_address' = '.vm-wizard-network-mac-address-field',
+  'network_devices.model' = '.vm-wizard-network-model-field',
+  '' = '#none',
+}
+export enum UI_E_GetToggleBlockElemByField {
+  'cpu.vcpus' = '.stack-block-expandable #vm-wizard-toggle-block-cpu',
+  'cpu.max_vcpus' = '.stack-block-expandable #vm-wizard-toggle-block-cpu',
+  'cpu.shares' = '.stack-block-expandable #vm-wizard-toggle-block-cpu',
+  'cpu.core_per_socket' = '.stack-block-expandable #vm-wizard-toggle-block-cpu',
+  'cpu.model' = '.stack-block-expandable #vm-wizard-toggle-block-cpu',
+  'memory.size_mb' = '.stack-block-expandable #vm-wizard-toggle-block-memory',
+  'memory.limit_mb' = '.stack-block-expandable #vm-wizard-toggle-block-memory',
+  'memory.reservation_mb' = '.stack-block-expandable #vm-wizard-toggle-block-memory',
+  'video_card.adapter' = '.stack-block-expandable #vm-wizard-toggle-block-video-card',
+  'video_card.displays' = '.stack-block-expandable #vm-wizard-toggle-block-video-card',
+  'video_card.memory_mb' = '.stack-block-expandable #vm-wizard-toggle-block-video-card',
+  'options.remote_console.type' = '.stack-block-expandable #vm-wizard-toggle-block-remote-console',
+  'options.remote_console.spice.img_compression' = '.stack-block-expandable #vm-wizard-toggle-block-remote-console',
+  'options.remote_console.spice.jpeg_compression' = '.stack-block-expandable #vm-wizard-toggle-block-remote-console',
+  'options.remote_console.spice.zlib_glz_compression' = '.stack-block-expandable #vm-wizard-toggle-block-remote-console',
+  'options.remote_console.spice.streaming_mode' = '.stack-block-expandable #vm-wizard-toggle-block-remote-console',
+  'options.boot_options.firmware' = '.stack-block-expandable #vm-wizard-toggle-block-boot-option',
+  'disk_devices' = '.stack-block-expandable .vm-wizard-toggle-block-hard-disk',
+  'network_devices' = '.stack-block-expandable .vm-wizard-toggle-block-network',
+}

package/components/common/vm/actions/add/models/interfaces.ts

@@ -0,0 +1,125 @@
+import { UI_I_DatastoreTableItem } from '~/models/store/storage/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import {
+  UI_I_SendDataNewNetwork,
+  UI_I_SendDataNewPciDevice,
+  UI_I_SendDataVideoCard,
+} from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/interfaces'
+import { UI_I_SendDataVmoptions } from '~/components/common/vm/actions/add/customizeHardware/vmoptions/models/interfaces'
+import {UI_I_TreeNode} from "~/components/common/recursionTree/models/interfaces";
+
+export interface UI_I_VmForm {
+  name: string
+  compatibility: string
+  storage: UI_I_DatastoreTableItem | null
+  guestMachineType: UI_I_OptionItem | null
+  guestOsFamily: UI_I_OptionItem | null
+  guestOsVersion: UI_I_OptionItem | null
+  computeResource: UI_I_TreeNode | null
+  dataCenter: UI_I_TreeNode | null
+}
+export interface UI_I_VmFormCash {
+  dataCenterId: string | number | null
+  computeResourceTypeAndId: string | null
+}
+
+export interface UI_I_ErrorMessage {
+  title: string
+  descriptions: string[]
+}
+
+interface UI_I_CreateVmDataStorage {
+  id: string
+}
+interface UI_I_CreateVmDataCpu {
+  vcpus: number
+  max_vcpus: number
+  core_per_socket: number
+  model: string
+  reservation_mhz: number
+  limit_mhz: number
+  shares: number
+  hotplug: boolean
+}
+interface UI_I_CreateVmDataMemory {
+  size_mb: number
+  hotplug: boolean
+  reservation_mb: number
+  limit_mb: number
+}
+export interface UI_I_CreateVmDataUsbController {
+  type: string
+}
+interface UI_I_CreateVmDataInputDevices {
+  type: string
+  bus: string
+}
+export interface UI_I_CreateVmDataNewDiskDevice {
+  create: boolean
+  size: number
+  bus: string
+  storage_id: string
+  provision_type: string
+  disk_mode: string
+  boot_order: number
+}
+export interface UI_I_EditVmDataDiskDevice {
+  size: number
+  source: string
+  storage_id: string
+  device_type: string
+  bus: string
+  target: string
+  boot_order: number
+  provision_type: string
+  disk_mode: string
+  sharing: boolean
+  read_only: boolean
+  shares: number
+  cache: string
+  io: string
+  limit_iops: number
+  discard: string
+  attach: boolean
+  detach: boolean
+  remove: boolean
+  create: boolean
+}
+export interface UI_I_CreateVmDataExistDiskDevice {
+  create: false
+  source: string
+  bus: string
+  device_type: string
+  provision_type: string
+  disk_mode: string
+  boot_order: number
+}
+export interface UI_I_CreateVmDataCdDvdDevice {
+  create: false
+  source: string
+  bus: string
+  device_type: 'cdrom'
+  boot_order: number
+}
+export interface UI_I_CreateVmData {
+  name: string
+  uuid: string
+  compatibility: string
+  guest_os_family: string
+  guest_os_version: string
+  machine_type: string
+  video_card: UI_I_SendDataVideoCard
+  disk_devices: (
+    | UI_I_CreateVmDataNewDiskDevice
+    | UI_I_CreateVmDataExistDiskDevice
+    | UI_I_CreateVmDataCdDvdDevice
+  )[]
+  network_devices: UI_I_SendDataNewNetwork[]
+  pci_pt_devices: UI_I_SendDataNewPciDevice[]
+  options: UI_I_SendDataVmoptions
+  storage: UI_I_CreateVmDataStorage
+  cpu: UI_I_CreateVmDataCpu
+  memory: UI_I_CreateVmDataMemory
+  usb_controllers: UI_I_CreateVmDataUsbController[]
+  input_devices: UI_I_CreateVmDataInputDevices[]
+}

package/components/common/vm/actions/add/models/types.ts

@@ -0,0 +1,63 @@
+import { UI_I_VmForm } from '~/components/common/vm/actions/add/models/interfaces'
+import {
+  UI_I_SendDataCpu,
+  UI_I_SendDataMemory,
+  UI_I_SendDataNewCdDvdDrive,
+  UI_I_SendDataNewHardDisk,
+  UI_I_SendDataNewNetwork,
+} from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/interfaces'
+import { UI_I_SendDataCustomizeHardware } from '~/components/common/vm/actions/add/customizeHardware/models/interfaces'
+import { UI_I_Localization } from '~/models/interfaces'
+
+export type UI_T_Field =
+  | 'storage.id'
+  | 'storage.name'
+  | 'storage.type'
+  | 'storage.pool'
+  | 'compatibility'
+  | 'guest_os_family'
+  | 'guest_os_version'
+  | 'machine_type'
+  | 'cpu.vcpus'
+  | 'cpu.max_vcpus'
+  | 'cpu.shares'
+  | 'cpu.core_per_socket'
+  | 'cpu.model'
+  | 'memory.size_mb'
+  | 'memory.limit_mb'
+  | 'memory.reservation_mb'
+  | 'video_card.adapter'
+  | 'video_card.displays'
+  | 'video_card.memory_mb'
+  | 'options.remote_console.type'
+  | 'options.remote_console.spice.img_compression'
+  | 'options.remote_console.spice.jpeg_compression'
+  | 'options.remote_console.spice.zlib_glz_compression'
+  | 'options.remote_console.spice.streaming_mode'
+  | 'options.boot_options.firmware'
+  | 'disk_devices.bus'
+  | 'disk_devices.target'
+  | 'disk_devices.provision_type'
+  | 'disk_devices.disk_mode'
+  | 'disk_devices.cache'
+  | 'disk_devices.io'
+  | 'disk_devices.sharing'
+  | 'network_devices.network'
+  | 'network_devices.mac_address'
+  | 'network_devices.model'
+  | ''
+
+export type UI_T_SelectedNavItem = 0 | 1
+
+export type UI_T_AddVmFinishFunc<T = void> = (
+  vmForm: UI_I_VmForm,
+  virtualHardwareCpu: UI_I_SendDataCpu | null,
+  virtualHardwareMemory: UI_I_SendDataMemory | null,
+  customizeHardware: UI_I_SendDataCustomizeHardware | null,
+  virtualHardwareNetworks: UI_I_SendDataNewNetwork[] | null,
+  virtualHardwareHardDisks: UI_I_SendDataNewHardDisk[] | null,
+  virtualHardwareCdDvdDrives: UI_I_SendDataNewCdDvdDrive[] | null,
+  isPowerOnByDefault: boolean,
+  localization: UI_I_Localization,
+  isValidation?: boolean
+) => Promise<T>

package/components/common/vm/actions/add/readyToComplete/ReadyToComplete.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <atoms-table-info :items="props.readyCompleteTableInfo" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_TableInfoItem } from '~/components/atoms/table/info/models/interfaces'
+
+const props = defineProps<{
+  readyCompleteTableInfo: UI_I_TableInfoItem[]
+}>()
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/vm/actions/add/select/compatibility/Compatibility.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="select-compatibility">
+    <p class="select-compatibility-block">
+      {{
+        localization.hostSupportsMoreVirtualMachineVersionSelectCompatibilityVirtualMachine
+      }}
+    </p>
+    <div class="select-compatibility-block version-select-wrap">
+      <label for="version-select">{{ localization.compatibleWith }}:</label>
+
+      <atoms-tooltip-error
+        :has-error="!!apiError"
+        selector="#vm-wizard-version-select"
+        @remove="onRemoveValidationError"
+      >
+        <template #elem>
+          <select id="vm-wizard-version-select" v-model="selectedVersion">
+            <option v-for="(item, key) in versions" :key="key" :value="item">
+              {{ item.text }}
+            </option>
+          </select>
+        </template>
+        <template #content>{{ apiError }}</template>
+      </atoms-tooltip-error>
+      <div id="version-select-help-icon" class="flex-align-center relative">
+        <atoms-the-icon
+          fill="#0072a3"
+          width="24px"
+          height="24px"
+          name="info-circle"
+          @click="isShowHelp = !isShowHelp"
+        />
+        <atoms-tooltip-signpost
+          v-if="isShowHelp"
+          elem-id="version-select-help-icon"
+          @hide="isShowHelp = false"
+        >
+          <h3 class="help-title">{{ localization.help }}</h3>
+
+          <p>
+            {{
+              localization.eachVirtualMachineCompatibilitySettingIncludesHardwareAvailableVirtualMachine
+            }}
+          </p>
+
+          <a id="more-information-link" class="pointer">{{
+            localization.moreInformation
+          }}</a>
+        </atoms-tooltip-signpost>
+      </div>
+    </div>
+    <p class="select-compatibility-block">
+      {{ versionDescription }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const props = defineProps<{
+  options: UI_I_OptionItem[]
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+}>()
+const emits = defineEmits<{
+  (event: 'change', value: UI_I_OptionItem): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const versions = ref<UI_I_OptionItem[]>(props.options)
+const selectedVersion = ref<UI_I_OptionItem | null>(null)
+watch(
+  () => props.options,
+  (val) => {
+    versions.value = [...val]
+    selectedVersion.value = val[0]
+  },
+  { immediate: true }
+)
+
+const versionDescription = computed<string>(() => {
+  if (!selectedVersion.value) return ''
+
+  const version = selectedVersion.value.value.split('-')[1]
+  const text = selectedVersion.value.text
+
+  if (selectedVersion.value === versions.value.at(-1)) {
+    return localization.value.virtualMachineUsesHardwareVersionAvailable
+      .replace('{0}', version)
+      .replace('{1}', text)
+  }
+
+  return localization.value.virtualMachineUsesHardwareVersionUnavailable
+    .replace('{0}', version)
+    .replace('{1}', text)
+})
+
+watch(
+  selectedVersion,
+  (val) => {
+    if (!val) return
+    emits('change', val)
+  },
+  { immediate: true }
+)
+
+const isShowHelp = ref(false)
+
+const apiError = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === 'compatibility'
+    )?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', 'compatibility')
+}
+</script>
+
+<style scoped lang="scss">
+.select-compatibility-block {
+  margin-top: 12px;
+  font-size: 13px;
+
+  &.version-select-wrap {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    #version-select-help-icon {
+      .help-title {
+        font-size: 22px;
+      }
+
+      p {
+        width: 200px;
+      }
+
+      a {
+        color: #0072a3;
+      }
+    }
+  }
+}
+</style>