fix: filter issues (#201)

fixes #200

Author: balaji-jr

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}
 			/>
-			<ThemeIcon className={classes.deleteRulebtn} onClick={deleteBtnHandler}>
+			<ActionIcon className={classes.deleteRulebtn} onClick={deleteBtnHandler}>
 				<CloseIcon />
-			</ThemeIcon>
+			</ActionIcon>
 		</Stack>
 	);
 };
@@ -224,28 +225,34 @@ const FilterBtnPlaceholder = () => {
 	);
 };
 
+const ModalTitle = () => {
+	return <Text style={{ fontSize: '1.2rem', fontWeight: 700, marginLeft: '0.5rem' }}>Filters</Text>;
+};
+
 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 (
-		<Popover opened={isModalOpen} offset={{ mainAxis: 8, crossAxis: 500 }} position="bottom">
-			<Popover.Target>
-				<div />
-			</Popover.Target>
-			<Group onClick={toggleBuilderModal} className={classes.queryBuilderBtn}>
+		<>
+			<Group onClick={openBuilderModal} className={classes.queryBuilderBtn}>
 				{!isFiltersApplied ? <FilterBtnPlaceholder /> : <QueryPills query={appliedQuery} />}
 			</Group>
-			<Popover.Dropdown p={0}>
+			<Modal
+				opened={isModalOpen}
+				onClose={closeBuilderModal}
+				size="auto"
+				centered
+				styles={{ body: { padding: '0 0.5rem' }, header: { padding: '1rem', paddingBottom: '0' } }}
+				title={<ModalTitle />}>
 				<Stack style={{ width: '820px', padding: '1rem' }} gap={0}>
-					<ScrollArea h={'400px'} className={classes.queryBuilderContainer} style={{ width: '100%' }}>
+					<ScrollArea h={'420px'} className={classes.queryBuilderContainer} style={{ width: '100%' }}>
 						<Stack gap={0}>
 							{query.rules.map((ruleSet) => {
 								return <RuleSet ruleSet={ruleSet} key={ruleSet.id} />;
@@ -260,8 +267,8 @@ const Querier = () => {
 						Apply
 					</Button>
 				</Stack>
-			</Popover.Dropdown>
-		</Popover>
+			</Modal>
+		</>
 	);
 };
 

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);

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 {

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;

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]);