ref(custom-metrics): Remove metrics summary (#82360)

Remove usage of `__metrics_summary` in FE.

Closes https://github.com/getsentry/sentry/issues/82080

static/app/components/events/eventEntries.tsx

@@ -8,11 +8,10 @@ import EventReplay from 'sentry/components/events/eventReplay';
 import {EventGroupingInfoSection} from 'sentry/components/events/groupingInfo/groupingInfoSection';
 import {ActionableItems} from 'sentry/components/events/interfaces/crashContent/exception/actionableItems';
 import {actionableItemsEnabled} from 'sentry/components/events/interfaces/crashContent/exception/useActionableItems';
-import {CustomMetricsEventData} from 'sentry/components/metrics/customMetricsEventData';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Entry, Event} from 'sentry/types/event';
-import {EntryType, EventOrGroupType} from 'sentry/types/event';
+import {EntryType} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import type {Organization, SharedViewOrganization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
@@ -119,13 +118,6 @@ function EventEntries({
       {!isShare && <EventViewHierarchy event={event} project={project} />}
       {!isShare && <EventAttachments event={event} project={project} group={group} />}
       <EventSdk sdk={event.sdk} meta={event._meta?.sdk} />
-      {event.type === EventOrGroupType.TRANSACTION && event._metrics_summary && (
-        <CustomMetricsEventData
-          projectId={event.projectID}
-          metricsSummary={event._metrics_summary}
-          startTimestamp={event.startTimestamp}
-        />
-      )}
       {!isShare && event.groupID && (
         <EventGroupingInfoSection
           projectSlug={projectSlug}

static/app/components/events/interfaces/spans/newTraceDetailsSpanBar.tsx

@@ -23,7 +23,6 @@ import {
   DividerLine,
   DividerLineGhostContainer,
   ErrorBadge,
-  MetricsBadge,
   ProfileBadge,
 } from 'sentry/components/performance/waterfall/rowDivider';
 import {
@@ -54,7 +53,6 @@ import {defined} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {browserHistory} from 'sentry/utils/browserHistory';
 import {generateEventSlug} from 'sentry/utils/discover/urls';
-import {hasMetricsExperimentalFeature} from 'sentry/utils/metrics/features';
 import toPercent from 'sentry/utils/number/toPercent';
 import type {QuickTraceContextChildrenProps} from 'sentry/utils/performance/quickTrace/quickTraceContext';
 import type {
@@ -694,15 +692,6 @@ export class NewTraceDetailsSpanBar extends Component<
     return errors?.length ? <ErrorBadge /> : null;
   }
 
-  renderMetricsBadge(span: NewTraceDetailsSpanBarProps['span']): React.ReactNode {
-    const hasMetrics =
-      '_metrics_summary' in span && Object.keys(span._metrics_summary ?? {}).length > 0;
-
-    return hasMetrics && hasMetricsExperimentalFeature(this.props.organization) ? (
-      <MetricsBadge />
-    ) : null;
-  }
-
   renderEmbeddedTransactionsBadge(
     transactions: QuickTraceEvent[] | null
   ): React.ReactNode {
@@ -868,7 +857,6 @@ export class NewTraceDetailsSpanBar extends Component<
         </RowCell>
         <DividerContainer>
           {this.renderDivider(dividerHandlerChildrenProps)}
-          {this.renderMetricsBadge(this.props.span)}
           {this.renderErrorBadge(errors)}
           {this.renderEmbeddedTransactionsBadge(transactions)}
           {this.renderMissingInstrumentationProfileBadge()}

static/app/components/events/interfaces/spans/newTraceDetailsSpanDetails.tsx

@@ -12,7 +12,6 @@ import SpanSummaryButton from 'sentry/components/events/interfaces/spans/spanSum
 import FileSize from 'sentry/components/fileSize';
 import ExternalLink from 'sentry/components/links/externalLink';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import {CustomMetricsEventData} from 'sentry/components/metrics/customMetricsEventData';
 import Pill from 'sentry/components/pill';
 import Pills from 'sentry/components/pills';
 import {TransactionToProfileButton} from 'sentry/components/profiling/transactionToProfileButton';
@@ -580,13 +579,6 @@ function NewTraceDetailsSpanDetail(props: SpanDetailProps) {
               })}
             </tbody>
           </table>
-          {span._metrics_summary ? (
-            <CustomMetricsEventData
-              projectId={event.projectID}
-              metricsSummary={span._metrics_summary}
-              startTimestamp={span.start_timestamp}
-            />
-          ) : null}
         </SpanDetails>
       </Fragment>
     );

static/app/components/events/interfaces/spans/spanDetail.tsx

@@ -12,7 +12,6 @@ import FileSize from 'sentry/components/fileSize';
 import ExternalLink from 'sentry/components/links/externalLink';
 import Link from 'sentry/components/links/link';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import {CustomMetricsEventData} from 'sentry/components/metrics/customMetricsEventData';
 import {
   ErrorDot,
   ErrorLevel,
@@ -578,13 +577,6 @@ function SpanDetail(props: Props) {
               ))}
             </tbody>
           </table>
-          {span._metrics_summary && (
-            <CustomMetricsEventData
-              projectId={event.projectID}
-              metricsSummary={span._metrics_summary}
-              startTimestamp={span.start_timestamp}
-            />
-          )}
         </SpanDetails>
       </Fragment>
     );

static/app/components/events/interfaces/spans/types.tsx

@@ -48,7 +48,6 @@ export type RawSpanType = {
   // this is essentially end_timestamp
   timestamp: number;
   trace_id: string;
-  _metrics_summary?: MetricsSummary;
   data?: SpanSourceCodeAttributes & SpanDatabaseAttributes & Record<string, any>;
   description?: string;
   exclusive_time?: number;
@@ -102,7 +101,6 @@ export const rawSpanKeys: Set<keyof RawSpanType> = new Set([
   'tags',
   'hash',
   'exclusive_time',
-  '_metrics_summary',
 ]);
 
 export type OrphanSpanType = RawSpanType & {

static/app/components/metrics/customMetricsEventData.spec.tsx

@@ -1,317 +0,0 @@
-import {OrganizationFixture} from 'sentry-fixture/organization';
-
-import {render, screen} from 'sentry-test/reactTestingLibrary';
-import {textWithMarkupMatcher} from 'sentry-test/utils';
-
-import type {MetricsSummary} from 'sentry/components/events/interfaces/spans/types';
-import {CustomMetricsEventData} from 'sentry/components/metrics/customMetricsEventData';
-import type {
-  MetricsQueryApiResponse,
-  MetricsQueryApiResponseLastMeta,
-} from 'sentry/types/metrics';
-
-const organization = OrganizationFixture({features: ['custom-metrics']});
-
-describe('CustomMetricsEventData', () => {
-  beforeEach(() => {
-    MockApiClient.addMockResponse({
-      url: `/organizations/${organization.slug}/metrics/query/`,
-      method: 'POST',
-      body: {
-        data: [[{by: {}, series: [], totals: 2}]],
-        meta: [
-          [
-            {
-              unit: 'nanoseconds',
-              scaling_factor: 1000000,
-              group_bys: {},
-              limit: null,
-              order: 'asc',
-            } as MetricsQueryApiResponseLastMeta,
-          ],
-        ],
-        end: '2023-09-01T01:00:00Z',
-        intervals: [],
-        start: '2023-09-01T00:00:00Z',
-      } satisfies MetricsQueryApiResponse,
-    });
-  });
-
-  it('renders empty (no feature flag)', () => {
-    const metricsSummary: MetricsSummary = {
-      'd:custom/my.metric@second': [
-        {
-          count: 2,
-          min: 1,
-          max: 2,
-          sum: 3,
-          tags: {
-            foo: 'bar',
-          },
-        },
-      ],
-    };
-
-    const {container} = render(
-      <CustomMetricsEventData
-        metricsSummary={metricsSummary}
-        startTimestamp={1706189398.176}
-        projectId="1"
-      />
-    );
-    expect(container).toBeEmptyDOMElement();
-  });
-
-  it('renders empty (no data)', () => {
-    const {container} = render(
-      <CustomMetricsEventData
-        metricsSummary={{}}
-        startTimestamp={1706189398.176}
-        projectId="1"
-      />,
-      {
-        organization,
-      }
-    );
-    expect(container).toBeEmptyDOMElement();
-  });
-
-  it('renders (all information)', () => {
-    // This test fails without the mock below, because a nested component uses @container query
-    // that is not supported by the version of jsdom currently used by jest.
-    jest.spyOn(console, 'error').mockImplementation();
-
-    const metricsSummary: MetricsSummary = {
-      'd:custom/my.metric@second': [
-        {
-          count: 2,
-          min: 1,
-          max: 2,
-          sum: 3,
-          tags: {
-            foo: 'bar',
-          },
-        },
-      ],
-    };
-
-    render(
-      <CustomMetricsEventData
-        metricsSummary={metricsSummary}
-        startTimestamp={1706189398.176}
-        projectId="1"
-      />,
-      {
-        organization,
-      }
-    );
-
-    expect(screen.getByText('Custom Metrics')).toBeInTheDocument();
-
-    expect(screen.getByText('my.metric')).toBeInTheDocument();
-    expect(screen.getByRole('link', {name: 'View Metric'})).toBeInTheDocument();
-
-    expect(screen.getByText(textWithMarkupMatcher(/Value: 1\.5s/))).toBeInTheDocument();
-
-    expect(screen.getByText(/Tags: foo:bar/)).toBeInTheDocument();
-  });
-
-  it('renders (counter metric)', () => {
-    const metricsSummary: MetricsSummary = {
-      'c:custom/my.metric@second': [
-        {
-          count: 1,
-          min: 1,
-          max: 1,
-          sum: 1,
-          tags: {
-            foo: 'bar',
-          },
-        },
-      ],
-    };
-
-    render(
-      <CustomMetricsEventData
-        metricsSummary={metricsSummary}
-        startTimestamp={1706189398.176}
-        projectId="1"
-      />,
-      {organization}
-    );
-
-    expect(screen.getByText('Custom Metrics')).toBeInTheDocument();
-
-    expect(screen.getByText('my.metric')).toBeInTheDocument();
-    expect(screen.getByRole('link', {name: 'View Metric'})).toBeInTheDocument();
-
-    expect(screen.getByText(textWithMarkupMatcher(/Count: 1/))).toBeInTheDocument();
-
-    expect(screen.getByText(/Tags: foo:bar/)).toBeInTheDocument();
-  });
-
-  it('renders (no tags)', async () => {
-    const metricsSummary: MetricsSummary = {
-      'c:custom/my.metric@second': [
-        {
-          count: 1,
-          min: 1,
-          max: 1,
-          sum: 1,
-          tags: null,
-        },
-      ],
-    };
-
-    render(
-      <CustomMetricsEventData
-        metricsSummary={metricsSummary}
-        startTimestamp={1706189398.176}
-        projectId="1"
-      />,
-      {
-        organization,
-      }
-    );
-
-    expect(screen.getByText('Custom Metrics')).toBeInTheDocument();
-
-    expect(screen.getByText('my.metric')).toBeInTheDocument();
-    expect(screen.getByRole('link', {name: 'View Metric'})).toBeInTheDocument();
-    expect(screen.getByText(textWithMarkupMatcher(/Count: 1/))).toBeInTheDocument();
-
-    expect(
-      await screen.findByText(textWithMarkupMatcher(/Tags: \(none\)/))
-    ).toBeInTheDocument();
-  });
-
-  it('renders (empty tags)', async () => {
-    const metricsSummary: MetricsSummary = {
-      'c:custom/my.metric@second': [
-        {
-          count: 1,
-          min: 1,
-          max: 1,
-          sum: 1,
-          tags: {},
-        },
-      ],
-    };
-
-    render(
-      <CustomMetricsEventData
-        metricsSummary={metricsSummary}
-        startTimestamp={1706189398.176}
-        projectId="1"
-      />,
-      {
-        organization,
-      }
-    );
-
-    expect(screen.getByText('Custom Metrics')).toBeInTheDocument();
-
-    expect(screen.getByText('my.metric')).toBeInTheDocument();
-    expect(screen.getByRole('link', {name: 'View Metric'})).toBeInTheDocument();
-    expect(screen.getByText(textWithMarkupMatcher(/Count: 1/))).toBeInTheDocument();
-
-    expect(
-      await screen.findByText(textWithMarkupMatcher(/Tags: \(none\)/))
-    ).toBeInTheDocument();
-  });
-
-  it('renders (multiple)', () => {
-    MockApiClient.addMockResponse({
-      url: `/organizations/${organization.slug}/metrics/query/`,
-      method: 'POST',
-      body: {
-        data: [
-          [{by: {}, series: [], totals: 2}],
-          [{by: {}, series: [], totals: 2}],
-          [{by: {}, series: [], totals: 2}],
-        ],
-        meta: [
-          [
-            {
-              unit: 'nanoseconds',
-              scaling_factor: 1000000,
-              group_bys: {},
-              limit: null,
-              order: 'asc',
-            } as MetricsQueryApiResponseLastMeta,
-          ],
-          [
-            {
-              unit: 'nanoseconds',
-              scaling_factor: null,
-              group_bys: {},
-              limit: null,
-              order: 'asc',
-            } as MetricsQueryApiResponseLastMeta,
-          ],
-          [
-            {
-              unit: 'nanoseconds',
-              scaling_factor: 1000000,
-              group_bys: {},
-              limit: null,
-              order: 'asc',
-            } as MetricsQueryApiResponseLastMeta,
-          ],
-        ],
-        end: '2023-09-01T01:00:00Z',
-        intervals: [],
-        start: '2023-09-01T00:00:00Z',
-      } satisfies MetricsQueryApiResponse,
-    });
-
-    const metricsSummary: MetricsSummary = {
-      'd:custom/my.distribution@second': [
-        {
-          count: 2,
-          min: 1,
-          max: 2,
-          sum: 3,
-          tags: {
-            foo: 'bar',
-          },
-        },
-        {
-          count: 1,
-          min: 1,
-          max: 1,
-          sum: 1,
-          tags: null,
-        },
-      ],
-      'c:custom/my.counter@second': [
-        {
-          count: 2,
-          min: 1,
-          max: 2,
-          sum: 3,
-          tags: {
-            foo: 'bar',
-          },
-        },
-      ],
-    };
-
-    render(
-      <CustomMetricsEventData
-        metricsSummary={metricsSummary}
-        startTimestamp={1706189398.176}
-        projectId="1"
-      />,
-      {
-        organization,
-      }
-    );
-
-    expect(screen.getByText('Custom Metrics')).toBeInTheDocument();
-
-    expect(screen.getByText('my.counter')).toBeInTheDocument();
-    expect(screen.getAllByText('my.distribution')).toHaveLength(2);
-    expect(screen.getAllByRole('link', {name: 'View Metric'})).toHaveLength(3);
-  });
-});

static/app/components/metrics/customMetricsEventData.tsx

@@ -1,482 +0,0 @@
-import {Fragment, useMemo} from 'react';
-import {useTheme} from '@emotion/react';
-import styled from '@emotion/styled';
-
-import MarkLine from 'sentry/components/charts/components/markLine';
-import ScatterSeries from 'sentry/components/charts/series/scatterSeries';
-import type {
-  MetricsSummary,
-  MetricsSummaryItem,
-} from 'sentry/components/events/interfaces/spans/types';
-import {Hovercard} from 'sentry/components/hovercard';
-import {KeyValueTable, KeyValueTableRow} from 'sentry/components/keyValueTable';
-import {MetricChart} from 'sentry/components/metrics/chart/chart';
-import type {Series} from 'sentry/components/metrics/chart/types';
-import {normalizeDateTimeString} from 'sentry/components/organizations/pageFilters/parse';
-import {IconInfo} from 'sentry/icons';
-import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
-import type {
-  MetricsQueryApiResponseLastMeta,
-  MetricType,
-  MRI,
-} from 'sentry/types/metrics';
-import type {Organization} from 'sentry/types/organization';
-import {defined} from 'sentry/utils';
-import {getDefaultAggregation, getMetricsUrl} from 'sentry/utils/metrics';
-import {hasCustomMetrics} from 'sentry/utils/metrics/features';
-import {formatMetricUsingUnit} from 'sentry/utils/metrics/formatters';
-import {formatMRI, isExtractedCustomMetric, parseMRI} from 'sentry/utils/metrics/mri';
-import {MetricDisplayType} from 'sentry/utils/metrics/types';
-import {useMetricsQuery} from 'sentry/utils/metrics/useMetricsQuery';
-import {middleEllipsis} from 'sentry/utils/string/middleEllipsis';
-import type {Color} from 'sentry/utils/theme';
-import useOrganization from 'sentry/utils/useOrganization';
-import {getSampleChartSymbol} from 'sentry/views/insights/common/views/spanSummaryPage/sampleList/durationChart/getSampleChartSymbol';
-import {getChartTimeseries} from 'sentry/views/metrics/widget';
-import {
-  type SectionCardKeyValueList,
-  TraceDrawerComponents,
-} from 'sentry/views/performance/newTraceDetails/traceDrawer/details/styles';
-
-function flattenMetricsSummary(
-  metricsSummary: MetricsSummary
-): {item: MetricsSummaryItem; mri: MRI}[] {
-  return (
-    Object.entries(metricsSummary) as [
-      keyof MetricsSummary,
-      MetricsSummary[keyof MetricsSummary],
-    ][]
-  )
-    .flatMap(([mri, items]) => (items || []).map(item => ({item, mri})))
-    .filter(entry => !isExtractedCustomMetric(entry));
-}
-
-function tagToQuery(tagKey: string, tagValue: string) {
-  return `${tagKey}:"${tagValue}"`;
-}
-
-export function eventHasCustomMetrics(
-  organization: Organization,
-  metricsSummary: MetricsSummary | undefined
-) {
-  return (
-    hasCustomMetrics(organization) &&
-    metricsSummary &&
-    flattenMetricsSummary(metricsSummary).length > 0
-  );
-}
-
-const HALF_HOUR_IN_MS = 30 * 60 * 1000;
-
-interface DataRow {
-  chartUnit: string;
-  metricType: MetricType;
-  metricUnit: string;
-  mri: MRI;
-  scalingFactor: number;
-  summaryItem: MetricsSummaryItem;
-  chartSeries?: Series;
-  deviation?: number;
-  deviationPercent?: number;
-  itemAvg?: number;
-  totalAvg?: number;
-}
-
-export function CustomMetricsEventData({
-  metricsSummary,
-  startTimestamp,
-  projectId,
-}: {
-  projectId: string;
-  startTimestamp: number;
-  metricsSummary?: MetricsSummary;
-}) {
-  const organization = useOrganization();
-
-  const start = new Date(startTimestamp * 1000 - HALF_HOUR_IN_MS).toISOString();
-  const end = new Date(startTimestamp * 1000 + HALF_HOUR_IN_MS).toISOString();
-
-  const metricsSummaryEntries = useMemo(
-    () => (metricsSummary ? flattenMetricsSummary(metricsSummary) : []),
-    [metricsSummary]
-  );
-
-  const queries = useMemo(
-    () =>
-      metricsSummaryEntries.map((entry, index) => ({
-        mri: entry.mri,
-        name: index.toString(),
-        aggregation: getDefaultAggregation(entry.mri),
-        query: Object.entries(entry.item.tags ?? {})
-          .map(([tagKey, tagValue]) => tagToQuery(tagKey, tagValue))
-          .join(' '),
-      })),
-    [metricsSummaryEntries]
-  );
-
-  const {data} = useMetricsQuery(queries, {
-    projects: [parseInt(projectId, 10)],
-    datetime: {start, end, period: null, utc: true},
-    environments: [],
-  });
-
-  const chartSeries = useMemo(
-    () =>
-      data
-        ? data.data.flatMap((entry, index) => {
-            // Splitting the response to treat it like individual requests
-            // TODO: improve utils for metric series generation
-            return getChartTimeseries(
-              {...data, data: [entry], meta: [data.meta[index]]},
-              [queries[index]],
-              {
-                showQuerySymbol: false,
-              }
-            );
-          })
-        : [],
-    [data, queries]
-  );
-
-  const dataRows = useMemo(
-    () =>
-      metricsSummaryEntries
-        .map<DataRow>((entry, index) => {
-          const entryData = data?.data?.[index][0];
-          const dataMeta = data?.meta?.[index];
-          const lastMeta = dataMeta?.[
-            dataMeta?.length - 1
-          ] as MetricsQueryApiResponseLastMeta;
-          const parsedMRI = parseMRI(entry.mri);
-          const type = parsedMRI?.type || 'c';
-          const unit = parsedMRI?.unit || 'none';
-          const summaryItem = entry.item;
-          const scalingFactor = lastMeta?.scaling_factor || 1;
-          const totalAvg = entryData?.totals;
-          const itemAvg =
-            summaryItem.sum && summaryItem.count
-              ? summaryItem.sum / summaryItem.count
-              : undefined;
-          const deviation =
-            itemAvg && totalAvg ? itemAvg - totalAvg / scalingFactor : undefined;
-          const deviationPercent =
-            deviation && totalAvg ? deviation / (totalAvg / scalingFactor) : undefined;
-
-          return {
-            mri: entry.mri,
-            itemAvg,
-            totalAvg,
-            scalingFactor,
-            chartSeries: chartSeries[index],
-            chartUnit: lastMeta?.unit ?? 'none',
-            metricType: type,
-            metricUnit: unit,
-            summaryItem,
-            deviation,
-            deviationPercent,
-          };
-        })
-        .sort((a, b) => {
-          // Counters should be on bottom
-          if (a.metricType === 'c' && b.metricType !== 'c') {
-            return 1;
-          }
-
-          if (a.metricType !== 'c' && b.metricType === 'c') {
-            return -1;
-          }
-
-          // Sort by highest absolute deviation
-          return Math.abs(b.deviationPercent || 0) - Math.abs(a.deviationPercent || 0);
-        }),
-    [chartSeries, data?.data, data?.meta, metricsSummaryEntries]
-  );
-
-  if (!hasCustomMetrics(organization) || metricsSummaryEntries.length === 0) {
-    return null;
-  }
-
-  const items: SectionCardKeyValueList = [];
-
-  dataRows.forEach(dataRow => {
-    const {mri, summaryItem} = dataRow;
-    const name = formatMRI(mri);
-    items.push({
-      key: `metric-${name}`,
-      subject: name,
-      value: (
-        <TraceDrawerComponents.CopyableCardValueWithLink
-          value={
-            <Fragment>
-              <ValueRenderer dataRow={dataRow} />{' '}
-              <DeviationRenderer dataRow={dataRow} startTimestamp={startTimestamp} />
-              <br />
-              <TagsRenderer tags={dataRow.summaryItem.tags} />
-            </Fragment>
-          }
-          linkText={t('View Metric')}
-          linkTarget={getMetricsUrl(organization.slug, {
-            start: normalizeDateTimeString(start),
-            end: normalizeDateTimeString(end),
-            interval: '10s',
-            widgets: [
-              {
-                mri,
-                displayType: MetricDisplayType.LINE,
-                aggregation: getDefaultAggregation(mri),
-                query: Object.entries(summaryItem.tags ?? {})
-                  .map(([tagKey, tagValue]) => tagToQuery(tagKey, tagValue))
-                  .join(' '),
-              },
-            ],
-          })}
-        />
-      ),
-    });
-  });
-
-  return (
-    <TraceDrawerComponents.SectionCard
-      title={t('Custom Metrics')}
-      items={items}
-      sortAlphabetically
-    />
-  );
-}
-
-function ValueRenderer({dataRow}: {dataRow: DataRow}) {
-  const {mri, summaryItem} = dataRow;
-  const parsedMRI = parseMRI(mri);
-  const unit = parsedMRI?.unit ?? 'none';
-  const type = parsedMRI?.type ?? 'c';
-
-  // For counters the other stats offer little value, so we only show the count
-  if (type === 'c' || !summaryItem.count) {
-    return t('Count: %s', formatMetricUsingUnit(summaryItem.count, 'none'));
-  }
-
-  const avg = summaryItem.sum && summaryItem.count && summaryItem.sum / summaryItem.count;
-
-  return (
-    <ValueWrapper>
-      {t('Value:')} {formatMetricUsingUnit(avg, unit) ?? t('(none)')}
-      {summaryItem.count > 1 && (
-        <ValuesHovercard
-          bodyClassName="hovercard-body"
-          skipWrapper
-          body={
-            <Fragment>
-              <StyledKeyValueTable>
-                <KeyValueTableRow keyName="count" value={summaryItem.count} />
-                <KeyValueTableRow
-                  keyName="min"
-                  value={formatMetricUsingUnit(summaryItem.min, unit)}
-                />
-                <KeyValueTableRow
-                  keyName="max"
-                  value={formatMetricUsingUnit(summaryItem.max, unit)}
-                />
-                <KeyValueTableRow
-                  keyName="avg"
-                  value={formatMetricUsingUnit(avg, unit)}
-                />
-              </StyledKeyValueTable>
-            </Fragment>
-          }
-        >
-          <IconInfo size="sm" color="gray300" />
-        </ValuesHovercard>
-      )}
-    </ValueWrapper>
-  );
-}
-
-function DeviationRenderer({
-  dataRow,
-  startTimestamp,
-}: {
-  dataRow: DataRow;
-  startTimestamp: number;
-}) {
-  const {
-    mri,
-    totalAvg,
-    itemAvg,
-    deviation,
-    deviationPercent,
-    chartUnit,
-    chartSeries,
-    scalingFactor,
-  } = dataRow;
-  const theme = useTheme();
-  const parsedMRI = parseMRI(mri);
-  const type = parsedMRI?.type ?? 'c';
-
-  if (
-    !defined(totalAvg) ||
-    !defined(itemAvg) ||
-    !defined(deviation) ||
-    !defined(deviationPercent) ||
-    type === 'c'
-  ) {
-    return null;
-  }
-  const totals = totalAvg / scalingFactor;
-  const isPositive = deviation > 0;
-  const isNeutral = Math.abs(deviationPercent) < 0.03;
-
-  const valueColor: Color = isNeutral ? 'gray300' : isPositive ? 'red300' : 'green300';
-
-  const sign = deviation === 0 ? '±' : isPositive ? '+' : '';
-  const symbol = isNeutral ? '' : isPositive ? '▲' : '▼';
-
-  return (
-    <ChartHovercard
-      bodyClassName="hovercard-body"
-      showUnderline
-      underlineColor={valueColor}
-      header={
-        <Fragment>
-          <HoverCardHeading>{`avg(${middleEllipsis(formatMRI(mri), 40, /\.|-|_/)})`}</HoverCardHeading>
-          <HoverCardSubheading>{t("Span's start time -/+ 30 min")}</HoverCardSubheading>
-        </Fragment>
-      }
-      body={
-        chartSeries && (
-          <MetricChart
-            displayType={MetricDisplayType.LINE}
-            series={[
-              {
-                ...chartSeries,
-                markLine: MarkLine({
-                  data: [
-                    {
-                      valueDim: 'y',
-                      type: 'average',
-                      yAxis: totalAvg,
-                    },
-                  ],
-                  lineStyle: {
-                    color: theme.gray400,
-                  },
-                  emphasis: {disabled: true},
-                }),
-              },
-            ]}
-            additionalSeries={[
-              ScatterSeries({
-                xAxisIndex: 0,
-                yAxisIndex: 0,
-                z: 10,
-                data: [
-                  {
-                    value: [startTimestamp * 1000, itemAvg * (scalingFactor || 1)],
-                    label: {
-                      show: true,
-                      position: 'right',
-                      borderColor: 'transparent',
-                      backgroundColor: theme.background,
-                      borderRadius: 6,
-                      padding: 4,
-                      color: theme[valueColor],
-                      formatter: params => {
-                        return `${formatMetricUsingUnit(
-                          (params.data as any).value[1],
-                          chartUnit || 'none'
-                        )}`;
-                      },
-                    },
-                  },
-                ],
-                ...getSampleChartSymbol(itemAvg, totals, theme),
-                symbolSize: 14,
-                animation: false,
-                silent: true,
-              }),
-            ]}
-            height={160}
-          />
-        )
-      }
-    >
-      <DeviationValue textColor={valueColor}>
-        {symbol} {sign}
-        {formatMetricUsingUnit(deviationPercent * 100, 'percent')}
-      </DeviationValue>
-    </ChartHovercard>
-  );
-}
-
-const STANDARD_TAGS = ['environment', 'release', 'transaction'];
-
-function TagsRenderer({tags}: {tags: Record<string, string> | null}) {
-  const tagString = Object.entries(tags || {})
-    .filter(([tagKey]) => !STANDARD_TAGS.includes(tagKey))
-    .reduce((acc, [tagKey, tagValue], index) => {
-      if (index > 0) {
-        acc += ', ';
-      }
-      acc += `${tagKey}:${tagValue}`;
-      return acc;
-    }, '');
-
-  if (tagString === '') {
-    return (
-      <Fragment>
-        {t('Tags:')} <NoValue>{t('(none)')}</NoValue>
-      </Fragment>
-    );
-  }
-
-  return t('Tags: %s', tagString);
-}
-
-const ChartHovercard = styled(Hovercard)`
-  width: 450px;
-`;
-
-const ValueCell = styled('div')`
-  display: flex;
-  align-items: center;
-  font-family: ${p => p.theme.text.familyMono};
-`;
-
-const NoValue = styled('span')`
-  color: ${p => p.theme.gray300};
-`;
-
-const ValueWrapper = styled(ValueCell)`
-  display: inline-grid;
-  grid-template-columns: max-content max-content;
-  gap: ${space(1)};
-  align-items: center;
-`;
-
-const DeviationValue = styled('span')<{
-  textColor: Color;
-}>`
-  color: ${p => p.theme[p.textColor]};
-  cursor: default;
-`;
-
-const HoverCardHeading = styled('div')`
-  font-size: ${p => p.theme.fontSizeLarge};
-  padding-bottom: ${space(0.5)};
-`;
-
-const HoverCardSubheading = styled('div')`
-  font-size: ${p => p.theme.fontSizeSmall};
-  color: ${p => p.theme.subText};
-`;
-
-const ValuesHovercard = styled(Hovercard)`
-  width: 200px;
-  & .hovercard-body {
-    padding: ${space(0.5)};
-  }
-`;
-
-const StyledKeyValueTable = styled(KeyValueTable)`
-  margin-bottom: 0;
-`;

static/app/components/performance/waterfall/rowDivider.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import {IconAdd, IconFire, IconGraph, IconProfiling, IconSubtract} from 'sentry/icons';
+import {IconAdd, IconFire, IconProfiling, IconSubtract} from 'sentry/icons';
 import {space} from 'sentry/styles/space';
 import type {Aliases, Color} from 'sentry/utils/theme';
 
@@ -75,14 +75,6 @@ export function ErrorBadge() {
   );
 }
 
-export function MetricsBadge() {
-  return (
-    <BadgeBorder color="pink400">
-      <IconGraph color="pink400" size="xs" />
-    </BadgeBorder>
-  );
-}
-
 export function EmbeddedTransactionBadge({
   inTraceView = false,
   expanded,

static/app/types/event.tsx

@@ -4,7 +4,6 @@ import type {CultureContext} from 'sentry/components/events/contexts/knownContex
 import type {MissingInstrumentationContext} from 'sentry/components/events/contexts/knownContext/missingInstrumentation';
 import type {
   AggregateSpanType,
-  MetricsSummary,
   RawSpanType,
   TraceContextType,
 } from 'sentry/components/events/interfaces/spans/types';
@@ -815,7 +814,6 @@ export interface EventTransaction
   )[];
   startTimestamp: number;
   type: EventOrGroupType.TRANSACTION;
-  _metrics_summary?: MetricsSummary;
   perfProblem?: PerformanceDetectorData;
 }
 

static/app/views/performance/newTraceDetails/traceDrawer/details/span/index.tsx

@@ -9,10 +9,6 @@ import {
 import type {SpanType} from 'sentry/components/events/interfaces/spans/types';
 import {getSpanOperation} from 'sentry/components/events/interfaces/spans/utils';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
-import {
-  CustomMetricsEventData,
-  eventHasCustomMetrics,
-} from 'sentry/components/metrics/customMetricsEventData';
 import {Tooltip} from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -150,10 +146,7 @@ function SpanSections({
   }
 
   const hasSpanSpecificData =
-    hasSpanHTTPInfo(node.value) ||
-    hasSpanKeys(node) ||
-    hasSpanTags(node.value) ||
-    eventHasCustomMetrics(organization, node.value._metrics_summary);
+    hasSpanHTTPInfo(node.value) || hasSpanKeys(node) || hasSpanTags(node.value);
 
   return (
     <Fragment>
@@ -169,13 +162,6 @@ function SpanSections({
             {hasSpanKeys(node) ? <SpanKeys node={node} /> : null}
             {hasSpanHTTPInfo(node.value) ? <SpanHTTPInfo span={node.value} /> : null}
             {hasSpanTags(node.value) ? <Tags span={node.value} /> : null}
-            {eventHasCustomMetrics(organization, node.value._metrics_summary) ? (
-              <CustomMetricsEventData
-                projectId={project?.id || ''}
-                metricsSummary={node.value._metrics_summary}
-                startTimestamp={node.value.start_timestamp}
-              />
-            ) : null}
           </TraceDrawerComponents.SectionCardGroup>
         </InterimSection>
       ) : null}
@@ -215,13 +201,6 @@ function LegacySpanSections({
       {hasSpanHTTPInfo(node.value) ? <SpanHTTPInfo span={node.value} /> : null}
       {hasSpanTags(node.value) ? <Tags span={node.value} /> : null}
       {hasSpanKeys(node) ? <SpanKeys node={node} /> : null}
-      {eventHasCustomMetrics(organization, node.value._metrics_summary) ? (
-        <CustomMetricsEventData
-          projectId={project?.id || ''}
-          metricsSummary={node.value._metrics_summary}
-          startTimestamp={node.value.start_timestamp}
-        />
-      ) : null}
     </TraceDrawerComponents.SectionCardGroup>
   );
 }