bfg-common 1.4.46 → 1.4.47

package/components/common/wizards/datastoreNew/add/sharedStorm/deviceSelection/lib/models/interfaces.ts

@@ -0,0 +1,48 @@
+import { UI_I_DataTableQuery } from '~/lib/models/table/interfaces'
+
+export interface UI_I_LunDiskSpherePayload extends UI_I_DataTableQuery {
+  host: string
+}
+
+export interface UI_I_LunDisk {
+  name: string
+  capacity: string
+}
+
+export interface UI_I_SelectHostOptions {
+  text: string
+  value: string
+  disabled?: boolean
+}
+
+export interface UI_I_CreateStorageLunDiskItem {
+  name: string
+  identifier: string
+  lun: number
+  capacity_mb: string
+  hardware_acceleration: string
+  drive_type: string
+  sector_format: string
+}
+
+export interface API_UI_I_DatastoreLunDiskItem {
+  id: string
+  adapter: string
+  capacity_mb: string
+  datastore: {
+    name: string
+    type: string
+  }
+  drive_type: string
+  hardware_acceleration: string
+  identifier: string
+  lun: number
+  name: string
+  operational_state: string
+  owner: string
+  perennially_reserved: string
+  physical_location: string
+  sector_format: string
+  transport: string
+  type: string
+}

package/components/common/wizards/datastoreNew/add/sharedStorm/deviceSelection/lib/models/types.ts

@@ -0,0 +1,8 @@
+export type UI_T_HostTableItemsKey =
+  | 'name'
+  | 'identifier'
+  | 'lun'
+  | 'capacity_mb'
+  | 'hardware_acceleration'
+  | 'drive_type'
+  | 'sector_format'

package/components/common/wizards/datastoreNew/add/sharedStorm/deviceSelection/table/Table.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="data-table-view">
+    <atoms-table-data-grid
+      v-model:selected-row="selectedLunDiskLocal"
+      v-model:column-keys="columnKeys"
+      v-model:page-size="pagination.pageSize"
+      v-model:page="pagination.page"
+      type="checkbox"
+      class="data-table"
+      test-id="device-selection-lun-disk-table"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="props.totalItems"
+      :total-pages="props.totalPages"
+      :loading="loading"
+      :is-main-filter="props.isMainFilter"
+      :main-filter-placeholder="localization.filter"
+      hide-page-size
+      @main-filter="onMainFiltering"
+      @sorting="sorting"
+    >
+      <template #icon="{ item }">
+        <span :class="['datagrid-cell-icon', item.data.iconClassName]" />
+        <span class="text-ellipsis">
+          {{ item.text }}
+        </span>
+      </template>
+    </atoms-table-data-grid>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useDebounceFn } from '@vueuse/core'
+import {
+  UI_I_HeadItem,
+  UI_I_ColumnKey,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import { UI_I_Localization } from '~/lib/models/interfaces'
+import { UI_I_Pagination } from '~/lib/models/table/interfaces'
+// import { optionsDefault as itemsPerPage } from '~/node_modules/nuxt-3-uikit/components/atoms/table/dataGrid/config'
+import { UI_I_CreateStorageLunDiskItem } from '~/components/common/wizards/datastoreNew/add/sharedStorm/deviceSelection/lib/models/interfaces'
+import * as lunDiskTable from '~/components/common/wizards/datastoreNew/add/sharedStorm/deviceSelection/table/lib/config/hostsTable'
+
+const props = defineProps<{
+  dataTable: UI_I_CreateStorageLunDiskItem[]
+  loading: boolean
+  totalItems: number
+  totalPages: number
+  pagination: UI_I_Pagination
+  isMainFilter?: boolean
+}>()
+const modelLunDisk = defineModel<UI_I_CreateStorageLunDiskItem[]>()
+const emits = defineEmits<{
+  (event: 'pagination', value: UI_I_Pagination): void
+  (event: 'sort', value: string): void
+  (event: 'main-filter', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const sorting = (e: [number, boolean]): void => {
+  const [column, status] = e
+  const direction = status ? 'desc' : 'asc'
+
+  const sort = `${column}.${direction}`
+
+  emits('sort', sort)
+}
+const sendFilter = useDebounceFn((searchText: string) => {
+  emits('main-filter', searchText)
+}, 1000)
+const onMainFiltering = (data: string): void => {
+  sendFilter(data)
+}
+
+const pagination = ref<UI_I_Pagination>({
+  page: 1,
+  pageSize: 1,
+})
+watch(
+  () => props.pagination,
+  (newValue) => {
+    pagination.value = newValue
+  },
+  { immediate: true }
+)
+watch(
+  pagination,
+  (newValue) => {
+    emits('pagination', newValue)
+  },
+  { deep: true, immediate: true }
+)
+
+const columnKeys = ref<UI_I_ColumnKey[]>(
+  lunDiskTable.columnKeys(localization.value)
+)
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  lunDiskTable.headItems(localization.value)
+)
+const bodyItems = computed<UI_I_BodyItem[][]>(() => {
+  let result: UI_I_BodyItem[][] = []
+  if (props.dataTable?.length) {
+    result = lunDiskTable.bodyItems(props.dataTable)
+  }
+
+  return result
+})
+
+const selectedLunDiskLocal = ref<number[]>()
+watch(
+  selectedLunDiskLocal,
+  (newValue: number[]) => {
+    modelLunDisk.value = props.dataTable.filter((_: any, key: number) =>
+      newValue.includes(key)
+    )
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+.data-table-view {
+  height: inherit;
+  overflow: hidden;
+  .data-table {
+    height: inherit;
+    :deep(.datagrid-outer-wrapper) {
+      height: 400px;
+    }
+  }
+}
+</style>

package/components/common/wizards/datastoreNew/add/sharedStorm/deviceSelection/table/lib/config/hostsTable.ts

@@ -0,0 +1,87 @@
+import {
+  UI_I_HeadItem,
+  UI_I_ColumnKey,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import { UI_I_Localization } from '~/lib/models/interfaces'
+import {
+  constructHeadItem,
+  constructColumnKey,
+} from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
+import { UI_I_CreateStorageLunDiskItem } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/models/interfaces'
+import { hostTableItemsKeys } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/hostTable/lib/config/tableKeys'
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  return [
+    [localization.common.name, true, '180px', hostTableItemsKeys[0]],
+    [localization.common.identifier, false, '96px', hostTableItemsKeys[1]],
+    [localization.common.lun, true, '96px', hostTableItemsKeys[2]],
+    [localization.common.capacity, true, '96px', hostTableItemsKeys[3]],
+    [localization.common.hardwareAcceleration, true, '96px', hostTableItemsKeys[4]],
+    [localization.common.driveType, true, '96px', hostTableItemsKeys[5]],
+    [localization.common.sectorFormat, true, '96px', hostTableItemsKeys[6]],
+  ]
+}
+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], false, item[2]))
+  })
+  return result
+}
+
+export const bodyItems = (data: UI_I_CreateStorageLunDiskItem[]): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+  const { $binary } = useNuxtApp() as any
+  data.forEach((host: UI_I_CreateStorageLunDiskItem, key) => {
+    bodyItems.push([
+      {
+        key: 'col0',
+        text: host[hostTableItemsKeys[0]],
+        id: key,
+      },
+      {
+        key: 'col1',
+        text: host[hostTableItemsKeys[1]],
+        id: key,
+      },
+      {
+        key: 'col2',
+        text: host[hostTableItemsKeys[2]],
+        id: key,
+      },
+      {
+        key: 'col3',
+        text: $binary.round(host[hostTableItemsKeys[3]]),
+        id: key,
+      },
+      {
+        key: 'col4',
+        text: host[hostTableItemsKeys[4]],
+        id: key,
+      },
+      {
+        key: 'col5',
+        text: host[hostTableItemsKeys[5]],
+        id: key,
+      },
+      {
+        key: 'col6',
+        text: host[hostTableItemsKeys[6]],
+        id: key,
+      },
+    ])
+  })
+  return bodyItems
+}

package/components/common/wizards/datastoreNew/add/sharedStorm/deviceSelection/table/lib/config/tableKeys.ts

@@ -0,0 +1,11 @@
+import { UI_T_HostTableItemsKey } from '~/components/common/wizards/datastoreNew/add/sharedStorm/deviceSelection/lib/models/types'
+
+export const hostTableItemsKeys: UI_T_HostTableItemsKey[] = [
+  'name',
+  'identifier',
+  'lun',
+  'capacity_mb',
+  'hardware_acceleration',
+  'drive_type',
+  'sector_format',
+]

package/components/common/wizards/datastoreNew/add/sharedStorm/partitionConfiguration/PartitionConfiguration.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="partition">
+    <div class="clr-form-control clr-row">
+      <label class="clr-col-md-4 clr-control-label">
+        {{ localization.partitionConfiguration }}
+      </label>
+
+      <div class="clr-col-md-8 p-0">
+        <div class="clr-select-wrapper">
+          <select
+            id="host-select"
+            v-model="selectedHost"
+            data-id="select-partition-configuration"
+            class="dropdown-toggle"
+            @change="onSelectHost"
+          >
+            <option
+              v-for="(item, index) in partitionConfiguration"
+              :key="index"
+              :value="item.value"
+              :disabled="item.disabled"
+            >
+              {{ item.text }}
+            </option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <div class="datastore-size-container clr-flex-row clr-flex">
+      <label class="clr-col-md-4 clr-control-label" for="datastore-size">
+        {{ localization.datastoreSize }}
+      </label>
+
+      <div class="datastore-size-slider-container clr-col-md-8 p-0">
+        <div class="clr-col-xl-6 clr-col-md-8 p-0">
+          <div
+            class="partition__range-input clr-control-container clr-col-md-10 clr-col-12"
+          >
+            <div class="clr-range-wrapper">
+              <input
+                id="datastore-size-input-0"
+                v-model="datastoreSize"
+                data-id="select-storm-storage-size-range-field"
+                type="range"
+                min="0"
+                :max="countDatastoreSizeToGb"
+                step="0.01"
+                class="ng-valid clr-range ng-dirty ng-touched"
+              />
+            </div>
+          </div>
+        </div>
+
+        <input
+          id="datastore-size-input-1"
+          v-model="datastoreSize"
+          data-id="select-storm-storage-size-input-field"
+          type="number"
+          min="0"
+          :max="countDatastoreSizeToGb"
+          step="0.01"
+          class="show-arrow"
+        />
+        <span>{{ localization.gb }}</span>
+      </div>
+    </div>
+
+    <template v-if="props.vmfsVersion === 'vmfs-6'">
+      <div class="clr-form-control clr-row">
+        <label class="clr-col-md-4 clr-control-label">
+          {{ localization.blockSize }}
+        </label>
+
+        <div>
+          <div class="clr-select-wrapper">
+            <select
+              id="storm-configuration-block-size"
+              v-model="selectedSize"
+              data-id="storm-configuration-block-size"
+              class="dropdown-toggle"
+              @change="onSelectHost"
+            >
+              <option
+                v-for="(item, index) in blockSize"
+                :key="index"
+                :value="item.value"
+                :disabled="item.disabled"
+              >
+                {{ item.text }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="clr-form-control clr-row">
+        <label class="clr-col-md-4 clr-control-label">
+          {{ localization.spaceReclamationGranularity }}
+        </label>
+
+        <div>
+          <div class="clr-select-wrapper">
+            <select
+              id="granularity-select"
+              v-model="selectedGranularity"
+              data-id="storm-configuration-space-granularity"
+              class="dropdown-toggle"
+              @change="onSelectHost"
+            >
+              <option
+                v-for="(item, index) in spaceGranularity"
+                :key="index"
+                :value="item.value"
+                :disabled="item.disabled"
+              >
+                {{ item.text }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="clr-form-control clr-row">
+        <label class="clr-col-md-4 clr-control-label">
+          {{ localization.spaceReclamationPriority }}
+        </label>
+
+        <div>
+          <div class="clr-select-wrapper">
+            <select
+              id="priority-select"
+              v-model="selectedPriority"
+              data-id="storm-configuration-space-priority"
+              class="dropdown-toggle"
+              @change="onSelectHost"
+            >
+              <option
+                v-for="(item, index) in spacePriority"
+                :key="index"
+                :value="item.value"
+                :disabled="item.disabled"
+              >
+                {{ item.text }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <common-wizards-datastore-add-shared-storm-partition-configuration-size-graphic
+      :selected-size="+datastoreSize"
+      :capacity="countDatastoreSizeToGb"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_Localization } from '~/lib/models/interfaces'
+import { UI_T_VmfsType } from '~/components/common/wizards/datastore/add/lib/models/types'
+import { UI_I_SelectHostOptions } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/models/interfaces'
+import {
+  partitionConfigurationFunc,
+  spacePriorityFunc,
+  spaceGranularityFunc,
+  blockSizeFunc,
+} from '~/components/common/wizards/datastore/add/sharedStorm/partitionConfiguration/lib/config/selectOptions'
+
+const props = withDefaults(
+  defineProps<{
+    vmfsVersion: UI_T_VmfsType
+    selectedLunDiskSize: number
+  }>(),
+  {
+    selectedLunDiskSize: 0,
+  }
+)
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $binary } = useNuxtApp()
+
+const selectedHost = ref<string>('all-partitions')
+const partitionConfiguration = computed<UI_I_SelectHostOptions[]>(() =>
+  partitionConfigurationFunc(localization.value)
+)
+
+const selectedSize = ref<string>('1')
+const blockSize = computed<UI_I_SelectHostOptions[]>(() =>
+  blockSizeFunc(localization.value)
+)
+
+const selectedGranularity = ref<string>('1')
+const spaceGranularity = computed<UI_I_SelectHostOptions[]>(() =>
+  spaceGranularityFunc(localization.value)
+)
+
+const selectedPriority = ref<string>('low')
+const spacePriority = computed<UI_I_SelectHostOptions[]>(() =>
+  spacePriorityFunc(localization.value)
+)
+
+const countDatastoreSizeToGb = computed<number>(() => {
+  return $binary.mbToGb(props.selectedLunDiskSize)
+})
+
+const datastoreSize = ref<number | null>(null)
+watch(
+  () => props.selectedLunDiskSize,
+  (_val) => {
+    datastoreSize.value = countDatastoreSizeToGb.value
+  }
+)
+
+const onSelectHost = (): void => {}
+</script>
+
+<style lang="scss" scoped>
+.partition {
+  .datastore-size-container {
+    display: flex;
+    margin-left: -1em;
+    margin-top: 1.2rem;
+    margin-bottom: 1.2rem;
+  }
+  .clr-form-control {
+    display: flex;
+    flex-direction: row;
+  }
+  &__range-input {
+    margin-left: -10px;
+  }
+}
+.datastore-size-slider-container {
+  display: flex;
+}
+</style>

package/components/common/wizards/datastoreNew/add/sharedStorm/partitionConfiguration/graphicTooltip/graphicTooltip.vue

@@ -0,0 +1,64 @@
+<template>
+  <g class="graphic-tooltip">
+    <path
+      fill="none"
+      class="highcharts-label-box highcharts-tooltip-box highcharts-shadow"
+      d="M 3.5 0.5 L 53.5 0.5 L 59.5 -5.5 L 65.5 0.5 L 118 0.5 C 121.5 0.5 121.5 0.5 121.5 3.5 L 121.5 27.5 C 121.5 30.5 121.5 30.5 118.5 30.5 L 3.5 30.5 C 0.5 30.5 0.5 30.5 0.5 27.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5"
+      stroke="#000000"
+      stroke-opacity="0.049999999999999996"
+      stroke-width="5"
+      transform="translate(1, 1)"
+    ></path>
+    <path
+      fill="none"
+      class="highcharts-label-box highcharts-tooltip-box highcharts-shadow"
+      d="M 3.5 0.5 L 53.5 0.5 L 59.5 -5.5 L 65.5 0.5 L 118 0.5 C 121.5 0.5 121.5 0.5 121.5 3.5 L 121.5 27.5 C 121.5 30.5 121.5 30.5 118.5 30.5 L 3.5 30.5 C 0.5 30.5 0.5 30.5 0.5 27.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5"
+      stroke="#000000"
+      stroke-opacity="0.09999999999999999"
+      stroke-width="3"
+      transform="translate(1, 1)"
+    ></path>
+    <path
+      fill="none"
+      class="highcharts-label-box highcharts-tooltip-box highcharts-shadow"
+      d="M 3.5 0.5 L 53.5 0.5 L 59.5 -5.5 L 65.5 0.5 L 118 0.5 C 121.5 0.5 121.5 0.5 121.5 3.5 L 121.5 27.5 C 121.5 30.5 121.5 30.5 118.5 30.5 L 3.5 30.5 C 0.5 30.5 0.5 30.5 0.5 27.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5"
+      stroke="#000000"
+      stroke-opacity="0.15"
+      stroke-width="1"
+      transform="translate(1, 1)"
+    ></path>
+    <path
+      fill="rgba(247,247,247,0.85)"
+      class="highcharts-label-box highcharts-tooltip-box"
+      d="M 3.5 0.5 L 53.5 0.5 L 59.5 -5.5 L 65.5 0.5 L 118 0.5 C 121.5 0.5 121.5 0.5 121.5 3.5 L 121.5 27.5 C 121.5 30.5 121.5 30.5 118.5 30.5 L 3.5 30.5 C 0.5 30.5 0.5 30.5 0.5 27.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5"
+      stroke="rgb(218, 218, 218)"
+      stroke-width="1"
+    ></path>
+    <text
+      x="9"
+      data-z-index="1"
+      y="20"
+      style="color: #333333; font-size: 12px; fill: #333333;"
+    >
+      {{ props.size }}
+    </text>
+  </g>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  size: string
+}>()
+</script>
+
+<style lang="scss" scoped>
+.graphic-tooltip {
+  cursor: default;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transform: translate(331, -9999);
+  z-index: 8;
+}
+</style>

package/components/common/wizards/datastoreNew/add/sharedStorm/partitionConfiguration/lib/config/selectOptions.ts

@@ -0,0 +1,46 @@
+import { UI_I_Localization } from '~/lib/models/interfaces'
+import { UI_I_SelectHostOptions } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/models/interfaces'
+
+export const partitionConfigurationFunc = (
+  localization: UI_I_Localization
+): UI_I_SelectHostOptions[] => {
+  return [
+    { text: localization.selectConfiguration, value: '', disabled: true },
+    { text: localization.useAllAvailablePartitions, value: 'all-partitions' },
+  ]
+}
+export const blockSizeFunc = (
+  localization: UI_I_Localization
+): UI_I_SelectHostOptions[] => {
+  return [
+    {
+      text: `1 ${localization.mb}`,
+      value: '1',
+    },
+  ]
+}
+
+export const spaceGranularityFunc = (
+  localization: UI_I_Localization
+): UI_I_SelectHostOptions[] => {
+  return [
+    {
+      text: `1 ${localization.mb}`,
+      value: '1',
+    },
+  ]
+}
+export const spacePriorityFunc = (
+  localization: UI_I_Localization
+): UI_I_SelectHostOptions[] => {
+  return [
+    {
+      text: localization.low,
+      value: 'low',
+    },
+    {
+      text: localization.none,
+      value: 'none',
+    },
+  ]
+}