diff --git a/src/hooks/useGetLogStreamSchema.ts b/src/hooks/useGetLogStreamSchema.ts index ad72865a..bde33853 100644 --- a/src/hooks/useGetLogStreamSchema.ts +++ b/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); diff --git a/src/hooks/useGetStreamInfo.tsx b/src/hooks/useGetStreamInfo.tsx index 2ebdf72f..53672292 100644 --- a/src/hooks/useGetStreamInfo.tsx +++ b/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)); diff --git a/src/pages/Stream/Views/Explore/LogsView.tsx b/src/pages/Stream/Views/Explore/LogsView.tsx index 92601a78..03c8d2d6 100644 --- a/src/pages/Stream/Views/Explore/LogsView.tsx +++ b/src/pages/Stream/Views/Explore/LogsView.tsx @@ -12,11 +12,10 @@ import _ from 'lodash'; const { setPageAndPageData, setTargetPage, setTargetColumns, setDisabledColumns } = logsStoreReducers; const { toogleQueryParamsFlag } = filterStoreReducers; -const LogsView = (props: { schemaLoading: boolean; infoLoading: boolean }) => { +const LogsView = (props: { infoLoading: boolean }) => { const [, setFilterStore] = useFilterStore((store) => store); - const { schemaLoading, infoLoading } = props; + const { infoLoading } = props; const { errorMessage, hasNoData, showTable, isFetchingCount, logsLoading } = useLogsFetcher({ - schemaLoading, infoLoading, }); @@ -58,7 +57,7 @@ const LogsView = (props: { schemaLoading: boolean; infoLoading: boolean }) => { return ( {viewMode === 'table' && ( - + )} {viewMode === 'table' ? : } diff --git a/src/pages/Stream/Views/Explore/LogsViewConfig.tsx b/src/pages/Stream/Views/Explore/LogsViewConfig.tsx index 70b20691..fc3e62ab 100644 --- a/src/pages/Stream/Views/Explore/LogsViewConfig.tsx +++ b/src/pages/Stream/Views/Explore/LogsViewConfig.tsx @@ -254,7 +254,7 @@ const ColumnsList = (props: { isLoading: boolean }) => { onChangeHandler={onSearchHandler} disabled={_.isEmpty(headers)} /> - + @@ -272,7 +272,7 @@ const ColumnsList = (props: { isLoading: boolean }) => { Clear All - + {(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; infoLoading: 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', }}> - +
{configViewType === 'schema' ? ( - + ) : ( - + )} diff --git a/src/pages/Stream/Views/Explore/StaticLogTable.tsx b/src/pages/Stream/Views/Explore/StaticLogTable.tsx index 6ffec611..2eec2737 100644 --- a/src/pages/Stream/Views/Explore/StaticLogTable.tsx +++ b/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 ( @@ -400,7 +400,7 @@ const LogTable = (props: { background: 'white', zIndex: 9, }}> - {logsLoading && } + {(logsLoading || isFetchingCount) && } {hasNoData ? ( diff --git a/src/pages/Stream/Views/Explore/useLogsFetcher.ts b/src/pages/Stream/Views/Explore/useLogsFetcher.ts index 2d76ef57..e02c74cf 100644 --- a/src/pages/Stream/Views/Explore/useLogsFetcher.ts +++ b/src/pages/Stream/Views/Explore/useLogsFetcher.ts @@ -3,47 +3,44 @@ 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: { infoLoading: boolean }) => { + const { infoLoading } = 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 (infoLoading || totalCount === 0) return; if (currentPage === 0) { getQueryData(); - refetchCount(); } - }, [currentPage, currentStream, timeRange, infoLoading, firstEventAt]); + }, [currentPage, currentStream, timeRange, infoLoading, totalCount]); useEffect(() => { - if (infoLoading || !firstEventAt) return; + if (infoLoading || totalCount === 0) return; if (currentOffset !== 0 && currentPage !== 0) { getQueryData(); } - }, [currentOffset, infoLoading, firstEventAt]); + }, [currentOffset, infoLoading, totalCount]); return { logsLoading: infoLoading || logsLoading, diff --git a/src/pages/Stream/Views/Manage/Alerts.tsx b/src/pages/Stream/Views/Manage/Alerts.tsx index 2bd7ccbb..82d18e65 100644 --- a/src/pages/Stream/Views/Manage/Alerts.tsx +++ b/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 ? ( ) : ( - + )} ); 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..e7fbfbf1 100644 --- a/src/pages/Stream/Views/Manage/Management.tsx +++ b/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} /> - + @@ -51,7 +53,6 @@ const Management = (props: { schemaLoading: boolean }) => { { 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(''); - 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) => { diff --git a/src/pages/Stream/index.tsx b/src/pages/Stream/index.tsx index 40b0b762..e4e94d73 100644 --- a/src/pages/Stream/index.tsx +++ b/src/pages/Stream/index.tsx @@ -1,6 +1,6 @@ import { Box, Stack } from '@mantine/core'; import { useDocumentTitle, useHotkeys } from '@mantine/hooks'; -import { FC, useCallback, useEffect } from 'react'; +import { FC, useEffect } from 'react'; import LiveLogTable from './Views/LiveTail/LiveLogTable'; import ViewLog from './components/ViewLog'; import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider'; @@ -13,30 +13,11 @@ import { PRIMARY_HEADER_HEIGHT, SECONDARY_SIDEBAR_WIDTH } from '@/constants/them import PrimaryToolbar from './components/PrimaryToolbar'; import { useParams } from 'react-router-dom'; import { STREAM_VIEWS } from '@/constants/routes'; -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; -const ErrorView = (props: { error: string | null; onRetry: () => void }) => { - return ( - - - - {props.error || 'Error'} - - - - - - - ); -}; - const Stream: FC = () => { useDocumentTitle('Parseable | Stream'); const { view } = useParams(); @@ -44,38 +25,14 @@ const Stream: FC = () => { const { isStoreSynced } = useParamsController(); const [maximized] = useAppStore((store) => store.maximized); const [instanceConfig] = useAppStore((store) => store.instanceConfig); - const queryEngine = instanceConfig?.queryEngine; const [, setStreamStore] = useStreamStore((store) => store.sideBarOpen); - const { getStreamInfoRefetch, getStreamInfoLoading, getStreamInfoRefetching } = useGetStreamInfo( - currentStream || '', - currentStream !== null, - ); useHotkeys([['mod+/', () => setStreamStore((store) => toggleSideBar(store))]]); - const { - refetch: refetchSchema, - isLoading: isSchemaLoading, - errorMessage: schemaFetchErrorMessage, - isError: isSchemaError, - isRefetching: isSchemaRefetching, - } = useGetStreamSchema({ streamName: currentStream || '' }); - - const fetchSchema = useCallback(() => { - setStreamStore(streamChangeCleanup); - getStreamInfoRefetch(); - refetchSchema(); - }, [currentStream]); - useEffect(() => { if (isStoreSynced) { if (!_.isEmpty(currentStream)) { - if (view === 'explore' && queryEngine && queryEngine !== 'Parseable') { - setStreamStore(streamChangeCleanup); - getStreamInfoRefetch(); - } else { - fetchSchema(); - } + if (view === 'explore') setStreamStore(streamChangeCleanup); } } }, [isStoreSynced, currentStream]); @@ -85,10 +42,7 @@ const Stream: FC = () => { if (!currentStream) return null; 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 ( { {view === 'explore' && } {view === 'explore' ? ( - isSchemaError ? ( - - ) : ( - - ) + ) : view === 'live-tail' ? ( ) : ( - + )}