bfg-common 1.5.118 → 1.5.119

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

@@ -65,6 +65,9 @@
 .icon-sessions {
   background-position: 0 87.5%;
 }
+.icon-server {
+  background-position: 0 91.8%;
+}
 .icon-add-permission {
   background-position: 0 99.8%;
 }
@@ -91,6 +94,7 @@
 .icon-backup-restore,
 .icon-sensors,
 .icon-sessions,
+.icon-server,
 .icon-add-permission,
 .icon-workload-management {
   background-image: url('../img/icons/icons-sprite-light-6.svg');
@@ -120,6 +124,7 @@
 .active .icon-backup-restore,
 .active .icon-sensors,
 .active .icon-sessions,
+.active .icon-server,
 .active .icon-add-permission,
 .active .icon-workload-management {
   background-image: url('../img/icons/icons-sprite-dark-6.svg');
@@ -151,6 +156,7 @@
 .icon-backup-restore,
 .icon-sensors,
 .icon-sessions,
+.icon-server,
 .icon-add-permission,
 .icon-workload-management {
   display: inline-block;

package/components/common/details/lib/models/interfaces.ts

@@ -8,4 +8,5 @@ export interface UI_I_DetailsItem {
   permission?: string[]
   data?: any
   testId?: string
+  iconClassName?: string
 }

package/components/common/wizards/datastore/add/Add.vue

@@ -1,68 +1,35 @@
 <template>
-  <div class="new-datastore">
-    <atoms-wizard
-      show
-      :wizard="wizard"
-      :selected-scheme="selectedScheme"
-      :title="localization.common.newDatastore"
-      :localization="localization"
-      class="add-datastore"
-      test-id="add-datastore-wizard"
-      @change-steps="onChangeSteps"
-      @hide="onHideModal"
-      @submit="onFinish"
-    >
-      <template #modalBody="{ selectedStep }">
-        <common-wizards-datastore-add-types
-          v-if="selectedStep.id === 0"
-          v-model="form"
-          v-model:datastore-type="datastoreType"
-          :project="props.project"
-        />
-
-        <common-wizards-datastore-add-local
-          v-if="selectedStep.id === 1"
-          v-model="form"
-          :project="props.project"
-          :step-id="selectedStep.id"
-          :datastore-type="datastoreType"
-          :alert-messages="alertMessages[1]"
-          :messages-fields="selectedStep.fields"
-          @hide-alert="onHideAlert"
-        />
-
-        <common-wizards-datastore-add-shared-storm
-          v-show="datastoreType === 'shared-storm'"
-          v-model="form"
-          :project="props.project"
-          :step-id="selectedStep.id"
-          :datastore-type="datastoreType"
-          :alert-messages="alertMessages[selectedStep.id]"
-          :messages-fields="selectedStep.fields"
-          :hosts="props.nfsHosts"
-          :is-main-filter="props.isMainFilter"
-          :host-id="props.hostId"
-          @hide-alert="onHideAlert"
-          @main-filter="emits('main-filter', $event)"
-        />
-
-        <common-wizards-datastore-add-nfs
-          v-show="datastoreType === 'nfs'"
-          v-model="form"
-          :project="props.project"
-          :step-id="selectedStep.id"
-          :alert-messages="alertMessages[selectedStep.id]"
-          :messages-fields="selectedStep.fields"
-          :hosts="props.nfsHosts"
-        />
-
-        <common-wizards-datastore-add-ready-complete
-          v-show="selectedStep.id === 11"
-          :data-ready-view="dataReadyView"
-        />
-      </template>
-    </atoms-wizard>
-  </div>
+  <common-wizards-datastore-add-new
+    v-if="isNewView"
+    v-model="form"
+    :project="props.project"
+    :wizard="wizard"
+    :alert-messages="alertMessages"
+    :selected-scheme="selectedScheme"
+    :selected-node="props.selectedNode"
+    :title="title"
+    :nfs-hosts="props.nfsHosts"
+    :host-id="props.hostId"
+    @change-steps="onChangeSteps"
+    @hide="onHideModal"
+    @submit="onCreateDatastore"
+  />
+  <common-wizards-datastore-add-old
+    v-else
+    v-model="form"
+    :project="props.project"
+    :wizard="wizard"
+    :alert-messages="alertMessages"
+    :selected-scheme="selectedScheme"
+    :selected-node="props.selectedNode"
+    :title="title"
+    :nfs-hosts="props.nfsHosts"
+    :host-id="props.hostId"
+    @change-steps="onChangeSteps"
+    @hide-alert="onHideAlert"
+    @hide="onHideModal"
+    @submit="onCreateDatastore"
+  />
 </template>
 
 <script setup lang="ts">
@@ -70,35 +37,35 @@ import type {
   UI_I_WizardStep,
   UI_I_ValidationReturn,
 } from '~/components/atoms/wizard/lib/models/interfaces'
+import Wizard from '~/components/atoms/wizard/lib/utils/utils'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_T_DatastoreType } from '~/components/common/wizards/datastore/add/lib/models/types'
+import type { UI_T_DatastoreTypeCode } from '~/components/common/wizards/datastore/add/lib/models/types'
 import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
-import type { UI_I_DetailsItem } from '~/components/common/details/lib/models/interfaces'
-import type { UI_I_CreateDatastoreHosts } from '~/components/common/wizards/datastore/add/nfs/accessibility/tablesView/lib/models/interfaces'
-import type { UI_I_ChangeStepsSchemes } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
-import { E_DatastoreTypeKode } from '~/components/common/wizards/datastore/add/lib/models/enums'
-import { constructDataReadyViewFunc } from '~/components/common/wizards/datastore/add/readyComplete/lib/config/propertiesDetails'
-import * as validation from '~/components/common/wizards/datastore/add/lib/validations'
+import type { UI_I_CompatibleHosts } from '~/components/common/wizards/datastore/add/steps/hostAccessibility/table/lib/models/interfaces'
 import {
   stepsFunc,
   stepsSchemeInitial,
+  getStepScheme,
+  dynamicSteps,
 } from '~/components/common/wizards/datastore/add/lib/config/steps'
-import Wizard from '~/components/atoms/wizard/lib/utils/utils'
+import { datastoreDefaultFormFunc } from '~/components/common/wizards/datastore/add/lib/config/createDatastore'
+import * as validation from '~/components/common/wizards/datastore/add/lib/validations'
 
 const props = defineProps<{
   project: UI_T_Project
-  nfsHosts?: UI_I_CreateDatastoreHosts
+  nfsHosts?: UI_I_CompatibleHosts
   hostId?: string
   isMainFilter?: boolean
 }>()
 const emits = defineEmits<{
   (event: 'hide'): void
-  (event: 'finish', value: UI_I_CreateDatastoreForm): void
+  (event: 'finish', value: any): void
   (event: 'main-filter', value: string): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
 
 const wizard: Wizard = new Wizard(
   stepsFunc(localization.value),
@@ -108,21 +75,13 @@ const wizard: Wizard = new Wizard(
 const selectedScheme = computed<number[]>(() => wizard.selectedScheme.value)
 const alertMessages = computed<string[][]>(() => wizard.alertMessages.value)
 
-// const datastoreType = ref<UI_T_DatastoreType>(
-//   props.project === 'procurator' ? 'local' : 'shared-storm'
-// )
-const datastoreType = ref<UI_T_DatastoreType>('shared-storm')
-const form = ref<UI_I_CreateDatastoreForm>({
-  name: 'Datastore',
-  lunDisk: [],
-  hosts: props.hostId ? [props?.hostId] : [],
-  type_code: E_DatastoreTypeKode[datastoreType.value],
-  nfsVersion: 'nfs-4.1',
-  readonly: false,
-  server: '',
-  folder: '',
-})
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const title = computed<string>(() => localization.value.common.newDatastore)
+
+const form = ref<UI_I_CreateDatastoreForm>(
+  useDeepCopy(datastoreDefaultFormFunc(props.hostId))
+)
 const validationFunc = async (
   value: UI_I_WizardStep[],
   currentStep: UI_I_WizardStep,
@@ -130,28 +89,18 @@ const validationFunc = async (
 ): Promise<UI_I_ValidationReturn> => {
   let stepHasError = false
 
-  if (wizard.isValidateForStep(1, currentStep.id, nextStep.id)) {
-    const nameValidation = await validation.checkDatastoreNameAsync(
-      localization.value,
-      value,
-      form.value,
-      1,
-      'datastoreName',
-      wizard,
-      props.project
+  if (
+    wizard.isValidateForStep(
+      dynamicSteps.nameAndDevice,
+      currentStep.id,
+      nextStep.id
     )
-
-    value = nameValidation.newValue
-
-    stepHasError = nameValidation.stepHasError
-  }
-
-  if (wizard.isValidateForStep(2, currentStep.id, nextStep.id)) {
+  ) {
     const nameValidation = await validation.checkDatastoreNameAsync(
       localization.value,
       value,
       form.value,
-      2,
+      dynamicSteps.nameAndDevice,
       'datastoreName',
       wizard,
       props.project
@@ -173,12 +122,18 @@ const validationFunc = async (
     stepHasError = nameValidation.stepHasError || lunDiskValidation.stepHasError
   }
 
-  if (wizard.isValidateForStep(4, currentStep.id, nextStep.id)) {
+  if (
+    wizard.isValidateForStep(
+      dynamicSteps.nameAndConfigure,
+      currentStep.id,
+      nextStep.id
+    )
+  ) {
     const nameValidation = await validation.checkDatastoreNameAsync(
       localization.value,
       value,
       form.value,
-      4,
+      dynamicSteps.nameAndConfigure,
       'name',
       wizard,
       props.project
@@ -207,7 +162,13 @@ const validationFunc = async (
       serverValidation.stepHasError
   }
 
-  if (wizard.isValidateForStep(6, currentStep.id, nextStep.id)) {
+  if (
+    wizard.isValidateForStep(
+      dynamicSteps.hostAccessibility,
+      currentStep.id,
+      nextStep.id
+    )
+  ) {
     const nameValidation = await validation.checkHostsAccessibilitySync(
       localization.value,
       form.value.hosts,
@@ -231,36 +192,14 @@ const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> =>
 
 // Choosing Scheme
 watch(
-  datastoreType,
-  (newValue: UI_T_DatastoreType) => {
-    const schemes: UI_I_ChangeStepsSchemes = {
-      procurator: {
-        local: 0,
-        'shared-storm': 1,
-        nfs: 2,
-      },
-      sphere: {
-        'shared-storm': 3,
-        nfs: !props.hostId ? 4 : 2,
-      },
-    }
-
-    const projectSchemes = schemes[props.project]
-
-    if (projectSchemes && projectSchemes[newValue] !== undefined) {
-      wizard.changeScheme(projectSchemes[newValue] as number)
+  () => form.value.type_code,
+  (newValue: UI_T_DatastoreTypeCode) => {
+    const step = getStepScheme(props.project, newValue, props.hostId)
+    if (step !== undefined) {
+      wizard.changeScheme(step)
     }
   },
-  { deep: true, immediate: true }
-)
-
-const dataReadyView = computed<UI_I_DetailsItem>(() =>
-  constructDataReadyViewFunc(
-    localization.value,
-    form.value,
-    props.project,
-    props.nfsHosts
-  )
+  { immediate: true }
 )
 
 const onHideAlert = (stepId: number): void => {
@@ -269,38 +208,9 @@ const onHideAlert = (stepId: number): void => {
 const onHideModal = (): void => {
   emits('hide')
 }
-const onFinish = (): void => {
+const onCreateDatastore = (): void => {
   emits('finish', form.value)
 }
-// watch(
-//   () => props.isLoading,
-//   (newValue) => {
-//     wizard.setLoader(newValue)
-//   },
-//   { immediate: true }
-// )
 </script>
 
-<style scoped lang="scss">
-@import 'assets/scss/common/mixins.scss';
-.new-datastore {
-  &__body {
-    @include flex($dir: column);
-    height: 100%;
-    padding-left: 24px;
-  }
-}
-
-.finish-block {
-  padding: 18px 24px 24px 24px;
-
-  .add-hosts-ready-to-complete-mt-12 {
-    margin-top: 12px;
-
-    .add-hosts-ready-to-complete-bold {
-      line-height: 18px;
-      font-weight: 700;
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>

package/components/common/wizards/datastore/add/New.vue

@@ -0,0 +1,242 @@
+<template>
+  <ui-wizard
+    show
+    :steps="props.wizard.steps"
+    :selected-scheme="props.selectedScheme"
+    :is-loading="props.wizard.wizardLoader.status"
+    :title="props.title"
+    :texts="texts"
+    test-id="add-datastore-wizard"
+    @change-steps="onChangeSteps"
+    @hide="onHideModal"
+    @submit="onCreateDatastore"
+  >
+    <template #content="{ selectedStep, isLoading }">
+      <ui-wizard-block
+        v-if="selectedStep.id === dynamicSteps.type"
+        :sub-title-height="height0"
+      >
+        <template #subTitle>
+          <div ref="subTitleBlock0">
+            <div class="subtitle-block flex-row">
+              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+
+              <common-wizards-datastore-add-steps-common-tooltip-info
+                id="datastore-type-subtitle-tooltip"
+                :description="localization.common.datastoreTypeHelpDesc"
+              />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <common-wizards-datastore-add-steps-type-mode
+            v-if="selectedStep.id === dynamicSteps.type"
+            v-model="formModelLocal.type_code"
+          />
+        </template>
+      </ui-wizard-block>
+
+      <ui-wizard-block
+        v-if="selectedStep.id === dynamicSteps.nameAndDevice"
+        :sub-title-height="height1"
+      >
+        <template #subTitle>
+          <div ref="subTitleBlock1">
+            <div class="subtitle-block">
+              <ui-alert
+                v-if="props.alertMessages[dynamicSteps.nameAndDevice].length"
+                test-id="add-host-connection-settings-error-alert"
+                type="error"
+                size="md"
+                :messages="props.alertMessages[dynamicSteps.nameAndDevice]"
+                class="subtitle-block__alert"
+              />
+
+              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <common-wizards-datastore-add-steps-name-and-device
+            v-if="selectedStep.id === dynamicSteps.nameAndDevice"
+            v-model="formModelLocal"
+            :project="props.project"
+            :messages-fields="selectedStep.fields"
+            :hosts="props.nfsHosts"
+            :host-id="props.hostId"
+            :is-main-filter="props.isMainFilter"
+          />
+        </template>
+      </ui-wizard-block>
+
+      <ui-wizard-block
+        v-if="selectedStep.id === dynamicSteps.nameAndConfigure"
+        :sub-title-height="height2"
+      >
+        <template #subTitle>
+          <div ref="subTitleBlock2">
+            <div class="subtitle-block">
+              <ui-alert
+                v-if="props.alertMessages[dynamicSteps.nameAndConfigure].length"
+                test-id="add-host-connection-settings-error-alert"
+                type="error"
+                size="md"
+                :messages="props.alertMessages[dynamicSteps.nameAndConfigure]"
+                class="subtitle-block__alert"
+              />
+
+              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <common-wizards-datastore-add-steps-name-and-configure
+            v-if="selectedStep.id === dynamicSteps.nameAndConfigure"
+            v-model="formModelLocal"
+            :project="props.project"
+            :messages-fields="selectedStep.fields"
+          />
+        </template>
+      </ui-wizard-block>
+
+      <ui-wizard-block
+        v-if="selectedStep.id === dynamicSteps.hostAccessibility"
+        :sub-title-height="height3"
+      >
+        <template #subTitle>
+          <div ref="subTitleBlock3">
+            <div class="subtitle-block">
+              <ui-alert
+                v-if="
+                  props.alertMessages[dynamicSteps.hostAccessibility].length
+                "
+                test-id="add-host-accessibility-error-alert"
+                type="error"
+                size="md"
+                :messages="props.alertMessages[dynamicSteps.hostAccessibility]"
+                class="subtitle-block__alert"
+              />
+
+              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <common-wizards-datastore-add-steps-host-accessibility
+            v-if="selectedStep.id === dynamicSteps.hostAccessibility"
+            v-model="formModelLocal.hosts"
+            :alert-messages="props.alertMessages[dynamicSteps.nameAndDevice]"
+            :hosts="props.nfsHosts"
+          />
+        </template>
+      </ui-wizard-block>
+
+      <ui-wizard-block
+        v-if="selectedStep.id === dynamicSteps.readyComplete"
+        :sub-title-height="height4"
+      >
+        <template #subTitle>
+          <div ref="subTitleBlock4">
+            <div class="subtitle-block">
+              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <common-wizards-datastore-add-steps-ready-complete
+            v-if="selectedStep.id === dynamicSteps.readyComplete"
+            :form="formModelLocal"
+            :project="props.project"
+            :hosts="props.nfsHosts"
+            :host-id="props.hostId"
+          />
+        </template>
+      </ui-wizard-block>
+    </template>
+  </ui-wizard>
+</template>
+
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import type {
+  UI_I_WizardStep,
+  UI_I_WizardTexts,
+} from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
+import type { UI_I_CompatibleHosts } from '~/components/common/wizards/datastore/add/steps/hostAccessibility/table/lib/models/interfaces'
+import { dynamicSteps } from '~/components/common/wizards/datastore/add/lib/config/steps'
+
+const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
+const props = defineProps<{
+  project: UI_T_Project
+  wizard: Wizard
+  selectedScheme: number[]
+  alertMessages: string[][]
+  title: string
+  nfsHosts?: UI_I_CompatibleHosts
+  hostId?: string
+  isMainFilter?: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'change-steps', value: UI_I_WizardStep[]): void
+  (event: 'hide'): void
+  (event: 'submit', value: any): void
+  (event: 'main-filter', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const texts = computed<UI_I_WizardTexts>(() => ({
+  cancel: localization.value.common.cancel,
+  back: localization.value.common.backCap,
+  processing: localization.value.common.processing,
+  next: localization.value.common.next,
+  finish: localization.value.common.add,
+  incompleteTitle: localization.value.common.incompleteProcess,
+  incompleteMessage: localization.value.common.incompleteProcessMessage,
+  incompleteCancel: localization.value.common.cancel,
+  incompleteLeave: localization.value.common.leave,
+}))
+
+const subTitleBlock0 = ref<HTMLElement | null>(null)
+const { height: height0 } = useElementSize(subTitleBlock0)
+
+const subTitleBlock1 = ref<HTMLElement | null>(null)
+const { height: height1 } = useElementSize(subTitleBlock1)
+
+const subTitleBlock2 = ref<HTMLElement | null>(null)
+const { height: height2 } = useElementSize(subTitleBlock2)
+
+const subTitleBlock3 = ref<HTMLElement | null>(null)
+const { height: height3 } = useElementSize(subTitleBlock3)
+
+const subTitleBlock4 = ref<HTMLElement | null>(null)
+const { height: height4 } = useElementSize(subTitleBlock4)
+
+const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> =>
+  emits('change-steps', value)
+
+const onHideModal = (): void => emits('hide')
+const onCreateDatastore = (): void => emits('submit')
+</script>
+
+<style scoped lang="scss">
+.subtitle-block {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  border-bottom: 1px solid var(--wizard-line);
+  padding-bottom: 12px;
+
+  &.flex-row {
+    flex-direction: row;
+  }
+
+  :deep(&__alert) {
+    padding: 10px 12px;
+  }
+}
+</style>