feat(explore): Update spans confidence footer like logs (#102924)

This updates the confidence footer for spans to be more like logs using
matching/scanned/total counts for better context.

Author: Zylphrex

static/app/views/explore/components/chart/placeholder.tsx

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+
+const _OffsetContainer = styled('span')`
+  position: relative;
+  top: 2px;
+`;
+
+const _Placeholder = styled('div')<{width: number}>`
+  display: inline-block;
+  width: ${p => p.width}px;
+  height: ${p => p.theme.fontSize.md};
+  border-radius: ${p => p.theme.borderRadius};
+  background-color: ${p => p.theme.backgroundTertiary};
+`;
+
+interface PlaceholderProps {
+  width: number;
+}
+
+export function Placeholder({width}: PlaceholderProps) {
+  return (
+    <_OffsetContainer data-test-id="loading-placeholder">
+      <_Placeholder width={width} />
+    </_OffsetContainer>
+  );
+}

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

@@ -1,5 +1,3 @@
-import styled from '@emotion/styled';
-
 import {Tooltip} from 'sentry/components/core/tooltip';
 import Count from 'sentry/components/count';
 import {IconWarning} from 'sentry/icons';
@@ -10,14 +8,15 @@ import {
   Container,
   usePreviouslyLoaded,
 } from 'sentry/views/explore/components/chart/chartFooter';
+import {Placeholder} from 'sentry/views/explore/components/chart/placeholder';
 import type {ChartInfo} from 'sentry/views/explore/components/chart/types';
-import type {RawLogCounts} from 'sentry/views/explore/logs/useLogsQuery';
+import type {RawCounts} from 'sentry/views/explore/useRawCounts';
 
 interface ConfidenceFooterProps {
   chartInfo: ChartInfo;
   hasUserQuery: boolean;
   isLoading: boolean;
-  rawLogCounts: RawLogCounts;
+  rawLogCounts: RawCounts;
 }
 
 export function ConfidenceFooter({
@@ -46,7 +45,7 @@ export function ConfidenceFooter({
 interface ConfidenceMessageProps {
   hasUserQuery: boolean;
   isLoading: boolean;
-  rawLogCounts: RawLogCounts;
+  rawLogCounts: RawCounts;
   confidence?: Confidence;
   dataScanned?: 'full' | 'partial';
   isSampled?: boolean | null;
@@ -67,11 +66,7 @@ function ConfidenceMessage({
   const isTopN = defined(topEvents) && topEvents > 1;
 
   if (!defined(sampleCount) || isLoading) {
-    return (
-      <OffsetContainer>
-        <Placeholder width={180} />
-      </OffsetContainer>
-    );
+    return <Placeholder width={180} />;
   }
 
   const noSampling = defined(isSampled) && !isSampled;
@@ -86,9 +81,7 @@ function ConfidenceMessage({
       t('%s sample', <Count value={rawLogCounts.normal.count} />)
     )
   ) : (
-    <OffsetContainer>
-      <Placeholder width={40} />
-    </OffsetContainer>
+    <Placeholder width={40} />
   );
   const allLogsCount = rawLogCounts.highAccuracy.count ? (
     rawLogCounts.highAccuracy.count > 1 ? (
@@ -97,9 +90,7 @@ function ConfidenceMessage({
       t('%s log', <Count value={rawLogCounts.highAccuracy.count} />)
     )
   ) : (
-    <OffsetContainer>
-      <Placeholder width={40} />
-    </OffsetContainer>
+    <Placeholder width={40} />
   );
 
   if (dataScanned === 'full') {
@@ -134,11 +125,7 @@ function ConfidenceMessage({
 
   const downsampledTooltip = <DownsampledTooltip noSampling={noSampling} />;
 
-  const warning = (
-    <OffsetContainer>
-      <IconWarning size="sm" />
-    </OffsetContainer>
-  );
+  const warning = <IconWarning size="sm" />;
 
   if (isTopN) {
     return tct(
@@ -194,16 +181,3 @@ function DownsampledTooltip({
     </Tooltip>
   );
 }
-
-const Placeholder = styled('div')<{width: number}>`
-  display: inline-block;
-  width: ${p => p.width}px;
-  height: ${p => p.theme.fontSize.md};
-  border-radius: ${p => p.theme.borderRadius};
-  background-color: ${p => p.theme.backgroundTertiary};
-`;
-
-const OffsetContainer = styled('span')`
-  position: relative;
-  top: 2px;
-`;

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

@@ -34,7 +34,6 @@ import {
 } from 'sentry/views/explore/hooks/useChartInterval';
 import {TOP_EVENTS_LIMIT} from 'sentry/views/explore/hooks/useTopEvents';
 import {ConfidenceFooter} from 'sentry/views/explore/logs/confidenceFooter';
-import type {RawLogCounts} from 'sentry/views/explore/logs/useLogsQuery';
 import {
   useQueryParamsAggregateFields,
   useQueryParamsAggregateSortBys,
@@ -49,6 +48,7 @@ import {isGroupBy} from 'sentry/views/explore/queryParams/groupBy';
 import {Mode} from 'sentry/views/explore/queryParams/mode';
 import {isVisualize, type Visualize} from 'sentry/views/explore/queryParams/visualize';
 import {EXPLORE_CHART_TYPE_OPTIONS} from 'sentry/views/explore/spans/charts';
+import type {RawCounts} from 'sentry/views/explore/useRawCounts';
 import {
   combineConfidenceForSeries,
   prettifyAggregation,
@@ -58,7 +58,7 @@ import type {useSortedTimeSeries} from 'sentry/views/insights/common/queries/use
 import {getAlertsUrl} from 'sentry/views/insights/common/utils/getAlertsUrl';
 
 interface LogsGraphProps {
-  rawLogCounts: RawLogCounts;
+  rawLogCounts: RawCounts;
   timeseriesResult: ReturnType<typeof useSortedTimeSeries>;
 }
 

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

@@ -12,6 +12,7 @@ import {SearchQueryBuilderProvider} from 'sentry/components/searchQueryBuilder/c
 import {IconChevron, IconEdit, IconRefresh} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {LogsAnalyticsPageSource} from 'sentry/utils/analytics/logsAnalyticsEvent';
+import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {parsePeriodToHours} from 'sentry/utils/duration/parsePeriodToHours';
 import {HOUR} from 'sentry/utils/formatters';
 import {useQueryClient, type InfiniteData} from 'sentry/utils/queryClient';
@@ -64,10 +65,7 @@ import {LogsAggregateTable} from 'sentry/views/explore/logs/tables/logsAggregate
 import {LogsInfiniteTable} from 'sentry/views/explore/logs/tables/logsInfiniteTable';
 import {type OurLogsResponseItem} from 'sentry/views/explore/logs/types';
 import {useLogsAggregatesTable} from 'sentry/views/explore/logs/useLogsAggregatesTable';
-import {
-  getMaxIngestDelayTimestamp,
-  useLogsRawCounts,
-} from 'sentry/views/explore/logs/useLogsQuery';
+import {getMaxIngestDelayTimestamp} from 'sentry/views/explore/logs/useLogsQuery';
 import {useLogsSearchQueryBuilderProps} from 'sentry/views/explore/logs/useLogsSearchQueryBuilderProps';
 import {useLogsTimeseries} from 'sentry/views/explore/logs/useLogsTimeseries';
 import {usePersistentLogsPageParameters} from 'sentry/views/explore/logs/usePersistentLogsPageParameters';
@@ -86,6 +84,7 @@ import {
   useSetQueryParamsMode,
 } from 'sentry/views/explore/queryParams/context';
 import {ColumnEditorModal} from 'sentry/views/explore/tables/columnEditorModal';
+import {useRawCounts} from 'sentry/views/explore/useRawCounts';
 import type {PickableDays} from 'sentry/views/explore/utils';
 
 // eslint-disable-next-line no-restricted-imports,boundaries/element-types
@@ -132,7 +131,7 @@ export function LogsTabContent({
     }
   }, [autorefreshEnabled]);
 
-  const rawLogCounts = useLogsRawCounts();
+  const rawLogCounts = useRawCounts({dataset: DiscoverDatasets.OURLOGS});
 
   const yAxes = useMemo(() => {
     const uniqueYAxes = new Set(visualizes.map(visualize => visualize.yAxis));

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

@@ -2,7 +2,6 @@ import {useCallback, useEffect, useMemo, useState} from 'react';
 import {logger} from '@sentry/react';
 
 import {type ApiResult} from 'sentry/api';
-import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import {useCaseInsensitivity} from 'sentry/components/searchQueryBuilder/hooks';
 import {defined} from 'sentry/utils';
 import {encodeSort, type EventsMetaType} from 'sentry/utils/discover/eventView';
@@ -11,7 +10,6 @@ import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import parseLinkHeader from 'sentry/utils/parseLinkHeader';
 import {
   fetchDataQuery,
-  useApiQuery,
   useInfiniteQuery,
   useQueryClient,
   type ApiQueryKey,
@@ -40,7 +38,6 @@ import {
 import {
   OurLogKnownFieldKey,
   type EventsLogsResult,
-  type LogsAggregatesResult,
 } from 'sentry/views/explore/logs/types';
 import {
   isRowVisibleInVirtualStream,
@@ -747,79 +744,3 @@ export function useLogsQueryHighFidelity() {
     sortBys[0]?.kind === 'desc'
   );
 }
-
-interface RawCount {
-  count: number | null;
-  isLoading: boolean;
-}
-
-export interface RawLogCounts {
-  highAccuracy: RawCount;
-  normal: RawCount;
-}
-
-export function useLogsRawCounts(): RawLogCounts {
-  const organization = useOrganization();
-  const {selection} = usePageFilters();
-
-  const baseQueryParams = {
-    dataset: DiscoverDatasets.OURLOGS,
-    project: selection.projects,
-    environment: selection.environments,
-    ...normalizeDateTimeParams(selection.datetime),
-    field: ['count(message)'],
-    disableAggregateExtrapolation: '1',
-  };
-
-  const normalScanQueryKey: ApiQueryKey = [
-    `/organizations/${organization.slug}/events/`,
-    {
-      query: {
-        ...baseQueryParams,
-        referrer: 'api.explore.logs.raw-count.normal',
-        sampling: SAMPLING_MODE.NORMAL,
-      },
-    },
-  ];
-
-  const normalScanResult = useApiQuery<LogsAggregatesResult>(normalScanQueryKey, {
-    enabled: true,
-    staleTime: 0,
-  });
-
-  const highestAccuracyScanQueryKey: ApiQueryKey = [
-    `/organizations/${organization.slug}/events/`,
-    {
-      query: {
-        ...baseQueryParams,
-        referrer: 'api.explore.logs.raw-count.high-accuracy',
-        sampling: SAMPLING_MODE.HIGH_ACCURACY,
-      },
-    },
-  ];
-
-  const highestAccuracyScanResult = useApiQuery<LogsAggregatesResult>(
-    highestAccuracyScanQueryKey,
-    {
-      enabled: true,
-      staleTime: 0,
-    }
-  );
-
-  const normalScanCount = (normalScanResult.data?.data?.[0]?.['count(message)'] ||
-    null) as number | null;
-  const highestAccuracyScanCount = (highestAccuracyScanResult.data?.data?.[0]?.[
-    'count(message)'
-  ] || null) as number | null;
-
-  return {
-    normal: {
-      isLoading: normalScanResult.isFetching,
-      count: normalScanCount,
-    },
-    highAccuracy: {
-      isLoading: highestAccuracyScanResult.isFetching,
-      count: highestAccuracyScanCount,
-    },
-  };
-}

static/app/views/explore/spans/charts/confidenceFooter.spec.tsx

@@ -20,7 +20,7 @@ describe('ConfidenceFooter', () => {
       );
 
       expect(screen.getByTestId('wrapper')).toHaveTextContent(
-        'Extrapolated from 100 span samples'
+        'Extrapolated from 100 spans'
       );
       await userEvent.hover(screen.getByText('100'));
       expect(
@@ -41,7 +41,7 @@ describe('ConfidenceFooter', () => {
       );
 
       expect(screen.getByTestId('wrapper')).toHaveTextContent(
-        'Top 5 groups extrapolated from 100 span samples'
+        'Extrapolated from 100 spans for top 5 groups'
       );
       await userEvent.hover(screen.getByText('100'));
       expect(
@@ -64,9 +64,7 @@ describe('ConfidenceFooter', () => {
         {wrapper: Wrapper}
       );
 
-      expect(screen.getByTestId('wrapper')).toHaveTextContent(
-        'Extrapolated from 100 span samples'
-      );
+      expect(screen.getByTestId('wrapper')).toHaveTextContent('Span count: 100');
     });
     it('renders for full scan with grouping', () => {
       render(
@@ -80,7 +78,7 @@ describe('ConfidenceFooter', () => {
       );
 
       expect(screen.getByTestId('wrapper')).toHaveTextContent(
-        'Top 5 groups extrapolated from 100 span samples'
+        'Span count for top 5 groups: 100'
       );
     });
   });
@@ -89,7 +87,7 @@ describe('ConfidenceFooter', () => {
     it('unextrapolated loading', () => {
       render(<ConfidenceFooter extrapolate={false} />, {wrapper: Wrapper});
 
-      expect(screen.getByTestId('wrapper')).toHaveTextContent('Span count: \u2026');
+      expect(screen.getByTestId('loading-placeholder')).toBeInTheDocument();
     });
 
     it('unextrapolated loaded', () => {
@@ -106,7 +104,7 @@ describe('ConfidenceFooter', () => {
       });
 
       expect(screen.getByTestId('wrapper')).toHaveTextContent(
-        'Top 5 groups span count: 100'
+        'Span count for top 5 groups: 100'
       );
     });
   });