bfg-common 1.4.367 → 1.4.369

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

@@ -1,462 +1,462 @@
-<template>
-  <div class="hardware-hard-disk">
-    <atoms-stack-block
-      :has-children="true"
-      :is-roll-back="props.type === 'removed'"
-      :removable="isRemovable"
-      :test-id="`hard-disk-stack-block-${props.index}`"
-      @remove="onRemoveHardDisk"
-      @roll-back="onRollBackHardDisk"
-    >
-      <template #stackBlockKey>
-        <div
-          :id="`vm-wizard-toggle-block-hard-disk-${props.index}`"
-          :data-id="`vm-wizard-toggle-block-hard-disk-${props.index}`"
-          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.common.deviceWillRemoved }}</span>
-            <div @click.stop class="flex-align-center">
-              <input
-                :id="`hard-disk-delete-files-from-datastore-${props.index}`"
-                v-model="deleteFilesFromDatastore"
-                :data-id="`hard-disk-delete-files-from-datastore-${props.index}`"
-                :disabled="props.disabled"
-                type="checkbox"
-                class="pointer"
-                @click.stop
-              />
-              <label
-                :for="`hard-disk-delete-files-from-datastore-${props.index}`"
-                :class="[
-                  'label-text-normal pointer',
-                  props.disabled && 'div-disabled',
-                ]"
-                >{{ localization.common.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"
-                  :data-id="`vm-wizard-hard-disk-${props.index}`"
-                  type="number"
-                  :class="[
-                    'spinfree edit-setting-input input-text-color',
-                    { '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"
-                :data-id="`hard-disk-type-select-${props.index}`"
-                :disabled="props.type === 'exist'"
-                class="input-text-color"
-                @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-common-customize-hardware-virtual-hardware-new-hard-disk-maximum-size
-          :free-mb="maxHardDisk"
-        />
-        <common-vm-actions-common-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-common-customize-hardware-virtual-hardware-new-hard-disk-file
-          v-else
-          :path="props.hardDisk?.source"
-        />
-        <common-vm-actions-common-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-common-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-common-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-common-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-common-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-common-customize-hardware-virtual-hardware-bus
-          v-model:bus="bus"
-          :index="props.index"
-          :error-validation-fields="props.errorValidationFields"
-          :disabled="isRunning"
-          :help-text="localization.common.busVirtioHelpDesc"
-          :test-id="`vm-wizard-disk-bus-field-${props.index}`"
-          component-type="disk_devices"
-          :guest-machine-type="props.guestMachineType"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-        />
-      </template>
-    </atoms-stack-block>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
-import type {
-  UI_I_SendDataNewHardDisk,
-  UI_I_SendDataNewHardDiskStorage,
-} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
-import type { UI_T_HardDiskType } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/types'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
-import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import { binaryOptionsFunc } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/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 | number
-  guestMachineType?: UI_I_OptionItem | null
-}>()
-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 === 2
-})
-
-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.common.hardDisk} ${props.index + 1}`
-
-  return `${localization.value.common.newHardDisk} *`
-})
-
-const maxHardDisk = computed<number>(() => {
-  if (props.type === 'exist') return $binary.gbToMb(props.hardDisk.size)
-
-  if (!storage.value) return 0
-
-  if (props.isEdit)
-    return storage.value.capacity.free_mb + $binary.gbToMb(props.hardDisk.size)
-
-  return storage.value.capacity.free_mb
-})
-const hardDiskTypeErrorLocalText = computed<string>(() => {
-  if (+sizeInMb.value > maxHardDisk.value) {
-    return localization.value.common.diskCapacitySpecifiedGreater
-  }
-
-  if (+sizeInMb.value <= 0) {
-    return localization.value.common.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')
-})
-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,
-  (newValue) => {
-    location.value = newValue
-    storage.value = newValue
-  }
-)
-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,
-    deleteFilesFromDatastore,
-    () => 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,
-      attach: props.hardDisk.attach,
-      source: props.hardDisk.source,
-      size: Math.ceil(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: Math.ceil(sizeInMb.value),
-      boot_order: props.hardDisk.boot_order,
-      detach: props.type === 'removed',
-      remove: props.type === 'removed' && deleteFilesFromDatastore.value, // Проверяем если удалили диск и указали Delete files from datastore
-    })
-  },
-  { immediate: true }
-)
-
-// Добавляем данные для редактирования
-watch(
-  () => props.hardDisk,
-  (newValue) => {
-    // TODO refactoring
-    if (props.type === 'exist') {
-      diskProvisioning.value = newValue.provision_type || 'thick'
-      return
-    }
-    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'
-    limitIopsType.value = newValue.limit_iops === 0 ? '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,
-  (newValue) => {
-    emits('invalid', newValue)
-  },
-  { immediate: true }
-)
-</script>
-
-<style scoped lang="scss">
-.hardware-cpu {
-  #hard-disk {
-    width: 100px;
-    -webkit-appearance: none;
-
-    &.has-error {
-      border: 1px solid #db2100;
-    }
-  }
-}
-</style>
+<template>
+  <div class="hardware-hard-disk">
+    <atoms-stack-block
+      :has-children="true"
+      :is-roll-back="props.type === 'removed'"
+      :removable="isRemovable"
+      :test-id="`hard-disk-stack-block-${props.index}`"
+      @remove="onRemoveHardDisk"
+      @roll-back="onRollBackHardDisk"
+    >
+      <template #stackBlockKey>
+        <div
+          :id="`vm-wizard-toggle-block-hard-disk-${props.index}`"
+          :data-id="`vm-wizard-toggle-block-hard-disk-${props.index}`"
+          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.common.deviceWillRemoved }}</span>
+            <div @click.stop class="flex-align-center">
+              <input
+                :id="`hard-disk-delete-files-from-datastore-${props.index}`"
+                v-model="deleteFilesFromDatastore"
+                :data-id="`hard-disk-delete-files-from-datastore-${props.index}`"
+                :disabled="props.disabled"
+                type="checkbox"
+                class="pointer"
+                @click.stop
+              />
+              <label
+                :for="`hard-disk-delete-files-from-datastore-${props.index}`"
+                :class="[
+                  'label-text-normal pointer',
+                  props.disabled && 'div-disabled',
+                ]"
+                >{{ localization.common.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"
+                  :data-id="`vm-wizard-hard-disk-${props.index}`"
+                  type="number"
+                  :class="[
+                    'spinfree edit-setting-input input-text-color',
+                    { '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"
+                :data-id="`hard-disk-type-select-${props.index}`"
+                :disabled="props.type === 'exist'"
+                class="input-text-color"
+                @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-common-customize-hardware-virtual-hardware-new-hard-disk-maximum-size
+          :free-mb="maxHardDisk"
+        />
+        <common-vm-actions-common-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-common-customize-hardware-virtual-hardware-new-hard-disk-file
+          v-else
+          :path="props.hardDisk?.source"
+        />
+        <common-vm-actions-common-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-common-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-common-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-common-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-common-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-common-customize-hardware-virtual-hardware-bus
+          v-model:bus="bus"
+          :index="props.index"
+          :error-validation-fields="props.errorValidationFields"
+          :disabled="isRunning"
+          :help-text="localization.common.busVirtioHelpDesc"
+          :test-id="`vm-wizard-disk-bus-field-${props.index}`"
+          component-type="disk_devices"
+          :guest-machine-type="props.guestMachineType"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type {
+  UI_I_SendDataNewHardDisk,
+  UI_I_SendDataNewHardDiskStorage,
+} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
+import type { UI_T_HardDiskType } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/types'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import { binaryOptionsFunc } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/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 | number
+  guestMachineType?: UI_I_OptionItem | null
+}>()
+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 === 2
+})
+
+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.common.hardDisk} ${props.index + 1}`
+
+  return `${localization.value.common.newHardDisk} *`
+})
+
+const maxHardDisk = computed<number>(() => {
+  if (props.type === 'exist') return $binary.gbToMb(props.hardDisk.size)
+
+  if (!storage.value) return 0
+
+  if (props.isEdit)
+    return storage.value.capacity.free_mb + $binary.gbToMb(props.hardDisk.size)
+
+  return storage.value.capacity.free_mb
+})
+const hardDiskTypeErrorLocalText = computed<string>(() => {
+  if (+sizeInMb.value > maxHardDisk.value) {
+    return localization.value.common.diskCapacitySpecifiedGreater
+  }
+
+  if (+sizeInMb.value <= 0) {
+    return localization.value.common.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')
+})
+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,
+  (newValue) => {
+    location.value = newValue
+    storage.value = newValue
+  }
+)
+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,
+    deleteFilesFromDatastore,
+    () => 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,
+      attach: props.hardDisk.attach,
+      source: props.hardDisk.source,
+      size: Math.ceil(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: Math.ceil(sizeInMb.value),
+      boot_order: props.hardDisk.boot_order,
+      detach: props.type === 'removed',
+      remove: props.type === 'removed' && deleteFilesFromDatastore.value, // Проверяем если удалили диск и указали Delete files from datastore
+    })
+  },
+  { immediate: true }
+)
+
+// Добавляем данные для редактирования
+watch(
+  () => props.hardDisk,
+  (newValue) => {
+    // TODO refactoring
+    if (props.type === 'exist') {
+      diskProvisioning.value = newValue.provision_type || 'thick'
+      return
+    }
+    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'
+    limitIopsType.value = newValue.limit_iops === 0 ? '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,
+  (newValue) => {
+    emits('invalid', newValue)
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+.hardware-cpu {
+  #hard-disk {
+    width: 100px;
+    -webkit-appearance: none;
+
+    &.has-error {
+      border: 1px solid #db2100;
+    }
+  }
+}
+</style>