Skip to content
This repository was archived by the owner on May 13, 2025. It is now read-only.

Commit c731cea

Browse files
praveen5959praveen5959
authored
Moving the /info API call on stream load (#372)
1 parent 7ce20c0 commit c731cea

File tree

6 files changed

+40
-48
lines changed

6 files changed

+40
-48
lines changed

‎src/hooks/useGetStreamInfo.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const useGetStreamInfo = (currentStream: string, initialFetch: boolean) =
1818
} = useQuery(['stream-info', currentStream], () => getLogStreamInfo(currentStream), {
1919
retry: false,
2020
refetchOnWindowFocus: false,
21-
refetchOnMount: true,
21+
refetchOnMount: false,
2222
enabled: initialFetch,
2323
// currentStream !== '',
2424
onSuccess: (data) => {

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useEffect } from 'react';
33
import { useLogsStore, logsStoreReducers } from '../../providers/LogsProvider';
44
import { useQueryLogs } from '@/hooks/useQueryLogs';
55
import { useFetchCount } from '@/hooks/useQueryResult';
6+
import { useStreamStore } from '../../providers/StreamProvider';
67

78
const { setCleanStoreForStreamChange } = logsStoreReducers;
89

@@ -12,6 +13,9 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean })
1213
const [{ tableOpts, timeRange }, setLogsStore] = useLogsStore((store) => store);
1314
const { currentOffset, currentPage, pageData } = tableOpts;
1415
const { getQueryData, loading: logsLoading, error: errorMessage } = useQueryLogs();
16+
const [{ info }] = useStreamStore((store) => store);
17+
const firstEventAt = 'first-event-at' in info ? info['first-event-at'] : undefined;
18+
1519
const { refetchCount, isCountLoading, isCountRefetching } = useFetchCount();
1620
const hasContentLoaded = schemaLoading === false && logsLoading === false;
1721
const hasNoData = hasContentLoaded && !errorMessage && pageData.length === 0;
@@ -22,21 +26,21 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean })
2226
}, [currentStream]);
2327

2428
useEffect(() => {
25-
if (infoLoading) return;
29+
if (infoLoading || !firstEventAt) return;
2630

2731
if (currentPage === 0 && currentOffset === 0) {
2832
getQueryData();
2933
refetchCount();
3034
}
31-
}, [currentPage, currentStream, timeRange, infoLoading]);
35+
}, [currentPage, currentStream, timeRange, infoLoading, firstEventAt]);
3236

3337
useEffect(() => {
34-
if (infoLoading) return;
38+
if (infoLoading || !firstEventAt) return;
3539

3640
if (currentOffset !== 0 && currentPage !== 0) {
3741
getQueryData();
3842
}
39-
}, [currentOffset, infoLoading]);
43+
}, [currentOffset, infoLoading, firstEventAt]);
4044

4145
return {
4246
logsLoading: infoLoading || logsLoading,

‎src/pages/Stream/Views/Manage/Info.tsx

Lines changed: 20 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import { Group, Loader, Stack, Text } from '@mantine/core';
1+
import { Group, Stack, Text } from '@mantine/core';
22
import classes from '../../styles/Management.module.css';
33
import { useStreamStore } from '../../providers/StreamProvider';
44
import _ from 'lodash';
55
import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
66
import UpdateTimePartitionLimit from './UpdateTimePartitionLimit';
77
import UpdateCustomPartitionField from './UpdateCustomPartitionField';
88
import timeRangeUtils from '@/utils/timeRangeUtils';
9-
import ErrorView from './ErrorView';
109

1110
const { formatDateWithTimezone } = timeRangeUtils;
1211

@@ -43,7 +42,7 @@ const InfoItem = (props: { title: string; value: string; fullWidth?: boolean })
4342
);
4443
};
4544

46-
const InfoData = (props: { isLoading: boolean }) => {
45+
const InfoData = () => {
4746
const [info] = useStreamStore((store) => store.info);
4847
const [currentStream] = useAppStore((store) => store.currentStream);
4948

@@ -60,44 +59,33 @@ const InfoData = (props: { isLoading: boolean }) => {
6059

6160
return (
6261
<Stack style={{ flex: 1 }}>
63-
{props.isLoading ? (
64-
<Stack style={{ flex: 1, width: '100%', alignItems: 'center', justifyContent: 'center' }}>
65-
<Stack style={{ alignItems: 'center' }}>
66-
<Loader />
67-
</Stack>
62+
<Stack style={{ flex: 1, padding: '1.5rem', justifyContent: 'space-between' }}>
63+
<Stack gap={0} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
64+
<InfoItem title="Name" value={currentStream || ''} />
65+
<InfoItem title="Created At" value={createdAtWithTz} />
66+
<InfoItem title="First Event At" value={firstEventAtWithTz} />
6867
</Stack>
69-
) : (
70-
<Stack style={{ flex: 1, padding: '1.5rem', justifyContent: 'space-between' }}>
71-
<Stack gap={0} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
72-
<InfoItem title="Name" value={currentStream || ''} />
73-
<InfoItem title="Created At" value={createdAtWithTz} />
74-
<InfoItem title="First Event At" value={firstEventAtWithTz} />
75-
</Stack>
76-
<Stack gap={0} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
77-
<InfoItem title="Schema Type" value={staticSchemaFlag} />
78-
<InfoItem title="Time Partition Field" value={timePartition} />
79-
<UpdateTimePartitionLimit
80-
timePartition={timePartition}
81-
currentStream={currentStream ? currentStream : ''}
82-
/>
83-
</Stack>
84-
<Stack gap={0} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
85-
<UpdateCustomPartitionField
86-
currentStream={currentStream ? currentStream : ''}
87-
timePartition={timePartition}
88-
/>
89-
</Stack>
68+
<Stack gap={0} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
69+
<InfoItem title="Schema Type" value={staticSchemaFlag} />
70+
<InfoItem title="Time Partition Field" value={timePartition} />
71+
<UpdateTimePartitionLimit timePartition={timePartition} currentStream={currentStream ? currentStream : ''} />
9072
</Stack>
91-
)}
73+
<Stack gap={0} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
74+
<UpdateCustomPartitionField
75+
currentStream={currentStream ? currentStream : ''}
76+
timePartition={timePartition}
77+
/>
78+
</Stack>
79+
</Stack>
9280
</Stack>
9381
);
9482
};
9583

96-
const Info = (props: { isLoading: boolean; isError: boolean }) => {
84+
const Info = () => {
9785
return (
9886
<Stack className={classes.sectionContainer} gap={0}>
9987
<Header />
100-
{props.isError ? <ErrorView /> : <InfoData isLoading={props.isLoading} />}
88+
<InfoData />
10189
</Stack>
10290
);
10391
};

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { useLogStreamStats } from '@/hooks/useLogStreamStats';
88
import Info from './Info';
99
import DeleteStreamModal from '../../components/DeleteStreamModal';
1010
import { useRetentionQuery } from '@/hooks/useRetentionEditor';
11-
import { useGetStreamInfo } from '@/hooks/useGetStreamInfo';
1211
import { useHotTier } from '@/hooks/useHotTier';
1312

1413
const Management = (props: { schemaLoading: boolean }) => {
@@ -20,7 +19,6 @@ const Management = (props: { schemaLoading: boolean }) => {
2019
const getStreamAlertsConfig = useAlertsQuery(currentStream || '', hasAlertsAccess, isStandAloneMode);
2120
const getStreamStats = useLogStreamStats(currentStream || '');
2221
const getRetentionConfig = useRetentionQuery(currentStream || '', hasSettingsAccess);
23-
const getStreamInfo = useGetStreamInfo(currentStream || '', currentStream !== null);
2422
const hotTierFetch = useHotTier(currentStream || '', hasSettingsAccess);
2523

2624
// todo - handle loading and error states separately
@@ -36,7 +34,7 @@ const Management = (props: { schemaLoading: boolean }) => {
3634
isLoading={getStreamStats.getLogStreamStatsDataIsLoading}
3735
isError={getStreamStats.getLogStreamStatsDataIsError}
3836
/>
39-
<Info isLoading={getStreamInfo.getStreamInfoLoading} isError={getStreamInfo.getStreamInfoError} />
37+
<Info />
4038
</Stack>
4139
<Stack style={{ flexDirection: 'row', height: '57%' }} gap={24}>
4240
<Stack w="49.4%">

‎src/pages/Stream/components/EventTimeLineGraph.tsx

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { useFilterStore, filterStoreReducers } from '../providers/FilterProvider
1111
import { LogsResponseWithHeaders } from '@/@types/parseable/api/query';
1212
import _ from 'lodash';
1313
import timeRangeUtils from '@/utils/timeRangeUtils';
14+
import { useStreamStore } from '../providers/StreamProvider';
1415

1516
const { setTimeRange } = logsStoreReducers;
1617
const { parseQuery } = filterStoreReducers;
@@ -268,13 +269,15 @@ const EventTimeLineGraph = () => {
268269
const [{ activeMode, custSearchQuery }] = useLogsStore((store) => store.custQuerySearchState);
269270
const [{ interval, startTime, endTime }] = useLogsStore((store) => store.timeRange);
270271
const [localStream, setLocalStream] = useState<string | null>('');
272+
const [{ info }] = useStreamStore((store) => store);
273+
const firstEventAt = 'first-event-at' in info ? info['first-event-at'] : undefined;
271274

272275
useEffect(() => {
273276
setLocalStream(currentStream);
274277
}, [currentStream]);
275278

276279
useEffect(() => {
277-
if (!localStream || localStream.length === 0) return;
280+
if (!localStream || localStream.length === 0 || !firstEventAt) return;
278281
const { modifiedEndTime, modifiedStartTime, compactType } = getModifiedTimeRange(startTime, endTime, interval);
279282

280283
const logsQuery = {
@@ -294,14 +297,14 @@ const EventTimeLineGraph = () => {
294297
logsQuery,
295298
query: graphQuery,
296299
});
297-
}, [localStream, startTime.toISOString(), endTime.toISOString(), custSearchQuery]);
300+
}, [localStream, startTime.toISOString(), endTime.toISOString(), custSearchQuery, firstEventAt]);
298301

299302
const isLoading = fetchQueryMutation.isLoading;
300303
const avgEventCount = useMemo(() => calcAverage(fetchQueryMutation?.data), [fetchQueryMutation?.data]);
301-
const graphData = useMemo(
302-
() => parseGraphData(fetchQueryMutation?.data, avgEventCount, startTime, endTime, interval),
303-
[fetchQueryMutation?.data, interval],
304-
);
304+
const graphData = useMemo(() => {
305+
if (!firstEventAt) return null;
306+
return parseGraphData(fetchQueryMutation?.data, avgEventCount, startTime, endTime, interval);
307+
}, [fetchQueryMutation?.data, interval, firstEventAt]);
305308
const hasData = Array.isArray(graphData) && graphData.length !== 0;
306309
const [, setLogsStore] = useLogsStore((store) => store.timeRange);
307310
const setTimeRangeFromGraph = useCallback((barValue: any) => {

‎src/pages/Stream/index.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,10 @@ const Stream: FC = () => {
4545
const [maximized] = useAppStore((store) => store.maximized);
4646
const [instanceConfig] = useAppStore((store) => store.instanceConfig);
4747
const queryEngine = instanceConfig?.queryEngine;
48-
const getInfoFetchedOnMount = queryEngine === 'Parseable' ? false : currentStream !== null;
4948
const [sideBarOpen, setStreamStore] = useStreamStore((store) => store.sideBarOpen);
5049
const { getStreamInfoRefetch, getStreamInfoLoading, getStreamInfoRefetching } = useGetStreamInfo(
5150
currentStream || '',
52-
getInfoFetchedOnMount,
51+
currentStream !== null,
5352
);
5453

5554
const {

0 commit comments

Comments
 (0)