bfg-common 1.6.111 → 1.6.113

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

@@ -1,569 +1,569 @@
-<template>
-  <common-monitor-advanced-tools-chart-options-modal-new
-    v-if="isNewView"
-    v-model:selected-rows="selectedRows"
-    v-model:selected-metric-local="selectedMetricLocal"
-    v-model:local-period-type="localPeriodType"
-    v-model:local-custom-time="localCustomTime"
-    v-model:selected-chart-type-local="selectedChartTypeLocal"
-    v-model:timespan-type="timespanType"
-    v-model:unit-count="unitCount"
-    :type="props.type"
-    :language="props.language"
-    :options-names="optionsNames"
-    :local-selected-chart-option-name="localSelectedChartOptionName"
-    :custom-date-from="props.customDateFrom"
-    :custom-date-to="props.customDateTo"
-    :custom-time-from="props.customTimeFrom"
-    :custom-time-to="props.customTimeTo"
-    :total-cores="props.totalCores"
-    :hostId="props.hostId"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    :is-disabled-submit="isDisabledSubmit"
-    :is-show-alerts="isShowAlerts"
-    :alerts="alerts"
-    :metrics-items="metricsItems"
-    :local-selected-counters-keys="localSelectedCountersKeys"
-    :local-selected-chart-type="selectedChartTypeLocal"
-    :local-selected-timespan-type="localSelectedTimespanType"
-    :local-units-count="localUnitsCount"
-    :selected-metrics-keys="selectedMetricsKeys"
-    :error-last-input="errorLastInput"
-    :error-date-from="errorDateFrom"
-    :error-time-from="errorTimeFrom"
-    :error-date-to="errorDateTo"
-    :error-time-to="errorTimeTo"
-    :selected-node-name="props.selectedNodeName"
-    :project="props.project"
-    :power-data="props.powerData"
-    :temperature-data="props.temperatureData"
-    :current-selected-objects="localSelectedObjects"
-    @hide-main-modal="onHideMainModal"
-    @submit-main-modal="onSubmitMainModal"
-    @remove-alerts="onRemoveAlerts"
-    @save-options="onSaveOptions"
-    @check-validations="onCheckValidations"
-    @select-local-option-name="onSelectLocalOptionName"
-    @delete-chart-name="onDeleteChartName"
-    @update-custom-date-from="onUpdateCustomDateFrom"
-    @update-custom-date-to="onUpdateCustomDateTo"
-    @update-custom-time-from="onUpdateCustomTimeFrom"
-    @update-custom-time-to="onUpdateCustomTimeTo"
-    @local-selected-objects="localSelectedObjects = $event"
-  />
-  <common-monitor-advanced-tools-chart-options-modal-old
-    v-else
-    v-model:selected-rows="selectedRows"
-    v-model:selected-metric-local="selectedMetricLocal"
-    v-model:local-period-type="localPeriodType"
-    v-model:local-custom-time="localCustomTime"
-    v-model:selected-chart-type-local="selectedChartTypeLocal"
-    v-model:timespan-type="timespanType"
-    v-model:unit-count="unitCount"
-    :type="props.type"
-    :language="props.language"
-    :options-names="optionsNames"
-    :local-selected-chart-option-name="localSelectedChartOptionName"
-    :custom-date-from="props.customDateFrom"
-    :custom-date-to="props.customDateTo"
-    :custom-time-from="props.customTimeFrom"
-    :custom-time-to="props.customTimeTo"
-    :total-cores="props.totalCores"
-    :hostId="props.hostId"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    :is-disabled-submit="isDisabledSubmit"
-    :is-show-alerts="isShowAlerts"
-    :alerts="alerts"
-    :metrics-items="metricsItems"
-    :local-selected-counters-keys="localSelectedCountersKeys"
-    :local-selected-chart-type="localSelectedChartType"
-    :local-selected-timespan-type="localSelectedTimespanType"
-    :local-units-count="localUnitsCount"
-    :selected-metrics-keys="selectedMetricsKeys"
-    :project="props.project"
-    :power-data="props.powerData"
-    :temperature-data="props.temperatureData"
-    :current-selected-objects="localSelectedObjects"
-    @hide-main-modal="onHideMainModal"
-    @submit-main-modal="onSubmitMainModal"
-    @remove-alerts="onRemoveAlerts"
-    @save-options="onSaveOptions"
-    @check-validations="onCheckValidations"
-    @select-local-option-name="onSelectLocalOptionName"
-    @delete-chart-name="onDeleteChartName"
-    @update-custom-date-from="onUpdateCustomDateFrom"
-    @update-custom-date-to="onUpdateCustomDateTo"
-    @update-custom-time-from="onUpdateCustomTimeFrom"
-    @update-custom-time-to="onUpdateCustomTimeTo"
-    @local-selected-objects="localSelectedObjects = $event"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
-import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
-import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
-import type {
-  UI_T_ChartHost,
-  UI_T_ChartVm,
-} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
-import type { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/interfaces'
-import type { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import { metricsFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/metrics/lib/config/optionsMetrics'
-import {
-  getCurrentOptionsStorageFunc,
-  removeSelectedOptionsFromStorageFunc,
-  getSelectedOptionsValueFromStorageFunc,
-} from '~/components/common/monitor/advanced/tools/lib/config/advancedToolbar'
-import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/lib/config/dateChecker'
-import { getValidDateByOptionFunc } from '~/components/common/monitor/lib/config/getValidDateByOption'
-import { checkIsDisabledSubmit } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/utils/checkSubmit'
-
-const props = withDefaults(
-  defineProps<{
-    type: UI_T_AdvancedType
-    language: string
-    selectedCountersKeys: number[]
-    selectedMetric: UI_T_ChartHost | UI_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
-    project: UI_T_Project
-    objectsLoading: boolean
-    objectsData: UI_I_ObjectItem[]
-    validDateEnd: number
-    formatDate: string
-    powerData: UI_I_AdvancedCounterItem[]
-    temperatureData: UI_I_AdvancedCounterItem[]
-    selectedNodeName?: string
-  }>(),
-  {
-    selectedNodeName: undefined,
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
-  (event: 'select-metric-local', 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: 'delete-option'): void
-  (event: 'save-option-name'): void
-  (event: 'submit-options', value: UI_I_OptionsForm): void
-  (event: 'select-objects', value: string): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const routeType = '' + useRoute().params.type
-const routeId = '' + useRoute().params.id
-
-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, props.project)
-)
-const selectedMetricLocal = ref<UI_T_ChartHost | UI_T_ChartVm>(
-  (props.selectedMetric || '' + metricsItems.value[0]?.value) as
-    | UI_T_ChartHost
-    | UI_T_ChartVm
-)
-
-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 onHideMainModal = (): void => {
-  emits('hide')
-}
-
-const selectedRows = ref<UI_I_AdvancedCounterItem[]>([])
-const selectedMetricsKeys = computed<number[]>(() =>
-  selectedRows.value.map((item) => item.id)
-)
-const selectedChartTypeLocal = ref<string>('')
-
-const errorLastInput = ref<string>('')
-const errorDateFrom = ref<string>('')
-const errorTimeFrom = ref<string>('')
-const errorDateTo = ref<string>('')
-const errorTimeTo = ref<string>('')
-
-const onCheckValidations = (): boolean => {
-  // TODO Проверить какой дата будет приходить про пустом значение и добавить тексты для ошибок
-  // console.log(
-  //   localCustomDateFrom.value,
-  //   localCustomDateTo.value,
-  //   localCustomTimeFrom.value,
-  //   localCustomTimeTo.value,
-  // )
-  if (
-    isNewView.value &&
-    timespanType.value === 'custom_interval' &&
-    localPeriodType.value === 'last'
-  ) {
-    if (String(unitCount.value) === '') {
-      errorLastInput.value = localization.value.common.fieldRequired
-      return false
-    } else if (!/^\d+$/.test(String(unitCount.value))) {
-      errorLastInput.value = localization.value.common.fieldRequired
-      return false
-    }
-  }
-
-  const checkDateResult = checkDateFunc(
-    localization.value,
-    localCustomDateFrom.value,
-    localCustomDateTo.value,
-    localCustomTimeFrom.value,
-    localCustomTimeTo.value,
-    props.validDateEnd,
-    props.formatDate
-  )
-
-  if (isDisabledSubmit.value) {
-    alerts.value = [localization.value.inventoryMonitor.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: UI_I_AdvancedCounterItem[]): string => {
-  const result: string[] = []
-
-  data.forEach((item) => {
-    if (props.type === 'vm' && selectedMetricLocal.value === 'network') {
-      const currentFields = []
-      const objectArray = localSelectedObjects.value.split(', ')
-      if (objectArray.length) {
-        objectArray.forEach((item2) => {
-          currentFields.push(`${item.nameEn} ${item2}`)
-        })
-      } else currentFields.push(item.nameEn)
-
-      result.push(currentFields.join(', '))
-    } else result.push(item.nameEn)
-  })
-
-  return result.join(',')
-}
-
-const onSubmitMainModal = (): void => {
-  if (!onCheckValidations()) return
-
-  if (['select_options', 'default'].includes(selectedLocalOptionName.value))
-    selectedLocalOptionName.value = 'custom'
-
-  onSaveOptions(selectedLocalOptionName.value)
-
-  // const currentFields =
-  //   localSelectedObjects.value || currentFieldsByArray(selectedRows.value)
-
-  const currentFields = 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,
-      props.validDateEnd,
-      props.formatDate
-    )
-    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: selectedMetricLocal.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)
-  onHideMainModal()
-}
-
-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: selectedMetricLocal.value,
-    objects: localSelectedObjects.value,
-    validShowName: name,
-    nodeId: routeId,
-    timespan: {
-      periodType: localPeriodType.value,
-      units: localCustomTime.value,
-      unitsCount: unitCount.value,
-      type: timespanType.value,
-    },
-  }
-  const prefix = props.project === 'sphere'
-  useLocalStorage(`ChartOptionsAdvanced${name}`, saveOptionsData, prefix)
-  optionsNames.value = getCurrentOptionsStorageFunc(props.project)
-  // localSelectedChartOptionName.value = name
-  emits('save-option-name')
-}
-
-const setSelectOptions = (): void => {
-  selectedMetricLocal.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 => {
-  selectedMetricLocal.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 = getSelectedOptionsValueFromStorageFunc(
-    name,
-    props.project
-  )
-
-  if (selectedValue.routeType !== routeType) return
-
-  let currentChartType = ''
-  if (selectedValue.chartType === 'line_graph') currentChartType = 'spline'
-  else if (selectedValue.chartType === 'stacked_graph')
-    currentChartType = 'area'
-
-  selectedMetricLocal.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
-  localSelectedObjects.value = selectedValue.objects
-}
-
-const onSelectLocalOptionName = (name: string): void => {
-  selectedLocalOptionName.value = name
-
-  if (optionsNames.value.includes(name)) setCustomOptions(name)
-  else if (name === 'default') {
-    localSelectedObjects.value = ''
-    setDefaultOptions()
-  } else if (name === 'select_options') {
-    localSelectedObjects.value = ''
-    setSelectOptions()
-  }
-}
-
-watch(
-  localSelectedChartOptionName,
-  (newValue) => {
-    if (!newValue) return
-
-    setCustomOptions(newValue)
-  },
-  { immediate: true }
-)
-
-const onDeleteChartName = (name: string): void => {
-  removeSelectedOptionsFromStorageFunc(name, props.project)
-  optionsNames.value = getCurrentOptionsStorageFunc(props.project)
-  setSelectOptions()
-  emits('delete-option')
-}
-
-const isDisabledSubmit = computed<boolean>(() =>
-  checkIsDisabledSubmit(
-    props.type,
-    selectedMetricLocal.value,
-    selectedRows.value,
-    localSelectedObjects.value,
-    props.project
-  )
-)
-
-watch(
-  selectedMetricLocal,
-  (newValue) => {
-    emits('select-metric-local', newValue)
-  },
-  { immediate: true }
-)
-
-onMounted(() => {
-  optionsNames.value = getCurrentOptionsStorageFunc(props.project)
-})
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <common-monitor-advanced-tools-chart-options-modal-new
+    v-if="isNewView"
+    v-model:selected-rows="selectedRows"
+    v-model:selected-metric-local="selectedMetricLocal"
+    v-model:local-period-type="localPeriodType"
+    v-model:local-custom-time="localCustomTime"
+    v-model:selected-chart-type-local="selectedChartTypeLocal"
+    v-model:timespan-type="timespanType"
+    v-model:unit-count="unitCount"
+    :type="props.type"
+    :language="props.language"
+    :options-names="optionsNames"
+    :local-selected-chart-option-name="localSelectedChartOptionName"
+    :custom-date-from="props.customDateFrom"
+    :custom-date-to="props.customDateTo"
+    :custom-time-from="props.customTimeFrom"
+    :custom-time-to="props.customTimeTo"
+    :total-cores="props.totalCores"
+    :hostId="props.hostId"
+    :objects-loading="props.objectsLoading"
+    :objects-data="props.objectsData"
+    :valid-date-end="props.validDateEnd"
+    :is-disabled-submit="isDisabledSubmit"
+    :is-show-alerts="isShowAlerts"
+    :alerts="alerts"
+    :metrics-items="metricsItems"
+    :local-selected-counters-keys="localSelectedCountersKeys"
+    :local-selected-chart-type="selectedChartTypeLocal"
+    :local-selected-timespan-type="localSelectedTimespanType"
+    :local-units-count="localUnitsCount"
+    :selected-metrics-keys="selectedMetricsKeys"
+    :error-last-input="errorLastInput"
+    :error-date-from="errorDateFrom"
+    :error-time-from="errorTimeFrom"
+    :error-date-to="errorDateTo"
+    :error-time-to="errorTimeTo"
+    :selected-node-name="props.selectedNodeName"
+    :project="props.project"
+    :power-data="props.powerData"
+    :temperature-data="props.temperatureData"
+    :current-selected-objects="localSelectedObjects"
+    @hide-main-modal="onHideMainModal"
+    @submit-main-modal="onSubmitMainModal"
+    @remove-alerts="onRemoveAlerts"
+    @save-options="onSaveOptions"
+    @check-validations="onCheckValidations"
+    @select-local-option-name="onSelectLocalOptionName"
+    @delete-chart-name="onDeleteChartName"
+    @update-custom-date-from="onUpdateCustomDateFrom"
+    @update-custom-date-to="onUpdateCustomDateTo"
+    @update-custom-time-from="onUpdateCustomTimeFrom"
+    @update-custom-time-to="onUpdateCustomTimeTo"
+    @local-selected-objects="localSelectedObjects = $event"
+  />
+  <common-monitor-advanced-tools-chart-options-modal-old
+    v-else
+    v-model:selected-rows="selectedRows"
+    v-model:selected-metric-local="selectedMetricLocal"
+    v-model:local-period-type="localPeriodType"
+    v-model:local-custom-time="localCustomTime"
+    v-model:selected-chart-type-local="selectedChartTypeLocal"
+    v-model:timespan-type="timespanType"
+    v-model:unit-count="unitCount"
+    :type="props.type"
+    :language="props.language"
+    :options-names="optionsNames"
+    :local-selected-chart-option-name="localSelectedChartOptionName"
+    :custom-date-from="props.customDateFrom"
+    :custom-date-to="props.customDateTo"
+    :custom-time-from="props.customTimeFrom"
+    :custom-time-to="props.customTimeTo"
+    :total-cores="props.totalCores"
+    :hostId="props.hostId"
+    :objects-loading="props.objectsLoading"
+    :objects-data="props.objectsData"
+    :valid-date-end="props.validDateEnd"
+    :is-disabled-submit="isDisabledSubmit"
+    :is-show-alerts="isShowAlerts"
+    :alerts="alerts"
+    :metrics-items="metricsItems"
+    :local-selected-counters-keys="localSelectedCountersKeys"
+    :local-selected-chart-type="localSelectedChartType"
+    :local-selected-timespan-type="localSelectedTimespanType"
+    :local-units-count="localUnitsCount"
+    :selected-metrics-keys="selectedMetricsKeys"
+    :project="props.project"
+    :power-data="props.powerData"
+    :temperature-data="props.temperatureData"
+    :current-selected-objects="localSelectedObjects"
+    @hide-main-modal="onHideMainModal"
+    @submit-main-modal="onSubmitMainModal"
+    @remove-alerts="onRemoveAlerts"
+    @save-options="onSaveOptions"
+    @check-validations="onCheckValidations"
+    @select-local-option-name="onSelectLocalOptionName"
+    @delete-chart-name="onDeleteChartName"
+    @update-custom-date-from="onUpdateCustomDateFrom"
+    @update-custom-date-to="onUpdateCustomDateTo"
+    @update-custom-time-from="onUpdateCustomTimeFrom"
+    @update-custom-time-to="onUpdateCustomTimeTo"
+    @local-selected-objects="localSelectedObjects = $event"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
+import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
+import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
+import type {
+  UI_T_ChartHost,
+  UI_T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
+import type { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/interfaces'
+import type { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import { metricsFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/metrics/lib/config/optionsMetrics'
+import {
+  getCurrentOptionsStorageFunc,
+  removeSelectedOptionsFromStorageFunc,
+  getSelectedOptionsValueFromStorageFunc,
+} from '~/components/common/monitor/advanced/tools/lib/config/advancedToolbar'
+import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/lib/config/dateChecker'
+import { getValidDateByOptionFunc } from '~/components/common/monitor/lib/config/getValidDateByOption'
+import { checkIsDisabledSubmit } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/utils/checkSubmit'
+
+const props = withDefaults(
+  defineProps<{
+    type: UI_T_AdvancedType
+    language: string
+    selectedCountersKeys: number[]
+    selectedMetric: UI_T_ChartHost | UI_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
+    project: UI_T_Project
+    objectsLoading: boolean
+    objectsData: UI_I_ObjectItem[]
+    validDateEnd: number
+    formatDate: string
+    powerData: UI_I_AdvancedCounterItem[]
+    temperatureData: UI_I_AdvancedCounterItem[]
+    selectedNodeName?: string
+  }>(),
+  {
+    selectedNodeName: undefined,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
+  (event: 'select-metric-local', 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: 'delete-option'): void
+  (event: 'save-option-name'): void
+  (event: 'submit-options', value: UI_I_OptionsForm): void
+  (event: 'select-objects', value: string): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const routeType = '' + useRoute().params.type
+const routeId = '' + useRoute().params.id
+
+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, props.project)
+)
+const selectedMetricLocal = ref<UI_T_ChartHost | UI_T_ChartVm>(
+  (props.selectedMetric || '' + metricsItems.value[0]?.value) as
+    | UI_T_ChartHost
+    | UI_T_ChartVm
+)
+
+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 onHideMainModal = (): void => {
+  emits('hide')
+}
+
+const selectedRows = ref<UI_I_AdvancedCounterItem[]>([])
+const selectedMetricsKeys = computed<number[]>(() =>
+  selectedRows.value.map((item) => item.id)
+)
+const selectedChartTypeLocal = ref<string>('')
+
+const errorLastInput = ref<string>('')
+const errorDateFrom = ref<string>('')
+const errorTimeFrom = ref<string>('')
+const errorDateTo = ref<string>('')
+const errorTimeTo = ref<string>('')
+
+const onCheckValidations = (): boolean => {
+  // TODO Проверить какой дата будет приходить про пустом значение и добавить тексты для ошибок
+  // console.log(
+  //   localCustomDateFrom.value,
+  //   localCustomDateTo.value,
+  //   localCustomTimeFrom.value,
+  //   localCustomTimeTo.value,
+  // )
+  if (
+    isNewView.value &&
+    timespanType.value === 'custom_interval' &&
+    localPeriodType.value === 'last'
+  ) {
+    if (String(unitCount.value) === '') {
+      errorLastInput.value = localization.value.common.fieldRequired
+      return false
+    } else if (!/^\d+$/.test(String(unitCount.value))) {
+      errorLastInput.value = localization.value.common.fieldRequired
+      return false
+    }
+  }
+
+  const checkDateResult = checkDateFunc(
+    localization.value,
+    localCustomDateFrom.value,
+    localCustomDateTo.value,
+    localCustomTimeFrom.value,
+    localCustomTimeTo.value,
+    props.validDateEnd,
+    props.formatDate
+  )
+
+  if (isDisabledSubmit.value) {
+    alerts.value = [localization.value.inventoryMonitor.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: UI_I_AdvancedCounterItem[]): string => {
+  const result: string[] = []
+
+  data.forEach((item) => {
+    if (props.type === 'vm' && selectedMetricLocal.value === 'network') {
+      const currentFields = []
+      const objectArray = localSelectedObjects.value.split(', ')
+      if (objectArray.length) {
+        objectArray.forEach((item2) => {
+          currentFields.push(`${item.nameEn} ${item2}`)
+        })
+      } else currentFields.push(item.nameEn)
+
+      result.push(currentFields.join(', '))
+    } else result.push(item.nameEn)
+  })
+
+  return result.join(',')
+}
+
+const onSubmitMainModal = (): void => {
+  if (!onCheckValidations()) return
+
+  if (['select_options', 'default'].includes(selectedLocalOptionName.value))
+    selectedLocalOptionName.value = 'custom'
+
+  onSaveOptions(selectedLocalOptionName.value)
+
+  // const currentFields =
+  //   localSelectedObjects.value || currentFieldsByArray(selectedRows.value)
+
+  const currentFields = 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,
+      props.validDateEnd,
+      props.formatDate
+    )
+    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: selectedMetricLocal.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)
+  onHideMainModal()
+}
+
+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: selectedMetricLocal.value,
+    objects: localSelectedObjects.value,
+    validShowName: name,
+    nodeId: routeId,
+    timespan: {
+      periodType: localPeriodType.value,
+      units: localCustomTime.value,
+      unitsCount: unitCount.value,
+      type: timespanType.value,
+    },
+  }
+  const prefix = props.project === 'sphere'
+  useLocalStorage(`ChartOptionsAdvanced${name}`, saveOptionsData, prefix)
+  optionsNames.value = getCurrentOptionsStorageFunc(props.project)
+  // localSelectedChartOptionName.value = name
+  emits('save-option-name')
+}
+
+const setSelectOptions = (): void => {
+  selectedMetricLocal.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 => {
+  selectedMetricLocal.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 = getSelectedOptionsValueFromStorageFunc(
+    name,
+    props.project
+  )
+
+  if (selectedValue.routeType !== routeType) return
+
+  let currentChartType = ''
+  if (selectedValue.chartType === 'line_graph') currentChartType = 'spline'
+  else if (selectedValue.chartType === 'stacked_graph')
+    currentChartType = 'area'
+
+  selectedMetricLocal.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
+  localSelectedObjects.value = selectedValue.objects
+}
+
+const onSelectLocalOptionName = (name: string): void => {
+  selectedLocalOptionName.value = name
+
+  if (optionsNames.value.includes(name)) setCustomOptions(name)
+  else if (name === 'default') {
+    localSelectedObjects.value = ''
+    setDefaultOptions()
+  } else if (name === 'select_options') {
+    localSelectedObjects.value = ''
+    setSelectOptions()
+  }
+}
+
+watch(
+  localSelectedChartOptionName,
+  (newValue) => {
+    if (!newValue) return
+
+    setCustomOptions(newValue)
+  },
+  { immediate: true }
+)
+
+const onDeleteChartName = (name: string): void => {
+  removeSelectedOptionsFromStorageFunc(name, props.project)
+  optionsNames.value = getCurrentOptionsStorageFunc(props.project)
+  setSelectOptions()
+  emits('delete-option')
+}
+
+const isDisabledSubmit = computed<boolean>(() =>
+  checkIsDisabledSubmit(
+    props.type,
+    selectedMetricLocal.value,
+    selectedRows.value,
+    localSelectedObjects.value,
+    props.project
+  )
+)
+
+watch(
+  selectedMetricLocal,
+  (newValue) => {
+    emits('select-metric-local', newValue)
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  optionsNames.value = getCurrentOptionsStorageFunc(props.project)
+})
+</script>
+
+<style scoped lang="scss"></style>