bfg-common 1.5.735 → 1.5.736

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/vm/snapshots/lib/models/types.ts

@@ -6,3 +6,6 @@ export type UI_T_SnapshotActionType =
   | 'delete_all'
   | 'group_take'
   | 'group_delete_all'
+
+export type UI_T_TakeOrEdit = 'take' | 'edit' | 'groupTake'
+

package/components/common/vm/snapshots/modals/confirm/Confirm.vue

@@ -0,0 +1,48 @@
+<template>
+  <component
+    :is="currentComponent"
+    v-model:suspend-on-revert="suspendOnRevert"
+    :type="props.type"
+    :snapshot="props.snapshot"
+    :snapshots-count="props.snapshotsCount"
+    :vm-state="props.vmState"
+    @hide="emits('hide')"
+    @submit="emits('submit', suspendOnRevert)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_SnapshotsTreeNode } from '~/store/inventory/modules/snapshots/lib/models/interfaces'
+import type { UI_T_SnapshotActionType } from '~/components/common/vm/snapshots/lib/models/types'
+
+const props = withDefaults(
+  defineProps<{
+    type: UI_T_SnapshotActionType
+    snapshot: UI_I_SnapshotsTreeNode | null
+    snapshotsCount: number
+    targets: string[]
+    vmState?: number | null
+  }>(),
+  {
+    vmState: null,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit', value: boolean): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
+const suspendOnRevert = ref<boolean>(false)
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/vm/snapshots/modals/confirm/New.vue

@@ -0,0 +1,113 @@
+<template>
+  <common-modals-confirmation
+    :headline="title"
+    :description="descriptionText"
+    :modal-texts="modalTextsLocal"
+    :loading="false"
+    :icon-name="modalIcon"
+    test-id="vm-snapshots-modal"
+    is-new-view
+    @hide-modal="emits('hide')"
+    @confirm="emits('submit')"
+  >
+    <template v-if="props.type === 'revert'" #otherContent>
+      <div class="confirm-modal-checkbox-content mt-4 p-3">
+        <ui-checkbox
+          v-model="suspendOnRevert"
+          :label-text="
+            localization.common
+              .suspendThisVirtualMachineWhenRevertingToSelectedSnapshot
+          "
+          :disabled="props.vmState === 2"
+          test-id="vm-snapshots-modal-revert-checkbox"
+          class="confirm-modal-checkbox flex items-start"
+          size="md"
+        />
+      </div>
+    </template>
+  </common-modals-confirmation>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SnapshotsTreeNode } from '~/store/inventory/modules/snapshots/lib/models/interfaces'
+import type { UI_T_SnapshotActionType } from '~/components/common/vm/snapshots/lib/models/types'
+import { UI_E_TitleModal } from '~/components/common/vm/snapshots/modals/confirm/lib/models/enums'
+import { modalTexts } from '~/components/common/vm/snapshots/modals/confirm/lib/config/modalTexts'
+
+const suspendOnRevert = defineModel<boolean>('suspendOnRevert', {
+  required: true,
+})
+const props = defineProps<{
+  type: UI_T_SnapshotActionType
+  snapshot: UI_I_SnapshotsTreeNode | null
+  snapshotsCount: number
+  vmState: number | null
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const modalTextsLocal = computed<UI_I_ModalTexts>(() =>
+  modalTexts(localization.value, props.type)
+)
+
+const title = computed<string>(() =>
+  props.snapshotsCount === 1 && props.type === 'delete'
+    ? localization.value.snapshots.deleteTheLastSnapshot
+    : localization.value.snapshots[UI_E_TitleModal[props.type]] || ''
+)
+
+const modalIcon = computed<string>(() =>
+  props.type === 'delete_all' ||
+  (props.snapshotsCount === 1 && props.type === 'delete')
+    ? 'circle-warning'
+    : 'info-status'
+)
+
+const descriptionText = computed<string>(() => {
+  let description: string
+
+  switch (props.type) {
+    case 'delete_all':
+      description = localization.value.snapshots.deleteAllSnapshotsDescription
+      break
+
+    case 'revert':
+      description =
+        localization.value.snapshots.revertToSnapshotDescription.replace(
+          '{0}',
+          props.snapshot?.name || ''
+        )
+      break
+
+    default:
+      description =
+        props.snapshotsCount === 1
+          ? localization.value.snapshots.deleteLastSnapshotsDescription
+          : localization.value.snapshots.deleteSnapshotConfirmationDescription.replace(
+              '{0}',
+              props.snapshot?.name || ''
+            )
+      break
+  }
+
+  return description
+})
+</script>
+
+<style scoped lang="scss">
+.confirm-modal-checkbox-content {
+  background-color: #e9ebed66;
+  border-radius: 8px;
+
+  .confirm-modal-checkbox {
+    height: max-content;
+  }
+}
+</style>

package/components/common/vm/snapshots/modals/confirm/Old.vue

@@ -0,0 +1,140 @@
+<template>
+  <atoms-modal
+    :title="title"
+    test-id="vm-snapshots-modal"
+    width="576px"
+    show
+    @hide="onHide"
+    @submit="onConfirm"
+  >
+    <template #modalBody>
+      <div v-if="props.type === 'revert'">
+        <p class="description-text" data-id="description-revert-content">
+          {{ descriptionRevertContent }}
+        </p>
+        <div class="flex-row mt-1">
+          <div
+            :class="[
+              'clr-checkbox-wrapper flex-align-center w-100',
+              { disabled: props.vmState === 2 },
+            ]"
+          >
+            <input
+              id="suspend-on-revert"
+              v-model="suspendOnRevert"
+              :disabled="props.vmState === 2"
+              data-id="suspend-on-revert-checkbox"
+              type="checkbox"
+              class="checkbox-btn"
+            />
+            <label for="suspend-on-revert" class="clr-control-label">{{
+              localization.common
+                .suspendThisVirtualMachineWhenRevertingToSelectedSnapshot
+            }}</label>
+          </div>
+        </div>
+      </div>
+      <div v-else-if="props.type === 'delete'">
+        <p class="description-text" data-id="description-delete-content">
+          {{ descriptionDeleteContent }}
+        </p>
+      </div>
+      <div v-else-if="props.type === 'delete_all'">
+        <p class="description-text" data-id="delete-all-snapshots-description">
+          {{ localization.snapshots.deleteAllSnapshotsDescription }}
+        </p>
+      </div>
+    </template>
+    <template #modalFooter>
+      <button
+        id="snapshot-confirm-modal-close-button"
+        data-id="snapshot-confirm-modal-close-button"
+        class="btn btn-outline"
+        @click="onHide"
+      >
+        {{ localization.common.cancel }}
+      </button>
+      <button
+        id="snapshot-confirm-modal-apply-button"
+        data-id="snapshot-confirm-modal-apply-button"
+        class="btn btn-danger"
+        @click="onConfirm"
+      >
+        {{ titleConfirmButton }}
+      </button>
+    </template>
+  </atoms-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SnapshotsTreeNode } from '~/store/inventory/modules/snapshots/lib/models/interfaces'
+import type { UI_T_SnapshotActionType } from '~/components/common/vm/snapshots/lib/models/types'
+import {
+  UI_E_TitleConfirmModal,
+  UI_E_TitleModal,
+} from '~/components/common/vm/snapshots/modals/confirm/lib/models/enums'
+
+const suspendOnRevert = defineModel<boolean>('suspendOnRevert', {
+  required: true,
+})
+const props = defineProps<{
+  type: UI_T_SnapshotActionType
+  snapshot: UI_I_SnapshotsTreeNode | null
+  snapshotsCount: number
+  vmState: number | null
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const title = computed<string>(() =>
+  props.snapshotsCount === 1 && props.type === 'delete'
+    ? localization.value.snapshots.deleteTheLastSnapshot
+    : localization.value.snapshots[UI_E_TitleModal[props.type]] || ''
+)
+
+const titleConfirmButton = computed<string>(
+  () => localization.value.common[UI_E_TitleConfirmModal[props.type]] || ''
+)
+
+const descriptionRevertContent = computed<string>(() =>
+  localization.value.snapshots.revertToSnapshotDescription.replace(
+    '{0}',
+    props.snapshot?.name || ''
+  )
+)
+
+const descriptionDeleteContent = computed<string>(() =>
+  props.snapshotsCount === 1
+    ? localization.value.snapshots.deleteLastSnapshotsDescription
+    : localization.value.snapshots.deleteSnapshotConfirmationDescription.replace(
+        '{0}',
+        props.snapshot?.name || ''
+      )
+)
+
+const onHide = (): void => {
+  emits('hide')
+}
+const onConfirm = (): void => {
+  emits('submit')
+}
+</script>
+
+<style scoped lang="scss">
+.description-text {
+  font-size: 14px;
+}
+
+.clr-checkbox-wrapper.disabled {
+  .clr-control-label {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+}
+</style>

package/components/common/vm/snapshots/modals/confirm/lib/config/modalTexts.ts

@@ -0,0 +1,30 @@
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_T_SnapshotActionType,
+  UI_T_TakeOrEdit,
+} from '~/components/common/vm/snapshots/lib/models/types'
+
+export const modalTexts = (
+  localization: UI_I_Localization,
+  type: UI_T_SnapshotActionType | UI_T_TakeOrEdit
+): UI_I_ModalTexts => {
+  const actionTextMap: Record<
+    UI_T_SnapshotActionType | UI_T_TakeOrEdit,
+    string
+  > = {
+    take: localization.common.create,
+    group_take: localization.common.create,
+    groupTake: localization.common.create,
+    edit: localization.common.save,
+    revert: localization.common.revert,
+    delete: localization.common.delete,
+    delete_all: localization.common.deleteAll,
+    group_delete_all: localization.common.deleteAll,
+  }
+
+  return {
+    button1: localization.common.cancel,
+    button2: actionTextMap[type],
+  }
+}

package/components/common/vm/snapshots/modals/confirm/lib/models/enums.ts

@@ -0,0 +1,19 @@
+export enum UI_E_TitleConfirmModal {
+  'take' = '',
+  'edit' = 'edit',
+  'revert' = 'revert',
+  'delete' = 'delete',
+  'delete_all' = 'deleteAll',
+  'group_delete_all' = 'deleteAll',
+  'group_take' = '',
+}
+
+export enum UI_E_TitleModal {
+  'take' = '',
+  'edit' = '',
+  'revert' = 'revertToSnapshotConfirmation',
+  'delete' = 'deleteSnapshotConfirmation',
+  'delete_all' = 'deleteAllSnapshots',
+  'group_delete_all' = 'deleteAllSnapshots',
+  'group_take' = '',
+}

package/package.json

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