bfg-common 1.5.514 → 1.5.516

package/components/common/pages/backups/modals/createBackup/New.vue

@@ -0,0 +1,267 @@
+<template>
+  <ui-wizard
+    :steps="props.wizard.steps"
+    :selected-scheme="props.selectedScheme"
+    :is-loading="props.wizard.wizardLoader.status"
+    :title="props.title"
+    :texts="texts"
+    test-id="add-vm-backup-wizard"
+    show
+    @change-steps="onChangeSteps"
+    @hide="onHideModal"
+    @submit="onCreateDatastore"
+  >
+    <template #content="{ selectedStep }">
+      <ui-wizard-block
+        v-if="selectedStep.id === dynamicSteps.general"
+        :sub-title-height="height0"
+      >
+        <template #subTitle>
+          <div ref="subTitleBlock0">
+            <ui-alert
+              v-if="props.alertMessages[dynamicSteps.general].length"
+              :messages="props.alertMessages[dynamicSteps.general]"
+              test-id="add-vm-backup-general-error-alert"
+              type="error"
+              size="md"
+              class="mb-3"
+            />
+
+            <div class="subtitle-block flex-row items-start">
+              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <div class="mt-4">
+            <common-pages-backups-modals-create-backup-general
+              v-model="model"
+              :show="selectedStep.id === dynamicSteps.general"
+              :messages-fields="selectedStep.fields"
+            />
+          </div>
+        </template>
+      </ui-wizard-block>
+
+      <ui-wizard-block
+        v-if="selectedStep.id === dynamicSteps.disks"
+        :sub-title-height="height1"
+      >
+        <template #subTitle>
+          <div ref="subTitleBlock1">
+            <ui-alert
+              v-if="props.alertMessages[dynamicSteps.disks].length"
+              :messages="props.alertMessages[dynamicSteps.disks]"
+              test-id="add-vm-backup-disks-error-alert"
+              type="error"
+              size="md"
+              class="mb-3"
+            />
+
+            <div class="subtitle-block flex-row w-full items-start">
+              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <div class="mt-3 mb-4">
+            <common-pages-backups-modals-create-backup-disks
+              v-model="model"
+              :disks="props.disks"
+              :disks-loading="props.disksLoading"
+            />
+          </div>
+        </template>
+      </ui-wizard-block>
+
+      <ui-wizard-block
+        v-if="selectedStep.id === dynamicSteps.datastores"
+        :sub-title-height="height2"
+      >
+        <template #subTitle>
+          <div ref="subTitleBlock2">
+            <ui-alert
+              v-if="props.alertMessages[dynamicSteps.datastores].length"
+              :messages="props.alertMessages[dynamicSteps.datastores]"
+              test-id="add-vm-backup-datastores-error-alert"
+              type="error"
+              size="md"
+              class="mb-3"
+            />
+
+            <div class="subtitle-block flex-row w-full items-start">
+              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <div class="mt-3 mb-4">
+            <common-pages-backups-modals-create-backup-datastores
+              v-show="selectedStep.id === dynamicSteps.datastores"
+              v-model="model"
+              :datastore-table="props.datastoreTable"
+              :datastore-table-loading="props.datastoreTableLoading"
+            />
+          </div>
+        </template>
+      </ui-wizard-block>
+
+      <ui-wizard-block
+        v-if="selectedStep.id === dynamicSteps.configuration"
+        :sub-title-height="height3"
+      >
+        <template #subTitle>
+          <div ref="subTitleBlock3">
+            <ui-alert
+              v-if="props.alertMessages[dynamicSteps.configuration].length"
+              :messages="props.alertMessages[dynamicSteps.configuration]"
+              test-id="add-vm-backup-configuration-error-alert"
+              type="error"
+              size="md"
+              class="mb-3"
+            />
+
+            <div class="subtitle-block flex-row items-start">
+              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <div class="mt-4">
+            <common-pages-backups-modals-create-backup-configuration
+              v-model="model"
+              :messages-fields="selectedStep.fields"
+            />
+          </div>
+        </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 flex-row items-start">
+              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <div class="mt-4">
+            <div class="ready-to-complete"></div>
+            <common-ready-to-complete :data="props.readyToCompleteData" />
+          </div>
+        </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_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
+import { dynamicSteps } from '~/components/common/pages/backups/modals/createBackup/lib/config/steps'
+import type {
+  UI_I_BackupDatastoreTable,
+  UI_I_CreateBackupForm,
+  UI_I_Pvm,
+} from '~/components/common/pages/backups/modals/lib/models/interfaces'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+// ToDo в новом дизайне пока нет страница scheduledTasks
+// const modelSchedulerTask = defineModel<UI_I_ScheduleNewTasksForm>(
+//   'schedulerForm',
+//   { required: true }
+// )
+const props = defineProps<{
+  wizard: Wizard
+  selectedScheme: number[]
+  alertMessages: string[][]
+  title: string
+  target: string
+  isScheduledTasks: boolean
+  isEditScheduledTasks: boolean
+  selectedVmName: string
+  disks: UI_I_Pvm['disk_devices']
+  disksLoading: boolean
+  datastoreTable: UI_I_BackupDatastoreTable | null
+  datastoreTableLoading: boolean
+  readyToCompleteData: UI_I_TableInfoItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'change-steps', value: UI_I_WizardStep[]): void
+  (event: 'hide'): void
+  (event: 'submit'): 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.create,
+  incompleteTitle: localization.value.common.incompleteProcess,
+  incompleteMessage: localization.value.common.incompleteProcessMessage,
+  incompleteCancel: localization.value.common.cancel,
+  incompleteLeave: localization.value.common.leave,
+  step: localization.value.common.step,
+  of: localization.value.common.of2,
+}))
+
+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;
+  }
+}
+
+.ready-to-complete {
+  :deep(.details-list):nth-child(1) {
+    .details-item-value {
+      white-space: break-spaces;
+      overflow: auto;
+    }
+  }
+}
+</style>

package/components/common/pages/backups/modals/createBackup/Old.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="create-backup">
+    <atoms-wizard
+      show
+      :wizard="props.wizard"
+      :selected-scheme="props.selectedScheme"
+      :title="props.title"
+      :localization="localization"
+      :test-id="testId"
+      @change-steps="onChangeSteps"
+      @hide="onHideModal"
+      @submit="onFinish"
+    >
+      <template #modalBody="{ selectedStep }">
+        <atoms-alert
+          v-show="props.alertErrors.length"
+          status="alert-danger"
+          :items="props.alertErrors"
+          test-id="create-backup-alert"
+          @remove="emits('remove-validation-errors')"
+        />
+
+        <common-pages-scheduled-tasks-modals-common-new-task-form
+          v-show="selectedStep.id === dynamicSteps.schedulingOptions"
+          v-model="modelSchedulerTask"
+          :target="props.selectedVmName"
+          class="new-task-form"
+        />
+
+        <common-pages-backups-modals-create-backup-general
+          v-show="selectedStep.id === dynamicSteps.general"
+          v-model="model"
+          :show="selectedStep.id === dynamicSteps.general"
+        />
+
+        <common-pages-backups-modals-create-backup-disks
+          v-show="selectedStep.id === dynamicSteps.disks"
+          v-model="model"
+          :disks="props.disks"
+          :disks-loading="props.disksLoading"
+        />
+
+        <common-pages-backups-modals-create-backup-datastores
+          v-show="selectedStep.id === dynamicSteps.datastores"
+          v-model="model"
+          :datastore-table="props.datastoreTable"
+          :datastore-table-loading="props.datastoreTableLoading"
+        />
+
+        <common-pages-backups-modals-create-backup-configuration
+          v-show="selectedStep.id === dynamicSteps.configuration"
+          v-model="model"
+        />
+
+        <common-ready-to-complete
+          v-show="selectedStep.id === dynamicSteps.readyComplete"
+          :data="props.readyToCompleteData"
+        />
+      </template>
+    </atoms-wizard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_WizardStep,
+} from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
+import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
+import type {
+  UI_I_BackupDatastoreTable,
+  UI_I_CreateBackupForm,
+  UI_I_Pvm,
+} from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import {
+  dynamicSteps,
+} from '~/components/common/pages/backups/modals/createBackup/lib/config/steps'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+const modelSchedulerTask = defineModel<UI_I_ScheduleNewTasksForm>(
+  'schedulerForm',
+  { required: true }
+)
+
+const props = defineProps<{
+  wizard: Wizard
+  selectedScheme: number[]
+  alertMessages: string[][]
+  title: string
+  isEdit?: boolean // ToDo проверить на использование
+  target: string
+  isScheduledTasks: boolean
+  isEditScheduledTasks: boolean
+  selectedVmName: string
+  disks: UI_I_Pvm['disk_devices']
+  disksLoading: boolean
+  datastoreTable: UI_I_BackupDatastoreTable | null
+  datastoreTableLoading: boolean
+  alertErrors: string[]
+  readyToCompleteData: UI_I_TableInfoItem[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'change-step-create-backup', value: UI_I_WizardStep[]): void
+  (event: 'remove-validation-errors'): void
+  (event: 'finish'): void
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const testId = ref<string>(props.isEdit ? 'update-backup' : 'create-backup') // ToDo проверить на использованиe(isEdit)
+
+watch(
+  modelSchedulerTask,
+  (newValue: UI_I_ScheduleNewTasksForm) => {
+    if (props.isScheduledTasks) props.wizard.setDisabledNextButton(newValue.isValid)
+  },
+  { immediate: true, deep: true }
+)
+
+const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
+  emits('change-step-create-backup', value)
+}
+
+
+const onFinish = (): void => {
+  emits('finish')
+}
+const onHideModal = (): void => {
+  emits('hide')
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.modal-body) {
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/components/common/pages/backups/modals/createBackup/configuration/Configuration.vue

@@ -1,29 +1,29 @@
-<template>
-  <div class="configuration">
-    <div class="stack-view">
-      <common-pages-backups-modals-create-backup-configuration-strategy
-        v-model="model"
-      />
-      <!--      <common-pages-backups-modals-create-backup-configuration-backup-window-->
-      <!--        v-model="model"-->
-      <!--      />-->
-      <common-pages-backups-modals-create-backup-configuration-max-bandwidth
-        v-model="model"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
-
-const model = defineModel<UI_I_CreateBackupForm>({ required: true })
-</script>
-
-<style lang="scss" scoped>
-.stack-view {
-  :deep(.select-input__inner) {
-    min-width: max-content;
-  }
-}
-</style>
+<template>
+  <common-pages-backups-modals-create-backup-configuration-new
+    v-if="isNewView"
+    v-model="model"
+    :messages-fields="props.messagesFields"
+  />
+  <common-pages-backups-modals-create-backup-configuration-old
+    v-else
+    v-model="model"
+  />
+</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<{
+  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/configuration/ConfigurationNew.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="basics-step-row">
+    <div class="basics-step-row-title">
+        <span class="basics-step-row-title-text">
+          {{ localization.common.strategy }}
+        </span>
+    </div>
+    <div class="basics-step-row-content">
+      <ui-select
+        id="vm-backup-name-input"
+        v-model="model.strategy"
+        :items="strategyOptionsLocal"
+        test-id="vm-backup-name-input"
+        select-width="100%"
+        :class="['strategy-select', { capitalize: isLangEn }]"
+      />
+    </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.maxBandwidth }}
+        </span>
+    </div>
+
+    <div class="basics-step-row-content">
+      <div class="basics-step-row-content-max-band">
+        <ui-input
+          v-model="maxBindwidthLocal"
+          :error="props.messagesFields.bandWidth.field"
+          test-id="vm-backup-max-bandwidth-input"
+          class="max-bandwidth-input"
+        />
+
+        <ui-select
+          id="vm-backup-name-input"
+          v-model="selectedType"
+          :items="maxBandWidthOptionsLocal"
+          test-id="vm-backup-max-bandwidth-select"
+          class="max-bandwidth-select"
+          select-width="100%"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_I_ArbitraryObject } from '~/node_modules/bfg-uikit/models/interfaces'
+import type {UI_I_ErrorFields} from "~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces";
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { strategyOptionsFunc } from '~/components/common/pages/backups/modals/createBackup/lib/config/strategyOptions'
+import {
+  maxBandwidthOptions
+} from '~/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/config/options'
+import type {UI_I_CreateBackupForm} from "~/components/common/pages/backups/modals/lib/models/interfaces";
+import type {
+  UI_T_BandwidthOption
+} from "~/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/models/types";
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+const props = defineProps<{
+  messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+}>()
+
+const { $binary }: any = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isLangEn = ref(useLocalStorage('lang') === 'en_US')
+
+const strategyOptionsLocal = computed<UI_I_Dropdown[]>(() =>
+  strategyOptionsFunc(localization.value).map((item) => ({
+      text: item.label,
+      ...item
+    })
+  )
+)
+
+const maxBandWidthOptionsLocal = computed(() =>
+  maxBandwidthOptions.map(item => ({
+    text: item.label,
+    ...item
+  }))
+)
+
+const selectedType = ref<UI_T_BandwidthOption>(0)
+watch(selectedType, (newValue) => {
+  if (newValue === 1) model.value.bandwidth_limit *= 1_024
+  else model.value.bandwidth_limit /= 1_024
+})
+
+const maxBindwidthLocal = computed<number>({
+  get() {
+    return selectedType.value === 1
+      ? $binary.bToGb(model.value.bandwidth_limit)
+      : $binary.bToMb(model.value.bandwidth_limit)
+  },
+  set(newValue: number) {
+    model.value.bandwidth_limit =
+      selectedType.value === 1
+        ? $binary.gbToB(newValue)
+        : $binary.mbToB(newValue)
+  }
+})
+</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;
+      }
+
+      .strategy-select.capitalize, :deep(.ui-select-toggle-button) {
+        text-transform: capitalize;
+      }
+      &-max-band {
+        display: flex;
+        gap: 12px;
+
+        .max-bandwidth-input {
+          max-width: 276px;
+          width: 100%;
+        }
+
+        .max-bandwidth-select {
+          max-width: 192px;
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  &-line {
+    height: 0;
+    width: 100%;
+    border-bottom: 1px solid var(--wizard-content-line);
+    margin: 16px 0;
+  }
+}
+
+
+@media (max-width: 1024px) {
+  .basics-step {
+    &-row {
+      &-content {
+        &-max-band {
+          flex-direction: column;
+
+          .max-bandwidth-input, .max-bandwidth-select {
+            max-width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>