bfg-common 1.4.799 → 1.4.800

package/components/common/layout/theHeader/feedback/new/additionalDetails/AdditionalDetails.vue

@@ -27,8 +27,8 @@
       >
         <ui-icon
           name="take-screenshot"
-          width="20"
-          height="20"
+          width="18"
+          height="18"
           class="feedback__btn-icon"
         />
         {{ localization.common.takeScreenshot }}
@@ -45,8 +45,8 @@
         <label id="labelFileLoad" for="fileLoad">
           <ui-icon
             name="upload-icon"
-            width="20"
-            height="20"
+            width="18"
+            height="18"
             class="feedback__btn-icon"
           />
           {{ localization.common.uploadImage }}
@@ -151,7 +151,7 @@
         <div>
           <ui-button
             test-id="feedback-image-annotate-btn"
-            size="md"
+            size="sm"
             type="default"
             variant="outline"
             class=""
@@ -168,7 +168,7 @@
 
           <ui-button
             test-id="feedback-image-remove-btn"
-            size="md"
+            size="sm"
             type="default"
             variant="outline"
             class=""
@@ -461,14 +461,19 @@ watch(
 @import 'assets/scss/common/mixins.scss';
 .additional-details {
   .button-container {
+    :deep(.ui-btn) {
+      font-size: 13px;
+      gap: 8px;
+    }
     .upload-image {
       label {
         @include flex($align: center, $just: center);
         width: 100%;
         height: 100%;
-        font-size: 14px;
         color: inherit;
+        //font-size: 13px;
         font-weight: 500;
+        gap: 8px;
         cursor: pointer;
       }
       input {
@@ -493,15 +498,32 @@ watch(
 
     .ui-btn {
       width: initial;
-
+      height: 28px;
+      font-size: 12px;
+      padding: 0 8px;
+      column-gap: 4px;
+
+      &.undo {
+        &:disabled {
+          color: var(--btn-primary-outline-disabled-color);
+        }
+        svg {
+          transform: scaleX(-1);
+        }
+      }
       &.clear-all {
         color: #ea3223;
+        &:disabled {
+          color: var(--btn-primary-outline-disabled-color);
+        }
       }
 
       &.active {
-        background: var(--feedback-tab-active-bg-color);
         color: var(--feedback-tab-active-text-color);
         border: 1.4px solid var(--feedback-tab-active-text-color);
+        &:hover {
+          background: var(--feedback-tab-active-bg-color);
+        }
       }
     }
   }
@@ -541,6 +563,9 @@ watch(
       gap: 12px;
       .ui-btn {
         width: initial;
+        font-size: 12px;
+        line-height: 14.52px;
+        column-gap: 4px;
 
         &:last-child {
           color: #ea3223;

package/components/common/layout/theHeader/feedback/new/additionalDetails/Headline.vue

@@ -6,10 +6,10 @@
     <ui-icon
       id="feedback-additional-details-info-icon"
       name="info"
-      width="18"
-      height="18"
-      :color="isShowInfo ? '#008FD6' : '#9DA6AD'"
-      class="info-icon pointer"
+      width="16"
+      height="16"
+      class="headline__icon pointer"
+      :class="isShowInfo && 'active'"
       @click="isShowInfo = !isShowInfo"
     />
     <ui-popup-window
@@ -18,8 +18,8 @@
       :elem-id="'feedback-additional-details-info-icon'"
     >
       <div class="common-widget-info">
-        <div class="justify-between flex-align-center">
-          <div class="flex-align-center">
+        <div class="flex justify-between">
+          <div class="flex">
             <ui-icon-icon3 name="info-2" width="16px" height="16px" />
             <span class="title">
               {{ localization.feedback.additionalDetailsHelp }}
@@ -55,6 +55,16 @@ const isShowInfo = ref<boolean>(false)
 .headline {
   @include flex($align: center);
   margin: 32px 0 16px;
+
+  &__icon {
+    color: var(--feedback-tooltip-trigger-color);
+    &:hover {
+      color: var(--feedback-tooltip-hover-trigger-color);
+    }
+    &:active {
+      color: var(--feedback-tooltip-acctive-trigger-color);
+    }
+  }
   &__label {
     line-height: 19.36px;
     font-size: 16px;
@@ -81,6 +91,7 @@ const isShowInfo = ref<boolean>(false)
 
     svg {
       color: var(--feedback-tooltip-close-color);
+      min-width: 16px;
     }
   }
 }

package/components/common/layout/theHeader/feedback/new/description/Description.vue

@@ -53,6 +53,7 @@ const descriptionErrorText = computed<boolean>(() => {
   :deep(.ui-main-textarea) {
     resize: none;
     height: 68px;
+    font-size: 12px;
   }
 }
 </style>

package/components/common/layout/theHeader/feedback/new/email/Email.vue

@@ -6,7 +6,7 @@
       v-model="emailModelLocal"
       :error="emailErrorText"
       type="text"
-      placeholder="placeholder"
+      :placeholder="localization.common.emailAddressOptional"
       test-id="feedback-email"
     />
   </div>

package/components/common/layout/theHeader/feedback/new/subtitle/Subtitle.vue

@@ -6,16 +6,17 @@
     <ui-icon
       id="feedback-description-info-icon"
       name="info"
-      width="18"
-      height="18"
-      :color="isShowInfo ? '#008FD6' : '#9DA6AD'"
-      class="info-icon pointer"
+      width="16"
+      height="16"
+      class="subtitle__icon pointer"
+      :class="isShowInfo && 'active'"
       @click="isShowInfo = !isShowInfo"
     />
     <ui-popup-window
       v-model="isShowInfo"
       width="232px"
       :elem-id="'feedback-description-info-icon'"
+      class="subtitle__tooltip"
     >
       <div class="common-widget-info">
         <div class="headline justify-between flex-align-center">
@@ -52,8 +53,23 @@ const isShowInfo = ref<boolean>(false)
 .subtitle {
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid #e9ebed;
-  padding-bottom: 12px;
+  border-bottom: 1px solid var(--horizontal-line);
+  padding: 24px 0 12px;
+
+  &__icon {
+    color: var(--feedback-tooltip-trigger-color);
+    &:hover {
+      color: var(--feedback-tooltip-hover-trigger-color);
+    }
+    &:active {
+      color: var(--feedback-tooltip-acctive-trigger-color);
+    }
+  }
+  &__tooltip {
+    .flex-align-center {
+      height: 16px;
+    }
+  }
 
   &__label {
     font-size: 12px;

package/components/common/layout/theHeader/feedback/new/tabs/Tabs.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tabs">
-    <h4 class="tabs__title">{{ localization.common.selectType }}</h4>
+    <h4 class="tabs__title">{{ localization.feedback.selectType }}</h4>
 
     <div class="tabs__container">
       <ui-block
@@ -33,13 +33,12 @@ const tabs = computed<any[]>(() =>
 
 <style scoped lang="scss">
 .tabs {
-  margin-top: 16px;
   &__title {
-    line-height: 38px;
-    margin-bottom: 16px;
+    color: var(--feedback-text-color);
     font-size: 16px;
     font-weight: 500;
-    color: var(--feedback-text-color);
+    line-height: 19.36px;
+    margin-bottom: 16px;
   }
   &__container {
     display: flex;
@@ -54,16 +53,15 @@ const tabs = computed<any[]>(() =>
     border: 1px solid var(--feedback-tab-border-color);
     box-shadow: none;
     cursor: pointer;
-  }
-
-  :deep(.block.selected) {
-    border: 1.5px solid var(--feedback-tab-active-text-color);
-    color: var(--feedback-tab-active-text-color);
-    cursor: default;
 
-    .main-info,
-    .main-info-label {
+    &.selected {
+      border: 1.5px solid var(--feedback-tab-active-text-color);
+      background: var(--feedback-tab-active-bg-color);
       color: var(--feedback-tab-active-text-color);
+      cursor: default;
+    }
+    &:not(.selected):hover {
+      background: var(--feedback-tab-hover-bg-color);
     }
   }
 
@@ -73,9 +71,9 @@ const tabs = computed<any[]>(() =>
     gap: 8px;
 
     &-label {
-      font-size: 16px;
+      font-size: 13px;
       font-weight: 500;
-      line-height: 19.36px;
+      line-height: 15.73px;
     }
   }
 }
@@ -83,12 +81,16 @@ const tabs = computed<any[]>(() =>
 <style lang="scss">
 :root {
   --feedback-tab-bg-color: #ffffff;
+  --feedback-tab-hover-bg-color: #f6f7f8;
+  --feedback-tab-active-bg-color: #f0f8fd;
   --feedback-tab-border-color: #e9ebed;
   --feedback-tab-active-text-color: #008fd6;
 }
 
 :root.dark-theme {
   --feedback-tab-bg-color: #1b2a373d;
+  --feedback-tab-hover-bg-color: #283948;
+  --feedback-tab-active-bg-color: #213b4e;
   --feedback-tab-border-color: #e9ebed1f;
   --feedback-tab-active-text-color: #2ba2de;
 }

package/components/common/layout/theHeader/userMenu/modals/changePassword/ChangePasswordNew.vue

@@ -169,7 +169,7 @@ const onHideModal = (): void => {
   }
   &__form {
     @include flex($dir: column);
-    row-gap: 18px;
+    row-gap: 16px;
   }
 }
 </style>

package/components/common/mainNavigationPanel/MainNavigationPanel.vue

@@ -82,8 +82,9 @@ const clickWindow = (event: Event): void => {
   if (
     menuPined.value ||
     mainMenuHovered.value ||
-    target.className.baseVal?.includes('menu-icon') ||
-    target.className.baseVal?.includes('clr-i-outline')
+    target.className.baseVal?.includes?.('menu-icon') ||
+    target.className.baseVal?.includes?.('clr-i-outline') ||
+    target.className?.includes?.('inventory-menu-trigger')
   ) {
     return
   }

package/components/common/mainNavigationPanel/MainNavigationPanelNew.vue

@@ -150,7 +150,7 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 
   .nav-context {
     position: absolute;
-    z-index: 1001;
+    z-index: 9999999;
     height: 100%;
     display: flex;
     flex-direction: column;

package/components/common/mainNavigationPanel/MainNavigationPanelOld.vue

@@ -136,7 +136,7 @@ const localization = computed<UI_I_Localization>(() => useLocal())
   }
   .nav-context {
     position: absolute;
-    z-index: 1001;
+    z-index: 9999999;
     height: 100%;
     display: flex;
     flex-direction: column;

package/components/common/monitor/advanced/tools/chartOptionsModal/Notification.vue

@@ -7,13 +7,13 @@
     test-id="notification-alert"
     @remove="onRemove"
   >
-    <template #default="{ item }">
-      <div class="flex-space-between flex-1">
-        <div class="flex-align-center">
-          <span>{{ item }}</span>
-        </div>
-      </div>
-    </template>
+<!--    <template #default="{ item }">-->
+<!--      <div class="flex-space-between flex-1">-->
+<!--        <div class="flex-align-center">-->
+<!--          <span>{{ item }}</span>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </template>-->
   </atoms-alert>
 </template>
 

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/Timespan.vue

@@ -1,95 +1,95 @@
-<template>
-  <div class="timespan-objects-section-direction">
-    <common-chart-options-modal-counters-timespan-form
-      :language="props.language"
-      :selected-chart-type="props.selectedChartType"
-      :selected-timespan-type="props.selectedTimespanType"
-      :units-count="props.unitsCount"
-      :period-type="props.periodType"
-      :selected-custom-time="props.selectedCustomTime"
-      :custom-date-from="props.customDateFrom"
-      :custom-date-to="props.customDateTo"
-      :custom-time-from="props.customTimeFrom"
-      :custom-time-to="props.customTimeTo"
-      :valid-date-end="props.validDateEnd"
-      @update-chart-type="emits('update-chart-type', $event)"
-      @update-custom-time="emits('update-custom-time', $event)"
-      @update-timespan-type="emits('update-timespan-type', $event)"
-      @update-unit-count="emits('update-unit-count', $event)"
-      @update-period-type="emits('update-period-type', $event)"
-      @update-custom-date-from="emits('update-custom-date-from', $event)"
-      @update-custom-date-to="emits('update-custom-date-to', $event)"
-      @update-custom-time-from="emits('update-custom-time-from', $event)"
-      @update-custom-time-to="emits('update-custom-time-to', $event)"
-    />
-    <common-monitor-advanced-tools-chart-options-modal-counters-timespan-object
-      :type="props.type"
-      :chart="props.chart"
-      :total-cores="props.totalCores"
-      :host-id="props.hostId"
-      :selected-metrics-keys="props.selectedMetricsKeys"
-      :total-metric-items="props.totalMetricItems"
-      :selected-objects="props.selectedObjects"
-      :loading="props.objectsLoading"
-      :current-items="props.objectsData"
-      @select-objects="emits('select-objects', $event)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
-import type {
-  UI_T_ChartHost,
-  UI_T_ChartVm,
-} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
-import type { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/models/interfaces'
-
-const props = defineProps<{
-  type: UI_T_AdvancedType
-  chart: UI_T_ChartHost | UI_T_ChartVm
-  language: string
-  selectedChartType: string
-  selectedTimespanType: string
-  unitsCount: number
-  periodType: string
-  selectedCustomTime: string
-  customDateFrom: string
-  customDateTo: string
-  customTimeFrom: string
-  customTimeTo: string
-  totalCores: number
-  hostId: string
-  selectedMetricsKeys: number[]
-  totalMetricItems: number
-  selectedObjects: string
-  objectsLoading: boolean
-  objectsData: UI_I_ObjectItem[]
-  validDateEnd: number
-}>()
-
-const emits = defineEmits<{
-  (event: 'update-chart-type', value: string): void
-  (event: 'update-custom-time', value: string): void
-  (event: 'update-timespan-type', value: string): void
-  (event: 'update-unit-count', value: number): void
-  (event: 'update-period-type', value: string): void
-  (event: 'update-custom-date-from', value: string): void
-  (event: 'update-custom-date-to', value: string): void
-  (event: 'update-custom-time-from', value: string): void
-  (event: 'update-custom-time-to', value: string): void
-  (event: 'select-objects', value: string): void
-}>()
-</script>
-
-<style scoped lang="scss">
-.timespan-objects-section-direction {
-  display: flex;
-  flex-direction: row;
-}
-@media (max-width: 1024px) {
-  .timespan-objects-section-direction {
-    flex-direction: column;
-  }
-}
-</style>
+<template>
+  <div class="timespan-objects-section-direction">
+    <common-chart-options-modal-counters-timespan-form
+      :language="props.language"
+      :selected-chart-type="props.selectedChartType"
+      :selected-timespan-type="props.selectedTimespanType"
+      :units-count="props.unitsCount"
+      :period-type="props.periodType"
+      :selected-custom-time="props.selectedCustomTime"
+      :custom-date-from="props.customDateFrom"
+      :custom-date-to="props.customDateTo"
+      :custom-time-from="props.customTimeFrom"
+      :custom-time-to="props.customTimeTo"
+      :valid-date-end="props.validDateEnd"
+      @update-chart-type="emits('update-chart-type', $event)"
+      @update-custom-time="emits('update-custom-time', $event)"
+      @update-timespan-type="emits('update-timespan-type', $event)"
+      @update-unit-count="emits('update-unit-count', $event)"
+      @update-period-type="emits('update-period-type', $event)"
+      @update-custom-date-from="emits('update-custom-date-from', $event)"
+      @update-custom-date-to="emits('update-custom-date-to', $event)"
+      @update-custom-time-from="emits('update-custom-time-from', $event)"
+      @update-custom-time-to="emits('update-custom-time-to', $event)"
+    />
+    <common-monitor-advanced-tools-chart-options-modal-counters-timespan-object
+      :type="props.type"
+      :chart="props.chart"
+      :total-cores="props.totalCores"
+      :host-id="props.hostId"
+      :selected-metrics-keys="props.selectedMetricsKeys"
+      :total-metric-items="props.totalMetricItems"
+      :selected-objects="props.selectedObjects"
+      :loading="props.objectsLoading"
+      :current-items="props.objectsData"
+      @select-objects="emits('select-objects', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
+import type {
+  UI_T_ChartHost,
+  UI_T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
+import type { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/models/interfaces'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+  chart: UI_T_ChartHost | UI_T_ChartVm
+  language: string
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  totalCores: number
+  hostId: string
+  selectedMetricsKeys: number[]
+  totalMetricItems: number
+  selectedObjects: string
+  objectsLoading: boolean
+  objectsData: UI_I_ObjectItem[]
+  validDateEnd: number
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-chart-type', value: string): void
+  (event: 'update-custom-time', value: string): void
+  (event: 'update-timespan-type', value: string): void
+  (event: 'update-unit-count', value: number): void
+  (event: 'update-period-type', value: string): void
+  (event: 'update-custom-date-from', value: string): void
+  (event: 'update-custom-date-to', value: string): void
+  (event: 'update-custom-time-from', value: string): void
+  (event: 'update-custom-time-to', value: string): void
+  (event: 'select-objects', value: string): void
+}>()
+</script>
+
+<style scoped lang="scss">
+.timespan-objects-section-direction {
+  display: flex;
+  flex-direction: row;
+}
+@media (max-width: 1024px) {
+  .timespan-objects-section-direction {
+    flex-direction: column;
+  }
+}
+</style>

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

@@ -95,7 +95,7 @@
           <tr>
             <td></td>
             <td class="text-format-date">
-              (date and time are in ISO 8601 format)
+              ({{ localization.inventoryMonitor.dateTimeIsoFormat }})
             </td>
           </tr>
         </tbody>