From 97fd1e2e8b040c035a1eea351d97113a24975d82 Mon Sep 17 00:00:00 2001 From: balaji-jr Date: Fri, 16 Feb 2024 17:08:51 +0530 Subject: [PATCH] ISSUE-200 - Filter issues on mino --- src/components/Header/Querier.tsx | 35 +++++++++++-------- src/components/Header/TimeRange.tsx | 4 +-- .../Header/styles/QueryBuilder.module.css | 5 ++- src/pages/Logs/LogTable.tsx | 7 +++- src/providers/QueryFilterProvider.tsx | 26 +++++++++----- 5 files changed, 48 insertions(+), 29 deletions(-) diff --git a/src/components/Header/Querier.tsx b/src/components/Header/Querier.tsx index d1afaf2b..e44ba5a1 100644 --- a/src/components/Header/Querier.tsx +++ b/src/components/Header/Querier.tsx @@ -1,5 +1,4 @@ import { - Popover, Stack, Group, ScrollArea, @@ -11,6 +10,8 @@ import { Button, CloseIcon, Pill, + ActionIcon, + Modal, } from '@mantine/core'; import { useCallback } from 'react'; import classes from './styles/QueryBuilder.module.css'; @@ -80,9 +81,9 @@ const RuleView = (props: RuleViewType) => { type={type} disabled={isDisabled} /> - + - + ); }; @@ -224,28 +225,34 @@ const FilterBtnPlaceholder = () => { ); }; +const ModalTitle = () => { + return Filters; +}; + const Querier = () => { const { state: queryBuilderState, methods: queryBuilderMethods } = useQueryFilterContext(); const { isModalOpen, query, isSumbitDisabled, appliedQuery } = queryBuilderState; - const { createRuleGroup, toggleBuilderModal, clearFilters, applyQuery } = queryBuilderMethods; + const { createRuleGroup, clearFilters, applyQuery, closeBuilderModal, openBuilderModal } = queryBuilderMethods; const { state: { custQuerySearchState }, methods: {}, } = useLogsPageContext(); const isFiltersApplied = custQuerySearchState.mode === 'filters' && custQuerySearchState.isQuerySearchActive; - return ( - - -
- - + <> + {!isFiltersApplied ? : } - + }> - + {query.rules.map((ruleSet) => { return ; @@ -260,8 +267,8 @@ const Querier = () => { Apply - - + + ); }; diff --git a/src/components/Header/TimeRange.tsx b/src/components/Header/TimeRange.tsx index 266c9bdb..e891e052 100644 --- a/src/components/Header/TimeRange.tsx +++ b/src/components/Header/TimeRange.tsx @@ -17,7 +17,7 @@ const TimeRange: FC = () => { state: { subLogQuery, subLogSelectedTimeRange }, } = useHeaderContext(); - const handleOuterClick = (event: any) => { + const handleOuterClick = useCallback((event: any) => { const targetClassNames: string[] = event.target?.classList || []; const maybeSubmitBtnClassNames: string[] = event.target.closest('button')?.classList || []; const classNames: string[] = [ @@ -32,7 +32,7 @@ const TimeRange: FC = () => { ); }); !shouldIgnoreClick && setOpened(false); - }; + }, []); const innerRef = useOuterClick(handleOuterClick); const [opened, setOpened] = useMountedState(false); diff --git a/src/components/Header/styles/QueryBuilder.module.css b/src/components/Header/styles/QueryBuilder.module.css index 2db69a5f..86e07b55 100644 --- a/src/components/Header/styles/QueryBuilder.module.css +++ b/src/components/Header/styles/QueryBuilder.module.css @@ -90,7 +90,6 @@ cursor: pointer; height: 2.2rem; overflow: auto; - margin-left: -20px; min-width: 70%; max-width: 100%; } @@ -112,8 +111,8 @@ .footer { flex-direction: row; justify-content: flex-end; - padding: 1rem; - padding-top: 0; + padding: 1.5rem; + padding-top: 0.75rem; } .queryBuilderContainer { diff --git a/src/pages/Logs/LogTable.tsx b/src/pages/Logs/LogTable.tsx index d6cb9ed8..05556459 100644 --- a/src/pages/Logs/LogTable.tsx +++ b/src/pages/Logs/LogTable.tsx @@ -63,7 +63,7 @@ const LogTable: FC = () => { custQuerySearchState: { isQuerySearchActive, custSearchQuery }, pageOffset, }, - methods: { setPageOffset }, + methods: { setPageOffset, resetQuerySearch }, } = useLogsPageContext(); const { state: { subLogSearch, subLogQuery, subRefreshInterval, subLogSelectedTimeRange }, @@ -100,6 +100,11 @@ const LogTable: FC = () => { return subLogSearch.get().filters[key] ?? []; }; + const currentStreamName = subLogQuery.get().streamName; + useEffect(() => { + resetQuerySearch(); + }, [currentStreamName]) + const applyFilter = (key: string, value: string[]) => { subLogSearch.set((state) => { state.filters[key] = value; diff --git a/src/providers/QueryFilterProvider.tsx b/src/providers/QueryFilterProvider.tsx index 00a79a72..46ca283c 100644 --- a/src/providers/QueryFilterProvider.tsx +++ b/src/providers/QueryFilterProvider.tsx @@ -31,11 +31,12 @@ type QueryFilterContextMethods = { deleteRuleFromGroup: (groupId: string, ruleId: string) => void; updateGroupCombinator: (id: string, op: Combinator) => void; updateRule: (groupId: string, ruleId: string, updateOpts: RuleUpdateOpts) => void; - toggleBuilderModal: () => void; updateParentCombinator: (combinator: Combinator) => void; parseQuery: () => string; applyQuery: () => void; clearFilters: () => void; + closeBuilderModal: () => void; + openBuilderModal: () => void; }; type QueryFilterContextValue = { @@ -249,8 +250,12 @@ const QueryFilterProvider = (props: QueryFilterProviderProps) => { }); }, []); - const toggleBuilderModal = useCallback(() => { - return setModalOpen((prev) => !prev); + const openBuilderModal = useCallback(() => { + return setModalOpen(true); + }, []); + + const closeBuilderModal = useCallback(() => { + return setModalOpen(false); }, []); const updateParentCombinator = useCallback((combinator: Combinator) => { @@ -261,7 +266,7 @@ const QueryFilterProvider = (props: QueryFilterProviderProps) => { const parseQuery = useCallback(() => { // todo - custom rule processor to prevent converting number strings into numbers for text fields - const where = formatQuery(query, { format: 'sql', parseNumbers: true }); + const where = formatQuery(query, { format: 'sql', parseNumbers: true, quoteFieldNamesWith: ['\"', '\"'] }); return `select * from ${subAppContext.get().selectedStream} where ${where} limit 9000`; }, [query]); @@ -279,8 +284,10 @@ const QueryFilterProvider = (props: QueryFilterProviderProps) => { setQuery(defaultQuery); }, []); - const schemaFields = subLogStreamSchema.get()?.fields || []; + const schemaFields = subLogStreamSchema.get()?.fields; useEffect(() => { + if (!schemaFields || schemaFields?.length === 0) return; + const fields: Field[] = schemaFields .filter((field) => field.name !== 'p_timestamp') .map((field) => ({ @@ -299,15 +306,15 @@ const QueryFilterProvider = (props: QueryFilterProviderProps) => { }, [schemaFields]); useEffect(() => { - if (isModalOpen && query.rules.length === 0) { + if (query.rules.length === 0) { createRuleGroup(); } - }, [isModalOpen]); + }, [fields]); useEffect(() => { const ruleSets = query.rules.map((r) => r.rules); const allValues = ruleSets.flat().flatMap((rule) => { - return noValueOperators.indexOf(rule.operator) !== -1 ? [] : [rule.value]; + return noValueOperators.indexOf(rule.operator) !== -1 ? [null] : [rule.value]; }); const shouldSumbitDisabled = allValues.length === 0 || allValues.some((value) => value === ''); @@ -349,11 +356,12 @@ const QueryFilterProvider = (props: QueryFilterProviderProps) => { deleteRuleFromGroup, updateGroupCombinator, updateRule, - toggleBuilderModal, updateParentCombinator, parseQuery, applyQuery, clearFilters, + closeBuilderModal, + openBuilderModal, }; const value = useMemo(() => ({ state, methods }), [state, methods]);