bfg-common 1.5.679 → 1.5.683

package/components/common/wizards/datastore/add/lib/utils.ts

@@ -1,85 +1,85 @@
-import Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
-import type { API_UI_I_Error } from '~/lib/models/store/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import { UI_E_Kind } from '~/lib/models/enums'
-
-export const checkValidityName = async ({
-  name,
-  wizard,
-  project,
-  sendMessage,
-  datacenterId,
-}: {
-  name: string
-  wizard: Wizard
-  project: UI_T_Project
-  sendMessage: (message: string) => void
-  datacenterId?: string
-}): Promise<void> => {
-  wizard.setLoader(true)
-  const url = buildValidationUrl(name, project, datacenterId)
-
-  const { error } = await useMyFetch<null, API_UI_I_Error>(url, {
-    method: 'GET',
-  })
-
-  wizard.setLoader(false)
-
-  if (error.value && error.value.data.error_code !== 0) {
-    const existError = error.value.data?.error_message || error.value.data
-    sendMessage(existError)
-    return
-  }
-  sendMessage('')
-}
-
-const buildValidationUrl = (
-  name: string,
-  project: UI_T_Project,
-  datacenterId?: string
-): string => {
-  if (project === 'procurator') {
-    const params = new URLSearchParams({ name })
-    return `/ui/ds/validate?${params.toString()}`
-  }
-
-  const params = new URLSearchParams()
-  params.set('name', name)
-  params.set('kind', String(UI_E_Kind.STORAGE_VALIDATION_NAME))
-  if (datacenterId) params.set('datacenter', datacenterId)
-
-  return `/ui/object/validate_name_datacenter?${params.toString()}`
-}
-
-export const validateNameAndGenerateDataId = (
-  name: string,
-  _errorMessage: string,
-  defaultDataId?: string
-): string => {
-  let baseDataId = defaultDataId || 'storage-name-alert-error'
-
-  const patterns = [
-    {
-      regex: /^[a-zA-Z0-9_\-\.]+$/,
-      error_message:
-        /invalid name, must only contain letters, numbers, and '_', '-' '.' symbols/,
-      suffix: '-invalid-name-symbols',
-    },
-    {
-      regex: /^.{3,64}$/,
-      error_message:
-        /invalid name length, must be between: \d+ and \d+ characters/,
-      suffix: '-invalid-name-length',
-    },
-  ]
-
-  // Проверка error_message на соответствие шаблонам
-
-  for (const pattern of patterns) {
-    if (!pattern.regex.test(name)) {
-      return `${baseDataId}${pattern.suffix}`
-    }
-  }
-
-  return baseDataId
-}
+import Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
+import type { API_UI_I_Error } from '~/lib/models/store/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import { UI_E_Kind } from '~/lib/models/enums'
+
+export const checkValidityName = async ({
+  name,
+  wizard,
+  project,
+  sendMessage,
+  datacenterId,
+}: {
+  name: string
+  wizard: Wizard
+  project: UI_T_Project
+  sendMessage: (message: string) => void
+  datacenterId?: string
+}): Promise<void> => {
+  wizard.setLoader(true)
+  const url = buildValidationUrl(name, project, datacenterId)
+
+  const { error } = await useMyFetch<null, API_UI_I_Error>(url, {
+    method: 'GET',
+  })
+
+  wizard.setLoader(false)
+
+  if (error.value && error.value.data.error_code !== 0) {
+    const existError = error.value.data?.error_message || error.value.data
+    sendMessage(existError)
+    return
+  }
+  sendMessage('')
+}
+
+const buildValidationUrl = (
+  name: string,
+  project: UI_T_Project,
+  datacenterId?: string
+): string => {
+  if (project === 'procurator') {
+    const params = new URLSearchParams({ name })
+    return `/ui/ds/validate?${params.toString()}`
+  }
+
+  const params = new URLSearchParams()
+  params.set('name', name)
+  params.set('kind', String(UI_E_Kind.STORAGE_VALIDATION_NAME))
+  if (datacenterId) params.set('datacenter', datacenterId)
+
+  return `/ui/object/validate_name_datacenter?${params.toString()}`
+}
+
+export const validateNameAndGenerateDataId = (
+  name: string,
+  _errorMessage: string,
+  defaultDataId?: string
+): string => {
+  let baseDataId = defaultDataId || 'storage-name-alert-error'
+
+  const patterns = [
+    {
+      regex: /^[a-zA-Z0-9_\-\.]+$/,
+      error_message:
+        /invalid name, must only contain letters, numbers, and '_', '-' '.' symbols/,
+      suffix: '-invalid-name-symbols',
+    },
+    {
+      regex: /^.{3,64}$/,
+      error_message:
+        /invalid name length, must be between: \d+ and \d+ characters/,
+      suffix: '-invalid-name-length',
+    },
+  ]
+
+  // Проверка error_message на соответствие шаблонам
+
+  for (const pattern of patterns) {
+    if (!pattern.regex.test(name)) {
+      return `${baseDataId}${pattern.suffix}`
+    }
+  }
+
+  return baseDataId
+}

package/components/common/wizards/datastore/add/steps/nameAndDevice/NameAndDeviceNew.vue

@@ -1,227 +1,232 @@
-<template>
-  <div class="name-and-device">
-    <div class="name-and-device__row row">
-      <div class="row__title">
-        <span class="row__title-text">
-          {{ localization.common.name }}
-        </span>
-      </div>
-      <div class="row__content">
-        <ui-input
-          id="device-selection-input"
-          v-model="formModelLocal.name"
-          :placeholder="localization.common.name"
-          :error="nameErrorText"
-          test-id="device-selection-input"
-          @blur="initValidation(true)"
-          @input="initValidation(false)"
-        />
-      </div>
-    </div>
-
-    <ui-alert
-      v-if="isShowInfoAlert"
-      :messages="[alertInfoDescription]"
-      test-id="device-selection-information-alert"
-      type="info"
-      size="md"
-      class="name-and-device__alert"
-    />
-
-    <div class="name-and-device__row row">
-      <div class="row__title">
-        <span class="row__title-text">
-          {{ selectedHostLabel }}
-        </span>
-
-        <common-tooltip-help
-          v-if="props.isShowSelectHost"
-          :title="localization.common.information"
-          :help-text="localization.common.selectHostToViewAccessible"
-          test-id="device-select-host-tooltip"
-          help-id="device-select-host-tooltip"
-          dropdown-width="272px"
-          dropdown-left
-          dropdown-top
-        />
-      </div>
-      <div v-if="props.isShowSelectHost" class="row__content">
-        <ui-select
-          v-model="selectedHostLocal"
-          :items="props.hostOptions"
-          :placeholder="localization.common.selectHost"
-          select-width="100%"
-          show-text
-          test-id="device-host-select"
-          size="md"
-          theme="light"
-          @change="onSelectHost"
-        />
-      </div>
-
-      <div v-else class="row__host-name">
-        <span class="icon vsphere-icon-host" />
-        {{ props.selectedHostName }}
-      </div>
-    </div>
-
-    <div class="name-and-device__disk-list">
-      <common-wizards-datastore-add-steps-name-and-device-table
-        v-model="formModelLocal.dev_names"
-        :lun-disks-data="props.lunDisksData"
-        :pagination="props.pagination"
-        :loading="props.loading"
-        :is-main-filter="props.isMainFilter"
-        @sort="emits('sort', $event)"
-        @main-filter="emits('main-filter', $event)"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
-import type {
-  UI_I_Localization,
-  UI_I_ArbitraryObject,
-} from '~/lib/models/interfaces'
-import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
-import type { UI_I_SelectHostOptions } from '~/components/common/wizards/datastore/add/steps/nameAndDevice/lib/models/interfaces'
-import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
-import type { UI_I_CreateStorageLunDisks } from '~/components/common/wizards/datastore/add/steps/nameAndDevice/table/lib/models/interfaces'
-
-const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
-const isShowInfoAlert = defineModel<boolean>('isShowInfoAlert', {
-  required: true,
-})
-const props = withDefaults(
-  defineProps<{
-    selectedHostName: string
-    lunDisksData: UI_I_CreateStorageLunDisks
-    hostOptions: UI_I_SelectHostOptions[]
-    alertMessages: string[]
-    messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
-    pagination: UI_I_Pagination
-    isShowSelectHost: boolean
-    loading: boolean
-    isMainFilter?: boolean
-  }>(),
-  {
-    isMainFilter: undefined,
-  }
-)
-const emits = defineEmits<{
-  (event: 'select-host'): void
-  (event: 'main-filter', value: string): void
-  (event: 'sort', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const selectedHostLocal = ref<string>(formModelLocal.value.hosts[0] || '')
-
-const isInitDatastoreNameValidation = ref<boolean>(false)
-const initValidation = (onlyBlur: boolean): void => {
-  onlyBlur && (isInitDatastoreNameValidation.value = true)
-}
-
-const alertInfoDescription = computed<string>(() =>
-  props.isShowSelectHost
-    ? localization.value.common.nameAndDeviceSelectionAlertInfo
-    : localization.value.common.nameAndDeviceSelectionHostAlertInfo
-)
-const selectedHostLabel = computed<string>(() =>
-  props.isShowSelectHost
-    ? localization.value.common.selectHost
-    : localization.value.common.host
-)
-
-const nameErrorText = computed<string>(() => {
-  if (
-    props.messagesFields?.datastoreName?.field &&
-    !formModelLocal.value.name
-  ) {
-    return props.messagesFields.datastoreName.field
-  }
-
-  if (!isInitDatastoreNameValidation.value) return ''
-  return !formModelLocal.value.name
-    ? localization.value.common.fieldRequired
-    : ''
-})
-
-const onSelectHost = (event: string): void => {
-  formModelLocal.value.hosts = [event]
-  emits('select-host')
-}
-</script>
-
-<style lang="scss" scoped>
-.name-and-device {
-  display: flex;
-  flex-direction: column;
-  row-gap: 16px;
-  margin: 16px 0 10px 2px;
-
-  &__alert {
-    align-items: flex-start;
-  }
-
-  &__row {
-    width: 100%;
-    min-height: 36px;
-    display: flex;
-    align-items: center;
-    column-gap: 16px;
-    border-bottom: 1px solid var(--wizard-content-line);
-    padding-bottom: 16px;
-  }
-  .row {
-    &__title {
-      max-width: 240px;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      column-gap: 8px;
-      color: var(--wizard-content-title);
-      font-weight: 400;
-      font-size: 13px;
-      line-height: 20px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-
-      &-text {
-        display: block;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-    }
-    &__content {
-      max-width: 480px;
-      width: 100%;
-      color: var(--wizard-content-value);
-      font-weight: 400;
-      font-size: 13px;
-      line-height: 20px;
-      letter-spacing: 0;
-      vertical-align: middle;
-    }
-    &__host-name {
-      font-family: 'Inter', sans-serif;
-      height: 36px;
-      display: flex;
-      align-items: center;
-      column-gap: 8px;
-      color: var(--wizard-content-value);
-      font-size: 13px;
-      font-weight: 400;
-      .icon {
-        width: 20px;
-        height: 20px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="name-and-device">
+    <div class="name-and-device__row row">
+      <div class="row__title">
+        <span class="row__title-text">
+          {{ localization.common.name }}
+        </span>
+      </div>
+      <div class="row__content">
+        <ui-input
+          id="device-selection-input"
+          v-model="formModelLocal.name"
+          :placeholder="localization.common.name"
+          :error="nameErrorText"
+          test-id="device-selection-input"
+          @blur="initValidation(true)"
+          @input="initValidation(false)"
+        />
+      </div>
+    </div>
+
+    <ui-alert
+      v-if="isShowInfoAlert"
+      :messages="[alertInfoDescription]"
+      test-id="device-selection-information-alert"
+      type="info"
+      size="md"
+      class="name-and-device__alert"
+    />
+
+    <div class="name-and-device__row row">
+      <div class="row__title">
+        <span class="row__title-text">
+          {{ selectedHostLabel }}
+        </span>
+
+        <common-tooltip-help
+          v-if="props.isShowSelectHost"
+          :title="localization.common.information"
+          :help-text="localization.common.selectHostToViewAccessible"
+          test-id="device-select-host-tooltip"
+          help-id="device-select-host-tooltip"
+          dropdown-width="272px"
+          dropdown-left
+          dropdown-top
+        />
+      </div>
+      <div v-if="props.isShowSelectHost" class="row__content">
+        <ui-select
+          v-model="selectedHostLocal"
+          :items="props.hostOptions"
+          :placeholder="localization.common.selectHost"
+          select-width="100%"
+          show-text
+          test-id="device-host-select"
+          size="md"
+          theme="light"
+          @change="onSelectHost"
+        />
+      </div>
+
+      <div v-else class="row__host-name">
+        <span class="icon vsphere-icon-host" />
+        {{ props.selectedHostName }}
+      </div>
+    </div>
+
+    <div class="name-and-device__disk-list">
+      <common-wizards-datastore-add-steps-name-and-device-table
+        v-model="formModelLocal.dev_names"
+        :lun-disks-data="props.lunDisksData"
+        :pagination="props.pagination"
+        :loading="props.loading"
+        :is-main-filter="props.isMainFilter"
+        @sort="emits('sort', $event)"
+        @main-filter="emits('main-filter', $event)"
+      />
+    </div>
+
+    <common-wizards-datastore-add-steps-name-and-device-advanced-options
+      v-model="formModelLocal.level"
+      :dev-names-count="formModelLocal.dev_names.length"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type {
+  UI_I_Localization,
+  UI_I_ArbitraryObject,
+} from '~/lib/models/interfaces'
+import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
+import type { UI_I_SelectHostOptions } from '~/components/common/wizards/datastore/add/steps/nameAndDevice/lib/models/interfaces'
+import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
+import type { UI_I_CreateStorageLunDisks } from '~/components/common/wizards/datastore/add/steps/nameAndDevice/table/lib/models/interfaces'
+
+const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
+const isShowInfoAlert = defineModel<boolean>('isShowInfoAlert', {
+  required: true,
+})
+const props = withDefaults(
+  defineProps<{
+    selectedHostName: string
+    lunDisksData: UI_I_CreateStorageLunDisks
+    hostOptions: UI_I_SelectHostOptions[]
+    alertMessages: string[]
+    messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+    pagination: UI_I_Pagination
+    isShowSelectHost: boolean
+    loading: boolean
+    isMainFilter?: boolean
+  }>(),
+  {
+    isMainFilter: undefined,
+  }
+)
+const emits = defineEmits<{
+  (event: 'select-host'): void
+  (event: 'main-filter', value: string): void
+  (event: 'sort', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedHostLocal = ref<string>(formModelLocal.value.hosts[0] || '')
+
+const isInitDatastoreNameValidation = ref<boolean>(false)
+const initValidation = (onlyBlur: boolean): void => {
+  onlyBlur && (isInitDatastoreNameValidation.value = true)
+}
+
+const alertInfoDescription = computed<string>(() =>
+  props.isShowSelectHost
+    ? localization.value.common.nameAndDeviceSelectionAlertInfo
+    : localization.value.common.nameAndDeviceSelectionHostAlertInfo
+)
+const selectedHostLabel = computed<string>(() =>
+  props.isShowSelectHost
+    ? localization.value.common.selectHost
+    : localization.value.common.host
+)
+
+const nameErrorText = computed<string>(() => {
+  if (
+    props.messagesFields?.datastoreName?.field &&
+    !formModelLocal.value.name
+  ) {
+    return props.messagesFields.datastoreName.field
+  }
+
+  if (!isInitDatastoreNameValidation.value) return ''
+  return !formModelLocal.value.name
+    ? localization.value.common.fieldRequired
+    : ''
+})
+
+const onSelectHost = (event: string): void => {
+  formModelLocal.value.hosts = [event]
+  emits('select-host')
+}
+</script>
+
+<style lang="scss" scoped>
+.name-and-device {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  margin: 16px 0 10px 2px;
+
+  &__alert {
+    align-items: flex-start;
+  }
+
+  &__row {
+    width: 100%;
+    min-height: 36px;
+    display: flex;
+    align-items: center;
+    column-gap: 16px;
+    border-bottom: 1px solid var(--wizard-content-line);
+    padding-bottom: 16px;
+  }
+  .row {
+    &__title {
+      max-width: 240px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      column-gap: 8px;
+      color: var(--wizard-content-title);
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 20px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      &-text {
+        display: block;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+    &__content {
+      max-width: 480px;
+      width: 100%;
+      color: var(--wizard-content-value);
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 20px;
+      letter-spacing: 0;
+      vertical-align: middle;
+    }
+    &__host-name {
+      font-family: 'Inter', sans-serif;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      column-gap: 8px;
+      color: var(--wizard-content-value);
+      font-size: 13px;
+      font-weight: 400;
+      .icon {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+}
+</style>