From bdf2bbce3c3d0469de209b5d3f616f5665f3d489 Mon Sep 17 00:00:00 2001 From: balaji-jr Date: Tue, 18 Jun 2024 23:35:04 +0530 Subject: [PATCH 1/3] readme - updated the demo app url --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b48d8ef7..1aedc2b5 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ For complete Parseable API documentation, refer to [Parseable API workspace on P - + From 938d80f40b911a66f7b327a8bf12e79aa9cb7808 Mon Sep 17 00:00:00 2001 From: balaji-jr Date: Mon, 1 Jul 2024 16:29:32 +0530 Subject: [PATCH 2/3] saved filters enhancements --- src/hooks/useSavedFilters.tsx | 11 ++- .../components/Querier/SaveFilterModal.tsx | 34 ++++--- .../components/Querier/SavedFiltersModal.tsx | 94 ++++++++++++++----- src/pages/Stream/components/Querier/index.tsx | 2 +- src/pages/Stream/index.tsx | 4 +- 5 files changed, 104 insertions(+), 41 deletions(-) diff --git a/src/hooks/useSavedFilters.tsx b/src/hooks/useSavedFilters.tsx index 1c58d7e4..00fbea69 100644 --- a/src/hooks/useSavedFilters.tsx +++ b/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 }; }; diff --git a/src/pages/Stream/components/Querier/SaveFilterModal.tsx b/src/pages/Stream/components/Querier/SaveFilterModal.tsx index f8278bea..6b0cfa27 100644 --- a/src/pages/Stream/components/Querier/SaveFilterModal.tsx +++ b/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(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); @@ -244,16 +244,24 @@ const SaveFilterModal = () => { /> - - - - - - + {showLoader ? ( + + + + ) : ( + <> + + + + + + + + )} diff --git a/src/pages/Stream/components/Querier/SavedFiltersModal.tsx b/src/pages/Stream/components/Querier/SavedFiltersModal.tsx index 457d15ac..fb734ee0 100644 --- a/src/pages/Stream/components/Querier/SavedFiltersModal.tsx +++ b/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 = () => ; const renderCloseIcon = () => ; @@ -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(false); const [showDeletePropmt, setShowDeletePrompt] = useState(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 ( @@ -83,18 +102,24 @@ const SavedFilterItem = (props: { {showDeletePropmt ? ( - - - - - - - - + isDeleting ? ( + + + + ) : ( + + + + + + + + + ) ) : ( <> @@ -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 ( { onSqlSearchApply={onSqlSearchApply} onFilterBuilderQueryApply={onFilterBuilderQueryApply} currentStream={currentStream || ''} + savedFilterId={savedFilterId} + isStoredAndCurrentTimeRangeAreSame={isStoredAndCurrentTimeRangeAreSame} + hardRefresh={hardRefresh} + changeTimerange={changeTimerange} /> ); })} diff --git a/src/pages/Stream/components/Querier/index.tsx b/src/pages/Stream/components/Querier/index.tsx index 2e055361..c85cd2dd 100644 --- a/src/pages/Stream/components/Querier/index.tsx +++ b/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)); diff --git a/src/pages/Stream/index.tsx b/src/pages/Stream/index.tsx index bd08ee60..fef09d2e 100644 --- a/src/pages/Stream/index.tsx +++ b/src/pages/Stream/index.tsx @@ -22,8 +22,8 @@ const { streamChangeCleanup } = streamStoreReducers; const SchemaErrorView = (props: { error: string; fetchSchema: () => void }) => { return ( - - + + {props.error || 'Error'} From e23ab9a77898cb7ef1780051d880af4f10f846ba Mon Sep 17 00:00:00 2001 From: Nikhil Sinha Date: Mon, 1 Jul 2024 16:59:56 +0530 Subject: [PATCH 3/3] Fixed time range to Time Range --- src/pages/Stream/components/Querier/SaveFilterModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Stream/components/Querier/SaveFilterModal.tsx b/src/pages/Stream/components/Querier/SaveFilterModal.tsx index 6b0cfa27..6f2fb904 100644 --- a/src/pages/Stream/components/Querier/SaveFilterModal.tsx +++ b/src/pages/Stream/components/Querier/SaveFilterModal.tsx @@ -220,7 +220,7 @@ const SaveFilterModal = () => { - Fixed Time Range + Time Range
URLhttps://demo.parseable.iohttps://demo.parseable.com
Username