Skip to content

Commit 1c0a2e3

Browse files
praveen5959praveen5959
authored
fix: Removed /info call dependancy from explore page (#431)
1 parent a53b1c1 commit 1c0a2e3

File tree

5 files changed

+42
-45
lines changed

5 files changed

+42
-45
lines changed

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

+4-7
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ 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';
76
import useParamsController from '@/pages/Stream/hooks/useParamsController';
87
import _ from 'lodash';
98

@@ -18,8 +17,6 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean })
1817
const [{ tableOpts }, setLogsStore] = useLogsStore((store) => store);
1918
const { currentOffset, currentPage, pageData } = tableOpts;
2019
const { getQueryData, loading: logsLoading, queryLogsError } = useQueryLogs();
21-
const [{ info }] = useStreamStore((store) => store);
22-
const firstEventAt = 'first-event-at' in info ? info['first-event-at'] : undefined;
2320

2421
const { refetchCount, countLoading } = useFetchCount();
2522
const hasContentLoaded = schemaLoading === false && logsLoading === false;
@@ -33,21 +30,21 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean })
3330
}, [currentStream]);
3431

3532
useEffect(() => {
36-
if (infoLoading || !firstEventAt) return;
33+
if (infoLoading) return;
3734

3835
if (currentPage === 0) {
3936
getQueryData();
4037
refetchCount();
4138
}
42-
}, [currentPage, currentStream, timeRange, infoLoading, firstEventAt]);
39+
}, [currentPage, currentStream, timeRange, infoLoading]);
4340

4441
useEffect(() => {
45-
if (infoLoading || !firstEventAt) return;
42+
if (infoLoading) return;
4643

4744
if (currentOffset !== 0 && currentPage !== 0) {
4845
getQueryData();
4946
}
50-
}, [currentOffset, infoLoading, firstEventAt]);
47+
}, [currentOffset, infoLoading]);
5148

5249
return {
5350
logsLoading: infoLoading || logsLoading,

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

+32-20
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { Group, Stack, Text } from '@mantine/core';
1+
import { Group, Loader, 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';
910

1011
const { formatDateWithTimezone } = timeRangeUtils;
1112

@@ -42,7 +43,7 @@ const InfoItem = (props: { title: string; value: string; fullWidth?: boolean })
4243
);
4344
};
4445

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

@@ -59,33 +60,44 @@ const InfoData = () => {
5960

6061
return (
6162
<Stack style={{ flex: 1 }}>
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} />
63+
{props.isLoading ? (
64+
<Stack style={{ flex: 1, width: '100%', alignItems: 'center', justifyContent: 'center' }}>
65+
<Stack style={{ alignItems: 'center' }}>
66+
<Loader />
67+
</Stack>
6768
</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 : ''} />
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>
7290
</Stack>
73-
<Stack gap={0} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
74-
<UpdateCustomPartitionField
75-
currentStream={currentStream ? currentStream : ''}
76-
timePartition={timePartition}
77-
/>
78-
</Stack>
79-
</Stack>
91+
)}
8092
</Stack>
8193
);
8294
};
8395

84-
const Info = () => {
96+
const Info = (props: { isLoading: boolean; isError: boolean }) => {
8597
return (
8698
<Stack className={classes.sectionContainer} gap={0}>
8799
<Header />
88-
<InfoData />
100+
{props.isError ? <ErrorView /> : <InfoData isLoading={props.isLoading} />}
89101
</Stack>
90102
);
91103
};

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Stats from './Stats';
77
import { useLogStreamStats } from '@/hooks/useLogStreamStats';
88
import Info from './Info';
99
import DeleteStreamModal from '../../components/DeleteStreamModal';
10+
import { useGetStreamInfo } from '@/hooks/useGetStreamInfo';
1011
import { useRetentionQuery } from '@/hooks/useRetentionEditor';
1112
import { useHotTier } from '@/hooks/useHotTier';
1213

@@ -19,6 +20,7 @@ const Management = (props: { schemaLoading: boolean }) => {
1920
const getStreamAlertsConfig = useAlertsQuery(currentStream || '', hasAlertsAccess, isStandAloneMode);
2021
const getStreamStats = useLogStreamStats(currentStream || '');
2122
const getRetentionConfig = useRetentionQuery(currentStream || '', hasSettingsAccess);
23+
const getStreamInfo = useGetStreamInfo(currentStream || '', currentStream !== null);
2224
const hotTierFetch = useHotTier(currentStream || '', hasSettingsAccess);
2325

2426
// todo - handle loading and error states separately
@@ -34,7 +36,7 @@ const Management = (props: { schemaLoading: boolean }) => {
3436
isLoading={getStreamStats.getLogStreamStatsDataIsLoading}
3537
isError={getStreamStats.getLogStreamStatsDataIsError}
3638
/>
37-
<Info />
39+
<Info isLoading={getStreamInfo.getStreamInfoLoading} isError={getStreamInfo.getStreamInfoError} />
3840
</Stack>
3941
<Stack style={{ flexDirection: 'row', height: '57%' }} gap={24}>
4042
<Stack w="49.4%">

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

+2-7
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/Ap
1010
import { LogsResponseWithHeaders } from '@/@types/parseable/api/query';
1111
import _ from 'lodash';
1212
import timeRangeUtils from '@/utils/timeRangeUtils';
13-
import { useStreamStore } from '../providers/StreamProvider';
1413

1514
const { setTimeRange } = appStoreReducers;
1615
const { makeTimeRangeLabel } = timeRangeUtils;
@@ -163,15 +162,13 @@ const EventTimeLineGraph = () => {
163162
const [{ custSearchQuery }, setLogStore] = useLogsStore((store) => store.custQuerySearchState);
164163
const [{ interval, startTime, endTime }] = useAppStore((store) => store.timeRange);
165164
const [localStream, setLocalStream] = useState<string | null>('');
166-
const [{ info }] = useStreamStore((store) => store);
167-
const firstEventAt = 'first-event-at' in info ? info['first-event-at'] : undefined;
168165

169166
useEffect(() => {
170167
setLocalStream(currentStream);
171168
}, [currentStream]);
172169

173170
useEffect(() => {
174-
if (!localStream || localStream.length === 0 || !firstEventAt) return;
171+
if (!localStream || localStream.length === 0) return;
175172

176173
const totalMinutes = interval / (1000 * 60);
177174
const numBins = Math.trunc(totalMinutes < 10 ? totalMinutes : totalMinutes < 60 ? 10 : 60);
@@ -189,15 +186,13 @@ const EventTimeLineGraph = () => {
189186
dayjs(startTime).startOf('minute').toISOString(),
190187
dayjs(endTime).startOf('minute').toISOString(),
191188
custSearchQuery,
192-
firstEventAt,
193189
]);
194190

195191
const isLoading = fetchGraphDataMutation.isLoading;
196192
const avgEventCount = useMemo(() => calcAverage(fetchGraphDataMutation?.data), [fetchGraphDataMutation?.data]);
197193
const graphData = useMemo(() => {
198-
if (!firstEventAt) return null;
199194
return parseGraphData(fetchGraphDataMutation?.data, avgEventCount, interval);
200-
}, [fetchGraphDataMutation?.data, interval, firstEventAt]);
195+
}, [fetchGraphDataMutation?.data, interval]);
201196
const hasData = Array.isArray(graphData) && graphData.length !== 0;
202197
const [, setAppStore] = useAppStore((_store) => null);
203198
const setTimeRangeFromGraph = useCallback((barValue: any) => {

‎src/pages/Stream/index.tsx

+1-10
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import { Text } from '@mantine/core';
1717
import { RetryBtn } from '@/components/Button/Retry';
1818
import LogsView from './Views/Explore/LogsView';
1919
import { useGetStreamSchema } from '@/hooks/useGetLogStreamSchema';
20-
import { useGetStreamInfo } from '@/hooks/useGetStreamInfo';
2120
import useParamsController from './hooks/useParamsController';
2221

2322
const { streamChangeCleanup, toggleSideBar } = streamStoreReducers;
@@ -45,10 +44,6 @@ const Stream: FC = () => {
4544
const [maximized] = useAppStore((store) => store.maximized);
4645
const [instanceConfig] = useAppStore((store) => store.instanceConfig);
4746
const [, setStreamStore] = useStreamStore((store) => store.sideBarOpen);
48-
const { getStreamInfoRefetch, getStreamInfoLoading, getStreamInfoRefetching } = useGetStreamInfo(
49-
currentStream || '',
50-
currentStream !== null,
51-
);
5247

5348
useHotkeys([['mod+/', () => setStreamStore((store) => toggleSideBar(store))]]);
5449

@@ -62,7 +57,6 @@ const Stream: FC = () => {
6257

6358
const fetchSchema = useCallback(() => {
6459
setStreamStore(streamChangeCleanup);
65-
getStreamInfoRefetch();
6660
refetchSchema();
6761
}, [currentStream]);
6862

@@ -71,7 +65,6 @@ const Stream: FC = () => {
7165
if (!_.isEmpty(currentStream)) {
7266
if (view === 'explore') {
7367
setStreamStore(streamChangeCleanup);
74-
getStreamInfoRefetch();
7568
} else {
7669
fetchSchema();
7770
}
@@ -85,9 +78,7 @@ const Stream: FC = () => {
8578
if (!_.includes(STREAM_VIEWS, view)) return null;
8679

8780
const isSchemaFetching = isSchemaRefetching || isSchemaLoading;
88-
const isInfoLoading =
89-
(!isStoreSynced || getStreamInfoLoading || getStreamInfoRefetching || instanceConfig === null) &&
90-
view === 'explore';
81+
const isInfoLoading = (!isStoreSynced || instanceConfig === null) && view === 'explore';
9182
return (
9283
<Box
9384
style={{

0 commit comments

Comments
 (0)