bfg-common 1.4.882 → 1.4.884

package/components/common/modals/unsavedChanges/UnsavedChanges.vue

@@ -1,56 +1,56 @@
-<template>
-  <div class="absolute">
-    <common-modals-confirmation
-      v-if="show"
-      is-new-view
-      :headline="localization.common.unsavedChanges"
-      :description="localization.common.unsavedChangesDescription"
-      :modal-texts="modalTexts"
-      @hide-modal="onHide"
-      @confirm="onLeave"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ModalTexts } from 'bfg-uikit/components/ui/modal/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const emits = defineEmits<{
-  (event: 'leave'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const modalTexts = ref<UI_I_ModalTexts>({
-  resetToDefault: '',
-  button1: localization.value.common.cancel,
-  button2: localization.value.common.leave,
-})
-
-const show = defineModel<boolean>('show', { required: true })
-
-const onHide = (): void => {
-  show.value = false
-}
-const onLeave = (): void => {
-  emits('leave')
-}
-</script>
-
-<style>
-:root {
-  --unsaved-changes-modal-bg-color: var(--modal-bg);
-}
-:root.dark-theme {
-  --unsaved-changes-modal-bg-color: #334453;
-}
-</style>
-<style scoped lang="scss">
-:deep(.ui-popup_content) {
-  background-color: var(--unsaved-changes-modal-bg-color);
-}
-:deep(.ui-popup_footer-transparent-block) {
-  display: none;
-}
-</style>
+<template>
+  <div class="absolute">
+    <common-modals-confirmation
+      v-if="show"
+      is-new-view
+      :headline="localization.common.unsavedChanges"
+      :description="localization.common.unsavedChangesDescription"
+      :modal-texts="modalTexts"
+      @hide-modal="onHide"
+      @confirm="onLeave"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ModalTexts } from 'bfg-uikit/components/ui/modal/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const emits = defineEmits<{
+  (event: 'leave'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const modalTexts = ref<UI_I_ModalTexts>({
+  resetToDefault: '',
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.leave,
+})
+
+const show = defineModel<boolean>('show', { required: true })
+
+const onHide = (): void => {
+  show.value = false
+}
+const onLeave = (): void => {
+  emits('leave')
+}
+</script>
+
+<style>
+:root {
+  --unsaved-changes-modal-bg-color: var(--modal-bg);
+}
+:root.dark-theme {
+  --unsaved-changes-modal-bg-color: #334453;
+}
+</style>
+<style scoped lang="scss">
+:deep(.ui-popup_content) {
+  background-color: var(--unsaved-changes-modal-bg-color);
+}
+:deep(.ui-popup_footer-transparent-block) {
+  display: none;
+}
+</style>

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

@@ -29,6 +29,7 @@
     :valid-date-end="props.validDateEnd"
     :format-date="props.formatDate"
     :selected-table-row="selectedTableRow"
+    :selected-node-name="props.selectedNodeName"
     project="procurator"
     @update-tools="emits('update-tools', $event)"
     @export-graph="onExporting"
@@ -136,6 +137,7 @@ const props = defineProps<{
   disabledPeriod?: boolean
   disabledView?: boolean
   isEmpty?: boolean
+  selectedNodeName?: string
 }>()
 
 const emits = defineEmits<{

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

@@ -42,6 +42,7 @@
         :objects-data="props.objectsData"
         :valid-date-end="props.validDateEnd"
         :format-date="props.formatDate"
+        :selected-node-name="props.selectedNodeName"
         @update-tools="emits('update-tools', $event)"
         @exporting="emits('export-graph', $event)"
         @open-advanced-page="emits('open-advanced-page')"
@@ -55,23 +56,25 @@
         @delete-option="emits('delete-option')"
         @submit-options="emits('submit-options', $event)"
       />
-      <div class="graph-container">
-        <common-monitor-advanced-graph-view
+      <div class="advanced-bottom-container">
+        <div class="graph-container">
+          <common-monitor-advanced-graph-view
+            :loading="props.advancedLoading"
+            :data="props.data"
+            :export="props.exportGraphType"
+            :selected-row="props.selectedTableRow"
+            :dark-mode="props.darkMode"
+            :language="props.language"
+            :selected-chart-type="props.selectedChartType"
+            @open-advanced-page="emits('open-advanced-page')"
+          />
+        </div>
+        <common-monitor-advanced-table
           :loading="props.advancedLoading"
-          :data="props.data"
-          :export="props.exportGraphType"
-          :selected-row="props.selectedTableRow"
-          :dark-mode="props.darkMode"
-          :language="props.language"
-          :selected-chart-type="props.selectedChartType"
-          @open-advanced-page="emits('open-advanced-page')"
+          :data="props.tableData"
+          @select="emits('selected-table-row', $event)"
         />
       </div>
-      <common-monitor-advanced-table
-        :loading="props.advancedLoading"
-        :data="props.tableData"
-        @select="emits('selected-table-row', $event)"
-      />
     </template>
   </div>
 </template>
@@ -123,6 +126,7 @@ const props = defineProps<{
   disabledPeriod?: boolean
   disabledView?: boolean
   isEmpty?: boolean
+  selectedNodeName?: string
 }>()
 
 const emits = defineEmits<{
@@ -165,6 +169,8 @@ const localSelectedTimespanType = computed<string>({
 <style scoped lang="scss">
 .advanced {
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 
   .title {
     font-size: 18px;
@@ -172,8 +178,14 @@ const localSelectedTimespanType = computed<string>({
     padding: 16px 6px 12px 6px;
     color: var(--advanced-text-color);
   }
-  .graph-container {
-    margin: 0 6px 0 6px;
+  .advanced-bottom-container {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+
+    .graph-container {
+      margin: 0 6px 0 6px;
+    }
   }
 }
 </style>

package/components/common/monitor/advanced/graphView/GraphView.vue

@@ -9,7 +9,6 @@
       :chart-helper="chartHelper"
       :export-type="props.export"
       :selected-row="props.selectedRow"
-      :group-name="props.data?.groupName || ''"
     />
     <common-monitor-advanced-graph-view-old
       v-else

package/components/common/monitor/advanced/graphView/GraphViewNew.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="advanced-graph-container">
-    <ui-skeleton-long-metric v-if="props.isLoading" :title="props.groupName" />
+  <div :class="['advanced-graph-container', { loading: props.isLoading }]">
+    <ui-skeleton-long-metric v-if="props.isLoading" height="336px" />
     <template v-if="!props.loading && props.chartData">
       <common-graph
         :chart="props.chart"
@@ -24,12 +24,13 @@ const props = defineProps<{
   chartHelper: number
   exportType: string
   selectedRow: number[]
-  groupName: string
 }>()
 </script>
 
 <style scoped lang="scss">
 .advanced-graph-container {
-  min-height: 400px;
+  &:not(.loading) {
+    min-height: 400px;
+  }
 }
 </style>

package/components/common/monitor/advanced/table/tableNew/TableNew.vue

@@ -69,8 +69,15 @@ const tableTexts = computed<UI_I_TableTexts>(() =>
 
 <style scoped lang="scss">
 .advanced-main-table {
-  margin: 12px 6px 0 6px;
+  margin: 12px 6px 16px 6px;
 
+  :deep(.title-container) {
+    height: 20px;
+
+    h5 {
+      margin-bottom: 0;
+    }
+  }
   .color-circle {
     width: 18px;
     height: 18px;

package/components/common/monitor/advanced/table/tableNew/lib/config/options.ts

@@ -20,7 +20,7 @@ export const bodyOptions = (
         col: 'col0',
         colName: 'key',
         text: localization.common.key,
-        width: '150px',
+        width: '96px',
         isSortable: false,
         sort: 'asc',
         show: true,
@@ -40,7 +40,7 @@ export const bodyOptions = (
         col: 'col2',
         colName: 'measurement',
         text: localization.common.measurement,
-        width: '150px',
+        width: '192px',
         isSortable: true,
         sort: 'asc',
         show: true,

package/components/common/monitor/advanced/tools/Tools.vue

@@ -1,97 +1,98 @@
 <template>
   <common-monitor-advanced-tools-new
-    v-if="isNewView"
-    v-model:selected-view="selectedView"
-    v-model:is-show-modal-local="isShowModal"
-    v-model:selected-period="selectedPeriod"
-    :selected-timespan-type="localSelectedTimespanType"
-    :type="props.type"
-    :chart-title-date="chartTitleDate"
-    :language="props.language"
-    :selected-counters-keys="props.selectedCountersKeys"
-    :selected-metric="props.selectedMetric"
-    :disabled-period="props.disabledPeriod"
-    :disabled-view="props.disabledView"
-    :selected-chart-type="props.selectedChartType"
-    :units-count="props.unitsCount"
-    :period-type="props.periodType"
-    :selected-custom-time="props.selectedCustomTime"
-    :selected-chart-option-name="props.selectedChartOptionName"
-    :custom-date-from="props.customDateFrom"
-    :custom-date-to="props.customDateTo"
-    :custom-time-from="props.customTimeFrom"
-    :custom-time-to="props.customTimeTo"
-    :total-cores="totalCores"
-    :host-id="props.hostId"
-    :selected-objects="props.selectedObjects"
-    :project="props.project"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    :format-date="props.formatDate"
-    :view-options="viewOptions"
-    :period-options="periodOptions"
-    @save-option-name="onSaveOptionName"
-    @change-period="updateTools"
-    @change-view="updateTools"
-    @select-row="emits('select-row', $event)"
-    @select-metric-local="emits('select-metric-local', $event)"
-    @update-chart-type="emits('update-chart-type', $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-time="emits('update-custom-time', $event)"
-    @delete-option="onDeleteOption"
-    @submit-options="emits('submit-options', $event)"
+      v-if="isNewView"
+      v-model:selected-view="selectedView"
+      v-model:is-show-modal-local="isShowModal"
+      v-model:selected-period="selectedPeriod"
+      :selected-timespan-type="localSelectedTimespanType"
+      :type="props.type"
+      :chart-title-date="chartTitleDate"
+      :language="props.language"
+      :selected-counters-keys="props.selectedCountersKeys"
+      :selected-metric="props.selectedMetric"
+      :disabled-period="props.disabledPeriod"
+      :disabled-view="props.disabledView"
+      :selected-chart-type="props.selectedChartType"
+      :units-count="props.unitsCount"
+      :period-type="props.periodType"
+      :selected-custom-time="props.selectedCustomTime"
+      :selected-chart-option-name="props.selectedChartOptionName"
+      :custom-date-from="props.customDateFrom"
+      :custom-date-to="props.customDateTo"
+      :custom-time-from="props.customTimeFrom"
+      :custom-time-to="props.customTimeTo"
+      :total-cores="totalCores"
+      :host-id="props.hostId"
+      :selected-objects="props.selectedObjects"
+      :project="props.project"
+      :objects-loading="props.objectsLoading"
+      :objects-data="props.objectsData"
+      :valid-date-end="props.validDateEnd"
+      :format-date="props.formatDate"
+      :view-options="viewOptions"
+      :period-options="periodOptions"
+      :selected-node-name="props.selectedNodeName"
+      @save-option-name="onSaveOptionName"
+      @change-period="updateTools"
+      @change-view="updateTools"
+      @select-row="emits('select-row', $event)"
+      @select-metric-local="emits('select-metric-local', $event)"
+      @update-chart-type="emits('update-chart-type', $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-time="emits('update-custom-time', $event)"
+      @delete-option="onDeleteOption"
+      @submit-options="emits('submit-options', $event)"
   />
   <common-monitor-advanced-tools-old
-    v-else
-    v-model:selected-view="selectedView"
-    v-model:is-show-modal-local="isShowModal"
-    v-model:selected-period="selectedPeriod"
-    :selected-timespan-type="localSelectedTimespanType"
-    :type="props.type"
-    :chart-title="props.chartTitle"
-    :chart-title-date="chartTitleDate"
-    :language="props.language"
-    :selected-counters-keys="props.selectedCountersKeys"
-    :selected-metric="props.selectedMetric"
-    :disabled-period="props.disabledPeriod"
-    :disabled-view="props.disabledView"
-    :selected-chart-type="props.selectedChartType"
-    :units-count="props.unitsCount"
-    :period-type="props.periodType"
-    :selected-custom-time="props.selectedCustomTime"
-    :selected-chart-option-name="props.selectedChartOptionName"
-    :custom-date-from="props.customDateFrom"
-    :custom-date-to="props.customDateTo"
-    :custom-time-from="props.customTimeFrom"
-    :custom-time-to="props.customTimeTo"
-    :total-cores="totalCores"
-    :host-id="props.hostId"
-    :selected-objects="props.selectedObjects"
-    :project="props.project"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    :format-date="props.formatDate"
-    :options-names="optionsNames"
-    :view-options="viewOptions"
-    :period-options="periodOptions"
-    @save-option-name="onSaveOptionName"
-    @change-period="updateTools"
-    @change-view="updateTools"
-    @exporting="emits('exporting', $event)"
-    @open-advanced-page="emits('open-advanced-page')"
-    @select-row="emits('select-row', $event)"
-    @select-metric-local="emits('select-metric-local', $event)"
-    @update-chart-type="emits('update-chart-type', $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-time="emits('update-custom-time', $event)"
-    @delete-option="onDeleteOption"
-    @submit-options="emits('submit-options', $event)"
+      v-else
+      v-model:selected-view="selectedView"
+      v-model:is-show-modal-local="isShowModal"
+      v-model:selected-period="selectedPeriod"
+      :selected-timespan-type="localSelectedTimespanType"
+      :type="props.type"
+      :chart-title="props.chartTitle"
+      :chart-title-date="chartTitleDate"
+      :language="props.language"
+      :selected-counters-keys="props.selectedCountersKeys"
+      :selected-metric="props.selectedMetric"
+      :disabled-period="props.disabledPeriod"
+      :disabled-view="props.disabledView"
+      :selected-chart-type="props.selectedChartType"
+      :units-count="props.unitsCount"
+      :period-type="props.periodType"
+      :selected-custom-time="props.selectedCustomTime"
+      :selected-chart-option-name="props.selectedChartOptionName"
+      :custom-date-from="props.customDateFrom"
+      :custom-date-to="props.customDateTo"
+      :custom-time-from="props.customTimeFrom"
+      :custom-time-to="props.customTimeTo"
+      :total-cores="totalCores"
+      :host-id="props.hostId"
+      :selected-objects="props.selectedObjects"
+      :project="props.project"
+      :objects-loading="props.objectsLoading"
+      :objects-data="props.objectsData"
+      :valid-date-end="props.validDateEnd"
+      :format-date="props.formatDate"
+      :options-names="optionsNames"
+      :view-options="viewOptions"
+      :period-options="periodOptions"
+      @save-option-name="onSaveOptionName"
+      @change-period="updateTools"
+      @change-view="updateTools"
+      @exporting="emits('exporting', $event)"
+      @open-advanced-page="emits('open-advanced-page')"
+      @select-row="emits('select-row', $event)"
+      @select-metric-local="emits('select-metric-local', $event)"
+      @update-chart-type="emits('update-chart-type', $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-time="emits('update-custom-time', $event)"
+      @delete-option="onDeleteOption"
+      @submit-options="emits('submit-options', $event)"
   />
 </template>
 
@@ -144,6 +145,7 @@ const props = defineProps<{
   formatDate: string
   disabledPeriod?: boolean
   disabledView?: boolean
+  selectedNodeName?: string
 }>()
 
 const emits = defineEmits<{
@@ -181,31 +183,31 @@ const localSelectedTimespanType = computed<string>({
 
 const optionsNames = ref<string[]>([])
 const viewOptions = computed<UI_I_OptionItem[]>(() =>
-  viewFunc(localization.value, props.type, optionsNames.value)
+    viewFunc(localization.value, props.type, optionsNames.value)
 )
 
 const selectedView = ref<string>('')
 
 watch(
-  () => props.selectedChartOptionName,
-  (newValue) => {
-    let currentValue = ''
+    () => props.selectedChartOptionName,
+    (newValue) => {
+      let currentValue = ''
 
-    if (newValue) currentValue = newValue
-    else if (
-      selectedView.value &&
-      optionsNames.value.includes(selectedView.value)
-    )
-      currentValue = selectedView.value
-    else currentValue = selectedView.value || viewOptions.value[0]?.value
+      if (newValue) currentValue = newValue
+      else if (
+          selectedView.value &&
+          optionsNames.value.includes(selectedView.value)
+      )
+        currentValue = selectedView.value
+      else currentValue = selectedView.value || viewOptions.value[0]?.value
 
-    selectedView.value = currentValue
-  },
-  { immediate: true }
+      selectedView.value = currentValue
+    },
+    { immediate: true }
 )
 
 const periodOptions = computed<UI_I_OptionItem[]>(() =>
-  periodFunc(localization.value, props.selectedTimespanType)
+    periodFunc(localization.value, props.selectedTimespanType)
 )
 const selectedPeriod = computed<string>({
   get() {
@@ -221,19 +223,19 @@ const updateTools = (): void => {
   const viewValue = selectedView.value
   const prefix = props.project === 'sphere'
   const selectedValue = useLocalStorage(
-    viewValue + 'ChartOptions',
-    undefined,
-    prefix
+      viewValue + 'ChartOptions',
+      undefined,
+      prefix
   )
 
   const fields = selectedValue
-    ? selectedValue.counters.map((item) => item.name).join(', ')
-    : ''
+      ? selectedValue.counters.map((item) => item.name).join(', ')
+      : ''
   const validPeriodData = getValidDateByOptionFunc(
-    periodValue,
-    selectedValue,
-    props.unitsCount,
-    props.selectedCustomTime
+      periodValue,
+      selectedValue,
+      props.unitsCount,
+      props.selectedCustomTime
   )
 
   const period = [
@@ -243,13 +245,13 @@ const updateTools = (): void => {
 
   if (periodValue === 'custom_interval' && props.periodType === 'period') {
     const checkDateResult = checkDateFunc(
-      localization.value,
-      props.customDateFrom,
-      props.customDateTo,
-      props.customTimeFrom,
-      props.customTimeTo,
-      props.validDateEnd,
-      props.formatDate
+        localization.value,
+        props.customDateFrom,
+        props.customDateTo,
+        props.customTimeFrom,
+        props.customTimeTo,
+        props.validDateEnd,
+        props.formatDate
     )
     if (Array.isArray(checkDateResult)) {
       period[0] = Math.round(checkDateResult[0] / 1000)

package/components/common/monitor/advanced/tools/ToolsNew.vue

@@ -9,6 +9,7 @@
         v-model="selectedPeriodLocal"
         :items="props.periodOptions"
         :disabled="props.disabledPeriod"
+        :margin-between-trigger="4"
         test-id="period-select"
         width="auto"
         @change="emits('change-period')"
@@ -39,6 +40,7 @@
         v-model="selectedViewLocal"
         :items="props.viewOptions"
         :disabled="disabledView"
+        :margin-between-trigger="4"
         test-id="view-select"
         width="auto"
         left
@@ -71,6 +73,7 @@
     :objects-data="props.objectsData"
     :valid-date-end="props.validDateEnd"
     :format-date="props.formatDate"
+    :selected-node-name="props.selectedNodeName"
     @hide="isShowModalLocal = false"
     @select-row="emits('select-row', $event)"
     @select-metric-local="emits('select-metric-local', $event)"
@@ -126,6 +129,7 @@ const props = defineProps<{
   periodOptions: UI_I_OptionItem[]
   disabledPeriod?: boolean
   disabledView?: boolean
+  selectedNodeName?: string
 }>()
 
 const selectedViewLocal = defineModel<string>('selected-view')
@@ -167,11 +171,16 @@ const localization = computed<UI_I_Localization>(() => useLocal())
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap;
+  grid-column-gap: 32px;
+  grid-row-gap: 16px;
   padding: 12px 6px 16px 6px;
 
   .period-select-wrap {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
+    grid-row-gap: 12px;
 
     .chart-text {
       font-size: 13px;