bfg-common 1.5.514 → 1.5.516

package/components/common/pages/backups/modals/createBackup/disks/tableView/{lib → old/lib}/models/types.ts

@@ -1,10 +1,10 @@
-export type UI_T_DiskTableKeysTuple = [
-  'source',
-  'device_type',
-  'bus',
-  'target',
-  'capacity_mb',
-  'used_mb',
-  'free_mb',
-  'volume_path',
-]
+export type UI_T_DiskTableKeysTuple = [
+  'source',
+  'device_type',
+  'bus',
+  'target',
+  'capacity_mb',
+  'used_mb',
+  'free_mb',
+  'volume_path',
+]

package/components/common/pages/backups/modals/createBackup/general/General.vue

@@ -1,141 +1,33 @@
-<template>
-  <div class="general">
-    <form @submit.prevent>
-      <div class="field flex pt-4">
-        <label for="general-name">{{ localization.common.name }}:</label>
-        <input
-          id="general-name"
-          v-model.trim="model.name"
-          data-id="general-name-input"
-          type="text"
-        />
-      </div>
-      <div class="field flex pt-4">
-        <label for="general-description"
-          >{{ localization.common.description }} ({{
-            localization.common.optional
-          }}):</label
-        >
-        <textarea
-          id="general-description"
-          v-model="model.description"
-          data-id="general-description-textarea"
-        />
-      </div>
-    </form>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
-import type { UI_I_NameCheck } from '~/components/common/pages/backups/modals/restore/name/lib/models/interfaces'
-
-const model = defineModel<UI_I_CreateBackupForm>({ required: true })
-
-const props = defineProps<{
-  show: boolean
-  generalSubmit: null | Function
-}>()
-const emits = defineEmits<{
-  (event: 'check-name', value: UI_I_NameCheck): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-watch(
-  () => props.generalSubmit,
-  (newValue) => {
-    newValue && submit(newValue)
-  }
-)
-const submit = async (cb: Function): Promise<void> => {
-  const name = model.value.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
-        }
-
-        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('general-name')
-    if (!input) return
-
-    setTimeout(() => {
-      input.focus()
-    }, 0)
-  }
-)
-</script>
-
-<style lang="scss" scoped>
-.field {
-  label {
-    width: 216px;
-  }
-  input,
-  textarea {
-    width: 345px;
-  }
-}
-</style>
+<template>
+  <common-pages-backups-modals-create-backup-general-new
+    v-if="isNewView"
+    v-model="model"
+    :messages-fields="props.messagesFields"
+  />
+
+  <common-pages-backups-modals-create-backup-general-old
+    v-else
+    v-model="model"
+    :show="props.show"
+  />
+</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_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_I_ArbitraryObject } from '~/lib/models/interfaces'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const props = defineProps<{
+  show: boolean
+  messagesFields?: UI_I_ArbitraryObject<UI_I_ErrorFields>
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/common/pages/backups/modals/createBackup/general/GeneralNew.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="basics-step-row">
+    <div class="basics-step-row-title">
+        <span class="basics-step-row-title-text">
+          {{ localization.common.name }}
+        </span>
+    </div>
+    <div class="basics-step-row-content">
+      <ui-input
+        id="vm-backup-name-input"
+        v-model="model.name"
+        :error="props.messagesFields?.name.field"
+        :placeholder="localization.common.name"
+        test-id="vm-backup-name-input"
+      />
+    </div>
+  </div>
+
+  <div class="basics-step-line"></div>
+
+  <div class="basics-step-row">
+    <div class="basics-step-row-title">
+        <span class="basics-step-row-title-text">
+          {{ localization.common.description }} ({{ localization.common.optional }})
+        </span>
+    </div>
+    <div class="basics-step-row-content">
+      <ui-textarea
+        id="vm-backup-name-input"
+        v-model="model.description"
+        :placeholder="localization.common.description"
+        test-id="vm-backup-name-input"
+        height="84"
+      />
+    </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_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ArbitraryObject } from '~/lib/models/interfaces'
+
+const model = defineModel<UI_I_CreateBackupForm>({ 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 {
+  padding: 16px 0 16px;
+
+  &-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;
+      }
+    }
+
+    &-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;
+      }
+    }
+  }
+
+  &-line {
+    height: 0;
+    width: 100%;
+    border-bottom: 1px solid var(--wizard-content-line);
+    margin: 16px 0;
+  }
+}
+</style>

package/components/common/pages/backups/modals/createBackup/general/GeneralOld.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="general">
+    <form @submit.prevent>
+      <div class="field flex pt-4">
+        <label for="general-name">{{ localization.common.name }}:</label>
+        <input
+          id="general-name"
+          v-model.trim="model.name"
+          data-id="general-name-input"
+          type="text"
+        />
+      </div>
+      <div class="field flex pt-4">
+        <label for="general-description"
+        >{{ localization.common.description }} ({{
+            localization.common.optional
+          }}):</label
+        >
+        <textarea
+          id="general-description"
+          v-model="model.description"
+          data-id="general-description-textarea"
+        />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+
+const model = defineModel<UI_I_CreateBackupForm>({ 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('general-name')
+    if (!input) return
+
+    setTimeout(() => {
+      input.focus()
+    }, 0)
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.field {
+  label {
+    width: 216px;
+  }
+  input,
+  textarea {
+    width: 345px;
+  }
+}
+</style>

package/components/common/pages/backups/modals/createBackup/lib/config/readyToCompleteOptions.ts

@@ -0,0 +1,59 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
+import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
+
+export const readyToCompleteOptions = (backupForm: UI_I_CreateBackupForm, localization: UI_I_Localization, strategyOptions: UI_I_SelectInputItem[]): UI_I_TableInfoItem[] => {
+  const { $binary } = useNuxtApp()
+
+  const result = [
+    // General
+    {
+      label: localization.common.name,
+      value: backupForm.name,
+      iconClassName: 'icon-backup'
+    },
+    {
+      label: localization.common.description,
+      value: backupForm.description
+    }
+  ]
+
+  // Disks
+  backupForm.disk_devices.forEach((disk_device, i) => {
+    result.push({
+      label: `${localization.common.disk} ${i + 1}`,
+      value: disk_device.location,
+      iconClassName: 'icon-vSphere-dsVmDisk'
+    })
+  })
+
+  // Datastores
+  result.push({
+    label: localization.common.datastore,
+    value: 'test',
+    iconClassName: 'vsphere-icon-datastore'
+  })
+
+  // Configuration
+  result.push({
+    label: localization.common.strategy,
+    value:
+      strategyOptions.find(
+        (option) => option.value === backupForm.strategy
+      )?.label || ''
+  })
+
+  const gbSizeByB = 1_073_741_824
+  const maxBandwidth =
+    backupForm.bandwidth_limit >= gbSizeByB
+      ? $binary.bToGb(backupForm.bandwidth_limit) + ' Gbps'
+      : $binary.bToMb(backupForm.bandwidth_limit) + ' Mbps'
+
+  result.push({
+    label: localization.common.maxBandwidth,
+    value: maxBandwidth
+  })
+
+  return result
+}

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

@@ -1,117 +1,123 @@
-import type { UI_I_WizardStep } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
-import { UI_E_WIZARD_STATUS } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/enums'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_DynamicSteps } from '~/components/common/pages/backups/modals/createBackup/lib/models/interfaces'
-
-export const dynamicSteps: UI_I_DynamicSteps = {
-  schedulingOptions: 0,
-  general: 1,
-  disks: 2,
-  datastores: 3,
-  configuration: 4,
-  readyComplete: 5,
-}
-
-export const stepsFunc = (
-  localization: UI_I_Localization,
-): UI_I_WizardStep[] => {
-  return [
-    {
-      id: dynamicSteps.schedulingOptions,
-      stepName: '',
-      title: localization.common.schedulingOptions,
-      subTitle: '',
-      status: UI_E_WIZARD_STATUS.SELECTED,
-      isValid: true,
-      fields: {},
-      testId: 'new-roles-scheduling-options',
-    },
-    {
-      id: dynamicSteps.general,
-      stepName: '',
-      title: localization.common.general,
-      subTitle: '',
-      status: UI_E_WIZARD_STATUS.SELECTED, // ??
-      isValid: true,
-      fields: {
-        name: {
-          field: '',
-          alert: '',
-        },
-      },
-      testId: 'create-backup-general',
-    },
-    {
-      id: dynamicSteps.disks,
-      stepName: '',
-      title: localization.common.disks,
-      subTitle: localization.common.selectDisksInvolvedBackup,
-      status: UI_E_WIZARD_STATUS.INACTIVE,
-      isValid: true,
-      fields: {
-        disk_devices: {
-          field: '',
-          alert: '',
-        },
-      },
-      testId: 'create-backup-disks',
-    },
-    {
-      id: dynamicSteps.datastores,
-      stepName: '',
-      title: localization.common.datastores,
-      subTitle: localization.common.selectStorageConfigurationDiskFiles,
-      status: UI_E_WIZARD_STATUS.INACTIVE,
-      isValid: true,
-      fields: {
-        backup_storage: {
-          field: '',
-          alert: '',
-        },
-      },
-      testId: 'create-backup-datastores',
-    },
-    {
-      id: dynamicSteps.configuration,
-      stepName: '',
-      title: localization.common.configuration,
-      subTitle: '',
-      status: UI_E_WIZARD_STATUS.INACTIVE,
-      isValid: true,
-      fields: {},
-      testId: 'create-backup-configuration',
-    },
-    {
-      id: dynamicSteps.readyComplete,
-      stepName: '',
-      title: localization.common.readyComplete,
-      subTitle: localization.common.clickFinishStartCreation,
-      status: UI_E_WIZARD_STATUS.INACTIVE,
-      isValid: true,
-      testId: 'datastore-ready-complete',
-      fields: {},
-    },
-  ]
-}
-
-export const stepsSchemeInitial = (isScheduledTasks: boolean): number[][] => {
-  const resultWithOutScheduledTasks = [
-    dynamicSteps.general,
-    dynamicSteps.disks,
-    dynamicSteps.datastores,
-    dynamicSteps.configuration,
-    dynamicSteps.readyComplete,
-  ]
-  const resultWithScheduledTasks = [
-    dynamicSteps.schedulingOptions,
-    dynamicSteps.general,
-    dynamicSteps.disks,
-    dynamicSteps.datastores,
-    dynamicSteps.configuration,
-    dynamicSteps.readyComplete,
-  ]
-
-  return isScheduledTasks
-    ? [resultWithScheduledTasks]
-    : [resultWithOutScheduledTasks]
-}
+import type { UI_I_WizardStep } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import { UI_E_WIZARD_STATUS } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/enums'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_DynamicSteps } from '~/components/common/pages/backups/modals/createBackup/lib/models/interfaces'
+
+export const dynamicSteps: UI_I_DynamicSteps = {
+  schedulingOptions: 0,
+  general: 1,
+  disks: 2,
+  datastores: 3,
+  configuration: 4,
+  readyComplete: 5,
+}
+
+export const stepsFunc = (
+  localization: UI_I_Localization,
+): UI_I_WizardStep[] => {
+  return [
+    {
+      id: dynamicSteps.schedulingOptions,
+      stepName: '',
+      title: localization.common.schedulingOptions,
+      subTitle: '',
+      status: UI_E_WIZARD_STATUS.SELECTED,
+      isValid: true,
+      fields: {},
+      testId: 'new-roles-scheduling-options',
+    },
+    {
+      id: dynamicSteps.general,
+      stepName: '',
+      title: localization.common.general,
+      subTitle: 'Specify a unique name and a description for the backup.',
+      status: UI_E_WIZARD_STATUS.SELECTED, // ??
+      isValid: true,
+      fields: {
+        name: {
+          field: '',
+          alert: '',
+        },
+      },
+      testId: 'create-backup-general',
+    },
+    {
+      id: dynamicSteps.disks,
+      stepName: '',
+      title: localization.common.disks,
+      subTitle: localization.common.selectDisksInvolvedBackup,
+      status: UI_E_WIZARD_STATUS.INACTIVE,
+      isValid: true,
+      fields: {
+        disk_devices: {
+          field: '',
+          alert: '',
+        },
+      },
+      testId: 'create-backup-disks',
+    },
+    {
+      id: dynamicSteps.datastores,
+      stepName: '',
+      title: localization.common.datastores,
+
+      subTitle: localization.common.selectStorageConfigurationDiskFiles2,
+      status: UI_E_WIZARD_STATUS.INACTIVE,
+      isValid: true,
+      fields: {
+        backup_storage: {
+          field: '',
+          alert: '',
+        },
+      },
+      testId: 'create-backup-datastores',
+    },
+    {
+      id: dynamicSteps.configuration,
+      stepName: '',
+      title: localization.common.configuration,
+      subTitle: localization.common.configureBackupStrategyAndBandwidth,
+      status: UI_E_WIZARD_STATUS.INACTIVE,
+      isValid: true,
+      fields: {
+        bandWidth: {
+          field: '',
+          alert: '',
+        }
+      },
+      testId: 'create-backup-configuration',
+    },
+    {
+      id: dynamicSteps.readyComplete,
+      stepName: '',
+      title: localization.common.readyComplete,
+      subTitle: localization.backup.backupCreationReview,
+      status: UI_E_WIZARD_STATUS.INACTIVE,
+      isValid: true,
+      testId: 'datastore-ready-complete',
+      fields: {},
+    },
+  ]
+}
+
+export const stepsSchemeInitial = (isScheduledTasks: boolean): number[][] => {
+  const resultWithOutScheduledTasks = [
+    dynamicSteps.general,
+    dynamicSteps.disks,
+    dynamicSteps.datastores,
+    dynamicSteps.configuration,
+    dynamicSteps.readyComplete,
+  ]
+  const resultWithScheduledTasks = [
+    dynamicSteps.schedulingOptions,
+    dynamicSteps.general,
+    dynamicSteps.disks,
+    dynamicSteps.datastores,
+    dynamicSteps.configuration,
+    dynamicSteps.readyComplete,
+  ]
+
+  return isScheduledTasks
+    ? [resultWithScheduledTasks]
+    : [resultWithOutScheduledTasks]
+}