Removal of /info call before query call

src/hooks/useGetLogStreamSchema.ts

@@ -16,7 +16,7 @@ export const useGetStreamSchema = (opts: { streamName: string }) => {
 		() => getLogStreamSchema(streamName),
 		{
 			retry: false,
-			enabled: streamName !== '',
+			enabled: false,
 			refetchOnWindowFocus: false,
 			onSuccess: (data) => {
 				setErrorMesssage(null);

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: false,
+		refetchOnMount: true,
 		enabled: initialFetch,
 		onSuccess: (data) => {
 			setStreamStore((store) => setStreamInfo(store, data));

src/pages/Stream/Views/Explore/LogsView.tsx

@@ -12,12 +12,11 @@ import _ from 'lodash';
 const { setPageAndPageData, setTargetPage, setTargetColumns, setDisabledColumns } = logsStoreReducers;
 const { toogleQueryParamsFlag } = filterStoreReducers;
 
-const LogsView = (props: { schemaLoading: boolean; infoLoading: boolean }) => {
+const LogsView = (props: { isStoreSyncing: boolean }) => {
 	const [, setFilterStore] = useFilterStore((store) => store);
-	const { schemaLoading, infoLoading } = props;
+	const { isStoreSyncing } = props;
 	const { errorMessage, hasNoData, showTable, isFetchingCount, logsLoading } = useLogsFetcher({
-		schemaLoading,
-		infoLoading,
+		isStoreSyncing,
 	});
 
 	const [tableOpts] = useLogsStore((store) => store.tableOpts);
@@ -58,7 +57,7 @@ const LogsView = (props: { schemaLoading: boolean; infoLoading: boolean }) => {
 	return (
 		<Box style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
 			{viewMode === 'table' && (
-				<LogsViewConfig schemaLoading={schemaLoading} logsLoading={logsLoading} infoLoading={infoLoading} />
+				<LogsViewConfig isFetchingCount={isFetchingCount} logsLoading={logsLoading} isStoreSyncing={isStoreSyncing} />
 			)}
 			{viewMode === 'table' ? <LogTable {...viewOpts} /> : <JsonView {...viewOpts} />}
 		</Box>

src/pages/Stream/Views/Explore/LogsViewConfig.tsx

@@ -254,7 +254,7 @@ const ColumnsList = (props: { isLoading: boolean }) => {
 				onChangeHandler={onSearchHandler}
 				disabled={_.isEmpty(headers)}
 			/>
-			<Stack style={{ height: '100%' }} gap={0}>
+			<Stack style={{ flex: 1, overflowY: 'auto' }} gap={0}>
 				<Group
 					gap={8}
 					style={{ display: 'flex', justifyContent: 'flex-start', padding: '0 1rem', marginBottom: '0.3rem' }}>
@@ -272,7 +272,7 @@ const ColumnsList = (props: { isLoading: boolean }) => {
 						Clear All
 					</Text>
 				</Group>
-				<ScrollArea scrollbars="y">
+				<ScrollArea style={{ flex: 1 }}>
 					<DragDropContext onDragEnd={onDropEnd}>
 						<Droppable droppableId="columns">
 							{(provided) => (
@@ -304,7 +304,7 @@ const ColumnsList = (props: { isLoading: boolean }) => {
 	);
 };
 
-const LogsViewConfig = (props: { schemaLoading: boolean; logsLoading: boolean; infoLoading: boolean }) => {
+const LogsViewConfig = (props: { isFetchingCount: boolean; logsLoading: boolean; isStoreSyncing: boolean }) => {
 	const [configViewType] = useLogsStore((store) => store.tableOpts.configViewType);
 	const [maximized] = useAppStore((store) => store.maximized);
 	const [{ sideBarOpen }, setStreamStore] = useStreamStore((store) => store);
@@ -323,15 +323,18 @@ const LogsViewConfig = (props: { schemaLoading: boolean; logsLoading: boolean; i
 			ref={divRef}
 			style={{
 				borderRight: '1px solid var(--mantine-color-gray-2)',
+				display: sideBarOpen ? 'none' : 'block',
 				width: sideBarOpen ? 0 : LOGS_CONFIG_SIDEBAR_WIDTH,
 				transition: 'width 0.5s',
 			}}>
-			<Stack style={{ width: LOGS_CONFIG_SIDEBAR_WIDTH, height: height - 30 }} className={classes.container}>
+			<Stack
+				style={{ width: LOGS_CONFIG_SIDEBAR_WIDTH, height: height - 30, overflowY: 'hidden', flex: 1 }}
+				className={classes.container}>
 				<Header />
 				{configViewType === 'schema' ? (
-					<SchemaList isLoading={props.schemaLoading || props.infoLoading} />
+					<SchemaList isLoading={props.isFetchingCount || props.isStoreSyncing} />
 				) : (
-					<ColumnsList isLoading={props.logsLoading || props.infoLoading} />
+					<ColumnsList isLoading={props.logsLoading || props.isStoreSyncing || props.isFetchingCount} />
 				)}
 			</Stack>
 			<Stack className={classes.collapseBtn}>

src/pages/Stream/Views/Explore/StaticLogTable.tsx

@@ -376,7 +376,7 @@ const LogTable = (props: {
 		? PRIMARY_HEADER_HEIGHT + STREAM_PRIMARY_TOOLBAR_CONTAINER_HEIGHT + STREAM_SECONDARY_TOOLBAR_HRIGHT
 		: 0;
 
-	const showTableOrLoader = logsLoading || showTable || !errorMessage || !hasNoData;
+	const showTableOrLoader = (logsLoading || showTable || !errorMessage || !hasNoData) && !isFetchingCount;
 
 	return (
 		<TableContainer>
@@ -400,7 +400,7 @@ const LogTable = (props: {
 									background: 'white',
 									zIndex: 9,
 								}}>
-								{logsLoading && <LoadingView />}
+								{(logsLoading || isFetchingCount) && <LoadingView />}
 							</Box>
 							{hasNoData ? (
 								<EmptyBox message="No Matching Rows" />

src/pages/Stream/Views/Explore/useLogsFetcher.ts

@@ -3,50 +3,47 @@ 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;
 const { syncTimeRange } = appStoreReducers;
 
-const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean }) => {
-	const { schemaLoading, infoLoading } = props;
+const useLogsFetcher = (props: { isStoreSyncing: boolean }) => {
+	const { isStoreSyncing } = props;
 	const [currentStream] = useAppStore((store) => store.currentStream);
 	const [{ timeRange }, setAppStore] = useAppStore((store) => store);
 	const [{ tableOpts }, setLogsStore] = useLogsStore((store) => store);
-	const { currentOffset, currentPage, pageData } = tableOpts;
+	const { currentOffset, currentPage, pageData, totalCount } = 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 hasContentLoaded = !isCountLoading && !logsLoading && !isCountRefetching;
 	const hasNoData = hasContentLoaded && !errorMessage && pageData.length === 0;
 	const showTable = hasContentLoaded && !hasNoData && !errorMessage;
 
 	useEffect(() => {
 		setAppStore(syncTimeRange);
 		setLogsStore(setCleanStoreForStreamChange);
+		refetchCount();
 	}, [currentStream]);
 
 	useEffect(() => {
-		if (infoLoading || !firstEventAt) return;
+		if (isStoreSyncing || totalCount === 0) return;
 
 		if (currentPage === 0) {
 			getQueryData();
-			refetchCount();
 		}
-	}, [currentPage, currentStream, timeRange, infoLoading, firstEventAt]);
+	}, [currentPage, currentStream, timeRange, isStoreSyncing, totalCount]);
 
 	useEffect(() => {
-		if (infoLoading || !firstEventAt) return;
+		if (isStoreSyncing || totalCount === 0) return;
 
 		if (currentOffset !== 0 && currentPage !== 0) {
 			getQueryData();
 		}
-	}, [currentOffset, infoLoading, firstEventAt]);
+	}, [currentOffset, isStoreSyncing, totalCount]);
 
 	return {
-		logsLoading: infoLoading || logsLoading,
+		logsLoading: isStoreSyncing || logsLoading,
 		errorMessage,
 		hasContentLoaded,
 		hasNoData,

src/pages/Stream/Views/Manage/Alerts.tsx

@@ -656,7 +656,6 @@ const AlertList = (props: {
 
 const Alerts = (props: {
 	isLoading: boolean;
-	schemaLoading: boolean;
 	isError: boolean;
 	hasAlertsAccess: boolean;
 	updateAlerts: ({ config, onSuccess }: { config: any; onSuccess?: () => void }) => void;
@@ -685,11 +684,7 @@ const Alerts = (props: {
 			) : hideAlerts ? (
 				<RestrictedView msg={!props.isStandAloneMode ? 'Alerts is unavailable on distributed mode.' : ''} />
 			) : (
-				<AlertList
-					selectAlert={selectAlert}
-					isLoading={props.isLoading || props.schemaLoading}
-					updateAlerts={props.updateAlerts}
-				/>
+				<AlertList selectAlert={selectAlert} isLoading={props.isLoading} updateAlerts={props.updateAlerts} />
 			)}
 		</Stack>
 	);

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>
 	);
 };

src/pages/Stream/Views/Manage/Management.tsx

@@ -8,9 +8,10 @@ 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 }) => {
+const Management = () => {
 	const [currentStream] = useAppStore((store) => store.currentStream);
 	const [instanceConfig] = useAppStore((store) => store.instanceConfig);
 	const [userAccessMap] = useAppStore((store) => store.userAccessMap);
@@ -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%">
@@ -51,7 +53,6 @@ const Management = (props: { schemaLoading: boolean }) => {
 				</Stack>
 				<Alerts
 					isLoading={isAlertsLoading}
-					schemaLoading={props.schemaLoading}
 					updateAlerts={getStreamAlertsConfig.updateLogStreamAlerts}
 					isError={getStreamAlertsConfig.isError}
 					hasAlertsAccess={hasAlertsAccess}

src/pages/Stream/components/EventTimeLineGraph.tsx

@@ -11,7 +11,6 @@ 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 } = appStoreReducers;
 const { parseQuery } = filterStoreReducers;
@@ -268,18 +267,17 @@ const EventTimeLineGraph = () => {
 	const [currentStream] = useAppStore((store) => store.currentStream);
 	const [queryEngine] = useAppStore((store) => store.instanceConfig?.queryEngine);
 	const [appliedQuery] = useFilterStore((store) => store.appliedQuery);
+	const [{ totalCount }] = useLogsStore((store) => store.tableOpts);
 	const [{ activeMode, 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 || totalCount === 0) return;
 		const { modifiedEndTime, modifiedStartTime, compactType } = getModifiedTimeRange(startTime, endTime, interval);
 
 		const logsQuery = {
@@ -299,14 +297,14 @@ const EventTimeLineGraph = () => {
 			logsQuery,
 			query: graphQuery,
 		});
-	}, [localStream, startTime.toISOString(), endTime.toISOString(), custSearchQuery, firstEventAt]);
+	}, [localStream, startTime.toISOString(), endTime.toISOString(), custSearchQuery, totalCount]);
 
 	const isLoading = fetchQueryMutation.isLoading;
 	const avgEventCount = useMemo(() => calcAverage(fetchQueryMutation?.data), [fetchQueryMutation?.data]);
-	const graphData = useMemo(() => {
-		if (!firstEventAt) return null;
-		return parseGraphData(fetchQueryMutation?.data, avgEventCount, startTime, endTime, interval);
-	}, [fetchQueryMutation?.data, interval, firstEventAt]);
+	const graphData = useMemo(
+		() => parseGraphData(fetchQueryMutation?.data, avgEventCount, startTime, endTime, interval),
+		[fetchQueryMutation?.data, interval, totalCount],
+	);
 	const hasData = Array.isArray(graphData) && graphData.length !== 0;
 	const [, setAppStore] = useAppStore((_store) => null);
 	const setTimeRangeFromGraph = useCallback((barValue: any) => {