bfg-common 1.5.75 → 1.5.77

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

@@ -72,7 +72,7 @@ const alertMessages = computed<string[][]>(() => wizard.alertMessages.value)
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
-const title = computed<string>(() => localization.value.common.addHost)
+const title = computed<string>(() => localization.value.common.newDatastore)
 
 const form = ref<UI_I_CreateDatastoreForm>(
   useDeepCopy(datastoreDefaultFormFunc(props.hostId))

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

@@ -9,7 +9,7 @@
     test-id="add-datastore-wizard"
     @change-steps="onChangeSteps"
     @hide="onHideModal"
-    @submit="onFinish"
+    @submit="onCreateDatastore"
   >
     <template #content="{ selectedStep, isLoading }">
       <ui-wizard-block
@@ -54,9 +54,8 @@
         <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"
             :hosts="props.nfsHosts"
             :host-id="props.hostId"
@@ -66,20 +65,18 @@
       </ui-wizard-block>
 
       <ui-wizard-block
-        v-if="selectedStep.id === dynamicSteps.hostSummary"
+        v-if="selectedStep.id === dynamicSteps.nameAndConfigure"
         :sub-title-height="height2"
       >
         <template #subTitle>
           <div ref="subTitleBlock2">
             <div class="subtitle-block">
               <ui-alert
-                v-if="hostAssociated"
+                v-if="props.alertMessages[dynamicSteps.nameAndConfigure].length"
                 test-id="add-host-connection-settings-error-alert"
                 type="error"
                 size="md"
-                :messages="[
-                  localization.common.errorProcuratorHostAlreadyConnectedSphere,
-                ]"
+                :messages="props.alertMessages[dynamicSteps.nameAndConfigure]"
                 class="subtitle-block__alert"
               />
 
@@ -88,36 +85,29 @@
           </div>
         </template>
         <template #content>
-          <common-wizards-datastore-add-shared-storm
-            v-show="datastoreType === 'shared-storm'"
-            v-model="form"
+          <common-wizards-datastore-add-steps-name-and-configure
+            v-if="selectedStep.id === dynamicSteps.nameAndConfigure"
+            v-model="formModelLocal"
             :project="props.project"
-            :step-id="selectedStep.id"
-            :datastore-type="datastoreType"
-            :alert-messages="alertMessages[selectedStep.id]"
             :messages-fields="selectedStep.fields"
-            :hosts="props.nfsHosts"
-            :is-main-filter="props.isMainFilter"
-            :host-id="props.hostId"
-            @hide-alert="onHideAlert"
-            @main-filter="emits('main-filter', $event)"
+            @hide-alert="(e) => emits('hide-alert', e)"
           />
         </template>
       </ui-wizard-block>
 
       <ui-wizard-block
-        v-if="selectedStep.id === dynamicSteps.assignLicense"
+        v-if="selectedStep.id === dynamicSteps.hostAccessibility"
         :sub-title-height="height3"
       >
         <template #subTitle>
           <div ref="subTitleBlock3">
             <div class="subtitle-block">
               <ui-alert
-                v-if="props.alertMessages[dynamicSteps.assignLicense].length"
+                v-if="props.alertMessages[dynamicSteps.hostAccessibility].length"
                 test-id="add-host-assign-license-error-alert"
                 type="error"
                 size="md"
-                :messages="props.alertMessages[dynamicSteps.assignLicense]"
+                :messages="props.alertMessages[dynamicSteps.hostAccessibility]"
                 class="subtitle-block__alert"
               />
 
@@ -126,14 +116,12 @@
           </div>
         </template>
         <template #content>
-          <common-wizards-datastore-add-nfs
-            v-show="datastoreType === 'nfs'"
-            v-model="form"
-            :project="props.project"
-            :step-id="selectedStep.id"
-            :alert-messages="alertMessages[selectedStep.id]"
-            :messages-fields="selectedStep.fields"
+          <common-wizards-datastore-add-steps-host-accessibility
+            v-if="selectedStep.id === dynamicSteps.hostAccessibility"
+            v-model="formModelLocal.hosts"
+            :alert-messages="props.alertMessages[dynamicSteps.nameAndDevice]"
             :hosts="props.nfsHosts"
+            @hide-alert="(e) => emits('hide-alert', e)"
           />
         </template>
       </ui-wizard-block>
@@ -179,7 +167,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 +185,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 +218,6 @@ 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',
@@ -260,12 +244,8 @@ const dataReadyView = computed<UI_I_DetailsItem>(() =>
 const onHideAlert = (stepId: number): void => {
   emits('hide-alert', stepId)
 }
-const onHideModal = (): void => {
-  emits('hide')
-}
-const onFinish = (): void => {
-  emits('finish', form.value)
-}
+const onHideModal = (): void => emits('hide')
+const onCreateDatastore = (): void => emits('submit')
 </script>
 
 <style scoped lang="scss">

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

@@ -10,7 +10,7 @@
       test-id="add-datastore-wizard"
       @change-steps="onChangeSteps"
       @hide="onHideModal"
-      @submit="onFinish"
+      @submit="onCreateDatastore"
     >
       <template #modalBody="{ selectedStep }">
         <common-wizards-datastore-add-steps-type-mode
@@ -20,9 +20,9 @@
 
         <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]"
+          :alert-messages="props.alertMessages[dynamicSteps.nameAndDevice]"
           :messages-fields="selectedStep.fields"
           :hosts="props.nfsHosts"
           :host-id="props.hostId"
@@ -31,9 +31,27 @@
           @main-filter="emits('main-filter', $event)"
         />
 
+        <common-wizards-datastore-add-steps-name-and-configure
+          v-if="selectedStep.id === dynamicSteps.nameAndConfigure"
+          v-model="formModelLocal"
+          :project="props.project"
+          :alert-messages="props.alertMessages[dynamicSteps.nameAndConfigure]"
+          :messages-fields="selectedStep.fields"
+          @hide-alert="(e) => emits('hide-alert', e)"
+        />
+
+
+        <common-wizards-datastore-add-steps-host-accessibility
+          v-if="selectedStep.id === dynamicSteps.hostAccessibility"
+          v-model="formModelLocal.hosts"
+          :alert-messages="props.alertMessages[dynamicSteps.hostAccessibility]"
+          :hosts="props.nfsHosts"
+          @hide-alert="(e) => emits('hide-alert', e)"
+        />
+
         <common-wizards-datastore-add-shared-storm
-          v-show="datastoreType === 'shared-storm'"
-          v-model="form"
+          v-if="datastoreType === 'shared-storm'"
+          v-model="formModelLocal"
           :project="props.project"
           :step-id="selectedStep.id"
           :datastore-type="datastoreType"
@@ -47,8 +65,8 @@
         />
 
         <common-wizards-datastore-add-nfs
-          v-show="datastoreType === 'nfs'"
-          v-model="form"
+          v-if="datastoreType === 'nfs'"
+          v-model="formModelLocal"
           :project="props.project"
           :step-id="selectedStep.id"
           :alert-messages="alertMessages[selectedStep.id]"
@@ -92,34 +110,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
   )
@@ -128,12 +132,8 @@ const dataReadyView = computed<UI_I_DetailsItem>(() =>
 const onHideAlert = (stepId: number): void => {
   emits('hide-alert', stepId)
 }
-const onHideModal = (): void => {
-  emits('hide')
-}
-const onFinish = (): void => {
-  emits('finish', form.value)
-}
+const onHideModal = (): void => emits('hide')
+const onCreateDatastore = (): void => emits('submit')
 </script>
 
 <style scoped lang="scss">

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

@@ -4,11 +4,12 @@ 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,
-  hostSummary: 2,
-  assignLicense: 3,
+  nameAndConfigure: 2,
+  hostAccessibility: 3,
   lockdownMode: 4,
   vmLocation: 5,
   readyComplete: 6,
@@ -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,
@@ -79,7 +81,7 @@ export const stepsFunc = (
   //   testId: 'create-datastore-select-nfs-version',
   // },
   {
-    id: 4,
+    id: dynamicSteps.nameAndConfigure,
     title: localization.common.nameAndConfiguration,
     subTitle: localization.common.nameAndConfigurationDesc,
     status: UI_E_WIZARD_STATUS.INACTIVE,
@@ -102,7 +104,7 @@ export const stepsFunc = (
   },
 
   {
-    id: 5,
+    id: dynamicSteps.hostAccessibility,
     title: localization.common.hostsAccessibility,
     subTitle: localization.common.hostsAccessibilityDesc,
     status: UI_E_WIZARD_STATUS.INACTIVE,
@@ -136,17 +138,19 @@ export const stepsFunc = (
     fields: {},
     isValid: true,
     testId: 'create-datastore-ready-complete',
-    // testId: 'create-datastore-storm-ready-complete',
-    // testId: 'create-datastore-nfs-ready-complete',
-    // testId: 'create-datastore-local-ready-complete',
   },
 ]
 
 export const stepsSchemeInitial: number[][] = [
   [dynamicSteps.type, dynamicSteps.nameAndDevice, 11], // Procurator Scheme for "shared-storm" type
-  [dynamicSteps.type, 4, 11], // Procurator Scheme for "nfs" type
+  [dynamicSteps.type, dynamicSteps.nameAndConfigure, 11], // Procurator Scheme for "nfs" type
   [dynamicSteps.type, dynamicSteps.nameAndDevice, 11], // Sphere Scheme for "shared-storm" type
-  [dynamicSteps.type, 4, 5, 11], // Sphere Scheme for "nfs" type
+  [
+    dynamicSteps.type,
+    dynamicSteps.nameAndConfigure,
+    dynamicSteps.hostAccessibility,
+    11,
+  ], // Sphere Scheme for "nfs" type (not used from <host Context Menu>)
 ]
 
 export const getStepScheme = (

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/nfs/Nfs.vue

@@ -1,10 +1,5 @@
 <template>
   <div class="nfs-container">
-<!--    <common-wizards-datastore-add-nfs-version-->
-<!--      v-if="props.stepId === 4"-->
-<!--      v-model="model.nfsVersion"-->
-<!--    />-->
-
     <common-wizards-datastore-add-nfs-configuration
       v-show="props.stepId === 4"
       v-model="model"

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/{nfs/version/Version.vue → steps/_nfsVersion/NfsVersion.vue}

@@ -1,4 +1,5 @@
 <template>
+  <!--  TODO: если использовать этот компонент, нужно отрефакторить весь код — сейчас всё по-старому  -->
   <section class="nfs-version">
     <common-select-radio-group
       v-model="selectedNfsVersionLocal"

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>