From 72dcbb466bff8a09ba90730ad3171631c597a3b5 Mon Sep 17 00:00:00 2001 From: Koustav Date: Wed, 8 Jan 2025 16:48:26 +0530 Subject: [PATCH 1/9] SQL Modal Changes --- .../components/Querier/FilterQueryBuilder.tsx | 12 +++++- src/pages/Stream/components/Querier/index.tsx | 40 ++++++++++++------- 2 files changed, 36 insertions(+), 16 deletions(-) diff --git a/src/pages/Stream/components/Querier/FilterQueryBuilder.tsx b/src/pages/Stream/components/Querier/FilterQueryBuilder.tsx index 21fc6b5b..17403137 100644 --- a/src/pages/Stream/components/Querier/FilterQueryBuilder.tsx +++ b/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 ( diff --git a/src/pages/Stream/components/Querier/index.tsx b/src/pages/Stream/components/Querier/index.tsx index aea1dd97..f0ea201f 100644 --- a/src/pages/Stream/components/Querier/index.tsx +++ b/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(''); // 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 ( }> {viewMode === 'filters' ? ( - + ) : ( Date: Wed, 8 Jan 2025 17:34:06 +0530 Subject: [PATCH 2/9] Rebase --- src/hooks/useQueryLogs.ts | 1 - src/pages/Stream/components/Querier/index.tsx | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/hooks/useQueryLogs.ts b/src/hooks/useQueryLogs.ts index 9ec7e5fe..faee16ea 100644 --- a/src/hooks/useQueryLogs.ts +++ b/src/hooks/useQueryLogs.ts @@ -31,7 +31,6 @@ export const useQueryLogs = () => { // data ref will always have the unfiltered data. // Only mutate it when data is fetched, otherwise read only const _dataRef = useRef(null); - const [queryEngine] = useAppStore((store) => store.instanceConfig?.queryEngine); const [streamInfo] = useStreamStore((store) => store.info); const [currentStream] = useAppStore((store) => store.currentStream); const timePartitionColumn = _.get(streamInfo, 'time_partition', 'p_timestamp'); diff --git a/src/pages/Stream/components/Querier/index.tsx b/src/pages/Stream/components/Querier/index.tsx index f0ea201f..208cbd34 100644 --- a/src/pages/Stream/components/Querier/index.tsx +++ b/src/pages/Stream/components/Querier/index.tsx @@ -80,9 +80,9 @@ const QuerierModal = (props: { const [parsedFilterQuery, setParsedFilterQuery] = useState(''); - const getParsedFilterQuery = (query: string) => { + const getParsedFilterQuery = useCallback((query: string) => { setParsedFilterQuery(query); - }; + }, []); const onClose = useCallback(() => { setLogsStore((store) => toggleQueryBuilder(store, false)); }, []); From 27bdc93e9a1cbdf674e00e509bf55573cba1db52 Mon Sep 17 00:00:00 2001 From: Koustav Date: Thu, 9 Jan 2025 10:50:58 +0530 Subject: [PATCH 3/9] Intuitive UX --- src/pages/Stream/components/Querier/index.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/Stream/components/Querier/index.tsx b/src/pages/Stream/components/Querier/index.tsx index 208cbd34..78c9373e 100644 --- a/src/pages/Stream/components/Querier/index.tsx +++ b/src/pages/Stream/components/Querier/index.tsx @@ -74,10 +74,9 @@ const QuerierModal = (props: { onSqlSearchApply: (query: string) => void; onFiltersApply: () => void; }) => { - const [{ showQueryBuilder, viewMode, custSearchQuery }, setLogsStore] = useLogsStore( + const [{ showQueryBuilder, viewMode, custSearchQuery, activeMode }, setLogsStore] = useLogsStore( (store) => store.custQuerySearchState, ); - const [parsedFilterQuery, setParsedFilterQuery] = useState(''); const getParsedFilterQuery = useCallback((query: string) => { @@ -85,7 +84,10 @@ const QuerierModal = (props: { }, []); const onClose = useCallback(() => { setLogsStore((store) => toggleQueryBuilder(store, false)); - }, []); + setParsedFilterQuery(''); + setLogsStore((store) => toggleCustQuerySearchViewMode(store, activeMode !== null ? activeMode : 'filters')); + }, [activeMode]); + const queryCodeEditorRef = useRef(''); // to store input value even after the editor unmounts useEffect(() => { From 07b121b375a71d8e4a7b29dca26a2fbb44f4647f Mon Sep 17 00:00:00 2001 From: Koustav Date: Thu, 9 Jan 2025 14:25:01 +0530 Subject: [PATCH 4/9] Some UX changes: --- src/pages/Stream/components/Querier/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/Stream/components/Querier/index.tsx b/src/pages/Stream/components/Querier/index.tsx index 78c9373e..b9437aa1 100644 --- a/src/pages/Stream/components/Querier/index.tsx +++ b/src/pages/Stream/components/Querier/index.tsx @@ -13,6 +13,7 @@ import { useStreamStore } from '../../providers/StreamProvider'; import SaveFilterModal from './SaveFilterModal'; import SavedFiltersModal from './SavedFiltersModal'; import _ from 'lodash'; +import useParamsController from '@/pages/Stream/hooks/useParamsController'; const { setFields, parseQuery, storeAppliedQuery, resetFilters, toggleSubmitBtn, toggleSaveFiltersModal } = filterStoreReducers; @@ -74,6 +75,7 @@ const QuerierModal = (props: { onSqlSearchApply: (query: string) => void; onFiltersApply: () => void; }) => { + const { isStoreSynced } = useParamsController(); const [{ showQueryBuilder, viewMode, custSearchQuery, activeMode }, setLogsStore] = useLogsStore( (store) => store.custQuerySearchState, ); @@ -91,6 +93,7 @@ const QuerierModal = (props: { const queryCodeEditorRef = useRef(''); // to store input value even after the editor unmounts useEffect(() => { + if (!isStoreSynced) return; if (!_.isEmpty(parsedFilterQuery)) { queryCodeEditorRef.current = parsedFilterQuery; return; @@ -99,7 +102,7 @@ const QuerierModal = (props: { queryCodeEditorRef.current = custSearchQuery; return; } - }, [parsedFilterQuery, custSearchQuery]); + }, [isStoreSynced, parsedFilterQuery, custSearchQuery]); return ( Date: Fri, 10 Jan 2025 13:33:30 +0530 Subject: [PATCH 5/9] fix:missing query params --- src/pages/Stream/Views/Explore/useLogsFetcher.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/Stream/Views/Explore/useLogsFetcher.ts b/src/pages/Stream/Views/Explore/useLogsFetcher.ts index 467915ff..99ec6342 100644 --- a/src/pages/Stream/Views/Explore/useLogsFetcher.ts +++ b/src/pages/Stream/Views/Explore/useLogsFetcher.ts @@ -4,12 +4,14 @@ import { useLogsStore, logsStoreReducers } from '../../providers/LogsProvider'; import { useQueryLogs } from '@/hooks/useQueryLogs'; import { useFetchCount } from '@/hooks/useQueryResult'; import { useStreamStore } from '../../providers/StreamProvider'; +import useParamsController from '@/pages/Stream/hooks/useParamsController'; import _ from 'lodash'; const { setCleanStoreForStreamChange } = logsStoreReducers; const { syncTimeRange } = appStoreReducers; const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean }) => { + const { isStoreSynced } = useParamsController(); const { schemaLoading, infoLoading } = props; const [currentStream] = useAppStore((store) => store.currentStream); const [{ timeRange }, setAppStore] = useAppStore((store) => store); @@ -25,6 +27,7 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean }) const showTable = hasContentLoaded && !hasNoData && !queryLogsError; useEffect(() => { + if (!isStoreSynced) return; setAppStore(syncTimeRange); setLogsStore(setCleanStoreForStreamChange); }, [currentStream]); From 3ff4714d7db1c251206b04717682e2ce728e71f0 Mon Sep 17 00:00:00 2001 From: Koustav Date: Mon, 13 Jan 2025 16:33:20 +0530 Subject: [PATCH 6/9] Fix filter builder --- src/pages/Stream/components/Querier/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/Stream/components/Querier/index.tsx b/src/pages/Stream/components/Querier/index.tsx index b9437aa1..ae5f9a86 100644 --- a/src/pages/Stream/components/Querier/index.tsx +++ b/src/pages/Stream/components/Querier/index.tsx @@ -147,6 +147,7 @@ const Querier = () => { const [streamInfo] = useStreamStore((store) => store.info); const [{ query, isSumbitDisabled, isQueryFromParams }, setFilterStore] = useFilterStore((store) => store); const timePartitionColumn = _.get(streamInfo, 'time_partition', 'p_timestamp'); + const { isStoreSynced } = useParamsController(); useEffect(() => { if (schema) { @@ -155,7 +156,8 @@ const Querier = () => { }, [schema]); useEffect(() => { - return setFilterStore(resetFilters); + if (!isStoreSynced) return; + setFilterStore(resetFilters); }, [currentStream]); const triggerRefetch = useCallback( From 28cdfa16a310bd29f4b9535f2d2eb2e0759f5960 Mon Sep 17 00:00:00 2001 From: Koustav Date: Mon, 13 Jan 2025 17:37:22 +0530 Subject: [PATCH 7/9] Update state --- src/pages/Stream/components/Querier/index.tsx | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/src/pages/Stream/components/Querier/index.tsx b/src/pages/Stream/components/Querier/index.tsx index ae5f9a86..bac9e5e0 100644 --- a/src/pages/Stream/components/Querier/index.tsx +++ b/src/pages/Stream/components/Querier/index.tsx @@ -75,34 +75,38 @@ const QuerierModal = (props: { onSqlSearchApply: (query: string) => void; onFiltersApply: () => void; }) => { - const { isStoreSynced } = useParamsController(); const [{ showQueryBuilder, viewMode, custSearchQuery, activeMode }, setLogsStore] = useLogsStore( (store) => store.custQuerySearchState, ); const [parsedFilterQuery, setParsedFilterQuery] = useState(''); - const getParsedFilterQuery = useCallback((query: string) => { - setParsedFilterQuery(query); - }, []); + const getParsedFilterQuery = useCallback( + (query: string) => { + setParsedFilterQuery(query); + }, + [parsedFilterQuery], + ); const onClose = useCallback(() => { setLogsStore((store) => toggleQueryBuilder(store, false)); - setParsedFilterQuery(''); setLogsStore((store) => toggleCustQuerySearchViewMode(store, activeMode !== null ? activeMode : 'filters')); }, [activeMode]); const queryCodeEditorRef = useRef(''); // to store input value even after the editor unmounts useEffect(() => { - if (!isStoreSynced) return; if (!_.isEmpty(parsedFilterQuery)) { queryCodeEditorRef.current = parsedFilterQuery; - return; - } - if (!_.isEmpty(custSearchQuery)) { + // return; + } else { queryCodeEditorRef.current = custSearchQuery; - return; } - }, [isStoreSynced, parsedFilterQuery, custSearchQuery]); + }, [parsedFilterQuery, custSearchQuery]); + + useEffect(() => { + if (showQueryBuilder === false) { + setParsedFilterQuery(''); + } + }, [showQueryBuilder]); return ( Date: Tue, 14 Jan 2025 13:29:48 +0530 Subject: [PATCH 8/9] removed unused code --- src/pages/Stream/components/Querier/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/Stream/components/Querier/index.tsx b/src/pages/Stream/components/Querier/index.tsx index bac9e5e0..f0b39565 100644 --- a/src/pages/Stream/components/Querier/index.tsx +++ b/src/pages/Stream/components/Querier/index.tsx @@ -96,7 +96,6 @@ const QuerierModal = (props: { useEffect(() => { if (!_.isEmpty(parsedFilterQuery)) { queryCodeEditorRef.current = parsedFilterQuery; - // return; } else { queryCodeEditorRef.current = custSearchQuery; } From 2c7c5f19e284ffb342cb57ca614d2ef01abc9cd0 Mon Sep 17 00:00:00 2001 From: Koustav Date: Wed, 15 Jan 2025 11:21:14 +0530 Subject: [PATCH 9/9] Build Fixes --- src/pages/Stream/components/Querier/FilterQueryBuilder.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Stream/components/Querier/FilterQueryBuilder.tsx b/src/pages/Stream/components/Querier/FilterQueryBuilder.tsx index 17403137..ba918e08 100644 --- a/src/pages/Stream/components/Querier/FilterQueryBuilder.tsx +++ b/src/pages/Stream/components/Querier/FilterQueryBuilder.tsx @@ -289,7 +289,7 @@ export const QueryPills = () => { export const FilterQueryBuilder = (props: { onClear: () => void; onApply: () => void; - filterBuilderQuery: (query: string) => void; + filterBuilderQuery?: (query: string) => void; }) => { const [{ query, isSumbitDisabled, fields }, setFilterStore] = useFilterStore((store) => store); const [{ isQuerySearchActive, viewMode }] = useLogsStore((store) => store.custQuerySearchState); @@ -304,7 +304,7 @@ export const FilterQueryBuilder = (props: { } const { parsedQuery } = parseQuery(query, currentStream || ''); - props.filterBuilderQuery(parsedQuery); + props.filterBuilderQuery && props.filterBuilderQuery(parsedQuery); }, [query.rules, fields]); return (