bfg-common 1.4.114 → 1.4.115

package/components/common/wizards/vmNew/migrate/lib/validations.ts

@@ -0,0 +1,29 @@
+import { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_ValidationReturn,
+  UI_I_WizardStep,
+} from '~/components/atoms/wizard/lib/models/interfaces'
+import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
+
+export const checkSelectedDatastoreSync = (
+  localization: UI_I_Localization,
+  name: string,
+  wizard: Wizard,
+  value: UI_I_WizardStep[]
+): UI_I_ValidationReturn => {
+  let stepHasError = false
+
+  if (!name) {
+    stepHasError = wizard.setValidation(3, 'name', {
+      fieldMessage: '',
+      alertMessage: localization.common.selectValidDestinationStorage,
+    })
+  } else if (wizard.hasMessage(3, 'name')) {
+    value = wizard.removeValidation(3, 'name', value)
+  }
+
+  return {
+    newValue: value,
+    stepHasError,
+  }
+}

package/components/common/wizards/vmNew/migrate/select/computeResource/ComputeResource.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="compute-resource">
+    <atoms-alert
+      v-if="errorMessages.length"
+      test-id="compute-resource-alert"
+      status="alert-danger"
+      :items="errorMessages"
+      @remove="onHideErrorMessageAlert"
+    />
+
+    <div
+      v-if="props.migrateType === 'resource-storage'"
+      class="tree-view-wrap mt-1"
+    >
+      <common-wizards-vm-common-compute-resource-tree-view
+        v-model="computeResourceDataLocal.selectedNode"
+        :compute-resource-tree="nodes"
+        @show-compute-resource-tree="onShowComputeResourceTree"
+        @select-compute-resource-tree="onSelectComputeResourceTree"
+      />
+    </div>
+
+    <template v-else>
+      <atoms-tabs
+        v-model="activeTab"
+        test-id="migrate-select-storage-tabs"
+        :items="selectStorageTabs"
+        size="small"
+        class="compute-resource__tabs"
+      />
+
+      <common-wizards-vm-migrate-select-compute-resource-table-view
+        v-model:selected-data="selectedTableDataKeys[activeTab]"
+        :get-compute-resource-data="props.getComputeResourceData"
+        :data-table="props.computeResourceData?.items || []"
+        :total-items="props.computeResourceData?.total_items || 0"
+        :total-pages="props.computeResourceData?.total_pages || 1"
+        :type="activeTab"
+      />
+    </template>
+
+    <common-wizards-vm-common-validation-compatibility
+      :loading="!computeResourceDataLocal.selectedNode"
+      :status="compatibilityText[0]"
+      :text="compatibilityText[1]"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
+import type { UI_T_SelectComputeResourceTabType } from '~/components/common/wizards/vm/migrate/select/storage/lib/models/types'
+import type { UI_E_ComputeResourceTabKamelKeys } from '~/components/common/wizards/vm/migrate/select/computeResource/lib/models/enums'
+import type { UI_T_VmMigrateType } from '~/components/common/wizards/vm/migrate/lib/models/types'
+import type { UI_I_SelectedTableDataKeys } from '~/components/common/wizards/vm/migrate/select/computeResource/lib/models/interfaces'
+import { vmMigrateComputeResourceTabsFunc } from '~/components/common/wizards/vm/migrate/select/computeResource/lib/config/tabsPannel'
+
+const props = defineProps<{
+  submit: number
+  getComputeResourceData: (payload: UI_I_TablePayload) => Promise<void>
+  migrateType: UI_T_VmMigrateType
+  computeResourceData: any
+  computeResourceTree: UI_I_TreeNode
+}>()
+const emits = defineEmits<{
+  (event: 'next-step', value: any): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $recursion } = useNuxtApp()
+
+const activeTab = ref<UI_T_SelectComputeResourceTabType>('host')
+const selectStorageTabs = computed<UI_I_CollapseNavItem[]>(() =>
+  vmMigrateComputeResourceTabsFunc(localization.value)
+)
+
+const computeResourceDataLocal = ref<any>({
+  selectedNode: null,
+  host: null,
+  cluster: null,
+  resourcePool: null,
+  vApps: null,
+})
+
+const selectedTableDataKeys = ref<UI_I_SelectedTableDataKeys>({
+  host: null,
+  cluster: null,
+  'resource-pool': null,
+  'v-apps': null,
+})
+watch(
+  selectedTableDataKeys,
+  (newValue) => {
+    if (!props.computeResourceData?.items.length) return
+
+    const data = props.computeResourceData.items.find(
+      (_: never, key: number) => newValue[activeTab.value] === key
+    )
+    if (data) {
+      const dataKeys = UI_E_ComputeResourceTabKamelKeys[activeTab.value]
+      computeResourceDataLocal.value[dataKeys] = data
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+const nodes = ref<UI_I_TreeNode[]>([])
+watch(
+  props.computeResourceTree,
+  (newValue) => {
+    if (nodes.value.length) return
+
+    nodes.value = useDeepCopy([newValue])
+  },
+  { immediate: true, deep: true }
+)
+
+const onShowComputeResourceTree = ({
+  node,
+  cb,
+}: {
+  node: UI_I_TreeNode
+  cb: () => void
+}): void => {
+  $recursion.findAndShow(
+    nodes.value,
+    [node.id, node.type],
+    ['id', 'type'],
+    'nodes'
+  )
+  cb()
+}
+const onSelectComputeResourceTree = (node: UI_I_TreeNode): void => {
+  $recursion.findAndActivate(
+    nodes.value,
+    [node.type, node.id],
+    ['type', 'id'],
+    'nodes'
+  )
+}
+const compatibilityText = computed<[string, string]>(() => {
+  const { selectedNode } = computeResourceDataLocal.value
+
+  if (!selectedNode) return ['Success', '']
+
+  let res: [string, string] = ['Success', 'compatibilityChecksSucceeded']
+
+  if (selectedNode.type === 'datacenter' || selectedNode.type === 'folder') {
+    res = ['Error', 'selectValidClusterOrHostDestination']
+  }
+  if (selectedNode.type === 'cluster') {
+    const hasHost = !!selectedNode.nodes.length
+    if (!hasHost) {
+      res = ['Error', 'clusterNotContainAnyHosts']
+    }
+  }
+
+  if (selectedNode.type === 'host') {
+    if (selectedNode.state === 'Error') {
+      // TODO check Maintenance Mode
+      res = ['Error', 'selectedHostDisconnectedMaintenanceMode']
+    }
+  }
+
+  return res
+})
+
+const errorMessages = ref<string[]>([])
+const onHideErrorMessageAlert = (): void => {
+  errorMessages.value = []
+}
+
+const checkValidityBlock = (): boolean => {
+  const hasSelectedData = Object.values(computeResourceDataLocal.value).some(
+    (value) => value !== null
+  )
+
+  if (!hasSelectedData) {
+    const errorText = localization.value.common.selectValidDestinationComputeResource
+
+    errorMessages.value = [errorText]
+    return false
+  }
+
+  onHideErrorMessageAlert()
+  emits('next-step', {
+    ...computeResourceDataLocal.value,
+  })
+  return true
+}
+watch(
+  () => props.submit,
+  () => {
+    checkValidityBlock()
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.compute-resource {
+  .tree-view-wrap {
+    max-height: 250px;
+    min-height: 200px;
+    position: relative;
+    border: 1px solid #000;
+    padding: 5px 0 0 5px;
+    overflow: auto;
+  }
+  &__tabs {
+    width: 100%;
+    :deep(.nav) {
+      margin-top: 0;
+    }
+  }
+}
+</style>

package/components/common/wizards/vmNew/migrate/select/computeResource/lib/config/tabsPannel.ts

@@ -0,0 +1,28 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+export const vmMigrateComputeResourceTabsFunc = (
+  localization: UI_I_Localization
+): UI_I_CollapseNavItem[] => {
+  return [
+    {
+      text: localization.common.hosts,
+      value: 'host',
+      disabled: false,
+    },
+    {
+      text: localization.common.clusters,
+      value: 'cluster',
+      disabled: false,
+    },
+    {
+      text: localization.common.resourcePools,
+      value: 'resource-pool',
+      disabled: false,
+    },
+    {
+      text: localization.common.vApps,
+      value: 'v-apps',
+      disabled: false,
+    },
+  ]
+}

package/components/common/wizards/vmNew/migrate/select/computeResource/lib/models/enums.ts

@@ -0,0 +1,6 @@
+export enum UI_E_ComputeResourceTabKamelKeys {
+  host = 'host',
+  cluster = 'cluster',
+  'resource-pool' = 'resourcePool',
+  'v-apps' = 'vApps',
+}

package/components/common/wizards/vmNew/migrate/select/computeResource/lib/models/interfaces.ts

@@ -0,0 +1,30 @@
+import type { UI_T_ComputeResourceTableItem } from '~/components/common/wizards/vm/migrate/select/computeResource/lib/models/types'
+import type {
+  UI_I_HostTableItem,
+  UI_I_ClusterTableItem,
+  UI_I_ResourcePoolsTableItem,
+  UI_I_VAppsTableItem,
+} from '~/components/common/wizards/vm/migrate/select/computeResource/tableView/lib/models/interfaces'
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+import type { API_UI_I_DataTable } from '~/lib/models/table/interfaces'
+
+export interface UI_I_SelectedTableDataKeys {
+  host: UI_I_HostTableItem | null
+  cluster: UI_I_ClusterTableItem | null
+  'resource-pool': UI_I_ResourcePoolsTableItem | null
+  'v-apps': UI_I_VAppsTableItem | null
+}
+
+export interface UI_I_ComputeResourceDataLocal {
+  selectedNode: UI_I_TreeNode | null
+  host: UI_I_HostTableItem | null
+  cluster: UI_I_ClusterTableItem | null
+  resourcePool: UI_I_ResourcePoolsTableItem | null
+  vApps: UI_I_VAppsTableItem | null
+}
+
+export interface API_UI_I_ComputeResourceTableData
+  extends API_UI_I_DataTable<UI_T_ComputeResourceTableItem[]> {}
+
+export interface UI_I_ComputeResourceTableData
+  extends API_UI_I_ComputeResourceTableData {}

package/components/common/wizards/vmNew/migrate/select/computeResource/lib/models/types.ts

@@ -0,0 +1,12 @@
+import type {
+  UI_I_HostTableItem,
+  UI_I_ClusterTableItem,
+  UI_I_ResourcePoolsTableItem,
+  UI_I_VAppsTableItem,
+} from '~/components/common/wizards/vm/migrate/select/computeResource/tableView/lib/models/interfaces'
+
+export type UI_T_ComputeResourceTableItem =
+  | UI_I_HostTableItem
+  | UI_I_ClusterTableItem
+  | UI_I_ResourcePoolsTableItem
+  | UI_I_VAppsTableItem

package/components/common/wizards/vmNew/migrate/select/computeResource/tableView/TableView.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="data-table-view">
+    <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"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="props.totalItems"
+      :total-pages="props.totalPages"
+      :loading="loading"
+      class="data-table"
+      test-id="compute-resource-table"
+      server-off
+      hide-page-size
+      hide-pagination
+    >
+      <template #icon="{ item }">
+        <span :class="['datagrid-cell-icon', item.data.iconClassName]" />
+
+        <span class="text-ellipsis">
+          {{ item.text }}
+        </span>
+      </template>
+      <template #progress="{ item }">
+        <div class="flex-align-center w-100">
+          <div class="progress flex-1">
+            <progress class="progress-block" :max="100" :value="item.data" />
+          </div>
+          <span class="text-ellipsis ml-1" :title="item.text">{{
+            item.text
+          }}</span>
+        </div>
+      </template>
+    </atoms-table-data-grid>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_T_SelectComputeResourceTabType } from '~/components/common/wizards/vm/migrate/select/storage/lib/models/types'
+import type { UI_I_TablePayload, UI_I_Pagination } from '~/lib/models/table/interfaces'
+import type { UI_T_ComputeResourceTableItem } from '~/components/common/wizards/vm/migrate/select/computeResource/lib/models/types'
+import * as hostTable from '~/components/common/wizards/vm/migrate/select/computeResource/tableView/lib/config/hostTable'
+import * as clusterTable from '~/components/common/wizards/vm/migrate/select/computeResource/tableView/lib/config/clusterTable'
+import * as resourcePoolTable from '~/components/common/wizards/vm/migrate/select/computeResource/tableView/lib/config/resourcePoolTable'
+import * as vAppsTable from '~/components/common/wizards/vm/migrate/select/computeResource/tableView/lib/config/vappsTable'
+
+const props = defineProps<{
+  getComputeResourceData: (payload: UI_I_TablePayload) => Promise<void>
+  selectedData: number
+  dataTable: UI_T_ComputeResourceTableItem[]
+  totalItems: number
+  totalPages: number
+  type: UI_T_SelectComputeResourceTabType
+}>()
+const emits = defineEmits<{
+  (event: 'update:selected-data', value: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const loading = ref<boolean>(false)
+const pagination = ref<UI_I_Pagination>({
+  page: 1,
+  pageSize: 100,
+})
+
+const table: any = {
+  host: hostTable,
+  cluster: clusterTable,
+  'resource-pool': resourcePoolTable,
+  'v-apps': vAppsTable,
+}
+
+const getData = async (
+  type: UI_T_SelectComputeResourceTabType
+): Promise<void> => {
+  const payload: UI_I_TablePayload = {
+    pagination: pagination.value,
+    sortBy: null,
+    schema: 'full',
+    type,
+  }
+
+  props.getComputeResourceData(payload).then(() => {})
+}
+watch(
+  () => props.type,
+  (newValue: UI_T_SelectComputeResourceTabType) => {
+    getData(newValue)
+  },
+  { deep: true, immediate: true }
+)
+
+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, localization.value)
+})
+
+const selectedRow = computed<number>({
+  get() {
+    return props.selectedData
+  },
+  set(newValue: number) {
+    emits('update:selected-data', newValue)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.data-table-view {
+  @include flex($dir: column);
+  overflow: hidden;
+  height: inherit;
+  max-height: 250px;
+  .data-table {
+    @include flex($dir: column);
+    flex-direction: column;
+    overflow: hidden;
+    height: inherit;
+    :deep(.datagrid-outer-wrapper) {
+      height: inherit;
+    }
+  }
+}
+</style>

package/components/common/wizards/vmNew/migrate/select/computeResource/tableView/lib/config/clusterTable.ts

@@ -0,0 +1,113 @@
+import type {
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ClusterTableItem } from '~/components/common/wizards/vm/migrate/select/computeResource/tableView/lib/models/interfaces'
+import { clusterTableItemKeys } from '~/components/common/wizards/vm/migrate/select/computeResource/tableView/lib/config/tableKeys'
+import {
+  constructColumnKey,
+  constructHeadItem,
+} from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  return [
+    [localization.common.name, true, '180px', clusterTableItemKeys[0]],
+    [localization.common.availableCpu, true, '180px', clusterTableItemKeys[1]],
+    [localization.common.availableMemory, true, '180px', clusterTableItemKeys[2]],
+    [localization.common.availableStorage, true, '180px', clusterTableItemKeys[3]],
+    [localization.common.vSphere_DRS, true, '180px', clusterTableItemKeys[4]],
+    [localization.common.vSphere_HA, true, '180px', clusterTableItemKeys[5]],
+    [localization.common.totalCpu, false, '180px', clusterTableItemKeys[6]],
+    [localization.common.totalMemory, false, '180px', clusterTableItemKeys[7]],
+    [localization.common.totalStorage, false, '180px', clusterTableItemKeys[8]],
+    [localization.common.vms, false, '180px', clusterTableItemKeys[9]],
+    [localization.common.hosts, false, '180px', clusterTableItemKeys[10]],
+    [localization.common.cpus, false, '180px', clusterTableItemKeys[11]],
+    [localization.common.datastores, false, '180px', clusterTableItemKeys[12]],
+    [localization.common.vSAN, false, '180px', clusterTableItemKeys[13]],
+    [localization.common.vc, false, '180px', clusterTableItemKeys[14]],
+    [localization.common.evcCpuMode, true, '180px', clusterTableItemKeys[15]],
+    [localization.common.evcGraphicsMode, true, '240px', clusterTableItemKeys[16]],
+  ]
+}
+
+export const columnKeys = (
+  localization: UI_I_Localization
+): UI_I_ColumnKey[] => {
+  const result: UI_I_ColumnKey[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = i === 0 ? 'icon' : `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 = i === 0 ? 'icon' : `col${i}`
+    result.push(constructHeadItem(col, item[0], item[3], false, item[2]))
+  })
+  return result
+}
+
+export const bodyItems = (data: UI_I_ClusterTableItem[]): UI_I_BodyItem[][] => {
+  const { $binary } = useNuxtApp()
+
+  const bodyItems: UI_I_BodyItem[][] = []
+  data.forEach((cluster, key) => {
+    bodyItems.push([
+      {
+        key: 'icon',
+        text: cluster[clusterTableItemKeys[0]],
+        data: { iconClassName: 'vsphere-icon-cluster' },
+        id: key,
+      },
+      {
+        key: 'col1',
+        text: $binary.roundHz(cluster[clusterTableItemKeys[1]]),
+        id: key,
+      },
+      {
+        key: 'col2',
+        text: $binary.round(cluster[clusterTableItemKeys[2]]),
+        id: key,
+      },
+      {
+        key: 'col3',
+        text: $binary.round(cluster[clusterTableItemKeys[3]]),
+        id: key,
+      },
+      { key: 'col4', text: cluster[clusterTableItemKeys[4]], id: key },
+      { key: 'col5', text: cluster[clusterTableItemKeys[5]], id: key },
+      {
+        key: 'col6',
+        text: $binary.roundHz(cluster[clusterTableItemKeys[6]]),
+        id: key,
+      },
+      {
+        key: 'col7',
+        text: $binary.round(cluster[clusterTableItemKeys[7]]),
+        id: key,
+      },
+      {
+        key: 'col8',
+        text: $binary.round(cluster[clusterTableItemKeys[8]]),
+        id: key,
+      },
+      { key: 'col9', text: cluster[clusterTableItemKeys[9]], id: key },
+      { key: 'col10', text: cluster[clusterTableItemKeys[10]], id: key },
+      { key: 'col11', text: cluster[clusterTableItemKeys[11]], id: key },
+      { key: 'col12', text: cluster[clusterTableItemKeys[12]], id: key },
+      { key: 'col13', text: cluster[clusterTableItemKeys[13]], id: key },
+      { key: 'col14', text: cluster[clusterTableItemKeys[14]], id: key },
+      { key: 'col15', text: cluster[clusterTableItemKeys[15]], id: key },
+      { key: 'col16', text: cluster[clusterTableItemKeys[16]], id: key },
+    ])
+  })
+  return bodyItems
+}