bfg-common 1.2.108 → 1.2.109

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

@@ -0,0 +1,73 @@
+<template>
+  <div class="migrate-configure-disk">
+    <div class="btn-group">
+      <button
+        id="vm-migrate-configure"
+        class="btn btn-link btn-sm"
+        :disabled="!selectedDisksFromTable.length"
+        @click="onConfigure"
+      >
+        {{ localization.configure }}
+      </button>
+    </div>
+
+    <common-wizards-vm-migrate-select-storage-table-disk
+      v-model:selected-per-disk="selectedPerDiskKeys"
+      :configure-per-disks="props.configurePerDisks"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_I_StorageConfigurePerDiskItem } from '~/components/common/wizards/vm/migrate/select/storage/table/disk/models/interfaces'
+import type { UI_T_VmMigrateSelectStorageTab } from '~/components/common/wizards/vm/migrate/select/storage/models/types'
+
+const props = defineProps<{
+  modelValue: boolean
+  configurePerDisks: UI_I_StorageConfigurePerDiskItem[]
+  activeTab: UI_T_VmMigrateSelectStorageTab
+}>()
+const emits = defineEmits<{
+  (event: 'update:model-value', value: boolean): void
+  (
+    event: 'update-selected-per-disks',
+    value: UI_I_StorageConfigurePerDiskItem[]
+  ): void
+  (event: 'update:active-tab', value: string): void
+}>()
+
+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)
+    )
+  }
+)
+
+const onConfigure = (): void => {
+  emits('update-selected-per-disks', selectedDisksFromTable.value)
+  emits('update:model-value', true)
+  activeTabValue.value = 'batch-configure'
+}
+
+const activeTabValue = computed<UI_T_VmMigrateSelectStorageTab>({
+  get() {
+    return props.activeTab
+  },
+  set(newValue: string) {
+    emits('update:active-tab', newValue)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.migrate-configure-disk {
+  margin-top: 10px;
+}
+</style>

package/components/common/wizards/vm/migrate/select/storage/diskFormat/DiskFormat.vue

@@ -0,0 +1,68 @@
+<template>
+  <section class="disk-format clr-flex-row">
+    <label
+      for="storage-locator-disk-format-label"
+      class="clr-col-3 clr-control-label"
+    >
+      {{ localization.selectVirtualDiskFormat }}
+    </label>
+    <div class="select select-lang mt-0 clr-form-control">
+      <select
+        id="storage-locator-disk-format-label"
+        v-model="selectedVirtualDiskFormat"
+        class="storage-locator-disk-format-label"
+      >
+        <option
+          v-for="option in configuredSpeedOptions"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.text }}
+        </option>
+      </select>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import { vmDiskFormatOptions } from '~/components/common/wizards/vm/migrate/select/storage/diskFormat/config/formatOptions'
+
+const props = defineProps<{
+  vmDiskFormat: string
+}>()
+const emits = defineEmits<{
+  (event: 'update:vm-disk-format', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const configuredSpeedOptions = computed<UI_I_OptionItem[]>(() =>
+  vmDiskFormatOptions()
+)
+
+const selectedVirtualDiskFormat = computed<string>({
+  get() {
+    return props.vmDiskFormat
+  },
+  set(newValue: string) {
+    emits('update:vm-disk-format', newValue)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.disk-format {
+  @include flex($align: center);
+}
+.select-lang {
+  margin-left: 25px;
+  height: 24px;
+  min-width: 210px;
+  & > select {
+    height: 100%;
+  }
+}
+</style>

package/components/common/wizards/vm/migrate/select/storage/diskFormat/config/formatOptions.ts

@@ -0,0 +1,22 @@
+import type { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export const vmDiskFormatOptions = (): UI_I_OptionItem[] => {
+  return [
+    {
+      text: 'Same Format as source',
+      value: 'same-format-source',
+    },
+    {
+      text: 'Thick Provision Lazy Zeroed',
+      value: 'thick-provision-lazy-zeroed',
+    },
+    {
+      text: 'Thick Provision Eager Zeroed',
+      value: 'thick-provision-eager-zeroed',
+    },
+    {
+      text: 'Thin Provision',
+      value: 'thin-provision',
+    },
+  ]
+}

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

@@ -0,0 +1,14 @@
+import type { UI_I_DatastoreTableItem } from '~/models/store/storage/interfaces'
+import type { UI_I_StorageConfigurePerDiskItem } from '~/components/common/wizards/vm/migrate/select/storage/table/disk/models/interfaces'
+import type { UI_T_VmMigrateSelectStorageTab } from '~/components/common/wizards/vm/migrate/select/storage/models/types'
+
+export interface UI_I_SelectStorageDataLocal {
+  vmDiskFormat: string
+  storage: UI_I_DatastoreTableItem | null
+}
+
+export interface UI_I_SelectStorageReadyData
+  extends UI_I_SelectStorageDataLocal {
+  tab: UI_T_VmMigrateSelectStorageTab
+  configureDisks?: UI_I_StorageConfigurePerDiskItem[]
+}

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

@@ -0,0 +1,3 @@
+export type UI_T_VmMigrateSelectStorageTab =
+  | 'batch-configure'
+  | 'configure-disk'

package/components/common/wizards/vm/migrate/select/storage/policy/Policy.vue

@@ -0,0 +1,83 @@
+<template>
+  <section class="storage-policy clr-flex-row">
+    <label
+      for="storage-locator-disk-policy-label"
+      class="clr-col-3 clr-control-label"
+    >
+      {{ localization.vmStoragePolicy }}
+    </label>
+    <div
+      class="mt-0 clr-form-control btn btn-outline-primary dropdown-toggle storage-policy__select-wrapper"
+    >
+      <select
+        id="storage-locator-disk-policy-label"
+        v-model="selectedVmStoragePolicy"
+        class="storage-locator-disk-format-label"
+      >
+        <option
+          v-for="option in configuredSpeedOptions"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.text }}
+        </option>
+      </select>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedVmStoragePolicy = ref<string>('keep-existing-storage-policies')
+
+const configuredSpeedOptions = computed<UI_I_OptionItem[]>(() => {
+  return [
+    {
+      text: 'Keep existing VM storage policies',
+      value: 'keep-existing-storage-policies',
+    },
+    {
+      text: 'Datastore Default',
+      value: 'datastore-default',
+    },
+    {
+      text: 'Management Storage Policy - Large',
+      value: 'management-storage-policy-large',
+    },
+    {
+      text: 'Management Storage Policy - Regular',
+      value: 'management-storage-policy-regular',
+    },
+    {
+      text: 'vSAN Default Storage Policy',
+      value: 'vsan-default-storage-policy',
+    },
+  ]
+})
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.storage-policy {
+  @include flex($align: center);
+  margin-top: 2px;
+  &__select-wrapper {
+    margin-left: 25px;
+    height: 24px;
+    min-width: 420px;
+    & > select {
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      border: none;
+      &:focus-visible {
+        outline: none;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,84 @@
+<template>
+  <div class="selected-per-disk">
+    <atoms-the-icon
+      class="icon-arrow"
+      name="arrow"
+      @click="onGoBack"
+    ></atoms-the-icon>
+
+    <div>
+      <span class="icon vsphere-icon-vm"></span>
+    </div>
+
+    <span v-if="normalizedData.length === 1">{{ normalizedData[0] }}</span>
+
+    <div v-else class="selected-per-disk__all-objects">
+      <span>
+        {{ localization.allSelectedObjects }}
+      </span>
+      <common-wizards-vm-common-tooltip>
+        <template #content>
+          <div v-for="(item, key) in normalizedData" :key="key">
+            {{ item }}
+          </div>
+        </template>
+      </common-wizards-vm-common-tooltip>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_T_VmMigrateSelectStorageTab } from '~/components/common/wizards/vm/migrate/select/storage/models/types'
+
+const props = defineProps<{
+  modelValue: boolean
+  activeTab: UI_T_VmMigrateSelectStorageTab
+  data: any[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:model-value', value: boolean): void
+  (event: 'update:active-tab', value: UI_T_VmMigrateSelectStorageTab): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const normalizedData = computed<string[]>(() =>
+  props.data.map((item) => `${item.name} | ${item.file}`)
+)
+
+const onGoBack = (): void => {
+  emits('update:model-value', false)
+  activeTabValue.value = 'configure-disk'
+}
+
+const activeTabValue = computed<UI_T_VmMigrateSelectStorageTab>({
+  get() {
+    return props.activeTab
+  },
+  set(newValue: string) {
+    emits('update:active-tab', newValue)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.selected-per-disk {
+  @include flex($align: center);
+  .icon {
+    display: block;
+  }
+  .icon-arrow {
+    width: 16px;
+    height: 16px;
+    margin: 0 20px 0 15px;
+    transform: rotate(270deg);
+    fill: #0079b8;
+    cursor: pointer;
+  }
+  &__all-objects {
+    @include flex($align: center);
+  }
+}
+</style>

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

@@ -0,0 +1,105 @@
+<template>
+  <div class="table-wrap">
+    <atoms-table-data-grid
+      v-model:selected-row="selectedStorageKey"
+      v-model:column-keys="columnKeys"
+      v-model:page-size="pagination.pageSize"
+      v-model:page="pagination.page"
+      type="radio"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="bodyItems.length"
+      :total-pages="1"
+      server-off
+      hide-page-size
+      @sorting="sorting"
+      @change="changeStorage"
+    >
+      <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_Pagination, UI_I_Localization } from '~/models/interfaces'
+import type { UI_I_TablePayload } from '~/models/store/interfaces'
+import type { UI_I_DatastoreTableItem } from '~/models/store/storage/interfaces'
+import type {
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import * as table from '~/components/common/wizards/vm/migrate/select/storage/table/datastore/config/config'
+
+const props = defineProps<{
+  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  datastore: UI_I_DatastoreTableItem[]
+  connectedStorageId: string | null
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-selected-datastore', value: UI_I_TablePayload): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+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 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}`
+
+  getStorage()
+}
+
+const getStorage = async (): Promise<void> => {
+  const payload: UI_I_TablePayload = {
+    pagination: pagination.value,
+    sortBy: sort.value,
+    type: 'datastore',
+    schema: 'full',
+  }
+
+  props.getDatastoreTableFunc(payload).then(() => {
+    selectedStorageKey.value = null
+    setStorageFromProps()
+  })
+}
+getStorage()
+
+const selectedStorageKey = ref<number | null>(null)
+const changeStorage = (index: number): void => {
+  if (!props.datastore) return
+  emits('update-selected-datastore', props.datastore[index])
+  selectedStorageKey.value = index
+}
+
+const setStorageFromProps = (): void => {
+  if (!props.connectedStorageId) return
+  props.datastore.forEach((item, index) => {
+    if (item.id === props.connectedStorageId) changeStorage(index)
+  })
+}
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/wizards/vm/migrate/select/storage/table/datastore/config/config.ts

@@ -0,0 +1,154 @@
+import type { UI_I_DatastoreTableItem } from 'bfg-common/models/store/storage/interfaces'
+import type {
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from 'bfg-common/components/atoms/table/dataGrid/models/interfaces'
+import type { UI_I_Localization } from 'bfg-common/models/interfaces'
+import type { UI_T_StorageColumnKeys } from 'bfg-common/components/common/vm/actions/common/select/storage/models/types'
+import {
+  constructColumnKey,
+  constructHeadItem,
+} from 'bfg-common/components/atoms/table/dataGrid/utils/constructDataTable'
+import {
+  datastoreIconByState,
+  datastoreLocalizationByState,
+} from 'bfg-common/components/common/config/states'
+
+export const storageTableKeys: UI_T_StorageColumnKeys = [
+  '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.name, true, '96px', storageTableKeys[0]],
+    [localization.state, true, '138px', storageTableKeys[1]],
+    [localization.capacity, true, '110px', storageTableKeys[2]],
+    [localization.provisioned, true, '128px', storageTableKeys[3]],
+    [localization.free, true, '110px', storageTableKeys[4]],
+    [localization.used, true, '110px', storageTableKeys[5]],
+    [localization.type, true, '110px', storageTableKeys[6]],
+    [localization.thinProvisioning, true, '132px', storageTableKeys[7]],
+    [localization.access, true, '110px', storageTableKeys[8]],
+    [localization.hardwareAcceleration, true, '134px', storageTableKeys[9]],
+    [localization.driverType, true, '110px', storageTableKeys[10]],
+    [localization.device, true, '110px', storageTableKeys[11]],
+    [localization.storageIoControl, true, '110px', storageTableKeys[12]],
+  ]
+}
+
+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], true, item[2]))
+  })
+  return result
+}
+
+export const bodyItems = (
+  data: UI_I_DatastoreTableItem[],
+  localization: UI_I_Localization
+): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+  const { $binary } = useNuxtApp()
+
+  data.forEach((storage: UI_I_DatastoreTableItem, key: number) => {
+    const state =
+      localization[datastoreLocalizationByState[storage[storageTableKeys[1]]]]
+    bodyItems.push([
+      {
+        key: 'icon',
+        text: storage[storageTableKeys[0]].toString(),
+        data: `vsphere-icon-${datastoreIconByState[storage.state]}`,
+        id: key,
+      },
+      {
+        key: 'col1',
+        text: state,
+        id: key,
+      },
+      {
+        key: 'col2',
+        text: $binary.round(storage.capacity[storageTableKeys[2]]),
+        id: key,
+      },
+      {
+        key: 'col3',
+        text: $binary.round(storage.capacity[storageTableKeys[3]].toString()),
+        id: key,
+      },
+      {
+        key: 'col4',
+        text: $binary.round(storage.capacity[storageTableKeys[4]].toString()),
+        id: key,
+      },
+      {
+        key: 'col5',
+        text: $binary.round(storage.capacity[storageTableKeys[5]].toString()),
+        id: key,
+      },
+      {
+        key: 'col6',
+        text: storage[storageTableKeys[6]].toString(),
+        id: key,
+      },
+      {
+        key: 'col7',
+        text: storage[storageTableKeys[7]] ? localization.yes : localization.no,
+        id: key,
+      },
+      {
+        key: 'col8',
+        text: storage[storageTableKeys[8]].toString(),
+        id: key,
+      },
+      {
+        key: 'col9',
+        text: storage[storageTableKeys[9]].toString(),
+        id: key,
+      },
+      {
+        key: 'col10',
+        text: storage[storageTableKeys[10]].toString(),
+        id: key,
+      },
+      {
+        key: 'col11',
+        text: storage[storageTableKeys[11]].toString(),
+        id: key,
+      },
+      {
+        key: 'col12',
+        text: storage[storageTableKeys[12]].toString(),
+        id: key,
+      },
+    ])
+  })
+  return bodyItems
+}

package/components/common/wizards/vm/migrate/select/storage/table/datastore/models/types.ts

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