bfg-common 1.4.882 → 1.4.884

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

@@ -31,6 +31,12 @@
     :local-selected-timespan-type="localSelectedTimespanType"
     :local-units-count="localUnitsCount"
     :selected-metrics-keys="selectedMetricsKeys"
+    :error-last-input="errorLastInput"
+    :error-date-from="errorDateFrom"
+    :error-time-from="errorTimeFrom"
+    :error-date-to="errorDateTo"
+    :error-time-to="errorTimeTo"
+    :selected-node-name="props.selectedNodeName"
     @hide-main-modal="onHideMainModal"
     @submit-main-modal="onSubmitMainModal"
     @remove-alerts="onRemoveAlerts"
@@ -132,6 +138,7 @@ const props = defineProps<{
   objectsData: UI_I_ObjectItem[]
   validDateEnd: number
   formatDate: string
+  selectedNodeName?: string
 }>()
 
 const emits = defineEmits<{
@@ -255,7 +262,34 @@ const selectedMetricsKeys = computed<number[]>(() =>
 )
 const selectedChartTypeLocal = ref<string>('')
 
+const errorLastInput = ref<string>('')
+const errorDateFrom = ref<string>('')
+const errorTimeFrom = ref<string>('')
+const errorDateTo = ref<string>('')
+const errorTimeTo = ref<string>('')
+
 const onCheckValidations = (): boolean => {
+  // TODO Проверить какой дата будет приходить про пустом значение и добавить тексты для ошибок
+  // console.log(
+  //   localCustomDateFrom.value,
+  //   localCustomDateTo.value,
+  //   localCustomTimeFrom.value,
+  //   localCustomTimeTo.value,
+  // )
+  if (
+    isNewView.value &&
+    timespanType.value === 'custom_interval' &&
+    localPeriodType.value === 'last'
+  ) {
+    if (String(unitCount.value) === '') {
+      errorLastInput.value = localization.value.common.fieldRequired
+      return false
+    } else if (!/^\d+$/.test(String(unitCount.value))) {
+      errorLastInput.value = localization.value.common.fieldRequired
+      return false
+    }
+  }
+
   const checkDateResult = checkDateFunc(
     localization.value,
     localCustomDateFrom.value,

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

@@ -1,9 +1,9 @@
 <template>
   <ui-modal
-    :subtitle="localization.common.default"
+    :subtitle="props.selectedNodeName"
     :texts="modalTexts"
-    test-id="modal-main-small"
-    size="xl"
+    test-id="chart-options-modal"
+    width="1120px"
     @hide="emits('hide-main-modal')"
     @submit="emits('submit-main-modal')"
   >
@@ -55,6 +55,11 @@
             :objects-loading="props.objectsLoading"
             :objects-data="props.objectsData"
             :valid-date-end="props.validDateEnd"
+            :error-last-input="props.errorLastInput"
+            :error-date-from="props.errorDateFrom"
+            :error-time-from="props.errorTimeFrom"
+            :error-date-to="props.errorDateTo"
+            :error-time-to="props.errorTimeTo"
             @select-row="selectedRowsLocal = $event"
             @update-chart-type="localSelectedChartTypeLocal = $event"
             @update-custom-time="customTimeLocal = $event"
@@ -110,6 +115,12 @@ const props = defineProps<{
   localSelectedTimespanType: string
   localUnitsCount: number
   selectedMetricsKeys: number[]
+  selectedNodeName?: string
+  errorLastInput?: string
+  errorDateFrom?: string
+  errorTimeFrom?: string
+  errorDateTo?: string
+  errorTimeTo?: string
 }>()
 
 const selectedRowsLocal = defineModel<UI_I_AdvancedCounterItem[]>(
@@ -157,7 +168,7 @@ const emits = defineEmits<{
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const modalTexts = ref<UI_I_ModalTexts>({
-  button1: localization.value.common.decline,
+  button1: localization.value.common.cancel,
   button2: localization.value.common.select,
 })
 </script>
@@ -172,7 +183,7 @@ const modalTexts = ref<UI_I_ModalTexts>({
 </style>
 <style scoped lang="scss">
 .chart-options-modal {
-  margin: 16px 32px;
+  margin: 16px 2px 16px 32px;
 
   .title-details {
     font-weight: 500;
@@ -185,6 +196,7 @@ const modalTexts = ref<UI_I_ModalTexts>({
     display: grid;
     grid-template-columns: 216px 1fr;
     grid-gap: 12px;
+    height: 320px;
   }
 }
 </style>

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

@@ -4,6 +4,7 @@
     test-id="chart-options-alerts"
     class="chart-options-alerts"
     hide-close-button
+    size="md"
   />
 </template>
 
@@ -16,5 +17,6 @@ const props = defineProps<{
 <style scoped lang="scss">
 .chart-options-alerts {
   margin-bottom: 24px;
+  margin-right: 32px;
 }
 </style>

package/components/common/monitor/advanced/tools/chartOptionsModal/actions/ActionsNew.vue

@@ -21,7 +21,7 @@
       test-id="save-option-name"
       type="primary"
       variant="text"
-      size="md"
+      size="sm"
       is-without-sizes
       @click="onSaveNewName"
     >
@@ -93,23 +93,40 @@ const modalTexts = computed<UI_I_ModalTexts>(() => {
 })
 
 const newChartName = ref<string>('')
-watch(
-  () => props.isDisabledDeleteAction,
-  (newValue) => {
-    newChartName.value = newValue ? localSelectedChartOptionLocal.value : ''
-  }
-)
+watch(localSelectedChartOptionLocal, (newValue) => {
+  newChartName.value = props.isDisabledDeleteAction ? newValue : ''
+})
 
 const newChartNameError = ref<string>('')
 
 const onSaveNewName = (): void => {
-  if (!newChartName.value) {
+  if (
+    localSelectedChartOptionLocal.value === 'select_options' &&
+    !newChartName.value
+  ) {
+    newChartNameError.value = localization.value.common.fieldRequired
+  } else if (
+    !['select_options', 'default'].includes(
+      localSelectedChartOptionLocal.value
+    ) &&
+    !newChartName.value
+  ) {
     newChartNameError.value = localization.value.common.fieldRequired
   } else {
-    newChartNameError.value = ''
-    emits('save-options', newChartName.value)
+    if (newChartName.value) {
+      newChartNameError.value = ''
+      emits('save-options', newChartName.value)
+    }
   }
 }
+watch(
+  localSelectedChartOptionLocal,
+  (newValue) => {
+    if (newValue === 'select_options' && !newChartName.value)
+      newChartNameError.value = localization.value.common.fieldRequired
+  },
+  { immediate: true }
+)
 
 const onApplyDelete = (): void => {
   emits('apply-delete')
@@ -127,9 +144,16 @@ const confirmModalDesc = computed<string>(() =>
 <style>
 :root {
   --chart-options-name-actions-seperate-border-color: #e9ebeda3;
+  --chart-options-name-actions-delete-disabled-text-color: #bdc3c7;
 }
 :root.dark-theme {
   --chart-options-name-actions-seperate-border-color: #e9ebed1f;
+  --chart-options-name-actions-delete-disabled-text-color: rgba(
+    189,
+    195,
+    199,
+    0.72
+  );
 }
 </style>
 <style scoped lang="scss">
@@ -138,6 +162,7 @@ const confirmModalDesc = computed<string>(() =>
   grid-template-columns: 2fr 2fr max-content max-content max-content;
   align-items: center;
   grid-gap: 16px;
+  padding-right: 32px;
 
   & > :first-child {
     margin-top: -16px;
@@ -146,14 +171,15 @@ const confirmModalDesc = computed<string>(() =>
     height: 36px;
   }
   .seperator-name-actions {
-    border: 1px solid var(--chart-options-name-actions-seperate-border-color);
+    width: 1px;
+    background-color: var(--chart-options-name-actions-seperate-border-color);
     height: 24px;
   }
   #delete-option-name {
     color: #ea3223;
 
     &:disabled {
-      color: #bdc3c7;
+      color: var(--chart-options-name-actions-delete-disabled-text-color);
     }
   }
 }

package/components/common/monitor/advanced/tools/chartOptionsModal/actions/lib/utils/optionsActions.ts

@@ -7,7 +7,7 @@ export const chartOptionItems = (
 ): UI_I_OptionItem[] => {
   const mainOptionsNames = [
     {
-      text: `--${localization.inventoryMonitor.selectOption}--`,
+      text: `--${localization.common.new}--`,
       value: 'select_options',
     },
     {

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/Counters.vue

@@ -1,73 +1,78 @@
 <template>
   <common-monitor-advanced-tools-chart-options-modal-counters-new
-    v-if="isNewView"
-    v-model:total-metric-items="totalMetricItems"
-    :chart="props.chart"
-    :language="props.language"
-    :type="props.type"
-    :selected-keys="props.selectedKeys"
-    :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"
-    :total-cores="props.totalCores"
-    :host-id="props.hostId"
-    :selected-metrics-keys="props.selectedMetricsKeys"
-    :selected-objects="props.selectedObjects"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    @select-row="emits('select-row', $event)"
-    @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)"
-    @select-objects="emits('select-objects', $event)"
+      v-if="isNewView"
+      v-model:total-metric-items="totalMetricItems"
+      :chart="props.chart"
+      :language="props.language"
+      :type="props.type"
+      :selected-keys="props.selectedKeys"
+      :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"
+      :total-cores="props.totalCores"
+      :host-id="props.hostId"
+      :selected-metrics-keys="props.selectedMetricsKeys"
+      :selected-objects="props.selectedObjects"
+      :objects-loading="props.objectsLoading"
+      :objects-data="props.objectsData"
+      :valid-date-end="props.validDateEnd"
+      :error-last-input="props.errorLastInput"
+      :error-date-from="props.errorDateFrom"
+      :error-time-from="props.errorTimeFrom"
+      :error-date-to="props.errorDateTo"
+      :error-time-to="props.errorTimeTo"
+      @select-row="emits('select-row', $event)"
+      @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)"
+      @select-objects="emits('select-objects', $event)"
   />
   <common-monitor-advanced-tools-chart-options-modal-counters-old
-    v-else
-    v-model:total-metric-items="totalMetricItems"
-    :chart="props.chart"
-    :language="props.language"
-    :type="props.type"
-    :selected-keys="props.selectedKeys"
-    :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"
-    :total-cores="props.totalCores"
-    :host-id="props.hostId"
-    :selected-metrics-keys="props.selectedMetricsKeys"
-    :selected-objects="props.selectedObjects"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    @select-row="emits('select-row', $event)"
-    @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)"
-    @select-objects="emits('select-objects', $event)"
+      v-else
+      v-model:total-metric-items="totalMetricItems"
+      :chart="props.chart"
+      :language="props.language"
+      :type="props.type"
+      :selected-keys="props.selectedKeys"
+      :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"
+      :total-cores="props.totalCores"
+      :host-id="props.hostId"
+      :selected-metrics-keys="props.selectedMetricsKeys"
+      :selected-objects="props.selectedObjects"
+      :objects-loading="props.objectsLoading"
+      :objects-data="props.objectsData"
+      :valid-date-end="props.validDateEnd"
+      @select-row="emits('select-row', $event)"
+      @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)"
+      @select-objects="emits('select-objects', $event)"
   />
 </template>
 
@@ -101,6 +106,11 @@ const props = defineProps<{
   objectsLoading: boolean
   objectsData: UI_I_ObjectItem[]
   validDateEnd: number
+  errorLastInput?: string
+  errorDateFrom?: string
+  errorTimeFrom?: string
+  errorDateTo?: string
+  errorTimeTo?: string
 }>()
 
 const emits = defineEmits<{

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/CountersNew.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="chart-options-bottom-right-container">
+  <div
+    ref="chartOptionsBottomBlock"
+    class="chart-options-bottom-right-container"
+  >
+    <div v-show="isScrolledBlock" class="border-block"></div>
     <common-monitor-advanced-tools-chart-options-modal-counters-table
       :chart="props.chart"
       :type="props.type"
@@ -29,6 +33,11 @@
       :objects-loading="props.objectsLoading"
       :objects-data="props.objectsData"
       :valid-date-end="props.validDateEnd"
+      :error-last-input="props.errorLastInput"
+      :error-date-from="props.errorDateFrom"
+      :error-time-from="props.errorTimeFrom"
+      :error-date-to="props.errorDateTo"
+      :error-time-to="props.errorTimeTo"
       @update-chart-type="emits('update-chart-type', $event)"
       @update-custom-time="emits('update-custom-time', $event)"
       @update-timespan-type="emits('update-timespan-type', $event)"
@@ -44,6 +53,7 @@
 </template>
 
 <script setup lang="ts">
+import { useScroll } from '@vueuse/core'
 import type {
   UI_T_ChartHost,
   UI_T_ChartVm,
@@ -77,6 +87,11 @@ const props = defineProps<{
   objectsLoading: boolean
   objectsData: UI_I_ObjectItem[]
   validDateEnd: number
+  errorLastInput?: string
+  errorDateFrom?: string
+  errorTimeFrom?: string
+  errorDateTo?: string
+  errorTimeTo?: string
 }>()
 
 const emits = defineEmits<{
@@ -92,6 +107,32 @@ const emits = defineEmits<{
   (event: 'update-custom-time-to', value: string): void
   (event: 'select-objects', value: string): void
 }>()
+
+const chartOptionsBottomBlock = ref(null)
+const { y } = useScroll(chartOptionsBottomBlock)
+const isScrolledBlock = computed<boolean>(() => y.value > 0)
 </script>
 
-<style scoped lang="scss"></style>
+<style>
+:root {
+  --counters-border-block-border-color: #e9ebeda3;
+}
+:root.dark-theme {
+  --counters-border-block-border-color: rgba(233, 235, 237, 0.12);
+}
+</style>
+<style scoped lang="scss">
+.chart-options-bottom-right-container {
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-right: 18px;
+
+  .border-block {
+    box-shadow: -5px 1px 8px #e9ebeda3;
+    border-top: 4px solid var(--counters-border-block-border-color);
+    position: sticky;
+    inset: 0;
+    z-index: 999;
+  }
+}
+</style>