diff --git a/static/app/views/explore/charts/index.tsx b/static/app/views/explore/charts/index.tsx index be3aa9fbbf1a7d..cd7ff629874112 100644 --- a/static/app/views/explore/charts/index.tsx +++ b/static/app/views/explore/charts/index.tsx @@ -4,20 +4,25 @@ import styled from '@emotion/styled'; import isEqual from 'lodash/isEqual'; import {CompactSelect} from 'sentry/components/compactSelect'; +import Count from 'sentry/components/count'; import {Tooltip} from 'sentry/components/tooltip'; import {CHART_PALETTE} from 'sentry/constants/chartPalette'; import {IconClock, IconGraph} from 'sentry/icons'; -import {t} from 'sentry/locale'; +import {t, tct} from 'sentry/locale'; import {space} from 'sentry/styles/space'; -import type {Confidence} from 'sentry/types/organization'; +import type {Confidence, NewQuery} from 'sentry/types/organization'; +import {defined} from 'sentry/utils'; import {dedupeArray} from 'sentry/utils/dedupeArray'; +import EventView from 'sentry/utils/discover/eventView'; import { aggregateOutputType, parseFunction, prettifyParsedFunction, } from 'sentry/utils/discover/fields'; import {DiscoverDatasets} from 'sentry/utils/discover/types'; +import {formatPercentage} from 'sentry/utils/number/formatPercentage'; import {MutableSearch} from 'sentry/utils/tokenizeSearch'; +import usePageFilters from 'sentry/utils/usePageFilters'; import usePrevious from 'sentry/utils/usePrevious'; import {formatVersion} from 'sentry/utils/versions/formatVersion'; import ChartContextMenu from 'sentry/views/explore/components/chartContextMenu'; @@ -30,6 +35,7 @@ import Chart, { } from 'sentry/views/insights/common/components/chart'; import ChartPanel from 'sentry/views/insights/common/components/chartPanel'; import {useSortedTimeSeries} from 'sentry/views/insights/common/queries/useSortedTimeSeries'; +import {useSpansQuery} from 'sentry/views/insights/common/queries/useSpansQuery'; import {CHART_HEIGHT} from 'sentry/views/insights/database/settings'; import {useGroupBys} from '../hooks/useGroupBys'; @@ -69,6 +75,11 @@ export function ExploreCharts({query, setConfidence, setError}: ExploreChartsPro const [resultMode] = useResultMode(); const topEvents = useTopEvents(); + const extrapolationMetaResults = useExtrapolationMeta({ + dataset, + query, + }); + const fields: string[] = useMemo(() => { if (resultMode === 'samples') { return []; @@ -334,6 +345,28 @@ export function ExploreCharts({query, setConfidence, setError}: ExploreChartsPro } showLegend /> + {dataset === DiscoverDatasets.SPANS_EAP_RPC && ( + + {defined(extrapolationMetaResults.data?.[0]?.['count_sample()']) && + defined( + extrapolationMetaResults.data?.[0]?.['avg_sample(sampling_rate)'] + ) + ? tct( + '*[sampleCount] samples extrapolated with an average sampling rate of [sampleRate]', + { + sampleCount: ( + + ), + sampleRate: formatPercentage( + extrapolationMetaResults.data[0]['avg_sample(sampling_rate)'] + ), + } + ) + : t('foo')} + + )} ); @@ -342,6 +375,43 @@ export function ExploreCharts({query, setConfidence, setError}: ExploreChartsPro ); } +function useExtrapolationMeta({ + dataset, + query, +}: { + dataset: DiscoverDatasets; + query: string; +}) { + const {selection} = usePageFilters(); + + const extrapolationMetaEventView = useMemo(() => { + const search = new MutableSearch(query); + + // Filtering out all spans with op like 'ui.interaction*' which aren't + // embedded under transactions. The trace view does not support rendering + // such spans yet. + search.addFilterValues('!transaction.span_id', ['00']); + + const discoverQuery: NewQuery = { + id: undefined, + name: 'Explore - Extrapolation Meta', + fields: ['count_sample()', 'avg_sample(sampling_rate)', 'min(sampling_rate)'], + query: search.formatString(), + version: 2, + dataset, + }; + + return EventView.fromNewQueryWithPageFilters(discoverQuery, selection); + }, [dataset, query, selection]); + + return useSpansQuery({ + eventView: extrapolationMetaEventView, + initialData: [], + referrer: 'api.explore.spans-extrapolation-meta', + enabled: dataset === DiscoverDatasets.SPANS_EAP_RPC, + }); +} + const ChartContainer = styled('div')` display: grid; gap: 0; @@ -371,3 +441,11 @@ const ChartLabel = styled('div')` align-content: center; margin-right: ${space(1)}; `; + +const ChartFooter = styled('div')` + color: ${p => p.theme.gray300}; + font-size: ${p => p.theme.fontSizeSmall}; + display: inline-block; + margin-top: ${space(1.5)}; + margin-bottom: 0; +`;