bfg-common 1.5.812 → 1.5.813

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

@@ -1,502 +1,511 @@
-<template>
-<!--TODO 111-->
-<!--  v-model:vm-storage-policy="vmStoragePolicy"-->
-  <component
-    :is="currentComponent"
-    v-model:delete-files-from-datastore="deleteFilesFromDatastore"
-    v-model:size="sizeLocal"
-    v-model:hard-disk-type="hardDiskType"
-    v-model:disk-provisioning="provisionType"
-    v-model:sharing="sharingLocal"
-    v-model:limit-iops="limitIops"
-    v-model:limit-iops-type="limitIopsType"
-    v-model:limit-iops-invalid="limitIopsInvalid"
-    v-model:disk-mode="diskMode"
-    v-model:cache="cache"
-    v-model:bus="bus"
-    v-model:source="source"
-    :is-removable="isRemovable"
-    :label="label"
-    :hard-disk-invalid="hardDiskInvalid"
-    :error-text="hardDiskLocalAndApiErrorsTexts"
-    :hard-disk-type-error-local-text="hardDiskTypeErrorLocalText"
-    :is-disabled-size="isDisabledSize"
-    :is-disabled-provisioning="isDisabledProvisioning"
-    :is-disabled-sharing="isDisabledSharing"
-    :is-disabled-limit-iops="isDisabledLimitIops"
-    :is-disabled-mode="isDisabledMode"
-    :is-disabled-cache="isDisabledCache"
-    :is-disabled-bus="isDisabledBus"
-    :hard-disk-type-options="hardDiskTypeOptions"
-    :max-hard-disk="maxHardDisk"
-    :location="location"
-    :is-running="isRunning"
-    :is-new-hard-disk="isNewHardDisk"
-    :is-edit="props.isEdit"
-    :datastore="props.datastore"
-    :is-datastore-loading="props.isDatastoreLoading"
-    :get-datastore-table-func="props.getDatastoreTableFunc"
-    :error-validation-fields="props.errorValidationFields"
-    :index="props.index"
-    :type="props.type"
-    :guest-machine-type="props.guestMachineType"
-    :compute-resource="props.computeResource"
-    @remove="emits('remove')"
-    @roll-back="emits('roll-back')"
-    @validate-size="onValidateSize"
-    @change-storage="onChangeStorage"
-    @remove-error-by-title="emits('remove-error-by-title', $event)"
-  />
-</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 type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-import type {
-  UI_T_LimitIopsType
-} from "~/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/limitIops/lib/types";
-import { binaryOptionsFunc } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/config/binaryOptions'
-import {
-  minLimitIops
-} from "~/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/limitIops/lib/config/options";
-
-const size = defineModel<number>('size', { required: true })
-const initialSize = size.value
-// TODO 111
-// const vmStoragePolicy = defineModel<string>('vmStoragePolicy', { required: true })
-// const provisionType = ref<string>('thick')
-const provisionType = defineModel<string>('provisionType', { required: true })
-// const sharing = ref<string>('')
-const sharing = defineModel<boolean>('sharing', { required: true })
-// const sharingLocal = ref<string>(sharing.value ? 'yes' : '')
-const sharingLocal = computed<string>({
-  set(newValue) {
-    sharing.value = newValue === 'yes'
-  },
-  get() {
-    return sharing.value ? 'yes' : ''
-  },
-})
-// const shares = ref<number>(0)
-const shares = defineModel<number>('shares', { required: true })
-
-// const limitIops = ref<number>(16)
-const limitIops = defineModel<number>('limitIops', { required: true })
-const limitIopsType = ref<UI_T_LimitIopsType>(limitIops.value === 0 ? 'unlimited' : 'custom')
-watch(limitIopsType, newValue => {
-  if (newValue === 'unlimited') limitIops.value = minLimitIops
-})
-const limitIopsInvalid = ref<boolean>(false) // ??
-
-// const diskMode = ref<string>('dependent')
-const diskMode = defineModel<string>('diskMode', { required: true })
-
-// const cache = ref<string>('none')
-const cache = defineModel<string>('cache', { required: true })
-
-// const bus = ref<string>('ide')
-const bus = defineModel<string>('bus', { required: true })
-
-// const readOnly = ref<boolean>(false)
-const readOnly = defineModel<boolean>('readOnly', { required: true })
-
-// const discard = ref<string>('')
-const discard = defineModel<string>('discard', { required: true })
-
-// const io = ref<string>('')
-const io = defineModel<string>('io', { required: true })
-
-// const target = ref<string>('')
-const target = defineModel<string>('target', { required: true })
-
-const source = defineModel<string>('source', { required: true })
-
-const storage = defineModel<any>('storage', { required: true })
-
-const remove = defineModel<boolean>('remove', { required: true })
-const detach = defineModel<boolean>('detach', { required: true })
-
-const props = withDefaults(
-  defineProps<{
-    mainStorage: UI_I_DatastoreTableItem | null
-    mainStorageFree: number
-    // hardDisk: UI_I_SendDataNewHardDisk
-    type: UI_T_HardDiskType
-    index: number
-    errorValidationFields: UI_I_ErrorValidationField[]
-    getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
-    datastore: UI_I_DatastoreTableItem[]
-    isDatastoreLoading: boolean
-    isEdit: boolean
-    state?: string | number
-    guestMachineType?: UI_I_OptionItem | null
-    computeResource?: UI_I_TreeNode | null
-  }>(),
-  {
-    state: undefined,
-    guestMachineType: undefined,
-    computeResource: undefined,
-  }
-)
-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
-}>()
-
-watch(
-  () => props.type,
-  (newValue) => {
-    detach.value = newValue === 'removed'
-  }
-)
-
-const { $store, $binary }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
-
-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 || ''
-  )
-})
-
-// PC-1796
-// const isNotNewHardDisk = computed<boolean>(
-//   () => props.type === 'edit' || props.type === 'removed'
-// )
-const isNewHardDisk = computed<boolean>(
-  () => props.type !== 'edit' && props.type !== 'removed'
-)
-const label = computed<string>(() => {
-  // if (props.type === 'edit' || props.type === 'removed')
-  if (!isNewHardDisk.value)
-    return `${localization.value.common.hardDisk} ${props.index + 1}`
-
-  return `${localization.value.common.newHardDisk} *`
-})
-
-const maxHardDisk = computed<number>(() => {
-  // // const hardDiskSizeMb = $binary.gbToMb(props.hardDisk.size)
-  //
-  // if (props.type === 'exist') return initialSize
-  //
-  // if (!storageLocal.value) return 0
-  // const free = (storageLocal.value.capacity.free_mb ||
-  //   storageLocal.value.free) as number // TODO fix
-  //
-  // if (props.type === 'edit') return free + initialSize
-  //
-  // return free
-  if (props.type === 'exist') return initialSize
-
-  if (!storageLocal.value) return 0
-
-  return props.mainStorageFree + size.value
-})
-const hardDiskTypeErrorLocalText = computed<string>(() => {
-  if (size.value > maxHardDisk.value) {
-    return localization.value.common.diskCapacitySpecifiedGreater
-  }
-
-  if (size.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)
-watch(deleteFilesFromDatastore, (newValue) => {
-  remove.value = props.type === 'removed' && newValue
-})
-
-const hardDiskType = ref<string>(size.value < 1024 ? 'mb' : 'gb')
-watch(hardDiskType, (newValue) => {
-  size.value = $binary.universalFromTo(sizeLocal.value, newValue, 'mb')
-})
-const hardDiskTypeOptions = ref<UI_I_OptionItem[]>(
-  binaryOptionsFunc(localization.value)
-)
-
-const sizeLocal = ref<number>(
-  size.value < 1024 ? size.value : $binary.mbToGb(size.value)
-)
-watch(sizeLocal, (newValue) => {
-  if (hardDiskType.value === 'mb') {
-    size.value = newValue
-  }
-
-  size.value = $binary.universalFromTo(newValue, hardDiskType.value, 'mb')
-})
-// 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 (size.value < initialSize) {
-    sizeLocal.value = $binary.universalFromTo(
-      initialSize,
-      'mb',
-      hardDiskType.value
-    )
-  }
-}
-
-const isDisabledSize = computed<boolean>(() => {
-  if (isNewHardDisk.value) return false
-  return (
-    props.type === 'exist' ||
-    (props.type === 'edit' && readOnly.value)
-    // (isRunning.value && provisionType.value === 'thick')
-  )
-})
-const isDisabledProvisioning = computed<boolean>(() => {
-  if (isNewHardDisk.value) return false
-  return props.isEdit || isRunning.value
-})
-const isDisabledSharing = computed<boolean>(() => {
-  return isRunning.value && !isNewHardDisk.value
-})
-const isDisabledLimitIops = computed<boolean>(() => {
-  return isRunning.value && !isNewHardDisk.value
-})
-const isDisabledMode = computed<boolean>(() => {
-  return isRunning.value && !isNewHardDisk.value
-})
-const isDisabledCache = computed<boolean>(() => {
-  if (isNewHardDisk.value) return false
-  return props.isEdit || isRunning.value
-})
-const isDisabledBus = computed<boolean>(() => {
-  return !isNewHardDisk.value && isRunning.value
-})
-
-const location = ref<UI_I_DatastoreTableItem | null>(props.mainStorage || null)
-const storageLocal = ref<UI_I_DatastoreTableItem | null>(props.mainStorage)
-watch(
-  () => props.mainStorage,
-  (newValue) => {
-    location.value = newValue
-    storageLocal.value = newValue
-
-    storage.value = {
-      id: newValue?.id || '',
-      name: newValue?.name || '',
-      type: newValue?.type_text || '',
-      pool: newValue?.pool_name || '',
-      user: '',
-      endpoint: '',
-      password: '',
-      protocol: '',
-      options: '',
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-)
-const onChangeStorage = (item: UI_I_DatastoreTableItem): void => {
-  storageLocal.value = item
-
-  storage.value = {
-    id: item?.id || '',
-    name: item?.name || '',
-    type: item?.type_text || '',
-    pool: item?.pool_name || '',
-    user: '',
-    endpoint: '',
-    password: '',
-    protocol: '',
-    options: '',
-  }
-}
-
-// 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,
-//     (): void => 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
-//     if (props.type !== 'edit' && props.type !== 'clone') return
-//
-//     const sizeInGb = $binary.mbToGb(newValue.size)
-//     if (sizeInGb < 1) {
-//       size.value = newValue.size
-//       hardDiskType.value = 'mb'
-//     } else {
-//       size.value = sizeInGb
-//       hardDiskType.value = 'gb'
-//     }
-//     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"></style>
+<template>
+  <!--TODO 111-->
+  <!--  v-model:vm-storage-policy="vmStoragePolicy"-->
+  <component
+    :is="currentComponent"
+    v-model:delete-files-from-datastore="deleteFilesFromDatastore"
+    v-model:size="sizeLocal"
+    v-model:hard-disk-type="hardDiskType"
+    v-model:disk-provisioning="provisionType"
+    v-model:sharing="sharingLocal"
+    v-model:limit-iops="limitIops"
+    v-model:limit-iops-type="limitIopsType"
+    v-model:limit-iops-invalid="limitIopsInvalid"
+    v-model:disk-mode="diskMode"
+    v-model:cache="cache"
+    v-model:bus="bus"
+    v-model:source="source"
+    :is-removable="isRemovable"
+    :label="label"
+    :hard-disk-invalid="hardDiskInvalid"
+    :error-text="hardDiskLocalAndApiErrorsTexts"
+    :hard-disk-type-error-local-text="hardDiskTypeErrorLocalText"
+    :is-disabled-size="isDisabledSize"
+    :is-disabled-provisioning="isDisabledProvisioning"
+    :is-disabled-sharing="isDisabledSharing"
+    :is-disabled-limit-iops="isDisabledLimitIops"
+    :is-disabled-mode="isDisabledMode"
+    :is-disabled-cache="isDisabledCache"
+    :is-disabled-bus="isDisabledBus"
+    :hard-disk-type-options="hardDiskTypeOptions"
+    :max-hard-disk="maxHardDisk"
+    :location="location"
+    :is-running="isRunning"
+    :is-new-hard-disk="isNewHardDisk"
+    :is-edit="props.isEdit"
+    :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
+    :get-datastore-table-func="props.getDatastoreTableFunc"
+    :error-validation-fields="props.errorValidationFields"
+    :index="props.index"
+    :type="props.type"
+    :guest-machine-type="props.guestMachineType"
+    :compute-resource="props.computeResource"
+    @remove="emits('remove')"
+    @roll-back="emits('roll-back')"
+    @validate-size="onValidateSize"
+    @change-storage="onChangeStorage"
+    @remove-error-by-title="emits('remove-error-by-title', $event)"
+  />
+</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 type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+import type { UI_T_LimitIopsType } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/limitIops/lib/types'
+import { binaryOptionsFunc } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/config/binaryOptions'
+import { minLimitIops } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/limitIops/lib/config/options'
+
+const size = defineModel<number>('size', { required: true })
+const initialSize = size.value
+// TODO 111
+// const vmStoragePolicy = defineModel<string>('vmStoragePolicy', { required: true })
+// const provisionType = ref<string>('thick')
+const provisionType = defineModel<string>('provisionType', { required: true })
+// const sharing = ref<string>('')
+const sharing = defineModel<boolean>('sharing', { required: true })
+// const sharingLocal = ref<string>(sharing.value ? 'yes' : '')
+const sharingLocal = computed<string>({
+  set(newValue) {
+    sharing.value = newValue === 'yes'
+  },
+  get() {
+    return sharing.value ? 'yes' : ''
+  },
+})
+// const shares = ref<number>(0)
+const shares = defineModel<number>('shares', { required: true })
+
+// const limitIops = ref<number>(16)
+const limitIops = defineModel<number>('limitIops', { required: true })
+const limitIopsType = ref<UI_T_LimitIopsType>(
+  !limitIops.value ? 'unlimited' : 'custom'
+)
+watch(limitIopsType, (newValue) => {
+  if (newValue === 'custom') limitIops.value = minLimitIops
+  else limitIops.value = 0
+})
+watch(
+  limitIops,
+  (newValue) => {
+    if (typeof newValue !== 'number') {
+      if (limitIopsType.value === 'custom') limitIops.value = minLimitIops
+      else limitIops.value = 0
+    }
+  },
+  { immediate: true }
+)
+
+const limitIopsInvalid = ref<boolean>(false) // ??
+
+// const diskMode = ref<string>('dependent')
+const diskMode = defineModel<string>('diskMode', { required: true })
+
+// const cache = ref<string>('none')
+const cache = defineModel<string>('cache', { required: true })
+
+// const bus = ref<string>('ide')
+const bus = defineModel<string>('bus', { required: true })
+
+// const readOnly = ref<boolean>(false)
+const readOnly = defineModel<boolean>('readOnly', { required: true })
+
+// const discard = ref<string>('')
+const discard = defineModel<string>('discard', { required: true })
+
+// const io = ref<string>('')
+const io = defineModel<string>('io', { required: true })
+
+// const target = ref<string>('')
+const target = defineModel<string>('target', { required: true })
+
+const source = defineModel<string>('source', { required: true })
+
+const storage = defineModel<any>('storage', { required: true })
+
+const remove = defineModel<boolean>('remove', { required: true })
+const detach = defineModel<boolean>('detach', { required: true })
+
+const props = withDefaults(
+  defineProps<{
+    mainStorage: UI_I_DatastoreTableItem | null
+    mainStorageFree: number
+    // hardDisk: UI_I_SendDataNewHardDisk
+    type: UI_T_HardDiskType
+    index: number
+    errorValidationFields: UI_I_ErrorValidationField[]
+    getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+    datastore: UI_I_DatastoreTableItem[]
+    isDatastoreLoading: boolean
+    isEdit: boolean
+    state?: string | number
+    guestMachineType?: UI_I_OptionItem | null
+    computeResource?: UI_I_TreeNode | null
+  }>(),
+  {
+    state: undefined,
+    guestMachineType: undefined,
+    computeResource: undefined,
+  }
+)
+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
+}>()
+
+watch(
+  () => props.type,
+  (newValue) => {
+    detach.value = newValue === 'removed'
+  }
+)
+
+const { $store, $binary }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
+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 || ''
+  )
+})
+
+// PC-1796
+// const isNotNewHardDisk = computed<boolean>(
+//   () => props.type === 'edit' || props.type === 'removed'
+// )
+const isNewHardDisk = computed<boolean>(
+  () => props.type !== 'edit' && props.type !== 'removed'
+)
+const label = computed<string>(() => {
+  // if (props.type === 'edit' || props.type === 'removed')
+  if (!isNewHardDisk.value)
+    return `${localization.value.common.hardDisk} ${props.index + 1}`
+
+  return `${localization.value.common.newHardDisk} *`
+})
+
+const maxHardDisk = computed<number>(() => {
+  // // const hardDiskSizeMb = $binary.gbToMb(props.hardDisk.size)
+  //
+  // if (props.type === 'exist') return initialSize
+  //
+  // if (!storageLocal.value) return 0
+  // const free = (storageLocal.value.capacity.free_mb ||
+  //   storageLocal.value.free) as number // TODO fix
+  //
+  // if (props.type === 'edit') return free + initialSize
+  //
+  // return free
+  if (props.type === 'exist') return initialSize
+
+  if (!storageLocal.value) return 0
+
+  return props.mainStorageFree + size.value
+})
+const hardDiskTypeErrorLocalText = computed<string>(() => {
+  if (size.value > maxHardDisk.value) {
+    return localization.value.common.diskCapacitySpecifiedGreater
+  }
+
+  if (size.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)
+watch(deleteFilesFromDatastore, (newValue) => {
+  remove.value = props.type === 'removed' && newValue
+})
+
+const hardDiskType = ref<string>(size.value < 1024 ? 'mb' : 'gb')
+watch(hardDiskType, (newValue) => {
+  size.value = $binary.universalFromTo(sizeLocal.value, newValue, 'mb')
+})
+const hardDiskTypeOptions = ref<UI_I_OptionItem[]>(
+  binaryOptionsFunc(localization.value)
+)
+
+const sizeLocal = ref<number>(
+  size.value < 1024 ? size.value : $binary.mbToGb(size.value)
+)
+watch(sizeLocal, (newValue) => {
+  if (hardDiskType.value === 'mb') {
+    size.value = newValue
+  }
+
+  size.value = $binary.universalFromTo(newValue, hardDiskType.value, 'mb')
+})
+// 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 (size.value < initialSize) {
+    sizeLocal.value = $binary.universalFromTo(
+      initialSize,
+      'mb',
+      hardDiskType.value
+    )
+  }
+}
+
+const isDisabledSize = computed<boolean>(() => {
+  if (isNewHardDisk.value) return false
+  return (
+    props.type === 'exist' || (props.type === 'edit' && readOnly.value)
+    // (isRunning.value && provisionType.value === 'thick')
+  )
+})
+const isDisabledProvisioning = computed<boolean>(() => {
+  if (isNewHardDisk.value) return false
+  return props.isEdit || isRunning.value
+})
+const isDisabledSharing = computed<boolean>(() => {
+  return isRunning.value && !isNewHardDisk.value
+})
+const isDisabledLimitIops = computed<boolean>(() => {
+  return isRunning.value && !isNewHardDisk.value
+})
+const isDisabledMode = computed<boolean>(() => {
+  return isRunning.value && !isNewHardDisk.value
+})
+const isDisabledCache = computed<boolean>(() => {
+  if (isNewHardDisk.value) return false
+  return props.isEdit || isRunning.value
+})
+const isDisabledBus = computed<boolean>(() => {
+  return !isNewHardDisk.value && isRunning.value
+})
+
+const location = ref<UI_I_DatastoreTableItem | null>(props.mainStorage || null)
+const storageLocal = ref<UI_I_DatastoreTableItem | null>(props.mainStorage)
+watch(
+  () => props.mainStorage,
+  (newValue) => {
+    location.value = newValue
+    storageLocal.value = newValue
+
+    storage.value = {
+      id: newValue?.id || '',
+      name: newValue?.name || '',
+      type: newValue?.type_text || '',
+      pool: newValue?.pool_name || '',
+      user: '',
+      endpoint: '',
+      password: '',
+      protocol: '',
+      options: '',
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+)
+const onChangeStorage = (item: UI_I_DatastoreTableItem): void => {
+  storageLocal.value = item
+
+  storage.value = {
+    id: item?.id || '',
+    name: item?.name || '',
+    type: item?.type_text || '',
+    pool: item?.pool_name || '',
+    user: '',
+    endpoint: '',
+    password: '',
+    protocol: '',
+    options: '',
+  }
+}
+
+// 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,
+//     (): void => 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
+//     if (props.type !== 'edit' && props.type !== 'clone') return
+//
+//     const sizeInGb = $binary.mbToGb(newValue.size)
+//     if (sizeInGb < 1) {
+//       size.value = newValue.size
+//       hardDiskType.value = 'mb'
+//     } else {
+//       size.value = sizeInGb
+//       hardDiskType.value = 'gb'
+//     }
+//     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"></style>