bfg-common 1.4.58 → 1.4.60

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

@@ -1,236 +0,0 @@
-<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

@@ -1,64 +0,0 @@
-<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

@@ -1,46 +0,0 @@
-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',
-    },
-  ]
-}

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

@@ -1,225 +0,0 @@
-<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 '~/lib/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<string>(() => {
-  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>

package/components/common/wizards/datastoreNew/add/types/Types.vue

@@ -1,83 +0,0 @@
-<template>
-  <section class="datastore-types">
-    <div class="header-row">
-      <span class="datastore-types__subtitle">
-        {{ localization.common.specifyDatastoreType }}
-      </span>
-      <div id="type-select-help-icon" class="signpost-container relative">
-        <atoms-the-icon
-          data-id="toggle-type-select-help-icon"
-          fill="#0072a3"
-          width="24px"
-          height="24px"
-          name="info-circle"
-          @click="isShowTypeHelp = !isShowTypeHelp"
-        />
-        <atoms-tooltip-signpost
-          v-if="isShowTypeHelp"
-          elem-id="type-select-help-icon"
-          test-id="select-datastore-type"
-          @hide="isShowTypeHelp = false"
-        >
-          <p class="help-desc">
-            {{ localization.common.datastoreTypeHelpDesc }}
-          </p>
-        </atoms-tooltip-signpost>
-      </div>
-    </div>
-
-    <common-select-radio-group
-      v-model="selectedDatastoreTypeLocal"
-      :options="datastoreTypes"
-      @change="onChangeType"
-    />
-  </section>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
-import type { UI_T_DatastoreType } from '~/components/common/wizards/datastore/add/lib/models/types'
-import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastoreNew/add/lib/models/interfaces'
-import { E_DatastoreTypeKode } from '~/components/common/wizards/datastoreNew/add/lib/models/enums'
-import { datastoreTypesFunc } from '~/components/common/wizards/datastoreNew/add/types/lib/config/typeOptions'
-
-const props = defineProps<{
-  project: UI_T_Project
-}>()
-const selectedDatastoreTypeLocal =
-  defineModel<UI_T_DatastoreType>('datastoreType')
-const model = defineModel<UI_I_CreateDatastoreForm>({ required: true })
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const datastoreTypes = ref<UI_I_RadioOption[]>(
-  datastoreTypesFunc(localization.value)
-)
-const onChangeType = (): void => {
-  model.value.type_code = E_DatastoreTypeKode[selectedDatastoreTypeLocal.value]
-
-  model.value.name = 'Datastore' // default value is  'Datastore' every time
-}
-
-const isShowTypeHelp = ref<boolean>(false)
-</script>
-
-<style lang="scss" scoped>
-.datastore-types {
-  .signpost-container {
-    display: flex;
-    cursor: pointer;
-
-    .help-desc-container {
-      max-width: 350px;
-    }
-  }
-  .header-row {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-}
-</style>

package/components/common/wizards/datastoreNew/add/types/lib/config/typeOptions.ts

@@ -1,41 +0,0 @@
-import { UI_I_Localization } from '~/lib/models/interfaces'
-import { UI_T_Project } from '~/lib/models/types'
-import { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
-
-export const datastoreTypesFunc = (
-  localization: UI_I_Localization,
-  _project?: UI_T_Project
-): UI_I_RadioOption[] => {
-  return [
-    {
-      label: localization.common.stormSharedStorage,
-      value: 'shared-storm',
-      disabled: false,
-      description: localization.common.sharedStormDesc,
-      isTooltip: false,
-      tooltipContent: localization.common.stormSharedStorageHelpDesc,
-      testId: 'datastore-type-shared-storm',
-    },
-    {
-      label: localization.common.nfs,
-      value: 'nfs',
-      disabled: false,
-      description: localization.common.nfsDesc,
-      isTooltip: false,
-      tooltipContent: localization.common.nfsHelpDesc,
-      testId: 'datastore-type-nfs',
-    },
-  ]
-
-  // if (project === 'procurator') {
-  //   types.unshift({
-  //     label: localization.common.localStorage,
-  //     value: 'local',
-  //     disabled: false,
-  //     description: localization.common.localDesc,
-  //     isTooltip: false,
-  //     tooltipContent: localization.common.localStorageHelpDesc,
-  //     testId: 'datastore-type-local',
-  //   })
-  // }
-}