bfg-common 1.1.31 → 1.1.32

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

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

@@ -4,9 +4,7 @@ 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',
@@ -31,8 +29,7 @@ export const periodFunc = (
 
 export const viewFunc = (
   localization: UI_I_Localization,
-  type: UI_T_AdvancedType,
-  optionsNames?: string[]
+  type: UI_T_AdvancedType
 ): UI_I_OptionItem[] => {
   const viewData: UI_I_OptionData = {
     host: [
@@ -62,17 +59,8 @@ export const viewFunc = (
       { text: localization.virtualDisk, value: 'virtualDisk' },
     ],
   }
-  const currentOptions = viewData[type]
 
-  if (optionsNames) {
-    optionsNames.forEach((item) => {
-      currentOptions.push({
-        text: item,
-        value: item,
-      })
-    })
-  }
-  return currentOptions
+  return viewData[type]
 }
 
 export const exportFunc = (
@@ -83,17 +71,3 @@ 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>