bfg-common 1.4.114 → 1.4.115

package/components/common/wizards/vmNew/migrate/select/storage/Storage.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="select-storage">
+    <atoms-alert
+      v-show="props.alertMessages?.length"
+      test-id="select-storage-alert"
+      status="alert-danger"
+      :items="props.alertMessages"
+      @remove="onHideAlert"
+    />
+
+    <common-wizards-vm-migrate-select-storage-selected-per-disk
+      v-if="isShowSelectedPerDisks"
+      v-model="isShowSelectedPerDisks"
+      v-model:active-tab="model.configure.type"
+      v-model:connected-storage-id-local="connectedStorageIdLocal"
+      :data="selectedPerDisks"
+    />
+
+    <atoms-tabs
+      v-else
+      v-model="model.configure.type"
+      test-id="migrate-select-storage-tabs"
+      :items="selectStorageTabs"
+      size="small"
+      class="select-storage__tabs"
+      @change="onChangeMigrateMode"
+    />
+
+    <common-wizards-vm-new-migrate-select-storage-configure-batch
+      v-show="model.configure.type === 'batch-configure'"
+      v-model="model"
+      :get-datastore-table-func="props.getDatastoreTableFunc"
+      :datastore="props.datastore"
+      :connected-storage-id="connectedStorageId"
+      :is-hide-select-disk-format="isHideSelectDiskFormat"
+    >
+      <template v-if="isShowSelectedPerDisks" #buttonConfirm>
+        <button
+          class="btn btn-sm btn-primary"
+          data-id="apply-selected-per-disks-button"
+          @click="onApplyChanges"
+        >
+          {{ localization.common.confirm }}
+        </button>
+      </template>
+    </common-wizards-vm-new-migrate-select-storage-configure-batch>
+
+    <common-wizards-vm-new-migrate-select-storage-configure-disk
+      v-show="model.configure.type === 'configure-disk'"
+      v-model="isShowSelectedPerDisks"
+      v-model:selected-per-disk-keys="selectedPerDiskKeys"
+      v-model:active-tab="model.configure.type"
+      :configure-per-disks="model.configure.disks"
+      @update-selected-per-disks="onChangePerDiskStorage"
+    />
+
+    <common-wizards-vm-common-validation-compatibility
+      :loading="!model.storage"
+      :status="'Success'"
+      text="compatibilityChecksSucceeded"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_StorageConfigurePerDiskItem } from '~/components/common/wizards/vm/migrate/select/storage/table/disk/lib/models/interfaces'
+import type { UI_I_SelectStorageReadyData } from '~/components/common/wizards/vm/migrate/select/storage/lib/models/interfaces'
+import type { UI_I_MigrateFormLocal } from '~/components/common/wizards/vmNew/migrate/lib/models/interfaces'
+import { vmMigrateSelectStorageTabsFunc } from '~/components/common/wizards/vm/migrate/select/storage/lib/config/tabsPannel'
+
+const props = defineProps<{
+  alertMessages: string[]
+  submit: number
+  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  datastore: UI_I_DatastoreTableItem[]
+  connectedStorageIdDefault: string | null
+  configurePerDisks: UI_I_StorageConfigurePerDiskItem[]
+}>()
+const model = defineModel<UI_I_MigrateFormLocal>({ required: true })
+const emits = defineEmits<{
+  (event: 'hide-alert', value: number): void
+  (event: 'next-step', value: UI_I_SelectStorageReadyData): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectStorageTabs = computed<UI_I_CollapseNavItem[]>(() =>
+  vmMigrateSelectStorageTabsFunc(localization.value)
+)
+
+const isShowSelectedPerDisks = ref<boolean>(false)
+
+const selectedPerDiskKeys = ref<number[]>([])
+const selectedPerDisks = ref<UI_I_StorageConfigurePerDiskItem[]>([])
+
+const connectedStorageIdLocal = ref<string>('')
+const connectedStorageId = computed<string | null>(
+  () => connectedStorageIdLocal.value || props.connectedStorageIdDefault
+)
+
+const onChangeMigrateMode = (event: string): void => {
+  if (event === 'batch-configure') {
+    connectedStorageIdLocal.value = ''
+  }
+}
+const onChangePerDiskStorage = (
+  event: UI_I_StorageConfigurePerDiskItem[]
+): void => {
+  connectedStorageIdLocal.value = event[0].extra.datastore_id
+  model.value.disk_format = event[0].disk_format
+
+  selectedPerDisks.value = event
+}
+
+const onApplyChanges = (): void => {
+  /* TODO сделать рефакторинг потом */
+  model.value.configure.disks.forEach((disk) => {
+    const selectedDisk = selectedPerDisks.value.find(
+      (selected) =>
+        selected.virtual_machine === disk.virtual_machine &&
+        selected.file === disk.file &&
+        selected.extra.datastore_id === disk.extra.datastore_id
+    )!
+
+    if (selectedDisk) {
+      const { storage, disk_format } = model.value
+
+      // ;({ name: disk.storage, id: disk.extra.datastore_id } = storage)
+      disk.storage = storage.name
+      disk.extra.datastore_id = storage.id
+      disk.disk_format = disk_format
+    }
+  })
+
+  isShowSelectedPerDisks.value = false
+  model.value.configure.type = 'configure-disk'
+  selectedPerDisks.value = []
+  selectedPerDiskKeys.value = []
+}
+
+const isHideSelectDiskFormat = computed<boolean>(() => {
+  return (
+    isShowSelectedPerDisks &&
+    selectedPerDisks.value.length === 1 &&
+    selectedPerDisks.value[0].file === 'Configuration file'
+  )
+})
+
+const checkValidityBlock = (): boolean => {
+  if (!model.value.storage) {
+    return false
+  }
+
+  const isActivePerDiskTab = model.value.configure.type === 'configure-disk'
+  emits('next-step', {
+    ...model.value,
+    tab: model.value.configure.type,
+    // ...(isActivePerDiskTab && { configureDisks: props.configurePerDisks }),
+    configureDisks: isActivePerDiskTab
+      ? model.value.configure.disks
+      : props.configurePerDisks,
+  })
+  return true
+}
+
+watch(
+  () => props.configurePerDisks,
+  (newValue: UI_I_StorageConfigurePerDiskItem) => {
+    model.value.configure.disks = newValue
+  },
+  { immediate: true }
+)
+watch(
+  () => props.submit,
+  () => {
+    checkValidityBlock()
+  }
+)
+
+const onHideAlert = (): void => {
+  emits('hide-alert', 3)
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.select-storage {
+  @include flex($dir: column);
+  height: inherit;
+  &__tabs {
+    width: 100%;
+    :deep(.nav) {
+      margin-top: 0;
+    }
+  }
+}
+</style>

package/components/common/wizards/vmNew/migrate/select/storage/configure/batch/Batch.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="configure-batch-mode">
+    <common-select-input
+      v-if="!isHideSelectDiskFormat"
+      v-model="model.disk_format"
+      :data="virtualDiskFormatOptions"
+      :label="localization.common.selectVirtualDiskFormat"
+      class="configure-batch-mode__disk-format"
+    />
+
+    <common-wizards-vm-new-migrate-select-storage-configure-batch-table
+      v-model="model.storage"
+      :get-datastore-table-func="props.getDatastoreTableFunc"
+      :datastore="props.datastore"
+      :connected-storage-id="props.connectedStorageId"
+    />
+
+    <div
+      v-if="$slots.buttonConfirm"
+      class="clr-justify-content-end configure-batch-mode__button"
+    >
+      <slot name="buttonConfirm"></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_MigrateFormLocal } from '~/components/common/wizards/vmNew/migrate/lib/models/interfaces'
+import { virtualDiskFormatOptionsFunc } from '~/components/common/wizards/vmNew/migrate/select/storage/configure/batch/config/virtualDiskFormat'
+
+const props = defineProps<{
+  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  datastore: UI_I_DatastoreTableItem[]
+  connectedStorageId: string | null
+  isHideSelectDiskFormat: boolean
+}>()
+const model = defineModel<UI_I_MigrateFormLocal>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const virtualDiskFormatOptions = computed<UI_I_OptionItem[]>(() =>
+  virtualDiskFormatOptionsFunc()
+)
+</script>
+
+<style lang="scss" scoped>
+.configure-batch-mode {
+  &__disk-format {
+  }
+  &__button {
+    display: flex;
+  }
+}
+</style>

package/components/common/wizards/vmNew/migrate/select/storage/configure/batch/config/virtualDiskFormat.ts

@@ -0,0 +1,30 @@
+import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
+
+export const virtualDiskFormatOptionsFunc = (): UI_I_SelectInputItem[] => {
+  return [
+    {
+      label: 'Same Format as source',
+      value: 0,
+      testId: 'migrate-disk-format-same-as-source',
+      // value: 'same-format-source',
+    },
+    {
+      label: 'Thick Provision Lazy Zeroed',
+      value: 2,
+      testId: 'migrate-disk-format-thick-provision-lazy-zeroed',
+      // value: 'thick-provision-lazy-zeroed',
+    },
+    {
+      label: 'Thick Provision Eager Zeroed',
+      value: 3,
+      testId: 'migrate-disk-format-thick-provision-eager-zeroed',
+      // value: 'thick-provision-eager-zeroed',
+    },
+    {
+      label: 'Thin Provision',
+      value: 1,
+      testId: 'migrate-disk-format-thin-provision',
+      // value: 'thin-provision',
+    },
+  ]
+}

package/components/common/wizards/vmNew/migrate/select/storage/configure/batch/table/Table.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="table-wrap">
+    <atoms-table-data-grid
+      v-model:selected-row="selectedStorageKeyLocal"
+      v-model:column-keys="columnKeys"
+      v-model:page-size="pagination.pageSize"
+      v-model:page="pagination.page"
+      type="radio"
+      test-id="datastore-table"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="bodyItems.length"
+      :total-pages="1"
+      server-off
+      hide-page-size
+      @sorting="sorting"
+      @change="selectStorageFromTable"
+    >
+      <template #icon="{ item }">
+        <span :class="['datagrid-cell-icon', item.data]" />
+        <span class="text-ellipsis">
+          {{ item.text }}
+        </span>
+      </template>
+    </atoms-table-data-grid>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type {
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type {
+  UI_I_TablePayload,
+  UI_I_Pagination,
+} from '~/lib/models/table/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import * as table from '~/components/common/wizards/vm/migrate/select/storage/table/datastore/lib/config/config'
+
+const props = defineProps<{
+  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  datastore: UI_I_DatastoreTableItem[]
+  connectedStorageId: string | null
+}>()
+const modelStorageLocal = defineModel<UI_I_DatastoreTableItem>({
+  required: true,
+})
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedStorageKeyLocal = ref<number | null>(null)
+const sort = ref<string | null>(null)
+const pagination = ref<UI_I_Pagination>({
+  page: 1,
+  pageSize: 100,
+})
+
+const headItems = ref<UI_I_HeadItem[]>(table.headItems(localization.value))
+const columnKeys = ref<UI_I_ColumnKey[]>(table.columnKeys(localization.value))
+watch(localization, () => {
+  columnKeys.value = table.columnKeys(localization.value)
+})
+
+const bodyItems = computed<UI_I_BodyItem[][]>(() => {
+  return table.bodyItems(props.datastore || [], localization.value)
+})
+const sorting = (data: [string, boolean]): void => {
+  const [column, status] = data
+  const direction = status ? 'asc' : 'desc'
+  sort.value = `${column}.${direction}`
+
+  InitStorageData()
+}
+
+const InitStorageData = async (): Promise<void> => {
+  const payload: UI_I_TablePayload = {
+    pagination: pagination.value,
+    sortBy: sort.value,
+    type: 'datastore',
+    schema: 'full',
+  }
+
+  props.getDatastoreTableFunc(payload).then(() => {
+    // selectedStorageKeyLocal.value = null
+    // defineDefaultSelectedStorage()
+  })
+}
+InitStorageData()
+
+const selectStorageFromTable = (index: number): void => {
+  if (!props.datastore) return
+
+  modelStorageLocal.value = props.datastore[index]
+  selectedStorageKeyLocal.value = index
+}
+
+const defineDefaultSelectedStorage = (): void => {
+  props.datastore.forEach(
+    (datastore: UI_I_DatastoreTableItem, index: number) => {
+      if (datastore.id === props.connectedStorageId)
+        selectStorageFromTable(index)
+    }
+  )
+}
+
+watch(
+  () => props.connectedStorageId,
+  (newValue: string) => {
+    if (!props.datastore.length || !newValue) return
+    defineDefaultSelectedStorage()
+  }
+)
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/wizards/vmNew/migrate/select/storage/configure/batch/table/lib/config/datastoreTable.ts

@@ -0,0 +1,177 @@
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type {
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import * as defaultSettings from '~/components/atoms/table/dataGrid/lib/config/settingsTable'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_DatastoreTableItemsTuple } from '~/components/common/wizards/vmNew/migrate/select/storage/configure/batch/table/lib/models/types'
+import {
+  datastoreIconByState,
+  datastoreLocalizationByState,
+} from '~/components/common/lib/config/states'
+
+export const datastoreTableKeys: UI_T_DatastoreTableItemsTuple = [
+  'name',
+  'state',
+  'capacity_mb',
+  'provisioned_mb',
+  'free_mb',
+  'used_mb',
+  'type_text',
+  'thin_provisioning',
+  'access_mode',
+  'hardware_acceleration',
+  'drive_type',
+  'device',
+  'storage_io_control',
+]
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  return [
+    [localization.common.name, true, '96px', datastoreTableKeys[0]],
+    [localization.inventorySummary.state, true, '138px', datastoreTableKeys[1]],
+    [localization.common.capacity, true, '110px', datastoreTableKeys[2]],
+    [localization.common.provisioned, true, '128px', datastoreTableKeys[3]],
+    [localization.common.free, true, '110px', datastoreTableKeys[4]],
+    [localization.common.used, true, '110px', datastoreTableKeys[5]],
+    [localization.common.type, true, '110px', datastoreTableKeys[6]],
+    [
+      localization.common.thinProvisioning,
+      true,
+      '132px',
+      datastoreTableKeys[7],
+    ],
+    [localization.common.access, true, '110px', datastoreTableKeys[8]],
+    [
+      localization.common.hardwareAcceleration,
+      true,
+      '134px',
+      datastoreTableKeys[9],
+    ],
+    [localization.common.driverType, true, '110px', datastoreTableKeys[10]],
+    [localization.common.device, true, '110px', datastoreTableKeys[11]],
+    [
+      localization.common.storageIoControl,
+      true,
+      '110px',
+      datastoreTableKeys[12],
+    ],
+  ]
+}
+
+export const columnKeys = (
+  localization: UI_I_Localization
+): UI_I_ColumnKey[] => {
+  return defaultSettings.defaultColumnKeys(getItems(localization), {
+    icon: [0],
+  })
+}
+
+export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
+  return defaultSettings.defaultHeadItems(getItems(localization), {
+    icon: [0],
+  })
+}
+
+export const bodyItems = (
+  data: UI_I_DatastoreTableItem[],
+  localization: UI_I_Localization
+): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+  const { $binary }: any = useNuxtApp()
+
+  data.forEach((storage: UI_I_DatastoreTableItem, key: number) => {
+    const state =
+      localization.common[
+        datastoreLocalizationByState[storage[datastoreTableKeys[1]]]
+      ]
+    bodyItems.push([
+      {
+        key: 'icon',
+        text: storage[datastoreTableKeys[0]],
+        data: `vsphere-icon-${datastoreIconByState[storage.state]}`,
+        id: key,
+        testId: storage[datastoreTableKeys[0]],
+      },
+      {
+        key: 'col1',
+        text: state,
+        id: key,
+        testId: storage[datastoreTableKeys[0]],
+      },
+      {
+        key: 'col2',
+        text: $binary.round(storage.capacity[datastoreTableKeys[2]]),
+        id: key,
+        testId: storage[datastoreTableKeys[0]],
+      },
+      {
+        key: 'col3',
+        text: $binary.round(storage.capacity[datastoreTableKeys[3]]),
+        id: key,
+        testId: storage[datastoreTableKeys[0]],
+      },
+      {
+        key: 'col4',
+        text: $binary.round(storage.capacity[datastoreTableKeys[4]]),
+        id: key,
+        testId: storage[datastoreTableKeys[0]],
+      },
+      {
+        key: 'col5',
+        text: $binary.round(storage.capacity[datastoreTableKeys[5]]),
+        id: key,
+        testId: storage[datastoreTableKeys[0]],
+      },
+      {
+        key: 'col6',
+        text: storage[datastoreTableKeys[6]],
+        id: key,
+        testId: storage[datastoreTableKeys[0]],
+      },
+      {
+        key: 'col7',
+        text: storage[datastoreTableKeys[7]]
+          ? localization.common.yes
+          : localization.common.no,
+        id: key,
+        testId: storage[datastoreTableKeys[0]],
+      },
+      {
+        key: 'col8',
+        text: storage[datastoreTableKeys[8]],
+        id: key,
+        testId: storage[datastoreTableKeys[0]],
+      },
+      {
+        key: 'col9',
+        text: storage[datastoreTableKeys[9]],
+        id: key,
+        testId: storage[datastoreTableKeys[0]],
+      },
+      {
+        key: 'col10',
+        text: storage[datastoreTableKeys[10]],
+        id: key,
+        testId: storage[datastoreTableKeys[0]],
+      },
+      {
+        key: 'col11',
+        text: storage[datastoreTableKeys[11]],
+        id: key,
+        testId: storage[datastoreTableKeys[0]],
+      },
+      {
+        key: 'col12',
+        text: storage[datastoreTableKeys[12]],
+        id: key,
+        testId: storage[datastoreTableKeys[0]],
+      },
+    ])
+  })
+  return bodyItems
+}

package/components/common/wizards/vmNew/migrate/select/storage/configure/batch/table/lib/models/types.ts

@@ -0,0 +1,15 @@
+export type UI_T_DatastoreTableItemsTuple = [
+  'name',
+  'state',
+  'capacity_mb',
+  'provisioned_mb',
+  'free_mb',
+  'used_mb',
+  'type_text',
+  'thin_provisioning',
+  'access_mode',
+  'hardware_acceleration',
+  'drive_type',
+  'device',
+  'storage_io_control'
+]

package/components/common/wizards/vmNew/migrate/select/storage/configure/disk/Disk.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="migrate-configure-disk">
+    <div class="btn-group">
+      <button
+        id="vm-migrate-configure"
+        data-id="vm-migrate-configure-button"
+        class="btn btn-link btn-sm"
+        :disabled="!selectedDisksFromTable.length"
+        @click="onConfigure"
+      >
+        {{ localization.inventoryTabs.configure }}
+      </button>
+    </div>
+
+    <common-wizards-vm-new-migrate-select-storage-configure-disk-table
+      v-model="selectedPerDiskKeysLocal"
+      :configure-per-disks="props.configurePerDisks"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_StorageConfigurePerDiskItem } from '~/components/common/wizards/vm/migrate/select/storage/table/disk/lib/models/interfaces'
+import type { UI_T_VmMigrateSelectStorageTab } from '~/components/common/wizards/vm/migrate/select/storage/lib/models/types'
+
+const props = defineProps<{
+  configurePerDisks: UI_I_StorageConfigurePerDiskItem[]
+}>()
+const modelShowSelectedPerDisk = defineModel<boolean>({ required: true })
+const modelActiveTab = defineModel<UI_T_VmMigrateSelectStorageTab>('activeTab')
+const selectedPerDiskKeysLocal = defineModel<number[]>('selectedPerDiskKeys', {
+  required: true,
+})
+const emits = defineEmits<{
+  (
+    event: 'update-selected-per-disks',
+    value: UI_I_StorageConfigurePerDiskItem[]
+  ): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedDisksFromTable = computed<UI_I_StorageConfigurePerDiskItem[]>(
+  () => {
+    if (!props.configurePerDisks) return []
+
+    return props.configurePerDisks.filter((_: never, key: number) =>
+      selectedPerDiskKeysLocal.value.includes(key)
+    )
+  }
+)
+
+const onConfigure = (): void => {
+  emits('update-selected-per-disks', selectedDisksFromTable.value)
+  modelShowSelectedPerDisk.value = true
+  modelActiveTab.value = 'batch-configure'
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.migrate-configure-disk {
+  @include flex($dir: column);
+  height: inherit;
+  margin-top: 10px;
+}
+</style>