bfg-common 1.1.30 → 1.1.31

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

@@ -5,7 +5,7 @@
       :show="true"
       :title="localization.chartOptions"
       @hide="onHide"
-      @submit="onSave"
+      @submit="onSubmit"
     >
       <template #modalBody>
         <common-monitor-advanced-tools-chart-options-modal-notification
@@ -14,7 +14,15 @@
           @remove="onRemoveAlerts"
         />
         <div>
-          <common-monitor-advanced-tools-chart-options-modal-actions />
+          <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"
+          />
 
           <div class="horizontal-flex-container chart-options-content">
             <common-monitor-advanced-tools-chart-options-modal-metrics
@@ -25,10 +33,18 @@
               :chart="selectedMetric"
               :language="props.language"
               :type="props.type"
-              :selected-keys="props.selectedCountersKeys"
-              :selected-chart-type="props.selectedChartType"
+              :selected-keys="localSelectedCountersKeys"
+              :selected-chart-type="localSelectedChartType"
+              :selected-timespan-type="localSelectedTimespanType"
+              :units-count="localUnitsCount"
+              :period-type="localPeriodType"
+              :selected-custom-time="localCustomTime"
               @select-row="selectedRows = $event"
-              @update-chart-type="selectedChartType = $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"
             />
           </div>
         </div>
@@ -47,6 +63,7 @@ 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
@@ -54,6 +71,11 @@ 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<{
@@ -61,8 +83,17 @@ 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[]>(() =>
@@ -72,6 +103,60 @@ 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[]>([''])
 
@@ -85,10 +170,15 @@ const onHide = (): void => {
 }
 
 const selectedRows = ref<UI_I_AdvancedCounterItem[]>([])
-const selectedChartType = ref<string>('')
+const selectedChartTypeLocal = ref<string>('')
 
 const checkValidations = (): boolean => {
-  if (selectedRows.value.length) return true
+  if (selectedRows.value.length) {
+    alerts.value = []
+    isShowAlerts.value = false
+
+    return true
+  }
 
   alerts.value = [localization.value.noCountersSelected]
   isShowAlerts.value = true
@@ -96,14 +186,133 @@ const checkValidations = (): boolean => {
   return false
 }
 
-const onSave = (): void => {
+const localSelectedChartOptionName = ref<string>('')
+watch(
+  () => props.selectedChartOptionName,
+  (newValue) => {
+    localSelectedChartOptionName.value = newValue
+  },
+  { immediate: true }
+)
+
+const selectedLocalOptionName = ref<string>('')
+
+const onSubmit = (): 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', selectedChartType.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)
   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,12 +5,11 @@
         >{{ localization.chartOptions }}:</label
       >
       <div class="select">
-        <select id="chartOptionsSelect" v-model="selectedChartOption">
+        <select id="chartOptionsSelect" v-model="localSelectedChartOption">
           <option
             v-for="item in chartOptions"
             :key="item.value"
             :value="item.value"
-            disabled
           >
             {{ item.text }}
           </option>
@@ -25,15 +24,27 @@
         {{ localization.saveOptionsAs }}...
       </button>
       <common-monitor-advanced-tools-chart-options-modal-actions-save-options-modal
-        v-show="isShowSaveOptionsModal"
+        v-if="isShowSaveOptionsModal"
         @hide="onHideSaveOptionsModal"
         @save="onSaveOptions"
       />
-      <button class="btn chart-options-delete-button" disabled="">
+      <button
+        class="btn chart-options-delete-button"
+        :disabled="!disabledDeleteAction"
+        @click="onDeleteAction"
+      >
         {{ 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">
@@ -41,19 +52,79 @@ 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 selectedChartOption = ref<string>('select_options')
+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 chartOptions = computed<UI_I_OptionItem[]>(() =>
-  chartOptionItemsFunc(localization.value)
+  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 }
 )
 
 const isShowSaveOptionsModal = ref<boolean>(false)
-const onShowSaveOptionsModal = (): boolean =>
-  (isShowSaveOptionsModal.value = true)
+const onShowSaveOptionsModal = (): void => {
+  if (!props.isDisabledSave) isShowSaveOptionsModal.value = true
+
+  emits('check-validation')
+}
 const onHideSaveOptionsModal = (): boolean =>
   (isShowSaveOptionsModal.value = false)
-const onSaveOptions = (): boolean => onHideSaveOptionsModal()
+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'
+}
 </script>
 
 <style scoped lang="scss">

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

@@ -1,13 +1,25 @@
 import { UI_I_Localization } from '~/models/interfaces'
 import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
 
-export const chartOptionItemsFunc = (localization: UI_I_Localization): UI_I_OptionItem[] => [
-  {
-    text: `--${localization.selectOption}--`,
-    value: 'select_options',
-  },
-  {
-    text: localization.default,
-    value: 'default',
-  },
-]
+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
+}

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

@@ -7,11 +7,16 @@
     @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" type="text" />
+        <input id="chartOptionsName" v-model="name" type="text" />
       </div>
     </template>
   </atoms-modal>
@@ -22,22 +27,40 @@ import { UI_I_Localization } from '~/models/interfaces'
 
 const emits = defineEmits<{
   (event: 'hide'): void
-  (event: 'save'): void
+  (event: 'save', value: string): 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 => {
-  emits('save')
+  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 = []
 }
 </script>
 
 <style scoped lang="scss">
 :deep(.modal-dialog) {
-  max-height: 220px;
+  .alert {
+    margin-bottom: 20px;
+  }
 
   .form-control {
     display: flex;

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

@@ -10,7 +10,15 @@
       :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>
@@ -32,11 +40,19 @@ 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,7 +3,15 @@
     <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"
@@ -18,10 +26,18 @@ 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>