bfg-common 1.6.95 → 1.6.97

package/components/common/pages/shortcuts/category/CategoryOld.vue

@@ -7,6 +7,7 @@
       <common-pages-shortcuts-block
         v-for="(item, key) in props.blockItems"
         :key="key"
+        v-permission="item.permission"
         :item="item"
         :test-id="item.testId"
       />

package/components/common/pages/shortcuts/lib/models/interfaces.ts

@@ -6,9 +6,11 @@ export interface UI_I_BlockItem {
   nav?: string
   testId?: string
   disabled?: boolean
+  permission?: string
 }
 
 export interface UI_I_ShortcutsItems {
   title: string
   blockItems: UI_I_BlockItem[]
+  permission?: string
 }

package/components/common/pages/tasks/Tasks.vue

@@ -58,7 +58,10 @@ const getTasks = async (): Promise<void> => {
     sortBy: sort.value || '',
     filter: filter.value || '',
   }
-  await $store.dispatch('tasks/A_GET_TASKS', payload)
+  await $store.dispatch('tasks/A_GET_TASKS', {
+    data: payload,
+    project: props.project,
+  })
 }
 const onUpdatePagination = (event: UI_I_Pagination): void => {
   pagination.value = event

package/components/common/pages/tasks/table/Table.vue

@@ -67,28 +67,30 @@
             <ui-icon name="vertical-dotes" width="20" height="20" />
           </span>
         </ui-button>
-        <ui-dropdown
-          :show="actionsShowId === item.data.id"
-          :test-id="`data-table-task-dropdown-${item.data.id}`"
-          :items="actions"
-          :elem-id="`data-table-task-action-${item.data.id}`"
-          width="max-content"
-          left
-          @select="onSelectAction(item.data.target, $event)"
-          @hide="onHideActionsDropdown"
-        >
-          <template #row="{ item: dropMenu }">
-            <ui-icon
-              v-if="dropMenu.iconName === 'hide'"
-              name="password-hide"
-              width="16"
-              height="16"
-            />
-            <span class="action-text">
-              {{ dropMenu.text }}
-            </span>
-          </template>
-        </ui-dropdown>
+        <Teleport to="body">
+          <ui-dropdown
+            :show="actionsShowId === item.data.id"
+            :test-id="`data-table-task-dropdown-${item.data.id}`"
+            :items="actions"
+            :elem-id="`data-table-task-action-${item.data.id}`"
+            width="max-content"
+            left
+            @select="onSelectAction(item.data.target, $event)"
+            @hide="onHideActionsDropdown"
+          >
+            <template #row="{ item: dropMenu }">
+              <ui-icon
+                v-if="dropMenu.iconName === 'hide'"
+                name="password-hide"
+                width="16"
+                height="16"
+              />
+              <span class="action-text">
+                {{ dropMenu.text }}
+              </span>
+            </template>
+          </ui-dropdown>
+        </Teleport>
       </div>
     </template>
 
@@ -162,7 +164,7 @@ const texts = computed<UI_I_TableTexts>(() => ({
   searchHere: localization.value.common.searchHere,
   rowsPerPage: localization.value.common.rowsPerPage,
   of: localization.value.common.of,
-  selected: localization.value.common.selected,
+  selected: localization.value.common.selected2,
   columns: localization.value.common.columns,
   previous: localization.value.common.previous,
   next: localization.value.common.next,

package/components/common/readyToComplete/New.vue

@@ -74,6 +74,7 @@ const dataLocal = computed<UI_I_TableInfoItem[]>(() => {
   row-gap: 12px;
   column-gap: 24px;
   margin-top: 16px;
+  padding-bottom: 16px;
 
   &.lang-ru {
     .details-item {

package/components/common/spiceConsole/SpiceConsole.vue

@@ -13,6 +13,23 @@
       @toggle-fullscreen="toggle"
       @send-alt-command="onSendAltCommand"
     />
+
+    <div id="reconnect">
+      <div class="flex flex-align-center h-full justify-center">
+        <h3>{{ localization.remoteConsole.tryingToConnect }}</h3>
+      </div>
+    </div>
+    <div id="cancel-reconnect">
+      <div class="flex flex-col flex-align-center h-full justify-center">
+        <h3>{{ localization.remoteConsole.connectionTimedOut }}</h3>
+        <p class="mt-2">
+          {{ localization.remoteConsole.connectionTimedOutDesc }}
+        </p>
+        <span class="mt-4 pointer" @click="onReloadPage">{{
+          localization.remoteConsole.connectionTimedOutBtn
+        }}</span>
+      </div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
@@ -124,6 +141,10 @@ const inputManagerBlur = (): void => {
   isShowBlocker.value = true
 }
 
+const onReloadPage = (): void => {
+  location.reload()
+}
+
 onMounted(() => {
   connectWS()
   document.addEventListener('keydown', blockCtrlOrCmdCommands)
@@ -181,4 +202,21 @@ onBeforeUnmount(() => {
     color: #e4e4e4;
   }
 }
+
+#reconnect,
+#cancel-reconnect {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: #ffffff;
+}
+#reconnect {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+#cancel-reconnect {
+  background-color: #000000;
+}
 </style>

package/components/common/spiceConsole/keyboard/Keyboard.vue

@@ -259,8 +259,11 @@ const onKeyPress = (key: UI_I_KeyboardRowItem): void => {
   if (isCodeEvent) {
     checkAndSendModifiers()
     keyEvent('keydown', isCodeEvent, key)
-    keyEvent('keypress', isCodeEvent, key)
-    keyEvent('keyup', isCodeEvent, key)
+    if (!isCtrlPressed.value) {
+      // TODO DS-1074 Найти решение получе
+      keyEvent('keypress', isCodeEvent, key)
+      keyEvent('keyup', isCodeEvent, key)
+    }
 
     checkAndOffModifiers()
     window.app.inputProcess.clientGui.inputManager.input.val('_')

package/components/common/split/horizontal/New.vue

@@ -100,7 +100,7 @@ const rightPanelStyle = computed<any>(() => {
     width = `calc(${leftPanelWLocal.value}% - 1.5px)`
   }
   if (props.showToggleButton && leftPanelCollapsed.value) {
-    width = 'calc(100% - 20px)'
+    width = 'calc(100% - 16px)'
   }
 
   if (props.hideLeftPanel && leftPanelCollapsed.value)
@@ -373,10 +373,13 @@ onUnmounted(() => {
       transition-delay: 0.25s;
       transition-duration: 0.25s;
       width: 2px;
-      margin-left: 1px;
+      //margin-left: 1px;
       border-radius: 4px;
       height: 24px;
-      top: calc(50% - 12.5px);
+      //top: calc(50% - 12.5px);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
     }
   }
   .secondPanel {

package/components/common/split/horizontal/Old.vue

@@ -84,7 +84,7 @@ const rightPanelStyle = computed<any>(() => {
     width = `calc(${leftPanelW.value}% - 1.5px)`
   }
   if (props.showToggleButton && leftPanelCollapsed.value) {
-    width = 'calc(100% - 20px)'
+    width = 'calc(100% - 16px)'
   }
 
   if (props.hideLeftPanel && leftPanelCollapsed.value)

package/components/common/split/vertical/New.vue

@@ -3,13 +3,22 @@
     :id="props.elementId"
     :class="['fill-parent vertical', { dragging: props.isDrag }]"
   >
-    <div :style="props.topPanelStyle" class="vui-horizontal-panel firstPanel">
+    <div
+      :style="props.topPanelStyle"
+      :class="[
+        'vui-horizontal-panel firstPanel',
+        {
+          'hidden-second': !props.bottomPermission,
+        },
+      ]"
+    >
       <div class="vui-horizontal-panel sec-nav-container">
         <slot name="firstPanel" />
       </div>
     </div>
 
     <div
+      v-if="props.bottomPermission"
       :id="`gutter-${props.elementId}`"
       class="gutter gutter-vertical"
       tabindex="0"
@@ -20,7 +29,16 @@
       <div class="gutter-vertical-handler"></div>
     </div>
 
-    <div :style="props.bottomPanelStyle" class="secondPanel bottom">
+    <div
+      v-if="props.bottomPermission"
+      :style="props.bottomPanelStyle"
+      :class="[
+        'secondPanel bottom',
+        {
+          hidden: !props.bottomPermission,
+        },
+      ]"
+    >
       <slot name="secondPanel" />
     </div>
   </div>
@@ -37,6 +55,7 @@ const props = defineProps<{
   isDrag: boolean
   topPanelStyle: UI_I_SplitVerticalStyle
   bottomPanelStyle: UI_I_SplitVerticalStyle
+  bottomPermission: boolean
 }>()
 </script>
 
@@ -52,10 +71,14 @@ const props = defineProps<{
 </style>
 
 <style scoped lang="scss">
-.fill-parent {
+.vertical {
   &.dragging {
     .gutter-vertical.gutter {
-      background-color: var(--gutter-active-bg-color);
+      background-color: var(--new-gutter-active-bg-color);
+
+      &::before {
+        background-color: var(--new-gutter-active-before-bg-color);
+      }
     }
   }
 
@@ -63,6 +86,11 @@ const props = defineProps<{
     max-height: calc(100% - 36px);
     height: calc(100vh - 36px);
 
+    &.hidden-second {
+      max-height: 100%;
+      height: 100% !important;
+    }
+
     .sec-nav-container {
       width: 100%;
       height: 100%;
@@ -95,11 +123,11 @@ const props = defineProps<{
     //}
 
     &:hover {
-      background-color: var(--gutter-hover-bg-color);
+      background-color: var(--new-gutter-hover-bg-color);
       cursor: row-resize;
 
       &:before {
-        background-color: var(--gutter-handler-active-bg-color);
+        background-color: var(--new-gutter-active-before-bg-color);
       }
     }
 
@@ -112,8 +140,9 @@ const props = defineProps<{
       transition-duration: 0.25s;
       width: 24px;
       height: 2px;
-      left: calc(50% - 12px);
-      top: calc(50% - 1px);
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
       border-radius: 4px;
     }
   }
@@ -122,6 +151,11 @@ const props = defineProps<{
     overflow: hidden;
     flex: 1;
     box-shadow: var(--second-panel-box-shadow);
+
+    &.hidden {
+      display: none;
+      height: 0;
+    }
     //z-index: calc(var(--z-default) + 1);
   }
 }

package/components/common/split/vertical/Old.vue

@@ -3,13 +3,22 @@
     :id="props.elementId"
     :class="['fill-parent vertical', { dragging: props.isDrag }]"
   >
-    <div :style="props.topPanelStyle" class="vui-horizontal-panel firstPanel">
+    <div
+      :style="props.topPanelStyle"
+      :class="[
+        'vui-horizontal-panel firstPanel',
+        {
+          'hidden-second': !props.bottomPermission,
+        },
+      ]"
+    >
       <div class="vui-horizontal-panel sec-nav-container">
         <slot name="firstPanel" />
       </div>
     </div>
 
     <div
+      v-if="props.bottomPermission"
       :id="`gutter-${props.elementId}`"
       class="gutter gutter-vertical"
       tabindex="0"
@@ -20,7 +29,16 @@
       <div class="gutter-vertical-handler"></div>
     </div>
 
-    <div :style="props.bottomPanelStyle" class="secondPanel bottom">
+    <div
+      v-if="props.bottomPermission"
+      :style="props.bottomPanelStyle"
+      :class="[
+        'secondPanel bottom',
+        {
+          hidden: !props.bottomPermission,
+        },
+      ]"
+    >
       <slot name="secondPanel" />
     </div>
   </div>
@@ -37,6 +55,7 @@ const props = defineProps<{
   isDrag: boolean
   topPanelStyle: UI_I_SplitVerticalStyle
   bottomPanelStyle: UI_I_SplitVerticalStyle
+  bottomPermission: boolean
 }>()
 </script>
 
@@ -52,6 +71,11 @@ const props = defineProps<{
     max-height: calc(100% - 36px);
     height: calc(100vh - 36px);
 
+    &.hidden-second {
+      max-height: 100%;
+      height: 100% !important;
+    }
+
     .sec-nav-container {
       width: 100%;
       height: 100%;
@@ -109,6 +133,11 @@ const props = defineProps<{
     height: auto;
     overflow: hidden;
     flex: 1;
+
+    &.hidden {
+      display: none;
+      height: 0;
+    }
   }
 }
 </style>

package/components/common/split/vertical/Vertical.vue

@@ -7,6 +7,7 @@
     :is-drag="isDrag"
     :top-panel-style="topPanelStyle"
     :bottom-panel-style="bottomPanelStyle"
+    :bottom-permission="props.bottomPermission"
   >
     <template #firstPanel>
       <slot name="firstPanel" />
@@ -25,6 +26,7 @@
     :is-drag="isDrag"
     :top-panel-style="topPanelStyle"
     :bottom-panel-style="bottomPanelStyle"
+    :bottom-permission="props.bottomPermission"
   >
     <template #firstPanel>
       <slot name="firstPanel" />
@@ -46,12 +48,14 @@ const props = withDefaults(
     topPanelH?: number
     topPanelMinHeight?: number
     bottomPanelMinHeight?: number
+    bottomPermission?: boolean
   }>(),
   {
     topPanelMinHeight: 200, // 200px
     bottomPanelMinHeight: 200, // 200px
     topPanelHForce: '',
     topPanelH: undefined,
+    bottomPermission: true,
   }
 )
 const emits = defineEmits<{

package/components/common/tools/Actions.vue

@@ -5,12 +5,16 @@
     :style="{ paddingRight: spaceForCollapseBtn + 'px' }"
     class="btn-group"
   >
-    <div v-for="(button, key) in props.actions" :key="button.type">
+    <div
+      v-for="(button, key) in props.actions"
+      :key="button.type"
+      :title="button.title"
+    >
       <label
         v-if="button.uploaded"
         v-development="button.development"
         v-permission="button.permission"
-        >
+      >
         <span
           :class="[`btn btn-link ${props.size}`]"
           :data-id="`${button.testId}-text`"
@@ -35,7 +39,7 @@
         v-development="button.development"
         v-permission="button.permission"
         :data-id="button.testId"
-        :class="[`btn btn-link ${props.size}`]"
+        :class="[`btn btn-link ${props.size} ${button.class}`]"
         :disabled="button.disabled"
         @click="onClickButton(button.type)"
       >
@@ -101,6 +105,7 @@ const collapsedItems = computed<UI_I_CollapseNavItem[]>(() => {
         permission: item.permission,
         uploaded: item.uploaded,
         testId: item.testId,
+        title: item.title,
       }
     })
 })

package/components/common/tools/lib/models/interfaces.ts

@@ -7,4 +7,6 @@ export interface UI_I_Button {
   testId?: string
   iconName?: string
   permission?: string
+  title?: string
+  class?: string
 }

package/components/common/tooltip/Help.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-align-center relative">
+  <div class="flex-align-center relative tooltip">
     <ui-icon
       :id="`${props.helpId}`"
       :data-id="`${props.testId}-icon-trigger`"
@@ -26,12 +26,12 @@
           width: props.dropdownWidth,
           maxWidth: props.dropdownMaxWidth,
         }"
-        class="help-content"
+        class="tooltip__content"
       >
         <div class="flex justify-between column-gap-2">
           <div class="flex">
             <ui-icon :name="tooltipStatus" width="16" height="16" />
-            <h3 class="title">
+            <h3 class="tooltip__content-title">
               {{ props.title || localization.mainNavigation.help }}
             </h3>
           </div>
@@ -46,7 +46,7 @@
 
         <slot />
 
-        <p v-if="props.helpText" class="description">
+        <p v-if="props.helpText" class="tooltip__content-description">
           {{ props.helpText }}
         </p>
       </div>
@@ -143,30 +143,30 @@ const tooltipStatus = computed<string>(() =>
     pointer-events: none;
   }
 }
-.help-content {
-  padding: 16px;
-
-  .title {
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 16px;
-    color: var(--title-form-first-color);
-    margin-left: 8px;
-  }
-  .description {
-    font-family: 'Inter', sans-serif;
-    color: var(--title-form-first-color);
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 18px;
-    margin-top: 12px;
-    word-break: break-word;
-    white-space: normal;
-  }
-
-  svg {
-    color: var(--alert-icon);
-    min-width: 16px;
+.tooltip {
+  &__content {
+    padding: 16px;
+    &-title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16px;
+      color: var(--title-form-first-color);
+      margin-left: 8px;
+    }
+    &-description {
+      font-family: 'Inter', sans-serif;
+      color: var(--title-form-first-color);
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 18px;
+      margin-top: 12px;
+      word-break: break-word;
+      white-space: normal;
+    }
+    svg {
+      color: var(--alert-icon);
+      min-width: 16px;
+    }
   }
 }
 </style>

package/components/common/vm/actions/add/New.vue

@@ -55,13 +55,13 @@
           <div ref="subTitleBlockName">
             <div class="subtitle-block">
               <div
-                  id="name-alert-wrapper"
-                  :class="[{ 'mb-4': !isNameAlertWrapperEmpty }]"
+                id="name-alert-wrapper"
+                :class="[{ 'mb-4': !isNameAlertWrapperEmpty }]"
               ></div>
               <ui-wizard-subtitle
-                  :sub-title="
-                localization.vmWizard.specifyUniqueNameAndTargetLocationForVm
-              "
+                :sub-title="
+                  localization.vmWizard.specifyUniqueNameAndTargetLocationForVm
+                "
               />
             </div>
           </div>
@@ -153,7 +153,8 @@
             :datastore="props.datastore"
             :is-datastore-loading="props.isDatastoreLoading"
             :get-datastore-table-func="props.getDatastoreTableFunc"
-            :storage="props.vmtSettings?.storage"
+            :storage="storageLocal"
+            @change-storage="setSelectedStorageIdLocal"
             @submit="emits('change-storage', $event)"
             @has-errors="isStorageAlertWrapperEmpty = $event"
           />
@@ -593,6 +594,20 @@ const isNameAlertWrapperEmpty = ref<boolean>(false)
 // const isComputeResourceAlertWrapperEmpty = ref<boolean>(false)
 const isStorageAlertWrapperEmpty = ref<boolean>(false)
 const isCompatibilityAlertWrapperEmpty = ref<boolean>(false)
+
+const storageLocal = computed<UI_I_DatastoreTableItem | undefined>(() => {
+  return selectedStorageLocal.value ?? props.vmtSettings?.storage
+})
+
+/* TODO: В дальнейшем необходимо вынести все данные наружу и передавать его через v-model */
+// рефакторинг. При возврате на шаг выбора хранилища ранее выбранное хранилище не отображается как выбранное.
+// Для хранилища в v-model необходимо сохранять ID хранилища, а не ключ индекса.
+const selectedStorageLocal = ref<UI_I_DatastoreTableItem | null>(null)
+const setSelectedStorageIdLocal = (datastore: UI_I_DatastoreTableItem) => {
+  selectedStorageLocal.value = {
+    id: datastore.id,
+  } as UI_I_DatastoreTableItem
+}
 </script>
 
 <style>