bfg-common 1.0.0

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

@@ -0,0 +1,27 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.maximumSize }}
+      </template>
+      <template #stackBlockContent>
+        <span> {{ freeGb }} </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 { $binary } = useNuxtApp()
+
+const props = defineProps<{
+  freeMb: number
+}>()
+
+const freeGb = computed<number>(() => $binary.round(props.freeMb))
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,447 @@
+<template>
+  <div class="hardware-cpu">
+    <atoms-stack-block
+      :has-children="true"
+      :is-roll-back="props.type === 'removed'"
+      :removable="isRemovable"
+      @remove="onRemoveHardDisk"
+      @roll-back="onRollBackHardDisk"
+    >
+      <template #stackBlockKey>
+        <div class="vm-wizard-toggle-block-hard-disk flex-align-center">
+          <span>{{ label }}</span>
+          <atoms-the-icon
+            v-show="hardDiskInvalid"
+            width="24px"
+            height="24px"
+            class="is-error tooltip-trigger"
+            name="info"
+          />
+        </div>
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center flex-space-between mr-1">
+          <template v-if="props.type === 'removed'">
+            <span>{{ localization.deviceWillRemoved }}</span>
+            <div class="flex-align-center">
+              <input
+                id="delete-files-from-datastore"
+                v-model="deleteFilesFromDatastore"
+                :disabled="props.disabled"
+                type="checkbox"
+                class="pointer"
+                @click.stop
+              />
+              <label
+                for="delete-files-from-datastore"
+                :class="[
+                  'label-text-normal pointer',
+                  props.disabled && 'div-disabled',
+                ]"
+                >{{ localization.deleteFilesFromDatastore }}</label
+              >
+            </div>
+          </template>
+          <template v-else>
+            <atoms-tooltip-error
+              :has-error="!!hardDiskLocalAndApiErrorsTexts"
+              :selector="`#vm-wizard-hard-disk-${props.index}`"
+              @remove="
+                emits(
+                  'remove-error-by-title',
+                  `disk_devices[${props.index}].size`
+                )
+              "
+            >
+              <template #elem>
+                <input
+                  :id="`vm-wizard-hard-disk-${props.index}`"
+                  v-model.number="size"
+                  type="number"
+                  :class="[
+                    'spinfree edit-setting-input',
+                    { 'has-error': hardDiskTypeErrorLocalText },
+                  ]"
+                  :disabled="isDisabledSize"
+                  @blur="onValidateSize"
+                  @click.stop
+                />
+              </template>
+              <template #content>
+                {{ hardDiskLocalAndApiErrorsTexts }}
+              </template>
+            </atoms-tooltip-error>
+            <div class="select ml-1">
+              <select
+                :id="`hard-disk-type-select-${props.index}`"
+                v-model="hardDiskType"
+                :disabled="props.type === 'exist'"
+                @change="onValidateSize"
+                @click.stop
+              >
+                <option
+                  v-for="(item, key) in hardDiskTypeOptions"
+                  :key="key"
+                  :value="item.value"
+                >
+                  {{ item.text }}
+                </option>
+              </select>
+            </div>
+          </template>
+        </div>
+      </template>
+      <template #stackChildren>
+        <common-vm-actions-add-customize-hardware-virtual-hardware-new-hard-disk-maximum-size
+          :free-mb="maxHardDisk"
+        />
+        <common-vm-actions-add-customize-hardware-virtual-hardware-new-hard-disk-location
+          v-if="props.type === 'new'"
+          :location="location"
+          :index="props.index"
+          :error-validation-fields="props.errorValidationFields"
+          :get-datastore-table-func="props.getDatastoreTableFunc"
+          :datastore="props.datastore"
+          @change="onChangeStorage"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+        <common-vm-actions-add-customize-hardware-virtual-hardware-new-hard-disk-file
+          v-else
+          :path="props.hardDisk?.source"
+        />
+        <common-vm-actions-add-customize-hardware-virtual-hardware-new-hard-disk-provisioning
+          v-model:disk-provisioning="diskProvisioning"
+          :index="props.index"
+          :error-validation-fields="props.errorValidationFields"
+          :disabled="(props.isEdit && props.type !== 'new') || isRunning"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+        <common-vm-actions-add-customize-hardware-virtual-hardware-new-hard-disk-sharing
+          v-model:sharing="sharing"
+          :index="props.index"
+          :error-validation-fields="props.errorValidationFields"
+          :disabled="isRunning && props.type !== 'new'"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+        <common-vm-actions-add-customize-hardware-virtual-hardware-new-hard-disk-limit-iops
+          v-model:limit-iops="limitIops"
+          v-model:limit-iops-type="limitIopsType"
+          :index="props.index"
+          :error-validation-fields="props.errorValidationFields"
+          @valid="limitIopsInvalid = $event"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+        <common-vm-actions-add-customize-hardware-virtual-hardware-new-hard-disk-mode
+          v-model:diskMode="diskMode"
+          :index="props.index"
+          :error-validation-fields="props.errorValidationFields"
+          :disabled="isRunning && props.type !== 'new'"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+        <common-vm-actions-add-customize-hardware-virtual-hardware-new-hard-disk-cache
+          v-model:cache="cache"
+          :index="props.index"
+          :error-validation-fields="props.errorValidationFields"
+          :disabled="(props.isEdit && props.type !== 'new') || isRunning"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+        <common-vm-actions-add-customize-hardware-virtual-hardware-bus
+          v-model:bus="bus"
+          :index="props.index"
+          :error-validation-fields="props.errorValidationFields"
+          :disabled="isRunning"
+          component-type="disk_devices"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_DatastoreTableItem } from '~/models/store/storage/interfaces'
+import {
+  UI_I_SendDataNewHardDisk,
+  UI_I_SendDataNewHardDiskStorage,
+} from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/interfaces'
+import { UI_T_HardDiskType } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/types'
+import { UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_ErrorValidationField,
+  UI_I_TablePayload,
+} 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'
+
+const props = defineProps<{
+  storage: UI_I_DatastoreTableItem | null
+  hardDisk: UI_I_SendDataNewHardDisk
+  type: UI_T_HardDiskType
+  index: number
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  datastore: UI_I_DatastoreTableItem[]
+  isEdit: boolean
+  state?: string
+}>()
+const emits = defineEmits<{
+  (event: 'send-data', value: UI_I_SendDataNewHardDisk): void
+  (event: 'invalid', value: boolean): void
+  (event: 'remove'): void
+  (event: 'roll-back'): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isRunning = computed<boolean>(() => {
+  return props.state === '1'
+})
+
+const isRemovable = computed<boolean>(() => {
+  return (
+    !props.isEdit ||
+    !isRunning.value ||
+    (isRunning.value && bus.value === 'virtio')
+  )
+})
+
+const typeError = computed<string>(() => `disk_devices[${props.index}].size`)
+
+const apiErrorLocal = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === typeError.value
+    )?.error_message || ''
+  )
+})
+
+const { $binary } = useNuxtApp()
+
+const label = computed<string>(() => {
+  if (props.type === 'edit' || props.type === 'removed')
+    return `${localization.value.hardDisk} ${props.index + 1}`
+
+  return `${localization.value.newHardDisk} *`
+})
+
+const maxHardDisk = computed<number>(() => {
+  if (props.type === 'exist') return $binary.gbToMb(props.hardDisk.size)
+
+  if (!storage.value) return 0
+
+  return storage.value.capacity.free_mb
+})
+const hardDiskTypeErrorLocalText = computed<string>(() => {
+  if (
+    +sizeInMb.value >
+    maxHardDisk.value + (props.isEdit ? firstSizeInMb : 0)
+  ) {
+    return localization.value.diskCapacitySpecifiedGreater
+  }
+
+  if (+sizeInMb.value <= 0) {
+    return localization.value.diskCapacityCannotZero
+  }
+
+  return ''
+})
+
+const hardDiskLocalAndApiErrorsTexts = computed<string>(() => {
+  const localError = hardDiskTypeErrorLocalText.value
+  const apiError = apiErrorLocal.value
+
+  let result = ''
+  if (localError && !apiError) result = localError
+  if (!localError && apiError) result = apiError
+  if (localError && apiError) result = localError + ', ' + apiError
+  if (!localError && apiError) result = apiError
+
+  return result
+})
+
+const deleteFilesFromDatastore = ref<boolean>(false)
+
+const hardDiskType = ref<string>('gb')
+const hardDiskTypeOptions = ref<UI_I_OptionItem[]>(
+  binaryOptionsFunc(localization.value)
+)
+
+const size = ref<number>(props.hardDisk.size) // Изначально всегда приходит в gb
+const sizeInMb = computed<number>(() => {
+  if (hardDiskType.value === 'mb') {
+    return size.value
+  }
+
+  return $binary.universalFromTo(size.value, hardDiskType.value, 'mb')
+})
+let firstSizeInMb = 0
+watch(
+  sizeInMb,
+  (newValue) => {
+    firstSizeInMb = firstSizeInMb || newValue
+  },
+  { immediate: true }
+)
+const onValidateSize = (): void => {
+  if (props.type !== 'edit') return
+  if (sizeInMb.value < $binary.gbToMb(props.hardDisk.size)) {
+    size.value = $binary.universalFromTo(
+      props.hardDisk.size,
+      'gb',
+      hardDiskType.value
+    )
+  }
+}
+
+const isDisabledSize = computed<boolean>(() => {
+  return props.type === 'exist' || (props.type === 'edit' && readOnly.value)
+})
+
+const onRemoveHardDisk = (): void => {
+  emits('remove')
+}
+const onRollBackHardDisk = (): void => {
+  emits('roll-back')
+}
+
+const location = ref<UI_I_DatastoreTableItem | null>(props.storage || null)
+watch(
+  () => props.storage,
+  (val) => {
+    location.value = val
+    storage.value = val
+  }
+)
+const storage = ref<UI_I_DatastoreTableItem | null>(props.storage)
+const onChangeStorage = (item: UI_I_DatastoreTableItem): void => {
+  storage.value = item
+}
+
+const diskProvisioning = ref<string>('thick')
+const sharing = ref<string>('')
+const shares = ref<number>(0)
+
+const limitIops = ref<number>(16)
+const limitIopsType = ref<string>('unlimited')
+const limitIopsInvalid = ref<boolean>(false)
+
+const diskMode = ref<string>('dependent')
+
+const cache = ref<string>('none')
+
+const bus = ref<string>('ide')
+
+const readOnly = ref<boolean>(false)
+
+const discard = ref<string>('')
+
+const io = ref<string>('')
+
+const target = ref<string>('')
+
+watch(
+  [
+    sizeInMb,
+    storage,
+    diskProvisioning,
+    sharing,
+    limitIops,
+    limitIopsType,
+    diskMode,
+    cache,
+    bus,
+    () => props.type,
+  ],
+  () => {
+    const limitIopsLocal =
+      limitIopsType.value === 'unlimited' ? 0 : limitIops.value
+    const storageLocal: UI_I_SendDataNewHardDiskStorage = {
+      id: storage.value?.id || '',
+      name: storage.value?.name || '',
+      type: storage.value?.type_text || '',
+      pool: storage.value?.pool_name || '',
+      user: '',
+      endpoint: '',
+      password: '',
+      protocol: '',
+      options: '',
+    }
+
+    emits('send-data', {
+      create: props.hardDisk.create,
+      source: props.hardDisk.source,
+      size: sizeInMb.value,
+      bus: bus.value,
+      target: target.value,
+      storage: storageLocal,
+      device_type: 'disk',
+      provision_type: diskProvisioning.value,
+      disk_mode: diskMode.value,
+      sharing: sharing.value === 'yes',
+      read_only: readOnly.value,
+      shares: shares.value,
+      cache: cache.value,
+      io: io.value,
+      limit_iops: limitIopsLocal,
+      discard: discard.value,
+      capacity: sizeInMb.value,
+      boot_order: -1,
+      detach: props.type === 'removed' && !deleteFilesFromDatastore.value, // Проверяем если удалили диск но не указали Delete files from datastore
+      remove: props.type === 'removed' && deleteFilesFromDatastore.value, // Проверяем если удалили диск и указали Delete files from datastore
+    })
+  },
+  { immediate: true }
+)
+
+// Добавляем данные для редактирования
+watch(
+  () => props.hardDisk,
+  (newValue) => {
+    if (props.type !== 'edit') return
+
+    diskProvisioning.value = newValue.provision_type || 'thick'
+    sharing.value = newValue.sharing ? 'yes' : ''
+    shares.value = newValue.shares || 0
+    limitIopsType.value = newValue.io === 'native' ? 'unlimited' : 'custom'
+    limitIops.value = newValue.limit_iops || 16
+    diskMode.value = newValue.disk_mode || 'dependent'
+    cache.value = newValue.cache || 'none'
+    bus.value = newValue.bus || 'ide'
+    readOnly.value = newValue.read_only || false
+    discard.value = newValue.discard || ''
+    io.value = newValue.io || ''
+    target.value = newValue.target || ''
+  },
+  { immediate: true }
+)
+watch(
+  isRunning,
+  (newValue) => {
+    if (newValue && props.type === 'new') {
+      bus.value = 'virtio'
+    }
+  },
+  { immediate: true }
+)
+
+const hardDiskInvalid = computed<boolean>(() => {
+  return !!hardDiskTypeErrorLocalText.value || limitIopsInvalid.value
+})
+watch(hardDiskInvalid, (val) => {
+  emits('invalid', val)
+})
+</script>
+
+<style scoped lang="scss">
+.hardware-cpu {
+  #hard-disk {
+    width: 100px;
+    -webkit-appearance: none;
+
+    &.has-error {
+      border: 1px solid #db2100;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,80 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.cache }}
+      </template>
+      <template #stackBlockContent>
+        <atoms-tooltip-error
+          :has-error="!!apiError"
+          :selector="`.vm-wizard-disk-device-cache-field-${props.index}`"
+          @remove="onRemoveValidationError"
+        >
+          <template #elem>
+            <div class="select">
+              <select
+                :id="`vm-wizard-disk-device-cache-field-${props.index}`"
+                v-model="cacheLocal"
+                :class="`vm-wizard-disk-device-cache-field-${props.index}`"
+                :disabled="props.disabled"
+              >
+                <option
+                  v-for="(item, key) in cacheOptions"
+                  :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 { cacheOptions } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/cache/config/options'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  cache: string
+  index: number
+  disabled: boolean
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:cache', value: string): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const cacheLocal = computed<string>({
+  get() {
+    return props.cache
+  },
+  set(newValue) {
+    emits('update:cache', newValue)
+  },
+})
+
+const typeError = computed<string>(() => `disk_devices[${props.index}].cache`)
+
+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></style>

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

@@ -0,0 +1,7 @@
+export const cacheOptions = [
+  { text: 'None', value: 'none' },
+  { text: 'Write Through', value: 'writethrough' },
+  { text: 'Write Back', value: 'writeback' },
+  { text: 'Direct Sync', value: 'directsync' },
+  { text: 'Unsafe', value: 'unsafe' },
+]