bfg-common 1.4.884 → 1.4.900

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,7 +29,6 @@
     :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"
@@ -137,7 +136,6 @@ const props = defineProps<{
   disabledPeriod?: boolean
   disabledView?: boolean
   isEmpty?: boolean
-  selectedNodeName?: string
 }>()
 
 const emits = defineEmits<{

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

@@ -42,7 +42,6 @@
         :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')"
@@ -56,25 +55,23 @@
         @delete-option="emits('delete-option')"
         @submit-options="emits('submit-options', $event)"
       />
-      <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
+      <div class="graph-container">
+        <common-monitor-advanced-graph-view
           :loading="props.advancedLoading"
-          :data="props.tableData"
-          @select="emits('selected-table-row', $event)"
+          :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.tableData"
+        @select="emits('selected-table-row', $event)"
+      />
     </template>
   </div>
 </template>
@@ -126,7 +123,6 @@ const props = defineProps<{
   disabledPeriod?: boolean
   disabledView?: boolean
   isEmpty?: boolean
-  selectedNodeName?: string
 }>()
 
 const emits = defineEmits<{
@@ -169,8 +165,6 @@ const localSelectedTimespanType = computed<string>({
 <style scoped lang="scss">
 .advanced {
   overflow: hidden;
-  display: flex;
-  flex-direction: column;
 
   .title {
     font-size: 18px;
@@ -178,14 +172,8 @@ const localSelectedTimespanType = computed<string>({
     padding: 16px 6px 12px 6px;
     color: var(--advanced-text-color);
   }
-  .advanced-bottom-container {
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-
-    .graph-container {
-      margin: 0 6px 0 6px;
-    }
+  .graph-container {
+    margin: 0 6px 0 6px;
   }
 }
 </style>

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

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

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

@@ -69,15 +69,8 @@ const tableTexts = computed<UI_I_TableTexts>(() =>
 
 <style scoped lang="scss">
 .advanced-main-table {
-  margin: 12px 6px 16px 6px;
+  margin: 12px 6px 0 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: '96px',
+        width: '150px',
         isSortable: false,
         sort: 'asc',
         show: true,
@@ -40,7 +40,7 @@ export const bodyOptions = (
         col: 'col2',
         colName: 'measurement',
         text: localization.common.measurement,
-        width: '192px',
+        width: '150px',
         isSortable: true,
         sort: 'asc',
         show: true,

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

@@ -1,98 +1,97 @@
 <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"
-      :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)"
+    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)"
   />
   <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>
 
@@ -145,7 +144,6 @@ const props = defineProps<{
   formatDate: string
   disabledPeriod?: boolean
   disabledView?: boolean
-  selectedNodeName?: string
 }>()
 
 const emits = defineEmits<{
@@ -183,31 +181,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() {
@@ -223,19 +221,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 = [
@@ -245,13 +243,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,7 +9,6 @@
         v-model="selectedPeriodLocal"
         :items="props.periodOptions"
         :disabled="props.disabledPeriod"
-        :margin-between-trigger="4"
         test-id="period-select"
         width="auto"
         @change="emits('change-period')"
@@ -40,7 +39,6 @@
         v-model="selectedViewLocal"
         :items="props.viewOptions"
         :disabled="disabledView"
-        :margin-between-trigger="4"
         test-id="view-select"
         width="auto"
         left
@@ -73,7 +71,6 @@
     :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)"
@@ -129,7 +126,6 @@ const props = defineProps<{
   periodOptions: UI_I_OptionItem[]
   disabledPeriod?: boolean
   disabledView?: boolean
-  selectedNodeName?: string
 }>()
 
 const selectedViewLocal = defineModel<string>('selected-view')
@@ -171,16 +167,11 @@ 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;