bfg-common 1.5.774 → 1.5.775

package/components/common/vm/snapshots/new/Skeleton.vue

@@ -1,136 +0,0 @@
-<template>
-  <div class="skeleton-page grid gap-3 p-4 h-inherit overflow-hidden">
-    <div class="left-content grid p-4">
-      <div class="flex justify-between gap-4 flex-wrap">
-        <ui-skeleton-item width="80" height="20" />
-        <ui-skeleton-item width="160" height="36" />
-      </div>
-      <div class="border-block flex flex-col py-3 px-4 my-4">
-        <ui-skeleton-item width="100%" height="20" />
-        <ui-skeleton-item width="50%" height="20" />
-        <ui-skeleton-item width="30%" height="20" />
-        <ui-skeleton-item width="70%" height="20" />
-        <ui-skeleton-item width="20%" height="20" />
-        <ui-skeleton-item width="50%" height="20" />
-        <ui-skeleton-item width="80%" height="20" />
-        <ui-skeleton-item width="70%" height="20" />
-        <ui-skeleton-item width="20%" height="20" />
-      </div>
-      <ui-skeleton-item width="96" height="20" class="ml-auto" />
-    </div>
-    <div class="right-content grid p-4">
-      <div class="flex justify-between gap-4 pr-4 flex-wrap top-container">
-        <ui-skeleton-item width="80" height="20" />
-        <div class="actions-block flex">
-          <ui-skeleton-item width="20" height="20" />
-          <div class="line-border"></div>
-          <ui-skeleton-item width="20" height="20" />
-          <div class="line-border"></div>
-          <ui-skeleton-item width="20" height="20" />
-        </div>
-      </div>
-      <div
-        ref="detailsScrollBlock"
-        :class="[
-          'details-block flex flex-col my-6',
-          { 'has-scroll': hasScroll },
-        ]"
-      >
-        <div
-          v-for="index in detailsItemsCount"
-          :key="index"
-          class="details-block-item flex p-3"
-        >
-          <ui-skeleton-item width="20" height="20" class="mr-[10px]" />
-          <ui-skeleton-item width="144" height="20" />
-          <ui-skeleton-item width="144" height="20" class="ml-auto" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useTemplateRef } from 'vue'
-import { useElementSize } from '@vueuse/core'
-
-const detailsItemsCount = ref<number>(6)
-
-const detailsElement = useTemplateRef<HTMLDivElement>('detailsScrollBlock')
-const { height } = useElementSize(detailsElement)
-
-const hasScroll = computed<boolean>(
-  () =>
-    height.value &&
-    detailsElement.value?.scrollHeight > detailsElement.value?.clientHeight
-)
-</script>
-
-<style>
-:root {
-  --snapshots-left-skeleton-border-color: #e9ebed;
-  --snapshots-right-skeleton-action-line-border-color: #e9ebeda3;
-  --snapshots-right-skeleton-item-bg-color: #e9ebed66;
-}
-:root.dark-theme {
-  --snapshots-left-skeleton-border-color: #e9ebed1f;
-  --snapshots-right-skeleton-action-line-border-color: #e9ebed1f;
-  --snapshots-right-skeleton-item-bg-color: #e9ebed0f;
-}
-</style>
-
-<style scoped lang="scss">
-.skeleton-page {
-  grid-template-columns: repeat(2, calc(50% - 6px));
-
-  .left-content,
-  .right-content {
-    background-color: var(--snapshots-page-inner-block-bg);
-    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.0784313725);
-    border-radius: 8px;
-    grid-template-rows: max-content 1fr max-content;
-    overflow: hidden;
-  }
-  .border-block {
-    border: 1px solid var(--snapshots-left-skeleton-border-color);
-    border-radius: 8px;
-    grid-row-gap: 10px;
-    overflow: auto;
-
-    :deep(.skeleton-item) {
-      min-height: 20px;
-    }
-  }
-  .right-content {
-    padding-right: 0;
-
-    .top-container {
-      .actions-block {
-        grid-column-gap: 10px;
-
-        .line-border {
-          border: 1px solid
-            var(--snapshots-right-skeleton-action-line-border-color);
-        }
-      }
-    }
-    .details-block {
-      grid-row-gap: 10px;
-      overflow: auto;
-
-      &:not(.has-scroll) {
-        padding-right: 16px;
-      }
-
-      .details-block-item {
-        background-color: var(--snapshots-right-skeleton-item-bg-color);
-        border-radius: 6px;
-      }
-
-      :deep(.skeleton-item) {
-        min-height: 20px;
-      }
-    }
-  }
-}
-</style>

package/components/common/vm/snapshots/new/contextMenuView/ContextMenuView.vue

@@ -1,103 +0,0 @@
-<template>
-  <div class="snapshot-context-menu-view">
-    <common-context
-      :action-loading="null"
-      :context-menu="contextMenu"
-      @select-item="onSelectContextMenuItem"
-      @hide="onHideContextMenu"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_ContextMenu,
-  UI_I_ContextMenuItem,
-} from '~/components/common/context/lib/models/interfaces'
-import type { UI_I_ContextData } from '~/components/common/vm/snapshots/new/lib/models/interfaces'
-import type { UI_T_SnapshotActionType } from '~/components/common/vm/snapshots/lib/models/types'
-import { contextMenuItemsFunc } from '~/components/common/vm/snapshots/new/contextMenuView/lib/config/contextMenuItems'
-
-const props = defineProps<{
-  contextData: UI_I_ContextData
-  show: number
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-action', value: UI_T_SnapshotActionType): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const contextMenu = ref<UI_I_ContextMenu<'snapshot'>>({
-  x: -9999,
-  y: -9999,
-  id: '',
-  type: 'snapshot',
-  titleText: '',
-  titleIconClassName: '',
-  items: contextMenuItemsFunc(localization.value),
-})
-
-const showContextMenu = (data: UI_I_ContextData): void => {
-  const event = data.event
-  const node = data.node
-
-  if (!event || !node) return
-
-  event.preventDefault()
-
-  contextMenu.value.x = event.clientX
-  contextMenu.value.y = event.clientY
-  contextMenu.value.id = '' + node.id
-  contextMenu.value.type = node.type
-  contextMenu.value.titleText = node.name
-  contextMenu.value.titleIconClassName = node.iconClassName
-  contextMenu.value.items = contextMenuItemsFunc(localization.value)
-}
-
-watch(
-  () => props.show,
-  () => {
-    showContextMenu(props.contextData)
-  }
-)
-
-const onHideContextMenu = (): void => {
-  contextMenu.value.x = -9999
-  contextMenu.value.y = -9999
-}
-
-const onSelectContextMenuItem = (item: UI_I_ContextMenuItem): void => {
-  emits('select-action', item.actionType)
-}
-</script>
-
-<style scoped lang="scss">
-.snapshot-context-menu-view {
-  :deep(.context-wrap) {
-    min-width: 112px;
-
-    .menu-item {
-      .context-icon {
-        display: none;
-      }
-
-      .item-ui-icon {
-        margin-right: 8px;
-        width: 16px;
-        height: 16px;
-      }
-
-      &:last-child {
-        color: #ea3223;
-
-        .context-link:hover {
-          color: #ea3223;
-        }
-      }
-    }
-  }
-}
-</style>

package/components/common/vm/snapshots/new/contextMenuView/lib/config/contextMenuItems.ts

@@ -1,34 +0,0 @@
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_ContextMenuItem } from '~/components/common/context/lib/models/interfaces'
-
-export const contextMenuItemsFunc = (
-  localization: UI_I_Localization
-): UI_I_ContextMenuItem[] => [
-  {
-    key: useUniqueId(),
-    name: localization.common.revert,
-    actionType: 'revert',
-    iconClassName: '',
-    iconName: 'revert',
-    testId: 'revert-snapshot-vm',
-    items: [],
-  },
-  {
-    key: useUniqueId(),
-    name: localization.common.edit,
-    actionType: 'edit',
-    iconClassName: '',
-    iconName: 'edit',
-    testId: 'edit-snapshot-vm',
-    items: [],
-  },
-  {
-    key: useUniqueId(),
-    name: localization.common.delete,
-    actionType: 'delete',
-    iconClassName: '',
-    iconName: 'delete',
-    testId: 'delete-snapshot-vm',
-    items: [],
-  },
-]

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

@@ -1,12 +0,0 @@
-import type { UI_I_SnapshotsDetails } from '~/store/inventory/modules/snapshots/lib/models/interfaces'
-
-export interface UI_I_ContextData {
-  event: null | MouseEvent
-  node: null | UI_I_SnapshotsDetails
-}
-
-export interface UI_I_Context {
-  contextMenuShow: Ref<number>
-  contextMenu: Ref<UI_I_ContextData>
-  showContextMenu: any
-}

package/components/common/vm/snapshots/new/lib/utils/contextMenu.ts

@@ -1,29 +0,0 @@
-import type {
-  UI_I_ContextData,
-  UI_I_Context,
-} from '~/components/common/vm/snapshots/new/lib/models/interfaces'
-
-const contextMenuShow = ref<number>(0)
-
-const contextMenu = ref<UI_I_ContextData>({
-  event: null,
-  node: null,
-})
-
-export function getContextMenu(): UI_I_Context {
-  const showContextMenu = (data: UI_I_ContextData | null): void => {
-    if (!data) return
-
-    data.event?.preventDefault()
-
-    contextMenu.value.event = data.event
-    contextMenu.value.node = data.node
-    contextMenuShow.value++
-  }
-
-  return {
-    contextMenuShow,
-    contextMenu,
-    showContextMenu,
-  }
-}

package/components/common/vm/snapshots/new/lib/utils/details.ts

@@ -1,48 +0,0 @@
-import type { UI_I_InfoBlock } from '~/node_modules/bfg-uikit/components/ui/infoBlock/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_SnapshotsDetails } from '~/store/inventory/modules/snapshots/lib/models/interfaces'
-
-export const constructDetails = (
-  localization: UI_I_Localization,
-  detailData: UI_I_SnapshotsDetails | null
-): UI_I_InfoBlock[] =>
-  !detailData
-    ? []
-    : [
-        {
-          label: localization.common.name,
-          value: detailData.name || '--',
-          items: [],
-          labelIcon: 'icon-snapshotTake',
-        },
-        {
-          label: localization.common.description,
-          value: detailData.description || 'empty-description',
-          items: [],
-          labelIcon: 'file',
-        },
-        {
-          label: localization.common.timestamp,
-          value: detailData.timestamp || '--',
-          items: [],
-          labelIcon: 'clock',
-        },
-        {
-          label: localization.common.size,
-          value: detailData.size || '--',
-          items: [],
-          labelIcon: 'size',
-        },
-        {
-          label: localization.snapshots.snapshotVMMemory,
-          value: detailData.snapshot_the_virtual_machines_memory || '--',
-          items: [],
-          labelIcon: 'settings',
-        },
-        {
-          label: localization.snapshots.quiesceGuestFileSystem,
-          value: detailData.quiesce_guest_file_system || '--',
-          items: [],
-          labelIcon: 'settings',
-        },
-      ]

package/components/common/vm/snapshots/tools/Tools.vue

@@ -1,56 +0,0 @@
-<template>
-  <div class="snapshot-actions grid py-0 px-6">
-    <button
-      id="take-snapshot-button"
-      v-permission="'VirtualMachines.TakeSnapshot'"
-      :disabled="isDisabled"
-      data-id="take-snapshot-button"
-      class="btn btn-primary btn-sm"
-      @click="onSelect('take')"
-    >
-      {{ localization.common.takeSnapshot }}...
-    </button>
-    <atoms-tabs
-      :items="tabs"
-      test-id="vm-snapshot-tabs"
-      size="small"
-      class="tabs"
-      @change="onSelect"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
-import type { UI_T_SnapshotActionType } from '~/components/common/vm/snapshots/lib/models/types'
-import { snapshotsTabsFunc } from '~/components/common/vm/snapshots/tools/lib/config/tabsPannel'
-
-const props = defineProps<{
-  snapshotsCount: number
-  snapshotsLoading: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'select', value: UI_T_SnapshotActionType): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const tabs = computed<UI_I_CollapseNavItem[]>(() =>
-  snapshotsTabsFunc(localization.value, isDisabled.value, props.snapshotsCount)
-)
-
-const onSelect = (action: UI_T_SnapshotActionType): void => {
-  emits('select', action)
-}
-
-const isDisabled = computed<boolean>(() => props.snapshotsLoading)
-</script>
-
-<style scoped lang="scss">
-.snapshot-actions {
-  grid-template-columns: auto 1fr;
-  align-items: baseline;
-}
-</style>

package/components/common/vm/snapshots/tools/lib/config/tabsPannel.ts

@@ -1,39 +0,0 @@
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
-
-export const snapshotsTabsFunc = (
-  localization: UI_I_Localization,
-  isDisabled: boolean,
-  snapshotsCount: number
-): UI_I_CollapseNavItem[] => {
-  return [
-    {
-      text: localization.common.revert.toUpperCase(),
-      value: 'revert',
-      disabled: isDisabled || !snapshotsCount,
-      testId: 'snapshots-revert',
-      permission: 'VirtualMachines.RevertSnapshot'
-    },
-    {
-      text: localization.common.edit.toUpperCase(),
-      value: 'edit',
-      disabled: isDisabled || !snapshotsCount,
-      testId: 'snapshots-edit',
-      permission: 'VirtualMachines.UpdateSnapshot'
-    },
-    {
-      text: localization.common.delete.toUpperCase(),
-      value: 'delete',
-      disabled: isDisabled || !snapshotsCount,
-      testId: 'snapshots-delete',
-      permission: 'VirtualMachines.DeleteSnapshot'
-    },
-    {
-      text: localization.common.deleteAll.toUpperCase(),
-      value: 'delete_all',
-      disabled: isDisabled || !snapshotsCount,
-      testId: 'snapshots-delete-all',
-      permission: 'VirtualMachines.DeleteAllSnapshots'
-    },
-  ]
-}

package/components/common/wizards/datastore/add/steps/nameAndDevice/advancedOptions/AdvancedOptions.vue

@@ -1,43 +0,0 @@
-<template>
-  <component
-    :is="currentComponent"
-    v-model="model"
-    :dev-names-count="props.devNamesCount"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
-
-const { $store }: any = useNuxtApp()
-
-const model = defineModel<UI_I_CreateDatastoreForm['level']>({ required: true })
-
-const props = defineProps<{
-  devNamesCount: number
-}>()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
-
-watch(
-  () => props.devNamesCount,
-  (newValue) => {
-    if (newValue < 2) {
-      if (model.value !== 'linear') model.value = 'linear'
-    } else if (newValue < 3) {
-      if (!['linear', 'raid0', 'raid1'].includes(model.value))
-        model.value = 'linear'
-    } else if (newValue < 4) {
-      if (!['linear', 'raid0', 'raid1', 'raid5'].includes(model.value))
-        model.value = 'linear'
-    }
-  }
-)
-</script>
-
-<style scoped lang="scss"></style>

package/components/common/wizards/datastore/add/steps/nameAndDevice/advancedOptions/New.vue

@@ -1,114 +0,0 @@
-<template>
-  <div class="advanced-options-wrap clr-form-control">
-    <b
-      class="advanced-options-label btn btn-link"
-      @click="isShowAdvancedOptions = !isShowAdvancedOptions"
-    >
-      {{ localization.common.advancedOptions }}
-    </b>
-    <div v-show="isShowAdvancedOptions" class="advanced-options compact">
-      <div class="radio">
-        <input
-          v-model="model"
-          id="advanced-option-liner"
-          data-id="advanced-option-liner"
-          type="radio"
-          value="linear"
-        />
-        <label for="advanced-option-liner"> Linear </label>
-      </div>
-      <div :class="['radio', { disabled: props.devNamesCount < 2 }]">
-        <input
-          v-model="model"
-          id="advanced-option-raid0"
-          :disabled="props.devNamesCount < 2"
-          data-id="advanced-option-raid0"
-          type="radio"
-          value="raid0"
-        />
-        <label for="advanced-option-raid0"> Raid0 </label>
-      </div>
-      <div :class="['radio', { disabled: props.devNamesCount < 2 }]">
-        <input
-          v-model="model"
-          id="advanced-option-raid1"
-          :disabled="props.devNamesCount < 2"
-          data-id="advanced-option-raid1"
-          type="radio"
-          value="raid1"
-        />
-        <label for="advanced-option-raid1"> Raid1 </label>
-      </div>
-      <div :class="['radio', { disabled: props.devNamesCount < 3 }]">
-        <input
-          v-model="model"
-          id="advanced-option-raid5"
-          :disabled="props.devNamesCount < 3"
-          data-id="advanced-option-raid5"
-          type="radio"
-          value="raid5"
-        />
-        <label for="advanced-option-raid5"> Raid5 </label>
-      </div>
-      <div :class="['radio', { disabled: props.devNamesCount < 4 }]">
-        <input
-          v-model="model"
-          id="advanced-option-raid6"
-          :disabled="props.devNamesCount < 4"
-          data-id="advanced-option-raid6"
-          type="radio"
-          value="raid6"
-        />
-        <label for="advanced-option-raid6"> Raid6 </label>
-      </div>
-      <div :class="['radio', { disabled: props.devNamesCount < 4 }]">
-        <input
-          v-model="model"
-          id="advanced-option-raid10"
-          :disabled="props.devNamesCount < 4"
-          data-id="advanced-option-raid10"
-          type="radio"
-          value="raid10"
-        />
-        <label for="advanced-option-raid10"> Raid10 </label>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
-
-const model = defineModel<UI_I_CreateDatastoreForm['level']>({ required: true })
-
-const props = defineProps<{
-  devNamesCount: number
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isShowAdvancedOptions = ref<boolean>(false)
-</script>
-
-<style scoped lang="scss">
-.advanced-options-wrap {
-  display: flex;
-  gap: 10px;
-
-  .advanced-options-label {
-    margin: 0;
-    padding: 0;
-    line-height: normal;
-    height: auto;
-  }
-
-  .radio {
-    margin-bottom: 5px;
-  }
-  input[type='radio']:focus:checked + label::before,
-  input[type='radio']:focus + label::before {
-    box-shadow: inset 0 0 0 0.25rem #0094d2;
-  }
-}
-</style>