From c731ceae65ea662ca8297f40b17a9b4896eafd0e Mon Sep 17 00:00:00 2001 From: Praveen K B <30530587+praveen5959@users.noreply.github.com> Date: Wed, 13 Nov 2024 16:05:20 +0530 Subject: [PATCH] Moving the /info API call on stream load (#372) --- src/hooks/useGetStreamInfo.tsx | 2 +- .../Stream/Views/Explore/useLogsFetcher.ts | 12 +++-- src/pages/Stream/Views/Manage/Info.tsx | 52 +++++++------------ src/pages/Stream/Views/Manage/Management.tsx | 4 +- .../Stream/components/EventTimeLineGraph.tsx | 15 +++--- src/pages/Stream/index.tsx | 3 +- 6 files changed, 40 insertions(+), 48 deletions(-) diff --git a/src/hooks/useGetStreamInfo.tsx b/src/hooks/useGetStreamInfo.tsx index 8ad20a7f..e843df96 100644 --- a/src/hooks/useGetStreamInfo.tsx +++ b/src/hooks/useGetStreamInfo.tsx @@ -18,7 +18,7 @@ export const useGetStreamInfo = (currentStream: string, initialFetch: boolean) = } = useQuery(['stream-info', currentStream], () => getLogStreamInfo(currentStream), { retry: false, refetchOnWindowFocus: false, - refetchOnMount: true, + refetchOnMount: false, enabled: initialFetch, // currentStream !== '', onSuccess: (data) => { diff --git a/src/pages/Stream/Views/Explore/useLogsFetcher.ts b/src/pages/Stream/Views/Explore/useLogsFetcher.ts index 102bc025..df31a5ab 100644 --- a/src/pages/Stream/Views/Explore/useLogsFetcher.ts +++ b/src/pages/Stream/Views/Explore/useLogsFetcher.ts @@ -3,6 +3,7 @@ import { useEffect } from 'react'; import { useLogsStore, logsStoreReducers } from '../../providers/LogsProvider'; import { useQueryLogs } from '@/hooks/useQueryLogs'; import { useFetchCount } from '@/hooks/useQueryResult'; +import { useStreamStore } from '../../providers/StreamProvider'; const { setCleanStoreForStreamChange } = logsStoreReducers; @@ -12,6 +13,9 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean }) const [{ tableOpts, timeRange }, setLogsStore] = useLogsStore((store) => store); const { currentOffset, currentPage, pageData } = tableOpts; const { getQueryData, loading: logsLoading, error: errorMessage } = useQueryLogs(); + const [{ info }] = useStreamStore((store) => store); + const firstEventAt = 'first-event-at' in info ? info['first-event-at'] : undefined; + const { refetchCount, isCountLoading, isCountRefetching } = useFetchCount(); const hasContentLoaded = schemaLoading === false && logsLoading === false; const hasNoData = hasContentLoaded && !errorMessage && pageData.length === 0; @@ -22,21 +26,21 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean }) }, [currentStream]); useEffect(() => { - if (infoLoading) return; + if (infoLoading || !firstEventAt) return; if (currentPage === 0 && currentOffset === 0) { getQueryData(); refetchCount(); } - }, [currentPage, currentStream, timeRange, infoLoading]); + }, [currentPage, currentStream, timeRange, infoLoading, firstEventAt]); useEffect(() => { - if (infoLoading) return; + if (infoLoading || !firstEventAt) return; if (currentOffset !== 0 && currentPage !== 0) { getQueryData(); } - }, [currentOffset, infoLoading]); + }, [currentOffset, infoLoading, firstEventAt]); return { logsLoading: infoLoading || logsLoading, diff --git a/src/pages/Stream/Views/Manage/Info.tsx b/src/pages/Stream/Views/Manage/Info.tsx index 64d20f08..d04aaf5a 100644 --- a/src/pages/Stream/Views/Manage/Info.tsx +++ b/src/pages/Stream/Views/Manage/Info.tsx @@ -1,4 +1,4 @@ -import { Group, Loader, Stack, Text } from '@mantine/core'; +import { Group, Stack, Text } from '@mantine/core'; import classes from '../../styles/Management.module.css'; import { useStreamStore } from '../../providers/StreamProvider'; import _ from 'lodash'; @@ -6,7 +6,6 @@ import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider'; import UpdateTimePartitionLimit from './UpdateTimePartitionLimit'; import UpdateCustomPartitionField from './UpdateCustomPartitionField'; import timeRangeUtils from '@/utils/timeRangeUtils'; -import ErrorView from './ErrorView'; const { formatDateWithTimezone } = timeRangeUtils; @@ -43,7 +42,7 @@ const InfoItem = (props: { title: string; value: string; fullWidth?: boolean }) ); }; -const InfoData = (props: { isLoading: boolean }) => { +const InfoData = () => { const [info] = useStreamStore((store) => store.info); const [currentStream] = useAppStore((store) => store.currentStream); @@ -60,44 +59,33 @@ const InfoData = (props: { isLoading: boolean }) => { return ( - {props.isLoading ? ( - - - - + + + + + - ) : ( - - - - - - - - - - - - - - + + + + - )} + + + + ); }; -const Info = (props: { isLoading: boolean; isError: boolean }) => { +const Info = () => { return (
- {props.isError ? : } + ); }; diff --git a/src/pages/Stream/Views/Manage/Management.tsx b/src/pages/Stream/Views/Manage/Management.tsx index fe30e2d7..7ac8991b 100644 --- a/src/pages/Stream/Views/Manage/Management.tsx +++ b/src/pages/Stream/Views/Manage/Management.tsx @@ -8,7 +8,6 @@ import { useLogStreamStats } from '@/hooks/useLogStreamStats'; import Info from './Info'; import DeleteStreamModal from '../../components/DeleteStreamModal'; import { useRetentionQuery } from '@/hooks/useRetentionEditor'; -import { useGetStreamInfo } from '@/hooks/useGetStreamInfo'; import { useHotTier } from '@/hooks/useHotTier'; const Management = (props: { schemaLoading: boolean }) => { @@ -20,7 +19,6 @@ const Management = (props: { schemaLoading: boolean }) => { const getStreamAlertsConfig = useAlertsQuery(currentStream || '', hasAlertsAccess, isStandAloneMode); const getStreamStats = useLogStreamStats(currentStream || ''); const getRetentionConfig = useRetentionQuery(currentStream || '', hasSettingsAccess); - const getStreamInfo = useGetStreamInfo(currentStream || '', currentStream !== null); const hotTierFetch = useHotTier(currentStream || '', hasSettingsAccess); // todo - handle loading and error states separately @@ -36,7 +34,7 @@ const Management = (props: { schemaLoading: boolean }) => { isLoading={getStreamStats.getLogStreamStatsDataIsLoading} isError={getStreamStats.getLogStreamStatsDataIsError} /> - + diff --git a/src/pages/Stream/components/EventTimeLineGraph.tsx b/src/pages/Stream/components/EventTimeLineGraph.tsx index 5dab547a..aafc6fe1 100644 --- a/src/pages/Stream/components/EventTimeLineGraph.tsx +++ b/src/pages/Stream/components/EventTimeLineGraph.tsx @@ -11,6 +11,7 @@ import { useFilterStore, filterStoreReducers } from '../providers/FilterProvider import { LogsResponseWithHeaders } from '@/@types/parseable/api/query'; import _ from 'lodash'; import timeRangeUtils from '@/utils/timeRangeUtils'; +import { useStreamStore } from '../providers/StreamProvider'; const { setTimeRange } = logsStoreReducers; const { parseQuery } = filterStoreReducers; @@ -268,13 +269,15 @@ const EventTimeLineGraph = () => { const [{ activeMode, custSearchQuery }] = useLogsStore((store) => store.custQuerySearchState); const [{ interval, startTime, endTime }] = useLogsStore((store) => store.timeRange); const [localStream, setLocalStream] = useState(''); + const [{ info }] = useStreamStore((store) => store); + const firstEventAt = 'first-event-at' in info ? info['first-event-at'] : undefined; useEffect(() => { setLocalStream(currentStream); }, [currentStream]); useEffect(() => { - if (!localStream || localStream.length === 0) return; + if (!localStream || localStream.length === 0 || !firstEventAt) return; const { modifiedEndTime, modifiedStartTime, compactType } = getModifiedTimeRange(startTime, endTime, interval); const logsQuery = { @@ -294,14 +297,14 @@ const EventTimeLineGraph = () => { logsQuery, query: graphQuery, }); - }, [localStream, startTime.toISOString(), endTime.toISOString(), custSearchQuery]); + }, [localStream, startTime.toISOString(), endTime.toISOString(), custSearchQuery, firstEventAt]); const isLoading = fetchQueryMutation.isLoading; const avgEventCount = useMemo(() => calcAverage(fetchQueryMutation?.data), [fetchQueryMutation?.data]); - const graphData = useMemo( - () => parseGraphData(fetchQueryMutation?.data, avgEventCount, startTime, endTime, interval), - [fetchQueryMutation?.data, interval], - ); + const graphData = useMemo(() => { + if (!firstEventAt) return null; + return parseGraphData(fetchQueryMutation?.data, avgEventCount, startTime, endTime, interval); + }, [fetchQueryMutation?.data, interval, firstEventAt]); const hasData = Array.isArray(graphData) && graphData.length !== 0; const [, setLogsStore] = useLogsStore((store) => store.timeRange); const setTimeRangeFromGraph = useCallback((barValue: any) => { diff --git a/src/pages/Stream/index.tsx b/src/pages/Stream/index.tsx index 1da6e2ce..2685e5e5 100644 --- a/src/pages/Stream/index.tsx +++ b/src/pages/Stream/index.tsx @@ -45,11 +45,10 @@ const Stream: FC = () => { const [maximized] = useAppStore((store) => store.maximized); const [instanceConfig] = useAppStore((store) => store.instanceConfig); const queryEngine = instanceConfig?.queryEngine; - const getInfoFetchedOnMount = queryEngine === 'Parseable' ? false : currentStream !== null; const [sideBarOpen, setStreamStore] = useStreamStore((store) => store.sideBarOpen); const { getStreamInfoRefetch, getStreamInfoLoading, getStreamInfoRefetching } = useGetStreamInfo( currentStream || '', - getInfoFetchedOnMount, + currentStream !== null, ); const {