bfg-common 1.1.32 → 1.1.33

package/assets/localization/local_be.json

@@ -2059,5 +2059,8 @@
   "autoNegotiate": "Аўтаматычнае ўзгадненне",
   "fullDuplex": "Поўны дуплекс",
   "halfDuplex": "Паўдуплексны",
-  "srIovDescription": "SR-IOV-гэта тэхналогія, якая дазваляе некалькім віртуальным машынам выкарыстоўваць тую ж прыладу PCI як віртуальную скразную прыладу."
+  "srIovDescription": "SR-IOV-гэта тэхналогія, якая дазваляе некалькім віртуальным машынам выкарыстоўваць тую ж прыладу PCI як віртуальную скразную прыладу.",
+  "settingsNameErrorDesc": "Імя параметру не можа быць пустым.",
+  "deletingSavedSettings": "Пацвердзіце выдаленне захаваных налад",
+  "deletingSavedSettingsDesc": "Захаваныя налады \"{0}\" будуць выдаленыя. Працягнуць?"
 }

package/assets/localization/local_en.json

@@ -2062,5 +2062,8 @@
   "autoNegotiate": "Auto negotiate",
   "fullDuplex": "Full Duplex",
   "halfDuplex": "Half Duplex",
-  "srIovDescription": "SR-IOV is a technology that allows multiple virtual machines to use the same PCI device as a virtual pass-through device."
+  "srIovDescription": "SR-IOV is a technology that allows multiple virtual machines to use the same PCI device as a virtual pass-through device.",
+  "settingsNameErrorDesc": "The Setting Name cannot be blank.",
+  "deletingSavedSettings": "Confirm deleting of saved settings",
+  "deletingSavedSettingsDesc": "Saved settings \"{0}\" will be deleted. Continue?"
 }

package/assets/localization/local_hy.json

@@ -2062,5 +2062,8 @@
   "autoNegotiate": "Ավտոմատ համակարգում",
   "fullDuplex": "Ամբողջական Դուպլեքս",
   "halfDuplex": "Կես Դուպլեքս",
-  "srIovDescription": "SR-IOV-ը տեխնոլոգիա է, որը թույլ է տալիս բազմաթիվ վիրտուալ մեքենաներ օգտագործել նույն PCI սարքը որպես վիրտուալ վերջավոր սարք: Այս տեխնոլոգիան թույլ է տալիս բազմաթիվ վիրտուալ մեքենաներ օգտագործել նույն PCI սարքը որպես վիրտուալ վերջավոր սարք:"
+  "srIovDescription": "SR-IOV-ը տեխնոլոգիա է, որը թույլ է տալիս բազմաթիվ վիրտուալ մեքենաներ օգտագործել նույն PCI սարքը որպես վիրտուալ վերջավոր սարք: Այս տեխնոլոգիան թույլ է տալիս բազմաթիվ վիրտուալ մեքենաներ օգտագործել նույն PCI սարքը որպես վիրտուալ վերջավոր սարք:",
+  "settingsNameErrorDesc": "Պարամետրի անունը չի կարող դատարկ լինել:",
+  "deletingSavedSettings": "Հաստատեք պահպանված պարամետրերի ջնջումը",
+  "deletingSavedSettingsDesc": "Պահված \"{0}\" կարգավորումները կջնջվեն: Շարունակել?"
 }

package/assets/localization/local_kk.json

@@ -2062,5 +2062,8 @@
   "autoNegotiate": "Автоматты сәйкестендіру",
   "fullDuplex": "Толық дуплекс",
   "halfDuplex": "Жартылай дуплексті",
-  "srIovDescription": "SR-IOV-бұл бірнеше виртуалды машиналарға бірдей PCI құрылғысын виртуалды құрылғы ретінде пайдалануға мүмкіндік беретін технология."
+  "srIovDescription": "SR-IOV-бұл бірнеше виртуалды машиналарға бірдей PCI құрылғысын виртуалды құрылғы ретінде пайдалануға мүмкіндік беретін технология.",
+  "settingsNameErrorDesc": "Параметр атауы бос болуы мүмкін емес.",
+  "deletingSavedSettings": "Сақталған параметрлерді жоюды растаңыз",
+  "deletingSavedSettingsDesc": "Сақталған \"{0}\" параметрлері жойылады. Жалғастыру?"
 }

package/assets/localization/local_ru.json

@@ -2062,5 +2062,8 @@
   "autoNegotiate": "Автоматическое согласование",
   "fullDuplex": "Полный дуплекс",
   "halfDuplex": "Полудуплексный",
-  "srIovDescription": "SR-IOV - это технология, которая позволяет нескольким виртуальным машинам использовать одно и то же устройство PCI в качестве виртуального сквозного устройства."
+  "srIovDescription": "SR-IOV - это технология, которая позволяет нескольким виртуальным машинам использовать одно и то же устройство PCI в качестве виртуального сквозного устройства.",
+  "settingsNameErrorDesc": "Имя параметра не может быть пустым.",
+  "deletingSavedSettings": "Подтвердите удаление сохраненных настроек",
+  "deletingSavedSettingsDesc": "Сохраненные настройки \"{0}\" будут удалены. Продолжить?"
 }

package/assets/localization/local_zh.json

@@ -2062,5 +2062,8 @@
   "autoNegotiate": "汽车谈判",
   "fullDuplex": "全双工",
   "halfDuplex": "半双工",
-  "srIovDescription": "SR-IOV是一种允许多个虚拟机使用同一PCI设备作为虚拟直通设备的技术。"
+  "srIovDescription": "SR-IOV是一种允许多个虚拟机使用同一PCI设备作为虚拟直通设备的技术。",
+  "settingsNameErrorDesc": "设置名称不能为空。",
+  "deletingSavedSettings": "确认删除已保存的设置",
+  "deletingSavedSettingsDesc": "保存的设置“{0}”将被删除。 继续？"
 }

package/components/common/modals/Confirmation.vue

@@ -23,8 +23,8 @@
       <button class="btn btn-outline" @click="onHideModal">
         {{ localization.cancel }}
       </button>
-      <button class="btn btn-warning" @click="onRemove">
-        {{ localization.remove }}
+      <button :class="currentClasses" @click="onApply">
+        {{ currentText }}
       </button>
     </template>
   </atoms-modal>
@@ -38,8 +38,9 @@ const props = withDefaults(
     description: string
     headline?: string
     testId?: string
+    type?: 'confirm' | 'remove'
   }>(),
-  { testId: 'common-confirmation', headline: '' }
+  { testId: 'common-confirmation', headline: '', type: 'confirm' }
 )
 const emits = defineEmits<{
   (event: 'hide-modal'): void
@@ -48,7 +49,20 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const onRemove = (): void => emits('confirm')
+const currentClasses = computed<string>(() => {
+  let result = 'btn '
+  if (props.type === 'confirm') result += 'btn-primary'
+  else if (props.type === 'remove') result += 'btn-warning'
+  return result
+})
+const currentText = computed<string>(() => {
+  if (props.type === 'confirm') return localization.value.ok
+  else if (props.type === 'remove') return localization.value.remove
+
+  return ''
+})
+
+const onApply = (): void => emits('confirm')
 const onHideModal = (): void => emits('hide-modal')
 </script>
 

package/components/common/monitor/advanced/Advanced.vue

@@ -21,12 +21,23 @@
             :disabled-period="props.disabledPeriod"
             :disabled-view="props.disabledView"
             :selected-chart-type="props.selectedChartType"
+            :selected-timespan-type="props.selectedTimespanType"
+            :units-count="props.unitsCount"
+            :period-type="props.periodType"
+            :selected-custom-time="props.selectedCustomTime"
+            :selected-chart-option-name="props.selectedChartOptionName"
             @update-tools="onUpdateTools"
             @exporting="onExporting"
             @open-advanced-page="onGetEmptyPage"
             @select-row="emits('select-row', $event)"
             @select-metric="emits('select-metric', $event)"
             @update-chart-type="emits('update-chart-type', $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-time="emits('update-custom-time', $event)"
+            @select-chart-name="emits('select-chart-name', $event)"
+            @delete-option="emits('delete-option')"
           />
 
           <div v-show="!props.data" class="empty-container">
@@ -87,6 +98,11 @@ const props = defineProps<{
   selectedCountersKeys: number[]
   selectedMetric: T_ChartHost | T_ChartVm
   selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  selectedChartOptionName: string
   disabledPeriod?: boolean
   disabledView?: boolean
 }>()
@@ -98,6 +114,12 @@ 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
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())

package/components/common/monitor/advanced/tools/Tools.vue

@@ -88,10 +88,22 @@
     :selected-counters-keys="props.selectedCountersKeys"
     :selected-metric="props.selectedMetric"
     :selected-chart-type="props.selectedChartType"
+    :selected-timespan-type="props.selectedTimespanType"
+    :units-count="props.unitsCount"
+    :period-type="props.periodType"
+    :selected-custom-time="props.selectedCustomTime"
+    :selected-chart-option-name="props.selectedChartOptionName"
     @hide="isShowModal = false"
     @select-row="emits('select-row', $event)"
     @select-metric="emits('select-metric', $event)"
     @update-chart-type="emits('update-chart-type', $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-time="emits('update-custom-time', $event)"
+    @select-chart-name="onSelectChartName"
+    @delete-option="onDeleteOption"
+    @save-option-name="onSaveOptionName"
   />
 </template>
 
@@ -111,6 +123,7 @@ import {
   periodFunc,
   viewFunc,
   exportFunc,
+  getCurrentOptionsStorageFunc,
 } from '~/components/common/monitor/advanced/tools/config/advancedToolbar'
 
 const props = defineProps<{
@@ -121,6 +134,11 @@ const props = defineProps<{
   selectedCountersKeys: number[]
   selectedMetric: T_ChartHost | T_ChartVm
   selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  selectedChartOptionName: string
   disabledPeriod?: boolean
   disabledView?: boolean
 }>()
@@ -132,38 +150,83 @@ 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
 }>()
 
+const routeType = '' + useRoute().params.type
+
 const localization = computed<UI_I_Localization>(() => useLocal())
 const { $formattedDatetime } = useNuxtApp()
 
 const selectedView = ref<string>('')
+const optionsNames = ref<string[]>([])
 const viewOptions = computed<UI_I_OptionItem[]>(() =>
-  viewFunc(localization.value, props.type)
+  viewFunc(localization.value, props.type, optionsNames.value)
 )
+
 watch(
-  () => viewOptions.value,
-  (val: UI_I_OptionItem[]) => {
-    if (val) selectedView.value = val[0].value
+  () => props.selectedChartOptionName,
+  (newValue) => {
+    let currentValue = ''
+
+    if (newValue) currentValue = newValue
+    else if (
+      selectedView.value &&
+      optionsNames.value.includes(selectedView.value)
+    )
+      currentValue = selectedView.value
+    else currentValue = viewOptions.value[0].value
+
+    selectedView.value = currentValue
   },
   { immediate: true }
 )
 
+const onSelectChartName = (name: string): void => {
+  emits('select-chart-name', name)
+  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
+}
+
+const onDeleteOption = (): void => {
+  emits('delete-option')
+  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
+}
+
 const selectedPeriod = ref<string>('')
 const periodOptions = computed<UI_I_OptionItem[]>(() =>
   periodFunc(localization.value)
 )
 watch(
   () => periodOptions.value,
-  (val: UI_I_OptionItem[]) => {
-    if (val) selectedPeriod.value = val[0].value
+  (newValue: UI_I_OptionItem[]) => {
+    if (newValue) selectedPeriod.value = newValue[0].value
   },
   { immediate: true }
 )
 
+const isShowModal = ref<boolean>(false)
+watch(isShowModal, (newValue) => {
+  if (!newValue && !selectedView.value)
+    selectedView.value = viewOptions.value[0].value
+})
+
 watch(
   () => [selectedPeriod.value, selectedView.value],
   (newValue: string[]) => {
+    const selectedValue = useLocalStorage(
+      newValue[1] + 'ChartOptions',
+      undefined,
+      false
+    )
+    const fields = selectedValue
+      ? selectedValue.counters.map((item) => item.name).join(', ')
+      : ''
+
     const validPeriodData = getValidDateByOptionFunc(newValue[0])
 
     const period = [
@@ -171,6 +234,7 @@ watch(
       Math.round(validPeriodData[1] / 1000),
     ]
     const tools: UI_I_MonitorGraphPayload = {
+      fields,
       period,
       periodType: newValue[0],
       view: newValue[1],
@@ -195,10 +259,17 @@ const exportMenu = ref<UI_I_DropMenu<string>[]>(exportFunc(localization.value))
 const onExportMenuItem = (item: UI_I_DropMenu<any>): void =>
   emits('exporting', item.action)
 
-const isShowModal = ref<boolean>(false)
 const onShowChartOptions = (): void => {
   isShowModal.value = true
 }
+
+const onSaveOptionName = (): void => {
+  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
+}
+
+onMounted(() => {
+  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
+})
 </script>
 
 <style scoped lang="scss">

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,35 +24,107 @@
         {{ 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">
 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'
+import { chartOptionItems } from '~/components/common/monitor/advanced/tools/chartOptionsModal/actions/utils/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)
+  chartOptionItems(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/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]
+    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/actions/utils/optionsActions.ts

@@ -0,0 +1,25 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export const chartOptionItems = (
+  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/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>
 

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.1.32",
+  "version": "1.1.33",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",

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

@@ -1,13 +0,0 @@
-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',
-  },
-]