bfg-common 1.5.538 → 1.5.540

package/components/common/pages/backups/modals/restore/RestoreOld.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="restore">
+    <atoms-wizard
+      show
+      :wizard="props.wizard"
+      :selected-scheme="props.selectedScheme"
+      :title="localization.common.restore"
+      :localization="localization"
+      test-id="restore"
+      @change-steps="onChangeSteps"
+      @hide="onHideModal"
+      @submit="onRestore"
+    >
+      <template #modalBody="{ selectedStep }">
+        <div
+          v-show="props.isLoading"
+          class="loader-wrap absolute left-0 right-0 top-0 bottom-0"
+        >
+          <atoms-loader-pre-loader
+            id="loader"
+            :show="props.isLoading"
+            class="absolute-center"
+            test-id="backup-restore-spinner"
+          />
+        </div>
+        <atoms-alert
+          v-show="props.errors.length"
+          :items="props.errors"
+          status="alert-danger"
+          test-id="restore-alert"
+          @remove="emits('remove-validation-errors')"
+        />
+
+        <common-pages-backups-modals-restore-types
+          v-show="selectedStep.id === dynamicSteps.selectType"
+          v-model="model"
+        />
+
+        <common-pages-backups-modals-restore-name
+          v-show="selectedStep.id === dynamicSteps.selectName"
+          v-model="model"
+          :show="selectedStep.id === dynamicSteps.selectName"
+          @check-name="onCheckName"
+        />
+
+        <!--        TODO refactoring-->
+        <common-vm-actions-common-select-storage
+          v-show="selectedStep.id === dynamicSteps.selectStorage"
+          :storage-submit="props.storageSubmit"
+          :datastore="props.datastore"
+          :is-datastore-loading="props.datastoreLoading"
+          :storage="model.pvm.storage"
+          :get-datastore-table-func="getDatastoreTableFunc"
+          @submit="onChangeStorage"
+        />
+
+        <common-pages-backups-modals-restore-disks
+          v-show="selectedStep.id === dynamicSteps.selectDisks"
+          v-model="model"
+        />
+        <common-pages-backups-modals-restore-networks
+          v-if="selectedStep.id === dynamicSteps.selectNetwork"
+          v-model="model"
+          :alert-messages="[]"
+          :networks="props.networks"
+          @get-networks="onGetNetworks"
+        />
+
+        <common-ready-to-complete
+          v-show="selectedStep.id === dynamicSteps.readyComplete"
+          :data="props.readyCompleteData"
+        />
+      </template>
+    </atoms-wizard>
+  </div>
+
+  <common-modals-confirmation
+    v-if="isShowConfirm"
+    :headline="localization.common.attention"
+    :description="localization.common.restoreBackupConfirmDescription"
+    @hide-modal="isShowConfirm = false"
+    @confirm="onFinish"
+  />
+</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_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+import type { UI_I_NameCheck } from '~/components/common/pages/backups/modals/restore/name/lib/models/interfaces'
+import type { UI_I_RestoreForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import { dynamicSteps } from '~/components/common/pages/backups/modals/restore/lib/config/steps'
+import { restoreCodes } from '~/components/common/pages/backups/modals/restore/lib/config/restoreCodes'
+
+const model = defineModel<UI_I_RestoreForm>({ required: true })
+
+const props = defineProps<{
+  wizard: Wizard
+  selectedScheme: number[]
+  readyCompleteData: UI_I_TableInfoItem[]
+  nameFormSubmit: null | Function
+  storageSubmit: null | Function
+  isLoading: boolean
+  errors: string[]
+  datastore: UI_I_DatastoreTableItem[]
+  datastoreLoading: boolean
+  networks: UI_I_NetworkTableItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'remove-validation-errors'): void
+  (event: 'change-storage', value: UI_I_DatastoreTableItem | null): void
+  (event: 'get-datastore', value: string): void
+  (event: 'get-networks', value: string): void
+  (event: 'check-name', value: UI_I_NameCheck): void
+  (event: 'change-steps', value: UI_I_WizardStep[]): void
+  (event: 'finish'): void
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
+  emits('change-steps', value)
+}
+
+const getDatastoreTableFunc = async (): Promise<void> => {
+  emits('get-datastore', model.value.bucket)
+}
+
+const onChangeStorage = (storage: UI_I_DatastoreTableItem | null): void => {
+  emits('change-storage', storage)
+}
+
+const onCheckName = async (data: UI_I_NameCheck): Promise<void> => {
+  emits('check-name', data)
+}
+
+const onFinish = (): void => {
+  emits('finish')
+}
+const onHideModal = (): void => {
+  emits('hide')
+}
+
+const onRestore = (): void => {
+  if (model.value.restore_code === restoreCodes.existing) {
+    isShowConfirm.value = true
+  } else {
+    onFinish()
+  }
+}
+
+const isShowConfirm = ref<boolean>(false)
+
+const onGetNetworks = (hostId: string): void => {
+  emits('get-networks', hostId)
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.modal-body) {
+  display: flex;
+  flex-direction: column;
+}
+
+.loader-wrap {
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: var(--z-fixed);
+}
+</style>

package/components/common/pages/backups/modals/restore/disks/Disks.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="disks h-full">
-    <common-pages-backups-modals-restore-disks-table-view
-      v-model:selected="model.pvm.disk_devices"
-      :data-table="disks"
-      :total-items="disks.length"
-      :total-pages="1"
-    />
-  </div>
+  <common-pages-backups-modals-restore-disks-new
+    v-if="isNewView"
+    v-model="model"
+    :disks="disks"
+  />
+  <common-pages-backups-modals-restore-disks-old
+    v-else
+    v-model="model"
+    :disks="disks"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -14,7 +16,9 @@ import type { UI_I_RestoreForm } from '~/components/common/pages/backups/modals/
 
 const model = defineModel<UI_I_RestoreForm>({ required: true })
 
-const { $store } = useNuxtApp()
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const disks = computed<UI_I_RestoreForm['pvm']['disk_devices']>(
   () =>
@@ -22,6 +26,7 @@ const disks = computed<UI_I_RestoreForm['pvm']['disk_devices']>(
       (disk: UI_I_RestoreForm['pvm']['disk_devices'][0]) => disk.source
     ) || []
 )
+
 </script>
 
 <style lang="scss" scoped></style>

package/components/common/pages/backups/modals/restore/disks/DisksNew.vue

@@ -0,0 +1,17 @@
+<template>
+  <common-pages-backups-modals-restore-disks-table-view-new-table
+    v-model="model.pvm.disk_devices"
+    :disks="props.disks"
+  />
+</template>
+
+<script lang="ts" setup>
+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<{
+  disks: UI_I_RestoreForm['pvm']['disk_devices']
+}>()
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/pages/backups/modals/restore/disks/DisksOld.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="disks h-full">
+    <common-pages-backups-modals-restore-disks-table-view-old-table
+      v-model:selected="model.pvm.disk_devices"
+      :data-table="props.disks"
+      :total-items="props.disks.length"
+      :total-pages="1"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+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<{
+  disks: UI_I_RestoreForm['pvm']['disk_devices']
+}>()
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,126 @@
+<template>
+  <div class="disks-table">
+    <ui-data-table
+      :data="data"
+      :options="options"
+      :total-pages="1"
+      :total-items="props.disks?.length || 0"
+      :texts="texts"
+      :default-layout="false"
+      :skeleton="skeletonData"
+      size="sm"
+      test-id="vm-backup-disks-table"
+      @select-row="onSelectRow"
+    >
+      <template #icon="{ item }">
+        <span :class="['icon', item.data.iconClassName]"></span>
+        <span :title="item.text" class="text-ellipsis ml-1 disks-table-text">
+          {{ item.text }}
+        </span>
+      </template>
+    </ui-data-table>
+  </div>
+</template>
+<script setup lang="ts">
+import type { UI_I_TableTexts } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableBody,
+  UI_I_DataTableHeader,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_DataTableSkeleton } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Pvm } from '~/lib/models/store/vm/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CreateBackupFormDiskDevice } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import {
+  getBodyDataFunc,
+  getHeaderDataFunc,
+  options,
+} from '~/components/common/pages/backups/modals/restore/disks/tableView/new/lib/config/table'
+
+const model = defineModel<UI_I_CreateBackupFormDiskDevice[]>({ required: true })
+
+const props = defineProps<{
+  disks: UI_I_Pvm['disk_devices']
+}>()
+
+const { $text, $store }: any = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const texts = computed<UI_I_TableTexts>(() => ({
+  searchHere: localization.value.common.searchHere,
+  rowsPerPage: localization.value.common.rowsPerPage,
+  of: localization.value.common.of,
+  selected: localization.value.common.selected,
+  columns: localization.value.common.columns,
+  previous: localization.value.common.previous,
+  next: localization.value.common.next,
+  noItemsFound: localization.value.common.noItemsFound,
+  exportAll: localization.value.common.exportAll,
+  exportSelected: localization.value.common.exportSelected,
+  all: localization.value.common.all,
+  filter: localization.value.common.filter,
+}))
+const skeletonData = ref<UI_I_DataTableSkeleton>({
+  columnsCount: 5,
+  headColumns: [],
+  bodyColumns: [],
+  withoutPagination: true,
+})
+
+const data = computed<UI_I_DataTable>(() => ({
+  id: 'vm-backup-restore-disks-table',
+  header: headItems.value,
+  body: bodyItems.value,
+}))
+
+const lang = computed(() => $store.getters['main/getInterfaceLang'])
+
+const headItems = computed<UI_I_DataTableHeader[]>(() =>
+  getHeaderDataFunc(localization.value).map((item) => ({
+    ...item,
+    text:
+      lang.value === 'en_US'
+        ? $text.toCapitalizeEveryWord(item.text)
+        : item.text,
+  }))
+)
+
+const bodyItems = ref<UI_I_DataTableBody[]>([])
+watch(
+  () => props.disks,
+  (newValue) => {
+    if (!newValue?.length) {
+      bodyItems.value = []
+      return
+    }
+
+    bodyItems.value = getBodyDataFunc(newValue, model.value)
+  },
+  { deep: true, immediate: true }
+)
+
+const onSelectRow = (value: UI_I_DataTableBody[]): void => {
+  model.value = value.map((item) => item.data[0]?.data?.data)
+}
+</script>
+<style scoped lang="scss">
+.disks-table {
+  :deep(.title-container-top-info h6.title-container-top-selected-rows) {
+    font-size: 12px;
+  }
+
+  :deep(.ui-main-no-items-found span) {
+    font-size: 14px;
+  }
+
+  :deep(.title-container) {
+    text-transform: lowercase;
+  }
+
+  &-text {
+    font-size: 12px;
+  }
+}
+</style>

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

@@ -0,0 +1,175 @@
+import type {
+  UI_I_DataTableBody,
+  UI_I_DataTableOptions,
+  UI_I_DataTableHeader,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Pvm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_I_CreateBackupFormDiskDevice } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+
+export const getHeaderDataFunc = (
+  localization: UI_I_Localization
+): UI_I_DataTableHeader[] => [
+  {
+    col: 'col0',
+    colName: 'source',
+    text: localization.common.source,
+    isSortable: true,
+    sort: 'asc',
+    width: '368px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col1',
+    colName: 'deviceType',
+    text: localization.common.deviceType,
+    isSortable: true,
+    sort: 'asc',
+    width: '136px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col2',
+    colName: 'bus',
+    text: localization.common.bus,
+    isSortable: true,
+    sort: 'asc',
+    width: '112px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col3',
+    colName: 'target',
+    text: localization.common.target,
+    isSortable: true,
+    sort: 'asc',
+    width: '112px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col4',
+    colName: 'capacity',
+    text: localization.common.capacity,
+    isSortable: true,
+    sort: 'asc',
+    width: '112px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col5',
+    colName: 'used',
+    text: localization.common.used,
+    isSortable: true,
+    sort: 'asc',
+    width: '112px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col6',
+    colName: 'free',
+    text: localization.common.free,
+    isSortable: true,
+    sort: 'asc',
+    width: '112px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col7',
+    colName: 'volumePath',
+    text: localization.common.volumePath,
+    isSortable: true,
+    sort: 'asc',
+    width: '240px',
+    show: true,
+    filter: true,
+  },
+]
+
+export const options: UI_I_DataTableOptions = {
+  perPageOptions: [{ text: '10', value: 100, default: true }],
+  isSelectable: true,
+  isFocusable: false,
+  showPagination: false,
+  showPaginationOnTop: false,
+  selectType: 'checkbox',
+  showPageInfo: false,
+  isSortable: true,
+  server: false,
+  isResizable: true,
+  showSearch: false,
+  showSelectedRowsWithAll: true,
+  showColumnManager: true,
+  withActions: false,
+  inBlock: false,
+  inModal: true,
+  showExport: false,
+  withCollapse: false,
+}
+
+export const getBodyDataFunc = (
+  bodyData: UI_I_Pvm['disk_devices'],
+  selectedDisks: UI_I_CreateBackupFormDiskDevice[]
+): UI_I_DataTableBody[] => {
+  const { $binary } = useNuxtApp()
+  const lang = useLocalStorage('lang') === 'ru_RU' ? 'ru' : 'en'
+
+  return bodyData.map((disk, index: number) => {
+    return {
+      row: index,
+      collapse: false,
+      isHiddenCollapse: false,
+      collapseToggle: false,
+      isSelected: !!selectedDisks.find((item) => item.location === disk.source),
+      data: [
+        {
+          key: 'icon',
+          col: 'col0',
+          text: disk.source,
+          data: {
+            iconClassName: 'icon-vSphere-dsVmDisk',
+            data: {
+              source: disk.source,
+              location: disk.source,
+              target: disk.target,
+            },
+          },
+        },
+        {
+          col: 'col1',
+          text: disk.device_type,
+        },
+        {
+          col: 'col2',
+          text: disk.bus,
+        },
+        {
+          col: 'col3',
+          text: disk.target,
+        },
+        {
+          col: 'col4',
+          text: $binary.round(disk.capacity_mb, false, lang),
+        },
+        {
+          col: 'col5',
+          text: $binary.round(disk.used_mb, false, lang),
+        },
+        {
+          col: 'col7',
+          text: $binary.round(disk.free_mb, false, lang),
+        },
+        {
+          col: 'col6',
+          text: disk.volume_path || '--',
+        },
+      ],
+    }
+  })
+}

package/components/common/pages/backups/modals/restore/disks/tableView/{TableView.vue → old/Table.vue}

@@ -6,8 +6,8 @@
         v-model:column-keys="columnKeys"
         :head-items="headItems"
         :body-items="bodyItems"
-        :total-items="props.totalItems"
-        :total-pages="props.totalPages"
+        :total-items="props.totalItems || 0"
+        :total-pages="props.totalPages || 1"
         :items-per-page="itemsPerPage"
         :page-size="pagination.pageSize"
         :page="pagination.page"
@@ -31,7 +31,7 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_RestoreForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
 import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
 import { itemsPerPage } from '~/components/atoms/table/dataGrid/lib/config/itemsPerPage'
-import * as table from '~/components/common/pages/backups/modals/restore/disks/tableView/lib/config/table'
+import * as table from '~/components/common/pages/backups/modals/restore/disks/tableView/old/lib/config/table'
 
 const props = defineProps<{
   dataTable: UI_I_RestoreForm['pvm']['disk_devices']
@@ -96,13 +96,16 @@ const bodyItems = computed<UI_I_BodyItem[][]>(() => {
   &__inner {
     height: inherit;
   }
+
   :deep(.data-table) {
     height: inherit;
+
     .datagrid-outer-wrapper {
       height: inherit;
     }
   }
 }
+
 .vm-icon {
   margin-right: 5px;
 }

package/components/common/pages/backups/modals/restore/disks/tableView/{lib → old/lib}/config/keys.ts

@@ -1,6 +1,6 @@
 import type {
   UI_T_DiskTableKeysTuple
-} from "~/components/common/pages/backups/modals/restore/disks/tableView/lib/models/types";
+} from "~/components/common/pages/backups/modals/restore/disks/tableView/old/lib/models/types";
 
 export const tableKeys: UI_T_DiskTableKeysTuple = [
   'source',

package/components/common/pages/backups/modals/restore/disks/tableView/{lib → old/lib}/config/table.ts

@@ -9,7 +9,7 @@ import {
   constructHeadItem,
   constructColumnKey,
 } from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
-import { tableKeys } from '~/components/common/pages/backups/modals/restore/disks/tableView/lib/config/keys'
+import { tableKeys } from '~/components/common/pages/backups/modals/restore/disks/tableView/old/lib/config/keys'
 
 const getItems = (
   localization: UI_I_Localization

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

@@ -6,5 +6,5 @@ export type UI_T_DiskTableKeysTuple = [
   'capacity_mb',
   'used_mb',
   'free_mb',
-  'volume_path',
+  'volume_path'
 ]

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

@@ -0,0 +1,62 @@
+import type {UI_I_RestoreForm} from "~/components/common/pages/backups/modals/lib/models/interfaces";
+import type {UI_I_Localization} from "~/lib/models/interfaces";
+import type {UI_I_TableInfoItem} from "~/components/atoms/table/info/lib/models/interfaces";
+import { restoreCodes } from '~/components/common/pages/backups/modals/restore/lib/config/restoreCodes'
+
+
+export const readyToCompleteOptions = (model: UI_I_RestoreForm, localization: UI_I_Localization, selectedStorageName: string): UI_I_TableInfoItem[] => {
+  const result = []
+
+  switch (model.restore_code) {
+    case restoreCodes.diskOnly:
+    case restoreCodes.existing:
+      result.push({
+        label: localization.common.backup,
+        value: model.backup,
+        iconClassName: 'icon-backup'
+      })
+      break
+    case restoreCodes.asNew:
+      result.push({
+        label: localization.common.vmName,
+        value: model.pvm.name,
+        iconClassName: 'vsphere-icon-vm'
+      })
+
+      // Datastores
+      result.push({
+        label: localization.common.datastore,
+        value: selectedStorageName,
+        iconClassName: 'vsphere-icon-datastore'
+      })
+
+      // Disks
+      model.pvm.disk_devices.forEach((disk_device, i) => {
+        if (!disk_device.source) return
+
+        result.push({
+          label: `${localization.common.disk} ${i}`,
+          value: disk_device.source,
+          iconClassName: 'icon-vSphere-dsVmDisk'
+        })
+      })
+
+      // Networks
+      model.pvm.network_devices.forEach((network) => {
+        result.push({
+          label: localization.common.network,
+          value: network.network,
+          iconClassName: 'vsphere-icon-network'
+        })
+      })
+      break
+    // case 1:
+    //   result.push({
+    //     label: localization.value.common.vmName,
+    //     value: model.value.pvm.name,
+    //   })
+    //   break
+  }
+
+  return result
+}