bfg-common 1.5.417 → 1.5.419

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

@@ -0,0 +1,371 @@
+<template>
+  <div class="create-backup">
+    <atoms-wizard
+      show
+      :wizard="wizard"
+      :selected-scheme="selectedScheme"
+      :title="title"
+      :localization="localization"
+      :test-id="testId"
+      @change-steps="onChangeSteps"
+      @hide="onHideModal"
+      @submit="onFinish"
+    >
+      <template #modalBody="{ selectedStep }">
+        <atoms-alert
+          v-show="errors.length"
+          status="alert-danger"
+          :items="errors"
+          test-id="create-backup-alert"
+          @remove="onRemoveValidationErrors"
+        />
+
+        <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"
+        />
+
+        <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"
+          @change="onChangeDatastore"
+        />
+
+        <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="readyToCompleteInfo"
+        />
+      </template>
+    </atoms-wizard>
+  </div>
+</template>
+
+<script setup lang="ts">
+// TODO move to common
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
+import type {
+  UI_I_WizardStep,
+  UI_I_ValidationReturn,
+} from '~/components/atoms/wizard/lib/models/interfaces'
+import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
+import type {
+  UI_I_CreateBackupForm,
+  UI_I_CreateBackupFormDiskDevice
+} from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_I_DynamicSteps } from '~/components/common/pages/backups/modals/createBackup/lib/models/interfaces'
+import Wizard from '~/components/atoms/wizard/lib/utils/utils'
+import {
+  stepsSchemeInitial,
+  stepsFunc, dynamicSteps,
+} from '~/components/common/pages/backups/modals/createBackup/lib/config/steps'
+import { strategyOptionsFunc } from '~/components/common/pages/backups/modals/createBackup/lib/config/strategyOptions'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+const modelSchedulerTask = defineModel<UI_I_ScheduleNewTasksForm>(
+  'schedulerForm',
+  { required: true }
+)
+
+const props = defineProps<{
+  isEdit: boolean
+  target: string
+  isScheduledTasks: boolean
+  isEditScheduledTasks: boolean
+  selectedVmName: string
+  disks: UI_I_CreateBackupFormDiskDevice[]
+  disksLoading: boolean
+  datastoreTable: any // ??
+  datastoreTableLoading: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'change-step-create-backup', value: UI_I_WizardStep[]): void
+  (event: 'finish'): void
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $binary }: any = useNuxtApp()
+
+const title = computed<string>(() => {
+  const { createBackup, updateBackup, scheduleNewTasks, scheduleTaskEdit } =
+    localization.value.common
+  let result = props.isEdit ? updateBackup : createBackup
+  if (props.isScheduledTasks) {
+    const schedulerMode = props.isEditScheduledTasks
+      ? scheduleTaskEdit
+      : scheduleNewTasks
+
+    result = `${schedulerMode} (${createBackup})`
+  }
+
+  return result
+})
+
+const testId = ref<string>(props.isEdit ? 'update-backup' : 'create-backup')
+
+const wizard: Wizard = new Wizard(
+  stepsFunc(localization.value),
+  stepsSchemeInitial(props.isScheduledTasks)
+)
+
+watch(
+  modelSchedulerTask,
+  (newValue: UI_I_ScheduleNewTasksForm) => {
+    if (props.isScheduledTasks) wizard.setDisabledNextButton(newValue.isValid)
+  },
+  { immediate: true, deep: true }
+)
+
+const selectedScheme = computed<number[]>(() => wizard.selectedScheme.value)
+const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
+  emits('change-step-create-backup', value)
+  wizard.changeSteps(value, validationFunc)
+}
+const validationFunc = async (
+  value: UI_I_WizardStep[],
+  currentStep: UI_I_WizardStep,
+  nextStep: UI_I_WizardStep
+): Promise<UI_I_ValidationReturn> => {
+  let stepHasError = false
+  const stepShouldStop = {
+    ifOnCurrentStep: false,
+    ifFromAnyStep: false,
+    stoppageStepId: -1,
+  }
+
+  if (
+    wizard.isValidateForStep(
+      dynamicSteps.general,
+      currentStep.id,
+      nextStep.id
+    )
+  ) {
+    const nameValidation = checkName(value)
+
+    value = nameValidation.newValue
+    stepHasError = stepHasError || nameValidation.stepHasError
+  }
+
+  if (
+    wizard.isValidateForStep(
+      dynamicSteps.disks,
+      currentStep.id,
+      nextStep.id
+    )
+  ) {
+    const validation = checkDisks(value)
+
+    value = validation.newValue
+    stepHasError = stepHasError || validation.stepHasError
+  }
+
+  if (
+    wizard.isValidateForStep(
+      dynamicSteps.datastores,
+      currentStep.id,
+      nextStep.id
+    )
+  ) {
+    const validation = checkDatastore(value)
+
+    value = validation.newValue
+    stepHasError = stepHasError || validation.stepHasError
+  }
+
+  return {
+    newValue: value,
+    stepHasError,
+    stepShouldStop,
+  }
+}
+
+const checkName = (value: UI_I_WizardStep[]): UI_I_ValidationReturn => {
+  let stepHasError = false
+
+  const isValid = !!model.value?.name
+  if (!isValid) {
+    stepHasError = wizard.setValidation(dynamicSteps.general, 'name', {
+      fieldMessage: localization.value.common.nameIsRequired,
+      alertMessage: localization.value.common.nameIsRequired,
+    })
+    showValidationErrors([localization.value.common.nameIsRequired])
+  } else if (wizard.hasMessage(dynamicSteps.general, 'name')) {
+    value = wizard.removeValidation(dynamicSteps.general, 'name', value)
+    onRemoveValidationErrors()
+  }
+
+  return {
+    stepHasError,
+    newValue: value,
+  }
+}
+
+const checkDisks = (value: UI_I_WizardStep[]): UI_I_ValidationReturn => {
+  let stepHasError = false
+
+  const isValidStores = !!model.value?.disk_devices.length
+  if (!isValidStores) {
+    stepHasError = wizard.setValidation(
+      dynamicSteps.disks,
+      'disk_devices',
+      {
+        fieldMessage: localization.value.common.diskIsRequired,
+        alertMessage: localization.value.common.diskIsRequired,
+      }
+    )
+    showValidationErrors([localization.value.common.diskIsRequired])
+  } else if (wizard.hasMessage(dynamicSteps.disks, 'disk_devices')) {
+    value = wizard.removeValidation(
+      dynamicSteps.disks,
+      'disk_devices',
+      value
+    )
+    onRemoveValidationErrors()
+  }
+
+  return {
+    stepHasError,
+    newValue: value,
+  }
+}
+
+const checkDatastore = (value: UI_I_WizardStep[]): UI_I_ValidationReturn => {
+  let stepHasError = false
+
+  const isValidStorage = !!model.value?.backup_storage.length
+  if (!isValidStorage) {
+    stepHasError = wizard.setValidation(
+      dynamicSteps.datastores,
+      'backup_storage',
+      {
+        fieldMessage: localization.value.common.datastoreIsRequired,
+        alertMessage: localization.value.common.datastoreIsRequired,
+      }
+    )
+    showValidationErrors([localization.value.common.datastoreIsRequired])
+  } else if (
+    wizard.hasMessage(dynamicSteps.datastores, 'backup_storage')
+  ) {
+    value = wizard.removeValidation(
+      dynamicSteps.datastores,
+      'backup_storage',
+      value
+    )
+    onRemoveValidationErrors()
+  }
+
+  return {
+    stepHasError,
+    newValue: value,
+  }
+}
+
+const selectedDatastoresNames = ref<string[]>([])
+const onChangeDatastore = (names: string[]): void => {
+  selectedDatastoresNames.value = names
+}
+
+const strategyOptions = ref<UI_I_OptionItem[]>(
+  strategyOptionsFunc(localization.value)
+)
+
+const readyToCompleteInfo = computed<UI_I_TableInfoItem[]>(() => {
+  // General
+  const result = [
+    {
+      label: localization.value.common.name,
+      value: model.value.name,
+    },
+    {
+      label: localization.value.common.description,
+      value: model.value.description,
+    },
+  ]
+
+  // Disks
+  model.value.disk_devices.forEach((disk_device, i) => {
+    result.push({
+      label: `${localization.value.common.disk} ${i + 1}`,
+      value: disk_device.location,
+    })
+  })
+
+  // Datastores
+  result.push({
+    label: localization.value.common.datastore,
+    value: selectedDatastoresNames.value.join(', '),
+  })
+
+  // Configuration
+  result.push({
+    label: localization.value.common.strategy,
+    value:
+      strategyOptions.value.find(
+        (option) => option.value === model.value.strategy
+      )?.label || '',
+  })
+  // result.push({
+  //   label: localization.value.common.backupWindow,
+  //   value: model.value.start_window_min + '',
+  // })
+
+  const gbSizeByB = 1_073_741_824
+  const maxBandwidth =
+    model.value.bandwidth_limit >= gbSizeByB
+      ? $binary.bToGb(model.value.bandwidth_limit) + ' Gbps'
+      : $binary.bToMb(model.value.bandwidth_limit) + ' Mbps'
+
+  result.push({
+    label: localization.value.common.maxBandwidth,
+    value: maxBandwidth,
+  })
+
+  return result
+})
+
+const errors = ref<string[]>([])
+const showValidationErrors = (data: string[]): void => {
+  errors.value = data
+}
+const onRemoveValidationErrors = (): void => {
+  errors.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

@@ -0,0 +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>

package/components/common/pages/backups/modals/createBackup/configuration/backupWindow/BackupWindow.vue

@@ -0,0 +1,26 @@
+<template>
+  <atoms-stack-block :has-children="false">
+    <template #stackBlockKey>
+      <span>{{ localization.common.backupWindow }}</span>
+    </template>
+    <template #stackBlockContent>
+      <input
+        v-model="model.start_window_min"
+        data-id="hours-input"
+        type="number"
+        class="hrs"
+      />
+    </template>
+  </atoms-stack-block>
+</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 localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/MaxBandwidth.vue

@@ -0,0 +1,65 @@
+<template>
+  <atoms-stack-block :has-children="false">
+    <template #stackBlockKey>
+      <span>{{ localization.common.maxBandwidth }}</span>
+    </template>
+    <template #stackBlockContent>
+      <div class="flex-align-center">
+        <input
+          v-model="maxBindwidthLocal"
+          data-id="mbps-input"
+          type="number"
+          class="mbps"
+        />
+
+        <common-select-input
+          v-model="selectedType"
+          :data="maxBandwidthOptionsLocal"
+          test-id="backup-max-bandwidth-type"
+          class="ml-1"
+        />
+      </div>
+    </template>
+  </atoms-stack-block>
+</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_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_T_BandwidthOption } from '~/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/models/types'
+import { maxBandwidthOptions } from '~/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/config/options'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $binary }: any = useNuxtApp()
+
+const maxBandwidthOptionsLocal = ref<UI_I_OptionItem[]>(maxBandwidthOptions)
+
+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)
+  },
+})
+
+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
+})
+</script>
+
+<style lang="scss" scoped>
+#backup-transaction-logs {
+  margin: 4px 4px 0 0;
+}
+</style>

package/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/config/options.ts

@@ -0,0 +1,6 @@
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+export const maxBandwidthOptions: UI_I_OptionItem[] = [
+  { label: 'Mbps', value: 0 },
+  { label: 'Gbps', value: 1 },
+]

package/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/models/types.ts

@@ -0,0 +1 @@
+export type UI_T_BandwidthOption = 0 | 1 // 0: mbps, 1: gbps

package/components/common/pages/backups/modals/createBackup/configuration/strategy/Strategy.vue

@@ -0,0 +1,36 @@
+<template>
+  <atoms-stack-block :has-children="false">
+    <template #stackBlockKey>
+      <span>{{ localization.common.strategy }}</span>
+    </template>
+    <template #stackBlockContent>
+      <common-select-input
+        v-model="model.strategy"
+        :data="strategyOptions"
+        test-id="backup-strategy"
+      />
+    </template>
+  </atoms-stack-block>
+</template>
+
+<script lang="ts" setup>
+// TODO merge with common-backups-modals-new-rule-retention-strategy
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import { strategyOptionsFunc } from '~/components/common/pages/backups/modals/createBackup/lib/config/strategyOptions'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const strategyOptions = ref<UI_I_OptionItem[]>(
+  strategyOptionsFunc(localization.value)
+)
+</script>
+
+<style lang="scss" scoped>
+#backup-transaction-logs {
+  margin: 4px 4px 0 0;
+}
+</style>

package/components/common/pages/backups/modals/createBackup/datastores/Datastores.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="datastores h-full">
+    <common-pages-backups-modals-create-backup-datastores-table-view
+      v-model:selected="model.backup_storage"
+      :data-table="props.datastoreTable?.items"
+      :total-items="props.datastoreTable?.total_items || 0"
+      :total-pages="props.datastoreTable?.total_pages || 1"
+      :loading="props.datastoreTableLoading"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+
+const props = defineProps<{
+  datastoreTable: any // ??
+  datastoreTableLoading: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'change', value: string[]): void
+}>()
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const { $store }: any = useNuxtApp()
+
+const selectedKeys = ref<string[]>([])
+
+watch(
+  () => props.datastoreTable,
+  () => {
+    selectedKeys.value = []
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => model.value.backup_storage,
+  (newValue: string) => {
+    const selectedNames: string[] = []
+
+    props.datastoreTable?.items.forEach((item) => {
+      if (newValue === item.id) selectedNames.push(item.name)
+    })
+
+    emits('change', selectedNames)
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+.backups-table-content {
+  height: 100%;
+  padding: 0 10px 10px 10px;
+}
+</style>

package/components/common/pages/backups/modals/createBackup/datastores/tableView/TableView.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="data-table-view overflow-hidden">
+    <div class="data-table-view__inner">
+      <atoms-table-data-grid
+        v-model:selected-row="selectedRows"
+        v-model:column-keys="columnKeys"
+        class="data-table"
+        type="radio"
+        test-id="disks-table"
+        :head-items="headItems"
+        :body-items="bodyItems"
+        :total-items="props.totalItems"
+        :total-pages="props.totalPages"
+        :items-per-page="itemsPerPage"
+        :loading="loading"
+        hide-pagination
+        server-off
+      >
+        <template #icon="{ item }">
+          <span :class="['datagrid-cell-icon', item.data]" />
+          <span class="text-ellipsis">
+            {{ item.text }}
+          </span>
+        </template>
+      </atoms-table-data-grid>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type {
+  UI_I_HeadItem,
+  UI_I_ColumnKey,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { itemsPerPage } from '~/components/atoms/table/dataGrid/lib/config/itemsPerPage'
+import * as table from '~/components/common/pages/backups/modals/createBackup/datastores/tableView/lib/config/table'
+
+const props = defineProps<{
+  dataTable: any // ??
+  loading: boolean
+  totalItems: number
+  totalPages: number
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRows = defineModel<string>('selected')
+
+const columnKeys = ref<UI_I_ColumnKey[]>(table.columnKeys(localization.value))
+
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+
+const bodyItems = computed<UI_I_BodyItem[][]>(() => {
+  let result: UI_I_BodyItem[][] = []
+  if (props.dataTable) {
+    result = table.bodyItems(props.dataTable, localization.value)
+  }
+
+  return result
+})
+watch(
+  bodyItems,
+  () => {
+    setTimeout(() => {
+      selectedRows.value = ''
+    }, 0)
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+.data-table-view {
+  height: inherit;
+  margin-bottom: 10px;
+  margin-right: 10px;
+
+  &__inner {
+    height: inherit;
+  }
+  :deep(.data-table) {
+    height: inherit;
+    .datagrid-outer-wrapper {
+      height: inherit;
+    }
+  }
+}
+.vm-icon {
+  margin-right: 5px;
+}
+</style>