bfg-common 1.2.67 → 1.2.68

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

@@ -1,230 +1,230 @@
-<template>
-  <div class="partition">
-    <div class="clr-form-control clr-row">
-      <label class="clr-col-md-4 clr-control-label">
-        {{ localization.partitionConfiguration }}
-      </label>
-
-      <div class="clr-col-md-8 p-0">
-        <div class="clr-select-wrapper">
-          <select
-            id="host-select"
-            v-model="selectedHost"
-            class="dropdown-toggle"
-            @change="onSelectHost"
-          >
-            <option
-              v-for="(item, index) in partitionConfiguration"
-              :key="index"
-              :value="item.value"
-              :disabled="item.disabled"
-            >
-              {{ item.text }}
-            </option>
-          </select>
-        </div>
-      </div>
-    </div>
-
-    <div class="datastore-size-container clr-flex-row clr-flex">
-      <label class="clr-col-md-4 clr-control-label" for="datastore-size">
-        {{ localization.datastoreSize }}
-      </label>
-
-      <div class="datastore-size-slider-container clr-col-md-8 p-0">
-        <div class="clr-col-xl-6 clr-col-md-8 p-0">
-          <div
-            class="partition__range-input clr-control-container clr-col-md-10 clr-col-12"
-          >
-            <div class="clr-range-wrapper">
-              <input
-                id="datastore-size-input-0"
-                v-model="datastoreSize"
-                type="range"
-                min="0"
-                :max="countDatastoreSizeToGb"
-                step="0.01"
-                class="ng-valid clr-range ng-dirty ng-touched"
-              />
-            </div>
-          </div>
-        </div>
-
-        <input
-          id="datastore-size-input-1"
-          v-model="datastoreSize"
-          type="number"
-          min="0"
-          :max="countDatastoreSizeToGb"
-          step="0.01"
-          class="show-arrow"
-        />
-        <span>{{ localization.gb }}</span>
-      </div>
-    </div>
-
-    <template v-if="props.vmfsVersion === 'vmfs-6'">
-      <div class="clr-form-control clr-row">
-        <label class="clr-col-md-4 clr-control-label">
-          {{ localization.blockSize }}
-        </label>
-
-        <div>
-          <div class="clr-select-wrapper">
-            <select
-              id="datastore-size-select"
-              v-model="selectedSize"
-              class="dropdown-toggle"
-              @change="onSelectHost"
-            >
-              <option
-                v-for="(item, index) in blockSize"
-                :key="index"
-                :value="item.value"
-                :disabled="item.disabled"
-              >
-                {{ item.text }}
-              </option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-      <div class="clr-form-control clr-row">
-        <label class="clr-col-md-4 clr-control-label">{{
-          localization.spaceReclamationGranularity
-        }}</label>
-
-        <div>
-          <div class="clr-select-wrapper">
-            <select
-              id="granularity-select"
-              v-model="selectedGranularity"
-              class="dropdown-toggle"
-              @change="onSelectHost"
-            >
-              <option
-                v-for="(item, index) in spaceGranularity"
-                :key="index"
-                :value="item.value"
-                :disabled="item.disabled"
-              >
-                {{ item.text }}
-              </option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-      <div class="clr-form-control clr-row">
-        <label class="clr-col-md-4 clr-control-label">{{
-          localization.spaceReclamationPriority
-        }}</label>
-
-        <div>
-          <div class="clr-select-wrapper">
-            <select
-              id="priority-select"
-              v-model="selectedPriority"
-              class="dropdown-toggle"
-              @change="onSelectHost"
-            >
-              <option
-                v-for="(item, index) in spacePriority"
-                :key="index"
-                :value="item.value"
-                :disabled="item.disabled"
-              >
-                {{ item.text }}
-              </option>
-            </select>
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <common-wizards-datastore-add-shared-storm-partition-configuration-size-graphic
-      :selected-size="+datastoreSize"
-      :capacity="countDatastoreSizeToGb"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_T_VmfsType } from '~/components/common/wizards/datastore/add/models/types'
-import { UI_I_SelectHostOptions } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/models/interfaces'
-import {
-  partitionConfigurationFunc,
-  spacePriorityFunc,
-  spaceGranularityFunc,
-  blockSizeFunc,
-} from '~/components/common/wizards/datastore/add/sharedStorm/partitionConfiguration/config/selectOptions'
-
-const props = withDefaults(
-  defineProps<{
-    vmfsVersion: UI_T_VmfsType
-    selectedLunDiskSize: number
-  }>(),
-  {
-    selectedLunDiskSize: 0,
-  }
-)
-const localization = computed<UI_I_Localization>(() => useLocal())
-const { $binary } = useNuxtApp()
-
-const selectedHost = ref('all-partitions')
-const partitionConfiguration = computed<UI_I_SelectHostOptions[]>(() =>
-  partitionConfigurationFunc(localization.value)
-)
-
-const selectedSize = ref('1')
-const blockSize = computed<UI_I_SelectHostOptions[]>(() =>
-  blockSizeFunc(localization.value)
-)
-
-const selectedGranularity = ref('1')
-const spaceGranularity = computed<UI_I_SelectHostOptions[]>(() =>
-  spaceGranularityFunc(localization.value)
-)
-
-const selectedPriority = ref('low')
-const spacePriority = computed<UI_I_SelectHostOptions[]>(() =>
-  spacePriorityFunc(localization.value)
-)
-
-const countDatastoreSizeToGb = computed(() => {
-  return $binary.mbToGb(props.selectedLunDiskSize)
-})
-
-const datastoreSize = ref<number | null>(null)
-watch(
-  () => props.selectedLunDiskSize,
-  (_val) => {
-    datastoreSize.value = countDatastoreSizeToGb.value
-  }
-)
-
-const onSelectHost = (): void => {}
-</script>
-
-<style lang="scss" scoped>
-.partition {
-  .datastore-size-container {
-    display: flex;
-    margin-left: -1em;
-    margin-top: 1.2rem;
-    margin-bottom: 1.2rem;
-  }
-  .clr-form-control {
-    display: flex;
-    flex-direction: row;
-  }
-  &__range-input {
-    margin-left: -10px;
-  }
-}
-.datastore-size-slider-container {
-  display: flex;
-}
-</style>
+<template>
+  <div class="partition">
+    <div class="clr-form-control clr-row">
+      <label class="clr-col-md-4 clr-control-label">
+        {{ localization.partitionConfiguration }}
+      </label>
+
+      <div class="clr-col-md-8 p-0">
+        <div class="clr-select-wrapper">
+          <select
+            id="host-select"
+            v-model="selectedHost"
+            class="dropdown-toggle"
+            @change="onSelectHost"
+          >
+            <option
+              v-for="(item, index) in partitionConfiguration"
+              :key="index"
+              :value="item.value"
+              :disabled="item.disabled"
+            >
+              {{ item.text }}
+            </option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <div class="datastore-size-container clr-flex-row clr-flex">
+      <label class="clr-col-md-4 clr-control-label" for="datastore-size">
+        {{ localization.datastoreSize }}
+      </label>
+
+      <div class="datastore-size-slider-container clr-col-md-8 p-0">
+        <div class="clr-col-xl-6 clr-col-md-8 p-0">
+          <div
+            class="partition__range-input clr-control-container clr-col-md-10 clr-col-12"
+          >
+            <div class="clr-range-wrapper">
+              <input
+                id="datastore-size-input-0"
+                v-model="datastoreSize"
+                type="range"
+                min="0"
+                :max="countDatastoreSizeToGb"
+                step="0.01"
+                class="ng-valid clr-range ng-dirty ng-touched"
+              />
+            </div>
+          </div>
+        </div>
+
+        <input
+          id="datastore-size-input-1"
+          v-model="datastoreSize"
+          type="number"
+          min="0"
+          :max="countDatastoreSizeToGb"
+          step="0.01"
+          class="show-arrow"
+        />
+        <span>{{ localization.gb }}</span>
+      </div>
+    </div>
+
+    <template v-if="props.vmfsVersion === 'vmfs-6'">
+      <div class="clr-form-control clr-row">
+        <label class="clr-col-md-4 clr-control-label">
+          {{ localization.blockSize }}
+        </label>
+
+        <div>
+          <div class="clr-select-wrapper">
+            <select
+              id="datastore-size-select"
+              v-model="selectedSize"
+              class="dropdown-toggle"
+              @change="onSelectHost"
+            >
+              <option
+                v-for="(item, index) in blockSize"
+                :key="index"
+                :value="item.value"
+                :disabled="item.disabled"
+              >
+                {{ item.text }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="clr-form-control clr-row">
+        <label class="clr-col-md-4 clr-control-label">{{
+          localization.spaceReclamationGranularity
+        }}</label>
+
+        <div>
+          <div class="clr-select-wrapper">
+            <select
+              id="granularity-select"
+              v-model="selectedGranularity"
+              class="dropdown-toggle"
+              @change="onSelectHost"
+            >
+              <option
+                v-for="(item, index) in spaceGranularity"
+                :key="index"
+                :value="item.value"
+                :disabled="item.disabled"
+              >
+                {{ item.text }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="clr-form-control clr-row">
+        <label class="clr-col-md-4 clr-control-label">{{
+          localization.spaceReclamationPriority
+        }}</label>
+
+        <div>
+          <div class="clr-select-wrapper">
+            <select
+              id="priority-select"
+              v-model="selectedPriority"
+              class="dropdown-toggle"
+              @change="onSelectHost"
+            >
+              <option
+                v-for="(item, index) in spacePriority"
+                :key="index"
+                :value="item.value"
+                :disabled="item.disabled"
+              >
+                {{ item.text }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <common-wizards-datastore-add-shared-storm-partition-configuration-size-graphic
+      :selected-size="+datastoreSize"
+      :capacity="countDatastoreSizeToGb"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_T_VmfsType } from '~/components/common/wizards/datastore/add/models/types'
+import { UI_I_SelectHostOptions } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/models/interfaces'
+import {
+  partitionConfigurationFunc,
+  spacePriorityFunc,
+  spaceGranularityFunc,
+  blockSizeFunc,
+} from '~/components/common/wizards/datastore/add/sharedStorm/partitionConfiguration/config/selectOptions'
+
+const props = withDefaults(
+  defineProps<{
+    vmfsVersion: UI_T_VmfsType
+    selectedLunDiskSize: number
+  }>(),
+  {
+    selectedLunDiskSize: 0,
+  }
+)
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $binary } = useNuxtApp()
+
+const selectedHost = ref('all-partitions')
+const partitionConfiguration = computed<UI_I_SelectHostOptions[]>(() =>
+  partitionConfigurationFunc(localization.value)
+)
+
+const selectedSize = ref('1')
+const blockSize = computed<UI_I_SelectHostOptions[]>(() =>
+  blockSizeFunc(localization.value)
+)
+
+const selectedGranularity = ref('1')
+const spaceGranularity = computed<UI_I_SelectHostOptions[]>(() =>
+  spaceGranularityFunc(localization.value)
+)
+
+const selectedPriority = ref('low')
+const spacePriority = computed<UI_I_SelectHostOptions[]>(() =>
+  spacePriorityFunc(localization.value)
+)
+
+const countDatastoreSizeToGb = computed(() => {
+  return $binary.mbToGb(props.selectedLunDiskSize)
+})
+
+const datastoreSize = ref<number | null>(null)
+watch(
+  () => props.selectedLunDiskSize,
+  (_val) => {
+    datastoreSize.value = countDatastoreSizeToGb.value
+  }
+)
+
+const onSelectHost = (): void => {}
+</script>
+
+<style lang="scss" scoped>
+.partition {
+  .datastore-size-container {
+    display: flex;
+    margin-left: -1em;
+    margin-top: 1.2rem;
+    margin-bottom: 1.2rem;
+  }
+  .clr-form-control {
+    display: flex;
+    flex-direction: row;
+  }
+  &__range-input {
+    margin-left: -10px;
+  }
+}
+.datastore-size-slider-container {
+  display: flex;
+}
+</style>

package/composables/useLocal.ts

@@ -1,38 +1,38 @@
-import localRu from '~/assets/localization/local_ru.json'
-import localEn from '~/assets/localization/local_en.json'
-import localHy from '~/assets/localization/local_hy.json'
-import localZh from '~/assets/localization/local_zh.json'
-import localKk from '~/assets/localization/local_kk.json'
-import localBe from '~/assets/localization/local_be.json'
-const locals = {
-  localRu,
-  localEn,
-  localHy,
-  localZh,
-  localKk,
-  localBe,
-}
-export const useLocal = () => {
-  const config = useRuntimeConfig()
-
-  const code: string = config?.public?.LOCALIZATION_CODE?.toLowerCase() || 'ru'
-
-  document.getElementsByTagName('html')[0].setAttribute('lang', code)
-
-  switch (code) {
-    case 'ru':
-      return locals.localRu
-    case 'en':
-      return locals.localEn
-    case 'hy':
-      return locals.localHy
-    case 'zh':
-      return locals.localZh
-    case 'kk':
-      return locals.localKk
-    case 'be':
-      return locals.localBe
-    default:
-      return locals.localRu
-  }
-}
+import localRu from '~/assets/localization/local_ru.json'
+import localEn from '~/assets/localization/local_en.json'
+import localHy from '~/assets/localization/local_hy.json'
+import localZh from '~/assets/localization/local_zh.json'
+import localKk from '~/assets/localization/local_kk.json'
+import localBe from '~/assets/localization/local_be.json'
+const locals = {
+  localRu,
+  localEn,
+  localHy,
+  localZh,
+  localKk,
+  localBe,
+}
+export const useLocal = () => {
+  const config = useRuntimeConfig()
+
+  const code: string = config?.public?.LOCALIZATION_CODE?.toLowerCase() || 'ru'
+
+  document.getElementsByTagName('html')[0].setAttribute('lang', code)
+
+  switch (code) {
+    case 'ru':
+      return locals.localRu
+    case 'en':
+      return locals.localEn
+    case 'hy':
+      return locals.localHy
+    case 'zh':
+      return locals.localZh
+    case 'kk':
+      return locals.localKk
+    case 'be':
+      return locals.localBe
+    default:
+      return locals.localRu
+  }
+}