feat(ourlogs): Add manual refresh button and adjust infinite scroll (#97509)

### Summary
This adds a manual refresh button for users to click to avoid having to
leave the page on logs. This also fixes some problems with infinite
scroll introduced after the auto-refresh changes, and maintains a longer
time between requests when scrolling as it was too sensitive.

Author: k-fish

static/app/views/explore/contexts/logs/logsAutoRefreshContext.tsx

@@ -107,14 +107,6 @@ export function useLogsAutoRefreshContinued() {
   return autoRefresh === 'enabled' && pausedAtAllowedToContinue(pausedAt);
 }
 
-export function useAutorefreshEnabledOrWithinPauseWindow() {
-  const {autoRefresh, pausedAt} = useLogsAutoRefresh();
-  return (
-    autoRefresh === 'enabled' ||
-    (autoRefresh === 'paused' && withinPauseWindow(autoRefresh, pausedAt))
-  );
-}
-
 function withinPauseWindow(autoRefresh: AutoRefreshState, pausedAt: number | undefined) {
   return (
     (autoRefresh === 'paused' || autoRefresh === 'enabled') &&

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

@@ -75,5 +75,6 @@ export const LOGS_INSTRUCTIONS_URL =
 export const LOGS_FILTER_KEY_SECTIONS: FilterKeySection[] = [LOGS_FILTERS];
 
 export const VIRTUAL_STREAMED_INTERVAL_MS = 250;
+export const MINIMUM_INFINITE_SCROLL_FETCH_COOLDOWN_MS = 1000;
 
-export const LOGS_GRID_SCROLL_MIN_ITEM_THRESHOLD = 100; // Items from bottom of table to trigger table fetch.
+export const LOGS_GRID_SCROLL_MIN_ITEM_THRESHOLD = 50; // Items from bottom of table to trigger table fetch.

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

@@ -10,10 +10,11 @@ import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
 import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
 import {SearchQueryBuilderProvider} from 'sentry/components/searchQueryBuilder/context';
-import {IconChevron, IconTable} from 'sentry/icons';
+import {IconChevron, IconRefresh, IconTable} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {LogsAnalyticsPageSource} from 'sentry/utils/analytics/logsAnalyticsEvent';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
+import {type InfiniteData, useQueryClient} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
 import SchemaHintsList, {
   SchemaHintsSection,
@@ -63,7 +64,10 @@ import {
 import {LogsAggregateTable} from 'sentry/views/explore/logs/tables/logsAggregateTable';
 import {LogsInfiniteTable as LogsInfiniteTable} from 'sentry/views/explore/logs/tables/logsInfiniteTable';
 import {LogsTable} from 'sentry/views/explore/logs/tables/logsTable';
-import {OurLogKnownFieldKey} from 'sentry/views/explore/logs/types';
+import {
+  OurLogKnownFieldKey,
+  type OurLogsResponseItem,
+} from 'sentry/views/explore/logs/types';
 import {
   getIngestDelayFilterValue,
   getMaxIngestDelayTimestamp,
@@ -93,6 +97,7 @@ export function LogsTabContent({
   const fields = useLogsFields();
   const groupBy = useLogsGroupBy();
   const mode = useQueryParamsMode();
+  const queryClient = useQueryClient();
   const sortBys = useLogsAggregateSortBys();
   const setMode = useSetQueryParamsMode();
   const setFields = useSetLogsFields();
@@ -187,6 +192,23 @@ export function LogsTabContent({
     return [];
   }, []);
 
+  const refreshTable = useCallback(async () => {
+    queryClient.setQueryData(
+      tableData.queryKey,
+      (data: InfiniteData<OurLogsResponseItem[]>) => {
+        if (data?.pages) {
+          // We only want to keep the first page of data to avoid re-fetching multiple pages, since infinite query will otherwise fetch up to max pages (eg. 30) all at once.
+          return {
+            pages: data.pages.slice(0, 1),
+            pageParams: data.pageParams.slice(0, 1),
+          };
+        }
+        return data;
+      }
+    );
+    await tableData.refetch();
+  }, [tableData, queryClient]);
+
   const openColumnEditor = useCallback(() => {
     openModal(
       modalProps => (
@@ -319,6 +341,12 @@ export function LogsTabContent({
                 <Feature features="organizations:ourlogs-live-refresh">
                   <AutorefreshToggle averageLogsPerSecond={averageLogsPerSecond} />
                 </Feature>
+                <Button
+                  onClick={refreshTable}
+                  icon={<IconRefresh />}
+                  size="sm"
+                  aria-label={t('Refresh')}
+                />
                 <Button onClick={openColumnEditor} icon={<IconTable />} size="sm">
                   {t('Edit Table')}
                 </Button>

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

@@ -23,18 +23,18 @@ import {
   TableStatus,
   useTableStyles,
 } from 'sentry/views/explore/components/table';
-import {
-  useAutorefreshEnabledOrWithinPauseWindow,
-  useLogsAutoRefreshEnabled,
-} from 'sentry/views/explore/contexts/logs/logsAutoRefreshContext';
+import {useLogsAutoRefreshEnabled} from 'sentry/views/explore/contexts/logs/logsAutoRefreshContext';
 import {useLogsPageData} from 'sentry/views/explore/contexts/logs/logsPageData';
 import {
   useLogsFields,
   useLogsSearch,
   useLogsSortBys,
   useSetLogsSortBys,
 } from 'sentry/views/explore/contexts/logs/logsPageParams';
-import {LOGS_INSTRUCTIONS_URL} from 'sentry/views/explore/logs/constants';
+import {
+  LOGS_INSTRUCTIONS_URL,
+  MINIMUM_INFINITE_SCROLL_FETCH_COOLDOWN_MS,
+} from 'sentry/views/explore/logs/constants';
 import {
   FirstTableHeadCell,
   FloatingBackToTopContainer,
@@ -90,6 +90,7 @@ export function LogsInfiniteTable({
   const search = useLogsSearch();
   const autoRefresh = useLogsAutoRefreshEnabled();
   const {infiniteLogsQueryResult} = useLogsPageData();
+  const lastFetchTime = useRef<number | null>(null);
   const {
     isPending,
     isEmpty,
@@ -101,6 +102,7 @@ export function LogsInfiniteTable({
     isFetchingNextPage,
     isFetchingPreviousPage,
     lastPageLength,
+    isRefetching,
   } = infiniteLogsQueryResult;
 
   // Use filtered items if provided, otherwise use original data
@@ -113,10 +115,8 @@ export function LogsInfiniteTable({
     Record<string, number>
   >({});
   const [isFunctionScrolling, setIsFunctionScrolling] = useState(false);
-  const isAutorefreshEnabledOrWithinPauseWindow =
-    useAutorefreshEnabledOrWithinPauseWindow();
-  const scrollFetchDisabled =
-    isFunctionScrolling || !isAutorefreshEnabledOrWithinPauseWindow;
+  const autorefreshEnabled = useLogsAutoRefreshEnabled();
+  const scrollFetchDisabled = isFunctionScrolling || autorefreshEnabled;
 
   const sharedHoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const {initialTableStyles, onResizeMouseDown} = useTableStyles(fields, tableRef, {
@@ -203,7 +203,13 @@ export function LogsInfiniteTable({
         lastItemIndex &&
         lastItemIndex >= data?.length - getDynamicLogsNextFetchThreshold(lastPageLength)
       ) {
-        fetchNextPage();
+        if (
+          lastFetchTime.current === null ||
+          Date.now() - lastFetchTime.current > MINIMUM_INFINITE_SCROLL_FETCH_COOLDOWN_MS
+        ) {
+          fetchNextPage();
+          lastFetchTime.current = Date.now();
+        }
       }
     }
   }, [
@@ -217,6 +223,7 @@ export function LogsInfiniteTable({
     scrollOffset,
     isFunctionScrolling,
     scrollFetchDisabled,
+    lastFetchTime,
   ]);
 
   const handleExpand = useCallback((logItemId: string) => {
@@ -286,6 +293,7 @@ export function LogsInfiniteTable({
           {!autoRefresh && !isPending && isFetchingPreviousPage && (
             <HoveringRowLoadingRenderer position="top" />
           )}
+          {isRefetching && <HoveringRowLoadingRenderer position="top" />}
           {virtualItems.map(virtualRow => {
             const dataRow = data?.[virtualRow.index];
 

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

@@ -280,13 +280,16 @@ export function useLogsQuery({
 
   return {
     isPending: queryResult.isPending,
+    isRefetching: queryResult.isRefetching,
     isError: queryResult.isError,
     isLoading: queryResult.isLoading,
     queryResult,
     data: queryResult?.data?.data,
+    refetch: queryResult.refetch,
     infiniteData: queryResult?.data?.data,
     error: queryResult.error,
     meta: queryResult?.data?.meta,
+    queryKey,
     pageLinks: queryResult?.getResponseHeader?.('Link') ?? undefined,
   };
 }
@@ -552,7 +555,7 @@ export function useInfiniteLogsQuery({
     isFetching,
     isFetchingNextPage,
     isFetchingPreviousPage,
-    isPending,
+    refetch,
   } = queryResult;
 
   useEffect(() => {
@@ -636,22 +639,29 @@ export function useInfiniteLogsQuery({
   const _fetchNextPage = useCallback(
     () =>
       hasNextPage && nextPageHasData
-        ? !isFetchingNextPage && !isError && fetchNextPage()
+        ? !isFetching && !isError && fetchNextPage()
         : Promise.resolve(),
-    [hasNextPage, fetchNextPage, isFetchingNextPage, isError, nextPageHasData]
+    [hasNextPage, fetchNextPage, isFetching, isError, nextPageHasData]
   );
 
   return {
     error,
     isError,
     isFetching,
-    isPending,
+    isPending: queryResult.isPending,
     data: _data,
     meta: _meta,
-    isEmpty: !isPending && !isError && _data.length === 0,
+    isRefetching: queryResult.isRefetching,
+    isEmpty:
+      !queryResult.isPending &&
+      !queryResult.isRefetching &&
+      !isError &&
+      _data.length === 0,
     fetchNextPage: _fetchNextPage,
     fetchPreviousPage: _fetchPreviousPage,
+    refetch,
     hasNextPage,
+    queryKey: queryKeyWithInfinite,
     hasPreviousPage,
     isFetchingNextPage,
     isFetchingPreviousPage,

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

@@ -90,6 +90,9 @@ describe('useStreamingTimeseriesResult', () => {
       isEmpty: logFixtures.length === 0,
       fetchNextPage: jest.fn(),
       fetchPreviousPage: jest.fn(),
+      isRefetching: false,
+      refetch: jest.fn(),
+      queryKey: ['logs', 'infinite', 'infinite'],
       hasNextPage: false,
       hasPreviousPage: false,
       isFetchingNextPage: false,

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

@@ -255,8 +255,8 @@ export function logsPickableDays(organization: Organization): PickableDays {
 }
 
 export function getDynamicLogsNextFetchThreshold(lastPageLength: number) {
-  if (lastPageLength * 0.75 > LOGS_GRID_SCROLL_MIN_ITEM_THRESHOLD) {
-    return Math.floor(lastPageLength * 0.75); // Can be up to 750 on large pages.
+  if (lastPageLength * 0.25 > LOGS_GRID_SCROLL_MIN_ITEM_THRESHOLD) {
+    return Math.floor(lastPageLength * 0.25); // Can be up to 250 on large pages.
   }
   return LOGS_GRID_SCROLL_MIN_ITEM_THRESHOLD;
 }