feat: add saved filters SQL query to the dashboard tile editor (#361)

parseablehq · Nov 18, 2024 · 3b98fc1 · 3b98fc1
1 parent dce6ffd
commit 3b98fc1
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 37 deletions.
diff --git a/src/pages/Dashboards/CreateTileForm.tsx b/src/pages/Dashboards/CreateTileForm.tsx
@@ -3,7 +3,7 @@ import classes from './styles/Form.module.css';
 import { useForm } from '@mantine/form';
 import { useDashboardsStore, dashboardsStoreReducers } from './providers/DashboardsProvider';
 import { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
+import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import _ from 'lodash';
 import { getLogStreamSchema } from '@/api/logStream';
 import { Field } from '@/@types/parseable/dataType';
@@ -29,6 +29,7 @@ import TimeRange from '@/components/Header/TimeRange';
 import { colors, isCircularChart, isGraph, normalizeGraphColorConfig } from './Charts';
 import { usePostLLM } from '@/hooks/usePostLLM';
 import { notify } from '@/utils/notification';
+import { filterStoreReducers, useFilterStore } from '../Stream/providers/FilterProvider';
 
 const selectDashboardWarningText = 'Select a dashboard to continue';
 const validateQueryWarningText = 'Validate query to continue';
@@ -37,6 +38,8 @@ const noDataWarning = 'No data available for the query';
 const invalidVizConfig = 'Invalid visualization config';
 
 const { toggleVizEditorModal, toggleCreateTileModal } = dashboardsStoreReducers;
+const { toggleSavedFiltersModal, setAppliedFilterQuery } = filterStoreReducers;
+const { changeStream } = appStoreReducers;
 
 const getErrorMsg = (form: TileFormType, configType: 'basic' | 'data' | 'viz'): string | null => {
 	const { dashboardId, isQueryValidated, data, visualization } = form.values;
@@ -289,14 +292,20 @@ const Query = (props: { form: TileFormType; onChangeValue: (key: string, value:
 	const [initialHeight, setInitialHeight] = useState(0);
 	const [dashboards] = useDashboardsStore((store) => store.dashboards);
 	const [timeRange] = useLogsStore((store) => store.timeRange);
+	const [appliedFilterQuery, setLogsStore] = useFilterStore((store) => store.appliedFilterQuery);
 	const [aiQuery, setAiQuery] = useState('');
 	const [userSpecificStreams] = useAppStore((store) => store.userSpecificStreams);
+	const [, setAppStore] = useAppStore((store) => store.maximized);
 	const allStreams = useMemo(
 		() => _.map(userSpecificStreams, (stream) => ({ label: stream.name, value: stream.name })),
 		[userSpecificStreams],
 	);
 	const { data: resAIQuery, postLLMQuery } = usePostLLM();
 
+	useEffect(() => {
+		onEditorChange(appliedFilterQuery);
+	}, [appliedFilterQuery]);
+
 	const onEditorChange = useCallback((query: string | undefined) => {
 		onChangeValue('query', query || '');
 		onChangeValue('isQueryValidated', false);
@@ -348,10 +357,15 @@ const Query = (props: { form: TileFormType; onChangeValue: (key: string, value:
 		});
 	}, [query, dashboardId, dashboards, timeRange]);
 
-	const onStreamSelect = useCallback((val: string | null) => {
-		setLocalStream(val || '');
+	const onStreamSelect = useCallback((stream: string | null) => {
+		if (stream) {
+			setAppStore((store) => changeStream(store, stream));
+			setLogsStore((store) => setAppliedFilterQuery(store, ''));
+		}
+		setLocalStream(stream || '');
 	}, []);
 
+	const onClick = useCallback(() => setLogsStore((store) => toggleSavedFiltersModal(store, true)), []);
 	const isValidStream = !_.isEmpty(localStream);
 	const handleAIGenerate = useCallback(() => {
 		if (!aiQuery?.length) {
@@ -375,6 +389,9 @@ const Query = (props: { form: TileFormType; onChangeValue: (key: string, value:
 						key="stream"
 						placeholder="Select Stream"
 					/>
+					<Button disabled={!localStream} className={classes.savedFiltersBtn} h="100%" onClick={onClick}>
+						Saved Filters
+					</Button>
 				</Stack>
 			</Stack>
 			{errorMsg && <Text className={classes.warningText}>{errorMsg}</Text>}

diff --git a/src/pages/Dashboards/index.tsx b/src/pages/Dashboards/index.tsx
@@ -12,6 +12,7 @@ import { useSyncTimeRange } from './hooks';
 import _ from 'lodash';
 import useParamsController from './hooks/useParamsController';
 import { useDocumentTitle } from '@mantine/hooks';
+import SavedFiltersModal from '../Stream/components/Querier/SavedFiltersModal';
 
 const LoadingView = () => {
 	return (
@@ -35,27 +36,30 @@ const Dashboards = () => {
 	}, [isStoreSynced]);
 
 	return (
-		<Box
-			style={{
-				flex: 1,
-				display: 'flex',
-				position: 'relative',
-				flexDirection: 'row',
-				width: '100%',
-				overflow: 'hidden',
-			}}>
-			{dashboards === null || !isStoreSynced ? (
-				<LoadingView />
-			) : createTileFormOpen ? (
-				<CreateTileForm />
-			) : (
-				<>
-					<SideBar updateTimeRange={updateTimeRange} />
-					<CreateDashboardModal />
-					<Dashboard />
-				</>
-			)}
-		</Box>
+		<>
+			<SavedFiltersModal />
+			<Box
+				style={{
+					flex: 1,
+					display: 'flex',
+					position: 'relative',
+					flexDirection: 'row',
+					width: '100%',
+					overflow: 'hidden',
+				}}>
+				{dashboards === null || !isStoreSynced ? (
+					<LoadingView />
+				) : createTileFormOpen ? (
+					<CreateTileForm />
+				) : (
+					<>
+						<SideBar updateTimeRange={updateTimeRange} />
+						<CreateDashboardModal />
+						<Dashboard />
+					</>
+				)}
+			</Box>
+		</>
 	);
 };
 

diff --git a/src/pages/Stream/components/Querier/SavedFiltersModal.tsx b/src/pages/Stream/components/Querier/SavedFiltersModal.tsx
@@ -13,8 +13,10 @@ import { EmptySimple } from '@/components/Empty';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import useSavedFiltersQuery from '@/hooks/useSavedFilters';
 import { generateQueryBuilderASTFromSQL } from '../../utils';
+import { useLocation } from 'react-router-dom';
 
-const { toggleSavedFiltersModal, resetFilters, parseQuery, applySavedFilters } = filterStoreReducers;
+const { toggleSavedFiltersModal, resetFilters, parseQuery, applySavedFilters, setAppliedFilterQuery } =
+	filterStoreReducers;
 const { applyCustomQuery, updateSavedFilterId, getCleanStoreForRefetch, setTimeRange } = logsStoreReducers;
 
 const renderDeleteIcon = () => <IconTrash size={px('1rem')} stroke={1.5} />;
@@ -58,6 +60,9 @@ const SavedFilterItem = (props: {
 	const [showDeletePropmt, setShowDeletePrompt] = useState<boolean>(false);
 	const { deleteSavedFilterMutation, isDeleting, isRefetching } = useSavedFiltersQuery();
 
+	const location = useLocation();
+	const [, setFilterStore] = useFilterStore((_store) => null);
+
 	const toggleShowQuery = useCallback(() => {
 		return setShowQuery((prev) => !prev);
 	}, []);
@@ -78,22 +83,27 @@ const SavedFilterItem = (props: {
 	}, [time_filter, isStoredAndCurrentTimeRangeAreSame, hardRefresh, changeTimerange]);
 
 	const onApplyFilters = useCallback(() => {
-		if (query.filter_query) {
-			if (query.filter_type === 'sql') {
-				props.onSqlSearchApply(query.filter_query, filter_id, time_filter);
-			} else {
+		if (location.pathname.includes('dashboard')) {
+			setFilterStore((store) => setAppliedFilterQuery(store, query.filter_query));
+			setFilterStore((store) => toggleSavedFiltersModal(store, false));
+		} else {
+			if (query.filter_query) {
+				if (query.filter_type === 'sql') {
+					props.onSqlSearchApply(query.filter_query, filter_id, time_filter);
+				} else {
+					if (filter_id !== savedFilterId) {
+						props.onFilterBuilderQueryApply(generateQueryBuilderASTFromSQL(query.filter_query), filter_id);
+					} else {
+						handleTimeFilter();
+					}
+				}
+			} else if (query.filter_builder) {
 				if (filter_id !== savedFilterId) {
-					props.onFilterBuilderQueryApply(generateQueryBuilderASTFromSQL(query.filter_query), filter_id);
+					props.onFilterBuilderQueryApply(query.filter_builder, filter_id);
 				} else {
 					handleTimeFilter();
 				}
 			}
-		} else if (query.filter_builder) {
-			if (filter_id !== savedFilterId) {
-				props.onFilterBuilderQueryApply(query.filter_builder, filter_id);
-			} else {
-				handleTimeFilter();
-			}
 		}
 	}, [savedFilterId, isStoredAndCurrentTimeRangeAreSame, hardRefresh, changeTimerange]);
 

diff --git a/src/pages/Stream/providers/FilterProvider.tsx b/src/pages/Stream/providers/FilterProvider.tsx
@@ -65,6 +65,7 @@ type UpdateRuleType = {
 type FilterStore = {
 	fields: Field[];
 	query: QueryType;
+	appliedFilterQuery: string;
 	fieldTypeMap: FieldTypeMap;
 	fieldNames: string[];
 	isSumbitDisabled: boolean;
@@ -88,6 +89,7 @@ const defaultQuery = {
 const initialState: FilterStore = {
 	fields: [],
 	query: defaultQuery,
+	appliedFilterQuery: '',
 	fieldTypeMap: {},
 	fieldNames: [],
 	isSumbitDisabled: true,
@@ -139,6 +141,7 @@ type FilterStoreReducers = {
 	toggleSaveFiltersModal: (_store: FilterStore, val: boolean) => ReducerOutput;
 	toggleSavedFiltersModal: (_store: FilterStore, val: boolean) => ReducerOutput;
 	applySavedFilters: (store: FilterStore, query: QueryType) => ReducerOutput;
+	setAppliedFilterQuery: (store: FilterStore, query: string | undefined) => ReducerOutput;
 };
 
 const { Provider: FilterProvider, useStore: useFilterStore } = initContext(initialState);
@@ -234,6 +237,13 @@ const updateParentCombinator = (store: FilterStore, combinator: Combinator) => {
 	return { query: { ...query, combinator: combinator } };
 };
 
+const setAppliedFilterQuery = (_store: FilterStore, query: string | undefined) => {
+	return {
+		..._store,
+		appliedFilterQuery: query ?? '',
+	};
+};
+
 export const noValueOperators = ['null', 'notNull'];
 
 const toggleSubmitBtn = (_store: FilterStore, val: boolean) => {
@@ -354,6 +364,7 @@ const filterStoreReducers: FilterStoreReducers = {
 	toggleSaveFiltersModal,
 	toggleSavedFiltersModal,
 	applySavedFilters,
+	setAppliedFilterQuery,
 };
 
 export { FilterProvider, useFilterStore, filterStoreReducers };
diff --git a/src/routes/elements.tsx b/src/routes/elements.tsx
@@ -24,7 +24,9 @@ export const DashboardsElement: FC = () => {
 		<SuspensePage>
 			<LogsProvider>
 				<DashbaordsProvider>
-					<Dashboards />
+					<FilterProvider>
+						<Dashboards />
+					</FilterProvider>
 				</DashbaordsProvider>
 			</LogsProvider>
 		</SuspensePage>