bfg-common 1.0.67 → 1.0.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/components/common/wizards/datastore/add/types/Types.vue

@@ -1,8 +1,26 @@
 <template>
   <section class="datastore-types">
-    <span class="datastore-types__subtitle">
-      {{ localization.specifyDatastoreType }}
-    </span>
+    <div class="header-row">
+      <span class="datastore-types__subtitle">
+        {{ localization.specifyDatastoreType }}
+      </span>
+      <div id="type-select-help-icon" class="signpost-container relative">
+        <atoms-the-icon
+          fill="#0072a3"
+          width="24px"
+          height="24px"
+          name="info-circle"
+          @click="isShowTypeHelp = !isShowTypeHelp"
+        />
+        <atoms-tooltip-signpost
+          v-if="isShowTypeHelp"
+          elem-id="type-select-help-icon"
+          @hide="isShowTypeHelp = false"
+        >
+          <p class="help-desc">{{ localization.datastoreTypeHelpDesc }}</p>
+        </atoms-tooltip-signpost>
+      </div>
+    </div>
 
     <div
       v-for="item in datastoreTypes"
@@ -10,16 +28,39 @@
       class="datastore-types__inner radio"
       :class="item.disabled && 'disabled'"
     >
-      <input
-        :id="item.label"
-        v-model="selectedType"
-        type="radio"
-        :value="item.value"
-        :disabled="item.disabled"
-      />
-      <label :for="item.label">
-        {{ item.label }}
-      </label>
+      <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>
@@ -39,7 +80,7 @@ const emits = defineEmits<{
 }>()
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const datastoreTypes = readonly<UI_I_DatastoreTypeOption[]>(
+const datastoreTypes = ref<UI_I_DatastoreTypeOption[]>(
   datastoreTypesFunc(localization.value)
 )
 
@@ -51,6 +92,8 @@ const selectedType = computed<string>({
     emits('update:type', newValue)
   },
 })
+
+const isShowTypeHelp = ref<boolean>(false)
 </script>
 
 <style lang="scss" scoped>
@@ -60,7 +103,22 @@ const selectedType = computed<string>({
   &__desc {
     margin-left: 22px;
   }
+
+  .signpost-container {
+    display: flex;
+    cursor: pointer;
+
+    .help-desc-container {
+      max-width: 350px;
+    }
+  }
+  .header-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
 }
+
 .radio {
   margin-bottom: 5px;
   &:nth-child(2) {

package/components/common/wizards/datastore/add/types/config/typeOptions.ts

@@ -1,25 +1,33 @@
 import { UI_I_Localization } from '~/models/interfaces'
 import { UI_I_DatastoreTypeOption } from '~/components/common/select/radio/models/interfaces'
 
-export const datastoreTypesFunc = (localization: UI_I_Localization): UI_I_DatastoreTypeOption[] => {
+export const datastoreTypesFunc = (
+  localization: UI_I_Localization
+): UI_I_DatastoreTypeOption[] => {
   return [
     {
-      label: localization.local,
+      label: localization.localStorage,
       value: 'local',
       disabled: false,
       desc: localization.localDesc,
+      isShowHelp: false,
+      helpDesc: localization.localStorageHelpDesc,
     },
     {
-      label: localization.sharedStorm,
+      label: localization.stormSharedStorage,
       value: 'shared-storm',
       disabled: false,
       desc: localization.sharedStormDesc,
+      isShowHelp: false,
+      helpDesc: localization.stormSharedStorageHelpDesc,
     },
     {
       label: localization.nfs,
       value: 'nfs',
       disabled: false,
       desc: localization.nfsDesc,
+      isShowHelp: false,
+      helpDesc: localization.nfsHelpDesc,
     },
     // {
     //   label: localization.vVol,