bfg-common 1.5.452 → 1.5.454

package/assets/localization/local_be.json

@@ -2749,7 +2749,8 @@
     "template": "Шаблон",
     "convertToTemplate": "Пераўтварыць у шаблон",
     "newTemplate": "Новы шаблон",
-    "createTemplateFromVM": "Стварыць шаблон з ВМ"
+    "createTemplateFromVM": "Стварыць шаблон з ВМ",
+    "actionsNumObjects": "Дзеянні – {0} аб’ектаў"
   },
   "networks": {
     "active_ports": "Актыўныя Парты",
@@ -3252,7 +3253,8 @@
     "channels": "Каналы ({0})",
     "metricsNotFound": "Паказчыкі не знойдзены",
     "uploadFolder": "Тэчка загрузкі",
-    "uploadFiles": "Запампаваць файлы"
+    "uploadFiles": "Запампаваць файлы",
+    "clickForUse": "Націсніце для выкарыстання"
   },
   "vmWizard": {
     "selectCreationType": "Выберыце тып стварэння",

package/assets/localization/local_en.json

@@ -2753,7 +2753,8 @@
     "template": "Template",
     "convertToTemplate": "Convert to Template",
     "newTemplate": "New Template",
-    "createTemplateFromVM": "Create Template from VM"
+    "createTemplateFromVM": "Create Template from VM",
+    "actionsNumObjects": "Actions - {0} Objects"
   },
   "networks": {
     "active_ports": "Active ports",
@@ -3256,7 +3257,8 @@
     "channels": "Channels ({0})",
     "metricsNotFound": "Metrics not found",
     "uploadFolder": "Upload folder",
-    "uploadFiles": "Upload files"
+    "uploadFiles": "Upload files",
+    "clickForUse": "Click for use"
   },
   "vmWizard": {
     "selectCreationType": "Select a Creation Type",

package/assets/localization/local_hy.json

@@ -2753,7 +2753,8 @@
     "template": "Ձևանմուշ",
     "convertToTemplate": "Վերափոխել ձևանմուշի",
     "newTemplate": "Նոր ձևանմուշ",
-    "createTemplateFromVM": "Ստեղծել ձևանմուշ ՎՄ-ից"
+    "createTemplateFromVM": "Ստեղծել ձևանմուշ ՎՄ-ից",
+    "actionsNumObjects": "Գործողություններ – {0} օբյեկտ"
   },
   "networks": {
     "active_ports": "Ակտիվ պորտեր",
@@ -3256,7 +3257,8 @@
     "channels": "Ալիքներ ({0})",
     "metricsNotFound": "Չափանիշները չեն գտնվել",
     "uploadFolder": "Վերբեռնեք թղթապանակը",
-    "uploadFiles": "Վերբեռնեք ֆայլեր"
+    "uploadFiles": "Վերբեռնեք ֆայլեր",
+    "clickForUse": "Կտտացրեք օգտագործման համար"
   },
   "vmWizard": {
     "selectCreationType": "Ընտրեք ստեղծման տեսակը",

package/assets/localization/local_kk.json

@@ -2752,7 +2752,8 @@
     "template": "Үлгі",
     "convertToTemplate": "Үлгіге айналдыру",
     "newTemplate": "Жаңа үлгі",
-    "createTemplateFromVM": "ВМ негізінде үлгі жасау"
+    "createTemplateFromVM": "ВМ негізінде үлгі жасау",
+    "actionsNumObjects": "Әрекеттер – {0} нысан"
   },
   "networks": {
     "active_ports": "Белсенді порттар",
@@ -3255,7 +3256,8 @@
     "channels": "Арналар ({0})",
     "metricsNotFound": "Көрсеткіштер табылмады",
     "uploadFolder": "Қалтаны жүктеп салу",
-    "uploadFiles": "Файлдарды жүктеп салу"
+    "uploadFiles": "Файлдарды жүктеп салу",
+    "clickForUse": "Пайдалану үшін басыңыз"
   },
   "vmWizard": {
     "selectCreationType": "Жасау түрін таңдаңыз",

package/assets/localization/local_ru.json

@@ -2752,7 +2752,8 @@
     "template": "Шаблон",
     "convertToTemplate": "Преобразовать в шаблон",
     "newTemplate": "Новый шаблон",
-    "createTemplateFromVM": "Создать шаблон из ВМ"
+    "createTemplateFromVM": "Создать шаблон из ВМ",
+    "actionsNumObjects": "Действия – {0} объектов"
   },
   "networks": {
     "active_ports": "Активные порты",
@@ -3255,7 +3256,8 @@
     "channels": "Каналы ({0})",
     "metricsNotFound": "Метрики не найдены",
     "uploadFolder": "Загрузить папку",
-    "uploadFiles": "Загрузить файлы"
+    "uploadFiles": "Загрузить файлы",
+    "clickForUse": "Нажмите для использования"
   },
   "vmWizard": {
     "selectCreationType": "Выбор типа создания",

package/assets/localization/local_zh.json

@@ -2750,7 +2750,8 @@
     "template": "模板",
     "convertToTemplate": "转换为模板",
     "newTemplate": "新模板",
-    "createTemplateFromVM": "从虚拟机创建模板"
+    "createTemplateFromVM": "从虚拟机创建模板",
+    "actionsNumObjects": "操作 – {0} 个对象"
   },
   "networks": {
     "active_ports": "活动端口",
@@ -3253,7 +3254,8 @@
     "channels": "频道 ({0})",
     "metricsNotFound": "未找到指标",
     "uploadFolder": "上传文件夹",
-    "uploadFiles": "上传文件"
+    "uploadFiles": "上传文件",
+    "clickForUse": "点击使用"
   },
   "vmWizard": {
     "selectCreationType": "选择创建类型",

package/assets/scss/clarity/local_ar.json

@@ -2906,7 +2906,8 @@
     "channels": "القنوات ({0})",
     "metricsNotFound": "لم يتم العثور على المقاييس",
     "uploadFolder": "تحميل مجلد",
-    "uploadFiles": "تحميل ملفات"
+    "uploadFiles": "تحميل ملفات",
+    "clickForUse": "انقر للاستخدام"
   },
   "vmWizard": {
     "devices": "الأجهزة ({0})",

package/components/atoms/table/dataGrid/DataGrid.vue

@@ -211,6 +211,7 @@
                       :data-id="`${item[0].testId}-select-row`"
                       class="datagrid-row-master datagrid-row-flex"
                       @click.stop="selectRowById(item[0])"
+                      @contextmenu.prevent="onShowContextMenu($event, item[0])"
                     >
                       <div
                         v-if="props.type || $slots.toggleBlock"
@@ -601,6 +602,7 @@ const emits = defineEmits<{
   (event: 'sorting', value: [string, boolean]): void
   (event: 'change', value: any): void
   (event: 'row-detail', value: number): void
+  (event: 'show-context-menu', value: Event): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -1086,6 +1088,19 @@ const exportSelected = (): void => {
   generateCsvAndDownload([header, ...Array.from(rows)])
 }
 
+const onShowContextMenu = (event: Event, item: UI_I_BodyItem): void => {
+  const { id } = item
+  let has = false
+  if (props.type === 'checkbox' && Array.isArray(selectedRowLocal.value)) {
+    has = selectedRowLocal.value.includes(id)
+  } else {
+    has = selectedRowLocal.value === id
+  }
+  if (!has) selectRowById(item)
+
+  emits('show-context-menu', event)
+}
+
 onMounted(() => {
   window.addEventListener('mousemove', mousemove)
   window.addEventListener('mouseup', mouseup)

package/components/atoms/window/Window.vue

@@ -1,27 +1,37 @@
 <template>
   <div
-    class="window-container"
+    :class="['window-container', { loading: props.loading }]"
     :style="{
-      left: x + 'px',
-      top: y + 'px',
-      width: width + 'px',
-      height: height + 'px',
+      left: leftLocal + 'px',
+      top: topLocal + 'px',
+      width: widthLocal + 'px',
+      height: heightLocal + 'px',
     }"
   >
     <div ref="headerEl" class="window-header">
-      <div class="window-title">{{ props.title }}</div>
-      <button class="window-close" @click="onHide">
-        <ui-icon name="close" class="close-icon" />
-      </button>
+      <slot name="header">
+        <div class="window-title">{{ props.title }}</div>
+      </slot>
+
+      <div class="flex-align-center">
+        <button class="window-close" @click="onCollapse">
+          <ui-icon
+            :name="collapseData.isCollapsed ? 'arrow' : 'check-line'"
+            class="hide-icon"
+          />
+        </button>
+        <button class="window-close ml-1" @click="onHide">
+          <ui-icon name="close" class="close-icon" />
+        </button>
+      </div>
     </div>
 
     <div class="window-content">
+      <div v-show="props.loading" class="absolute-center">
+        <ui-icon name="spinner" />
+      </div>
       <slot></slot>
-      <div
-        v-show="isShowContentBlocker"
-        :style="{}"
-        class="content-blocker"
-      ></div>
+      <div v-show="isShowContentBlocker" class="content-blocker"></div>
     </div>
 
     <!-- Ручки для ресайза -->
@@ -62,14 +72,27 @@
 
 <script setup lang="ts">
 import { useDraggable } from '@vueuse/core'
-
-const props = defineProps<{
-  top: number
-  left: number
-  width: number
-  height: number
-  title: string
-}>()
+import type { UI_I_WindowCollapsedData } from '~/components/atoms/window/lib/models/interfaces'
+import {
+  minWidth,
+  minHeight,
+  headerHeight,
+  windowPadding,
+} from '~/components/atoms/window/lib/config/config'
+
+const props = withDefaults(
+  defineProps<{
+    top: number
+    left: number
+    width: number
+    height: number
+    title: string
+    loading?: boolean
+  }>(),
+  {
+    loading: false,
+  }
+)
 const emits = defineEmits<{
   (event: 'hide'): void
 }>()
@@ -77,20 +100,34 @@ const emits = defineEmits<{
 const headerEl = ref(null)
 const isShowContentBlocker = ref<boolean>(false)
 
-const x = ref(props.left)
-const y = ref(props.top)
-const width = ref(props.width)
-const height = ref(props.height)
+const leftLocal = ref<number>(props.left)
+const topLocal = ref<number>(props.top)
+const widthLocal = ref<number>(Math.max(minWidth, props.width))
+const heightLocal = ref<number>(Math.max(minHeight, props.height))
+
+const collapseData = ref<UI_I_WindowCollapsedData>({
+  isCollapsed: false,
+  cashTop: -1,
+  cashLeft: -1,
+  cashWidth: -1,
+  cashHeight: -1,
+})
 
 // Используем vueuse для перетаскивания
 useDraggable(headerEl, {
-  initialValue: { x: props.left, y: props.top },
+  initialValue: { x: leftLocal.value, y: topLocal.value },
   onMove({ x: newX, y: newY }) {
-    x.value = newX
-    y.value = newY
+    leftLocal.value = newX
+    topLocal.value = newY
   },
   onStart() {
     isShowContentBlocker.value = true
+    if (!collapseData.value.isCollapsed) {
+      collapseData.value.cashTop = topLocal.value
+      collapseData.value.cashLeft = leftLocal.value
+      collapseData.value.cashWidth = widthLocal.value
+      collapseData.value.cashHeight = heightLocal.value
+    }
   },
   onEnd() {
     isShowContentBlocker.value = false
@@ -102,35 +139,48 @@ const fixSize = (): void => {
   const globalWindowWidth = window.innerWidth
   const globalWindowHeight = window.innerHeight
 
-  width.value = Math.min(globalWindowWidth - 8 * 2, width.value)
-  height.value = Math.min(globalWindowHeight - 8 * 2, height.value)
+  widthLocal.value = Math.min(
+    globalWindowWidth - windowPadding * 2,
+    widthLocal.value
+  )
+  heightLocal.value = Math.min(
+    globalWindowHeight - windowPadding * 2,
+    heightLocal.value
+  )
 }
 const fixPosition = (): void => {
   const globalWindowWidth = window.innerWidth
   const globalWindowHeight = window.innerHeight
-  let newX = x.value
-  let newY = y.value
-  if (x.value + width.value / 2 > globalWindowWidth) {
-    newX = globalWindowWidth - 20
-  } else if (x.value + width.value > globalWindowWidth - 8) {
-    newX = globalWindowWidth - width.value - 8
-  } else if (x.value < 8) {
-    newX = 8
+  let newX = leftLocal.value
+  let newY = topLocal.value
+
+  if (leftLocal.value + widthLocal.value > globalWindowWidth - windowPadding) {
+    newX = globalWindowWidth - widthLocal.value - windowPadding
+  } else if (leftLocal.value < windowPadding) {
+    newX = windowPadding
   }
 
-  if (y.value + height.value / 2 > globalWindowHeight) {
-    newY = globalWindowHeight - 20
-  } else if (y.value + height.value > globalWindowHeight - 8) {
-    newY = globalWindowHeight - height.value - 8
-  } else if (y.value < 8) {
-    newY = 8
+  if (topLocal.value + heightLocal.value / 2 > globalWindowHeight) {
+    newY = globalWindowHeight - headerHeight
+    collapseData.value.isCollapsed = true
+  } else if (
+    topLocal.value + heightLocal.value >
+    globalWindowHeight - windowPadding
+  ) {
+    newY = globalWindowHeight - heightLocal.value - windowPadding
+    collapseData.value.isCollapsed = false
+  } else if (topLocal.value < windowPadding) {
+    newY = windowPadding
+    collapseData.value.isCollapsed = false
+  } else {
+    collapseData.value.isCollapsed = false
   }
 
   smoothMove(newX, newY)
 }
 const smoothMove = (newX: number, newY: number, duration = 100): void => {
-  const startX = x.value
-  const startY = y.value
+  const startX = leftLocal.value
+  const startY = topLocal.value
 
   // Время начала анимации
   const startTime = performance.now()
@@ -144,8 +194,8 @@ const smoothMove = (newX: number, newY: number, duration = 100): void => {
     const progress = Math.min(elapsedTime / duration, 1)
 
     // Вычисляем новые координаты с помощью линейной интерполяции
-    x.value = startX + (newX - startX) * progress
-    y.value = startY + (newY - startY) * progress
+    leftLocal.value = startX + (newX - startX) * progress
+    topLocal.value = startY + (newY - startY) * progress
 
     // Если анимация не завершена, продолжаем
     if (progress < 1) {
@@ -157,39 +207,65 @@ const smoothMove = (newX: number, newY: number, duration = 100): void => {
   requestAnimationFrame(animate)
 }
 
+const onCollapse = (): void => {
+  collapseData.value.isCollapsed = !collapseData.value.isCollapsed
+
+  if (collapseData.value.isCollapsed) {
+    collapseData.value.cashTop = topLocal.value
+    collapseData.value.cashLeft = leftLocal.value
+    collapseData.value.cashWidth = widthLocal.value
+    collapseData.value.cashHeight = heightLocal.value
+
+    const globalWindowWidth = window.innerWidth
+    const globalWindowHeight = window.innerHeight
+
+    widthLocal.value = minWidth
+    heightLocal.value = minHeight
+    leftLocal.value = globalWindowWidth - widthLocal.value - windowPadding
+    topLocal.value = globalWindowHeight - headerHeight
+    fixPosition()
+  } else {
+    leftLocal.value = collapseData.value.cashLeft
+    topLocal.value = collapseData.value.cashTop
+    widthLocal.value = collapseData.value.cashWidth
+    heightLocal.value = collapseData.value.cashHeight
+    fixPosition()
+  }
+}
+
 // Функция для ресайза
 const startResize = (e: any, direction: any): void => {
   e.preventDefault()
 
   const startX = e.clientX
   const startY = e.clientY
-  const startWidth = width.value
-  const startHeight = height.value
-  const startLeft = x.value
-  const startTop = y.value
+  const startWidth = widthLocal.value
+  const startHeight = heightLocal.value
+  const startLeft = leftLocal.value
+  const startTop = topLocal.value
 
   const onMouseMove = (e: any): void => {
     const deltaX = e.clientX - startX
     const deltaY = e.clientY - startY
 
     if (direction.includes('right')) {
-      width.value = Math.max(200, startWidth + deltaX)
+      widthLocal.value = Math.max(minWidth, startWidth + deltaX)
     }
     if (direction.includes('bottom')) {
-      height.value = Math.max(150, startHeight + deltaY)
+      heightLocal.value = Math.max(minHeight, startHeight + deltaY)
     }
     if (direction.includes('left')) {
-      const newWidth = Math.max(200, startWidth - deltaX)
-      if (newWidth !== width.value) {
-        x.value = startLeft + deltaX
-        width.value = newWidth
+      const newWidth = Math.max(minWidth, startWidth - deltaX)
+      if (newWidth !== widthLocal.value) {
+        leftLocal.value = startLeft + deltaX
+        widthLocal.value = newWidth
       }
     }
     if (direction.includes('top')) {
-      const newHeight = Math.max(150, startHeight - deltaY)
-      if (newHeight !== height.value) {
-        y.value = startTop + deltaY
-        height.value = newHeight
+      const newHeight = Math.max(minHeight, startHeight - deltaY)
+      if (newHeight !== heightLocal.value) {
+        topLocal.value = startTop + deltaY
+        heightLocal.value = newHeight
       }
     }
     fixSize()
@@ -241,6 +317,10 @@ const onHide = (): void => {
   min-height: 200px;
   z-index: var(--z-toast);
 
+  &.loading {
+    opacity: 0.5;
+  }
+
   .window-header {
     background-color: #314351;
     color: white;

package/components/atoms/window/lib/config/config.ts

@@ -0,0 +1,4 @@
+export const minWidth = 300
+export const minHeight = 200
+export const windowPadding = 8
+export const headerHeight = 36

package/components/atoms/window/lib/models/interfaces.ts

@@ -0,0 +1,7 @@
+export interface UI_I_WindowCollapsedData {
+    isCollapsed: boolean
+    cashTop: number
+    cashLeft: number
+    cashWidth: number
+    cashHeight: number
+}

package/components/common/monitor/advanced/AdvancedOld.vue

@@ -53,7 +53,7 @@
             @submit-options="emits('submit-options', $event)"
           />
 
-          <div v-show="!props.data" class="empty-container">
+          <div v-show="!props.data && !props.advancedLoading" class="empty-container">
             {{
               localization.inventoryMonitor
                 .noPerformanceCurrentlySelectedMetrics

package/components/common/monitor/overview/filters/customIntervalModal/CustomIntervalModalOld.vue

@@ -107,12 +107,12 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const alertShow = defineModel<boolean>('alert-show')
-const currentDateFrom = defineModel<boolean>('current-date-from')
-const dateFrom = defineModel<boolean>('date-from')
-const currentTimeFrom = defineModel<boolean>('current-time-from')
-const currentDateTo = defineModel<boolean>('current-date-to')
-const dateTo = defineModel<boolean>('date-to')
-const currentTimeTo = defineModel<boolean>('current-time-to')
+const currentDateFrom = defineModel<string>('current-date-from')
+const dateFrom = defineModel<number>('date-from')
+const currentTimeFrom = defineModel<string>('current-time-from')
+const currentDateTo = defineModel<string>('current-date-to')
+const dateTo = defineModel<number>('date-to')
+const currentTimeTo = defineModel<string>('current-time-to')
 
 const props = defineProps<{
   titleIntervalModal: string

package/components/common/pages/backups/Backups.vue

@@ -1,102 +1,102 @@
-<template>
-  <div class="main-content-backups h-full overflow-hidden">
-    <common-pages-backups-tools
-      :project="props.project"
-      :backups-count="backupsTree.length"
-      :backups-loading="backupsLoading"
-      :selected-node="selectedNode"
-      :target-type="typeFromRoute"
-      @select="onShowModal"
-    />
-
-    <atoms-loader-pre-loader
-      v-show="backupsLoading"
-      id="loader"
-      :show="true"
-      class="backups-loading w-full h-full flex items-center justify-center"
-      test-id="backups-tree-spinner"
-    />
-    <div class="fill-parent w-full h-full">
-      <div v-if="backupsTree.length" class="backup-view mt-1 flex w-full">
-        <common-tree-view
-          :loading="backupsLoading"
-          :nodes="backupsTree"
-          @select-node="onSelectNode"
-          @show-nodes="onShowNodes"
-        />
-        <common-pages-backups-detail-view :detail="detailData" />
-      </div>
-      <div v-else class="empty-block flex justify-center items-center w-full">
-        {{ localization.common.noBackupAvailable }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_T_TargetType,
-  UI_T_BackupActionType,
-} from '~/components/common/pages/backups/lib/models/types'
-import type {
-  UI_I_Backup,
-  UI_I_BackupsTreeNode,
-} from '~/components/common/pages/backups/lib/models/interfaces'
-
-const props = defineProps<{
-  project: UI_T_Project
-  backups: UI_I_Backup[]
-  backupsTree: UI_I_BackupsTreeNode[]
-  backupsLoading: boolean
-  selectedNode: UI_I_BackupsTreeNode
-}>()
-const emits = defineEmits<{
-  (event: 'select-node', value: string | number): void
-  (event: 'show-nodes', value: string | number): void
-  (event: 'set-action', value: UI_T_BackupActionType): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const { $recursion }: any = useNuxtApp()
-
-const typeFromRoute = computed<UI_T_TargetType>(
-  () => useRoute().params.type.toString() as UI_T_TargetType
-)
-
-const detailData = computed<UI_I_BackupsTreeNode | null>(() => {
-  const node =
-    $recursion.find(props.backupsTree, true, 'isActive', 'nodes') || null
-  return node?.type === 'backup' ? node : null
-})
-
-const onSelectNode = (item: UI_I_BackupsTreeNode): void => {
-  emits('select-node', item.id)
-  if (item.type === 'group') {
-    onShowNodes(item.id.toString())
-  }
-}
-const onShowNodes = (id: string | number): void => {
-  emits('show-nodes', id)
-}
-
-const onShowModal = (action: UI_T_BackupActionType): void => {
-  emits('set-action', action)
-}
-</script>
-
-<style scoped lang="scss">
-.main-content-backups {
-  padding: 10px 5px 10px 0;
-
-  .fill-parent {
-    overflow: visible;
-
-    .backup-view {
-      // TODO fix
-      height: calc(90% - 24px);
-    }
-  }
-}
-</style>
+<template>
+  <div class="main-content-backups h-full overflow-hidden">
+    <common-pages-backups-tools
+      :project="props.project"
+      :backups-count="backupsTree.length"
+      :backups-loading="backupsLoading"
+      :selected-node="selectedNode"
+      :target-type="typeFromRoute"
+      @select="onShowModal"
+    />
+
+    <atoms-loader-pre-loader
+      v-show="backupsLoading"
+      id="loader"
+      :show="true"
+      class="backups-loading w-full h-full flex items-center justify-center"
+      test-id="backups-tree-spinner"
+    />
+    <div class="fill-parent w-full h-full">
+      <div v-if="backupsTree.length" class="backup-view mt-1 flex w-full">
+        <common-tree-view
+          :loading="backupsLoading"
+          :nodes="backupsTree"
+          @select-node="onSelectNode"
+          @show-nodes="onShowNodes"
+        />
+        <common-pages-backups-detail-view :detail="detailData" />
+      </div>
+      <div v-else class="empty-block flex justify-center items-center w-full">
+        {{ localization.common.noBackupAvailable }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_T_TargetType,
+  UI_T_BackupActionType,
+} from '~/components/common/pages/backups/lib/models/types'
+import type {
+  UI_I_Backup,
+  UI_I_BackupsTreeNode,
+} from '~/components/common/pages/backups/lib/models/interfaces'
+
+const props = defineProps<{
+  project: UI_T_Project
+  backups: UI_I_Backup[]
+  backupsTree: UI_I_BackupsTreeNode[]
+  backupsLoading: boolean
+  selectedNode: UI_I_BackupsTreeNode | null
+}>()
+const emits = defineEmits<{
+  (event: 'select-node', value: string | number): void
+  (event: 'show-nodes', value: string | number): void
+  (event: 'set-action', value: UI_T_BackupActionType): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $recursion }: any = useNuxtApp()
+
+const typeFromRoute = computed<UI_T_TargetType>(
+  () => useRoute().params.type.toString() as UI_T_TargetType
+)
+
+const detailData = computed<UI_I_BackupsTreeNode | null>(() => {
+  const node =
+    $recursion.find(props.backupsTree, true, 'isActive', 'nodes') || null
+  return node?.type === 'backup' ? node : null
+})
+
+const onSelectNode = (item: UI_I_BackupsTreeNode): void => {
+  emits('select-node', item.id)
+  if (item.type === 'group') {
+    onShowNodes(item.id.toString())
+  }
+}
+const onShowNodes = (id: string | number): void => {
+  emits('show-nodes', id)
+}
+
+const onShowModal = (action: UI_T_BackupActionType): void => {
+  emits('set-action', action)
+}
+</script>
+
+<style scoped lang="scss">
+.main-content-backups {
+  padding: 10px 5px 10px 0;
+
+  .fill-parent {
+    overflow: visible;
+
+    .backup-view {
+      // TODO fix
+      height: calc(90% - 24px);
+    }
+  }
+}
+</style>

package/components/common/pages/backups/modals/Modals.vue

@@ -43,7 +43,10 @@
 <script lang="ts" setup>
 import type { UI_I_WizardStep } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
 import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_SendTaskParams, UI_I_ModalPayload } from '~/lib/models/interfaces'
+import type {
+  UI_I_SendTaskParams,
+  UI_I_ModalPayload,
+} from '~/lib/models/interfaces'
 import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
 import type {
   UI_I_BackupDatastoreTable,
@@ -69,7 +72,7 @@ const props = defineProps<{
   selectedVmName: string
   disks: UI_I_Pvm['disk_devices']
   disksLoading: boolean
-  datastoreTable: UI_I_BackupDatastoreTable
+  datastoreTable: UI_I_BackupDatastoreTable | null
   datastoreTableLoading: boolean
   restoreDatastore: UI_I_DatastoreTableItem[]
   isRestoreDatastoreLoading: boolean

package/components/common/pages/backups/modals/createBackup/CreateBackup.vue

@@ -101,7 +101,7 @@ const props = defineProps<{
   selectedVmName: string
   disks: UI_I_Pvm['disk_devices']
   disksLoading: boolean
-  datastoreTable: UI_I_BackupDatastoreTable
+  datastoreTable: UI_I_BackupDatastoreTable | null
   datastoreTableLoading: boolean
 }>()
 

package/components/common/pages/backups/modals/createBackup/datastores/Datastores.vue

@@ -1,59 +1,59 @@
-<template>
-  <div class="datastores h-full">
-    <common-pages-backups-modals-create-backup-datastores-table-view
-      v-model:selected="model.backup_storage"
-      :data-table="props.datastoreTable?.items"
-      :total-items="props.datastoreTable?.total_items || 0"
-      :total-pages="props.datastoreTable?.total_pages || 1"
-      :loading="props.datastoreTableLoading"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type {
-  UI_I_BackupDatastoreTable,
-  UI_I_CreateBackupForm
-} from '~/components/common/pages/backups/modals/lib/models/interfaces'
-
-const props = defineProps<{
-  datastoreTable: UI_I_BackupDatastoreTable
-  datastoreTableLoading: boolean
-}>()
-const emits = defineEmits<{
-  (event: 'change', value: string[]): void
-}>()
-
-const model = defineModel<UI_I_CreateBackupForm>({ required: true })
-
-const selectedKeys = ref<string[]>([])
-
-watch(
-  () => props.datastoreTable,
-  () => {
-    selectedKeys.value = []
-  },
-  { deep: true, immediate: true }
-)
-
-watch(
-  () => model.value.backup_storage,
-  (newValue: string) => {
-    const selectedNames: string[] = []
-
-    props.datastoreTable?.items.forEach((item) => {
-      if (newValue === item.id) selectedNames.push(item.name)
-    })
-
-    emits('change', selectedNames)
-  },
-  { deep: true, immediate: true }
-)
-</script>
-
-<style lang="scss" scoped>
-.backups-table-content {
-  height: 100%;
-  padding: 0 10px 10px 10px;
-}
-</style>
+<template>
+  <div class="datastores h-full">
+    <common-pages-backups-modals-create-backup-datastores-table-view
+      v-model:selected="model.backup_storage"
+      :data-table="props.datastoreTable?.items || []"
+      :total-items="props.datastoreTable?.total_items || 0"
+      :total-pages="props.datastoreTable?.total_pages || 1"
+      :loading="props.datastoreTableLoading"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type {
+  UI_I_BackupDatastoreTable,
+  UI_I_CreateBackupForm
+} from '~/components/common/pages/backups/modals/lib/models/interfaces'
+
+const props = defineProps<{
+  datastoreTable: UI_I_BackupDatastoreTable | null
+  datastoreTableLoading: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'change', value: string[]): void
+}>()
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const selectedKeys = ref<string[]>([])
+
+watch(
+  () => props.datastoreTable,
+  () => {
+    selectedKeys.value = []
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => model.value.backup_storage,
+  (newValue: string) => {
+    const selectedNames: string[] = []
+
+    props.datastoreTable?.items.forEach((item) => {
+      if (newValue === item.id) selectedNames.push(item.name)
+    })
+
+    emits('change', selectedNames)
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+.backups-table-content {
+  height: 100%;
+  padding: 0 10px 10px 10px;
+}
+</style>

package/components/common/spiceConsole/Drawer.vue

@@ -16,90 +16,92 @@
       <atoms-the-icon2 name="drag" class="vmw-drawer__drag-icon" />
     </div>
 
-    <div class="vmw-drawer-header">
-      <h3>{{ localization.common.consolePanel }}</h3>
-      <atoms-the-icon
-        class="vmw-drawer-header__close"
-        data-id="spice-console-drawer-toggle-icon"
-        name="close"
-        @click="toggleDrawer"
-      />
-    </div>
+    <div class="drawer-content">
+      <div class="vmw-drawer-header">
+        <h3>{{ localization.common.consolePanel }}</h3>
+        <atoms-the-icon
+          class="vmw-drawer-header__close"
+          data-id="spice-console-drawer-toggle-icon"
+          name="close"
+          @click="toggleDrawer"
+        />
+      </div>
 
-    <div class="vmw-drawer-body">
-      <button
-        class="vmw-drawer-body__btn animation toggle-fullscreen"
-        data-id="spice-console-drawer-toggle-fullscreen"
-        @click="emits('toggle-fullscreen')"
-      >
-        {{ localization.common.toggleFullscreenMode }}
-      </button>
-      <button
-        class="vmw-drawer-body__btn animation toggle-fullscreen"
-        @click="emits('send-alt-command')"
-      >
-        {{ localization.common.sendAltCommand }}
-      </button>
-      <label
-        v-development="true"
-        class="vmw-drawer-body__btn animation relative"
-      >
-        {{ localization.remoteConsole.uploadFolder }}
-        <input type="file" webkitdirectory directory multiple />
-      </label>
-      <label
-        v-development="true"
-        class="vmw-drawer-body__btn animation relative"
-      >
-        {{ localization.remoteConsole.uploadFiles }}
-        <input type="file" multiple />
-      </label>
-
-      <select
-        v-model="usbDevice"
-        v-development="true"
-        @mouseenter="hover = true"
-        @mouseleave="hover = false"
-        @change="onChangeUsbDevice"
-      >
-        <option
-          v-for="item in usbDevices"
-          :key="item.value"
-          :value="item.value"
-          :disabled="item.disabled"
+      <div class="vmw-drawer-body">
+        <button
+          class="vmw-drawer-body__btn animation toggle-fullscreen"
+          data-id="spice-console-drawer-toggle-fullscreen"
+          @click="emits('toggle-fullscreen')"
         >
-          {{ item.label }}
-        </option>
-      </select>
-
-      <select
-        :value="codec"
-        @mouseenter="hover = true"
-        @mouseleave="hover = false"
-        @change="onChangeCodec"
-      >
-        <option :value="1">MJPEG</option>
-        <option :value="2">VP8</option>
-        <option :value="3">H264</option>
-        <option :value="4" disabled>VP9</option>
-        <option :value="5">H265</option>
-      </select>
-
-      <hr />
-      <button
-        class="vmw-drawer-body__btn animation show-keyboard"
-        @click="onToggleKeyboard"
-      >
-        {{ showOrHideKeyboard }}
-      </button>
-    </div>
+          {{ localization.common.toggleFullscreenMode }}
+        </button>
+        <button
+          class="vmw-drawer-body__btn animation toggle-fullscreen"
+          @click="emits('send-alt-command')"
+        >
+          {{ localization.common.sendAltCommand }}
+        </button>
+        <label
+          v-development="true"
+          class="vmw-drawer-body__btn animation relative"
+        >
+          {{ localization.remoteConsole.uploadFolder }}
+          <input type="file" webkitdirectory directory multiple />
+        </label>
+        <label
+          v-development="true"
+          class="vmw-drawer-body__btn animation relative"
+        >
+          {{ localization.remoteConsole.uploadFiles }}
+          <input type="file" multiple />
+        </label>
+
+        <select
+          v-model="usbDevice"
+          v-development="true"
+          @mouseenter="hover = true"
+          @mouseleave="hover = false"
+          @change="onChangeUsbDevice"
+        >
+          <option
+            v-for="item in usbDevices"
+            :key="item.value"
+            :value="item.value"
+            :disabled="item.disabled"
+          >
+            {{ item.label }}
+          </option>
+        </select>
+
+        <select
+          :value="codec"
+          @mouseenter="hover = true"
+          @mouseleave="hover = false"
+          @change="onChangeCodec"
+        >
+          <option :value="1">MJPEG</option>
+          <option :value="2">VP8</option>
+          <option :value="3">H264</option>
+          <option :value="4" disabled>VP9</option>
+          <option :value="5">H265</option>
+        </select>
+
+        <hr />
+        <button
+          class="vmw-drawer-body__btn animation show-keyboard"
+          @click="onToggleKeyboard"
+        >
+          {{ showOrHideKeyboard }}
+        </button>
+      </div>
 
-    <div class="vmw-drawer-footer">
-      <div class="size-info">
-        <p class="size-info-text">View size: {{ viewSize }}</p>
-        <p class="size-info-text">Canvas size: {{ canvasSize }}</p>
+      <div class="vmw-drawer-footer">
+        <div class="size-info">
+          <p class="size-info-text">View size: {{ viewSize }}</p>
+          <p class="size-info-text">Canvas size: {{ canvasSize }}</p>
+        </div>
+        <div id="debug-stream"></div>
       </div>
-      <div id="debug-stream"></div>
     </div>
     <div v-if="isKeyboardShown">
       <common-spice-console-keyboard />
@@ -256,7 +258,9 @@ setDefaultDevices()
   right: -300px;
   width: 300px;
   height: 100vh;
-  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 0 20px 20px;
   z-index: var(--z-modal);
 
   &.show {
@@ -306,6 +310,10 @@ setDefaultDevices()
     }
   }
 
+  .drawer-content {
+    overflow: auto;
+    padding-right: 20px;
+  }
   .vmw-drawer-header {
     & h3 {
       color: #fff;

package/components/common/spiceConsole/SpiceConsole.vue

@@ -1,6 +1,14 @@
 <template>
   <div ref="fullScreen" class="spice-console">
     <div id="vmw" ref="vmScreen" @scroll="onConsoleScroll"></div>
+    <div
+      v-if="isWindow"
+      v-show="isShowBlocker"
+      class="blocker"
+      @click="onFocus"
+    >
+      <p class="blocker-text">{{ localization.remoteConsole.clickForUse }}</p>
+    </div>
     <common-spice-console-drawer
       @toggle-fullscreen="toggle"
       @send-alt-command="onSendAltCommand"
@@ -11,6 +19,7 @@
 import { useFullscreen } from '@vueuse/core'
 import RFB from '@novnc/novnc/core/rfb.js'
 import SpiceConsole from '~/plugins/spice-console/spice.console'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const props = defineProps<{
   wsUrl: string
@@ -20,6 +29,8 @@ const props = defineProps<{
   port: number
 }>()
 
+const localization = computed<UI_I_Localization>(() => useLocal())
+
 let rfb: any
 const vmScreen = ref<any>(null)
 const fullScreen = ref<any>(null)
@@ -100,14 +111,28 @@ const blockCtrlOrCmdCommands = (e): void => {
   //   return false;
   // }
 }
+
+const isWindow = computed<boolean>(() => useRoute().query.window === 'true')
+const isShowBlocker = ref<boolean>(true)
+const onFocus = (): void => {
+  document.getElementById('inputmanager')?.focus()
+  isShowBlocker.value = false
+}
+
+const inputManagerBlur = (): void => {
+  isShowBlocker.value = true
+}
+
 onMounted(() => {
   connectWS()
   document.addEventListener('keydown', blockCtrlOrCmdCommands)
+  window.addEventListener('blur', inputManagerBlur)
 })
 
 onBeforeUnmount(() => {
   vmDisconnect()
   document.removeEventListener('keydown', blockCtrlOrCmdCommands)
+  window.removeEventListener('blur', inputManagerBlur)
 })
 </script>
 <style scoped lang="scss">
@@ -124,4 +149,20 @@ onBeforeUnmount(() => {
   height: 100vh;
   background-color: #000;
 }
+.blocker {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+
+  .blocker-text {
+    color: #e4e4e4;
+  }
+}
 </style>

package/package.json

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