From 6b2ba02bf852b510de6873371cf26bf47ea09d6c Mon Sep 17 00:00:00 2001 From: Praveen K B Date: Mon, 6 Jan 2025 15:10:34 +0530 Subject: [PATCH 1/5] fix: Retry on error should show success data --- src/hooks/useQueryLogs.ts | 33 +++---------------- src/pages/Stream/Views/Explore/LogsView.tsx | 4 +-- .../Stream/Views/Explore/useLogsFetcher.ts | 7 ++-- 3 files changed, 11 insertions(+), 33 deletions(-) diff --git a/src/hooks/useQueryLogs.ts b/src/hooks/useQueryLogs.ts index af683d04..f7f37fe0 100644 --- a/src/hooks/useQueryLogs.ts +++ b/src/hooks/useQueryLogs.ts @@ -1,13 +1,11 @@ -import { SortOrder, type Log, type LogsData, type LogsSearch } from '@/@types/parseable/api/query'; +import { type Log } from '@/@types/parseable/api/query'; import { getQueryLogsWithHeaders, getQueryResultWithHeaders } from '@/api/query'; import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; import { useQuery } from 'react-query'; import { useCallback, useRef } from 'react'; import { useLogsStore, logsStoreReducers, LOAD_LIMIT, isJqSearch } from '@/pages/Stream/providers/LogsProvider'; import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider'; import _ from 'lodash'; -import { AxiosError } from 'axios'; import jqSearch from '@/utils/jqSearch'; import { useGetStreamSchema } from '@/hooks/useGetLogStreamSchema'; import { useStreamStore } from '@/pages/Stream/providers/StreamProvider'; @@ -33,16 +31,6 @@ export const useQueryLogs = () => { // data ref will always have the unfiltered data. // Only mutate it when data is fetched, otherwise read only const _dataRef = useRef(null); - const [error, setError] = useMountedState(null); - const [pageLogData, setPageLogData] = useMountedState(null); - const [querySearch, setQuerySearch] = useMountedState({ - search: '', - filters: {}, - sort: { - key: 'p_timestamp', - order: SortOrder.DESCENDING, - }, - }); const [queryEngine] = useAppStore((store) => store.instanceConfig?.queryEngine); const [streamInfo] = useStreamStore((store) => store.info); const [currentStream] = useAppStore((store) => store.currentStream); @@ -94,6 +82,7 @@ export const useQueryLogs = () => { const { isLoading: logsLoading, isRefetching: logsRefetching, + error: queryLogsError, refetch: getQueryData, } = useQuery( ['fetch-logs', defaultQueryOpts], @@ -125,33 +114,19 @@ export const useQueryLogs = () => { onSuccess: async (data) => { const logs = data.data; const isInvalidResponse = _.isEmpty(logs) || _.isNil(logs) || data.status !== StatusCodes.OK; - if (isInvalidResponse) return setError('Failed to query logs'); + if (isInvalidResponse) return; const { records, fields } = logs; const jqFilteredData = isJqSearch(instantSearchValue) ? await jqSearch(records, instantSearchValue) : []; setLogsStore((store) => setLogData(store, records, fields, jqFilteredData)); }, - onError: (data: AxiosError) => { - const errorMessage = data.response?.data as string; - setError(_.isString(errorMessage) && !_.isEmpty(errorMessage) ? errorMessage : 'Failed to query logs'); - }, }, ); - const resetData = () => { - _dataRef.current = null; - setPageLogData(null); - setError(null); - }; - return { - pageLogData, - setQuerySearch, getColumnFilters, - sort: querySearch.sort, - error, + queryLogsError, loading: logsLoading || logsRefetching, getQueryData, - resetData, }; }; diff --git a/src/pages/Stream/Views/Explore/LogsView.tsx b/src/pages/Stream/Views/Explore/LogsView.tsx index 92601a78..dae0c08a 100644 --- a/src/pages/Stream/Views/Explore/LogsView.tsx +++ b/src/pages/Stream/Views/Explore/LogsView.tsx @@ -15,7 +15,7 @@ const { toogleQueryParamsFlag } = filterStoreReducers; const LogsView = (props: { schemaLoading: boolean; infoLoading: boolean }) => { const [, setFilterStore] = useFilterStore((store) => store); const { schemaLoading, infoLoading } = props; - const { errorMessage, hasNoData, showTable, isFetchingCount, logsLoading } = useLogsFetcher({ + const { hasNoData, showTable, isFetchingCount, logsLoading, queryLogsError } = useLogsFetcher({ schemaLoading, infoLoading, }); @@ -24,7 +24,7 @@ const LogsView = (props: { schemaLoading: boolean; infoLoading: boolean }) => { const { currentPage, targetPage, headers, targetColumns } = tableOpts; const [viewMode, setLogsStore] = useLogsStore((store) => store.viewMode); const viewOpts = { - errorMessage, + errorMessage: queryLogsError, hasNoData, showTable, isFetchingCount, diff --git a/src/pages/Stream/Views/Explore/useLogsFetcher.ts b/src/pages/Stream/Views/Explore/useLogsFetcher.ts index 2d76ef57..d39e9c76 100644 --- a/src/pages/Stream/Views/Explore/useLogsFetcher.ts +++ b/src/pages/Stream/Views/Explore/useLogsFetcher.ts @@ -4,6 +4,7 @@ import { useLogsStore, logsStoreReducers } from '../../providers/LogsProvider'; import { useQueryLogs } from '@/hooks/useQueryLogs'; import { useFetchCount } from '@/hooks/useQueryResult'; import { useStreamStore } from '../../providers/StreamProvider'; +import { AxiosError } from 'axios'; const { setCleanStoreForStreamChange } = logsStoreReducers; const { syncTimeRange } = appStoreReducers; @@ -14,10 +15,12 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean }) const [{ timeRange }, setAppStore] = useAppStore((store) => store); const [{ tableOpts }, setLogsStore] = useLogsStore((store) => store); const { currentOffset, currentPage, pageData } = tableOpts; - const { getQueryData, loading: logsLoading, error: errorMessage } = useQueryLogs(); + const { getQueryData, loading: logsLoading, queryLogsError } = useQueryLogs(); const [{ info }] = useStreamStore((store) => store); const firstEventAt = 'first-event-at' in info ? info['first-event-at'] : undefined; + const errorMessage = (queryLogsError as AxiosError)?.response?.data as string; + const { refetchCount, isCountLoading, isCountRefetching } = useFetchCount(); const hasContentLoaded = schemaLoading === false && logsLoading === false; const hasNoData = hasContentLoaded && !errorMessage && pageData.length === 0; @@ -47,7 +50,7 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean }) return { logsLoading: infoLoading || logsLoading, - errorMessage, + queryLogsError: errorMessage, hasContentLoaded, hasNoData, showTable, From 7793587239aec25e9633564a860ffc35fade0ecd Mon Sep 17 00:00:00 2001 From: Praveen K B <30530587+praveen5959@users.noreply.github.com> Date: Mon, 6 Jan 2025 13:13:36 +0200 Subject: [PATCH 2/5] fix: Handled the empty error message case --- src/pages/Stream/Views/Explore/useLogsFetcher.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pages/Stream/Views/Explore/useLogsFetcher.ts b/src/pages/Stream/Views/Explore/useLogsFetcher.ts index d39e9c76..8269f877 100644 --- a/src/pages/Stream/Views/Explore/useLogsFetcher.ts +++ b/src/pages/Stream/Views/Explore/useLogsFetcher.ts @@ -5,6 +5,7 @@ import { useQueryLogs } from '@/hooks/useQueryLogs'; import { useFetchCount } from '@/hooks/useQueryResult'; import { useStreamStore } from '../../providers/StreamProvider'; import { AxiosError } from 'axios'; +import _ from 'lodash'; const { setCleanStoreForStreamChange } = logsStoreReducers; const { syncTimeRange } = appStoreReducers; @@ -19,7 +20,10 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean }) const [{ info }] = useStreamStore((store) => store); const firstEventAt = 'first-event-at' in info ? info['first-event-at'] : undefined; - const errorMessage = (queryLogsError as AxiosError)?.response?.data as string; + const errorMessage = + _.isEmpty((queryLogsError as AxiosError)?.response?.data as string) + ? 'Failed to query logs' + : (queryLogsError as AxiosError)?.response?.data; const { refetchCount, isCountLoading, isCountRefetching } = useFetchCount(); const hasContentLoaded = schemaLoading === false && logsLoading === false; From 3bb4ca6bb313910df8c60879cf6e59e6cfad8c6d Mon Sep 17 00:00:00 2001 From: Praveen K B Date: Mon, 6 Jan 2025 16:51:00 +0530 Subject: [PATCH 3/5] fix: Linting fixes and err message --- src/pages/Stream/Views/Explore/useLogsFetcher.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/Stream/Views/Explore/useLogsFetcher.ts b/src/pages/Stream/Views/Explore/useLogsFetcher.ts index 8269f877..e56d7900 100644 --- a/src/pages/Stream/Views/Explore/useLogsFetcher.ts +++ b/src/pages/Stream/Views/Explore/useLogsFetcher.ts @@ -20,10 +20,9 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean }) const [{ info }] = useStreamStore((store) => store); const firstEventAt = 'first-event-at' in info ? info['first-event-at'] : undefined; - const errorMessage = - _.isEmpty((queryLogsError as AxiosError)?.response?.data as string) - ? 'Failed to query logs' - : (queryLogsError as AxiosError)?.response?.data; + const errorMessage = _.isEmpty((queryLogsError as AxiosError)?.response?.data as string) + ? 'Failed to query logs' + : ((queryLogsError as AxiosError)?.response?.data as string); const { refetchCount, isCountLoading, isCountRefetching } = useFetchCount(); const hasContentLoaded = schemaLoading === false && logsLoading === false; From 24c7a3ce73a68779eb88011286e67c3784e59684 Mon Sep 17 00:00:00 2001 From: Praveen K B <30530587+praveen5959@users.noreply.github.com> Date: Mon, 6 Jan 2025 13:14:53 +0200 Subject: [PATCH 4/5] fix: Fixed empty stream loading state (#407) --- src/hooks/useGetStreamMetadata.ts | 2 +- tests/home.spec.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/hooks/useGetStreamMetadata.ts b/src/hooks/useGetStreamMetadata.ts index 14ff03e1..611c2d6f 100644 --- a/src/hooks/useGetStreamMetadata.ts +++ b/src/hooks/useGetStreamMetadata.ts @@ -15,7 +15,7 @@ export type MetaData = { // until dedicated endpoint been provided - fetch one by one export const useGetStreamMetadata = () => { - const [isLoading, setLoading] = useState(true); + const [isLoading, setLoading] = useState(false); const [error, setError] = useState(false); const [metaData, setMetadata] = useState(null); const [userRoles] = useAppStore((store) => store.userRoles); diff --git a/tests/home.spec.ts b/tests/home.spec.ts index ff4856b4..8f707cec 100644 --- a/tests/home.spec.ts +++ b/tests/home.spec.ts @@ -102,7 +102,6 @@ test.describe('Home Page', () => { await page.goto(`${TEST_URL}`); await expect(searchInput).toBeVisible(); await searchInput.fill('PlaywrightStream'); - await expect(page.locator('text=No Stream found on this account')).toBeVisible(); await expect(page.locator('text=All Streams (0)')).toBeVisible(); }); }); From bb0b892dae891239bead51462a30b7ac37cb8473 Mon Sep 17 00:00:00 2001 From: Praveen K B Date: Tue, 7 Jan 2025 20:59:53 +0530 Subject: [PATCH 5/5] fix: Error states handled properly --- src/pages/Stream/Views/Explore/JSONView.tsx | 5 +++-- src/pages/Stream/Views/Explore/LogsView.tsx | 3 ++- src/pages/Stream/Views/Explore/StaticLogTable.tsx | 5 +++-- src/pages/Stream/Views/Explore/useLogsFetcher.ts | 11 +++-------- 4 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/pages/Stream/Views/Explore/JSONView.tsx b/src/pages/Stream/Views/Explore/JSONView.tsx index 2ccb7552..058459f4 100644 --- a/src/pages/Stream/Views/Explore/JSONView.tsx +++ b/src/pages/Stream/Views/Explore/JSONView.tsx @@ -18,6 +18,7 @@ import { IconCheck, IconCopy, IconSearch } from '@tabler/icons-react'; import { copyTextToClipboard } from '@/utils'; import { useStreamStore } from '../../providers/StreamProvider'; import timeRangeUtils from '@/utils/timeRangeUtils'; +import { AxiosError } from 'axios'; const { setInstantSearchValue, applyInstantSearch, applyJqSearch } = logsStoreReducers; @@ -187,7 +188,7 @@ const TableContainer = (props: { children: ReactNode }) => { }; const JsonView = (props: { - errorMessage: string | null; + errorMessage: AxiosError; hasNoData: boolean; showTable: boolean; isFetchingCount: boolean; @@ -224,7 +225,7 @@ const JsonView = (props: { ) ) : ( - + )}