bfg-common 1.5.682 → 1.5.684

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

@@ -1,226 +1,231 @@
-<template>
-  <div class="device-selection-step">
-    <atoms-alert
-      v-show="props.alertMessages?.length"
-      :test-id="errorAlertDataId"
-      :items="props.alertMessages"
-      status="alert-danger"
-      class="device-selection-step__alert-error"
-      @remove="onHideAlert"
-    />
-
-    <div class="clr-form-control clr-row">
-      <label for="" class="clr-control-label clr-col-md-2">
-        {{ localization.common.name }}
-      </label>
-
-      <div :class="['clr-control-container', nameErrorText && 'clr-error']">
-        <div class="flex-align-center">
-          <input
-            id="device-selection-input"
-            v-model="formModelLocal.name"
-            data-id="device-selection-input"
-            type="text"
-            class="clr-input"
-            @blur="initValidation(true)"
-            @input="initValidation(false)"
-          />
-          <atoms-the-icon class="error-icon" name="info-circle" />
-        </div>
-
-        <div class="clr-subtext" data-id="storm-datastore-name-field-require">
-          {{ nameErrorText }}
-        </div>
-      </div>
-    </div>
-
-    <atoms-alert
-      v-if="isShowInfoAlert && !props.hostId"
-      :items="[localization.common.nameAndDeviceSelectionAlertInfo]"
-      test-id="device-selection-information-alert"
-      class="device-selection-step__alert-info"
-      status="alert-info mb-1"
-      @remove="isShowInfoAlert = false"
-    />
-
-    <div
-      v-if="props.isShowSelectHost"
-      class="clr-form-control clr-row mb-1 mt-0"
-    >
-      <label class="clr-control-label clr-col-12 clr-col-md-2">
-        {{ localization.common.selectHost }}
-      </label>
-
-      <div>
-        <div class="clr-select-wrapper">
-          <select
-            id="device-host-select"
-            v-model="formModelLocal.hosts"
-            data-id="device-host-select"
-            class="dropdown-toggle"
-            @change="emits('select-host')"
-          >
-            <option :value="[]" disabled>
-              {{ localization.common.selectHost }}
-            </option>
-            <option
-              v-for="(item, index) in hostOptions"
-              :key="index"
-              :value="[item.value]"
-              :disabled="item.disabled"
-            >
-              {{ item.text }}
-            </option>
-          </select>
-        </div>
-        <div class="clr-subtext">
-          {{ localization.common.selectHostToViewAccessible }}
-        </div>
-      </div>
-    </div>
-
-    <div class="device-selection-step__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'
-import { validateNameAndGenerateDataId } from '~/components/common/wizards/datastore/add/lib/utils'
-import { dynamicSteps } from '~/components/common/wizards/datastore/add/lib/config/steps'
-
-const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
-const isShowInfoAlert = defineModel<boolean>('isShowInfoAlert', {
-  required: true,
-})
-const props = withDefaults(
-  defineProps<{
-    lunDisksData: UI_I_CreateStorageLunDisks | null
-    hostOptions: UI_I_SelectHostOptions[]
-    alertMessages: string[]
-    messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
-    pagination: UI_I_Pagination
-    loading: boolean
-    isShowSelectHost: boolean
-    hostId?: string
-    isMainFilter?: boolean
-  }>(),
-  {
-    hostId: undefined,
-    isMainFilter: undefined,
-  }
-)
-const emits = defineEmits<{
-  (event: 'select-host'): void
-  (event: 'hide-alert', value: number): void
-  (event: 'main-filter', value: string): void
-  (event: 'sort', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isInitDatastoreNameValidation = ref<boolean>(false)
-const initValidation = (onlyBlur: boolean): void => {
-  onlyBlur && (isInitDatastoreNameValidation.value = true)
-}
-
-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.specifyDatastoreName
-    : ''
-})
-
-const defaultDataId = ref<string>('device-selection-alert-error')
-const errorAlertDataId = computed<string>(() => {
-  if (!props.alertMessages?.length) return
-
-  return !formModelLocal.value.dev_names.length
-    ? `${defaultDataId.value}-not-selected-lundisk`
-    : validateNameAndGenerateDataId(
-        formModelLocal.value.name,
-        props.alertMessages[0],
-        defaultDataId.value
-      )
-})
-
-const onHideAlert = (): void => {
-  emits('hide-alert', dynamicSteps.nameAndDevice)
-}
-</script>
-
-<style lang="scss" scoped>
-.device-selection-step {
-  display: flex;
-  flex-direction: column;
-  height: inherit;
-  overflow-y: auto;
-  overflow-x: hidden;
-  &__alert-info {
-    :deep(.alert-text) {
-      font-size: 11px;
-      letter-spacing: normal;
-    }
-  }
-  &__alert-error {
-    :deep(.alert-text) {
-      word-break: break-word;
-    }
-  }
-  .dropdown-toggle {
-    min-width: 160px;
-  }
-  .clr-form-control {
-    display: flex;
-    flex-direction: row;
-
-    .clr-control-container {
-      min-height: 48px;
-      &.clr-error {
-        .clr-subtext,
-        .error-icon {
-          display: block;
-        }
-      }
-      .clr-subtext,
-      .error-icon {
-        display: none;
-      }
-      .error-icon {
-        fill: #db2100;
-        width: 24px;
-        height: 24px;
-      }
-    }
-  }
-  &__disk-list {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-}
-</style>
+<template>
+  <div class="device-selection-step">
+    <atoms-alert
+      v-show="props.alertMessages?.length"
+      :test-id="errorAlertDataId"
+      :items="props.alertMessages"
+      status="alert-danger"
+      class="device-selection-step__alert-error"
+      @remove="onHideAlert"
+    />
+
+    <div class="clr-form-control clr-row">
+      <label for="" class="clr-control-label clr-col-md-2">
+        {{ localization.common.name }}
+      </label>
+
+      <div :class="['clr-control-container', nameErrorText && 'clr-error']">
+        <div class="flex-align-center">
+          <input
+            id="device-selection-input"
+            v-model="formModelLocal.name"
+            data-id="device-selection-input"
+            type="text"
+            class="clr-input"
+            @blur="initValidation(true)"
+            @input="initValidation(false)"
+          />
+          <atoms-the-icon class="error-icon" name="info-circle" />
+        </div>
+
+        <div class="clr-subtext" data-id="storm-datastore-name-field-require">
+          {{ nameErrorText }}
+        </div>
+      </div>
+    </div>
+
+    <atoms-alert
+      v-if="isShowInfoAlert && !props.hostId"
+      :items="[localization.common.nameAndDeviceSelectionAlertInfo]"
+      test-id="device-selection-information-alert"
+      class="device-selection-step__alert-info"
+      status="alert-info mb-1"
+      @remove="isShowInfoAlert = false"
+    />
+
+    <div
+      v-if="props.isShowSelectHost"
+      class="clr-form-control clr-row mb-1 mt-0"
+    >
+      <label class="clr-control-label clr-col-12 clr-col-md-2">
+        {{ localization.common.selectHost }}
+      </label>
+
+      <div>
+        <div class="clr-select-wrapper">
+          <select
+            id="device-host-select"
+            v-model="formModelLocal.hosts"
+            data-id="device-host-select"
+            class="dropdown-toggle"
+            @change="emits('select-host')"
+          >
+            <option :value="[]" disabled>
+              {{ localization.common.selectHost }}
+            </option>
+            <option
+              v-for="(item, index) in hostOptions"
+              :key="index"
+              :value="[item.value]"
+              :disabled="item.disabled"
+            >
+              {{ item.text }}
+            </option>
+          </select>
+        </div>
+        <div class="clr-subtext">
+          {{ localization.common.selectHostToViewAccessible }}
+        </div>
+      </div>
+    </div>
+
+    <div class="device-selection-step__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'
+import { validateNameAndGenerateDataId } from '~/components/common/wizards/datastore/add/lib/utils'
+import { dynamicSteps } from '~/components/common/wizards/datastore/add/lib/config/steps'
+
+const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
+const isShowInfoAlert = defineModel<boolean>('isShowInfoAlert', {
+  required: true,
+})
+const props = withDefaults(
+  defineProps<{
+    lunDisksData: UI_I_CreateStorageLunDisks | null
+    hostOptions: UI_I_SelectHostOptions[]
+    alertMessages: string[]
+    messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+    pagination: UI_I_Pagination
+    loading: boolean
+    isShowSelectHost: boolean
+    hostId?: string
+    isMainFilter?: boolean
+  }>(),
+  {
+    hostId: undefined,
+    isMainFilter: undefined,
+  }
+)
+const emits = defineEmits<{
+  (event: 'select-host'): void
+  (event: 'hide-alert', value: number): void
+  (event: 'main-filter', value: string): void
+  (event: 'sort', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isInitDatastoreNameValidation = ref<boolean>(false)
+const initValidation = (onlyBlur: boolean): void => {
+  onlyBlur && (isInitDatastoreNameValidation.value = true)
+}
+
+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.specifyDatastoreName
+    : ''
+})
+
+const defaultDataId = ref<string>('device-selection-alert-error')
+const errorAlertDataId = computed<string>(() => {
+  if (!props.alertMessages?.length) return
+
+  return !formModelLocal.value.dev_names.length
+    ? `${defaultDataId.value}-not-selected-lundisk`
+    : validateNameAndGenerateDataId(
+        formModelLocal.value.name,
+        props.alertMessages[0],
+        defaultDataId.value
+      )
+})
+
+const onHideAlert = (): void => {
+  emits('hide-alert', dynamicSteps.nameAndDevice)
+}
+</script>
+
+<style lang="scss" scoped>
+.device-selection-step {
+  display: flex;
+  flex-direction: column;
+  height: inherit;
+  overflow-y: auto;
+  overflow-x: hidden;
+  &__alert-info {
+    :deep(.alert-text) {
+      font-size: 11px;
+      letter-spacing: normal;
+    }
+  }
+  &__alert-error {
+    :deep(.alert-text) {
+      word-break: break-word;
+    }
+  }
+  .dropdown-toggle {
+    min-width: 160px;
+  }
+  .clr-form-control {
+    display: flex;
+    flex-direction: row;
+
+    .clr-control-container {
+      min-height: 48px;
+      &.clr-error {
+        .clr-subtext,
+        .error-icon {
+          display: block;
+        }
+      }
+      .clr-subtext,
+      .error-icon {
+        display: none;
+      }
+      .error-icon {
+        fill: #db2100;
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+  &__disk-list {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+}
+</style>

package/components/common/wizards/datastore/add/steps/nameAndDevice/advancedOptions/AdvancedOptions.vue

@@ -0,0 +1,43 @@
+<template>
+  <component
+    :is="currentComponent"
+    v-model="model"
+    :dev-names-count="props.devNamesCount"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
+
+const { $store }: any = useNuxtApp()
+
+const model = defineModel<UI_I_CreateDatastoreForm['level']>({ required: true })
+
+const props = defineProps<{
+  devNamesCount: number
+}>()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
+watch(
+  () => props.devNamesCount,
+  (newValue) => {
+    if (newValue < 2) {
+      if (model.value !== 'linear') model.value = 'linear'
+    } else if (newValue < 3) {
+      if (!['linear', 'raid0', 'raid1'].includes(model.value))
+        model.value = 'linear'
+    } else if (newValue < 4) {
+      if (!['linear', 'raid0', 'raid1', 'raid5'].includes(model.value))
+        model.value = 'linear'
+    }
+  }
+)
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/wizards/datastore/add/steps/nameAndDevice/advancedOptions/New.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="advanced-options-wrap clr-form-control">
+    <b class="advanced-options-label">
+      {{ localization.common.advancedOptions }}
+    </b>
+    <div class="advanced-options compact">
+      <div class="radio">
+        <input
+          v-model="model"
+          id="advanced-option-liner"
+          data-id="advanced-option-liner"
+          type="radio"
+          value="linear"
+        />
+        <label for="advanced-option-liner"> Linear </label>
+      </div>
+      <div :class="['radio', { disabled: props.devNamesCount < 2 }]">
+        <input
+          v-model="model"
+          id="advanced-option-raid0"
+          :disabled="props.devNamesCount < 2"
+          data-id="advanced-option-raid0"
+          type="radio"
+          value="raid0"
+        />
+        <label for="advanced-option-raid0"> Raid0 </label>
+      </div>
+      <div :class="['radio', { disabled: props.devNamesCount < 2 }]">
+        <input
+          v-model="model"
+          id="advanced-option-raid1"
+          :disabled="props.devNamesCount < 2"
+          data-id="advanced-option-raid1"
+          type="radio"
+          value="raid1"
+        />
+        <label for="advanced-option-raid1"> Raid1 </label>
+      </div>
+      <div :class="['radio', { disabled: props.devNamesCount < 3 }]">
+        <input
+          v-model="model"
+          id="advanced-option-raid5"
+          :disabled="props.devNamesCount < 3"
+          data-id="advanced-option-raid5"
+          type="radio"
+          value="raid5"
+        />
+        <label for="advanced-option-raid5"> Raid5 </label>
+      </div>
+      <div :class="['radio', { disabled: props.devNamesCount < 4 }]">
+        <input
+          v-model="model"
+          id="advanced-option-raid6"
+          :disabled="props.devNamesCount < 4"
+          data-id="advanced-option-raid6"
+          type="radio"
+          value="raid6"
+        />
+        <label for="advanced-option-raid6"> Raid6 </label>
+      </div>
+      <div :class="['radio', { disabled: props.devNamesCount < 4 }]">
+        <input
+          v-model="model"
+          id="advanced-option-raid10"
+          :disabled="props.devNamesCount < 4"
+          data-id="advanced-option-raid10"
+          type="radio"
+          value="raid10"
+        />
+        <label for="advanced-option-raid10"> Raid10 </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
+
+const model = defineModel<UI_I_CreateDatastoreForm['level']>({ required: true })
+
+const props = defineProps<{
+  devNamesCount: number
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.advanced-options-wrap {
+  display: flex;
+  gap: 10px;
+  .radio {
+    margin-bottom: 5px;
+  }
+  input[type='radio']:focus:checked + label::before,
+  input[type='radio']:focus + label::before {
+    box-shadow: inset 0 0 0 0.25rem #0094d2;
+  }
+}
+</style>