fix: Removed /info call dependancy from explore page (#431)

parseablehq · Jan 23, 2025 · 1c0a2e3 · 1c0a2e3
1 parent a53b1c1
commit 1c0a2e3
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 45 deletions.
diff --git a/src/pages/Stream/Views/Explore/useLogsFetcher.ts b/src/pages/Stream/Views/Explore/useLogsFetcher.ts
@@ -3,7 +3,6 @@ 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';
 import useParamsController from '@/pages/Stream/hooks/useParamsController';
 import _ from 'lodash';
 
@@ -18,8 +17,6 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean })
 	const [{ tableOpts }, setLogsStore] = useLogsStore((store) => store);
 	const { currentOffset, currentPage, pageData } = tableOpts;
 	const { getQueryData, loading: logsLoading, queryLogsError } = useQueryLogs();
-	const [{ info }] = useStreamStore((store) => store);
-	const firstEventAt = 'first-event-at' in info ? info['first-event-at'] : undefined;
 
 	const { refetchCount, countLoading } = useFetchCount();
 	const hasContentLoaded = schemaLoading === false && logsLoading === false;
@@ -33,21 +30,21 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean })
 	}, [currentStream]);
 
 	useEffect(() => {
-		if (infoLoading || !firstEventAt) return;
+		if (infoLoading) return;
 
 		if (currentPage === 0) {
 			getQueryData();
 			refetchCount();
 		}
-	}, [currentPage, currentStream, timeRange, infoLoading, firstEventAt]);
+	}, [currentPage, currentStream, timeRange, infoLoading]);
 
 	useEffect(() => {
-		if (infoLoading || !firstEventAt) return;
+		if (infoLoading) return;
 
 		if (currentOffset !== 0 && currentPage !== 0) {
 			getQueryData();
 		}
-	}, [currentOffset, infoLoading, firstEventAt]);
+	}, [currentOffset, infoLoading]);
 
 	return {
 		logsLoading: infoLoading || logsLoading,

diff --git a/src/pages/Stream/Views/Manage/Info.tsx b/src/pages/Stream/Views/Manage/Info.tsx
@@ -1,11 +1,12 @@
-import { Group, Stack, Text } from '@mantine/core';
+import { Group, Loader, 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;
 
@@ -42,7 +43,7 @@ const InfoItem = (props: { title: string; value: string; fullWidth?: boolean })
 	);
 };
 
-const InfoData = () => {
+const InfoData = (props: { isLoading: boolean }) => {
 	const [info] = useStreamStore((store) => store.info);
 	const [currentStream] = useAppStore((store) => store.currentStream);
 
@@ -59,33 +60,44 @@ const InfoData = () => {
 
 	return (
 		<Stack style={{ flex: 1 }}>
-			<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} />
+			{props.isLoading ? (
+				<Stack style={{ flex: 1, width: '100%', alignItems: 'center', justifyContent: 'center' }}>
+					<Stack style={{ alignItems: 'center' }}>
+						<Loader />
+					</Stack>
 				</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 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>
-				<Stack gap={0} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-					<UpdateCustomPartitionField
-						currentStream={currentStream ? currentStream : ''}
-						timePartition={timePartition}
-					/>
-				</Stack>
-			</Stack>
+			)}
 		</Stack>
 	);
 };
 
-const Info = () => {
+const Info = (props: { isLoading: boolean; isError: boolean }) => {
 	return (
 		<Stack className={classes.sectionContainer} gap={0}>
 			<Header />
-			<InfoData />
+			{props.isError ? <ErrorView /> : <InfoData isLoading={props.isLoading} />}
 		</Stack>
 	);
 };

diff --git a/src/pages/Stream/Views/Manage/Management.tsx b/src/pages/Stream/Views/Manage/Management.tsx
@@ -7,6 +7,7 @@ import Stats from './Stats';
 import { useLogStreamStats } from '@/hooks/useLogStreamStats';
 import Info from './Info';
 import DeleteStreamModal from '../../components/DeleteStreamModal';
+import { useGetStreamInfo } from '@/hooks/useGetStreamInfo';
 import { useRetentionQuery } from '@/hooks/useRetentionEditor';
 import { useHotTier } from '@/hooks/useHotTier';
 
@@ -19,6 +20,7 @@ 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
@@ -34,7 +36,7 @@ const Management = (props: { schemaLoading: boolean }) => {
 					isLoading={getStreamStats.getLogStreamStatsDataIsLoading}
 					isError={getStreamStats.getLogStreamStatsDataIsError}
 				/>
-				<Info />
+				<Info isLoading={getStreamInfo.getStreamInfoLoading} isError={getStreamInfo.getStreamInfoError} />
 			</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
@@ -10,7 +10,6 @@ import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/Ap
 import { LogsResponseWithHeaders } from '@/@types/parseable/api/query';
 import _ from 'lodash';
 import timeRangeUtils from '@/utils/timeRangeUtils';
-import { useStreamStore } from '../providers/StreamProvider';
 
 const { setTimeRange } = appStoreReducers;
 const { makeTimeRangeLabel } = timeRangeUtils;
@@ -163,15 +162,13 @@ const EventTimeLineGraph = () => {
 	const [{ custSearchQuery }, setLogStore] = useLogsStore((store) => store.custQuerySearchState);
 	const [{ interval, startTime, endTime }] = useAppStore((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 || !firstEventAt) return;
+		if (!localStream || localStream.length === 0) return;
 
 		const totalMinutes = interval / (1000 * 60);
 		const numBins = Math.trunc(totalMinutes < 10 ? totalMinutes : totalMinutes < 60 ? 10 : 60);
@@ -189,15 +186,13 @@ const EventTimeLineGraph = () => {
 		dayjs(startTime).startOf('minute').toISOString(),
 		dayjs(endTime).startOf('minute').toISOString(),
 		custSearchQuery,
-		firstEventAt,
 	]);
 
 	const isLoading = fetchGraphDataMutation.isLoading;
 	const avgEventCount = useMemo(() => calcAverage(fetchGraphDataMutation?.data), [fetchGraphDataMutation?.data]);
 	const graphData = useMemo(() => {
-		if (!firstEventAt) return null;
 		return parseGraphData(fetchGraphDataMutation?.data, avgEventCount, interval);
-	}, [fetchGraphDataMutation?.data, interval, firstEventAt]);
+	}, [fetchGraphDataMutation?.data, interval]);
 	const hasData = Array.isArray(graphData) && graphData.length !== 0;
 	const [, setAppStore] = useAppStore((_store) => null);
 	const setTimeRangeFromGraph = useCallback((barValue: any) => {

diff --git a/src/pages/Stream/index.tsx b/src/pages/Stream/index.tsx
@@ -17,7 +17,6 @@ import { Text } from '@mantine/core';
 import { RetryBtn } from '@/components/Button/Retry';
 import LogsView from './Views/Explore/LogsView';
 import { useGetStreamSchema } from '@/hooks/useGetLogStreamSchema';
-import { useGetStreamInfo } from '@/hooks/useGetStreamInfo';
 import useParamsController from './hooks/useParamsController';
 
 const { streamChangeCleanup, toggleSideBar } = streamStoreReducers;
@@ -45,10 +44,6 @@ const Stream: FC = () => {
 	const [maximized] = useAppStore((store) => store.maximized);
 	const [instanceConfig] = useAppStore((store) => store.instanceConfig);
 	const [, setStreamStore] = useStreamStore((store) => store.sideBarOpen);
-	const { getStreamInfoRefetch, getStreamInfoLoading, getStreamInfoRefetching } = useGetStreamInfo(
-		currentStream || '',
-		currentStream !== null,
-	);
 
 	useHotkeys([['mod+/', () => setStreamStore((store) => toggleSideBar(store))]]);
 
@@ -62,7 +57,6 @@ const Stream: FC = () => {
 
 	const fetchSchema = useCallback(() => {
 		setStreamStore(streamChangeCleanup);
-		getStreamInfoRefetch();
 		refetchSchema();
 	}, [currentStream]);
 
@@ -71,7 +65,6 @@ const Stream: FC = () => {
 			if (!_.isEmpty(currentStream)) {
 				if (view === 'explore') {
 					setStreamStore(streamChangeCleanup);
-					getStreamInfoRefetch();
 				} else {
 					fetchSchema();
 				}
@@ -85,9 +78,7 @@ const Stream: FC = () => {
 	if (!_.includes(STREAM_VIEWS, view)) return null;
 
 	const isSchemaFetching = isSchemaRefetching || isSchemaLoading;
-	const isInfoLoading =
-		(!isStoreSynced || getStreamInfoLoading || getStreamInfoRefetching || instanceConfig === null) &&
-		view === 'explore';
+	const isInfoLoading = (!isStoreSynced || instanceConfig === null) && view === 'explore';
 	return (
 		<Box
 			style={{