bfg-common 1.0.15 → 1.0.17

package/components/common/vm/actions/add/select/os/os.vue

@@ -1,221 +1,221 @@
-<template>
-  <div class="select-os">
-    <p class="select-os-block">
-      {{ localization.identifyingGuestSystemInstallation }}
-    </p>
-    <div class="select-os-block os-select-wrap table-row">
-      <label for="machine-type-select" class="table-cell"
-        >{{ localization.machineType }}:</label
-      >
-
-      <atoms-tooltip-error
-        :has-error="!!apiErrorMachineType"
-        selector="#vm-wizard-machine-type-select"
-        @remove="onRemoveValidationError('machine_type')"
-      >
-        <template #elem>
-          <select
-            id="vm-wizard-machine-type-select"
-            v-model="selectedMachineType"
-            class="table-cell"
-          >
-            <option
-              v-for="item in machineTypeOptions"
-              :key="item.value"
-              :value="item"
-            >
-              {{ item.text }}
-            </option>
-          </select>
-        </template>
-        <template #content>{{ apiErrorMachineType }}</template>
-      </atoms-tooltip-error>
-    </div>
-    <div class="select-os-block os-select-wrap table-row">
-      <label for="os-select" class="table-cell"
-        >{{ localization.guestOsFamily }}:</label
-      >
-
-      <atoms-tooltip-error
-        :has-error="!!apiErrorGuestOsFamily"
-        selector="#vm-wizard-os-select"
-        @remove="onRemoveValidationError('guest_os_family')"
-      >
-        <template #elem>
-          <select
-            id="vm-wizard-os-select"
-            v-model="selectedOS"
-            class="table-cell"
-            @change="onChangeOS"
-          >
-            <option v-for="item in osOptions" :key="item.value" :value="item">
-              {{ item.text }}
-            </option>
-          </select>
-        </template>
-        <template #content>{{ apiErrorGuestOsFamily }}</template>
-      </atoms-tooltip-error>
-    </div>
-    <div class="select-os-block os-select-wrap table-row">
-      <label for="os-version-select" class="table-cell"
-        >{{ localization.guestOsVersion }}:</label
-      >
-
-      <atoms-tooltip-error
-        :has-error="!!apiErrorGuestOsVersion"
-        selector="#vm-wizard-os-version-select"
-        @remove="onRemoveValidationError('guest_os_version')"
-      >
-        <template #elem>
-          <select
-            id="vm-wizard-os-version-select"
-            v-model="selectedVersion"
-            class="table-cell"
-          >
-            <option
-              v-for="item in versionsOptions"
-              :key="item.value"
-              :value="item"
-            >
-              {{ item.text }}
-            </option>
-          </select>
-        </template>
-        <template #content>{{ apiErrorGuestOsVersion }}</template>
-      </atoms-tooltip-error>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_OsChange } from '~/components/common/vm/actions/add/select/models/interfaces'
-import { UI_I_Localization, UI_I_ArbitraryObject } from '~/models/interfaces'
-import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-
-const props = defineProps<{
-  familiesOptions: UI_I_OptionItem[]
-  machineTypesOptions: UI_I_OptionItem[]
-  versionsOptions: UI_I_ArbitraryObject<UI_I_OptionItem[]>
-  errorValidationFields: UI_I_ErrorValidationField<string>[]
-}>()
-const emits = defineEmits<{
-  (event: 'change', value: UI_I_OsChange): void
-  (event: 'remove-error-by-title', value: string): void
-}>()
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const machineTypeOptions = ref<UI_I_OptionItem[]>(props.machineTypesOptions)
-const selectedMachineType = ref<UI_I_OptionItem | null>(null)
-watch(
-  () => props.machineTypesOptions,
-  (val) => {
-    machineTypeOptions.value = [...val]
-    selectedMachineType.value = val[0]
-  },
-  { immediate: true }
-)
-
-const osOptions = ref<UI_I_OptionItem[]>(props.familiesOptions)
-const selectedOS = ref<UI_I_OptionItem | null>(null)
-watch(
-  () => props.familiesOptions,
-  (val) => {
-    osOptions.value = [...val]
-    selectedOS.value = val[0]
-  },
-  { immediate: true }
-)
-const onChangeOS = (): void => {
-  selectedVersion.value = versionsOptions.value[0]
-}
-
-const versionsOptions = computed<UI_I_OptionItem[]>(() => {
-  if (!selectedOS.value) return []
-
-  return props.versionsOptions[selectedOS.value.value] || []
-})
-const selectedVersion = ref<UI_I_OptionItem | null>(null)
-watch(
-  versionsOptions,
-  () => {
-    selectedVersion.value = versionsOptions.value[0]
-  },
-  { immediate: true }
-)
-
-const windowsVirtualization = ref<boolean>(false)
-
-// const isShowHelp = ref<boolean>(false)
-
-watch(
-  [selectedMachineType, selectedOS, selectedVersion, windowsVirtualization],
-  () => {
-    if (!selectedOS.value) return
-
-    emits('change', {
-      selectedMachineType: selectedMachineType.value,
-      selectedOS: selectedOS.value,
-      selectedVersion: selectedVersion.value,
-      windowsVirtualization: windowsVirtualization.value,
-    })
-  },
-  { immediate: true }
-)
-
-const apiErrorMachineType = computed<string>(() => {
-  return (
-    props.errorValidationFields?.find(
-      (message) => message.field === 'machine_type'
-    )?.error_message || ''
-  )
-})
-
-const apiErrorGuestOsFamily = computed<string>(() => {
-  return (
-    props.errorValidationFields?.find(
-      (message) => message.field === 'guest_os_family'
-    )?.error_message || ''
-  )
-})
-
-const apiErrorGuestOsVersion = computed<string>(() => {
-  return (
-    props.errorValidationFields?.find(
-      (message) => message.field === 'guest_os_version'
-    )?.error_message || ''
-  )
-})
-
-const onRemoveValidationError = (type: string): void => {
-  emits('remove-error-by-title', type)
-}
-</script>
-
-<style scoped lang="scss">
-.select-os {
-  .select-os-block {
-    label:not(.windows-virtualization-label) {
-      padding: 0 5px 5px 0;
-    }
-
-    .windows-virtualization-label {
-      padding: 0 4px;
-    }
-  }
-}
-
-#os-select-help-icon {
-  h3 {
-    margin-top: 7px;
-    font-size: 22px;
-    color: #565656;
-  }
-  p {
-    width: 310px;
-    margin-top: 24px;
-    font-size: 14px;
-    color: #565656;
-  }
-}
-</style>
+<template>
+  <div class="select-os">
+    <p class="select-os-block">
+      {{ localization.identifyingGuestSystemInstallation }}
+    </p>
+    <div class="select-os-block os-select-wrap table-row">
+      <label for="machine-type-select" class="table-cell"
+        >{{ localization.machineType }}:</label
+      >
+
+      <atoms-tooltip-error
+        :has-error="!!apiErrorMachineType"
+        selector="#vm-wizard-machine-type-select"
+        @remove="onRemoveValidationError('machine_type')"
+      >
+        <template #elem>
+          <select
+            id="vm-wizard-machine-type-select"
+            v-model="selectedMachineType"
+            class="table-cell"
+          >
+            <option
+              v-for="item in machineTypeOptions"
+              :key="item.value"
+              :value="item"
+            >
+              {{ item.text }}
+            </option>
+          </select>
+        </template>
+        <template #content>{{ apiErrorMachineType }}</template>
+      </atoms-tooltip-error>
+    </div>
+    <div class="select-os-block os-select-wrap table-row">
+      <label for="os-select" class="table-cell"
+        >{{ localization.guestOsFamily }}:</label
+      >
+
+      <atoms-tooltip-error
+        :has-error="!!apiErrorGuestOsFamily"
+        selector="#vm-wizard-os-select"
+        @remove="onRemoveValidationError('guest_os_family')"
+      >
+        <template #elem>
+          <select
+            id="vm-wizard-os-select"
+            v-model="selectedOS"
+            class="table-cell"
+            @change="onChangeOS"
+          >
+            <option v-for="item in osOptions" :key="item.value" :value="item">
+              {{ item.text }}
+            </option>
+          </select>
+        </template>
+        <template #content>{{ apiErrorGuestOsFamily }}</template>
+      </atoms-tooltip-error>
+    </div>
+    <div class="select-os-block os-select-wrap table-row">
+      <label for="os-version-select" class="table-cell"
+        >{{ localization.guestOsVersion }}:</label
+      >
+
+      <atoms-tooltip-error
+        :has-error="!!apiErrorGuestOsVersion"
+        selector="#vm-wizard-os-version-select"
+        @remove="onRemoveValidationError('guest_os_version')"
+      >
+        <template #elem>
+          <select
+            id="vm-wizard-os-version-select"
+            v-model="selectedVersion"
+            class="table-cell"
+          >
+            <option
+              v-for="item in versionsOptions"
+              :key="item.value"
+              :value="item"
+            >
+              {{ item.text }}
+            </option>
+          </select>
+        </template>
+        <template #content>{{ apiErrorGuestOsVersion }}</template>
+      </atoms-tooltip-error>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_OsChange } from '~/components/common/vm/actions/add/select/models/interfaces'
+import { UI_I_Localization, UI_I_ArbitraryObject } from '~/models/interfaces'
+import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const props = defineProps<{
+  familiesOptions: UI_I_OptionItem[]
+  machineTypesOptions: UI_I_OptionItem[]
+  versionsOptions: UI_I_ArbitraryObject<UI_I_OptionItem[]>
+  errorValidationFields: UI_I_ErrorValidationField[]
+}>()
+const emits = defineEmits<{
+  (event: 'change', value: UI_I_OsChange): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const machineTypeOptions = ref<UI_I_OptionItem[]>(props.machineTypesOptions)
+const selectedMachineType = ref<UI_I_OptionItem | null>(null)
+watch(
+  () => props.machineTypesOptions,
+  (newValue) => {
+    machineTypeOptions.value = [...newValue]
+    selectedMachineType.value = newValue[0]
+  },
+  { immediate: true }
+)
+
+const osOptions = ref<UI_I_OptionItem[]>(props.familiesOptions)
+const selectedOS = ref<UI_I_OptionItem | null>(null)
+watch(
+  () => props.familiesOptions,
+  (newValue) => {
+    osOptions.value = [...newValue]
+    selectedOS.value = newValue[0]
+  },
+  { immediate: true }
+)
+const onChangeOS = (): void => {
+  selectedVersion.value = versionsOptions.value[0]
+}
+
+const versionsOptions = computed<UI_I_OptionItem[]>(() => {
+  if (!selectedOS.value) return []
+
+  return props.versionsOptions[selectedOS.value.value] || []
+})
+const selectedVersion = ref<UI_I_OptionItem | null>(null)
+watch(
+  versionsOptions,
+  () => {
+    selectedVersion.value = versionsOptions.value[0]
+  },
+  { immediate: true }
+)
+
+const windowsVirtualization = ref<boolean>(false)
+
+// const isShowHelp = ref<boolean>(false)
+
+watch(
+  [selectedMachineType, selectedOS, selectedVersion, windowsVirtualization],
+  () => {
+    if (!selectedOS.value) return
+
+    emits('change', {
+      selectedMachineType: selectedMachineType.value,
+      selectedOS: selectedOS.value,
+      selectedVersion: selectedVersion.value,
+      windowsVirtualization: windowsVirtualization.value,
+    })
+  },
+  { immediate: true }
+)
+
+const apiErrorMachineType = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === 'machine_type'
+    )?.error_message || ''
+  )
+})
+
+const apiErrorGuestOsFamily = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === 'guest_os_family'
+    )?.error_message || ''
+  )
+})
+
+const apiErrorGuestOsVersion = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === 'guest_os_version'
+    )?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (type: string): void => {
+  emits('remove-error-by-title', type)
+}
+</script>
+
+<style scoped lang="scss">
+.select-os {
+  .select-os-block {
+    label:not(.windows-virtualization-label) {
+      padding: 0 5px 5px 0;
+    }
+
+    .windows-virtualization-label {
+      padding: 0 4px;
+    }
+  }
+}
+
+#os-select-help-icon {
+  h3 {
+    margin-top: 7px;
+    font-size: 22px;
+    color: #565656;
+  }
+  p {
+    width: 310px;
+    margin-top: 24px;
+    font-size: 14px;
+    color: #565656;
+  }
+}
+</style>

package/components/common/vm/actions/add/utils.ts

@@ -1,118 +1,118 @@
-import { UI_I_ArbitraryObject } from '~/models/interfaces'
-import { UI_E_Fields } from '~/components/common/vm/actions/add/models/enums'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_VerticalStepItem } from '~/components/atoms/models/interfaces'
-import { checkAllField } from '~/components/common/vm/actions/utils'
-import { UI_T_Project } from '~/models/types'
-
-export const objectToOptionItem = (
-  // TODO переместить в более глобальное место
-  obj: UI_I_ArbitraryObject<string>
-): UI_I_OptionItem[] => {
-  const result = []
-  for (const key in obj) {
-    result.push({
-      text: obj[key],
-      value: key,
-    })
-  }
-  return result
-}
-
-export const getStepPositionByField = (field: string): number => {
-  if (checkAllField(field)) {
-    return UI_E_Fields[field]
-  } else if (field.includes('disk_devices')) {
-    return UI_E_Fields.disk_devices
-  } else if (field.includes('network_devices')) {
-    return UI_E_Fields.network_devices
-  }
-  return 5
-}
-
-export const stepItemsFunc = (
-  localization: UI_I_Localization,
-  project: UI_T_Project
-): UI_I_VerticalStepItem[] => {
-  if (project === 'sphere') {
-    return [
-      {
-        text: localization.selectCreationType,
-        disabled: false,
-        complete: false,
-      },
-      {
-        text: localization.selectNameFolder,
-        disabled: true,
-        complete: false,
-      },
-      {
-        text: localization.selectComputeResource,
-        disabled: true,
-        complete: false,
-      },
-      { text: localization.selectStorage, disabled: true, complete: false },
-      { text: localization.compatibility, disabled: true, complete: false },
-      { text: localization.selectGuestOS, disabled: true, complete: false },
-      {
-        text: localization.customizeHardware,
-        disabled: true,
-        complete: false,
-      },
-      { text: localization.readyComplete, disabled: true, complete: false },
-    ]
-  }
-  return [
-    {
-      text: localization.selectCreationType,
-      disabled: false,
-      complete: false,
-    },
-    {
-      text: localization.selectName,
-      disabled: true,
-      complete: false,
-    },
-    { text: localization.selectStorage, disabled: true, complete: false },
-    { text: localization.compatibility, disabled: true, complete: false },
-    {
-      text: localization.selectGuestOSMachineType,
-      disabled: true,
-      complete: false,
-    },
-    {
-      text: localization.customizeHardware,
-      disabled: true,
-      complete: false,
-    },
-    { text: localization.readyComplete, disabled: true, complete: false },
-  ]
-}
-
-export const subTitleFunc = (
-  localization: UI_I_Localization,
-  project: UI_T_Project
-): string[] => {
-  if (project === 'sphere') {
-    return [
-      localization.howWouldLikeCreateVirtualMachine,
-      localization.specifyUniqueNameTargetLocation,
-      localization.selectDestinationComputeResourceOperation,
-      localization.selectStorageConfigurationDiskFiles,
-      localization.selectCompatibilityVmDependingHostsEnvironment,
-      localization.chooseGuestOSInstalledVM,
-      localization.configureVirtualMachineHardware,
-      localization.clickFinishStartCreation,
-    ]
-  }
-  return [
-    localization.howWouldLikeCreateVirtualMachine,
-    localization.specifyUniqueName,
-    localization.selectStorageConfigurationDiskFiles,
-    localization.selectCompatibilityVmDependingHostsEnvironment,
-    localization.chooseGuestOSInstalledVmAndMachineTypeUsedCreateVm,
-    localization.configureVirtualMachineHardware,
-    localization.clickFinishStartCreation,
-  ]
-}
+import { UI_I_ArbitraryObject } from '~/models/interfaces'
+import { UI_E_Fields } from '~/components/common/vm/actions/add/models/enums'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_VerticalStepItem } from '~/components/atoms/models/interfaces'
+import { checkAllField } from '~/components/common/vm/actions/utils'
+import { UI_T_Project } from '~/models/types'
+
+export const objectToOptionItem = (
+  // TODO переместить в более глобальное место
+  obj: UI_I_ArbitraryObject<string>
+): UI_I_OptionItem[] => {
+  const result = []
+  for (const key in obj) {
+    result.push({
+      text: obj[key],
+      value: key,
+    })
+  }
+  return result
+}
+
+export const getStepPositionByField = (field: string): number => {
+  if (checkAllField(field)) {
+    return UI_E_Fields[field]
+  } else if (field.includes('disk_devices')) {
+    return UI_E_Fields.disk_devices
+  } else if (field.includes('network_devices')) {
+    return UI_E_Fields.network_devices
+  }
+  return 5
+}
+
+export const stepItemsFunc = (
+  localization: UI_I_Localization,
+  project: UI_T_Project
+): UI_I_VerticalStepItem[] => {
+  if (project === 'sphere') {
+    return [
+      {
+        text: localization.selectCreationType,
+        disabled: false,
+        complete: false,
+      },
+      {
+        text: localization.selectNameFolder,
+        disabled: true,
+        complete: false,
+      },
+      {
+        text: localization.selectComputeResource,
+        disabled: true,
+        complete: false,
+      },
+      { text: localization.selectStorage, disabled: true, complete: false },
+      { text: localization.compatibility, disabled: true, complete: false },
+      { text: localization.selectGuestOS, disabled: true, complete: false },
+      {
+        text: localization.customizeHardware,
+        disabled: true,
+        complete: false,
+      },
+      { text: localization.readyComplete, disabled: true, complete: false },
+    ]
+  }
+  return [
+    {
+      text: localization.selectCreationType,
+      disabled: false,
+      complete: false,
+    },
+    {
+      text: localization.selectName,
+      disabled: true,
+      complete: false,
+    },
+    { text: localization.selectStorage, disabled: true, complete: false },
+    { text: localization.compatibility, disabled: true, complete: false },
+    {
+      text: localization.selectGuestOSMachineType,
+      disabled: true,
+      complete: false,
+    },
+    {
+      text: localization.customizeHardware,
+      disabled: true,
+      complete: false,
+    },
+    { text: localization.readyComplete, disabled: true, complete: false },
+  ]
+}
+
+export const subTitleFunc = (
+  localization: UI_I_Localization,
+  project: UI_T_Project
+): string[] => {
+  if (project === 'sphere') {
+    return [
+      localization.howWouldLikeCreateVirtualMachine,
+      localization.specifyUniqueNameTargetLocation,
+      localization.selectDestinationComputeResourceOperation,
+      localization.selectStorageConfigurationDiskFiles,
+      localization.selectCompatibilityVmDependingHostsEnvironment,
+      localization.chooseGuestOSInstalledVM,
+      localization.configureVirtualMachineHardware,
+      localization.clickFinishStartCreation,
+    ]
+  }
+  return [
+    localization.howWouldLikeCreateVirtualMachine,
+    localization.specifyUniqueName,
+    localization.selectStorageConfigurationDiskFiles,
+    localization.selectCompatibilityVmDependingHostsEnvironment,
+    localization.chooseGuestOSInstalledVmAndMachineTypeUsedCreateVm,
+    localization.configureVirtualMachineHardware,
+    localization.clickFinishStartCreation,
+  ]
+}