bfg-common 1.4.393 → 1.4.395

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

@@ -0,0 +1,240 @@
+<template>
+  <div class="hardware-hard-disk">
+    <atoms-stack-block
+      :has-children="true"
+      :is-roll-back="props.type === 'removed'"
+      :removable="props.isRemovable"
+      :test-id="`hard-disk-stack-block-${props.index}`"
+      @remove="emits('remove')"
+      @roll-back="emits('roll-back')"
+    >
+      <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>{{ props.label }}</span>
+          <atoms-the-icon
+            v-show="props.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 class="flex-align-center" @click.stop>
+              <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="!!props.errorText"
+              :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': props.hardDiskTypeErrorLocalText },
+                  ]"
+                  :disabled="props.isDisabledSize"
+                  @blur="emits('validate-size')"
+                  @click.stop
+                />
+              </template>
+              <template #content>
+                {{ props.errorText }}
+              </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="emits('validate-size')"
+                @click.stop
+              >
+                <option
+                  v-for="(item, key) in props.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="props.maxHardDisk"
+        />
+        <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-location
+          v-if="props.type === 'new'"
+          :location="props.location"
+          :index="props.index"
+          :error-validation-fields="props.errorValidationFields"
+          :get-datastore-table-func="props.getDatastoreTableFunc"
+          :datastore="props.datastore"
+          @change="emits('change-storage', $event)"
+          @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') || props.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="props.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:disk-mode="diskMode"
+          :index="props.index"
+          :error-validation-fields="props.errorValidationFields"
+          :disabled="props.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') || props.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="props.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,
+} 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'
+
+const deleteFilesFromDatastore = defineModel<boolean>('delete-files-from-datastore', {required: true})
+const size = defineModel<number>('size', {required: true})
+const hardDiskType = defineModel<number>('hard-disk-type', {required: true})
+const diskProvisioning = defineModel<string>('disk-provisioning', {required: true})
+const sharing = defineModel<string>('sharing', {required: true})
+const limitIops = defineModel<number>('limit-iops', {required: true})
+const limitIopsType = defineModel<string>('limit-iops-type', {required: true})
+const limitIopsInvalid = defineModel<boolean>('limit-iops-invalid', {required: true})
+const diskMode = defineModel<string>('disk-mode', {required: true})
+const cache = defineModel<string>('cache', {required: true})
+const bus = defineModel<string>('bus', {required: true})
+
+const props = defineProps<{
+  isRemovable: boolean
+  label: string
+  hardDiskInvalid: boolean
+  disabled: boolean
+  errorText: string
+  hardDiskTypeErrorLocalText: string
+  isDisabledSize: boolean
+  hardDiskTypeOptions: UI_I_OptionItem[]
+  maxHardDisk: number
+  location: UI_I_DatastoreTableItem | null
+  isRunning: boolean
+  isEdit: boolean
+  datastore: UI_I_DatastoreTableItem[]
+  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+  index: number
+  type: UI_T_HardDiskType
+  hardDisk: UI_I_SendDataNewHardDisk
+  guestMachineType?: UI_I_OptionItem | null
+}>()
+const emits = defineEmits<{
+  (event: 'remove'): void
+  (event: 'roll-back'): void
+  (event: 'validate-size'): void
+  (event: 'change-storage', value: UI_I_DatastoreTableItem): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+</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/common/customizeHardware/virtualHardware/newHardDisk/cache/Cache.vue

@@ -1,67 +1,41 @@
 <template>
-  <div class="">
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.common.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"
-                :data-id="`vm-wizard-disk-device-cache-field-${props.index}`"
-                :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>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-cache-new
+    v-if="isNewView"
+    v-model:cache="cache"
+    :index="props.index"
+    :disabled="props.disabled"
+    :error-text="apiError"
+    :cache-options="cacheOptions"
+    @remove-error="onRemoveValidationError"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-cache-old
+    v-else
+    v-model:cache="cache"
+    :index="props.index"
+    :disabled="props.disabled"
+    :error-text="apiError"
+    :cache-options="cacheOptions"
+    @remove-error="onRemoveValidationError"
+  />
 </template>
 
 <script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
 import { cacheOptions } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/cache/lib/config/options'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const cache = defineModel<string>('cache')
 
 const props = defineProps<{
-  cache: string
   index: number
   disabled: boolean
   errorValidationFields: UI_I_ErrorValidationField[]
 }>()
 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 { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const typeError = computed<string>(() => `disk_devices[${props.index}].cache`)
 

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

@@ -0,0 +1,40 @@
+<template>
+    <ui-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.cache }}
+      </template>
+      <template #stackBlockContent>
+        <ui-select
+          :id="`vm-wizard-disk-device-cache-field-${props.index}`"
+          v-model="cache"
+          width="auto"
+          :items="props.cacheOptions"
+          :disabled="props.disabled"
+          :test-id="`vm-wizard-disk-device-mode-field-${props.index}`"
+          :class="`vm-wizard-disk-device-mode-field-${props.index} cache-field`"
+          :error-text="props.errorText"
+          @click.stop
+        />
+      </template>
+    </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const cache = defineModel<string>('cache')
+
+const props = defineProps<{
+  index: number
+  disabled: boolean
+  errorText: string
+  cacheOptions: UI_I_OptionItem[]
+}>()
+// const emits = defineEmits<{
+//   (event: 'remove-error'): void
+// }>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.cache }}
+      </template>
+      <template #stackBlockContent>
+        <atoms-tooltip-error
+          :has-error="!!props.errorText"
+          :selector="`.vm-wizard-disk-device-cache-field-${props.index}`"
+          @remove="emits('remove-error')"
+        >
+          <template #elem>
+            <div class="select">
+              <select
+                :id="`vm-wizard-disk-device-cache-field-${props.index}`"
+                v-model="cache"
+                :data-id="`vm-wizard-disk-device-cache-field-${props.index}`"
+                :class="`vm-wizard-disk-device-cache-field-${props.index}`"
+                :disabled="props.disabled"
+              >
+                <option
+                  v-for="(item, key) in props.cacheOptions"
+                  :key="key"
+                  :value="item.value"
+                >
+                  {{ item.text }}
+                </option>
+              </select>
+            </div>
+          </template>
+          <template #content>{{ props.errorText }}</template>
+        </atoms-tooltip-error>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const cache = defineModel<string>('cache')
+
+const props = defineProps<{
+  index: number
+  disabled: boolean
+  errorText: string
+  cacheOptions: UI_I_OptionItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'remove-error'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/file/File.vue

@@ -0,0 +1,22 @@
+<template>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-file-new
+    v-if="isNewView"
+    :path="props.path"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-file-old
+    v-else
+    :path="props.path"
+  />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  path: string
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/file/FileNew.vue

@@ -0,0 +1,28 @@
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockKey>
+      {{ localization.common.diskFile }}
+    </template>
+    <template #stackBlockContent>
+      <span class="file-path"> {{ props.path }} </span>
+    </template>
+  </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  path: string
+}>()
+</script>
+
+<style scoped>
+.file-path {
+  font-size: 13px;
+  line-height: 15.73px;
+  color: #182531;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/file/FileOld.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.diskFile }}
+      </template>
+      <template #stackBlockContent>
+        <span> {{ props.path }} </span>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  path: string
+}>()
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/limitIops/LimitIops.vue

@@ -1,64 +1,26 @@
 <template>
-  <div class="">
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.common.limitIops }}
-      </template>
-      <template #stackBlockContent>
-        <div class="flex-align-center">
-          <atoms-tooltip-error
-            :has-error="!!apiError"
-            :selector="`.vm-wizard-disk-device-io-field-${props.index}`"
-            @remove="onRemoveValidationError"
-          >
-            <template #elem>
-              <div class="select mr-1">
-                <select
-                  :id="`vm-wizard-disk-device-io-field-${props.index}`"
-                  v-model="limitIopsTypeLocal"
-                  :data-id="`vm-wizard-disk-device-io-field-${props.index}`"
-                  :class="`vm-wizard-disk-device-io-field-${props.index}`"
-                  @click.stop
-                >
-                  <option
-                    v-for="(item, key) in limitIopsTypeOptions"
-                    :key="key"
-                    :value="item.value"
-                  >
-                    {{ item.text }}
-                  </option>
-                </select>
-              </div>
-            </template>
-            <template #content>{{ apiError }}</template>
-          </atoms-tooltip-error>
-
-          <atoms-combobox
-            v-show="limitIopsType !== 'unlimited'"
-            v-model.number="limitIopsLocal"
-            :items="limitIopsOptions"
-            :test-id="`limit-iops-combobox-${props.index}`"
-            @click.stop
-          />
-          <div v-show="limitIopsErrorText" class="flex-align-center">
-            <atoms-tooltip>
-              <template #elem>
-                <atoms-the-icon
-                  width="24px"
-                  height="24px"
-                  class="is-error tooltip-trigger"
-                  name="info"
-                />
-              </template>
-              <template #content>
-                {{ limitIopsErrorText }}
-              </template>
-            </atoms-tooltip>
-          </div>
-        </div>
-      </template>
-    </atoms-stack-block>
-  </div>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-limit-iops-new
+    v-if="isNewView"
+    v-model:limit-iops="limitIops"
+    v-model:limit-iops-type="limitIopsType"
+    :index="props.index"
+    :error-text="apiError"
+    :limit-iops-error-text="limitIopsErrorText"
+    :limit-iops-options="limitIopsOptions"
+    :limit-iops-type-options="limitIopsTypeOptions"
+    @remove-error="onRemoveValidationError"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-limit-iops-old
+    v-else
+    v-model:limit-iops="limitIops"
+    v-model:limit-iops-type="limitIopsType"
+    :index="props.index"
+    :error-text="apiError"
+    :limit-iops-error-text="limitIopsErrorText"
+    :limit-iops-options="limitIopsOptions"
+    :limit-iops-type-options="limitIopsTypeOptions"
+    @remove-error="onRemoveValidationError"
+  />
 </template>
 
 <script setup lang="ts">
@@ -70,21 +32,23 @@ import {
   limitIopsTypeOptionsFunc,
 } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/limitIops/lib/config/options'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const limitIops = defineModel<number>('limit-iops')
+const limitIopsType = defineModel<string>('limit-iops-type')
 
 const props = defineProps<{
-  limitIops: number
-  limitIopsType: string
   index: number
   errorValidationFields: UI_I_ErrorValidationField<string>[]
 }>()
 const emits = defineEmits<{
-  (event: 'update:limit-iops', value: number): void
-  (event: 'update:limit-iops-type', value: string): void
   (event: 'valid', value: boolean): void
   (event: 'remove-error-by-title', value: string): void
 }>()
 
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const limitIopsTypeOptions = ref<UI_I_OptionItem[]>(
   limitIopsTypeOptionsFunc(localization.value)
 )
@@ -95,32 +59,15 @@ const limitIopsOptions = ref<UI_I_OptionItem[]>(
   limitIopsOptionsFunc(localization.value, minLimitIops, maxLimitIops)
 )
 
-const limitIopsLocal = computed<number>({
-  get() {
-    return props.limitIops
-  },
-  set(newValue) {
-    emits('update:limit-iops', +newValue)
-  },
-})
-const limitIopsTypeLocal = computed<string>({
-  get() {
-    return props.limitIopsType
-  },
-  set(newValue) {
-    emits('update:limit-iops-type', newValue)
-  },
-})
-
 const limitIopsErrorText = computed<string>(() => {
-  if (limitIopsTypeLocal.value === 'unlimited') return ''
+  if (limitIopsType.value === 'unlimited') return ''
 
-  const validValue = /^\d+(\.\d+)?$/.test(props.limitIops + '')
+  const validValue = /^\d+(\.\d+)?$/.test(limitIops.value + '')
   if (!validValue) {
     return localization.value.common.inputContainsInvalidCharacters
   }
 
-  if (+props.limitIops < minLimitIops || +props.limitIops > maxLimitIops) {
+  if (+limitIops.value < minLimitIops || +limitIops.value > maxLimitIops) {
     return localization.value.common.enterValueBetween
       .replace('{0}', '' + minLimitIops)
       .replace('{1}', '' + maxLimitIops)