bfg-common 1.0.0

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

@@ -0,0 +1,55 @@
+import { UI_I_Validation } from '~/models/plugins/validation/interfaces'
+import { UI_I_PaginationWithSort } from '~/models/interfaces'
+
+export interface UI_I_FormValidationDataStore {
+  name: UI_I_Validation
+}
+
+export interface UI_I_LunDiskSpherePayload extends UI_I_PaginationWithSort {
+  host: string
+}
+
+export interface UI_I_LunDisk {
+  name: string
+  capacity: string
+}
+export interface UI_I_DeviceSelectionSendData {
+  name: string
+  lunDisk?: UI_I_LunDisk[]
+  host?: 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: 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/datastore/add/sharedStorm/deviceSelection/models/types.ts

@@ -0,0 +1,14 @@
+export type UI_T_HostTableItemsKey =
+  | 'name'
+  | 'identifier'
+  | 'lun'
+  | 'amount'
+  | 'hardware_acceleration'
+  | 'driveType'
+  | 'sector_format'
+
+// export type Ui_T_HostSelectedType = 'host-1' | 'host-2' | 'host-3' | 'host-4' | 'host-5'
+
+
+
+

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

@@ -0,0 +1,230 @@
+<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"
+            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"
+                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"
+          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="datastore-size-select"
+              v-model="selectedSize"
+              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"
+              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"
+              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 '~/models/interfaces'
+import { UI_T_VmfsType } from '~/components/common/wizards/datastore/add/models/types'
+import { UI_I_SelectHostOptions } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/models/interfaces'
+import {
+  partitionConfigurationFunc,
+  spacePriorityFunc,
+  spaceGranularityFunc,
+  blockSizeFunc,
+} from '~/components/common/wizards/datastore/add/sharedStorm/partitionConfiguration/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('all-partitions')
+const partitionConfiguration = computed<UI_I_SelectHostOptions[]>(() =>
+  partitionConfigurationFunc(localization.value)
+)
+
+const selectedSize = ref('1')
+const blockSize = computed<UI_I_SelectHostOptions[]>(() =>
+  blockSizeFunc(localization.value)
+)
+
+const selectedGranularity = ref('1')
+const spaceGranularity = computed<UI_I_SelectHostOptions[]>(() =>
+  spaceGranularityFunc(localization.value)
+)
+
+const selectedPriority = ref('low')
+const spacePriority = computed<UI_I_SelectHostOptions[]>(() =>
+  spacePriorityFunc(localization.value)
+)
+
+const countDatastoreSizeToGb = computed(() => {
+  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/datastore/add/sharedStorm/partitionConfiguration/config/selectOptions.ts

@@ -0,0 +1,46 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_SelectHostOptions } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/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',
+    },
+  ]
+}

package/components/common/wizards/datastore/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/datastore/add/sharedStorm/partitionConfiguration/sizeGraphic/sizeGraphic.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="graphic-size">
+    <svg
+      class="graphic-size__svg"
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100"
+      viewBox="0 0 782 100"
+    >
+      <defs aria-hidden="true">
+        <clipPath id="highcharts-zdne8nn-42-">
+          <rect x="0" y="0" width="802" height="80" fill="none"></rect>
+        </clipPath>
+      </defs>
+      <rect
+        fill="#ffffff"
+        class="highcharts-background"
+        x="0"
+        y="0"
+        width="782"
+        height="100"
+        rx="0"
+        ry="0"
+        aria-hidden="true"
+      ></rect>
+      <rect
+        fill="none"
+        class="highcharts-plot-background"
+        x="-10"
+        y="10"
+        width="802"
+        height="80"
+        aria-hidden="true"
+      ></rect>
+      <rect
+        fill="none"
+        class="highcharts-plot-border"
+        data-z-index="1"
+        x="-10"
+        y="10"
+        width="802"
+        height="80"
+        aria-hidden="true"
+      ></rect>
+      <g class="highcharts-series-group" data-z-index="3" aria-hidden="false">
+        <g
+          class="highcharts-series highcharts-series-0 highcharts-area-series"
+          data-z-index="0.1"
+          opacity="1"
+          transform="translate(-10,10) scale(1 1)"
+          clip-path="url(#highcharts-zdne8nn-42-)"
+          aria-hidden="false"
+        >
+          <path
+            fill="rgb(218,218,218)"
+            d="M 7.8627450980392 80 L 7.8627450980392 0 L 401 0 L 794.13725490196 0 L 794.13725490196 80 L 794.13725490196 80 L 794.13725490196 80 L 401 80 L 7.8627450980392 80 L 7.8627450980392 80 Z"
+            class="highcharts-area"
+            data-z-index="0"
+            aria-hidden="true"
+          ></path>
+          <path
+            fill="none"
+            d="M 7.8627450980392 80 L 7.8627450980392 0 L 401 0 L 794.13725490196 0 L 794.13725490196 80"
+            class="highcharts-graph"
+            data-z-index="1"
+            stroke-linejoin="round"
+            stroke-linecap="round"
+            aria-hidden="false"
+            role="region"
+            tabindex="-1"
+            aria-label="Empty, series 1 of 1 with 5 data points."
+            style="outline: 0"
+          ></path>
+          <path
+            fill="none"
+            d="M 7.8627450980392 80 L 7.8627450980392 0 L 401 0 L 794.13725490196 0 L 794.13725490196 80"
+            visibility="visible"
+            data-z-index="2"
+            class="highcharts-tracker-line"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke="rgba(192,192,192,0.0001)"
+            stroke-width="20"
+            aria-hidden="true"
+          ></path>
+        </g>
+        <g
+          class="highcharts-markers highcharts-series-0 highcharts-area-series highcharts-tracker"
+          data-z-index="0.1"
+          opacity="1"
+          transform="translate(-10,10) scale(1 1)"
+          clip-path="none"
+          aria-hidden="true"
+        ></g>
+      </g>
+      <rect
+        x="0"
+        y="10"
+        width="782"
+        height="80"
+        fill="rgba(255,255,255,0)"
+        stroke="rgb(15,172,201)"
+        stroke-width="6"
+        data-z-index="3"
+        class="storage-partition-layout-selection-mask"
+      ></rect>
+      <rect
+        x="0"
+        y="10"
+        :width="setProgress"
+        height="80"
+        fill="rgba(15,172,201, 0.6)"
+        data-z-index="3"
+        class="storage-partition-layout-selection-mask"
+      ></rect>
+      <text
+        x="391"
+        text-anchor="middle"
+        class="highcharts-title"
+        data-z-index="4"
+        style="color: #333333; font-size: 18px; fill: #333333"
+        y="14"
+        aria-hidden="true"
+      ></text>
+      <text
+        x="391"
+        text-anchor="middle"
+        class="highcharts-subtitle"
+        data-z-index="4"
+        style="color: #666666; fill: #666666"
+        y="14"
+        aria-hidden="true"
+      ></text>
+      <text
+        x="0"
+        text-anchor="start"
+        class="highcharts-caption"
+        data-z-index="4"
+        style="color: #666666; fill: #666666"
+        y="112"
+        aria-hidden="true"
+      ></text>
+      <g
+        class="highcharts-data-labels highcharts-series-0 highcharts-area-series highcharts-tracker"
+        data-z-index="6"
+        opacity="1"
+        transform="translate(-10,10) scale(1 1)"
+        aria-hidden="true"
+      >
+        <g
+          class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined"
+          data-z-index="1"
+          style="cursor: default; pointer-events: none; white-space: nowrap"
+          transform="translate(354,26)"
+        >
+          <text
+            x="5"
+            data-z-index="1"
+            y="17"
+            style="
+              color: #333;
+              font-family: 'ProximaNova', 'Avenir Next', 'Helvetica Neue', Arial,
+                sans-serif, 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
+              font-size: 12px;
+              font-weight: bold;
+              fill: #333;
+            "
+          >
+            <tspan
+              class="highcharts-text-outline"
+              fill="#FFFFFF"
+              stroke="#FFFFFF"
+              stroke-width="2px"
+              stroke-linejoin="round"
+              style=""
+            >
+              {{ emptySizeText }}
+            </tspan>
+            <tspan x="5" y="17">{{ emptySizeText }}</tspan>
+          </text>
+        </g>
+      </g>
+
+      <common-wizards-datastore-add-shared-storm-partition-configuration-graphic-tooltip
+        :size="emptySizeText"
+      />
+    </svg>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_Localization } from '~/models/interfaces'
+
+const props = defineProps<{
+  selectedSize: number | null
+  capacity: number
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const width = ref<number>(782)
+
+const setProgress = computed<number>(() => {
+  if (!props.selectedSize) return 0
+  return (width.value * props.selectedSize) / props.capacity
+})
+
+const emptySizeText = computed(() => {
+  const { empty, gb } = localization.value
+
+  return `${empty}: ${props.capacity} ${gb}`
+})
+</script>
+
+<style lang="scss" scoped>
+.graphic-size {
+  margin-top: 24px;
+  &:hover {
+    .graphic-tooltip {
+      visibility: visible;
+      opacity: 1;
+      transform: translate(331px, 25px);
+    }
+  }
+}
+</style>