bfg-common 1.5.538 → 1.5.540

package/components/common/pages/backups/modals/restore/lib/config/steps.ts

@@ -8,7 +8,7 @@ export const dynamicSteps = {
   selectStorage: 2,
   selectDisks: 3,
   selectNetwork: 4,
-  readyComplete: 5,
+  readyComplete: 5
 }
 
 export const stepsFunc = (
@@ -18,42 +18,42 @@ export const stepsFunc = (
     {
       id: dynamicSteps.selectType,
       stepName: '',
-      title: localization.common.selectAType,
+      title: localization.backup.selectType,
       subTitle: '',
       status: UI_E_WIZARD_STATUS.SELECTED,
       isValid: true,
       fields: {},
-      testId: 'backup-restore-type',
+      testId: 'backup-restore-type'
     },
     {
       id: dynamicSteps.selectName,
       stepName: '',
       title: localization.common.selectName,
-      subTitle: '',
+      subTitle: 'Specify a unique name for the virtual machine.',
       status: UI_E_WIZARD_STATUS.INACTIVE,
       isValid: true,
       testId: 'backup-restore-select-name',
       fields: {
         name: {
           field: '',
-          alert: '',
-        },
-      },
+          alert: ''
+        }
+      }
     },
     {
       id: dynamicSteps.selectStorage,
       stepName: '',
       title: localization.common.selectStorage,
-      subTitle: '',
+      subTitle: 'Select a storage for the configuration and disk files.',
       status: UI_E_WIZARD_STATUS.INACTIVE,
       isValid: true,
       testId: 'backup-restore-select-storage',
       fields: {
         storage: {
           field: '',
-          alert: '',
-        },
-      },
+          alert: ''
+        }
+      }
     },
     {
       id: dynamicSteps.selectDisks,
@@ -65,31 +65,31 @@ export const stepsFunc = (
       fields: {
         disk_devices: {
           field: '',
-          alert: '',
-        },
+          alert: ''
+        }
       },
-      testId: 'backup-restore-select--disks',
+      testId: 'backup-restore-select--disks'
     },
     {
       id: dynamicSteps.selectNetwork,
       stepName: '',
       title: localization.common.selectNetwork,
-      subTitle: '',
+      subTitle: 'Select adapter types and networks in Procurator.',
       status: UI_E_WIZARD_STATUS.INACTIVE,
       isValid: true,
       testId: 'backup-restore-select-network',
-      fields: {},
+      fields: {}
     },
     {
       id: dynamicSteps.readyComplete,
       stepName: '',
       title: localization.common.readyComplete,
-      subTitle: localization.common.clickFinishRestore,
+      subTitle: localization.backup.restoreBackupReviewSubtitle,
       status: UI_E_WIZARD_STATUS.INACTIVE,
       isValid: true,
       testId: 'backup-restore-ready-complete',
-      fields: {},
-    },
+      fields: {}
+    }
   ]
 }
 
@@ -103,6 +103,6 @@ export const stepsSchemeInitial = [
     dynamicSteps.selectStorage,
     dynamicSteps.selectDisks,
     dynamicSteps.selectNetwork,
-    dynamicSteps.readyComplete,
-  ], // as new
+    dynamicSteps.readyComplete
+  ] // as new
 ]

package/components/common/pages/backups/modals/restore/name/Name.vue

@@ -1,166 +1,31 @@
 <template>
-  <div class="select-name">
-    <atoms-alert
-      v-show="errors.length"
-      :items="errors"
-      status="alert-danger"
-      test-id="name-alert"
-      @remove="onRemoveValidationErrors"
-    />
-
-    <form
-      id="virtual-machine-form"
-      class="flex items-center pt-5"
-      @submit.prevent
-    >
-      <label for="virtual-machine-name"
-        >{{ localization.common.virtualMachineName }}:</label
-      >
-      <input
-        id="virtual-machine-name"
-        v-model.trim="model.pvm.name"
-        data-id="virtual-machine-name-input"
-        type="text"
-        maxlength="54"
-      />
-    </form>
-  </div>
+  <common-pages-backups-modals-restore-name-new
+    v-if="isNewView"
+    v-model="model"
+    :messages-fields="props.messagesFields"
+  />
+  <common-pages-backups-modals-restore-name-old
+    v-else
+    v-model="model"
+    :show="props.show"
+  />
 </template>
 
 <script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_NameCheck } from '~/components/common/pages/backups/modals/restore/name/lib/models/interfaces'
+import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
 import type { UI_I_RestoreForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_I_ArbitraryObject } from '~/lib/models/interfaces'
 
 const model = defineModel<UI_I_RestoreForm>({ required: true })
 
 const props = defineProps<{
   show: boolean
-  nameFormSubmit: null | Function
-}>()
-const emits = defineEmits<{
-  (event: 'check-name', value: UI_I_NameCheck): void
+  messagesFields?: UI_I_ArbitraryObject<UI_I_ErrorFields>
 }>()
 
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-watch(
-  () => props.nameFormSubmit,
-  (newValue) => {
-    newValue && submit(newValue)
-  }
-)
-
-const submit = async (cb: Function): Promise<void> => {
-  const name = model.value.pvm.name
-
-  if (name !== '') {
-    const isNameValid = await checkNameIsValid(name)
-    if (!isNameValid) {
-      // @ts-ignore
-      cb(false)
-      return
-    }
-  }
-
-  onRemoveValidationErrors()
-  // @ts-ignore
-  cb(true)
-}
-const checkNameIsValid = async (name: string): Promise<boolean> => {
-  return new Promise((resolve) => {
-    emits('check-name', {
-      name,
-      cb: (error): void => {
-        const status = error?.statusCode || 200
-        switch (status) {
-          case 400: // Empty name
-            showValidationErrors([
-              localization.value.common.emptyNameValidationDescription,
-            ])
-            resolve(false)
-            break
-          case 405: // Invalid kind
-            showValidationErrors([
-              localization.value.common.kindValidationDescription,
-            ])
-            resolve(false)
-            break
-          case 406: // Invalid name
-            showValidationErrors([
-              localization.value.common.nameValidationDescription,
-            ])
-            resolve(false)
-            break
-          case 409: // Name exist
-            showValidationErrors([
-              localization.value.common.vmNameExistInSelectedLocation,
-            ])
-            resolve(false)
-            break
-        }
+const { $store }: any = useNuxtApp()
 
-        resolve(true)
-      },
-    })
-  })
-}
-
-const errors = ref<string[]>([])
-const showValidationErrors = (data: string[]): void => {
-  errors.value = data
-}
-const onRemoveValidationErrors = (): void => {
-  errors.value = []
-}
-
-watch(
-  () => props.show,
-  (newValue) => {
-    if (!newValue) return
-
-    const input = document.getElementById('virtual-machine-name')
-    if (!input) return
-
-    setTimeout(() => {
-      input.focus()
-    }, 0)
-  }
-)
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 </script>
 
-<style scoped lang="scss">
-.select-name {
-  form {
-    label {
-      width: 216px;
-    }
-    input {
-      width: 345px;
-    }
-  }
-
-  .tree-view-wrap {
-    position: relative;
-    border: 1px solid #000;
-    padding: 5px;
-    max-height: 300px;
-    min-height: 200px;
-    overflow: auto;
-    margin-bottom: 10px;
-  }
-}
-.content-signpost {
-  .icon-show-help {
-    cursor: pointer;
-  }
-
-  .help-title {
-    font-size: 22px;
-    margin-bottom: 24px;
-  }
-  .signpost {
-    max-width: 360px;
-  }
-}
-</style>
+<style scoped lang="scss"></style>

package/components/common/pages/backups/modals/restore/name/NameNew.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="basics-step-row">
+    <div class="basics-step-row-title">
+      <span class="basics-step-row-title-text">
+        {{ localization.common.virtualMachineName }}
+      </span>
+    </div>
+    <div class="basics-step-row-content">
+      <ui-input
+        id="vm-backup-name-input"
+        v-model="model.pvm.name"
+        :placeholder="localization.common.name"
+        :error="props.messagesFields?.name.field"
+        test-id="vm-backup-name-input"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type { UI_I_RestoreForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_I_ArbitraryObject } from '~/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const model = defineModel<UI_I_RestoreForm>({ required: true })
+
+const props = defineProps<{
+  messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+<style scoped lang="scss">
+.basics-step {
+  &-row {
+    min-height: 36px;
+    width: 100%;
+    display: flex;
+    column-gap: 16px;
+    align-items: center;
+
+    &-title {
+      padding-top: 8px;
+      max-width: 240px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      column-gap: 8px;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 20px;
+      letter-spacing: 0;
+      vertical-align: middle;
+      align-self: flex-start;
+      color: var(--wizard-content-title);
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      &-text {
+        display: block;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        text-transform: capitalize;
+      }
+    }
+
+    &-content {
+      max-width: 480px;
+      width: 100%;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 20px;
+      letter-spacing: 0;
+      vertical-align: middle;
+      color: var(--wizard-content-value);
+
+      &-text {
+        display: flex;
+        column-gap: 8px;
+        align-items: center;
+
+        &-icon {
+          width: 20px;
+          min-width: 20px;
+          height: 20px;
+          min-height: 20px;
+        }
+      }
+
+      &-switch-container {
+        width: fit-content;
+      }
+    }
+  }
+}
+</style>

package/components/common/pages/backups/modals/restore/name/NameOld.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="select-name">
+    <form
+      id="virtual-machine-form"
+      class="flex items-center pt-5"
+      @submit.prevent
+    >
+      <label for="virtual-machine-name"
+        >{{ localization.common.virtualMachineName }}:</label
+      >
+      <input
+        id="virtual-machine-name"
+        v-model.trim="model.pvm.name"
+        data-id="virtual-machine-name-input"
+        type="text"
+        maxlength="54"
+      />
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_RestoreForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+
+const model = defineModel<UI_I_RestoreForm>({ required: true })
+
+const props = defineProps<{
+  show: boolean
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+watch(
+  () => props.show,
+  (newValue) => {
+    if (!newValue) return
+
+    const input = document.getElementById('virtual-machine-name')
+    if (!input) return
+
+    setTimeout(() => {
+      input.focus()
+    }, 0)
+  }
+)
+</script>
+
+<style scoped lang="scss">
+.select-name {
+  form {
+    label {
+      width: 216px;
+    }
+
+    input {
+      width: 345px;
+    }
+  }
+
+  .tree-view-wrap {
+    position: relative;
+    border: 1px solid #000;
+    padding: 5px;
+    max-height: 300px;
+    min-height: 200px;
+    overflow: auto;
+    margin-bottom: 10px;
+  }
+}
+
+.content-signpost {
+  .icon-show-help {
+    cursor: pointer;
+  }
+
+  .help-title {
+    font-size: 22px;
+    margin-bottom: 24px;
+  }
+
+  .signpost {
+    max-width: 360px;
+  }
+}
+</style>

package/components/common/pages/backups/modals/restore/networks/Networks.vue

@@ -1,31 +1,22 @@
 <template>
-  <div class="select-network h-full flex flex-col">
-    <atoms-alert
-      v-if="props.alertMessages.length"
-      :items="props.alertMessages"
-      status="alert-danger"
-      test-id="import-vms-select-networks-errors"
-      @remove="onHideAlert"
-    />
-
-    <common-pages-backups-modals-restore-networks-table
-      v-model="model"
-      :networks-table="model.pvm.network_devices"
-      :source-networks="props.networks"
-      :loading="networkTableLoading"
-      @hide-alert="onHideAlert"
-    />
-
-    <common-wizards-common-steps-compute-resource-compatibility
-      :loading="!model.pvm.network_devices.length"
-      :text="localization.common.compatibilityChecksSucceeded"
-      status="success"
-    />
-  </div>
+  <common-pages-backups-modals-restore-networks-new
+    v-if="isNewView"
+    v-model="model"
+    :alert-messages="props.alertMessages"
+    :networks="props.networks"
+    :networks-loading="networkTableLoading"
+  />
+  <common-pages-backups-modals-restore-networks-old
+    v-else
+    v-model="model"
+    :alert-messages="props.alertMessages"
+    :networks="props.networks"
+    :networks-loading="networkTableLoading"
+    @hide-alert="onHideAlert"
+  />
 </template>
 
 <script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
 import type { UI_I_RestoreForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
 
@@ -39,7 +30,9 @@ const emits = defineEmits<{
   (event: 'hide-alert'): void
 }>()
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const networkTableLoading = ref<boolean>(false)
 const getNetworks = async (): Promise<void> => {

package/components/common/pages/backups/modals/restore/networks/NetworksNew.vue

@@ -0,0 +1,78 @@
+<template>
+  <common-pages-backups-modals-restore-networks-table-new-table
+    v-model="model"
+    :networks="model.pvm.network_devices"
+    :source-networks="props.networks"
+    :networks-loading="props.networksLoading"
+  />
+
+  <div class="assignment-validation mt-6">
+    <h2 class="assignment-validation__title">
+      {{ localization.common.compatibility }}
+    </h2>
+
+    <div
+      :class="[
+        'assignment-validation__message flex items-center',
+        !selectedLicense && 'no-selected',
+      ]"
+    >
+      <ui-icon
+        name="success-fill-2"
+        width="16"
+        height="16"
+        class="assignment-validation__icon"
+      />
+      {{ localization.common.compatibilityChecksSucceeded }}
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+import type { UI_I_RestoreForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+
+const model = defineModel<UI_I_RestoreForm>({ required: true })
+
+const props = defineProps<{
+  alertMessages: string[]
+  networks: UI_I_NetworkTableItem[]
+  networksLoading: boolean
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedLicense = ref<boolean>(true)
+</script>
+<style scoped lang="scss">
+.assignment-validation {
+  &__title {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--select-storage-title-color);
+    margin-bottom: 16px;
+  }
+
+  &__message {
+    font-family: 'Inter', sans-serif;
+    color: var(--title-form-first-color);
+    background-color: var(--select-bg);
+    border: 1px solid var(--line-color);
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 100%;
+    vertical-align: middle;
+    border-radius: 8px;
+    padding: 12px;
+    column-gap: 12px;
+
+    &.no-selected {
+      color: #9da6ad; // for light and dark mode
+    }
+  }
+
+  &__icon {
+    min-width: 16px;
+  }
+}
+</style>

package/components/common/pages/backups/modals/restore/networks/NetworksOld.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="select-network h-full flex flex-col">
+    <atoms-alert
+      v-if="props.alertMessages.length"
+      :items="props.alertMessages"
+      status="alert-danger"
+      test-id="import-vms-select-networks-errors"
+      @remove="onHideAlert"
+    />
+
+    <common-pages-backups-modals-restore-networks-table-old-table
+      v-model="model"
+      :networks-table="model.pvm.network_devices"
+      :source-networks="props.networks"
+      :loading="props.networksLoading"
+      @hide-alert="onHideAlert"
+    />
+
+    <common-wizards-common-steps-compute-resource-compatibility
+        :loading="!model.pvm.network_devices.length"
+        :text="localization.common.compatibilityChecksSucceeded"
+        status="success"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+import type { UI_I_RestoreForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type {UI_I_Localization} from "~/lib/models/interfaces";
+
+const model = defineModel<UI_I_RestoreForm>({ required: true })
+const props = defineProps<{
+  alertMessages: string[]
+  networks: UI_I_NetworkTableItem[]
+  networksLoading: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'hide-alert'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onHideAlert = (): void => {
+  emits('hide-alert')
+}
+</script>
+
+<style scoped lang="scss"></style>