bfg-common 1.5.773 → 1.5.775

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

@@ -1,140 +0,0 @@
-<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/models/enums.ts

@@ -1,19 +0,0 @@
-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' = 'revertToSnapshot',
-  'delete' = 'deleteSnapshot',
-  'delete_all' = 'deleteAllSnapshots',
-  'group_delete_all' = 'deleteAllSnapshots',
-  'group_take' = '',
-}

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

@@ -1,30 +0,0 @@
-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/takeOrEdit/Old.vue

@@ -1,220 +0,0 @@
-<template>
-  <atoms-modal
-    :title="title"
-    :modal-loading="props.isLoading"
-    test-id="vm-take-edit-snapshot-modal"
-    width="576px"
-    show
-    @hide="onHide"
-    @submit="onSubmit"
-  >
-    <template #modalBody>
-      <div v-if="formLocal" class="form-block mt-1">
-        <div class="form-group flex justify-between mb-5">
-          <label for="snapshotName" class="label-form-group">
-            <span>{{ localization.common.name }}</span>
-          </label>
-
-          <div :class="['clr-control-container', isNameError && 'clr-error']">
-            <div class="flex-align-center">
-              <input
-                id="snapshotName"
-                v-model="formLocal.name"
-                data-id="snapshot-name-input"
-                class="clr-input input-form w-full"
-                type="text"
-                size="40"
-                maxlength="80"
-                autofocus
-                @input="onCheckNameValidation"
-              />
-            </div>
-            <div
-              v-if="isNameError"
-              class="clr-subtext"
-              data-id="snapshot-name-field-require"
-            >
-              {{ localization.common.fieldRequired }}
-            </div>
-          </div>
-        </div>
-        <div class="form-group flex justify-between mb-5">
-          <label for="snapshotDescription" class="label-form-group">
-            <span>{{ localization.common.description }}</span>
-          </label>
-          <textarea
-            id="snapshotDescription"
-            v-model="formLocal.description"
-            data-id="snapshot-description-textarea"
-            cols="80"
-            rows="4"
-            class="textarea-form"
-          />
-        </div>
-
-        <div v-if="props.type === 'take'">
-          <div class="flex-row first">
-            <div
-              :class="[
-                'clr-checkbox-wrapper checkbox-content flex-align-center w-100',
-                { disabled: props.isDisabledSaveVm },
-              ]"
-            >
-              <input
-                id="include-virtual-machines-memory"
-                v-model="isIncludeVirtualMachinesMemory"
-                :disabled="props.isDisabledSaveVm"
-                data-id="include-virtual-machines-memory-checkbox"
-                type="checkbox"
-                class="checkbox-btn"
-              />
-              <label
-                for="include-virtual-machines-memory"
-                class="clr-control-label"
-                >{{ localization.snapshots.saveVirtualMachineMemory }}</label
-              >
-            </div>
-          </div>
-
-          <div class="flex-row mb-1">
-            <div
-              class="clr-checkbox-wrapper checkbox-content disabled flex-align-center w-100"
-            >
-              <input
-                id="quiesce-guest-file-system-requires-vm-tools"
-                v-model="isQuiesceGuestFileSystemRequiresVMTools"
-                data-id="quiesce-guest-file-system-requires-vm-tools-checkbox"
-                type="checkbox"
-                class="checkbox-btn"
-                disabled
-              />
-              <label
-                for="quiesce-guest-file-system-requires-vm-tools"
-                class="clr-control-label"
-                >{{
-                  localization.common.quiesceGuestFileSystemRequiresVMTools
-                }}</label
-              >
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template #modalFooter>
-      <button
-        id="take-snapshot-modal-close-button"
-        data-id="take-snapshot-modal-close-button"
-        class="btn btn-outline"
-        @click="onHide"
-      >
-        {{ localization.common.cancel }}
-      </button>
-      <button
-        id="take-snapshot-modal-apply-button"
-        :disabled="isNameError"
-        data-id="take-snapshot-modal-apply-button"
-        class="btn btn-primary"
-        @click="onSubmit"
-      >
-        {{ applyButtonText }}
-      </button>
-    </template>
-  </atoms-modal>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_TakeOrEdit } from '~/components/common/vm/snapshots/lib/models/types'
-import type { UI_I_TakeEditSnapshot } from '~/components/common/vm/snapshots/lib/models/interfaces'
-
-const formLocal = defineModel<UI_I_TakeEditSnapshot>('formLocal', {
-  required: true,
-})
-const isIncludeVirtualMachinesMemory = defineModel<boolean>(
-  'isIncludeVmMemory',
-  { required: true }
-)
-const isQuiesceGuestFileSystemRequiresVMTools = defineModel<boolean>(
-  'isQuiesceGuestFileSystem',
-  { required: true }
-)
-
-const props = defineProps<{
-  type: UI_T_TakeOrEdit
-  isDisabledSaveVm: boolean
-  isLoading: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'submit'): void
-}>()
-
-const { $text }: any = useNuxtApp()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const title = computed<string>(() =>
-  props.type === 'take' || props.type === 'groupTake'
-    ? $text.toLowerCaseByIndex(localization.value.common.takeSnapshot, [1])
-    : localization.value.common.editSnapshot
-)
-const applyButtonText = computed<string>(() =>
-  props.type === 'take' || props.type === 'groupTake'
-    ? localization.value.common.create
-    : localization.value.common.edit
-)
-const isNameError = computed<boolean>(() => !formLocal.value.name.trim())
-
-const onCheckNameValidation = (): void => {
-  formLocal.value.name = formLocal.value.name.replace(/^\s+/, '')
-}
-
-const onHide = (): void => {
-  emits('hide')
-}
-const onSubmit = (): void => {
-  emits('submit')
-}
-</script>
-
-<style scoped lang="scss">
-.form-block {
-  padding-right: 10px;
-
-  .form-group {
-    .clr-control-container {
-      min-height: 48px;
-    }
-
-    .label-form-group {
-      width: 240px;
-    }
-
-    .textarea-form {
-      width: 309px;
-      box-shadow: none;
-    }
-
-    .clr-checkbox-wrapper.disabled {
-      .clr-control-label {
-        opacity: 0.3;
-      }
-    }
-  }
-
-  .flex-row.first {
-    margin-bottom: 10px;
-  }
-
-  .checkbox-content {
-    &.disabled {
-      opacity: 0.5;
-
-      label {
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-</style>

package/components/common/vm/snapshots/modals/takeOrEdit/TakeOrEdit.vue

@@ -1,51 +0,0 @@
-<template>
-  <component
-    :is="currentComponent"
-    v-model:form-local="formLocal"
-    v-model:is-include-vm-memory="isIncludeVmMemory"
-    v-model:is-quiesce-guest-file-system="isQuiesceGuestFileSystem"
-    :type="props.type"
-    :is-disabled-save-vm="isDisabledSaveVm"
-    :is-loading="isLoading"
-    @hide="emits('hide')"
-    @submit="emits('submit')"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_TakeEditSnapshot } from '~/components/common/vm/snapshots/lib/models/interfaces'
-import type { UI_T_TakeOrEdit } from '~/components/common/vm/snapshots/lib/models/types'
-
-const formLocal = defineModel<UI_I_TakeEditSnapshot>('formLocal', {
-  required: true,
-})
-const isIncludeVmMemory = defineModel<boolean>('isIncludeVmMemory', {
-  required: true,
-})
-const isQuiesceGuestFileSystem = defineModel<boolean>(
-  'isQuiesceGuestFileSystem',
-  { required: true }
-)
-
-const props = defineProps<{
-  type: UI_T_TakeOrEdit
-  isDisabledSaveVm: boolean
-  isLoading: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'submit'): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./new/New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
-</script>
-
-<style scoped lang="scss"></style>

package/components/common/vm/snapshots/modals/takeOrEdit/new/New.vue

@@ -1,184 +0,0 @@
-<template>
-  <ui-modal
-    :title="title"
-    :texts="modalTextsLocal"
-    :is-loading="props.isLoading"
-    width="560px"
-    test-id="vm-take-edit-snapshot-modal"
-    show
-    @hide="emits('hide')"
-    @submit="onSubmit"
-  >
-    <template #content>
-      <div
-        v-if="props.type === 'edit' && formLocal.snapshot_id === -1"
-        class="pt-3 px-8"
-      >
-        <ui-skeleton-item
-          width="100%"
-          height="36"
-          border-radius="8"
-          class="mb-6"
-        />
-        <ui-skeleton-item
-          width="100%"
-          height="84"
-          border-radius="8"
-          class="mb-6"
-        />
-      </div>
-
-      <div v-else class="pt-4 pb-2 px-8">
-        <div v-if="alertMessages?.length" class="mb-6">
-          <ui-alert
-            :messages="alertMessages"
-            test-id="vm-take-edit-snapshot-modal-error-alert"
-            type="error"
-            size="md"
-            hide-close-button
-            button
-          />
-        </div>
-
-        <ui-input
-          v-model="formLocal.name"
-          :label="localization.common.name"
-          :error="nameError"
-          test-id="vm-take-edit-snapshot-modal-name-input"
-          class="mb-6"
-          input-style="rounded"
-          size="md"
-          @change="onCheckNameValidation"
-        />
-        <ui-textarea
-          id="vm-take-edite-snapshot-modal-description"
-          v-model="formLocal.description"
-          :label="`${localization.common.description} (${localization.common.optional})`"
-          test-id="vm-take-edit-snapshot-modal-name-input"
-          height="84"
-          size="sm"
-          class="vm-take-edit-textarea"
-        />
-
-        <div v-if="props.type === 'take'" class="mt-6">
-          <ui-checkbox
-            v-model="isIncludeVirtualMachinesMemory"
-            :label-text="localization.snapshots.saveVirtualMachineMemory"
-            :disabled="props.isDisabledSaveVm"
-            class="mb-3 flex items-start bottom-checkbox"
-            test-id="vm-take-edit-snapshot-modal-save-memory-checkbox"
-            size="md"
-          />
-          <ui-checkbox
-            v-model="isQuiesceGuestFileSystemRequiresVMTools"
-            :label-text="
-              localization.common.quiesceGuestFileSystemRequiresVMTools
-            "
-            class="flex items-start bottom-checkbox"
-            test-id="vm-take-edit-snapshot-modal-quiesce-guest-file-system-checkbox"
-            size="md"
-            disabled
-          />
-        </div>
-      </div>
-    </template>
-    <template #footerLeftContent><span></span></template>
-  </ui-modal>
-</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_TakeEditSnapshot } from '~/components/common/vm/snapshots/lib/models/interfaces'
-import type { UI_T_TakeOrEdit } from '~/components/common/vm/snapshots/lib/models/types'
-import { modalTexts } from '~/components/common/vm/snapshots/modals/lib/config/modalTexts'
-import { getSnapshotsName } from '~/components/common/vm/snapshots/modals/takeOrEdit/new/lib/utils/getSnapshotsName'
-
-const formLocal = defineModel<UI_I_TakeEditSnapshot>('formLocal', {
-  required: true,
-})
-const isIncludeVirtualMachinesMemory = defineModel<boolean>(
-  'isIncludeVmMemory',
-  { required: true }
-)
-const isQuiesceGuestFileSystemRequiresVMTools = defineModel<boolean>(
-  'isQuiesceGuestFileSystem',
-  { required: true }
-)
-
-const props = defineProps<{
-  type: UI_T_TakeOrEdit
-  isDisabledSaveVm: boolean
-  isLoading: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'submit'): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const snapshots = computed<string[]>(() =>
-  getSnapshotsName($store.getters['vmSnapshots/getSnapshotsTree'])
-)
-
-const alertMessages = ref<string[]>([])
-
-const title = computed<string>(() => {
-  let titleType =
-    props.type === 'take'
-      ? localization.value.snapshots.newSnapshot
-      : localization.value.snapshots.editSnapshot
-
-  titleType = titleType.replace('snapshot', 'Snapshot')
-
-  return titleType
-})
-
-const onCheckNameValidation = (): void => {
-  formLocal.value.name = formLocal.value.name.replace(/^\s+/, '')
-}
-
-const nameError = ref<string>('')
-
-const modalTextsLocal = computed<UI_I_ModalTexts>(() =>
-  modalTexts(localization.value, props.type)
-)
-
-const onSubmit = (): void => {
-  const name = formLocal.value.name.trim()
-
-  if (!name) {
-    nameError.value = localization.value.common.fieldRequired
-    return
-  }
-  if (snapshots.value.includes(name)) {
-    alertMessages.value = [
-      localization.value.common.nameAlreadyExists.replace('{0}', name),
-    ]
-    nameError.value = ' '
-    return
-  }
-  emits('submit')
-}
-</script>
-
-<style scoped lang="scss">
-.vm-take-edit-textarea {
-  :deep(.ui-main .ui-main-textarea) {
-    line-height: 18px;
-    height: 72px !important;
-  }
-}
-.bottom-checkbox {
-  height: unset !important;
-
-  :deep(.ui-checkbox-label-text) {
-    line-height: 18px;
-    margin-top: 1px;
-  }
-}
-</style>

package/components/common/vm/snapshots/modals/takeOrEdit/new/lib/utils/getSnapshotsName.ts

@@ -1,15 +0,0 @@
-import type { UI_I_SnapshotsTreeNode } from '~/store/inventory/modules/snapshots/lib/models/interfaces'
-
-export const getSnapshotsName = (
-  snapshots: UI_I_SnapshotsTreeNode[],
-  result: string[] = []
-): string[] => {
-  for (let i = 0; i < snapshots.length; i++) {
-    result.push(snapshots[i].name)
-
-    if (snapshots[i].nodes.length) {
-      getSnapshotsName(snapshots[i].nodes, result)
-    }
-  }
-  return result
-}