Moving the /info API call on stream load (#372)

parseablehq · Nov 13, 2024 · c731cea · c731cea
1 parent 7ce20c0
commit c731cea
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 48 deletions.
diff --git 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
@@ -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
@@ -1,12 +1,11 @@
-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';
 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 (
 		<Stack style={{ flex: 1 }}>
-			{props.isLoading ? (
-				<Stack style={{ flex: 1, width: '100%', alignItems: 'center', justifyContent: 'center' }}>
-					<Stack style={{ alignItems: 'center' }}>
-						<Loader />
-					</Stack>
+			<Stack style={{ flex: 1, padding: '1.5rem', justifyContent: 'space-between' }}>
+				<Stack gap={0} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+					<InfoItem title="Name" value={currentStream || ''} />
+					<InfoItem title="Created At" value={createdAtWithTz} />
+					<InfoItem title="First Event At" value={firstEventAtWithTz} />
 				</Stack>
-			) : (
-				<Stack style={{ flex: 1, padding: '1.5rem', justifyContent: 'space-between' }}>
-					<Stack gap={0} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-						<InfoItem title="Name" value={currentStream || ''} />
-						<InfoItem title="Created At" value={createdAtWithTz} />
-						<InfoItem title="First Event At" value={firstEventAtWithTz} />
-					</Stack>
-					<Stack gap={0} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-						<InfoItem title="Schema Type" value={staticSchemaFlag} />
-						<InfoItem title="Time Partition Field" value={timePartition} />
-						<UpdateTimePartitionLimit
-							timePartition={timePartition}
-							currentStream={currentStream ? currentStream : ''}
-						/>
-					</Stack>
-					<Stack gap={0} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-						<UpdateCustomPartitionField
-							currentStream={currentStream ? currentStream : ''}
-							timePartition={timePartition}
-						/>
-					</Stack>
+				<Stack gap={0} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+					<InfoItem title="Schema Type" value={staticSchemaFlag} />
+					<InfoItem title="Time Partition Field" value={timePartition} />
+					<UpdateTimePartitionLimit timePartition={timePartition} currentStream={currentStream ? currentStream : ''} />
 				</Stack>
-			)}
+				<Stack gap={0} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+					<UpdateCustomPartitionField
+						currentStream={currentStream ? currentStream : ''}
+						timePartition={timePartition}
+					/>
+				</Stack>
+			</Stack>
 		</Stack>
 	);
 };
 
-const Info = (props: { isLoading: boolean; isError: boolean }) => {
+const Info = () => {
 	return (
 		<Stack className={classes.sectionContainer} gap={0}>
 			<Header />
-			{props.isError ? <ErrorView /> : <InfoData isLoading={props.isLoading} />}
+			<InfoData />
 		</Stack>
 	);
 };

diff --git 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}
 				/>
-				<Info isLoading={getStreamInfo.getStreamInfoLoading} isError={getStreamInfo.getStreamInfoError} />
+				<Info />
 			</Stack>
 			<Stack style={{ flexDirection: 'row', height: '57%' }} gap={24}>
 				<Stack w="49.4%">

diff --git 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<string | null>('');
+	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
@@ -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 {