SQL Modal Changes

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

@@ -34,6 +34,7 @@ import {
 	RuleTypeOverride,
 	Combinator,
 } from '../../providers/FilterProvider';
+import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 
 type RuleSetProps = {
 	ruleSet: RuleGroupTypeOverride;
@@ -50,6 +51,7 @@ const {
 	updateGroupCombinator,
 	updateParentCombinator,
 	updateRule,
+	parseQuery,
 } = filterStoreReducers;
 
 type RuleViewType = {
@@ -284,17 +286,25 @@ export const QueryPills = () => {
 	);
 };
 
-export const FilterQueryBuilder = (props: { onClear: () => void; onApply: () => void }) => {
+export const FilterQueryBuilder = (props: {
+	onClear: () => void;
+	onApply: () => void;
+	filterBuilderQuery: (query: string) => void;
+}) => {
 	const [{ query, isSumbitDisabled, fields }, setFilterStore] = useFilterStore((store) => store);
 	const [{ isQuerySearchActive, viewMode }] = useLogsStore((store) => store.custQuerySearchState);
 	const isFiltersApplied = isQuerySearchActive && viewMode === 'filters';
 	const { combinator, rules: ruleSets } = query;
+	const [currentStream] = useAppStore((store) => store.currentStream);
 
 	useEffect(() => {
 		// init first rule
 		if (query.rules.length === 0 && fields.length !== 0) {
 			setFilterStore((store) => createRuleGroup(store));
 		}
+
+		const { parsedQuery } = parseQuery(query, currentStream || '');
+		props.filterBuilderQuery(parsedQuery);
 	}, [query.rules, fields]);
 
 	return (

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

@@ -4,9 +4,9 @@ import classes from '../../styles/Querier.module.css';
 import { Text } from '@mantine/core';
 import { FilterQueryBuilder, QueryPills } from './FilterQueryBuilder';
 import { AppliedSQLQuery } from './QueryEditor';
-import QueryCodeEditor, { defaultCustSQLQuery } from './QueryCodeEditor';
+import QueryCodeEditor from './QueryCodeEditor';
 import { useLogsStore, logsStoreReducers } from '../../providers/LogsProvider';
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { filterStoreReducers, noValueOperators, useFilterStore } from '../../providers/FilterProvider';
 import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import { useStreamStore } from '../../providers/StreamProvider';
@@ -74,24 +74,30 @@ const QuerierModal = (props: {
 	onSqlSearchApply: (query: string) => void;
 	onFiltersApply: () => void;
 }) => {
-	const [currentStream] = useAppStore((store) => store.currentStream);
-	const [{ showQueryBuilder, viewMode }, setLogsStore] = useLogsStore((store) => store.custQuerySearchState);
-	const [streamInfo] = useStreamStore((store) => store.info);
-	const [timeRange] = useAppStore((store) => store.timeRange);
-	const timePartitionColumn = _.get(streamInfo, 'time_partition', 'p_timestamp');
+	const [{ showQueryBuilder, viewMode, custSearchQuery }, setLogsStore] = useLogsStore(
+		(store) => store.custQuerySearchState,
+	);
+
+	const [parsedFilterQuery, setParsedFilterQuery] = useState('');
+
+	const getParsedFilterQuery = (query: string) => {
+		setParsedFilterQuery(query);
+	};
 	const onClose = useCallback(() => {
 		setLogsStore((store) => toggleQueryBuilder(store, false));
 	}, []);
 	const queryCodeEditorRef = useRef<any>(''); // to store input value even after the editor unmounts
 
 	useEffect(() => {
-		queryCodeEditorRef.current = defaultCustSQLQuery(
-			currentStream,
-			timeRange.startTime,
-			timeRange.endTime,
-			timePartitionColumn,
-		);
-	}, [currentStream, timeRange.endTime, timeRange.startTime, timePartitionColumn]);
+		if (!_.isEmpty(parsedFilterQuery)) {
+			queryCodeEditorRef.current = parsedFilterQuery;
+			return;
+		}
+		if (!_.isEmpty(custSearchQuery)) {
+			queryCodeEditorRef.current = custSearchQuery;
+			return;
+		}
+	}, [parsedFilterQuery, custSearchQuery]);
 
 	return (
 		<Modal
@@ -106,7 +112,11 @@ const QuerierModal = (props: {
 			title={<ModalTitle title={getLabel(viewMode)} />}>
 			<Stack style={{ padding: '1rem 0.5rem', height: '100%' }} gap={2}>
 				{viewMode === 'filters' ? (
-					<FilterQueryBuilder onClear={props.onClear} onApply={props.onFiltersApply} />
+					<FilterQueryBuilder
+						onClear={props.onClear}
+						onApply={props.onFiltersApply}
+						filterBuilderQuery={getParsedFilterQuery}
+					/>
 				) : (
 					<QueryCodeEditor
 						queryCodeEditorRef={queryCodeEditorRef}