bfg-common 1.5.75 → 1.5.76

package/components/common/wizards/datastore/add/New.vue

@@ -54,7 +54,7 @@
         <template #content>
           <common-wizards-datastore-add-steps-name-and-device
             v-if="selectedStep.id === dynamicSteps.nameAndDevice"
-            v-model="form"
+            v-model="formModelLocal"
             :project="props.project"
             :alert-messages="alertMessages[selectedStep.id]"
             :messages-fields="selectedStep.fields"
@@ -179,7 +179,6 @@ import type { UI_T_DatastoreTypeCode } from '~/components/common/wizards/datasto
 import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
 import type { UI_I_DetailsItem } from '~/components/common/details/lib/models/interfaces'
 import type { UI_I_CreateDatastoreHosts } from '~/components/common/wizards/datastore/add/nfs/accessibility/tablesView/lib/models/interfaces'
-import { E_DatastoreTypeKode } from '~/components/common/wizards/datastore/add/lib/models/enums'
 import { constructDataReadyViewFunc } from '~/components/common/wizards/datastore/add/readyComplete/lib/config/propertiesDetails'
 import { dynamicSteps } from '~/components/common/wizards/datastore/add/lib/config/steps'
 
@@ -198,7 +197,7 @@ const emits = defineEmits<{
   (event: 'change-steps', value: UI_I_WizardStep[]): void
   (event: 'hide-alert', value: number): void
   (event: 'hide'): void
-  (event: 'finish', value: any): void
+  (event: 'submit', value: any): void
   (event: 'main-filter', value: string): void
 }>()
 
@@ -231,9 +230,7 @@ const { height: height3 } = useElementSize(subTitleBlock3)
 const subTitleBlock4 = ref<HTMLElement | null>(null)
 const { height: height4 } = useElementSize(subTitleBlock4)
 
-// const datastoreType = ref<UI_T_DatastoreTypeCode>(
-//   props.project === 'procurator' ? 'local' : 'shared-storm'
-// )
+
 const datastoreType = ref<UI_T_DatastoreTypeCode>(2)
 const form = ref<UI_I_CreateDatastoreForm>({
   name: 'Datastore',
@@ -264,7 +261,7 @@ const onHideModal = (): void => {
   emits('hide')
 }
 const onFinish = (): void => {
-  emits('finish', form.value)
+  emits('submit')
 }
 </script>
 

package/components/common/wizards/datastore/add/Old.vue

@@ -20,7 +20,7 @@
 
         <common-wizards-datastore-add-steps-name-and-device
           v-if="selectedStep.id === dynamicSteps.nameAndDevice"
-          v-model="form"
+          v-model="formModelLocal"
           :project="props.project"
           :alert-messages="alertMessages[selectedStep.id]"
           :messages-fields="selectedStep.fields"
@@ -33,7 +33,7 @@
 
         <common-wizards-datastore-add-shared-storm
           v-show="datastoreType === 'shared-storm'"
-          v-model="form"
+          v-model="formModelLocal"
           :project="props.project"
           :step-id="selectedStep.id"
           :datastore-type="datastoreType"
@@ -48,7 +48,7 @@
 
         <common-wizards-datastore-add-nfs
           v-show="datastoreType === 'nfs'"
-          v-model="form"
+          v-model="formModelLocal"
           :project="props.project"
           :step-id="selectedStep.id"
           :alert-messages="alertMessages[selectedStep.id]"
@@ -92,34 +92,20 @@ const emits = defineEmits<{
   (event: 'change-steps', value: UI_I_WizardStep[]): void
   (event: 'hide-alert', value: number): void
   (event: 'hide'): void
-  (event: 'finish', value: any): void
+  (event: 'submit'): void
   (event: 'main-filter', value: string): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-// const datastoreType = ref<UI_T_DatastoreTypeCode>(
-//   props.project === 'procurator' ? 'local' : 'shared-storm'
-// )
 const datastoreType = ref<UI_T_DatastoreTypeCode>(2)
-const form = ref<UI_I_CreateDatastoreForm>({
-  name: 'Datastore',
-  lunDisk: [],
-  hosts: props.hostId ? [props?.hostId] : [],
-  type_code: 2,
-  nfsVersion: 'nfs-4.1',
-  readonly: false,
-  server: '',
-  folder: '',
-})
-
 const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> =>
   emits('change-steps', value)
 
 const dataReadyView = computed<UI_I_DetailsItem>(() =>
   constructDataReadyViewFunc(
     localization.value,
-    form.value,
+    formModelLocal.value,
     props.project,
     props.nfsHosts
   )
@@ -132,7 +118,7 @@ const onHideModal = (): void => {
   emits('hide')
 }
 const onFinish = (): void => {
-  emits('finish', form.value)
+  emits('submit')
 }
 </script>
 

package/components/common/wizards/datastore/add/lib/config/steps.ts

@@ -4,6 +4,7 @@ import type { UI_I_WizardStep } from '~/components/atoms/wizard/lib/models/inter
 import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/lib/models/enums'
 import type { UI_I_ChangeStepsSchemes } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
 import type { UI_T_DatastoreTypeCode } from '~/components/common/wizards/datastore/add/lib/models/types'
+
 export const dynamicSteps = {
   type: 0,
   nameAndDevice: 1,
@@ -59,18 +60,19 @@ export const stepsFunc = (
     testId: 'create-datastore-name-and-device-selection',
   },
 
-  {
-    id: 3,
-    title: localization.common.partitionConfiguration,
-    subTitle: localization.common.partitionConfigurationDesc,
-    status: UI_E_WIZARD_STATUS.INACTIVE,
-    fields: {},
-    isValid: true,
-    testId: 'create-datastore-partition-configuration',
-  },
+  // { // TODO Этот шаг использовался раньше, сейчас не используется
+  //   id: dynamicSteps.partitionConfiguration,
+  //   title: localization.common.partitionConfiguration,
+  //   subTitle: localization.common.partitionConfigurationDesc,
+  //   status: UI_E_WIZARD_STATUS.INACTIVE,
+  //   fields: {},
+  //   isValid: true,
+  //   testId: 'create-datastore-partition-configuration',
+  // },
 
   // {
-  //   id: 4,
+  // // TODO Этот шаг использовался раньше, сейчас не используется
+  //   id: dynamicSteps.nfsVersion,
   //   title: localization.common.nfsVersion,
   //   subTitle: localization.common.selectNfsVersion,
   //   status: UI_E_WIZARD_STATUS.INACTIVE,

package/components/common/wizards/datastore/add/lib/models/types.ts

@@ -1,7 +1,7 @@
 export type UI_T_DatastoreTypeCode = 2 | 4
 export type UI_T_NfsType = 'nfs-3' | 'nfs-4.1'
-export type UI_T_VmfsType = 'vmfs-6' | 'vmfs-5'
+export type UI_T_VmfsType = 'vmfs-6' | 'vmfs-5' // сейчас этот тип не используется
 export type UI_T_KerberosAuthentication =
   | 'dont-use'
   | 'use-only-krb5'
-  | 'use-integrity'
+  | 'use-integrity' // сейчас этот тип не используется

package/components/common/wizards/datastore/add/sharedStorm/SharedStorm.vue

@@ -14,12 +14,6 @@
       @hide-alert="(e) => emits('hide-alert', e)"
       @main-filter="emits('main-filter', $event)"
     />
-
-    <common-wizards-datastore-add-shared-storm-partition-configuration
-      v-show="props.project === 'procurator' && props.stepId === 3"
-      :vmfs-version="vmfsVersion"
-      :selected-lun-disk-size="lunDiskTotalCapacity"
-    />
   </div>
 </template>
 
@@ -57,14 +51,6 @@ const emits = defineEmits<{
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const vmfsVersion = ref<UI_T_VmfsType>('vmfs-6')
-
-const lunDiskTotalCapacity = computed<number>(() => {
-  if (!model.value.lunDisk.length) return 0
-
-  return +model.value.lunDisk
-    .map((disk: UI_I_CreateStorageLunDiskItem) => disk.capacity_mb)
-    .reduce((acc, cur) => acc + cur)
-})
 </script>
 
 <style lang="scss" scoped>

package/components/common/wizards/datastore/add/steps/_kerberosAuthentication/KerberosAuthentication.vue

@@ -1,4 +1,5 @@
 <template>
+  <!--  TODO: если использовать этот компонент, нужно отрефакторить весь код — сейчас всё по-старому  -->
   <div class="kerberos-auth">
     <atoms-alert
       v-show="isShowAlert"

package/components/common/wizards/datastore/add/steps/_local/Local.vue

@@ -1,6 +1,7 @@
 <template>
+  <!--  TODO: если использовать этот компонент, нужно отрефакторить весь код — сейчас всё по-старому  -->
   <div class="local-step">
-    <common-wizards-datastore-add-local-create-name
+    <common-wizards-datastore-add-steps-local-create-name
       v-if="isShowCreateLocalNameBlock"
       v-model="model.name"
       :alert-messages="props.alertMessages"

package/components/common/wizards/datastore/add/steps/_partitionConfiguration/PartitionConfiguration.vue

@@ -0,0 +1,245 @@
+<template>
+  <!--  TODO: если использовать этот компонент, нужно отрефакторить весь код — сейчас всё по-старому  -->
+  <div class="partition">
+    <div class="clr-form-control clr-row">
+      <label class="clr-col-md-4 clr-control-label">
+        {{ localization.common.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.common.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.common.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.common.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.common.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.common.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 => {}
+
+// const lunDiskTotalCapacity = computed<number>(() => { TODO: нужно будет сделать на родительском компоненте
+//   if (!model.value.lunDisk.length) return 0
+//
+//   return +model.value.lunDisk
+//       .map((disk: UI_I_CreateStorageLunDiskItem) => disk.capacity_mb)
+//       .reduce((acc, cur) => acc + cur)
+// })
+</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/steps/_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: var(--z-popover);
+}
+</style>

package/components/common/wizards/datastore/add/steps/_partitionConfiguration/lib/config/selectOptions.ts

@@ -0,0 +1,46 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { 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.common.selectConfiguration, value: '', disabled: true },
+    { text: localization.common.useAllAvailablePartitions, value: 'all-partitions' },
+  ]
+}
+export const blockSizeFunc = (
+  localization: UI_I_Localization
+): UI_I_SelectHostOptions[] => {
+  return [
+    {
+      text: `1 ${localization.common.mb}`,
+      value: '1',
+    },
+  ]
+}
+
+export const spaceGranularityFunc = (
+  localization: UI_I_Localization
+): UI_I_SelectHostOptions[] => {
+  return [
+    {
+      text: `1 ${localization.common.mb}`,
+      value: '1',
+    },
+  ]
+}
+export const spacePriorityFunc = (
+  localization: UI_I_Localization
+): UI_I_SelectHostOptions[] => {
+  return [
+    {
+      text: localization.common.low,
+      value: 'low',
+    },
+    {
+      text: localization.common.none,
+      value: 'none',
+    },
+  ]
+}

package/components/common/wizards/datastore/add/steps/_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 '~/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.common
+
+  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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.75",
+  "version": "1.5.76",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",