bfg-common 1.1.31 → 1.1.32

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

@@ -5,7 +5,7 @@
       :show="true"
       :title="localization.chartOptions"
       @hide="onHide"
-      @submit="onSubmit"
+      @submit="onSave"
     >
       <template #modalBody>
         <common-monitor-advanced-tools-chart-options-modal-notification
@@ -14,15 +14,7 @@
           @remove="onRemoveAlerts"
         />
         <div>
-          <common-monitor-advanced-tools-chart-options-modal-actions
-            :is-disabled-save="!selectedRows.length"
-            :options-names="optionsNames"
-            :selected-chart-option-name="localSelectedChartOptionName"
-            @save="onSaveOptions"
-            @check-validation="checkValidations"
-            @select-local-option-name="onSelectLocalOptionName"
-            @delete-chart-name="onDeleteChartName"
-          />
+          <common-monitor-advanced-tools-chart-options-modal-actions />
 
           <div class="horizontal-flex-container chart-options-content">
             <common-monitor-advanced-tools-chart-options-modal-metrics
@@ -33,18 +25,10 @@
               :chart="selectedMetric"
               :language="props.language"
               :type="props.type"
-              :selected-keys="localSelectedCountersKeys"
-              :selected-chart-type="localSelectedChartType"
-              :selected-timespan-type="localSelectedTimespanType"
-              :units-count="localUnitsCount"
-              :period-type="localPeriodType"
-              :selected-custom-time="localCustomTime"
+              :selected-keys="props.selectedCountersKeys"
+              :selected-chart-type="props.selectedChartType"
               @select-row="selectedRows = $event"
-              @update-chart-type="selectedChartTypeLocal = $event"
-              @update-custom-time="localCustomTime = $event"
-              @update-timespan-type="timespanType = $event"
-              @update-unit-count="unitCount = $event"
-              @update-period-type="localPeriodType = $event"
+              @update-chart-type="selectedChartType = $event"
             />
           </div>
         </div>
@@ -63,7 +47,6 @@ import {
   T_ChartVm,
 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
 import { metricsFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/metrics/config/optionsMetrics'
-import { getCurrentOptionsStorageFunc } from '~/components/common/monitor/advanced/tools/config/advancedToolbar'
 
 const props = defineProps<{
   type: UI_T_AdvancedType
@@ -71,11 +54,6 @@ const props = defineProps<{
   selectedCountersKeys: number[]
   selectedMetric: T_ChartHost | T_ChartVm
   selectedChartType: string
-  selectedTimespanType: string
-  unitsCount: number
-  periodType: string
-  selectedCustomTime: string
-  selectedChartOptionName: string
 }>()
 
 const emits = defineEmits<{
@@ -83,17 +61,8 @@ const emits = defineEmits<{
   (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
   (event: 'select-metric', value: string): void
   (event: 'update-chart-type', value: string): void
-  (event: 'update-timespan-type', value: string): void
-  (event: 'update-unit-count', value: number): void
-  (event: 'update-period-type', value: string): void
-  (event: 'update-custom-time', value: string): void
-  (event: 'select-chart-name', value: string): void
-  (event: 'delete-option'): void
-  (event: 'save-option-name'): void
 }>()
 
-const routeType = '' + useRoute().params.type
-
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const metricsItems = computed<UI_I_VerticalTabs[]>(() =>
@@ -103,60 +72,6 @@ const selectedMetric = ref<T_ChartHost | T_ChartVm>(
   props.selectedMetric || '' + metricsItems.value[0]?.value
 )
 
-const localSelectedCountersKeys = ref<number[]>([])
-watch(
-  () => props.selectedCountersKeys,
-  (newValue) => {
-    localSelectedCountersKeys.value = newValue
-  },
-  { immediate: true, deep: true }
-)
-
-const localSelectedChartType = ref<string>('')
-watch(
-  () => props.selectedChartType,
-  (newValue) => {
-    localSelectedChartType.value = newValue
-  },
-  { immediate: true }
-)
-
-const localSelectedTimespanType = ref<string>('')
-watch(
-  () => props.selectedTimespanType,
-  (newValue) => {
-    localSelectedTimespanType.value = newValue
-  },
-  { immediate: true }
-)
-
-const localUnitsCount = ref<number>(0)
-watch(
-  () => props.unitsCount,
-  (newValue) => {
-    localUnitsCount.value = newValue
-  },
-  { immediate: true }
-)
-
-const localPeriodType = ref<string>('')
-watch(
-  () => props.periodType,
-  (newValue) => {
-    localPeriodType.value = newValue
-  },
-  { immediate: true }
-)
-
-const localCustomTime = ref<string>('')
-watch(
-  () => props.selectedCustomTime,
-  (newValue) => {
-    localCustomTime.value = newValue
-  },
-  { immediate: true }
-)
-
 const isShowAlerts = ref<boolean>(false)
 const alerts = ref<string[]>([''])
 
@@ -170,15 +85,10 @@ const onHide = (): void => {
 }
 
 const selectedRows = ref<UI_I_AdvancedCounterItem[]>([])
-const selectedChartTypeLocal = ref<string>('')
+const selectedChartType = ref<string>('')
 
 const checkValidations = (): boolean => {
-  if (selectedRows.value.length) {
-    alerts.value = []
-    isShowAlerts.value = false
-
-    return true
-  }
+  if (selectedRows.value.length) return true
 
   alerts.value = [localization.value.noCountersSelected]
   isShowAlerts.value = true
@@ -186,133 +96,14 @@ const checkValidations = (): boolean => {
   return false
 }
 
-const localSelectedChartOptionName = ref<string>('')
-watch(
-  () => props.selectedChartOptionName,
-  (newValue) => {
-    localSelectedChartOptionName.value = newValue
-  },
-  { immediate: true }
-)
-
-const selectedLocalOptionName = ref<string>('')
-
-const onSubmit = (): void => {
+const onSave = (): void => {
   if (!checkValidations()) return
 
-  if (['select_options', 'default'].includes(selectedLocalOptionName.value))
-    selectedLocalOptionName.value = 'custom'
-
-  onSaveOptions(selectedLocalOptionName.value)
-
   emits('select-metric', selectedMetric.value)
   emits('select-row', selectedRows.value)
-  emits('update-chart-type', selectedChartTypeLocal.value)
-  emits('update-timespan-type', timespanType.value)
-  emits('update-unit-count', unitCount.value)
-  emits('update-period-type', localPeriodType.value)
-  emits('update-custom-time', localCustomTime.value)
-  emits('select-chart-name', selectedLocalOptionName.value)
+  emits('update-chart-type', selectedChartType.value)
   onHide()
 }
-
-const timespanType = ref<string>('')
-const unitCount = ref<number>(1)
-
-const optionsNames = ref<string[]>([])
-
-const onSaveOptions = (name: string): void => {
-  const counters = selectedRows.value.map((item) => {
-    return {
-      id: item.id,
-      name: item.nameEn,
-    }
-  })
-  let chartType = 'line_graph'
-  if (selectedChartTypeLocal.value === 'spline') chartType = 'line_graph'
-  else if (selectedChartTypeLocal.value === 'area') chartType = 'stacked_graph'
-
-  const saveOptionsData = {
-    routeType,
-    chartType,
-    counters,
-    metric: selectedMetric.value,
-    timespan: {
-      periodType: localPeriodType.value,
-      units: localCustomTime.value,
-      unitsCount: unitCount.value,
-      type: timespanType.value,
-    },
-  }
-  useLocalStorage(`${name}ChartOptions`, saveOptionsData, false)
-  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
-  localSelectedChartOptionName.value = name
-  emits('save-option-name')
-}
-
-const setSelectOptions = (): void => {
-  setDefaultOptions()
-}
-
-const setDefaultOptions = (): void => {
-  selectedMetric.value = metricsItems.value[0]?.value
-  localSelectedCountersKeys.value = []
-  localSelectedChartType.value = 'spline'
-  localSelectedTimespanType.value = ''
-  localUnitsCount.value = 0
-  localPeriodType.value = ''
-  localCustomTime.value = ''
-}
-
-const setCustomOptions = (name: string): void => {
-  const selectedValue = useLocalStorage(name + 'ChartOptions', undefined, false)
-
-  if (selectedValue.routeType !== routeType) return
-
-  let currentChartType = ''
-  if (selectedValue.chartType === 'line_graph') currentChartType = 'spline'
-  else if (selectedValue.chartType === 'stacked_graph')
-    currentChartType = 'area'
-
-  selectedMetric.value = selectedValue.metric
-  localSelectedCountersKeys.value = selectedValue.counters.map(
-    (item) => item.id
-  )
-  localSelectedChartType.value = currentChartType
-  localSelectedTimespanType.value = selectedValue.timespan.type
-  localUnitsCount.value = selectedValue.timespan.unitsCount
-  localPeriodType.value = selectedValue.timespan.periodType
-  localCustomTime.value = selectedValue.timespan.units
-}
-
-const onSelectLocalOptionName = (name: string): void => {
-  selectedLocalOptionName.value = name
-
-  if (optionsNames.value.includes(name)) setCustomOptions(name)
-  else if (name === 'default') setDefaultOptions()
-  else if (name === 'select_options') setSelectOptions()
-}
-
-watch(
-  localSelectedChartOptionName,
-  (newValue) => {
-    if (!newValue) return
-
-    setCustomOptions(newValue)
-  },
-  { immediate: true }
-)
-
-const onDeleteChartName = (name: string): void => {
-  window.localStorage.removeItem(name + 'ChartOptions')
-  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
-  setSelectOptions()
-  emits('delete-option')
-}
-
-onMounted(() => {
-  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
-})
 </script>
 
 <style scoped lang="scss">

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

@@ -5,11 +5,12 @@
         >{{ localization.chartOptions }}:</label
       >
       <div class="select">
-        <select id="chartOptionsSelect" v-model="localSelectedChartOption">
+        <select id="chartOptionsSelect" v-model="selectedChartOption">
           <option
             v-for="item in chartOptions"
             :key="item.value"
             :value="item.value"
+            disabled
           >
             {{ item.text }}
           </option>
@@ -24,27 +25,15 @@
         {{ localization.saveOptionsAs }}...
       </button>
       <common-monitor-advanced-tools-chart-options-modal-actions-save-options-modal
-        v-if="isShowSaveOptionsModal"
+        v-show="isShowSaveOptionsModal"
         @hide="onHideSaveOptionsModal"
         @save="onSaveOptions"
       />
-      <button
-        class="btn chart-options-delete-button"
-        :disabled="!disabledDeleteAction"
-        @click="onDeleteAction"
-      >
+      <button class="btn chart-options-delete-button" disabled="">
         {{ localization.deleteOptions }}
       </button>
     </div>
   </div>
-
-  <common-modals-confirmation
-    v-if="isConfirmModal"
-    headline="localization.deletingSavedSettings"
-    :description="confirmModalDesc"
-    @hide-modal="isConfirmModal = false"
-    @confirm="onApplyDelete"
-  />
 </template>
 
 <script setup lang="ts">
@@ -52,79 +41,19 @@ import { UI_I_Localization } from '~/models/interfaces'
 import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
 import { chartOptionItemsFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/actions/config/optionsActions'
 
-const props = defineProps<{
-  isDisabledSave: boolean
-  optionsNames: string[]
-  selectedChartOptionName: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'save', value: string): void
-  (event: 'check-validation'): void
-  (event: 'select-local-option-name', value: string): void
-  (event: 'delete-chart-name', value: string): void
-}>()
-
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const localSelectedChartOption = ref<string>('select_options')
-const disabledDeleteAction = computed<boolean>(() => {
-  const chartOptionName = localSelectedChartOption.value
-  let result = false
-
-  if (chartOptionName !== 'select_options' && chartOptionName !== 'default')
-    result = true
-
-  return result
-})
+const selectedChartOption = ref<string>('select_options')
 const chartOptions = computed<UI_I_OptionItem[]>(() =>
-  chartOptionItemsFunc(localization.value, props.optionsNames)
-)
-watch(
-  () => props.selectedChartOptionName,
-  (newValue) => {
-    localSelectedChartOption.value =
-      newValue || localSelectedChartOption.value || 'select_options'
-  },
-  { immediate: true }
-)
-watch(
-  localSelectedChartOption,
-  (newValue) => {
-    emits('select-local-option-name', newValue)
-  },
-  { immediate: true }
+  chartOptionItemsFunc(localization.value)
 )
 
 const isShowSaveOptionsModal = ref<boolean>(false)
-const onShowSaveOptionsModal = (): void => {
-  if (!props.isDisabledSave) isShowSaveOptionsModal.value = true
-
-  emits('check-validation')
-}
+const onShowSaveOptionsModal = (): boolean =>
+  (isShowSaveOptionsModal.value = true)
 const onHideSaveOptionsModal = (): boolean =>
   (isShowSaveOptionsModal.value = false)
-const onSaveOptions = (name: string): void => {
-  onHideSaveOptionsModal()
-  emits('save', name)
-}
-
-const isConfirmModal = ref<boolean>(false)
-const confirmModalDesc = ref<string>('')
-
-const onDeleteAction = (): void => {
-  confirmModalDesc.value = localization.value.deletingSavedSettingsDesc.replace(
-    '{0}',
-    localSelectedChartOption.value
-  )
-  isConfirmModal.value = true
-}
-
-const onApplyDelete = (): void => {
-  isConfirmModal.value = false
-  emits('delete-chart-name', localSelectedChartOption.value)
-  localSelectedChartOption.value = 'select_options'
-}
+const onSaveOptions = (): boolean => onHideSaveOptionsModal()
 </script>
 
 <style scoped lang="scss">

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

@@ -1,25 +1,13 @@
 import { UI_I_Localization } from '~/models/interfaces'
 import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
 
-export const chartOptionItemsFunc = (
-  localization: UI_I_Localization,
-  names: string[]
-): UI_I_OptionItem[] => {
-  const mainOptionsNames = [
-    {
-      text: `--${localization.selectOption}--`,
-      value: 'select_options',
-    },
-    {
-      text: localization.default,
-      value: 'default',
-    },
-  ]
-  names.forEach((name) => {
-    mainOptionsNames.push({
-      text: name,
-      value: name,
-    })
-  })
-  return mainOptionsNames
-}
+export const chartOptionItemsFunc = (localization: UI_I_Localization): UI_I_OptionItem[] => [
+  {
+    text: `--${localization.selectOption}--`,
+    value: 'select_options',
+  },
+  {
+    text: localization.default,
+    value: 'default',
+  },
+]

package/components/common/monitor/advanced/tools/chartOptionsModal/actions/saveOptionsModal/SaveOptionsModal.vue

@@ -7,16 +7,11 @@
     @submit="onSave"
   >
     <template #modalBody>
-      <common-monitor-advanced-tools-chart-options-modal-notification
-        v-show="isShowAlerts"
-        :alerts="alerts"
-        @remove="onRemoveAlerts"
-      />
       <div class="form-control">
         <label class="save-option-name-label" for="chartOptionsName"
           >{{ localization.chartOptionsName }}:</label
         >
-        <input id="chartOptionsName" v-model="name" type="text" />
+        <input id="chartOptionsName" type="text" />
       </div>
     </template>
   </atoms-modal>
@@ -27,40 +22,22 @@ import { UI_I_Localization } from '~/models/interfaces'
 
 const emits = defineEmits<{
   (event: 'hide'): void
-  (event: 'save', value: string): void
+  (event: 'save'): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const name = ref<string>('')
-const isShowAlerts = ref<boolean>(false)
-const alerts = ref<string[]>([])
-
 const onHide = (): void => {
   emits('hide')
 }
 const onSave = (): void => {
-  if (!name.value) {
-    alerts.value = [localization.value.settingsNameErrorDesc + 'aaa']
-    isShowAlerts.value = true
-
-    return
-  }
-
-  emits('save', name.value)
-}
-
-const onRemoveAlerts = (): void => {
-  isShowAlerts.value = false
-  alerts.value = []
+  emits('save')
 }
 </script>
 
 <style scoped lang="scss">
 :deep(.modal-dialog) {
-  .alert {
-    margin-bottom: 20px;
-  }
+  max-height: 220px;
 
   .form-control {
     display: flex;

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

@@ -10,15 +10,7 @@
       :language="props.language"
       :selected="selectedOptions"
       :selected-chart-type="props.selectedChartType"
-      :selected-timespan-type="props.selectedTimespanType"
-      :units-count="props.unitsCount"
-      :period-type="props.periodType"
-      :selected-custom-time="props.selectedCustomTime"
       @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)"
     />
   </div>
 </template>
@@ -40,19 +32,11 @@ const props = defineProps<{
   type: UI_T_AdvancedType
   selectedKeys: number[]
   selectedChartType: string
-  selectedTimespanType: string
-  unitsCount: number
-  periodType: string
-  selectedCustomTime: string
 }>()
 
 const emits = defineEmits<{
   (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
   (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 selectedOptions = ref<UI_I_AdvancedTargetObject[][]>([])

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

@@ -3,15 +3,7 @@
     <common-monitor-advanced-tools-chart-options-modal-counters-timespan-form
       :language="props.language"
       :selected-chart-type="props.selectedChartType"
-      :selected-timespan-type="props.selectedTimespanType"
-      :units-count="props.unitsCount"
-      :period-type="props.periodType"
-      :selected-custom-time="props.selectedCustomTime"
       @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)"
     />
     <common-monitor-advanced-tools-chart-options-modal-counters-timespan-object
       :selected="props.selected"
@@ -26,18 +18,10 @@ const props = defineProps<{
   selected: UI_I_AdvancedTargetObject[][]
   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
 }>()
 </script>