bfg-common 1.3.398 → 1.3.399

package/assets/img/icons/icons-sprite-light-7.svg

@@ -0,0 +1,8 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.7665 3.1665H11.611C9.8621 3.1665 8.44434 4.58427 8.44434 6.33317V31.6665C8.44434 33.4154 9.8621 34.8332 11.611 34.8332H26.3888C28.1377 34.8332 29.5554 33.4154 29.5554 31.6665V21.0636C29.2078 21.0949 28.8557 21.1109 28.4999 21.1109C28.1441 21.1109 27.792 21.0949 27.4443 21.0636V31.6665C27.4443 32.2495 26.9717 32.7221 26.3888 32.7221H11.611C11.028 32.7221 10.5554 32.2495 10.5554 31.6665V6.33317C10.5554 5.7502 11.028 5.27762 11.611 5.27762H17.6803C17.9709 4.53352 18.336 3.82676 18.7665 3.1665Z" fill="#4D5D69"/>
+<path d="M16.919 8.65539L13.7221 8.65539C13.2557 8.65539 12.8777 9.03346 12.8777 9.49984C12.8777 9.96621 13.2557 10.3443 13.7221 10.3443L16.919 10.3443C16.899 10.0654 16.8888 9.78381 16.8888 9.49984C16.8888 9.21586 16.899 8.93426 16.919 8.65539Z" fill="#4D5D69"/>
+<path d="M17.7652 13.9332H14.7777C14.3113 13.9332 13.9332 14.3112 13.9332 14.7776C13.9332 15.244 14.3113 15.6221 14.7777 15.6221H18.6321C18.2992 15.0866 18.0087 14.5221 17.7652 13.9332Z" fill="#4D5D69"/>
+<path d="M20.7603 18.1554C21.5011 18.8183 22.3275 19.3874 23.2209 19.8443H14.7777C14.3113 19.8443 13.9332 19.4662 13.9332 18.9998C13.9332 18.5335 14.3113 18.1554 14.7777 18.1554L20.7603 18.1554Z" fill="#4D5D69"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9999 24.4887C17.3676 24.4887 16.0443 25.812 16.0443 27.4443C16.0443 29.0766 17.3676 30.3998 18.9999 30.3998C20.6322 30.3998 21.9554 29.0766 21.9554 27.4443C21.9554 25.812 20.6322 24.4887 18.9999 24.4887ZM17.7332 27.4443C17.7332 26.7447 18.3003 26.1776 18.9999 26.1776C19.6995 26.1776 20.2666 26.7447 20.2666 27.4443C20.2666 28.1438 19.6995 28.7109 18.9999 28.7109C18.3003 28.7109 17.7332 28.1438 17.7332 27.4443Z" fill="#4D5D69"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38 9.5C38 14.7467 33.7467 19 28.5 19C23.2533 19 19 14.7467 19 9.5C19 4.25329 23.2533 0 28.5 0C33.7467 0 38 4.25329 38 9.5ZM24.3352 13.6652C24.7804 14.1104 25.5023 14.1104 25.9474 13.6652L28.5001 11.1126L31.0528 13.6652C31.498 14.1104 32.2198 14.1104 32.665 13.6652C33.1102 13.22 33.1102 12.4982 32.665 12.053L30.1123 9.50038L32.665 6.94772C33.1102 6.50253 33.1102 5.78072 32.665 5.33552C32.2198 4.89032 31.498 4.89032 31.0528 5.33552L28.5001 7.88818L25.9474 5.33552C25.5023 4.89032 24.7804 4.89032 24.3352 5.33552C23.89 5.78072 23.89 6.50253 24.3352 6.94772L26.8879 9.50038L24.3352 12.053C23.89 12.4982 23.89 13.22 24.3352 13.6652Z" fill="#EA3223"/>
+</svg>

package/assets/scss/common/icons/icons-7.scss

@@ -0,0 +1,29 @@
+/* _____BACKGROUND POSITION_____ */
+.host-disconnect {
+  background-position: 0 100%;
+}
+
+/* _____BACKGROUND IMAGE_____ */
+.host-disconnect {
+  background-image: url('../img/icons/icons-sprite-light-7.svg');
+
+  html.dark-theme & {
+    background-image: url('../img/icons/icons-sprite-dark-7.svg');
+  }
+}
+.active .host-disconnect {
+  background-image: url('../img/icons/icons-sprite-dark-7.svg');
+
+  html.dark-theme & {
+    background-image: url('../img/icons/icons-sprite-light-7.svg');
+  }
+}
+
+/* _____ICONS COMMON STYLES_____ */
+.host-disconnect {
+  width: 18px;
+  min-width: 18px;
+  height: 18px;
+  min-height: 18px;
+  background-size: 100% auto;
+}

package/assets/scss/common/icons/icons.scss

@@ -4,6 +4,7 @@
 @import 'icons-4';
 @import 'icons-5';
 @import 'icons-6';
+@import 'icons-7';
 @import 'lib-icons';
 
 /* _____ICONS COMMON STYLES_____ */

package/components/common/vm/actions/common/customizeHardware/virtualHardware/bus/Bus.vue

@@ -16,7 +16,7 @@
                 <select
                   :id="`vm-wizard-${props.componentType}-bus-field-${props.index}`"
                   v-model="busLocal"
-                  :data-id="`vm-wizard-${props.componentType}-bus-field-${props.index}`"
+                  :data-id="`${props.testId}-select`"
                   :class="`vm-wizard-${props.componentType}-bus-field-${props.index}`"
                   :disabled="props.disabled"
                 >
@@ -32,9 +32,13 @@
             </template>
             <template #content>{{ apiError }}</template>
           </atoms-tooltip-error>
-          <div v-if="props.helpText" :id="helpId" class="content-signpost relative">
+          <div
+            v-if="props.helpText"
+            :id="helpId"
+            class="content-signpost relative"
+          >
             <atoms-the-icon
-              :data-id="`vm-wizard-${props.componentType}-bus-field-${props.index}-show-help-icon`"
+              :data-id="`${props.testId}-show-help-icon`"
               class="icon-show-help"
               fill="#0072a3"
               width="24px"
@@ -50,7 +54,7 @@
                 @hide="isShowHelp = false"
               >
                 <p>
-<!--                  {{ localization.busVirtioHelpDesc }}-->
+                  <!--                  {{ localization.busVirtioHelpDesc }}-->
                   {{ props.helpText }}
                 </p>
               </atoms-tooltip-signpost>
@@ -74,6 +78,7 @@ const props = defineProps<{
   bus: string
   index: number
   componentType: string
+  testId: string
   errorValidationFields: UI_I_ErrorValidationField<string>[]
   disabled?: boolean
   shortOptions?: boolean

package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/CdDvdDrive.vue

@@ -1,266 +1,267 @@
-<template>
-  <div class="hardware-cd-dvd-drive">
-    <atoms-stack-block
-      :has-children="true"
-      :is-roll-back="props.type === 'removed'"
-      :removable="isRemovable"
-      @remove="onRemoveCdDvdDrive"
-      @roll-back="onRollBackCdDvdDrive"
-    >
-      <template #stackBlockKey>
-        <div
-          :id="`vm-wizard-toggle-block-cd-dvd-drive-${props.index}`"
-          :data-id="`vm-wizard-toggle-block-cd-dvd-drive-${props.index}`"
-          class="vm-wizard-toggle-block-cd-dvd-drive vm-wizard-toggle-block-hard-disk"
-        >
-          <span>{{ label }}</span>
-        </div>
-      </template>
-      <template #stackBlockContent>
-        <div class="flex-align-center flex-space-between">
-          <template v-if="props.type === 'removed'">
-            <span>{{ localization.deviceWillRemoved }}</span>
-            <div class="flex-align-center" @click.stop>
-              <input
-                :id="`cd-dvd-delete-files-from-datastore-${props.index}`"
-                v-model="deleteFilesFromDatastore"
-                :data-id="`cd-dvd-delete-files-from-datastore-${props.index}`"
-                :disabled="props.disabled"
-                type="checkbox"
-                class="pointer"
-                @click.stop
-              />
-              <label
-                :for="`cd-dvd-delete-files-from-datastore-${props.index}`"
-                :class="[
-                  'label-text-normal pointer',
-                  props.disabled && 'div-disabled',
-                ]"
-                >{{ localization.deleteFilesFromDatastore }}</label
-              >
-            </div>
-          </template>
-          <template v-else>
-            <div class="select">
-              <select
-                id="vm-wizard-cd-dvd-drive-field"
-                v-model="selectedCdDvdDrive"
-                :data-id="`vm-wizard-cd-dvd-drive-field-${props.index}`"
-                class="vm-wizard-cd-dvd-drive-field input-text-color"
-                @click.stop
-                @change="changeCdDvdDrive"
-              >
-                <option
-                  v-for="(item, key) in cdDvdDriveOptions"
-                  :key="key"
-                  :value="item.value"
-                >
-                  {{ item.text }}
-                </option>
-              </select>
-            </div>
-          </template>
-        </div>
-      </template>
-      <template #stackChildren>
-        <common-vm-actions-common-customize-hardware-virtual-hardware-cd-dvd-drive-media
-          v-if="selectedCdDvdDrive === 'datastoreIsoFile'"
-          v-model:cd-dvd-media="cdDvdMedia"
-          @browse="isShowFileModal = true"
-        />
-
-        <!--        :short-options="props.type === 'edit'" // поменял из-за задачки PNCWEB-384-->
-        <common-vm-actions-common-customize-hardware-virtual-hardware-bus
-          v-model:bus="bus"
-          :index="indexByHardDisks"
-          :validation-type="busValidationType"
-          :error-validation-fields="props.errorValidationFields"
-          :disabled="isRunning"
-          short-options
-          component-type="disk_devices"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-        />
-      </template>
-    </atoms-stack-block>
-
-    <Teleport to="body">
-      <common-vm-actions-common-customize-hardware-virtual-hardware-browse-view
-        v-if="isShowFileModal"
-        :show="isShowFileModal"
-        :file-types="fileTypes"
-        :nodes="props.nodes"
-        :files="props.files"
-        @submit="onSelectFile"
-        @get-storage="emits('get-storage', $event)"
-        @get-folders-or-files="emits('get-folders-or-files', $event)"
-        @get-active-device-child="emits('get-active-device-child', $event)"
-        @show-datastore-child="emits('show-datastore-child', $event)"
-        @hide="onHideFileModal"
-      />
-    </Teleport>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
-import { UI_I_TablePayload } from '~/lib/models/table/interfaces'
-import { UI_T_CdDvdDrive } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/lib/models/types'
-import { UI_I_SendDataNewCdDvdDrive } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
-import {
-  UI_I_Localization,
-  UI_I_HTMLSelectElement,
-} from '~/lib/models/interfaces'
-import { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import { UI_I_FolderOrFileTreePayload } from '~/lib/models/store/storage/interfaces'
-import { UI_T_CdDvdType } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/types'
-import { cdDvdDriveOptionsFunc } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/lib/config/options'
-import { fileTypesFunc } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/lib/config/fileTypes'
-
-const props = defineProps<{
-  hardDisksCount: number
-  index: number
-  cdDvdDrive: UI_I_SendDataNewCdDvdDrive
-  nodes: UI_I_FileTreeNode[]
-  files: UI_I_FileTreeNode[]
-  errorValidationFields: UI_I_ErrorValidationField<string>[]
-  type: UI_T_CdDvdType
-  isEdit: boolean
-  state?: string | number
-}>()
-
-const emits = defineEmits<{
-  (event: 'send-data', value: UI_I_SendDataNewCdDvdDrive): void
-  (event: 'remove'): void
-  (event: 'roll-back'): void
-  (event: 'remove-error-by-title', value: string): void
-  (event: 'get-storage', value: UI_I_TablePayload): void
-  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
-  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
-  (event: 'show-datastore-child', value: UI_I_FileTreeNode): 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 indexByHardDisks = computed<number>(
-  () => props.index + props.hardDisksCount
-)
-
-const label = computed<string>(() => {
-  if (props.type === 'edit' || props.type === 'removed')
-    // 2 так как из-под капота создается еще один cd/dvd driver
-    return `${localization.value.cdDvdDrive} ${props.index + 2}`
-
-  return `${localization.value.newCdDvdDrive} *`
-})
-
-const busValidationType = computed<string>(
-  () => `disk_devices[${indexByHardDisks}].bus`
-)
-
-const selectedCdDvdDrive = ref<UI_T_CdDvdDrive>('clientDevice')
-const cdDvdDriveOptions = ref<UI_I_OptionItem[]>(
-  cdDvdDriveOptionsFunc(localization.value)
-)
-const changeCdDvdDrive = (event: UI_I_HTMLSelectElement): void => {
-  const isDatastoreIsoFile = event.target.value === 'datastoreIsoFile'
-  if (!isDatastoreIsoFile) {
-    cdDvdMedia.value = ''
-    return
-  }
-
-  isShowFileModal.value = true
-}
-const isShowFileModal = ref<boolean>(false)
-const onHideFileModal = (): void => {
-  if (!cdDvdMedia.value) {
-    selectedCdDvdDrive.value = 'clientDevice'
-  }
-  isShowFileModal.value = false
-}
-const onSelectFile = (file: UI_I_FileTreeNode): void => {
-  cdDvdMedia.value = file.path
-}
-const fileTypes = computed<UI_I_OptionItem[]>(() =>
-  fileTypesFunc(localization.value)
-)
-
-const onRemoveCdDvdDrive = (): void => {
-  emits('remove')
-}
-const onRollBackCdDvdDrive = (): void => {
-  emits('roll-back')
-}
-
-const cdDvdMedia = ref<string>('')
-// const bus = ref<string>('ide')
-const bus = ref<string>('sata') // PNCWEB-384
-
-const deleteFilesFromDatastore = ref<boolean>(false)
-
-watch(
-  [cdDvdMedia, bus, deleteFilesFromDatastore, () => props.type],
-  () => {
-    emits('send-data', {
-      create: props.cdDvdDrive.create,
-      attach: props.cdDvdDrive.attach,
-      source: cdDvdMedia.value,
-      size: 0,
-      bus: bus.value,
-      device_type: 'cdrom',
-      provision_type: 'thick',
-      disk_mode: 'dependent',
-      sharing: false,
-      read_only: true,
-      shares: 0,
-      cache: 'none',
-      io: 'native',
-      limit_iops: 0,
-      discard: 'unmap',
-      target: props.cdDvdDrive.target,
-      boot_order: props.cdDvdDrive.boot_order,
-      detach: props.type === 'removed',
-      remove: props.type === 'removed' && deleteFilesFromDatastore.value, // Проверяем если удалили диск и указали Delete files from datastore
-    })
-  },
-  { immediate: true }
-)
-
-// Добавляем данные для редактирования
-watch(
-  () => props.cdDvdDrive,
-  (newValue) => {
-    if (newValue.source !== '') {
-      selectedCdDvdDrive.value = 'datastoreIsoFile'
-      cdDvdMedia.value = newValue.source
-    }
-    if (newValue.bus !== '') {
-      bus.value = newValue.bus
-    }
-  },
-  { immediate: true }
-)
-watch(
-  isRunning,
-  (newValue) => {
-    if (newValue && props.type === 'new') {
-      bus.value = 'virtio'
-    }
-  },
-  { immediate: true }
-)
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <div class="hardware-cd-dvd-drive">
+    <atoms-stack-block
+      :has-children="true"
+      :is-roll-back="props.type === 'removed'"
+      :removable="isRemovable"
+      @remove="onRemoveCdDvdDrive"
+      @roll-back="onRollBackCdDvdDrive"
+    >
+      <template #stackBlockKey>
+        <div
+          :id="`vm-wizard-toggle-block-cd-dvd-drive-${props.index}`"
+          :data-id="`vm-wizard-toggle-block-cd-dvd-drive-${props.index}`"
+          class="vm-wizard-toggle-block-cd-dvd-drive vm-wizard-toggle-block-hard-disk"
+        >
+          <span>{{ label }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center flex-space-between">
+          <template v-if="props.type === 'removed'">
+            <span>{{ localization.deviceWillRemoved }}</span>
+            <div class="flex-align-center" @click.stop>
+              <input
+                :id="`cd-dvd-delete-files-from-datastore-${props.index}`"
+                v-model="deleteFilesFromDatastore"
+                :data-id="`cd-dvd-delete-files-from-datastore-${props.index}`"
+                :disabled="props.disabled"
+                type="checkbox"
+                class="pointer"
+                @click.stop
+              />
+              <label
+                :for="`cd-dvd-delete-files-from-datastore-${props.index}`"
+                :class="[
+                  'label-text-normal pointer',
+                  props.disabled && 'div-disabled',
+                ]"
+                >{{ localization.deleteFilesFromDatastore }}</label
+              >
+            </div>
+          </template>
+          <template v-else>
+            <div class="select">
+              <select
+                id="vm-wizard-cd-dvd-drive-field"
+                v-model="selectedCdDvdDrive"
+                :data-id="`vm-wizard-cd-dvd-drive-field-${props.index}`"
+                class="vm-wizard-cd-dvd-drive-field input-text-color"
+                @click.stop
+                @change="changeCdDvdDrive"
+              >
+                <option
+                  v-for="(item, key) in cdDvdDriveOptions"
+                  :key="key"
+                  :value="item.value"
+                >
+                  {{ item.text }}
+                </option>
+              </select>
+            </div>
+          </template>
+        </div>
+      </template>
+      <template #stackChildren>
+        <common-vm-actions-common-customize-hardware-virtual-hardware-cd-dvd-drive-media
+          v-if="selectedCdDvdDrive === 'datastoreIsoFile'"
+          v-model:cd-dvd-media="cdDvdMedia"
+          @browse="isShowFileModal = true"
+        />
+
+        <!--        :short-options="props.type === 'edit'" // поменял из-за задачки PNCWEB-384-->
+        <common-vm-actions-common-customize-hardware-virtual-hardware-bus
+          v-model:bus="bus"
+          :index="indexByHardDisks"
+          :validation-type="busValidationType"
+          :error-validation-fields="props.errorValidationFields"
+          :disabled="isRunning"
+          :test-id="`vm-wizard-cd-dvd-bus-field-${props.index}`"
+          short-options
+          component-type="disk_devices"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+      </template>
+    </atoms-stack-block>
+
+    <Teleport to="body">
+      <common-vm-actions-common-customize-hardware-virtual-hardware-browse-view
+        v-if="isShowFileModal"
+        :show="isShowFileModal"
+        :file-types="fileTypes"
+        :nodes="props.nodes"
+        :files="props.files"
+        @submit="onSelectFile"
+        @get-storage="emits('get-storage', $event)"
+        @get-folders-or-files="emits('get-folders-or-files', $event)"
+        @get-active-device-child="emits('get-active-device-child', $event)"
+        @show-datastore-child="emits('show-datastore-child', $event)"
+        @hide="onHideFileModal"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
+import { UI_I_TablePayload } from '~/lib/models/table/interfaces'
+import { UI_T_CdDvdDrive } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/lib/models/types'
+import { UI_I_SendDataNewCdDvdDrive } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
+import {
+  UI_I_Localization,
+  UI_I_HTMLSelectElement,
+} from '~/lib/models/interfaces'
+import { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import { UI_I_FolderOrFileTreePayload } from '~/lib/models/store/storage/interfaces'
+import { UI_T_CdDvdType } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/types'
+import { cdDvdDriveOptionsFunc } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/lib/config/options'
+import { fileTypesFunc } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/lib/config/fileTypes'
+
+const props = defineProps<{
+  hardDisksCount: number
+  index: number
+  cdDvdDrive: UI_I_SendDataNewCdDvdDrive
+  nodes: UI_I_FileTreeNode[]
+  files: UI_I_FileTreeNode[]
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+  type: UI_T_CdDvdType
+  isEdit: boolean
+  state?: string | number
+}>()
+
+const emits = defineEmits<{
+  (event: 'send-data', value: UI_I_SendDataNewCdDvdDrive): void
+  (event: 'remove'): void
+  (event: 'roll-back'): void
+  (event: 'remove-error-by-title', value: string): void
+  (event: 'get-storage', value: UI_I_TablePayload): void
+  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
+  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
+  (event: 'show-datastore-child', value: UI_I_FileTreeNode): 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 indexByHardDisks = computed<number>(
+  () => props.index + props.hardDisksCount
+)
+
+const label = computed<string>(() => {
+  if (props.type === 'edit' || props.type === 'removed')
+    // 2 так как из-под капота создается еще один cd/dvd driver
+    return `${localization.value.cdDvdDrive} ${props.index + 2}`
+
+  return `${localization.value.newCdDvdDrive} *`
+})
+
+const busValidationType = computed<string>(
+  () => `disk_devices[${indexByHardDisks}].bus`
+)
+
+const selectedCdDvdDrive = ref<UI_T_CdDvdDrive>('clientDevice')
+const cdDvdDriveOptions = ref<UI_I_OptionItem[]>(
+  cdDvdDriveOptionsFunc(localization.value)
+)
+const changeCdDvdDrive = (event: UI_I_HTMLSelectElement): void => {
+  const isDatastoreIsoFile = event.target.value === 'datastoreIsoFile'
+  if (!isDatastoreIsoFile) {
+    cdDvdMedia.value = ''
+    return
+  }
+
+  isShowFileModal.value = true
+}
+const isShowFileModal = ref<boolean>(false)
+const onHideFileModal = (): void => {
+  if (!cdDvdMedia.value) {
+    selectedCdDvdDrive.value = 'clientDevice'
+  }
+  isShowFileModal.value = false
+}
+const onSelectFile = (file: UI_I_FileTreeNode): void => {
+  cdDvdMedia.value = file.path
+}
+const fileTypes = computed<UI_I_OptionItem[]>(() =>
+  fileTypesFunc(localization.value)
+)
+
+const onRemoveCdDvdDrive = (): void => {
+  emits('remove')
+}
+const onRollBackCdDvdDrive = (): void => {
+  emits('roll-back')
+}
+
+const cdDvdMedia = ref<string>('')
+// const bus = ref<string>('ide')
+const bus = ref<string>('sata') // PNCWEB-384
+
+const deleteFilesFromDatastore = ref<boolean>(false)
+
+watch(
+  [cdDvdMedia, bus, deleteFilesFromDatastore, () => props.type],
+  () => {
+    emits('send-data', {
+      create: props.cdDvdDrive.create,
+      attach: props.cdDvdDrive.attach,
+      source: cdDvdMedia.value,
+      size: 0,
+      bus: bus.value,
+      device_type: 'cdrom',
+      provision_type: 'thick',
+      disk_mode: 'dependent',
+      sharing: false,
+      read_only: true,
+      shares: 0,
+      cache: 'none',
+      io: 'native',
+      limit_iops: 0,
+      discard: 'unmap',
+      target: props.cdDvdDrive.target,
+      boot_order: props.cdDvdDrive.boot_order,
+      detach: props.type === 'removed',
+      remove: props.type === 'removed' && deleteFilesFromDatastore.value, // Проверяем если удалили диск и указали Delete files from datastore
+    })
+  },
+  { immediate: true }
+)
+
+// Добавляем данные для редактирования
+watch(
+  () => props.cdDvdDrive,
+  (newValue) => {
+    if (newValue.source !== '') {
+      selectedCdDvdDrive.value = 'datastoreIsoFile'
+      cdDvdMedia.value = newValue.source
+    }
+    if (newValue.bus !== '') {
+      bus.value = newValue.bus
+    }
+  },
+  { immediate: true }
+)
+watch(
+  isRunning,
+  (newValue) => {
+    if (newValue && props.type === 'new') {
+      bus.value = 'virtio'
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped></style>