Added filter_query to filter builder

src/@types/parseable/api/savedFilters.ts

@@ -7,7 +7,7 @@ export type SavedFilterType = {
 	filter_id: string;
 	query: {
 		filter_type: 'sql' | 'builder';
-		filter_query?: string;
+		filter_query: string;
 		filter_builder?: QueryType;
 	};
 	time_filter: null | {
@@ -21,7 +21,7 @@ export type CreateSavedFilterType = {
 	filter_name: string;
 	query: {
 		filter_type: 'sql' | 'builder';
-		filter_query?: string;
+		filter_query: string;
 		filter_builder?: QueryType;
 	};
 	time_filter: null | {

src/pages/Stream/components/Querier/FilterQueryBuilder.tsx

@@ -116,18 +116,18 @@ const CombinatorToggle = (props: CombinatorToggleType) => {
 	const { onCombinatorChange, isOrSelected } = props;
 	return (
 		<Box className={classes.toggleBtnContainer}>
-			<Text
-				style={{ fontSize: '0.6rem' }}
-				className={isOrSelected ? activeBtnClass : inActiveBtnClass}
-				onClick={() => onCombinatorChange('or')}>
-				OR
-			</Text>
 			<Text
 				style={{ fontSize: '0.6rem' }}
 				className={!isOrSelected ? activeBtnClass : inActiveBtnClass}
 				onClick={() => onCombinatorChange('and')}>
 				AND
 			</Text>
+			<Text
+				style={{ fontSize: '0.6rem' }}
+				className={isOrSelected ? activeBtnClass : inActiveBtnClass}
+				onClick={() => onCombinatorChange('or')}>
+				OR
+			</Text>
 		</Box>
 	);
 };

src/pages/Stream/components/Querier/SaveFilterModal.tsx

@@ -22,14 +22,7 @@ interface FormObjectType extends Omit<SavedFilterType, 'filter_id' | 'version'>
 }
 
 const sanitizeFilterItem = (formObject: FormObjectType): SavedFilterType => {
-	const {
-		stream_name,
-		filter_name,
-		filter_id = '',
-		query,
-		selectedTimeRangeOption,
-		version = '',
-	} = formObject;
+	const { stream_name, filter_name, filter_id = '', query, selectedTimeRangeOption, version = '' } = formObject;
 	return {
 		filter_id,
 		version,
@@ -76,7 +69,8 @@ const SaveFilterModal = () => {
 				filter_name: '',
 				query: {
 					filter_type: isSqlMode ? 'sql' : 'builder',
-					...(isSqlMode ? { filter_query: custSearchQuery } : { filter_builder: appliedQuery }),
+					filter_query: custSearchQuery,
+					...(!isSqlMode && { filter_builder: appliedQuery }),
 				},
 				time_filter: {
 					from: timeRange.startTime.toISOString(),

src/pages/Stream/hooks/useParamsController.ts

@@ -6,11 +6,15 @@ import { FIXED_DURATIONS } from '@/constants/timeConstants';
 import dayjs from 'dayjs';
 import timeRangeUtils from '@/utils/timeRangeUtils';
 import moment from 'moment-timezone';
+import { filterStoreReducers, QueryType, useFilterStore } from '../providers/FilterProvider';
+import { parseSQLWithIDs } from '../utils';
+
 
 const { getRelativeStartAndEndDate, formatDateWithTimezone, getLocalTimezone } = timeRangeUtils;
 const { setTimeRange, onToggleView, setPerPage, setCustQuerySearchState } = logsStoreReducers;
+const { applySavedFilters } = filterStoreReducers;
 const timeRangeFormat = 'DD-MMM-YYYY_HH-mmz';
-const keys = ['view', 'rows', 'interval', 'from', 'to', 'query'];
+const keys = ['view', 'rows', 'interval', 'from', 'to', 'query', 'filterType'];
 const FIXED_ROWS = ['50', '100', '150', '200'];
 
 const dateToParamString = (date: Date) => {
@@ -54,15 +58,17 @@ const storeToParamsObj = (opts: {
 	page: string;
 	rows: string;
 	query: string;
+	filterType: string;
 }): Record<string, string> => {
-	const { timeRange, offset, page, view, rows, query } = opts;
+	const { timeRange, offset, page, view, rows, query, filterType } = opts;
 	const params: Record<string, string> = {
 		...deriveTimeRangeParams(timeRange),
 		view,
 		offset,
 		rows,
 		page,
 		query,
+		filterType,
 	};
 	return _.pickBy(params, (val, key) => !_.isEmpty(val) && _.includes(keys, key));
 };
@@ -84,6 +90,7 @@ const useParamsController = () => {
 	const [viewMode] = useLogsStore((store) => store.viewMode);
 	const [custQuerySearchState] = useLogsStore((store) => store.custQuerySearchState);
 	const [timeRange, setLogsStore] = useLogsStore((store) => store.timeRange);
+	const [, setFilterStore] = useFilterStore((store) => store);
 
 	const { currentOffset, currentPage, perPage } = tableOpts;
 
@@ -97,6 +104,7 @@ const useParamsController = () => {
 			view: viewMode,
 			rows: `${perPage}`,
 			query: custQuerySearchState.custSearchQuery,
+			filterType: custQuerySearchState.viewMode,
 		});
 		const presentParams = paramsStringToParamsObj(searchParams);
 		if (['table', 'json'].includes(presentParams.view) && presentParams.view !== storeAsParams.view) {
@@ -107,7 +115,9 @@ const useParamsController = () => {
 		}
 
 		if (storeAsParams.query !== presentParams.query) {
-			setLogsStore((store) => setCustQuerySearchState(store, presentParams.query));
+			setLogsStore((store) => setCustQuerySearchState(store, presentParams.query, presentParams.filterType));
+			if (presentParams.filterType === 'filters')
+				setFilterStore((store) => applySavedFilters(store, parseSQLWithIDs(presentParams.query) as QueryType));
 		}
 		syncTimeRangeToStore(storeAsParams, presentParams);
 		setStoreSynced(true);
@@ -122,6 +132,7 @@ const useParamsController = () => {
 				view: viewMode,
 				rows: `${perPage}`,
 				query: custQuerySearchState.custSearchQuery,
+				filterType: custQuerySearchState.viewMode,
 			});
 			const presentParams = paramsStringToParamsObj(searchParams);
 			if (_.isEqual(storeAsParams, presentParams)) return;
@@ -139,6 +150,7 @@ const useParamsController = () => {
 			view: viewMode,
 			rows: `${perPage}`,
 			query: custQuerySearchState.custSearchQuery,
+			filterType: custQuerySearchState.viewMode,
 		});
 		const presentParams = paramsStringToParamsObj(searchParams);
 
@@ -153,7 +165,9 @@ const useParamsController = () => {
 		}
 
 		if (storeAsParams.query !== presentParams.query) {
-			setLogsStore((store) => setCustQuerySearchState(store, presentParams.query));
+			setLogsStore((store) => setCustQuerySearchState(store, presentParams.query, presentParams.filterType));
+			if (presentParams.filterType === 'filters')
+				setFilterStore((store) => applySavedFilters(store, parseSQLWithIDs(presentParams.query) as QueryType));
 		}
 		syncTimeRangeToStore(storeAsParams, presentParams);
 	}, [searchParams]);

src/pages/Stream/providers/LogsProvider.tsx

@@ -248,7 +248,7 @@ type LogsStoreReducers = {
 	resetQuickFilters: (store: LogsStore) => ReducerOutput;
 	streamChangeCleanup: (store: LogsStore) => ReducerOutput;
 	toggleQueryBuilder: (store: LogsStore, val?: boolean) => ReducerOutput;
-	setCustQuerySearchState: (store: LogsStore, query: string) => ReducerOutput;
+	setCustQuerySearchState: (store: LogsStore, query: string, viewMode: string) => ReducerOutput;
 	resetCustQuerySearchState: (store: LogsStore) => ReducerOutput;
 	toggleCustQuerySearchViewMode: (store: LogsStore, targetMode: 'sql' | 'filters') => ReducerOutput;
 	toggleDeleteModal: (store: LogsStore, val?: boolean) => ReducerOutput;
@@ -455,16 +455,16 @@ const toggleQueryBuilder = (store: LogsStore, val?: boolean) => {
 	};
 };
 
-const setCustQuerySearchState = (store: LogsStore, query: string) => {
+const setCustQuerySearchState = (store: LogsStore, query: string, viewMode: string) => {
 	const { timeRange } = store;
 	return {
 		custQuerySearchState: {
 			showQueryBuilder: false,
 			savedFilterId: null,
 			isQuerySearchActive: true,
 			custSearchQuery: query,
-			viewMode: 'sql',
-			activeMode: 'sql' as 'sql',
+			viewMode,
+			activeMode: viewMode === 'filters' ? ('filters' as 'filters') : ('sql' as 'sql'),
 		},
 		...getCleanStoreForRefetch(store),
 		timeRange,

src/pages/Stream/utils.ts

@@ -1,17 +1,42 @@
 import { Log } from '@/@types/parseable/api/query';
 import { LogStreamSchemaData } from '@/@types/parseable/api/stream';
 import { columnsToSkip } from './providers/LogsProvider';
+import { parseSQL } from 'react-querybuilder';
+import { QueryType, RuleGroupTypeOverride, RuleTypeOverride } from './providers/FilterProvider';
 
 export const getPageSlice = (page = 1, perPage: number, data: Log[]) => {
 	const firstPageIndex = (page - 1) * perPage;
 	const lastPageIndex = firstPageIndex + perPage;
 	return data ? data.slice(firstPageIndex, lastPageIndex) : [];
 };
 
+export const parseSQLWithIDs = (sqlString: string) => {
+	const parsedQuery = parseSQL(sqlString) as QueryType;
+
+	function isRuleGroup(rule: RuleTypeOverride | RuleGroupTypeOverride): rule is RuleGroupTypeOverride {
+		return 'combinator' in rule && 'rules' in rule;
+	}
+
+	function addIds(query: QueryType | RuleGroupTypeOverride) {
+		if (Array.isArray(query.rules)) {
+			query.rules.forEach((rule) => {
+				rule.id = 'rule-' + Math.random();
+
+				if (isRuleGroup(rule)) {
+					addIds(rule);
+				}
+			});
+		}
+	}
+
+	addIds(parsedQuery);
+	return parsedQuery;
+};
+
 export const makeHeadersFromSchema = (schema: LogStreamSchemaData | null): string[] => {
 	if (schema) {
-		const { fields } = schema;
-		return fields.map((field) => field.name);
+	const { fields } = schema;
+	return fields.map((field) => field.name);
 	} else {
 		return [];
 	}