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]); diff --git a/src/pages/Stream/components/Querier/FilterQueryBuilder.tsx b/src/pages/Stream/components/Querier/FilterQueryBuilder.tsx index 21fc6b5b..ba918e08 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 && 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..f0b39565 100644 --- a/src/pages/Stream/components/Querier/index.tsx +++ b/src/pages/Stream/components/Querier/index.tsx @@ -4,15 +4,16 @@ 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'; 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,24 +75,37 @@ 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, activeMode }, setLogsStore] = useLogsStore( + (store) => store.custQuerySearchState, + ); + const [parsedFilterQuery, setParsedFilterQuery] = useState(''); + + const getParsedFilterQuery = useCallback( + (query: string) => { + setParsedFilterQuery(query); + }, + [parsedFilterQuery], + ); const onClose = useCallback(() => { setLogsStore((store) => toggleQueryBuilder(store, false)); - }, []); + setLogsStore((store) => toggleCustQuerySearchViewMode(store, activeMode !== null ? activeMode : 'filters')); + }, [activeMode]); + 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; + } else { + queryCodeEditorRef.current = custSearchQuery; + } + }, [parsedFilterQuery, custSearchQuery]); + + useEffect(() => { + if (showQueryBuilder === false) { + setParsedFilterQuery(''); + } + }, [showQueryBuilder]); return ( }> {viewMode === 'filters' ? ( - + ) : ( { 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) { @@ -140,7 +159,8 @@ const Querier = () => { }, [schema]); useEffect(() => { - return setFilterStore(resetFilters); + if (!isStoreSynced) return; + setFilterStore(resetFilters); }, [currentStream]); const triggerRefetch = useCallback(