bfg-common 1.2.147 → 1.2.148

package/components/common/wizards/vm/migrate/select/network/Network.vue

@@ -1,9 +1,51 @@
 <template>
   <div class="select-network">
-    <common-wizards-vm-common-validation-compatibility />
+    <common-wizards-vm-migrate-select-network-table-disk
+      v-model="selected"
+      :type="tableType"
+      :data-table="[]"
+    />
+
+    <div class="vm-migrate-advanced-view-button">
+      <button
+        class="btn btn-sm migrate-network-advanced-btn"
+        @click="isShowNetworkBasic = !isShowNetworkBasic"
+      >
+        <span v-if="isShowNetworkBasic"> &#x226A; </span>
+        {{ buttonText }}
+        <span v-if="!isShowNetworkBasic"> &#8811; </span>
+      </button>
+    </div>
+
+    <common-wizards-vm-common-validation-compatibility
+      :loading="false"
+      status="Success"
+      text="compatibilityChecksSucceeded"
+    />
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selected = ref<number[]>([])
+const isShowNetworkBasic = ref<boolean>(false)
+
+const buttonText = computed(
+  () => localization.value[isShowNetworkBasic.value ? 'basic' : 'advanced']
+)
+
+const tableType = computed<string>(() =>
+  isShowNetworkBasic.value ? 'basic' : 'advanced'
+)
+</script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.select-network {
+  .vm-migrate-advanced-view-button {
+    text-align: end;
+  }
+}
+</style>

package/components/common/wizards/vm/migrate/select/network/table/disk/Disk.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="table-wrap">
+    <atoms-table-data-grid
+      v-model:selected-row="selectedRow"
+      v-model:column-keys="columnKeys"
+      v-model:page-size="pagination.pageSize"
+      v-model:page="pagination.page"
+      type="checkbox"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="bodyItems.length"
+      :total-pages="1"
+      server-off
+      hide-footer
+      hide-page-size
+      @sorting="sorting"
+    >
+    </atoms-table-data-grid>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Pagination, UI_I_Localization } from '~/models/interfaces'
+import type {
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import * as basicTable from '~/components/common/wizards/vm/migrate/select/network/table/disk/config/basicTable'
+import * as advancedTable from '~/components/common/wizards/vm/migrate/select/network/table/disk/config/advancedTable'
+
+const props = defineProps<{
+  modelValue: number[]
+  dataTable: any[]
+  type: 'basic' | 'advanced'
+}>()
+const emits = defineEmits<{
+  (event: 'update:model-value', value: number[] | null): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const table: any = {
+  basic: basicTable,
+  advanced: advancedTable,
+}
+
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  table[props.type].headItems(localization.value)
+)
+const columnKeys = computed<UI_I_ColumnKey[]>(() =>
+  table[props.type].columnKeys(localization.value)
+)
+watch(localization, () => {
+  columnKeys.value = table[props.type].columnKeys(localization.value)
+})
+
+const bodyItems = computed<UI_I_BodyItem[][]>(() => {
+  return table[props.type].bodyItems(props.dataTable)
+})
+
+const sort = ref<string | null>(null)
+const pagination = ref<UI_I_Pagination>({
+  page: 1,
+  pageSize: 100,
+})
+
+const sorting = (data: [string, boolean]): void => {
+  const [column, status] = data
+  const direction = status ? 'asc' : 'desc'
+  sort.value = `${column}.${direction}`
+}
+
+const selectedRow = computed<number[]>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue: number[]) {
+    emits('update:model-value', newValue)
+  },
+})
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/wizards/vm/migrate/select/network/table/disk/config/advancedTable.ts

@@ -0,0 +1,77 @@
+import type {
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import type { UI_I_Localization } from '~/models/interfaces'
+import {
+  constructColumnKey,
+  constructHeadItem,
+} from '~/components/atoms/table/dataGrid/utils/constructDataTable'
+import { networkAdvancedTableItemKeys } from '~/components/common/wizards/vm/migrate/select/network/table/disk/config/tableKeys'
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  return [
+    [localization.vm, true, '25%', networkAdvancedTableItemKeys[0]],
+    [localization.networkAdapter, true, '25%', networkAdvancedTableItemKeys[1]],
+    [localization.sourceNetwork, true, '25%', networkAdvancedTableItemKeys[2]],
+    [
+      localization.destinationNetwork,
+      true,
+      '25%',
+      networkAdvancedTableItemKeys[3],
+    ],
+  ]
+}
+
+export const columnKeys = (
+  localization: UI_I_Localization
+): UI_I_ColumnKey[] => {
+  const result: UI_I_ColumnKey[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = `col${i}`
+    result.push(constructColumnKey(col, item[0], item[1]))
+  })
+  return result
+}
+
+export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
+  const result: UI_I_HeadItem[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = `col${i}`
+    result.push(constructHeadItem(col, item[0], item[3], true, item[2]))
+  })
+  return result
+}
+
+export const bodyItems = (data: any[]): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+
+  data.forEach((storage: any, key: number) => {
+    bodyItems.push([
+      {
+        key: 'col0',
+        text: storage[networkAdvancedTableItemKeys[0]],
+        id: key,
+      },
+      {
+        key: 'col1',
+        text: storage[networkAdvancedTableItemKeys[1]],
+        id: key,
+      },
+      {
+        key: 'col2',
+        text: storage[networkAdvancedTableItemKeys[2]],
+        id: key,
+      },
+      {
+        key: 'col3',
+        text: storage[networkAdvancedTableItemKeys[3]],
+        id: key,
+      },
+    ])
+  })
+  return bodyItems
+}

package/components/common/wizards/vm/migrate/select/network/table/disk/config/basicTable.ts

@@ -0,0 +1,71 @@
+import type {
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import type { UI_I_Localization } from '~/models/interfaces'
+import {
+  constructColumnKey,
+  constructHeadItem,
+} from '~/components/atoms/table/dataGrid/utils/constructDataTable'
+import { networkBasicsTableItemKeys } from '~/components/common/wizards/vm/migrate/select/network/table/disk/config/tableKeys'
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  return [
+    [localization.sourceNetwork, true, '33.3%', networkBasicsTableItemKeys[0]],
+    [localization.usedBy, true, '33.3%', networkBasicsTableItemKeys[1]],
+    [
+      localization.destinationNetwork,
+      true,
+      '33.3%',
+      networkBasicsTableItemKeys[2],
+    ],
+  ]
+}
+
+export const columnKeys = (
+  localization: UI_I_Localization
+): UI_I_ColumnKey[] => {
+  const result: UI_I_ColumnKey[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = `col${i}`
+    result.push(constructColumnKey(col, item[0], item[1]))
+  })
+  return result
+}
+
+export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
+  const result: UI_I_HeadItem[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = `col${i}`
+    result.push(constructHeadItem(col, item[0], item[3], true, item[2]))
+  })
+  return result
+}
+
+export const bodyItems = (data: any[]): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+
+  data.forEach((storage: any, key: number) => {
+    bodyItems.push([
+      {
+        key: 'col0',
+        text: storage[networkBasicsTableItemKeys[0]],
+        id: key,
+      },
+      {
+        key: 'col1',
+        text: storage[networkBasicsTableItemKeys[1]],
+        id: key,
+      },
+      {
+        key: 'col2',
+        text: storage[networkBasicsTableItemKeys[2]],
+        id: key,
+      },
+    ])
+  })
+  return bodyItems
+}

package/components/common/wizards/vm/migrate/select/network/table/disk/config/tableKeys.ts

@@ -0,0 +1,10 @@
+import type {
+  UI_T_NetworkBasicsTableTableKeysTuple,
+  UI_T_NetworkAdvancedTableKeysTuple,
+} from '~/components/common/wizards/vm/migrate/select/network/table/disk/models/types'
+
+export const networkBasicsTableItemKeys: UI_T_NetworkBasicsTableTableKeysTuple =
+  ['source_network', 'used_by', 'destination_network']
+
+export const networkAdvancedTableItemKeys: UI_T_NetworkAdvancedTableKeysTuple =
+  ['vm_name', 'network_adapter', 'source_network', 'destination_network']

package/components/common/wizards/vm/migrate/select/network/table/disk/models/interfaces.ts

@@ -0,0 +1 @@
+

package/components/common/wizards/vm/migrate/select/network/table/disk/models/types.ts

@@ -0,0 +1,12 @@
+export type UI_T_NetworkAdvancedTableKeysTuple = [
+  'vm_name',
+  'network_adapter',
+  'source_network',
+  'destination_network'
+]
+
+export type UI_T_NetworkBasicsTableTableKeysTuple = [
+  'source_network',
+  'used_by',
+  'destination_network'
+]

package/components/common/wizards/vm/migrate/select/priority/Priority.vue

@@ -10,13 +10,14 @@
 <script lang="ts" setup>
 import type { UI_I_Localization } from '~/models/interfaces'
 import type { UI_I_RadioOption } from '~/components/common/select/radio/models/interfaces'
+import type { UI_T_SelectVMotionPriority } from '~/components/common/wizards/vm/migrate/select/priority/models/types'
 import { vmMigrateSelectPriorityTypesFunc } from '~/components/common/wizards/vm/migrate/select/priority/config/typeOptions'
 
 const props = defineProps<{
-  modelValue: string
+  modelValue: UI_T_SelectVMotionPriority
 }>()
 const emits = defineEmits<{
-  (event: 'update:model-value', value: string | number): void
+  (event: 'update:model-value', value: UI_T_SelectVMotionPriority): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -25,11 +26,11 @@ const vmMigrationPriorityTypes = computed<UI_I_RadioOption[]>(() =>
   vmMigrateSelectPriorityTypesFunc(localization.value)
 )
 
-const selectedPriorityType = computed<string>({
+const selectedPriorityType = computed<UI_T_SelectVMotionPriority>({
   get() {
     return props.modelValue
   },
-  set(newValue: string) {
+  set(newValue: UI_T_SelectVMotionPriority) {
     emits('update:model-value', newValue)
   },
 })

package/components/common/wizards/vm/migrate/select/priority/models/types.ts

@@ -0,0 +1 @@
+export type UI_T_SelectVMotionPriority = 'high-priority' | 'schedule-normal'

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

@@ -4,6 +4,7 @@
       v-if="isShowSelectedPerDisks"
       v-model="isShowSelectedPerDisks"
       v-model:active-tab="activeTab"
+      v-model:connected-storage-id-local="connectedStorageIdLocal"
       :data="selectedPerDisks"
     />
 
@@ -14,6 +15,7 @@
       :items="selectStorageTabs"
       size="small"
       class="select-storage__tabs"
+      @change="onChangeMigrateMode"
     />
 
     <common-wizards-vm-migrate-select-storage-configure-batch
@@ -21,20 +23,29 @@
       v-model:vm-disk-format="dataLocal.vmDiskFormat"
       :get-datastore-table-func="props.getDatastoreTableFunc"
       :datastore="props.datastore"
-      :connected-storage-id="props.connectedStorageId"
+      :connected-storage-id="connectedStorageId"
       @update-selected-datastore="dataLocal.storage = $event"
-    />
+    >
+      <template v-if="isShowSelectedPerDisks" #buttonConfirm>
+        <button class="btn btn-sm btn-primary" @click="onApplyChanges">
+          {{ localization.confirm }}
+        </button>
+      </template>
+    </common-wizards-vm-migrate-select-storage-configure-batch>
 
     <common-wizards-vm-migrate-select-storage-configure-disk
       v-show="activeTab === 'configure-disk'"
       v-model="isShowSelectedPerDisks"
+      v-model:selected-per-disk-keys="selectedPerDiskKeys"
       v-model:active-tab="activeTab"
-      :configure-per-disks="props.configurePerDisks"
-      @update-selected-per-disks="selectedPerDisks = $event"
+      :configure-per-disks="configurePerDisksLocal"
+      @update-selected-per-disks="onChangePerDiskStorage"
     />
 
     <common-wizards-vm-common-validation-compatibility
       :loading="!dataLocal.storage"
+      :status="'Success'"
+      text="compatibilityChecksSucceeded"
     />
   </div>
 </template>
@@ -56,7 +67,7 @@ const props = defineProps<{
   submit: number
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
   datastore: UI_I_DatastoreTableItem[]
-  connectedStorageId: string | null
+  connectedStorageIdDefault: string | null
   configurePerDisks: UI_I_StorageConfigurePerDiskItem[]
 }>()
 const emits = defineEmits<{
@@ -72,8 +83,54 @@ const selectStorageTabs = computed<UI_I_CollapseNavItem[]>(() =>
 
 // const selectedStorage = ref<UI_I_DatastoreTableItem | null>(null)
 const isShowSelectedPerDisks = ref<boolean>(false)
+
+const selectedPerDiskKeys = ref<number[]>([])
 const selectedPerDisks = ref<UI_I_StorageConfigurePerDiskItem[]>([])
 
+const configurePerDisksLocal = ref<UI_I_StorageConfigurePerDiskItem[]>(
+  props.configurePerDisks
+)
+
+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
+
+  selectedPerDisks.value = event
+}
+
+const onApplyChanges = (): void => {
+  /* TODO сделать рефакторинг потом */
+  configurePerDisksLocal.value.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) {
+      ;({ name: disk.storage, id: disk.extra.datastore_id } =
+        dataLocal.value.storage)
+    }
+  })
+
+  isShowSelectedPerDisks.value = false
+  activeTab.value = 'configure-disk'
+  selectedPerDisks.value = []
+  selectedPerDiskKeys.value = []
+}
+
 const dataLocal = ref<UI_I_SelectStorageDataLocal>({
   vmDiskFormat: 'same-format-source',
   storage: null,

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

@@ -1,22 +1,22 @@
 <template>
-  <div>
+  <div class="configure-batch-mode">
     <common-wizards-vm-migrate-select-storage-disk-format
       v-model:vm-disk-format="selectedVmDiskFormat"
     />
 
-    <common-wizards-vm-migrate-select-storage-policy />
-
-    <div class="clr-checkbox-wrapper flex-align-center w-100">
-      <input
-        id="suspend-on-revert"
-        v-model="isDisableStorageDrs"
-        type="checkbox"
-        class="checkbox-btn"
-      />
-      <label for="suspend-on-revert" class="clr-control-label">
-        {{ localization.disableStorageDRSVirtualMachine }}
-      </label>
-    </div>
+    <!--    <common-wizards-vm-migrate-select-storage-policy />-->
+
+    <!--    <div class="clr-checkbox-wrapper flex-align-center w-100">-->
+    <!--      <input-->
+    <!--        id="suspend-on-revert"-->
+    <!--        v-model="isDisableStorageDrs"-->
+    <!--        type="checkbox"-->
+    <!--        class="checkbox-btn"-->
+    <!--      />-->
+    <!--      <label for="suspend-on-revert" class="clr-control-label">-->
+    <!--        {{ localization.disableStorageDRSVirtualMachine }}-->
+    <!--      </label>-->
+    <!--    </div>-->
 
     <common-wizards-vm-migrate-select-storage-table-datastore
       :get-datastore-table-func="props.getDatastoreTableFunc"
@@ -24,6 +24,13 @@
       :connected-storage-id="props.connectedStorageId"
       @update-selected-datastore="emits('update-selected-datastore', $event)"
     />
+
+    <div
+      v-if="$slots.buttonConfirm"
+      class="clr-justify-content-end configure-batch-mode__button"
+    >
+      <slot name="buttonConfirm"></slot>
+    </div>
   </div>
 </template>
 
@@ -41,7 +48,7 @@ const props = defineProps<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const isDisableStorageDrs = ref<boolean>(false)
+// const isDisableStorageDrs = ref<boolean>(false)
 
 const emits = defineEmits<{
   (event: 'update-selected-datastore', value: UI_I_TablePayload): void
@@ -58,4 +65,10 @@ const selectedVmDiskFormat = computed<string>({
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.configure-batch-mode {
+  &__button {
+    display: flex;
+  }
+}
+</style>

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

@@ -12,7 +12,7 @@
     </div>
 
     <common-wizards-vm-migrate-select-storage-table-disk
-      v-model:selected-per-disk="selectedPerDiskKeys"
+      v-model:selected-per-disk="selectedPerDiskKeysLocal"
       :configure-per-disks="props.configurePerDisks"
     />
   </div>
@@ -25,11 +25,13 @@ import type { UI_T_VmMigrateSelectStorageTab } from '~/components/common/wizards
 
 const props = defineProps<{
   modelValue: boolean
+  selectedPerDiskKeys: number[]
   configurePerDisks: UI_I_StorageConfigurePerDiskItem[]
   activeTab: UI_T_VmMigrateSelectStorageTab
 }>()
 const emits = defineEmits<{
   (event: 'update:model-value', value: boolean): void
+  (event: 'update:selected-per-disk-keys', value: number[]): void
   (
     event: 'update-selected-per-disks',
     value: UI_I_StorageConfigurePerDiskItem[]
@@ -39,13 +41,12 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const selectedPerDiskKeys = ref<number[]>([])
 const selectedDisksFromTable = computed<UI_I_StorageConfigurePerDiskItem[]>(
   () => {
     if (!props.configurePerDisks) return []
 
     return props.configurePerDisks.filter((_: never, key: number) =>
-      selectedPerDiskKeys.value.includes(key)
+        selectedPerDiskKeysLocal.value.includes(key)
     )
   }
 )
@@ -56,6 +57,15 @@ const onConfigure = (): void => {
   activeTabValue.value = 'batch-configure'
 }
 
+const selectedPerDiskKeysLocal = computed<number[]>({
+  get(): number[] {
+    return props.selectedPerDiskKeys
+  },
+  set(newValue: number[]) {
+    emits('update:selected-per-disk-keys', newValue)
+  },
+})
+
 const activeTabValue = computed<UI_T_VmMigrateSelectStorageTab>({
   get() {
     return props.activeTab

package/components/common/wizards/vm/migrate/select/storage/models/enums.ts

@@ -0,0 +1,6 @@
+export enum UI_E_SelectStorageDiskFormat {
+  'Same format as source',
+  'Thin Provision ',
+  'Thick Provision Lazy Zeroed',
+  'Thick Provision Eager Zeroed',
+}

package/components/common/wizards/vm/migrate/select/storage/selectedPerDisk/SelectedPerDisk.vue

@@ -34,21 +34,24 @@ import type { UI_T_VmMigrateSelectStorageTab } from '~/components/common/wizards
 const props = defineProps<{
   modelValue: boolean
   activeTab: UI_T_VmMigrateSelectStorageTab
+  connectedStorageIdLocal: string
   data: any[]
 }>()
 const emits = defineEmits<{
   (event: 'update:model-value', value: boolean): void
   (event: 'update:active-tab', value: UI_T_VmMigrateSelectStorageTab): void
+  (event: 'update:connected-storage-id-local', value: string): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const normalizedData = computed<string[]>(() =>
-  props.data.map((item) => `${item.name} | ${item.file}`)
+  props.data.map((item) => `${item.virtual_machine} | ${item.file}`)
 )
 
 const onGoBack = (): void => {
   emits('update:model-value', false)
+  emits('update:connected-storage-id-local', '')
   activeTabValue.value = 'configure-disk'
 }
 
@@ -56,7 +59,7 @@ const activeTabValue = computed<UI_T_VmMigrateSelectStorageTab>({
   get() {
     return props.activeTab
   },
-  set(newValue: string) {
+  set(newValue: UI_T_VmMigrateSelectStorageTab) {
     emits('update:active-tab', newValue)
   },
 })

package/components/common/wizards/vm/migrate/select/storage/table/datastore/Datastore.vue

@@ -81,8 +81,8 @@ const getStorage = async (): Promise<void> => {
   }
 
   props.getDatastoreTableFunc(payload).then(() => {
-    selectedStorageKey.value = null
-    setStorageFromProps()
+    // selectedStorageKey.value = null
+    // setStorageFromProps()
   })
 }
 getStorage()
@@ -100,6 +100,14 @@ const setStorageFromProps = (): void => {
     if (item.id === props.connectedStorageId) changeStorage(index)
   })
 }
+
+watch(
+  () => props.connectedStorageId,
+  (newValue) => {
+    if (!props.datastore.length || !newValue) return
+    setStorageFromProps()
+  }
+)
 </script>
 
 <style lang="scss" scoped></style>