bfg-common 1.1.76 → 1.1.78

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

@@ -1,424 +1,452 @@
-<template>
-  <div class="chart-options-modal">
-    <atoms-modal
-      width="1150px"
-      :show="true"
-      :title="localization.chartOptions"
-      @hide="onHide"
-      @submit="onSubmit"
-    >
-      <template #modalBody>
-        <common-monitor-advanced-tools-chart-options-modal-notification
-          v-show="isShowAlerts"
-          :alerts="alerts"
-          @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"
-          />
-
-          <div class="horizontal-flex-container chart-options-content">
-            <common-monitor-advanced-tools-chart-options-modal-metrics
-              v-model:selected-metric="selectedMetric"
-              :metrics-items="metricsItems"
-            />
-            <common-monitor-advanced-tools-chart-options-modal-counters
-              :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"
-              :custom-date-from="props.customDateFrom"
-              :custom-date-to="props.customDateTo"
-              :custom-time-from="props.customTimeFrom"
-              :custom-time-to="props.customTimeTo"
-              :total-cores="props.totalCores"
-              :host-id="props.hostId"
-              @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-custom-date-from="onUpdateCustomDateFrom"
-              @update-custom-date-to="onUpdateCustomDateTo"
-              @update-custom-time-from="onUpdateCustomTimeFrom"
-              @update-custom-time-to="onUpdateCustomTimeTo"
-            />
-          </div>
-        </div>
-      </template>
-    </atoms-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
-import { UI_I_VerticalTabs } from '~/components/atoms/tabs/models/interfaces'
-import { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
-import {
-  T_ChartHost,
-  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'
-import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/config/dateChecker'
-
-const props = defineProps<{
-  type: UI_T_AdvancedType
-  language: string
-  selectedCountersKeys: number[]
-  selectedMetric: T_ChartHost | T_ChartVm
-  selectedChartType: string
-  selectedTimespanType: string
-  unitsCount: number
-  periodType: string
-  selectedCustomTime: string
-  selectedChartOptionName: string
-  customDateFrom: string
-  customDateTo: string
-  customTimeFrom: string
-  customTimeTo: string
-  totalCores: number
-  hostId: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (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
-  (event: 'update-custom-date-from', value: string): void
-  (event: 'update-custom-date-to', value: string): void
-  (event: 'update-custom-time-from', value: string): void
-  (event: 'update-custom-time-to', value: string): void
-  (event: 'submit-options', value: string): void
-  (event: 'select-objects', value: string): void
-}>()
-
-const routeType = '' + useRoute().params.type
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const localCustomDateFrom = ref<string>('')
-const onUpdateCustomDateFrom = (value: string): void => {
-  localCustomDateFrom.value = value
-}
-const localCustomDateTo = ref<string>('')
-const onUpdateCustomDateTo = (value: string): void => {
-  localCustomDateTo.value = value
-}
-const localCustomTimeFrom = ref<string>('')
-const onUpdateCustomTimeFrom = (value: string): void => {
-  localCustomTimeFrom.value = value
-}
-const localCustomTimeTo = ref<string>('')
-const onUpdateCustomTimeTo = (value: string): void => {
-  localCustomTimeTo.value = value
-}
-
-const metricsItems = computed<UI_I_VerticalTabs[]>(() =>
-  metricsFunc(localization.value, props.type)
-)
-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[]>([''])
-
-const onRemoveAlerts = (): void => {
-  isShowAlerts.value = false
-  alerts.value = []
-}
-
-const onHide = (): void => {
-  emits('hide')
-}
-
-const selectedRows = ref<UI_I_AdvancedCounterItem[]>([])
-const selectedChartTypeLocal = ref<string>('')
-
-const checkValidations = (): boolean => {
-  const checkDateResult = checkDateFunc(
-    localization.value,
-    localCustomDateFrom.value,
-    localCustomDateTo.value,
-    localCustomTimeFrom.value,
-    localCustomTimeTo.value
-  )
-
-  if (!selectedRows.value.length) {
-    alerts.value = [localization.value.noCountersSelected]
-    isShowAlerts.value = true
-    return false
-  } else if (
-    timespanType.value === 'custom_interval' &&
-    localPeriodType.value === 'period' &&
-    checkDateResult !== '' &&
-    typeof checkDateResult === 'string'
-  ) {
-    alerts.value = [checkDateResult]
-    isShowAlerts.value = true
-    return false
-  }
-
-  return true
-}
-
-const localSelectedChartOptionName = ref<string>('')
-watch(
-  () => props.selectedChartOptionName,
-  (newValue) => {
-    localSelectedChartOptionName.value = newValue
-  },
-  { immediate: true }
-)
-
-const selectedLocalOptionName = ref<string>('')
-
-const selectedObjects = ref<string>('')
-
-const onSubmit = (): void => {
-  if (!checkValidations()) return
-
-  if (['select_options', 'default'].includes(selectedLocalOptionName.value))
-    selectedLocalOptionName.value = 'custom'
-
-  onSaveOptions(selectedLocalOptionName.value)
-
-  // emits('select-chart-name', selectedLocalOptionName.value) +
-  // emits('select-metric', selectedMetric.value) +
-  // emits('select-row', selectedRows.value) +
-  // emits('update-timespan-type', timespanType.value) +
-  // emits('update-period-type', localPeriodType.value) +
-  // emits('update-unit-count', unitCount.value) +
-  // emits('update-custom-time', localCustomTime.value) +
-  // emits('update-custom-date-from', localCustomDateFrom.value) +
-  // emits('update-custom-date-to', localCustomDateTo.value) +
-  // emits('update-custom-time-from', localCustomTimeFrom.value) +
-  // emits('update-custom-time-to', localCustomTimeTo.value) +
-  // emits('update-chart-type', selectedChartTypeLocal.value) +
-  // emits('submit-options')
-
-  const savedObject = {
-    optionName: selectedLocalOptionName.value,
-    metric: selectedMetric.value,
-    counters: selectedRows.value,
-    timespanType: timespanType.value,
-    periodType: localPeriodType.value,
-    unitCount: unitCount.value,
-    localTimespanType: localCustomTime.value,
-    dateFrom: localCustomDateFrom.value,
-    timeFrom: localCustomTimeFrom.value,
-    dateTo: localCustomDateTo.value,
-    timeTo: localCustomTimeTo.value,
-    chartType: selectedChartTypeLocal.value,
-    objects: selectedObjects.value,
-  }
-
-  emits('submit-options', savedObject)
-  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 => {
-  selectedMetric.value = props.selectedMetric || metricsItems.value[0]?.value
-  localSelectedCountersKeys.value = props.selectedCountersKeys
-  localSelectedChartType.value = props.selectedChartType
-  localSelectedTimespanType.value = props.selectedTimespanType
-  localUnitsCount.value = props.unitsCount
-  localPeriodType.value = props.periodType
-  localCustomTime.value = props.selectedCustomTime
-}
-
-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">
-.chart-options-modal {
-  .loader-on :deep(.modal-body) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  :deep(.modal-title) {
-    text-transform: capitalize;
-  }
-
-  #loader {
-    min-height: 90px;
-    text-align: center;
-  }
-
-  .chart-options-content {
-    display: flex;
-    flex-direction: row;
-    flex-basis: 90%;
-  }
-}
-</style>
+<template>
+  <div class="chart-options-modal">
+    <atoms-modal
+      width="1150px"
+      :show="true"
+      :title="localization.chartOptions"
+      :disabled-submit="isDisabledSubmit"
+      @hide="onHide"
+      @submit="onSubmit"
+    >
+      <template #modalBody>
+        <common-monitor-advanced-tools-chart-options-modal-notification
+          v-show="isShowAlerts"
+          :alerts="alerts"
+          @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"
+          />
+
+          <div class="horizontal-flex-container chart-options-content">
+            <common-monitor-advanced-tools-chart-options-modal-metrics
+              v-model:selected-metric="selectedMetric"
+              :metrics-items="metricsItems"
+            />
+            <common-monitor-advanced-tools-chart-options-modal-counters
+              :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"
+              :custom-date-from="props.customDateFrom"
+              :custom-date-to="props.customDateTo"
+              :custom-time-from="props.customTimeFrom"
+              :custom-time-to="props.customTimeTo"
+              :total-cores="props.totalCores"
+              :host-id="props.hostId"
+              :selected-metrics-keys="selectedMetricsKeys"
+              :selected-objects="props.selectedObjects"
+              @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-custom-date-from="onUpdateCustomDateFrom"
+              @update-custom-date-to="onUpdateCustomDateTo"
+              @update-custom-time-from="onUpdateCustomTimeFrom"
+              @update-custom-time-to="onUpdateCustomTimeTo"
+              @select-objects="localSelectedObjects = $event"
+            />
+          </div>
+        </div>
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
+import { UI_I_VerticalTabs } from '~/components/atoms/tabs/models/interfaces'
+import { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
+import {
+  T_ChartHost,
+  T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
+import { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/models'
+import { metricsFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/metrics/config/optionsMetrics'
+import { getCurrentOptionsStorageFunc } from '~/components/common/monitor/advanced/tools/config/advancedToolbar'
+import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/config/dateChecker'
+import { getValidDateByOptionFunc } from '~/components/common/monitor/config/getValidDateByOption'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+  language: string
+  selectedCountersKeys: number[]
+  selectedMetric: T_ChartHost | T_ChartVm
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  selectedChartOptionName: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  totalCores: number
+  hostId: string
+  selectedObjects: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'delete-option'): void
+  (event: 'save-option-name'): void
+  (event: 'submit-options', value: UI_I_OptionsForm): void
+  (event: 'select-objects', value: string): void
+}>()
+
+const routeType = '' + useRoute().params.type
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const localCustomDateFrom = ref<string>('')
+const onUpdateCustomDateFrom = (value: string): void => {
+  localCustomDateFrom.value = value
+}
+const localCustomDateTo = ref<string>('')
+const onUpdateCustomDateTo = (value: string): void => {
+  localCustomDateTo.value = value
+}
+const localCustomTimeFrom = ref<string>('')
+const onUpdateCustomTimeFrom = (value: string): void => {
+  localCustomTimeFrom.value = value
+}
+const localCustomTimeTo = ref<string>('')
+const onUpdateCustomTimeTo = (value: string): void => {
+  localCustomTimeTo.value = value
+}
+
+const metricsItems = computed<UI_I_VerticalTabs[]>(() =>
+  metricsFunc(localization.value, props.type)
+)
+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[]>([''])
+
+const onRemoveAlerts = (): void => {
+  isShowAlerts.value = false
+  alerts.value = []
+}
+
+const onHide = (): void => {
+  emits('hide')
+}
+
+const selectedRows = ref<UI_I_AdvancedCounterItem[]>([])
+const selectedMetricsKeys = computed<number[]>(() =>
+  selectedRows.value.map((item) => item.id)
+)
+const selectedChartTypeLocal = ref<string>('')
+
+const checkValidations = (): boolean => {
+  const checkDateResult = checkDateFunc(
+    localization.value,
+    localCustomDateFrom.value,
+    localCustomDateTo.value,
+    localCustomTimeFrom.value,
+    localCustomTimeTo.value
+  )
+
+  if (!selectedRows.value.length) {
+    alerts.value = [localization.value.noCountersSelected]
+    isShowAlerts.value = true
+    return false
+  } else if (
+    timespanType.value === 'custom_interval' &&
+    localPeriodType.value === 'period' &&
+    checkDateResult !== '' &&
+    typeof checkDateResult === 'string'
+  ) {
+    alerts.value = [checkDateResult]
+    isShowAlerts.value = true
+    return false
+  }
+
+  return true
+}
+
+const localSelectedChartOptionName = ref<string>('')
+watch(
+  () => props.selectedChartOptionName,
+  (newValue) => {
+    localSelectedChartOptionName.value = newValue
+  },
+  { immediate: true }
+)
+
+const selectedLocalOptionName = ref<string>('')
+
+const localSelectedObjects = ref<string>('')
+
+const currentFieldsByArray = (data: []): string => {
+  const result: string[] = []
+  data.forEach((item) => {
+    result.push(item.name)
+  })
+  return result.join(',')
+}
+
+const onSubmit = (): void => {
+  if (!checkValidations()) return
+
+  if (['select_options', 'default'].includes(selectedLocalOptionName.value))
+    selectedLocalOptionName.value = 'custom'
+
+  onSaveOptions(selectedLocalOptionName.value)
+
+  const currentFields =
+    localSelectedObjects.value || currentFieldsByArray(selectedRows.value)
+
+  const validPeriod = getValidDateByOptionFunc(
+    timespanType.value,
+    null,
+    unitCount.value,
+    localCustomTime.value
+  ).map((item) => Math.round(item / 1000))
+
+  if (
+    timespanType.value === 'custom_interval' &&
+    localPeriodType.value === 'period'
+  ) {
+    const checkDateResult = checkDateFunc(
+      localization.value,
+      localCustomDateFrom.value,
+      localCustomDateTo.value,
+      localCustomTimeFrom.value,
+      localCustomTimeTo.value
+    )
+    if (Array.isArray(checkDateResult)) {
+      validPeriod[0] = Math.round(checkDateResult[0] / 1000)
+      validPeriod[1] = Math.round(checkDateResult[1] / 1000)
+    }
+  }
+
+  const savedObject = {
+    fields: currentFields,
+    optionName: selectedLocalOptionName.value,
+    metric: selectedMetric.value,
+    counters: selectedRows.value,
+    timespanType: timespanType.value,
+    periodType: localPeriodType.value,
+    unitCount: unitCount.value,
+    localTimespanType: localCustomTime.value,
+    dateFrom: localCustomDateFrom.value,
+    timeFrom: localCustomTimeFrom.value,
+    dateTo: localCustomDateTo.value,
+    timeTo: localCustomTimeTo.value,
+    chartType: selectedChartTypeLocal.value,
+    objects: localSelectedObjects.value,
+    periodValue: validPeriod,
+  }
+
+  emits('submit-options', savedObject)
+  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 => {
+  selectedMetric.value = props.selectedMetric || metricsItems.value[0]?.value
+  localSelectedCountersKeys.value = props.selectedCountersKeys
+  localSelectedChartType.value = props.selectedChartType
+  localSelectedTimespanType.value = props.selectedTimespanType
+  localUnitsCount.value = props.unitsCount
+  localPeriodType.value = props.periodType
+  localCustomTime.value = props.selectedCustomTime
+}
+
+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')
+}
+
+const isDisabledSubmit = computed<boolean>(
+  () =>
+    props.type === 'host' &&
+    selectedMetric.value === 'cpu' &&
+    !localSelectedObjects.value
+)
+
+onMounted(() => {
+  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
+})
+</script>
+
+<style scoped lang="scss">
+.chart-options-modal {
+  .loader-on :deep(.modal-body) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  :deep(.modal-title) {
+    text-transform: capitalize;
+  }
+
+  #loader {
+    min-height: 90px;
+    text-align: center;
+  }
+
+  .chart-options-content {
+    display: flex;
+    flex-direction: row;
+    flex-basis: 90%;
+  }
+}
+</style>