bfg-common 1.5.417 → 1.5.419

package/components/common/pages/backups/modals/restore/disks/tableView/TableView.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="data-table-view">
+    <div class="data-table-view__inner">
+      <atoms-table-data-grid
+        v-model:selected-row="selectedRowsLocal"
+        v-model:column-keys="columnKeys"
+        class="data-table"
+        type="checkbox"
+        test-id="disks-table"
+        :head-items="headItems"
+        :body-items="bodyItems"
+        :total-items="props.totalItems"
+        :total-pages="props.totalPages"
+        :items-per-page="itemsPerPage"
+        hide-pagination
+        server-off
+      />
+    </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 type { UI_I_Pvm } from '~/lib/models/store/vm/interfaces'
+import { itemsPerPage } from '~/components/atoms/table/dataGrid/lib/config/itemsPerPage'
+// import type { I_DiskDevice } from '~/store/modules/backupManager/modules/backups/lib/models/interfaces'
+// import type { I_Pvm } from '~/store/modules/inventory/modules/backup/lib/models/interfaces'
+import * as table from '~/components/common/pages/backups/modals/createBackup/disks/tableView/lib/config/table'
+
+const props = defineProps<{
+  dataTable: I_DiskDevice[]
+  loading: boolean
+  totalItems: number
+  totalPages: number
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRows = defineModel<UI_I_Pvm['disk_devices']>('selected', {
+  required: true,
+})
+// const selectedRowsOld: I_Pvm['disk_devices'] = useDeepCopy(selectedRows.value)
+
+const selectedRowsLocal = ref<string[]>(
+  selectedRows.value?.map((item) => item.source) || []
+)
+watch(
+  selectedRowsLocal,
+  (newValue) => {
+    // TODO понять почему тогда было так
+    // selectedRows.value = selectedRowsOld.filter((item) =>
+    //   newValue.includes(item.source)
+    // )
+    selectedRows.value = props.dataTable.filter((item) =>
+      newValue.includes(item.source)
+    )
+  },
+  { deep: true }
+)
+
+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.length) {
+    result = table.bodyItems(props.dataTable)
+  }
+
+  return result
+})
+</script>
+
+<style lang="scss" scoped>
+.data-table-view {
+  overflow: hidden;
+  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>

package/components/common/pages/backups/modals/restore/disks/tableView/lib/config/keys.ts

@@ -0,0 +1,14 @@
+import type {
+  UI_T_DiskTableKeysTuple
+} from "~/components/common/pages/backups/modals/restore/disks/tableView/lib/models/types";
+
+export const tableKeys: UI_T_DiskTableKeysTuple = [
+  'source',
+  'device_type',
+  'bus',
+  'target',
+  'capacity_mb',
+  'used_mb',
+  'free_mb',
+  'volume_path',
+]

package/components/common/pages/backups/modals/restore/disks/tableView/lib/config/table.ts

@@ -0,0 +1,114 @@
+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 {
+  constructHeadItem,
+  constructColumnKey,
+} from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
+import { tableKeys } from '~/components/common/pages/backups/modals/createBackup/disks/tableView/lib/config/keys'
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  return [
+    [localization.common.source, true, '180px', tableKeys[0]],
+    [localization.common.deviceType, true, '180px', tableKeys[1]],
+    [localization.common.bus, true, '180px', tableKeys[2]],
+    [localization.common.target, true, '180px', tableKeys[3]],
+    [localization.common.capacity, true, '180px', tableKeys[4]],
+    [localization.common.used, true, '180px', tableKeys[5]],
+    [localization.common.free, true, '180px', tableKeys[6]],
+    [localization.common.volumePath, true, '180px', tableKeys[7]],
+  ]
+}
+export const columnKeys = (
+  localization: UI_I_Localization
+): UI_I_ColumnKey[] => {
+  const result: UI_I_ColumnKey[] = []
+  getItems(localization).forEach((item, i) => {
+    result.push(
+      constructColumnKey(`col${i}`, item[0], item[1], `show-column-${item[3]}`)
+    )
+  })
+  return result
+}
+export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
+  const result: UI_I_HeadItem[] = []
+  getItems(localization).forEach((item, i) => {
+    result.push(
+      constructHeadItem(
+        `col${i}`,
+        item[0],
+        item[3],
+        true,
+        item[2],
+        undefined,
+        item[3]
+      )
+    )
+  })
+  return result
+}
+
+export const bodyItems = (data: I_DiskDevice[]): UI_I_BodyItem[][] => {
+  const { $binary }: any = useNuxtApp()
+  const lang = useLocalStorage('lang') === 'ru_RU' ? 'ru' : 'en'
+
+  const bodyItems: UI_I_BodyItem[][] = []
+  data.forEach((disk: I_DiskDevice) => {
+    bodyItems.push([
+      {
+        key: 'col0',
+        text: disk[tableKeys[0]],
+        id: disk.source,
+        data: {
+          location: disk.source,
+          target: disk.target,
+        },
+      },
+      {
+        key: 'col1',
+        text: disk[tableKeys[1]],
+        id: disk.source,
+      },
+      {
+        key: 'col2',
+        text: disk[tableKeys[2]],
+        id: disk.source,
+      },
+      {
+        key: 'col3',
+        text: disk[tableKeys[3]],
+        id: disk.source,
+      },
+      {
+        key: 'col4',
+        text: $binary.round(disk[tableKeys[4]], false, lang),
+        id: disk.source,
+      },
+      {
+        key: 'col5',
+        text: $binary.round(
+          disk[tableKeys[4]] - disk[tableKeys[6]],
+          false,
+          lang
+        ),
+        id: disk.source,
+      },
+      {
+        key: 'col6',
+        text: $binary.round(disk[tableKeys[6]], false, lang),
+        id: disk.source,
+      },
+      {
+        key: 'col7',
+        text: disk[tableKeys[7]],
+        id: disk.source,
+      },
+    ])
+  })
+  return bodyItems
+}

package/components/common/pages/backups/modals/restore/disks/tableView/lib/models/interfaces.ts

@@ -0,0 +1,4 @@
+export interface UI_I_DiskData {
+  location: string
+  target: string
+}

package/components/common/pages/backups/modals/restore/disks/tableView/lib/models/types.ts

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

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

@@ -0,0 +1,92 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_WizardStep } from '~/components/atoms/wizard/lib/models/interfaces'
+import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/lib/models/enums'
+
+export const stepsFunc = (
+  localization: UI_I_Localization
+): UI_I_WizardStep[] => {
+  return [
+    {
+      id: 0,
+      stepName: '',
+      title: localization.common.selectAType,
+      subTitle: '',
+      status: UI_E_WIZARD_STATUS.SELECTED,
+      isValid: true,
+      fields: {},
+      testId: 'backup-restore-type',
+    },
+    {
+      id: 1,
+      stepName: '',
+      title: localization.common.selectName,
+      subTitle: '',
+      status: UI_E_WIZARD_STATUS.INACTIVE,
+      isValid: true,
+      testId: 'backup-restore-select-name',
+      fields: {
+        name: {
+          field: '',
+          alert: '',
+        },
+      },
+    },
+    {
+      id: 2,
+      stepName: '',
+      title: localization.common.selectStorage,
+      subTitle: '',
+      status: UI_E_WIZARD_STATUS.INACTIVE,
+      isValid: true,
+      testId: 'backup-restore-select-storage',
+      fields: {
+        storage: {
+          field: '',
+          alert: '',
+        },
+      },
+    },
+    {
+      id: 3,
+      stepName: '',
+      title: localization.common.selectDisks,
+      subTitle: localization.common.selectDisksInvolvedBackup,
+      status: UI_E_WIZARD_STATUS.INACTIVE,
+      isValid: true,
+      fields: {
+        disk_devices: {
+          field: '',
+          alert: '',
+        },
+      },
+      testId: 'backup-restore-select--disks',
+    },
+    {
+      id: 4,
+      stepName: '',
+      title: localization.common.selectNetwork,
+      subTitle: '',
+      status: UI_E_WIZARD_STATUS.INACTIVE,
+      isValid: true,
+      testId: 'backup-restore-select-network',
+      fields: {},
+    },
+    {
+      id: 5,
+      stepName: '',
+      title: localization.common.readyComplete,
+      subTitle: localization.common.clickFinishRestore,
+      status: UI_E_WIZARD_STATUS.INACTIVE,
+      isValid: true,
+      testId: 'backup-restore-ready-complete',
+      fields: {},
+    },
+  ]
+}
+
+export const stepsSchemeInitial = [
+  // [0, 1, 5], // disk only
+  [0, 5], // disk only
+  [0, 5], // existing
+  [0, 1, 2, 3, 4, 5], // as new
+]

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

@@ -0,0 +1,159 @@
+<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>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+// import type { I_RestoreForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+
+const model = defineModel<I_RestoreForm>({ required: true })
+
+const props = defineProps<{
+  show: boolean
+  nameFormSubmit: null | Function
+}>()
+const emits = defineEmits<{
+  (event: 'check-name', value: [string, (error: any) => void]): void
+}>()
+
+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,
+      (error): void => {
+        const status = error?.statusCode || 200
+        switch (status) {
+          case 405: // Invalid kind
+            showValidationErrors([
+              localization.value.common.kindValidationDescription,
+            ])
+            resolve(false)
+            break
+          case 406: // Invalid name
+            showValidationErrors([
+              localization.value.common.vmNameValidationDescription,
+            ])
+            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('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

@@ -0,0 +1,67 @@
+<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-vm-common-validation-compatibility
+      :loading="!model.pvm.network_devices.length"
+      status="Success"
+      text="compatibilityChecksSucceeded"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+// import type { I_RestoreForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+
+const model = defineModel<I_RestoreForm>({ required: true })
+const props = defineProps<{
+  alertMessages: string[]
+  networks: UI_I_NetworkTableItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'get-networks', value: string): void
+  (event: 'hide-alert', value: number): void
+}>()
+
+const networkTableLoading = ref<boolean>(false)
+const getNetworks = async (): Promise<void> => {
+  networkTableLoading.value = true
+  emits('get-networks', model.value.pvm.host_id)
+  networkTableLoading.value = false
+}
+getNetworks()
+
+const onHideAlert = (): void => {
+  emits('hide-alert', 4)
+}
+</script>
+
+<style lang="scss" scoped>
+.select-network {
+  margin-top: 10px;
+  &__text {
+    font-size: 12px;
+  }
+  &__matcher-details {
+    margin-top: 10px;
+  }
+  .vm-migrate-advanced-view-button {
+    text-align: end;
+  }
+}
+</style>