Saved filters enhancements

src/hooks/useSavedFilters.tsx

@@ -27,7 +27,7 @@ const useSavedFiltersQuery = () => {
 		},
 	);
 
-	const { mutate: updateSavedFilters } = useMutation(
+	const { mutate: updateSavedFilters, isLoading: isUpdating } = useMutation(
 		(data: { filter: SavedFilterType; onSuccess?: () => void }) =>
 			putSavedFilters(data.filter.filter_id, data.filter),
 		{
@@ -47,7 +47,7 @@ const useSavedFiltersQuery = () => {
 		},
 	);
 
-	const { mutate: createSavedFilters } = useMutation(
+	const { mutate: createSavedFilters, isLoading: isCreating } = useMutation(
 		(data: { filter: CreateSavedFilterType; onSuccess?: () => void }) =>
 			postSavedFilters(data.filter),
 		{
@@ -68,7 +68,7 @@ const useSavedFiltersQuery = () => {
 		},
 	);
 
-	const { mutate: deleteSavedFilterMutation } = useMutation(
+	const { mutate: deleteSavedFilterMutation, isLoading: isDeleting } = useMutation(
 		(data: { filter_id: string; onSuccess?: () => void }) =>
 			deleteSavedFilter(data.filter_id),
 		{
@@ -96,7 +96,10 @@ const useSavedFiltersQuery = () => {
 		refetch,
 		updateSavedFilters,
 		deleteSavedFilterMutation,
-		createSavedFilters
+		createSavedFilters,
+		isDeleting,
+		isUpdating,
+		isCreating
 	};
 };
 

src/pages/Stream/components/Querier/SaveFilterModal.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Modal, Select, Stack, Text, TextInput } from '@mantine/core';
+import { Box, Button, Loader, Modal, Select, Stack, Text, TextInput } from '@mantine/core';
 import { filterStoreReducers, useFilterStore } from '../../providers/FilterProvider';
 import { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { makeTimeRangeLabel, useLogsStore } from '../../providers/LogsProvider';
@@ -96,8 +96,8 @@ const SaveFilterModal = () => {
 	const [timeRange] = useLogsStore((store) => store.timeRange);
 	const [{ custSearchQuery, savedFilterId, activeMode }] = useLogsStore((store) => store.custQuerySearchState);
 	const [isDirty, setDirty] = useState<boolean>(false);
-
-	const { updateSavedFilters, createSavedFilters } = useSavedFiltersQuery();
+	const { updateSavedFilters, createSavedFilters, isCreating, isUpdating } = useSavedFiltersQuery();
+	const showLoader = isCreating || isUpdating;
 
 	useEffect(() => {
 		const selectedFilter = _.find(activeSavedFilters, (filter) => filter.filter_id === savedFilterId);
@@ -220,7 +220,7 @@ const SaveFilterModal = () => {
 				</Stack>
 				<Stack style={{ flexDirection: 'row', alignItems: 'center' }}>
 					<Stack gap={4} style={{ width: '100%' }}>
-						<Text style={{ fontSize: '0.7rem', fontWeight: 500 }}>Fixed Time Range</Text>
+						<Text style={{ fontSize: '0.7rem', fontWeight: 500 }}>Time Range</Text>
 						<Select
 							data={formObject?.timeRangeOptions}
 							value={formObject?.selectedTimeRangeOption.value}
@@ -244,16 +244,24 @@ const SaveFilterModal = () => {
 					/>
 				</Stack>
 				<Stack style={{ flexDirection: 'row', justifyContent: 'flex-end', width: '100%', marginTop: 10 }}>
-					<Box>
-						<Button miw={100} variant="outline" onClick={closeModal}>
-							Cancel
-						</Button>
-					</Box>
-					<Box>
-						<Button miw={100} onClick={onSubmit}>
-							Save
-						</Button>
-					</Box>
+					{showLoader ? (
+						<Stack style={{ marginRight: 10 }}>
+							<Loader size="md" />
+						</Stack>
+					) : (
+						<>
+							<Box>
+								<Button miw={100} variant="outline" onClick={closeModal}>
+									Cancel
+								</Button>
+							</Box>
+							<Box>
+								<Button miw={100} onClick={onSubmit}>
+									Save
+								</Button>
+							</Box>
+						</>
+					)}
 				</Stack>
 			</Stack>
 		</Modal>

src/pages/Stream/components/Querier/SavedFiltersModal.tsx

@@ -14,7 +14,7 @@ import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import useSavedFiltersQuery from '@/hooks/useSavedFilters';
 
 const { toggleSavedFiltersModal, resetFilters, parseQuery, applySavedFilters } = filterStoreReducers;
-const { applyCustomQuery, updateSavedFilterId } = logsStoreReducers;
+const { applyCustomQuery, updateSavedFilterId, getCleanStoreForRefetch, setTimeRange } = logsStoreReducers;
 
 const renderDeleteIcon = () => <IconTrash size={px('1rem')} stroke={1.5} />;
 const renderCloseIcon = () => <IconX size={px('1rem')} stroke={1.5} />;
@@ -40,13 +40,21 @@ const SavedFilterItem = (props: {
 	onSqlSearchApply: (query: string, id: string, time_filter: null | { from: string; to: string }) => void;
 	onFilterBuilderQueryApply: (query: QueryType, id: string) => void;
 	currentStream: string;
+	savedFilterId: string | null;
+	isStoredAndCurrentTimeRangeAreSame: (from: string, to: string) => boolean;
+	hardRefresh: () => void;
+	changeTimerange: (from: string, end: string) => void;
 }) => {
 	const {
 		item: { filter_name, time_filter, query, filter_id, stream_name },
+		savedFilterId,
+		isStoredAndCurrentTimeRangeAreSame,
+		hardRefresh,
+		changeTimerange,
 	} = props;
 	const [showQuery, setShowQuery] = useState<boolean>(false);
 	const [showDeletePropmt, setShowDeletePrompt] = useState<boolean>(false);
-	const { deleteSavedFilterMutation } = useSavedFiltersQuery();
+	const { deleteSavedFilterMutation, isDeleting } = useSavedFiltersQuery();
 
 	const toggleShowQuery = useCallback(() => {
 		return setShowQuery((prev) => !prev);
@@ -63,9 +71,20 @@ const SavedFilterItem = (props: {
 		if (_.isString(query.filter_query)) {
 			props.onSqlSearchApply(query.filter_query, filter_id, time_filter);
 		} else if (query.filter_builder) {
-			props.onFilterBuilderQueryApply(query.filter_builder, filter_id);
+			if (filter_id !== savedFilterId) {
+				props.onFilterBuilderQueryApply(query.filter_builder, filter_id);
+			} else {
+				if (
+					time_filter === null ||
+					(time_filter && isStoredAndCurrentTimeRangeAreSame(time_filter.from, time_filter.to))
+				) {
+					hardRefresh();
+				} else {
+					changeTimerange(time_filter.from, time_filter.to);
+				}
+			}
 		}
-	}, []);
+	}, [savedFilterId, isStoredAndCurrentTimeRangeAreSame, hardRefresh, changeTimerange]);
 
 	return (
 		<Stack className={classes.filterItemContainer} style={{ paddingBottom: '0.8rem' }}>
@@ -83,18 +102,24 @@ const SavedFilterItem = (props: {
 				</Stack>
 				<Stack style={{ flexDirection: 'row', alignItems: 'center', width: '40%', justifyContent: 'flex-end' }}>
 					{showDeletePropmt ? (
-						<Stack style={{ flexDirection: 'row', alignItems: 'center' }} gap={8}>
-							<Box>
-								<Button leftSection={renderDeleteIcon()} onClick={handleDelete} variant="outline">
-									Confirm
-								</Button>
-							</Box>
-							<Box>
-								<Button leftSection={renderCloseIcon()} onClick={() => setShowDeletePrompt(false)}>
-									Cancel
-								</Button>
-							</Box>
-						</Stack>
+						isDeleting ? (
+							<Stack style={{ flex: 1, alignItems: 'center' }}>
+								<Loader size="md" />
+							</Stack>
+						) : (
+							<Stack style={{ flexDirection: 'row', alignItems: 'center' }} gap={8}>
+								<Box>
+									<Button leftSection={renderDeleteIcon()} onClick={handleDelete} variant="outline">
+										Confirm
+									</Button>
+								</Box>
+								<Box>
+									<Button leftSection={renderCloseIcon()} onClick={() => setShowDeletePrompt(false)}>
+										Cancel
+									</Button>
+								</Box>
+							</Stack>
+						)
 					) : (
 						<>
 							<VisiblityToggleButton showQuery={showQuery} onClick={toggleShowQuery} />
@@ -136,16 +161,22 @@ const SavedFilterItem = (props: {
 
 const SavedFiltersModal = () => {
 	const [isSavedFiltersModalOpen, setFilterStore] = useFilterStore((store) => store.isSavedFiltersModalOpen);
-	const [, setLogsStore] = useLogsStore((_store) => null);
+	const [savedFilterId, setLogsStore] = useLogsStore((store) => store.custQuerySearchState.savedFilterId);
+	const [{ startTime, endTime }] = useLogsStore((store) => store.timeRange);
 	const [savedFilters] = useAppStore((store) => store.savedFilters);
 	const [activeSavedFilters] = useAppStore((store) => store.activeSavedFilters);
 	const [currentStream] = useAppStore((store) => store.currentStream);
 	const { isLoading, refetch, isError } = useSavedFiltersQuery();
-	const onSqlSearchApply = useCallback((query: string, id: string, time_filter: null | {from: string, to: string}) => {
-		setFilterStore((store) => resetFilters(store));
+	const onSqlSearchApply = useCallback(
+		(query: string, id: string, time_filter: null | { from: string; to: string }) => {
+			setFilterStore((store) => resetFilters(store));
 
-		setLogsStore((store) => applyCustomQuery(store, query, 'sql', id, time_filter));
-	}, []);
+			setLogsStore((store) => applyCustomQuery(store, query, 'sql', id, time_filter));
+		},
+		[],
+	);
+	const startTimeString = startTime.toISOString();
+	const endTimeString = endTime.toISOString();
 
 	const onFilterBuilderQueryApply = useCallback(
 		(query: QueryType, id: string) => {
@@ -167,6 +198,23 @@ const SavedFiltersModal = () => {
 	}, []);
 
 	const hasNoSavedFilters = _.isEmpty(activeSavedFilters) || _.isNil(activeSavedFilters) || isError;
+	const isStoredAndCurrentTimeRangeAreSame = useCallback(
+		(from: string, to: string) => {
+			return from === startTimeString && to === endTimeString;
+		},
+		[startTimeString, endTimeString],
+	);
+
+	const hardRefresh = useCallback(() => {
+		setLogsStore((store) => getCleanStoreForRefetch(store));
+		closeModal();
+	}, []);
+
+	const changeTimerange = useCallback((from: string, end: string) => {
+		setLogsStore((store) => setTimeRange(store, { type: 'custom', startTime: dayjs(from), endTime: dayjs(end) }));
+		closeModal();
+	}, []);
+
 	return (
 		<Modal
 			opened={isSavedFiltersModalOpen}
@@ -199,6 +247,10 @@ const SavedFiltersModal = () => {
 									onSqlSearchApply={onSqlSearchApply}
 									onFilterBuilderQueryApply={onFilterBuilderQueryApply}
 									currentStream={currentStream || ''}
+									savedFilterId={savedFilterId}
+									isStoredAndCurrentTimeRangeAreSame={isStoredAndCurrentTimeRangeAreSame}
+									hardRefresh={hardRefresh}
+									changeTimerange={changeTimerange}
 								/>
 							);
 						})}

src/pages/Stream/components/Querier/index.tsx

@@ -162,7 +162,7 @@ const Querier = () => {
 		if (isQuerySearchActive && allValues.length === 0 && activeMode !== 'sql') {
 			onClear();
 		}
-	}, [query.rules]);
+	}, [query.rules, savedFilterId]);
 
 	const onChangeCustQueryViewMode = useCallback((mode: 'sql' | 'filters') => {
 		setLogsStore((store) => toggleCustQuerySearchViewMode(store, mode));

src/pages/Stream/index.tsx

@@ -22,8 +22,8 @@ const { streamChangeCleanup } = streamStoreReducers;
 
 const SchemaErrorView = (props: { error: string; fetchSchema: () => void }) => {
 	return (
-		<Stack style={{ border: '1px solid', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
-			<Stack gap={0}>
+		<Stack style={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}>
+			<Stack gap={0} style={{ justifyContent: 'center', alignItems: 'center' }}>
 				<Text c="red.8" style={{ fontWeight: 400, textAlign: 'center' }}>
 					{props.error || 'Error'}
 				</Text>