bfg-common 1.5.88 → 1.5.90

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

@@ -47,7 +47,6 @@ import {
   dynamicSteps,
 } from '~/components/common/wizards/datastore/add/lib/config/steps'
 import { datastoreDefaultFormFunc } from '~/components/common/wizards/datastore/add/lib/config/createDatastore'
-import { constructDataReadyViewFunc } from '~/components/common/wizards/datastore/add/steps/readyComplete/lib/config/propertiesDetails'
 import * as validation from '~/components/common/wizards/datastore/add/lib/validations'
 
 const props = defineProps<{
@@ -200,16 +199,6 @@ watch(
   { immediate: true }
 )
 
-const dataReadyView = computed<UI_I_DetailsItem>(() =>
-  constructDataReadyViewFunc(
-    localization.value,
-    form.value,
-    props.project,
-    props.nfsHosts
-  )
-)
-console.log(dataReadyView)
-
 const onHideAlert = (stepId: number): void => {
   wizard.hideAlertMessagesByStepId(stepId)
 }
@@ -219,13 +208,6 @@ const onHideModal = (): void => {
 const onCreateDatastore = (): void => {
   emits('finish', form.value)
 }
-// watch(
-//   () => props.isLoading,
-//   (newValue) => {
-//     wizard.setLoader(newValue)
-//   },
-//   { immediate: true }
-// )
 </script>
 
 <style scoped lang="scss">

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

@@ -146,7 +146,9 @@
         <template #content>
           <common-wizards-datastore-add-steps-ready-complete
             v-if="selectedStep.id === dynamicSteps.readyComplete"
-            :data-ready-view="dataReadyView"
+            :form="formModelLocal"
+            :hosts="props.nfsHosts"
+            :project="props.project"
           />
         </template>
       </ui-wizard-block>

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

@@ -28,7 +28,7 @@
           :host-id="props.hostId"
           :is-main-filter="props.isMainFilter"
           @hide-alert="(e) => emits('hide-alert', e)"
-          @main-filter="emits('main-filter', $event)"
+          @main-filter="(e) => emits('main-filter', e)"
         />
 
         <common-wizards-datastore-add-steps-name-and-configure
@@ -50,7 +50,9 @@
 
         <common-wizards-datastore-add-steps-ready-complete
           v-if="selectedStep.id === dynamicSteps.readyComplete"
-          :data-ready-view="dataReadyView"
+          :form="formModelLocal"
+          :hosts="props.nfsHosts"
+          :project="props.project"
         />
 
         <common-wizards-datastore-add-shared-storm
@@ -81,7 +83,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_CompatibleHosts } from '~/components/common/wizards/datastore/add/steps/hostAccessibility/table/lib/models/interfaces'
-import { constructDataReadyViewFunc } from '~/components/common/wizards/datastore/add/steps/readyComplete/lib/config/propertiesDetails'
 import { dynamicSteps } from '~/components/common/wizards/datastore/add/lib/config/steps'
 
 const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
@@ -109,15 +110,6 @@ const datastoreType = ref<UI_T_DatastoreTypeCode>(2)
 const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> =>
   emits('change-steps', value)
 
-const dataReadyView = computed<UI_I_DetailsItem>(() =>
-  constructDataReadyViewFunc(
-    localization.value,
-    formModelLocal.value,
-    props.project,
-    props.nfsHosts
-  )
-)
-
 const onHideAlert = (stepId: number): void => {
   emits('hide-alert', stepId)
 }

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

@@ -1,11 +1,14 @@
-import type { UI_T_NfsType } from '~/components/common/wizards/datastore/add/lib/models/types'
+import type {
+  UI_T_NfsType,
+  UI_T_DatastoreTypeCode,
+} from '~/components/common/wizards/datastore/add/lib/models/types'
 import type { UI_I_CreateStorageLunDiskItem } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/models/interfaces'
-import type { UI_T_DatastoreTypeCode } from '~/components/common/wizards/datastore/add/lib/models/types'
+
 export interface UI_I_CreateDatastoreForm {
   name: string
   lunDisk: UI_I_CreateStorageLunDiskItem[]
   nfsVersion: UI_T_NfsType
-  type_code: 1 | 2 | 4
+  type_code: UI_T_DatastoreTypeCode
   readonly: boolean
   server: string
   folder: string

package/components/common/wizards/datastore/add/{sharedStorm/_version → steps/_vmfsVersion}/Version.vue

@@ -1,4 +1,5 @@
 <template>
+  <!--  TODO: если использовать этот компонент, нужно отрефакторить весь код — сейчас всё по-старому  -->
   <section class="nfs-version">
     <common-select-radio-group
       v-model="selectedVersionLocal"
@@ -11,7 +12,7 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
 import type { UI_T_VmfsType } from '~/components/common/wizards/datastore/add/lib/models/types'
-import { vmfsVersionFunc } from '~/components/common/wizards/datastore/add/sharedStorm/version/lib/config/versionOptions'
+import { vmfsVersionFunc } from '~/components/common/wizards/datastore/add/steps/vmfsVersion/lib/config/versionOptions'
 
 const props = defineProps<{
   version: UI_T_VmfsType

package/components/common/wizards/datastore/add/steps/readyComplete/ReadyComplete.vue

@@ -1,21 +1,27 @@
 <template>
   <common-wizards-datastore-add-steps-ready-complete-new
     v-if="isNewView"
-    :data-ready-view="props.dataReadyView"
+    :data-ready-view="dataReadyView"
   />
 
   <common-wizards-datastore-add-steps-ready-complete-old
     v-else
-    :data-ready-view="props.dataReadyView"
+    :data-ready-view="dataReadyView"
   />
 </template>
 
 <script lang="ts" setup>
-import { UI_I_DetailsItem } from '~/components/common/details/lib/models/interfaces'
-import { UI_I_Localization } from '~/lib/models/interfaces'
+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_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_CompatibleHosts } from '~/components/common/wizards/datastore/add/steps/hostAccessibility/table/lib/models/interfaces'
+import { constructDataReadyViewFunc } from '~/components/common/wizards/datastore/add/steps/readyComplete/lib/config/propertiesDetails'
 
 const props = defineProps<{
-  dataReadyView: UI_I_DetailsItem[]
+  form: UI_I_CreateDatastoreForm
+  hosts: UI_I_CompatibleHosts
+  project: UI_T_Project
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -23,6 +29,15 @@ const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const dataReadyView = computed<UI_I_DetailsItem>(() =>
+  constructDataReadyViewFunc(
+    localization.value,
+    props.form,
+    props.project,
+    props.hosts
+  )
+)
+
 const properties = computed<UI_I_DetailsItem[]>(() => props.dataReadyView)
 </script>
 

package/package.json

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

package/components/common/wizards/datastore/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.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 => {}
-</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/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: var(--z-popover);
-}
-</style>

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

@@ -1,46 +0,0 @@
-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/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.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>