fix(ui): TE-2049 add custom query filter to the alert config (#1319)

startreedata · Jan 30, 2024 · c037f3e · c037f3e
1 parent acae813
commit c037f3e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/thirdeye-ui/src/app/components/cohort-detector/dataset-details/dataset-details.component.tsx b/thirdeye-ui/src/app/components/cohort-detector/dataset-details/dataset-details.component.tsx
@@ -61,6 +61,8 @@ export const DatasetDetails: FunctionComponent<DatasetDetailsProps> = ({
     initialSelectedDataset,
     initialSelectedDatasource,
     initialSelectedAggregationFunc,
+    queryValue,
+    setQueryValue,
 }) => {
     const {
         datasources,
@@ -102,10 +104,6 @@ export const DatasetDetails: FunctionComponent<DatasetDetailsProps> = ({
             initialSelectedAggregationFunc ?? MetricAggFunction.SUM
         );
     const [selectedDimensions, setSelectedDimensions] = useState<string[]>([]);
-    const [queryValue, setQueryValue] = useSessionStorage<string>(
-        SessionStorageKeys.QueryFilterOnAlertFlow,
-        ""
-    );
 
     useEffect(() => {
         getDatasets();

diff --git a/thirdeye-ui/src/app/components/cohort-detector/dataset-details/dataset-details.interfaces.ts b/thirdeye-ui/src/app/components/cohort-detector/dataset-details/dataset-details.interfaces.ts
@@ -34,4 +34,8 @@ export interface DatasetDetailsProps {
     initialSelectedDataset?: string;
     initialSelectedDatasource?: string;
     initialSelectedAggregationFunc?: MetricAggFunction;
+
+    // For the manually entered query filter
+    queryValue: string;
+    setQueryValue: (val: string) => void;
 }
diff --git a/...lerts-create-guided-page/setup-dimension-groups/setup-dimension-groups-page.component.tsx b/...lerts-create-guided-page/setup-dimension-groups/setup-dimension-groups-page.component.tsx
@@ -44,6 +44,10 @@ import { useGetCohort } from "../../../rest/rca/rca.actions";
 import { GetCohortParams } from "../../../rest/rca/rca.interfaces";
 import { notifyIfErrors } from "../../../utils/notifications/notifications.util";
 import { AppRouteRelative } from "../../../utils/routes/routes.util";
+import {
+    SessionStorageKeys,
+    useSessionStorage,
+} from "../../../utils/storage/use-session-storage";
 import { AlertCreatedGuidedPageOutletContext } from "../alerts-create-guided-page.interfaces";
 
 export const SetupDimensionGroupsPage: FunctionComponent = () => {
@@ -59,6 +63,11 @@ export const SetupDimensionGroupsPage: FunctionComponent = () => {
 
     const [selectedCohorts, setSelectedCohorts] = useState<CohortResult[]>([]);
 
+    const [queryValue, setQueryValue] = useSessionStorage<string>(
+        SessionStorageKeys.QueryFilterOnAlertFlow,
+        ""
+    );
+
     useEffect(() => {
         setIsMultiDimensionAlert(true);
     }, []);
@@ -143,10 +152,17 @@ export const SetupDimensionGroupsPage: FunctionComponent = () => {
             };
         });
 
+        let queryFilters = "${queryFilters}";
+
+        // Append the custom query filter if exists
+        if (queryValue) {
+            queryFilters = `${queryFilters} AND ${queryValue}`;
+        }
+
         onAlertPropertyChange({
             templateProperties: {
                 ...alert.templateProperties,
-                queryFilters: "${queryFilters}",
+                queryFilters,
                 enumerationItems: enumerationItemConfiguration,
             },
         });
@@ -182,6 +198,8 @@ export const SetupDimensionGroupsPage: FunctionComponent = () => {
                         initialSelectedMetric={
                             alert.templateProperties.aggregationColumn as string
                         }
+                        queryValue={queryValue}
+                        setQueryValue={setQueryValue}
                         submitButtonLabel={t(
                             "message.generate-dimensions-to-monitor"
                         )}