bfg-common 1.5.741 → 1.5.743

package/components/common/vm/snapshots/lib/models/interfaces.ts

@@ -0,0 +1,5 @@
+export interface UI_I_TakeEditSnapshot {
+  snapshot_id: number
+  name: string
+  description: string
+}

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

@@ -34,7 +34,7 @@ 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'
+import { modalTexts } from '~/components/common/vm/snapshots/modals/lib/config/modalTexts'
 
 const suspendOnRevert = defineModel<boolean>('suspendOnRevert', {
   required: true,

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

@@ -0,0 +1,220 @@
+<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

@@ -0,0 +1,51 @@
+<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

@@ -0,0 +1,168 @@
+<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="form__input 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"
+        />
+
+        <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"
+            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"
+            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.common.takeSnapshot
+      : localization.value.common.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"></style>

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

@@ -0,0 +1,15 @@
+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
+}

package/package.json

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