diff --git a/src/pages/Stream/Views/Explore/useLogsFetcher.ts b/src/pages/Stream/Views/Explore/useLogsFetcher.ts index 58433b6a..30fa0995 100644 --- 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 index d04aaf5a..64d20f08 100644 --- a/src/pages/Stream/Views/Manage/Info.tsx +++ b/src/pages/Stream/Views/Manage/Info.tsx @@ -1,4 +1,4 @@ -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'; @@ -6,6 +6,7 @@ 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 ( - - - - - + {props.isLoading ? ( + + + + - - - - + ) : ( + + + + + + + + + + + + + + - - - - + )} ); }; -const Info = () => { +const Info = (props: { isLoading: boolean; isError: boolean }) => { return (
- + {props.isError ? : } ); }; diff --git a/src/pages/Stream/Views/Manage/Management.tsx b/src/pages/Stream/Views/Manage/Management.tsx index 7ac8991b..9c993a9e 100644 --- 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} /> - + diff --git a/src/pages/Stream/components/EventTimeLineGraph.tsx b/src/pages/Stream/components/EventTimeLineGraph.tsx index d5f778ad..b988c770 100644 --- 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(''); - 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 index 7552e3a5..8cef3218 100644 --- 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 (