bfg-common 1.5.731 → 1.5.733

package/components/common/backup/storage/actions/add/Old.vue

@@ -12,6 +12,16 @@
       @hide="onHideModal"
       @submit="onCreateDatastore"
     >
+      <template #description="{ selectedStep }">
+        <div class="add-datastore__wizard-description">
+          <h2>{{ selectedStep.subTitle }}</h2>
+
+          <common-backup-storage-actions-add-steps-type-mode-tooltip
+            v-if="selectedStep.id === dynamicSteps.type"
+          />
+        </div>
+      </template>
+
       <template #modalBody="{ selectedStep }">
         <common-backup-storage-actions-add-steps-type-mode
           v-if="selectedStep.id === dynamicSteps.type"
@@ -119,4 +129,15 @@ const onHideModal = (): void => emits('hide')
 const onCreateDatastore = (): void => emits('submit')
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.add-datastore {
+  &__wizard-description {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .storage-datatable {
+    margin-top: 5px;
+  }
+}
+</style>

package/components/common/backup/storage/actions/add/steps/typeMode/TypeModeOld.vue

@@ -1,31 +1,5 @@
 <template>
   <section class="datastore-types">
-    <div class="header-row">
-      <span class="datastore-types__subtitle">
-        {{ localization.common.specifyDatastoreType }}
-      </span>
-      <div id="type-select-help-icon" class="signpost-container relative">
-        <atoms-the-icon
-          data-id="toggle-type-select-help-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"
-          test-id="select-datastore-type"
-          @hide="isShowTypeHelp = false"
-        >
-          <p class="help-desc">
-            {{ localization.common.datastoreTypeHelpDesc }}
-          </p>
-        </atoms-tooltip-signpost>
-      </div>
-    </div>
-
     <common-select-radio-group
       v-model="datastoreTypeModeLocal"
       :options="props.options"
@@ -34,33 +8,12 @@
 </template>
 
 <script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
 
 const datastoreTypeModeLocal = defineModel<number>({ required: true })
 const props = defineProps<{
   options: UI_I_RadioOption[]
 }>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isShowTypeHelp = ref<boolean>(false)
 </script>
 
-<style lang="scss" scoped>
-.datastore-types {
-  .signpost-container {
-    display: flex;
-    cursor: pointer;
-
-    .help-desc-container {
-      max-width: 350px;
-    }
-  }
-  .header-row {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

package/components/common/backup/storage/actions/add/steps/typeMode/tooltip/Tooltip.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    id="type-select-help-icon"
+    class="signpost-container relative flex cursor-pointer"
+  >
+    <atoms-the-icon
+      data-id="toggle-type-select-help-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"
+      test-id="select-datastore-type"
+      @hide="isShowTypeHelp = false"
+    >
+      <p class="help-desc">
+        {{ localization.common.datastoreTypeHelpDesc }}
+      </p>
+    </atoms-tooltip-signpost>
+  </div>
+</template>
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowTypeHelp = ref<boolean>(false)
+</script>
+<style scoped lang="scss"></style>

package/components/common/pages/backups/modals/createBackup/configuration/backupWindow/BackupWindow.vue

@@ -1,29 +1,29 @@
-<template>
-  <atoms-stack-block
-      :has-children="false"
-      test-id="backup-window-stack-block"
-  >
-    <template #stackBlockKey>
-      <span>{{ localization.common.backupWindow }}</span>
-    </template>
-    <template #stackBlockContent>
-      <input
-        v-model="model.start_window_min"
-        data-id="hours-input"
-        type="number"
-        class="hrs"
-      />
-    </template>
-  </atoms-stack-block>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
-
-const model = defineModel<UI_I_CreateBackupForm>({ required: true })
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <atoms-stack-block
+      :has-children="false"
+      test-id="backup-window-stack-block"
+  >
+    <template #stackBlockKey>
+      <span>{{ localization.common.backupWindow }}</span>
+    </template>
+    <template #stackBlockContent>
+      <input
+        v-model="model.start_window_min"
+        data-id="hours-input"
+        type="number"
+        class="hrs"
+      />
+    </template>
+  </atoms-stack-block>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/MaxBandwidth.vue

@@ -1,69 +1,69 @@
-<template>
-  <atoms-stack-block
-      :has-children="false"
-      test-id="backup-max-bandwidth-stack-block"
-  >
-    <template #stackBlockKey>
-      <span>{{ localization.common.maxBandwidth }}</span>
-    </template>
-    <template #stackBlockContent>
-      <div class="flex-align-center">
-        <input
-          v-model="maxBindwidthLocal"
-          data-id="mbps-input"
-          type="number"
-          class="mbps"
-        />
-
-        <common-select-input
-          v-model="selectedType"
-          :data="maxBandwidthOptionsLocal"
-          test-id="backup-max-bandwidth-type"
-          class="ml-1"
-        />
-      </div>
-    </template>
-  </atoms-stack-block>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
-import type { UI_T_BandwidthOption } from '~/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/models/types'
-import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
-import { maxBandwidthOptions } from '~/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/config/options'
-
-const model = defineModel<UI_I_CreateBackupForm>({ required: true })
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const { $binary }: any = useNuxtApp()
-
-const maxBandwidthOptionsLocal =
-  ref<UI_I_SelectInputItem[]>(maxBandwidthOptions)
-
-const maxBindwidthLocal = computed<number>({
-  get() {
-    return selectedType.value === 1
-      ? $binary.bToGb(model.value.bandwidth_limit)
-      : $binary.bToMb(model.value.bandwidth_limit)
-  },
-  set(newValue: number) {
-    model.value.bandwidth_limit =
-      selectedType.value === 1
-        ? $binary.gbToB(newValue)
-        : $binary.mbToB(newValue)
-  },
-})
-
-const selectedType = ref<UI_T_BandwidthOption>(0)
-watch(selectedType, (newValue) => {
-  if (newValue === 1) model.value.bandwidth_limit *= 1_024
-  else model.value.bandwidth_limit /= 1_024
-})
-</script>
-
-<style lang="scss" scoped>
-#backup-transaction-logs {
-  margin: 4px 4px 0 0;
-}
-</style>
+<template>
+  <atoms-stack-block
+      :has-children="false"
+      test-id="backup-max-bandwidth-stack-block"
+  >
+    <template #stackBlockKey>
+      <span>{{ localization.common.maxBandwidth }}</span>
+    </template>
+    <template #stackBlockContent>
+      <div class="flex-align-center">
+        <input
+          v-model="maxBindwidthLocal"
+          data-id="mbps-input"
+          type="number"
+          class="mbps"
+        />
+
+        <common-select-input
+          v-model="selectedType"
+          :data="maxBandwidthOptionsLocal"
+          test-id="backup-max-bandwidth-type"
+          class="ml-1"
+        />
+      </div>
+    </template>
+  </atoms-stack-block>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_T_BandwidthOption } from '~/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/models/types'
+import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
+import { maxBandwidthOptions } from '~/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/config/options'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $binary }: any = useNuxtApp()
+
+const maxBandwidthOptionsLocal =
+  ref<UI_I_SelectInputItem[]>(maxBandwidthOptions)
+
+const maxBindwidthLocal = computed<number>({
+  get() {
+    return selectedType.value === 1
+      ? $binary.bToGb(model.value.bandwidth_limit)
+      : $binary.bToMb(model.value.bandwidth_limit)
+  },
+  set(newValue: number) {
+    model.value.bandwidth_limit =
+      selectedType.value === 1
+        ? $binary.gbToB(newValue)
+        : $binary.mbToB(newValue)
+  },
+})
+
+const selectedType = ref<UI_T_BandwidthOption>(0)
+watch(selectedType, (newValue) => {
+  if (newValue === 1) model.value.bandwidth_limit *= 1_024
+  else model.value.bandwidth_limit /= 1_024
+})
+</script>
+
+<style lang="scss" scoped>
+#backup-transaction-logs {
+  margin: 4px 4px 0 0;
+}
+</style>

package/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/config/options.ts

@@ -1,6 +1,6 @@
-import type {UI_I_SelectInputItem} from "~/components/common/select/input/lib/models/interfaces";
-
-export const maxBandwidthOptions: UI_I_SelectInputItem[] = [
-  { label: 'Mbps', value: 0 },
-  { label: 'Gbps', value: 1 },
-]
+import type {UI_I_SelectInputItem} from "~/components/common/select/input/lib/models/interfaces";
+
+export const maxBandwidthOptions: UI_I_SelectInputItem[] = [
+  { label: 'Mbps', value: 0 },
+  { label: 'Gbps', value: 1 },
+]

package/components/common/pages/backups/modals/createBackup/configuration/strategy/Strategy.vue

@@ -1,38 +1,38 @@
-<template>
-  <atoms-stack-block
-      :has-children="false"
-      test-id="backup-strategy-stack-block"
-  >
-    <template #stackBlockKey>
-      <span>{{ localization.common.strategy }}</span>
-    </template>
-    <template #stackBlockContent>
-      <common-select-input
-        v-model="model.strategy"
-        :data="strategyOptions"
-        test-id="backup-strategy"
-      />
-    </template>
-  </atoms-stack-block>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
-import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
-import { strategyOptionsFunc } from '~/components/common/pages/backups/modals/createBackup/lib/config/strategyOptions'
-
-const model = defineModel<UI_I_CreateBackupForm>({ required: true })
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const strategyOptions = ref<UI_I_SelectInputItem[]>(
-  strategyOptionsFunc(localization.value)
-)
-</script>
-
-<style lang="scss" scoped>
-#backup-transaction-logs {
-  margin: 4px 4px 0 0;
-}
-</style>
+<template>
+  <atoms-stack-block
+      :has-children="false"
+      test-id="backup-strategy-stack-block"
+  >
+    <template #stackBlockKey>
+      <span>{{ localization.common.strategy }}</span>
+    </template>
+    <template #stackBlockContent>
+      <common-select-input
+        v-model="model.strategy"
+        :data="strategyOptions"
+        test-id="backup-strategy"
+      />
+    </template>
+  </atoms-stack-block>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
+import { strategyOptionsFunc } from '~/components/common/pages/backups/modals/createBackup/lib/config/strategyOptions'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const strategyOptions = ref<UI_I_SelectInputItem[]>(
+  strategyOptionsFunc(localization.value)
+)
+</script>
+
+<style lang="scss" scoped>
+#backup-transaction-logs {
+  margin: 4px 4px 0 0;
+}
+</style>

package/components/common/pages/backups/modals/createBackup/lib/models/interfaces.ts

@@ -1,8 +1,8 @@
-export interface UI_I_DynamicSteps {
-  general: number
-  disks: number
-  datastores: number
-  configuration: number
-  readyComplete: number
-  schedulingOptions: number
-}
+export interface UI_I_DynamicSteps {
+  general: number
+  disks: number
+  datastores: number
+  configuration: number
+  readyComplete: number
+  schedulingOptions: number
+}

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

@@ -12,6 +12,16 @@
       @hide="onHideModal"
       @submit="onCreateDatastore"
     >
+      <template #description="{ selectedStep }">
+        <div class="add-datastore__wizard-description">
+          <h2>{{ selectedStep.subTitle }}</h2>
+
+          <common-wizards-datastore-add-steps-type-mode-tooltip
+            v-if="selectedStep.id === dynamicSteps.type"
+          />
+        </div>
+      </template>
+
       <template #modalBody="{ selectedStep }">
         <common-wizards-datastore-add-steps-type-mode
           v-if="selectedStep.id === dynamicSteps.type"
@@ -112,6 +122,12 @@ const onCreateDatastore = (): void => emits('submit')
     height: 100%;
     padding-left: 24px;
   }
+
+  .add-datastore__wizard-description {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
 }
 
 .finish-block {

package/components/common/wizards/datastore/add/steps/typeMode/TypeModeOld.vue

@@ -1,31 +1,5 @@
 <template>
   <section class="datastore-types">
-    <div class="header-row">
-      <span class="datastore-types__subtitle">
-        {{ localization.common.specifyDatastoreType }}
-      </span>
-      <div id="type-select-help-icon" class="signpost-container relative">
-        <atoms-the-icon
-          data-id="toggle-type-select-help-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"
-          test-id="select-datastore-type"
-          @hide="isShowTypeHelp = false"
-        >
-          <p class="help-desc">
-            {{ localization.common.datastoreTypeHelpDesc }}
-          </p>
-        </atoms-tooltip-signpost>
-      </div>
-    </div>
-
     <common-select-radio-group
       v-model="datastoreTypeModeLocal"
       :options="props.options"
@@ -35,7 +9,6 @@
 </template>
 
 <script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
 
 const datastoreTypeModeLocal = defineModel<number>({ required: true })
@@ -43,29 +16,9 @@ const props = defineProps<{
   options: UI_I_RadioOption[]
 }>()
 
-const localization = computed<UI_I_Localization>(() => useLocal())
-
 const onChangeType = (): void => {
   // model.value.name = 'Datastore' // default value is  'Datastore' every time
 }
-
-const isShowTypeHelp = ref<boolean>(false)
 </script>
 
-<style lang="scss" scoped>
-.datastore-types {
-  .signpost-container {
-    display: flex;
-    cursor: pointer;
-
-    .help-desc-container {
-      max-width: 350px;
-    }
-  }
-  .header-row {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

package/components/common/wizards/datastore/add/steps/typeMode/tooltip/Tooltip.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    id="type-select-help-icon"
+    class="signpost-container relative flex cursor-pointer"
+  >
+    <atoms-the-icon
+      data-id="toggle-type-select-help-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"
+      test-id="select-datastore-type"
+      @hide="isShowTypeHelp = false"
+    >
+      <p class="help-desc">
+        {{ localization.common.datastoreTypeHelpDesc }}
+      </p>
+    </atoms-tooltip-signpost>
+  </div>
+</template>
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowTypeHelp = ref<boolean>(false)
+</script>
+<style scoped lang="scss"></style>

package/package.json

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