bfg-common 1.0.0

package/components/common/vm/actions/add/customizeHardware/virtualHardware/memory/Memory.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="hardware-memory">
+    <atoms-stack-block :has-children="true">
+      <template #stackBlockKey>
+        <div id="vm-wizard-toggle-block-memory" class="flex-align-center">
+          <span>{{ localization.memory }}</span>
+          <atoms-the-icon
+            v-show="memoryInvalid"
+            width="24px"
+            height="24px"
+            class="is-error tooltip-trigger"
+            name="info"
+          />
+        </div>
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <atoms-tooltip-error
+            :has-error="!!memorySizeLocalAndApiErrorsTexts"
+            selector="#vm-wizard-memory-field input"
+            @remove="onRemoveValidationError"
+          >
+            <template #elem>
+              <atoms-combobox
+                id="vm-wizard-memory-field"
+                v-model="selectedMemory"
+                :items="memoryOptions"
+                :disabled="isMemoryDisabled"
+                @click.stop
+                @select="selectMemory"
+              />
+            </template>
+            <template #content>{{ memorySizeLocalAndApiErrorsTexts }}</template>
+          </atoms-tooltip-error>
+
+          <div class="select ml-1">
+            <select
+              id="vm-wizard-memory-type-select"
+              v-model="memoryType"
+              @click.stop
+            >
+              <option
+                v-for="(item, key) in memoryTypeOptions"
+                :key="key"
+                :value="item.value"
+              >
+                {{ item.text }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </template>
+      <template #stackChildren>
+        <common-vm-actions-add-customize-hardware-virtual-hardware-reservation
+          v-model:reservation="reservation"
+          v-model:reservation-type="reservationType"
+          v-model:reserve-guest-memory="reserveGuestMemory"
+          :error-validation-fields="props.errorValidationFields"
+          :multiply="2"
+          :disabled="isDisabled"
+          component-type="memory"
+          type="mb"
+          class="memory-reservation"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+          @invalid="reservationInvalid = $event"
+        />
+        <common-vm-actions-add-customize-hardware-virtual-hardware-limit
+          v-model:limit="limit"
+          v-model:limit-type="limitType"
+          :error-validation-fields="props.errorValidationFields"
+          :limit-options="limitOptions"
+          :disabled="isDisabled"
+          type="mb"
+          component-type="memory"
+          class="memory-limit"
+          @invalid="limitInvalid = $event"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+        <common-vm-actions-add-customize-hardware-virtual-hardware-memory-hot-plug
+          v-model:memory-hot-plug="memoryHotPlug"
+          :disabled="isDisabledMemoryHotPlug"
+        />
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { API_UI_I_VmEditMemory } from '~/models/store/vm/interfaces'
+import { UI_I_SendDataMemory } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/interfaces'
+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 { binaryOptionsFunc } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/config/binaryOptions'
+import { memoryOptionsFunc } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/memory/config/memoryOptions'
+
+const props = defineProps<{
+  maxMemory: number
+  isEdit: boolean
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+  state?: string
+  memory?: API_UI_I_VmEditMemory
+}>()
+const emits = defineEmits<{
+  (event: 'send-data', value: UI_I_SendDataMemory): void
+  (event: 'invalid', value: boolean): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $binary } = useNuxtApp()
+
+const minMemoryInMb = 128
+watch(
+  () => props.maxMemory,
+  (newValue) => {
+    memoryOptions.value = memoryOptionsFunc(
+      localization.value,
+      minMemoryInMb,
+      newValue
+    )
+  }
+)
+
+const isDisabled = computed<boolean>(() => {
+  return props.state === '1'
+})
+
+const isMemoryDisabled = computed<boolean>(
+  () => isDisabled.value && !memoryHotPlug.value
+)
+
+const selectedMemory = ref<number>(4)
+const memoryType = ref<string>('gb')
+const memoryTypeOptions = ref<UI_I_OptionItem[]>(
+  binaryOptionsFunc(localization.value)
+)
+const memoryInMb = computed<number>(() => {
+  if (memoryType.value === 'mb') {
+    return +selectedMemory.value
+  }
+
+  return $binary.universalFromTo(+selectedMemory.value, memoryType.value, 'mb')
+})
+
+const memoryOptions = ref<UI_I_OptionItem[]>(
+  memoryOptionsFunc(localization.value, minMemoryInMb, props.maxMemory)
+)
+const selectMemory = (mb: number): void => {
+  if (memoryType.value === 'mb') {
+    selectedMemory.value = mb
+    return
+  }
+
+  selectedMemory.value = $binary.universalFromTo(mb, 'mb', memoryType.value, 12)
+}
+
+const memoryErrorLocalText = computed<string>(() => {
+  const validValue = /^\d+(\.\d+)?$/.test(selectedMemory.value + '')
+  if (!validValue) {
+    return localization.value.inputContainsInvalidCharacters
+  }
+
+  const maxMemoryInGb = $binary.mbToGb(props.maxMemory)
+  if (memoryInMb.value < minMemoryInMb || memoryInMb.value > props.maxMemory) {
+    return localization.value.memoryMustBe
+      .replace('{0}', `${minMemoryInMb} ${localization.value.mb}`)
+      .replace('{1}', `${maxMemoryInGb} ${localization.value.gb}`)
+  }
+
+  if (memoryInMb.value % 2 !== 0) {
+    return localization.value.valueShouldMultiple.replace(
+      '{0}',
+      `${2} ${localization.value.mb}`
+    )
+  }
+  return ''
+})
+
+const apiErrorLocal = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === 'memory.size_mb'
+    )?.error_message || ''
+  )
+})
+
+const memorySizeLocalAndApiErrorsTexts = computed<string>(() => {
+  const localError = memoryErrorLocalText.value
+  const apiError = apiErrorLocal.value
+
+  let result = ''
+  if (localError && !apiError) result = localError
+  if (apiError && !localError) result = apiError
+  if (localError && apiError) result = localError + ', ' + apiError
+  if (!localError && apiError) result = apiError
+
+  return result
+})
+
+const reservationInvalid = ref<boolean>(false)
+const limitInvalid = ref<boolean>(false)
+const memoryInvalid = computed<boolean>(
+  () =>
+    !!memorySizeLocalAndApiErrorsTexts.value ||
+    reservationInvalid.value ||
+    limitInvalid.value
+)
+watch(memoryInvalid, (val) => {
+  emits('invalid', val)
+})
+
+const reservation = ref<string>('2')
+const reservationType = ref<string>('mb')
+const reserveGuestMemory = ref<boolean>(false)
+
+const limit = ref<string>('Unlimited')
+const limitType = ref<string>('mb')
+const limitOptions = computed<UI_I_OptionItem[] | undefined>(() => {
+  if (memoryHotPlug.value)
+    return memoryOptionsFunc(
+      localization.value,
+      memoryInMb.value,
+      props.maxMemory
+    )
+})
+
+const memoryHotPlug = ref<boolean>(false)
+const isDisabledMemoryHotPlug = computed(
+  () => memoryInMb.value >= props.maxMemory || isDisabled.value
+)
+watch(isDisabledMemoryHotPlug, (newValue) => {
+  if (newValue) memoryHotPlug.value = false
+})
+
+watch(
+  [memoryInMb, memoryHotPlug, reservation, reservationType, limit],
+  () => {
+    const reservationInMb =
+      reservationType.value === 'mb'
+        ? reservation.value
+        : '' +
+          $binary.universalFromTo(
+            reservation.value,
+            reservationType.value,
+            'mb',
+            12
+          )
+    emits('send-data', {
+      memory: '' + memoryInMb.value,
+      hotplug: memoryHotPlug.value,
+      reservation_mb: reservationInMb,
+      limit_mb: limit.value,
+    })
+  },
+  { immediate: true }
+)
+
+// Добавляем данные для редактирования
+watch(
+  () => props.memory,
+  (newValue) => {
+    if (!newValue) return
+
+    selectedMemory.value = $binary.mbToGb(newValue.size_mb)
+    reservation.value = '' + newValue.reservation_mb
+    limit.value = '' + newValue.limit_mb
+    memoryHotPlug.value = newValue.hotplug
+  },
+  { immediate: true }
+)
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', 'memory.size_mb')
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/memory/MemoryHotPlug.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.memoryHotPlug }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <input
+            id="memory-hot-plug"
+            v-model="memoryHotPlugLocal"
+            type="checkbox"
+            :disabled="props.disabled"
+          />
+          <label
+            for="memory-hot-plug"
+            :class="['label-text-normal', props.disabled && 'div-disabled']"
+            >{{ localization.enable }}</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<{
+  memoryHotPlug: boolean
+  disabled: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'update:memory-hot-plug', status: boolean): void
+}>()
+
+const memoryHotPlugLocal = computed<boolean>({
+  get() {
+    return props.memoryHotPlug
+  },
+  set(newValue) {
+    emits('update:memory-hot-plug', newValue)
+  },
+})
+</script>
+
+<style scoped>
+#memory-hot-plug {
+  margin: 4px 4px 0 0;
+}
+</style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/memory/config/memoryOptions.ts

@@ -0,0 +1,23 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export const memoryOptionsFunc = (
+  localization: UI_I_Localization,
+  min: number,
+  max: number
+): UI_I_OptionItem[] => {
+  const { $binary } = useNuxtApp()
+  return [
+    {
+      text: `${localization.minimum} ${$binary.round(min)}`,
+      // text: `${localization.minimum} ${min} ${localization.mb}`,
+      value: min,
+    },
+    {
+      text: `${localization.maximum} ${$binary.mbToGb(max, 0)} ${
+        localization.gb
+      }`,
+      value: max,
+    },
+  ]
+}

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

@@ -0,0 +1,125 @@
+export interface UI_I_InvalidKeys {
+  [key: number]: boolean
+}
+
+export interface UI_I_SendDataVirtualHardware {
+  cpu: UI_I_SendDataCpu | null
+  memory: UI_I_SendDataMemory | null
+  hardDisks: UI_I_SendDataNewHardDisk[]
+  networks: UI_I_SendDataNewNetwork[]
+  cdDvdDrives: UI_I_SendDataNewCdDvdDrive[]
+  usbController: string | null
+  pciDevices: UI_I_SendDataNewPciDevice[]
+  videoCard: UI_I_SendDataVideoCard | null
+}
+
+export interface UI_I_SendDataCpu {
+  vcpus: number
+  max_vcpus: number
+  core_per_socket: number
+  model: string
+  reservation_mhz: number
+  limit_mhz: string
+  shares: number
+  hotplug: boolean
+}
+
+export interface UI_I_SendDataMemory {
+  memory: string
+  hotplug: boolean
+  reservation_mb: string
+  limit_mb: string
+}
+
+export interface UI_I_SendDataVideoCard {
+  adapter: string
+  displays: number
+  memory_mb: number
+}
+
+export interface UI_I_SendDataNewHardDiskStorage {
+  id: string
+  name: string
+  type: string
+  pool: string
+  endpoint: string
+  user: string
+  password: string
+  protocol: string
+  options: string
+}
+export interface UI_I_SendDataNewHardDisk {
+  create: boolean
+  source: string
+  size: number
+  bus?: string
+  target?: string
+  storage?: UI_I_SendDataNewHardDiskStorage
+  device_type?: string
+  provision_type?: string
+  disk_mode?: string
+  sharing?: boolean
+  read_only?: boolean
+  shares?: number
+  cache?: string
+  io?: string
+  limit_iops?: number
+  discard?: string
+  storage_id?: string
+  capacity?: number
+  boot_order?: number
+  attach?: boolean
+  detach?: boolean
+  remove?: boolean
+}
+
+export interface UI_I_SendDataNewNetwork {
+  network: string
+  net_bridge: string
+  mac: string
+  target: string
+  model: string
+  boot_order: number
+}
+export interface UI_I_SendDataNewCdDvdDrive {
+  create: boolean
+  source: string
+  bus: string
+  device_type: 'cdrom'
+  boot_order: number
+  size?: number
+  target?: string
+  storage_id?: string
+  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
+}
+export interface UI_I_SendDataNewPciDevice {
+  id: string
+  vendor_name: string
+  class_name: string
+  device_name: string
+}
+
+export interface UI_I_HardDisk {
+  create: boolean
+  size: number
+  path: string
+  index: number
+}
+
+export interface UI_I_PciDevice {
+  id: string
+  vendor_name: string
+  class_name: string
+  device_name: string
+}

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

@@ -0,0 +1,4 @@
+export type UI_T_HardDiskType = 'new' | 'edit' | 'exist' | 'removed'
+export type UI_T_PciDeviceType = 'new' | 'edit'
+export type UI_T_NetworkType = 'new' | 'edit'
+export type UI_T_CdDvdType = 'new' | 'edit'

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/DiskFile.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.diskFile }}
+      </template>
+      <template #stackBlockContent>
+        <span> {{ props.path }} </span>
+      </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<{
+  path: string
+}>()
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/Location.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.location }}
+      </template>
+      <template #stackBlockContent>
+        <atoms-tooltip-error
+          :has-error="!!apiError"
+          :selector="`.vm-wizard-disk-device-target-field-${props.index}`"
+          @remove="onRemoveValidationError"
+        >
+          <template #elem>
+            <div class="select">
+              <select
+                :id="`vm-wizard-disk-device-target-field-${props.index}`"
+                v-model="selectedLocation"
+                :class="`vm-wizard-disk-device-target-field-${props.index}`"
+                @change="changeLocation"
+              >
+                <option
+                  v-for="(item, key) in locationOptions"
+                  :key="key"
+                  :value="item.value"
+                >
+                  {{ item.text }}
+                </option>
+              </select>
+            </div>
+          </template>
+          <template #content>{{ apiError }}</template>
+        </atoms-tooltip-error>
+      </template>
+    </atoms-stack-block>
+
+    <Teleport to="body">
+      <atoms-modal
+        class="storage-modal"
+        :show="storageModalIsShow"
+        :title="localization.selectStorage"
+        @submit="onSubmitStorageModal"
+        @hide="onHideStorageModal"
+      >
+        <template #modalBody>
+          <span>{{
+            localization.followingDatastoresAccessibleDestinationResourceThatSelected
+          }}</span>
+          <common-vm-actions-add-select-storage
+            :storage-submit="storageSubmit"
+            :datastore="props.datastore"
+            :get-datastore-table-func="props.getDatastoreTableFunc"
+            hide-compatibility
+            @submit="changeStorage"
+          />
+        </template>
+      </atoms-modal>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_DatastoreTableItem } from '~/models/store/storage/interfaces'
+import { UI_I_Localization, UI_I_HTMLSelectElement } from '~/models/interfaces'
+import {
+  UI_I_ErrorValidationField,
+  UI_I_TablePayload,
+} from '~/models/store/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  location: UI_I_DatastoreTableItem | null
+  index: number
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+  datastore: UI_I_DatastoreTableItem[]
+  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+}>()
+const emits = defineEmits<{
+  (event: 'change', value: UI_I_DatastoreTableItem): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const selectedLocation = ref<string>(props.location?.id || '')
+
+const storages = ref<UI_I_DatastoreTableItem[]>([])
+const addStorage = (storage: UI_I_DatastoreTableItem): void => {
+  const hasStorage = storages.value.some((item) => item.id === storage.id)
+  if (hasStorage) {
+    return
+  }
+
+  storages.value.push(storage)
+}
+const locationOptions = ref<UI_I_OptionItem[]>([])
+
+watch(
+  () => props.location,
+  (val) => {
+    if (locationOptions.value.length || !val) {
+      return
+    }
+
+    locationOptions.value = [
+      { text: localization.value.storeWithVirtualMachine, value: val.id },
+      { text: `${localization.value.browse}...`, value: -1 },
+    ]
+    selectedLocation.value = val.id
+    storages.value.push(val)
+    addStorage(val)
+  },
+  { immediate: true }
+)
+
+const storageSubmit = ref<number>(0)
+const onSubmitStorageModal = (): void => {
+  storageSubmit.value++
+}
+const storageModalIsShow = ref(false)
+const changeStorage = (storage: UI_I_DatastoreTableItem): void => {
+  locationOptions.value = [
+    locationOptions.value[0],
+    { text: storage.name, value: storage.id },
+    // @ts-ignore
+    locationOptions.value.at(-1),
+  ]
+
+  selectedLocation.value = storage.id
+  emits('change', storage)
+  addStorage(storage)
+  onHideStorageModal()
+}
+const onHideStorageModal = (): void => {
+  storageModalIsShow.value = false
+}
+const changeLocation = (e: UI_I_HTMLSelectElement): void => {
+  const value = +e.target.value
+  if (value === -1) {
+    storageModalIsShow.value = true
+    return
+  }
+
+  selectedLocation.value = e.target.value
+  const storage = storages.value.find((item) => item.id === e.target.value)
+  storage && emits('change', storage)
+}
+
+const typeError = computed<string>(
+  () => `disk_devices[${props.index}].location`
+)
+
+const apiError = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === typeError.value
+    )?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError.value)
+}
+</script>
+
+<style scoped lang="scss">
+.storage-modal {
+  :deep(.modal-dialog) {
+    width: 864px;
+  }
+}
+</style>