feat(logs): Add better loading state for flex time strategy (#102104)

Previously, the flex time strategy could result in a really long loading
state. This change shows a live progress with the bytes scanned in the
loading state to indicate we're still working on it.

Closes LOGS-438

Author: Zylphrex

static/app/utils/discover/eventView.tsx

@@ -69,6 +69,7 @@ export type MetaType = Record<string, any> & {
 export type EventsMetaType = {fields: Record<string, ColumnType>} & {
   units: Record<string, string>;
 } & {
+  bytesScanned?: number | null;
   dataScanned?: 'full' | 'partial';
   discoverSplitDecision?: WidgetType;
   isMetricsData?: boolean;

static/app/views/explore/logs/tables/logsInfiniteTable.tsx

@@ -1,3 +1,4 @@
+import type {CSSProperties} from 'react';
 import {Fragment, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -8,6 +9,7 @@ import {Button} from 'sentry/components/core/button';
 import {ExternalLink} from 'sentry/components/core/link';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
+import FileSize from 'sentry/components/fileSize';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import JumpButtons from 'sentry/components/replays/jumpButtons';
 import useJumpButtons from 'sentry/components/replays/useJumpButtons';
@@ -106,6 +108,7 @@ export function LogsInfiniteTable({
   const {infiniteLogsQueryResult} = useLogsPageData();
   const lastFetchTime = useRef<number | null>(null);
   const {
+    bytesScanned,
     isPending,
     isEmpty,
     meta,
@@ -385,7 +388,7 @@ export function LogsInfiniteTable({
             </TableRow>
           )}
           {/* Only render these in table for non-replay contexts */}
-          {!hasReplay && isPending && <LoadingRenderer />}
+          {!hasReplay && isPending && <LoadingRenderer bytesScanned={bytesScanned} />}
           {!hasReplay && isError && <ErrorRenderer />}
           {!hasReplay && isEmpty && (emptyRenderer ? emptyRenderer() : <EmptyRenderer />)}
           {!autoRefresh && !isPending && isFetchingPreviousPage && (
@@ -573,14 +576,41 @@ function ErrorRenderer() {
   );
 }
 
-export function LoadingRenderer({size}: {size?: number}) {
+export function LoadingRenderer({bytesScanned}: {bytesScanned?: number | null}) {
   return (
-    <TableStatus size={size}>
-      <LoadingIndicator size={size} />
+    <TableStatus>
+      <LoadingStateContainer>
+        <EmptyStateText size="md" textAlign="center">
+          <StyledLoadingIndicator margin="1em auto" />
+          {defined(bytesScanned) && bytesScanned > 0 && (
+            <Fragment>
+              {t('Searching for a needle in a haystack. This could take a while.')}
+              <br />
+              <span>
+                {tct('[bytesScanned] scanned', {
+                  bytesScanned: <FileSize bytes={bytesScanned} base={2} />,
+                })}
+              </span>
+            </Fragment>
+          )}
+        </EmptyStateText>
+      </LoadingStateContainer>
     </TableStatus>
   );
 }
 
+const LoadingStateContainer = styled('div')`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const StyledLoadingIndicator = styled(LoadingIndicator)<{
+  margin: CSSProperties['margin'];
+}>`
+  ${p => p.margin && `margin: ${p.margin}`};
+`;
+
 function HoveringRowLoadingRenderer({
   position,
   isEmbedded,

static/app/views/explore/logs/useLogsQuery.tsx

@@ -584,6 +584,27 @@ export function useInfiniteLogsQuery({
 
   const {virtualStreamedTimestamp} = useVirtualStreaming({data, highFidelity});
 
+  // Due to the way we prune empty pages, we cannot simply compute the sum of bytes scanned
+  // for all pages as most empty pages would have been evicted already.
+  //
+  // Instead, we watch the last page loaded, and keep a running sum that is reset when
+  // the last page is falsey which corresponds to a query change.
+  const [totalBytesScanned, setTotalBytesScanned] = useState(0);
+  const lastPage = data?.pages?.[data?.pages?.length - 1];
+  useEffect(() => {
+    if (!lastPage) {
+      setTotalBytesScanned(0);
+      return;
+    }
+
+    const bytesScanned = lastPage[0].meta?.bytesScanned;
+    if (!defined(bytesScanned)) {
+      return;
+    }
+
+    setTotalBytesScanned(previousBytesScanned => previousBytesScanned + bytesScanned);
+  }, [lastPage]);
+
   const _data = useMemo(() => {
     const usedRowIds = new Set();
     const filteredData =
@@ -694,6 +715,7 @@ export function useInfiniteLogsQuery({
     isFetchingNextPage: _data.length > 0 && (waitingToAutoFetch || isFetchingNextPage),
     isFetchingPreviousPage,
     lastPageLength,
+    bytesScanned: totalBytesScanned,
   };
 }
 

static/app/views/explore/logs/useLogsTimeseries.spec.tsx

@@ -100,6 +100,7 @@ describe('useLogsTimeseries', () => {
             isFetchingNextPage: false,
             isFetchingPreviousPage: false,
             lastPageLength: 0,
+            bytesScanned: 0,
           },
         }),
       {additionalWrapper: Wrapper}

static/app/views/explore/logs/useStreamingTimeseriesResult.spec.tsx

@@ -101,6 +101,7 @@ describe('useStreamingTimeseriesResult', () => {
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
       lastPageLength: logFixtures.length,
+      bytesScanned: 0,
     } as UseInfiniteLogsQueryResult;
   }
 

static/app/views/explore/tables/tracesTable/styles.tsx

@@ -1,3 +1,4 @@
+import type {CSSProperties} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -89,10 +90,12 @@ export const BreakdownPanelItem = styled(StyledPanelItem)<{highlightedSliceName:
 
 export const EmptyStateText = styled('div')<{
   size: 'xl' | 'md';
+  textAlign?: CSSProperties['textAlign'];
 }>`
   color: ${p => p.theme.subText};
   font-size: ${p => p.theme.fontSize[p.size]};
   padding-bottom: ${space(1)};
+  ${p => p.textAlign && `text-align: ${p.textAlign}`};
 `;
 
 export const EmptyValueContainer = styled('span')`