bfg-common 1.0.75 → 1.0.77

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/components/common/wizards/datastore/add/sharedStorm/version/Version.vue

@@ -1,29 +1,15 @@
 <template>
   <section class="nfs-version">
-    <div
-      v-for="item in vmfsVersion"
-      :key="item.value"
-      class="nfs-version__inner radio"
-    >
-      <input
-        :id="item.label"
-        v-model="selectedVersion"
-        type="radio"
-        :value="item.value"
-        :disabled="item.disabled"
-      />
-      <label :for="item.label">
-        {{ item.label }}
-      </label>
-
-      <div class="nfs-version__desc">{{ item.desc }}</div>
-    </div>
+    <common-select-radio-group
+      v-model="selectedVersion"
+      :options="vmfsVersion"
+    />
   </section>
 </template>
 
 <script lang="ts" setup>
 import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_DatastoreTypeOption } from '~/components/common/select/radio/models/interfaces'
+import { UI_I_RadioOption } from '~/components/common/select/radio/models/interfaces'
 import { UI_T_VmfsType } from '~/components/common/wizards/datastore/add/models/types'
 import { vmfsVersionFunc } from '~/components/common/wizards/datastore/add/sharedStorm/version/config/versionOptions'
 
@@ -35,9 +21,7 @@ const emits = defineEmits<{
   (event: 'update:version', value: UI_T_VmfsType): void
 }>()
 
-const vmfsVersion = readonly<UI_I_DatastoreTypeOption[]>(
-  vmfsVersionFunc(localization.value)
-)
+const vmfsVersion = ref<UI_I_RadioOption[]>(vmfsVersionFunc(localization.value))
 
 const selectedVersion = computed<UI_T_VmfsType>({
   get() {
@@ -51,20 +35,5 @@ const selectedVersion = computed<UI_T_VmfsType>({
 
 <style lang="scss" scoped>
 .nfs-version {
-  &__desc {
-    margin-left: 22px;
-  }
-}
-.radio {
-  margin-bottom: 5px;
-  &:nth-child(2) {
-    margin-top: 10px;
-  }
-}
-.radio {
-}
-input[type='radio']:focus:checked + label::before,
-input[type='radio']:focus + label::before {
-  box-shadow: inset 0 0 0 0.25rem #0094d2;
 }
 </style>

package/components/common/wizards/datastore/add/sharedStorm/version/config/versionOptions.ts

@@ -1,19 +1,21 @@
 import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_DatastoreTypeOption } from '~/components/common/select/radio/models/interfaces'
+import { UI_I_RadioOption } from '~/components/common/select/radio/models/interfaces'
 
-export const vmfsVersionFunc = (localization: UI_I_Localization): UI_I_DatastoreTypeOption[] => {
+export const vmfsVersionFunc = (
+  localization: UI_I_Localization
+): UI_I_RadioOption[] => {
   return [
     {
       label: 'VMFS 6',
       value: 'vmfs-6',
       disabled: false,
-      desc: localization.vmfsVersionDesc1,
+      description: localization.vmfsVersionDesc1,
     },
     {
       label: 'VMFS 5',
       value: 'vmfs-5',
       disabled: false,
-      desc: localization.vmfsVersionDesc2,
+      description: localization.vmfsVersionDesc2,
     },
   ]
 }

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

@@ -22,54 +22,16 @@
       </div>
     </div>
 
-    <div
-      v-for="item in datastoreTypes"
-      :key="item.value"
-      class="datastore-types__inner radio"
-      :class="item.disabled && 'disabled'"
-    >
-      <div class="header-row">
-        <input
-          :id="item.label"
-          v-model="selectedType"
-          type="radio"
-          :value="item.value"
-          :disabled="item.disabled"
-        />
-        <label :for="item.label">
-          {{ item.label }}
-        </label>
-        <div
-          :id="`${item.value}-select-help-icon`"
-          class="signpost-container relative"
-        >
-          <atoms-the-icon
-            fill="#0072a3"
-            width="24px"
-            height="24px"
-            name="info-circle"
-            @click="item.isShowHelp = !item.isShowHelp"
-          />
-          <atoms-tooltip-signpost
-            v-if="item.isShowHelp"
-            :elem-id="`${item.value}-select-help-icon`"
-            @hide="item.isShowHelp = false"
-          >
-            <div class="help-desc-container">
-              <p class="help-desc">{{ item.helpDesc }}</p>
-            </div>
-          </atoms-tooltip-signpost>
-        </div>
-      </div>
-
-      <div class="datastore-types__desc">{{ item.desc }}</div>
-    </div>
+    <common-select-radio-group
+      v-model="selectedType"
+      :options="datastoreTypes"
+    />
   </section>
 </template>
 
 <script lang="ts" setup>
 import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_DatastoreTypeOption } from '~/components/common/select/radio/models/interfaces'
+import { UI_I_RadioOption } from '~/components/common/select/radio/models/interfaces'
 import { datastoreTypesFunc } from '~/components/common/wizards/datastore/add/types/config/typeOptions'
 
 const props = defineProps<{
@@ -80,7 +42,7 @@ const emits = defineEmits<{
 }>()
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const datastoreTypes = ref<UI_I_DatastoreTypeOption[]>(
+const datastoreTypes = ref<UI_I_RadioOption[]>(
   datastoreTypesFunc(localization.value)
 )
 
@@ -98,12 +60,6 @@ const isShowTypeHelp = ref<boolean>(false)
 
 <style lang="scss" scoped>
 .datastore-types {
-  &__subtitle {
-  }
-  &__desc {
-    margin-left: 22px;
-  }
-
   .signpost-container {
     display: flex;
     cursor: pointer;
@@ -118,20 +74,4 @@ const isShowTypeHelp = ref<boolean>(false)
     gap: 10px;
   }
 }
-
-.radio {
-  margin-bottom: 5px;
-  &:nth-child(2) {
-    margin-top: 10px;
-  }
-  &.disabled {
-    opacity: 0.7;
-  }
-}
-.radio {
-}
-input[type='radio']:focus:checked + label::before,
-input[type='radio']:focus + label::before {
-  box-shadow: inset 0 0 0 0.25rem #0094d2;
-}
 </style>