bfg-common 1.0.0

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newPciDevice/directPathIo/DirectPathIo.vue

@@ -0,0 +1,44 @@
+<template>
+  <atoms-stack-block :has-children="false">
+    <template #stackBlockContent>
+      <div class="select">
+        <select id="direct-path-io" v-model="valueLocal">
+          <option
+            v-for="item in props.passthroughDevices.items"
+            :key="item.id"
+            :value="item"
+          >
+            {{ item.id }} | {{ item.device_name }}
+          </option>
+        </select>
+      </div>
+    </template>
+  </atoms-stack-block>
+</template>
+
+<script lang="ts" setup>
+import {
+  UI_I_ConfigureAllPciDevicesItem,
+  UI_I_ConfigurePciDevicesTable,
+} from '~/models/store/host/interfaces'
+
+const props = defineProps<{
+  modelValue: UI_I_ConfigureAllPciDevicesItem
+  pciDeviceIndex: number
+  passthroughDevices: UI_I_ConfigurePciDevicesTable
+}>()
+const emits = defineEmits<{
+  (event: 'update:model-value', value: UI_I_ConfigureAllPciDevicesItem): void
+}>()
+
+const valueLocal = computed<UI_I_ConfigureAllPciDevicesItem>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue: UI_I_ConfigureAllPciDevicesItem) {
+    emits('update:model-value', newValue)
+  },
+})
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newPciDevice/dynamicDirectPathIo/DynamicDirectPathIo.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.pciDevice }}
+      </template>
+      <template #stackBlockContent>
+        <div>{{ localization.connectAnyFollowing }}:</div>
+        <atoms-select-the-select
+          v-model="localValue"
+          :options="options"
+          test-id="dynamic-direct-path-io-select"
+        >
+          <span class="text-uppercase">{{ localization.selectHardware }}</span>
+        </atoms-select-the-select>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_Option } from '~/components/atoms/select/models/interfaces'
+import { optionsConfig } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/newPciDevice/dynamicDirectPathIo/config/options'
+
+const props = defineProps<{
+  modelValue: string
+  pciDeviceIndex: number
+}>()
+const emits = defineEmits<{
+  (event: 'update:model-value', value: string): void
+}>()
+
+const localValue = computed<string>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emits('update:model-value', newValue)
+  },
+})
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const options = ref<UI_I_Option[]>(optionsConfig)
+localValue.value = '' + options.value[0].value
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newPciDevice/dynamicDirectPathIo/config/options.ts

@@ -0,0 +1,10 @@
+export const optionsConfig = [
+  {
+    text: 'NetXtreme BCM5719 Gigabit Ethernet',
+    value: 'net_xtreme_BCM5719_gigabit_ethernet',
+  },
+  {
+    text: 'NetXtreme BCM5719 Gigabit Ethernet (NEWNETPCI)',
+    value: 'net_xtreme_BCM5719_gigabit_ethernet_NEWNETPCI',
+  },
+]

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newPciDevice/note/Note.vue

@@ -0,0 +1,27 @@
+<template>
+  <atoms-stack-block :has-children="false">
+    <template #stackBlockContent>
+      <span>
+        <atoms-the-icon
+          name="warning"
+          width="16px"
+          heigth="16px"
+          class="note-icon"
+        />
+      </span>
+      <span>{{ localization.note }}: {{ localization.pciDeviceNote }}</span>
+    </template>
+  </atoms-stack-block>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_Localization } from '~/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+.note-icon {
+  margin-bottom: -4px;
+}
+</style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newPciDevice/nvidiaGrid/NvidiaGrid.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.nvidiaGridGpuProfile }}
+      </template>
+      <template #stackBlockContent>
+        <input
+          :id="`nvidia-grid-${props.pciDeviceIndex}`"
+          type="text"
+          v-model="profile"
+        />
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_Localization } from '~/models/interfaces'
+
+const props = defineProps<{
+  modelValue: string
+  pciDeviceIndex: number
+}>()
+const emits = defineEmits<{
+  (event: 'update:model-value', value: string): void
+}>()
+
+const profile = computed<string>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emits('update:model-value', newValue)
+  },
+})
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newPciDevice/typeSelection/TypeSelection.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <div
+            v-for="(item, index) in options"
+            :key="item"
+            class="flex-align-center"
+          >
+            <input
+              :id="`pci-device-radio-input-${props.pciDeviceIndex}-${index}`"
+              type="radio"
+              :value="item"
+              :disabled="!!index"
+              v-model="selectedType"
+            />
+            <label
+              :for="`pci-device-radio-input-${props.pciDeviceIndex}-${index}`"
+              >{{ item.text }}</label
+            >
+          </div>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const props = defineProps<{
+  modelValue: UI_I_OptionItem
+  options: UI_I_OptionItem[]
+  pciDeviceIndex: number
+}>()
+const emits = defineEmits<{
+  (event: 'update:model-value', value: UI_I_OptionItem): void
+}>()
+
+const selectedType = computed<UI_I_OptionItem>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue: UI_I_OptionItem) {
+    emits('update:model-value', newValue)
+  },
+})
+</script>
+
+<style scoped lang="scss">
+input,
+label {
+  margin-right: 4px;
+}
+</style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newUsbController/NewUsbController.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="hardware-cpu">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        <div class="flex-align-center">
+          <span>{{ localization.newUsbController }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent>
+        <div class="select">
+          <select
+            id="usb-controller-select"
+            v-model="selectedUsbController"
+            @click.stop
+          >
+            <option
+              v-for="(item, key) in usbControllerOptions"
+              :key="key"
+              :value="item.value"
+            >
+              {{ item.text }}
+            </option>
+          </select>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import { usbControllerOptionsConfig } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/newUsbController/config/options'
+
+const props = withDefaults(
+  defineProps<{
+    usbController: string
+    isEdit: boolean
+  }>(),
+  {
+    usbController: 'usb2',
+  }
+)
+const emits = defineEmits<{
+  (event: 'send-data', str: string): void
+}>()
+
+const localization = computed(() => useLocal())
+
+const selectedUsbController = ref<string>(props.usbController)
+const usbControllerOptions = ref<UI_I_OptionItem[]>(usbControllerOptionsConfig)
+
+watch(
+  selectedUsbController,
+  (val) => {
+    emits('send-data', val)
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+#network-connect {
+  margin-right: 4px;
+}
+</style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newUsbController/config/options.ts

@@ -0,0 +1,6 @@
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export const usbControllerOptionsConfig: UI_I_OptionItem[] = [
+  { text: 'USB 2.0', value: 'usb2' },
+  { text: 'USB 3.1', value: 'usb31' },
+]

package/components/common/vm/actions/add/customizeHardware/virtualHardware/other/InputDevices.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.inputDevices }}
+      </template>
+      <template #stackBlockContent>
+        <p>{{ localization.keyboard }}</p>
+        <p>{{ localization.pointingDevice }}</p>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/other/Other.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="hardware-cpu">
+    <atoms-stack-block :has-children="true">
+      <template #stackBlockKey>
+        <span>{{ localization.other }}</span>
+      </template>
+      <template #stackBlockContent>
+        <span>{{ localization.additionalHardware }}</span>
+      </template>
+      <template #stackChildren>
+        <common-vm-actions-add-customize-hardware-virtual-hardware-other-input-devices />
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+#network-connect {
+  margin-right: 4px;
+}
+</style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/reservation/Reservation.vue

@@ -0,0 +1,228 @@
+<template>
+  <div>
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.reservation }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <div class="tooltip-top-left combobox-container flex-align-center">
+            <atoms-tooltip-error
+                :has-error="!!reservationLocalAndApiErrorsTexts"
+                :selector="`#vm-wizard-${props.componentType}-reservation input`"
+                @remove="onRemoveValidationError"
+            >
+              <template #elem>
+                <atoms-combobox
+                    :id="`vm-wizard-${props.componentType}-reservation`"
+                    v-model="reservationLocal"
+                    :items="reservationOptions"
+                    :disabled="props.disabled"
+                    @click.stop
+                    @select="onSelectReservation"
+                />
+              </template>
+              <template #content>{{
+                  reservationLocalAndApiErrorsTexts
+                }}</template>
+            </atoms-tooltip-error>
+          </div>
+          <div class="select">
+            <select
+                id="reserve-type-select"
+                :disabled="props.disabled"
+                v-model="reservationTypeLocal"
+            >
+              <option
+                  v-for="(item, key) in reservationTypeOptions"
+                  :key="key"
+                  :value="item.value"
+              >
+                {{ item.text }}
+              </option>
+            </select>
+          </div>
+        </div>
+        <div
+            v-if="props.reserveGuestMemory !== undefined"
+            class="flex-align-center"
+        >
+          <input
+              id="reserve-guest-memory"
+              :value="props.reserveGuestMemory"
+              type="checkbox"
+              disabled
+          />
+          <label
+              for="reserve-guest-memory"
+              :class="['label-text-normal all-memory', { 'div-disabled': true }]"
+          >{{ localization.reserveGuestMemory }}</label
+          >
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import {
+  reservationOptionsFunc,
+  reservationTypeOptionsFunc,
+} from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/reservation/config/options'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = withDefaults(
+    defineProps<{
+      reservation: string
+      reservationType: string
+      type: 'mb' | 'mhz'
+      componentType: string
+      errorValidationFields: UI_I_ErrorValidationField<string>[]
+      disabled?: boolean
+      reserveGuestMemory?: boolean
+      multiply?: number
+    }>(),
+    {
+      reserveGuestMemory: undefined,
+      multiply: 1,
+    }
+)
+const emits = defineEmits<{
+  (event: 'update:reservation', value: string): void
+  (event: 'update:reservation-type', value: string): void
+  (event: 'invalid', value: boolean): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const { $binary } = useNuxtApp()
+
+const binaryKeys: [string, string] =
+    props.type === 'mb' ? ['mb', 'gb'] : ['mhz', 'ghz']
+
+const minReservation = props.type === 'mb' ? 2 : 0
+const maxReservation = props.type === 'mb' ? 16384 : 4794
+const reservationOptions = computed<UI_I_OptionItem[]>(() => {
+  const max = $binary.universalFromTo(
+      maxReservation,
+      binaryKeys[0],
+      binaryKeys[1],
+      5
+  )
+  return reservationOptionsFunc(
+      localization.value,
+      minReservation,
+      max,
+      binaryKeys
+  )
+})
+const onSelectReservation = ({
+                               value,
+                               type,
+                             }: {
+  value: number
+  type: string
+}): void => {
+  if (reservationTypeLocal.value === type) {
+    reservationLocal.value = '' + value
+    return
+  }
+
+  reservationLocal.value =
+      '' + $binary.universalFromTo(value, type, reservationTypeLocal.value, 12)
+}
+
+const reservationTypeOptions = ref<UI_I_OptionItem[]>(
+    reservationTypeOptionsFunc(localization.value, binaryKeys)
+)
+
+const reservationLocal = computed<string>({
+  get() {
+    return props.reservation
+  },
+  set(newValue) {
+    emits('update:reservation', '' + newValue)
+  },
+})
+const reservationTypeLocal = computed<string>({
+  get() {
+    return props.reservationType
+  },
+  set(newValue) {
+    emits('update:reservation-type', newValue)
+  },
+})
+
+const reservationErrorLocalText = computed<string>(() => {
+  const value =
+      reservationTypeLocal.value === binaryKeys[0]
+          ? +reservationLocal.value
+          : $binary.universalFromTo(
+              reservationLocal.value,
+              binaryKeys[1],
+              binaryKeys[0],
+              12
+          )
+  if (value < minReservation || value > maxReservation) {
+    return localization.value.reservationMustBe
+        .replace('{0}', `${minReservation} ${localization.value[binaryKeys[0]]}`)
+        .replace('{1}', `${maxReservation} ${localization.value[binaryKeys[0]]}`)
+  }
+
+  const validValue = /^\d+(\.\d+)?$/.test(reservationLocal.value + '')
+  if (!validValue) {
+    return localization.value.inputContainsInvalidCharacters
+  }
+
+  if (value % props.multiply !== 0) {
+    return localization.value.valueShouldMultiple.replace(
+        '{0}',
+        `${props.multiply} ${binaryKeys[0].toUpperCase()}`
+    )
+  }
+
+  return ''
+})
+
+const typeError = computed<string>(
+    () => `${props.componentType}.reservation_mb`
+)
+
+const apiError = computed<string>(() => {
+  return (
+      props.errorValidationFields?.find(
+          (message) => message.field === typeError.value
+      )?.error_message || ''
+  )
+})
+const reservationLocalAndApiErrorsTexts = computed<string>(() => {
+  const localError = reservationErrorLocalText.value
+
+  let result = ''
+  if (localError && !apiError.value) result = localError
+  if (!localError && apiError.value) result = apiError.value
+  if (localError && apiError.value) result = localError + ', ' + apiError.value
+
+  return result
+})
+const reservationInvalid = computed<boolean>(
+    () => !!reservationErrorLocalText.value
+)
+watch(reservationInvalid, (val) => {
+  emits('invalid', val)
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError.value)
+}
+
+</script>
+
+<style scoped>
+.all-memory {
+  margin-left: 7px;
+}
+</style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/reservation/config/options.ts

@@ -0,0 +1,33 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export const reservationOptionsFunc = (
+  localization: UI_I_Localization,
+  minReservation: number,
+  maxReservation: number,
+  binaryKeys: [string, string]
+): UI_I_OptionItem[] => {
+  return [
+    {
+      text: `${localization.minimum} ${minReservation} ${
+        localization[binaryKeys[0]]
+      }`,
+      value: { value: minReservation, type: binaryKeys[0] },
+    },
+    {
+      text: `${localization.maximum} ${maxReservation} ${
+        localization[binaryKeys[1]]
+      }`,
+      value: { value: maxReservation, type: binaryKeys[1] },
+    },
+  ]
+}
+export const reservationTypeOptionsFunc = (
+  localization: UI_I_Localization,
+  binaryKeys: [string, string]
+): UI_I_OptionItem[] => {
+  return [
+    { text: localization[binaryKeys[0]], value: binaryKeys[0] },
+    { text: localization[binaryKeys[1]], value: binaryKeys[1] },
+  ]
+}

package/components/common/vm/actions/add/customizeHardware/virtualHardware/videoCard/Graphics.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.threeDGraphics }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <input id="graphics" v-model="graphicsLocal" type="checkbox" />
+          <label for="graphics" class="label-text-normal">{{
+            localization.enable3dSupport
+          }}</label>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  graphics: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'update:graphics', value: boolean): void
+}>()
+
+const graphicsLocal = computed<boolean>({
+  get() {
+    return props.graphics
+  },
+  set(newValue) {
+    emits('update:graphics', newValue)
+  },
+})
+</script>
+
+<style scoped>
+#graphics {
+  margin: 0 4px 4px 0;
+}
+</style>