From 52509875195c4fa5d3c25f2a1ce218117261b8c6 Mon Sep 17 00:00:00 2001
From: Tomas Coesens <coesent@factry.io>
Date: Thu, 26 Dec 2024 18:12:50 +0100
Subject: [PATCH] Fixed custom intervals not being remembered when switching
 tabs

---
 src/QueryEditor/QueryOptions.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/QueryEditor/QueryOptions.tsx b/src/QueryEditor/QueryOptions.tsx
index f9518d0..c7e6a6f 100644
--- a/src/QueryEditor/QueryOptions.tsx
+++ b/src/QueryEditor/QueryOptions.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from 'react'
+import React, { ChangeEvent, useState, useEffect } from 'react'
 import { SelectableValue } from '@grafana/data'
 import { CollapsableSection, InlineField, InlineFieldRow, InlineLabel, InlineSwitch, Input, Select } from '@grafana/ui'
 import { QueryTag, TagsSection } from 'components/TagsSection/TagsSection'
@@ -31,6 +31,22 @@ export const QueryOptions = (props: Props): JSX.Element => {
   const [periods, setPeriods] = useState(getPeriods())
   const [seriesLimit, setSeriesLimit] = useDebounce<number>(props.seriesLimit, 500, props.onChangeSeriesLimit)
 
+  useEffect(() => {
+    if (props.state.Aggregation?.Period) {
+      const periodExists = periods.some(
+        (period) => period.value === props.state.Aggregation?.Period
+      );
+
+      if (!periodExists) {
+        const customValue: SelectableValue<string> = {
+          value: props.state.Aggregation?.Period,
+          label: props.state.Aggregation?.Period
+        };
+        setPeriods((prevPeriods) => [...prevPeriods, customValue]);
+      }
+    }
+  }, [periods, props.state.Aggregation?.Period]);
+
   const getAggregationOptions = (
     datatypes: string[],
     options: MeasurementQueryOptions