bfg-common 1.1.30 → 1.1.31

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

@@ -11,7 +11,7 @@
               <div class="select">
                 <select
                   id="chart-timespan-type-select"
-                  v-model="selectedTimespan"
+                  v-model="localSelectedTimespan"
                 >
                   <option
                     v-for="(item, index) in timespanOptions"
@@ -27,7 +27,7 @@
           <div
             :class="[
               'custom-timespan-settings-container',
-              { active: selectedTimespan === 'custom_interval' },
+              { active: localSelectedTimespan === 'custom_interval' },
             ]"
           >
             <table>
@@ -36,7 +36,7 @@
                   <td class="relative">
                     <input
                       id="custom-time-lastInput"
-                      v-model="timespanRadioSelect"
+                      v-model="localPeriodType"
                       type="radio"
                       value="last"
                       class="custom-radio-button"
@@ -52,12 +52,12 @@
                     <div
                       :class="[
                         'custom-timespan-type-last-container',
-                        { active: timespanRadioSelect === 'last' },
+                        { active: localPeriodType === 'last' },
                       ]"
                     >
                       <input
                         id="chart-option-setting-row"
-                        v-model="last"
+                        v-model="localLast"
                         type="number"
                         class="chart-option-setting-row custom-time-input"
                       />
@@ -70,7 +70,7 @@
                           <div class="select">
                             <select
                               id="chart-timespan-type-select"
-                              v-model="selectedCustomTime"
+                              v-model="localSelectedCustomTime"
                             >
                               <option
                                 v-for="(item, index) in customTimeOptions"
@@ -90,9 +90,9 @@
                   <td class="relative">
                     <input
                       id="custom-time-fromInput"
-                      v-model="timespanRadioSelect"
+                      v-model="localPeriodType"
                       type="radio"
-                      value="from"
+                      value="period"
                       class="custom-radio-button"
                       name="lastFrom"
                     />
@@ -106,7 +106,7 @@
                     <div
                       :class="[
                         'date-container-row disabled-container calendar-date-row',
-                        { active: timespanRadioSelect === 'from' },
+                        { active: localPeriodType === 'period' },
                       ]"
                     >
                       <input
@@ -140,7 +140,7 @@
                     <div
                       :class="[
                         'date-container-row disabled-container calendar-date-row',
-                        { active: timespanRadioSelect === 'from' },
+                        { active: localPeriodType === 'period' },
                       ]"
                     >
                       <input
@@ -171,7 +171,7 @@
                   <td
                     :class="[
                       'disabled-container',
-                      { active: timespanRadioSelect === 'from' },
+                      { active: localPeriodType === 'period' },
                     ]"
                   >
                     <span> ({{ localization.isoTimeFormat }}) </span>
@@ -217,10 +217,18 @@ import {
 const props = defineProps<{
   language: string
   selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
 }>()
 
 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
 }>()
 
 const { $formattedDate, $isDate, $getTimeFormat, $getUnixByDate } = useNuxtApp()
@@ -230,16 +238,75 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 const timespanOptions = computed<UI_I_OptionItem[]>(() =>
   timespanFunc(localization.value)
 )
-const selectedTimespan = ref<string>(timespanOptions.value[0].value)
+const localSelectedTimespan = ref<string>(
+  props.selectedTimespanType || timespanOptions.value[0].value
+)
+watch(
+  () => props.selectedTimespanType,
+  (newValue) => {
+    localSelectedTimespan.value = newValue || timespanOptions.value[0].value
+  }
+)
+const localPeriodType = ref<string>('last')
+watch(
+  () => props.periodType,
+  (newValue) => {
+    localPeriodType.value = newValue || 'last'
+  },
+  { immediate: true }
+)
+
+watch(
+  localSelectedTimespan,
+  (newValue) => {
+    emits('update-timespan-type', newValue)
+  },
+  { immediate: true }
+)
 
-const timespanRadioSelect = ref<string>('last')
+watch(
+  localPeriodType,
+  (newValue) => {
+    const currentValue = newValue || 'period'
+    emits('update-period-type', currentValue)
+  },
+  { immediate: true }
+)
 
-const last = ref<number>(1)
+const localLast = ref<number>(1)
+watch(
+  localLast,
+  (newValue) => {
+    emits('update-unit-count', newValue)
+  },
+  { immediate: true }
+)
+watch(
+  () => props.unitsCount,
+  (newValue) => {
+    localLast.value = newValue > 0 ? newValue : 1
+  },
+  { immediate: true }
+)
 
-const selectedCustomTime = ref<string>('hours')
+const localSelectedCustomTime = ref<string>('hours')
 const customTimeOptions = computed<UI_I_OptionItem[]>(() =>
   customTimeFunc(localization.value)
 )
+watch(
+  () => props.selectedCustomTime,
+  (newValue) => {
+    localSelectedCustomTime.value = newValue || 'hours'
+  },
+  { immediate: true }
+)
+watch(
+  localSelectedCustomTime,
+  (newValue) => {
+    emits('update-custom-time', newValue)
+  },
+  { immediate: true }
+)
 
 const chartType = ref<string>('line_graph')
 const chartTypeOptions = computed<UI_I_OptionItem[]>(() =>
@@ -264,14 +331,18 @@ watch(
   { immediate: true }
 )
 
-watch(chartType, (newValue) => {
-  let currentValue = 'spline'
+watch(
+  chartType,
+  (newValue) => {
+    let currentValue = 'spline'
 
-  if (newValue === 'line_graph') currentValue = 'spline'
-  else if (newValue === 'stacked_graph') currentValue = 'area'
+    if (newValue === 'line_graph') currentValue = 'spline'
+    else if (newValue === 'stacked_graph') currentValue = 'area'
 
-  emits('update-chart-type', currentValue)
-})
+    emits('update-chart-type', currentValue)
+  },
+  { immediate: true }
+)
 
 const yesterday = new Date().setDate(new Date().getDate() - 1)
 const dateFrom = ref<number>(yesterday)
@@ -291,26 +362,26 @@ const getCurrentTime = (): void => {
   currentTimeTo.value = currentTime
 }
 
-const onUpdateDateFrom = (val: number) => {
+const onUpdateDateFrom = (val: number): void => {
   if (!val) return
 
   currentDateFrom.value = $formattedDate(new Date(val), '')
 }
-watch(currentDateFrom, (val) => {
-  if (!val) return
+watch(currentDateFrom, (newValue) => {
+  if (!newValue) return
 
-  if ($isDate(val)) dateFrom.value = $getUnixByDate(val)
+  if ($isDate(newValue)) dateFrom.value = $getUnixByDate(newValue)
 })
 
-const onUpdateDateTo = (val: number) => {
+const onUpdateDateTo = (val: number): void => {
   if (!val) return
 
   currentDateTo.value = $formattedDate(new Date(val), '')
 }
-watch(currentDateTo, (val) => {
-  if (!val) return
+watch(currentDateTo, (newValue) => {
+  if (!newValue) return
 
-  if ($isDate(val)) dateTo.value = $getUnixByDate(val)
+  if ($isDate(newValue)) dateTo.value = $getUnixByDate(newValue)
 })
 
 onMounted(() => {

package/components/common/monitor/advanced/tools/config/advancedToolbar.ts

@@ -4,7 +4,9 @@ import { UI_I_DropMenu } from '~/components/common/monitor/advanced/tools/models
 import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
 import { UI_I_OptionData } from '~/components/common/monitor/advanced/models/interfaces'
 
-export const periodFunc = (localization: UI_I_Localization): UI_I_OptionItem[] => [
+export const periodFunc = (
+  localization: UI_I_Localization
+): UI_I_OptionItem[] => [
   {
     text: localization.realTime,
     value: 'real_time',
@@ -29,7 +31,8 @@ export const periodFunc = (localization: UI_I_Localization): UI_I_OptionItem[] =
 
 export const viewFunc = (
   localization: UI_I_Localization,
-  type: UI_T_AdvancedType
+  type: UI_T_AdvancedType,
+  optionsNames?: string[]
 ): UI_I_OptionItem[] => {
   const viewData: UI_I_OptionData = {
     host: [
@@ -59,8 +62,17 @@ export const viewFunc = (
       { text: localization.virtualDisk, value: 'virtualDisk' },
     ],
   }
+  const currentOptions = viewData[type]
 
-  return viewData[type]
+  if (optionsNames) {
+    optionsNames.forEach((item) => {
+      currentOptions.push({
+        text: item,
+        value: item,
+      })
+    })
+  }
+  return currentOptions
 }
 
 export const exportFunc = (
@@ -71,3 +83,17 @@ export const exportFunc = (
   { text: localization.toSvg + '...', action: 'svg' },
   { text: localization.toCsv + '...', action: 'csv' },
 ]
+
+export const getCurrentOptionsStorageFunc = (routeType: string): string[] => {
+  const optionsNames = []
+  for (const key of Object.entries(localStorage)) {
+    const currentOptions = useLocalStorage(key[0], undefined, false)
+    if (
+      key[0].includes('ChartOptions') &&
+      currentOptions.routeType === routeType
+    ) {
+      optionsNames.push(key[0].replace('ChartOptions', ''))
+    }
+  }
+  return optionsNames
+}

package/components/common/perPage/PerPage.vue

@@ -1,51 +1,51 @@
-<template>
-  <div class="page-size">
-    {{ selectLabel }}
-
-    <div class="clr-select-wrapper">
-      <select
-        :id="`${props.testId}-page-size-select`"
-        :value="props.pageSize"
-        class="clr-page-size-select"
-        @change="change"
-      >
-        <option
-          v-for="(item, key) in props.options"
-          :key="key"
-          :value="item.value"
-        >
-          {{ item.text }}
-        </option>
-      </select>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    testId: string
-    pageSize: number
-    options: UI_I_OptionItem[]
-    label?: string
-  }>(),
-  {
-    label: 'itemsPerPage',
-  }
-)
-const emits = defineEmits<{
-  (event: 'change', num: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const selectLabel = computed<string>(() => localization.value[props.label])
-
-const change = (e: InputEvent): void => {
-  emits('change', +(e.target as HTMLInputElement).value)
-}
-</script>
-
-<style scoped></style>
+<template>
+  <div class="page-size">
+    {{ selectLabel }}
+
+    <div class="clr-select-wrapper">
+      <select
+        :id="`${props.testId}-page-size-select`"
+        :value="props.pageSize"
+        class="clr-page-size-select"
+        @change="change"
+      >
+        <option
+          v-for="(item, key) in props.options"
+          :key="key"
+          :value="item.value"
+        >
+          {{ item.text }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    testId: string
+    pageSize: number
+    options: UI_I_OptionItem[]
+    label?: string
+  }>(),
+  {
+    label: 'itemsPerPage',
+  }
+)
+const emits = defineEmits<{
+  (event: 'change', num: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const selectLabel = computed<string>(() => localization.value[props.label])
+
+const change = (e: InputEvent): void => {
+  emits('change', +(e.target as HTMLInputElement).value)
+}
+</script>
+
+<style scoped></style>