feat(tracemetrics): Refresh the metrics refresh (#111920)

This PR refreshes the refresh of the trace metrics page, changes include
(but not limited to):

- Moving back to side-by-side orientation
- Moving filter bar into the individual metric panels
- Changing title from `Metrics` -> `Application Metrics`
- Changing visibility toggle to a chevron
- Moved/added "Add Metric" and "Save as" buttons

Ticket: LOGS-647

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: nsdeschenes

static/app/views/explore/metrics/content.tsx

@@ -28,6 +28,8 @@ import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnbo
 import {TopBar} from 'sentry/views/navigation/topBar';
 import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
 
+const METRICS_TITLE = t('Application Metrics');
+
 export default function MetricsContent() {
   const organization = useOrganization();
   const onboardingProject = useOnboardingProject({property: 'hasTraceMetrics'});
@@ -36,7 +38,7 @@ export default function MetricsContent() {
   });
   const datePageFilterProps = useDatePageFilterProps(maxPickableDays);
   return (
-    <SentryDocumentTitle title={t('Metrics')} orgSlug={organization?.slug}>
+    <SentryDocumentTitle title={METRICS_TITLE} orgSlug={organization?.slug}>
       <PageFiltersContainer
         maxPickableDays={datePageFilterProps.maxPickableDays}
         defaultSelection={
@@ -95,15 +97,15 @@ function MetricsHeader() {
       <Layout.HeaderContent unified>
         {hasSavedQueryTitle ? (
           <SentryDocumentTitle
-            title={`${savedQuery.name} — ${t('Metrics')}`}
+            title={`${savedQuery.name} — ${METRICS_TITLE}`}
             orgSlug={organization?.slug}
           />
         ) : null}
         {title && defined(pageId) ? (
           <ExploreBreadcrumb traceItemDataset={TraceItemDataset.TRACEMETRICS} />
         ) : null}
         <Layout.Title>
-          {title ? title : t('Metrics')}
+          {title ? title : METRICS_TITLE}
           <FeatureBadge type="beta" />
         </Layout.Title>
       </Layout.HeaderContent>

static/app/views/explore/metrics/metricGraph/index.tsx

@@ -1,11 +1,8 @@
 import {Fragment, useMemo} from 'react';
-import styled from '@emotion/styled';
 
 import {CompactSelect} from '@sentry/scraps/compactSelect';
-import {Flex} from '@sentry/scraps/layout';
 import {ExternalLink} from '@sentry/scraps/link';
 import {OverlayTrigger} from '@sentry/scraps/overlayTrigger';
-import {Text} from '@sentry/scraps/text';
 
 import {IconClock, IconGraph} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
@@ -37,7 +34,6 @@ import {
   useQueryParamsTopEventsLimit,
 } from 'sentry/views/explore/queryParams/context';
 import {EXPLORE_CHART_TYPE_OPTIONS} from 'sentry/views/explore/spans/charts';
-import {getVisualizeLabel} from 'sentry/views/explore/toolbar/toolbarVisualize';
 import {useRawCounts} from 'sentry/views/explore/useRawCounts';
 import {
   combineConfidenceForSeries,
@@ -61,13 +57,11 @@ interface MetricsGraphProps {
   additionalActions?: React.ReactNode;
   infoContentHidden?: boolean;
   isMetricOptionsEmpty?: boolean;
-  queryIndex?: number;
 }
 
 export function MetricsGraph({
   timeseriesResult,
   orientation,
-  queryIndex = 0,
   additionalActions,
   infoContentHidden,
   isMetricOptionsEmpty,
@@ -97,7 +91,6 @@ export function MetricsGraph({
       additionalActions={additionalActions}
       infoContentHidden={infoContentHidden}
       isMetricOptionsEmpty={isMetricOptionsEmpty}
-      queryIndex={queryIndex}
     />
   );
 }
@@ -117,7 +110,6 @@ function Graph({
   infoContentHidden,
   additionalActions,
   isMetricOptionsEmpty,
-  queryIndex = 0,
 }: GraphProps) {
   const organization = useOrganization();
   const aggregate = visualize.yAxis;
@@ -189,26 +181,7 @@ function Graph({
     return metricLabel ?? prettifyAggregation(aggregate) ?? aggregate;
   }, [aggregate, metricLabel, metricName, visualizes.length]);
 
-  const Title = canUseMetricsUIRefresh(organization) ? (
-    <Flex align="center" gap="xs">
-      <VisualizeLabel
-        justify="center"
-        align="center"
-        radius="md"
-        paddingLeft="sm"
-        paddingRight="sm"
-        paddingTop="xs"
-        paddingBottom="xs"
-      >
-        <Text bold variant="accent">
-          {getVisualizeLabel(queryIndex)}
-        </Text>
-      </VisualizeLabel>
-      <Widget.WidgetTitle title={chartTitle} />
-    </Flex>
-  ) : (
-    <Widget.WidgetTitle title={chartTitle} />
-  );
+  const Title = <Widget.WidgetTitle title={chartTitle} />;
 
   const chartIcon =
     visualize.chartType === ChartType.LINE
@@ -315,7 +288,3 @@ function Graph({
     </WidgetWrapper>
   );
 }
-
-const VisualizeLabel = styled(Flex)`
-  background-color: ${p => p.theme.tokens.background.transparent.accent.muted};
-`;

static/app/views/explore/metrics/metricInfoTabs/index.tsx

@@ -42,17 +42,15 @@ export function MetricInfoTabs({
 
   const hasMetricsUIRefresh = canUseMetricsUIRefresh(organization);
 
-  const size = hasMetricsUIRefresh ? 'md' : 'xs';
-
   return (
     <TabStateProvider<Mode>
       value={queryParamsMode}
       onChange={mode => {
         setAggregatesMode(mode);
       }}
-      size={size}
+      size={hasMetricsUIRefresh ? 'md' : 'xs'}
     >
-      {(orientation === 'right' || visualize.visible) && (
+      {orientation === 'right' || visualize.visible ? (
         <Flex direction="row" justify="between" align="center" paddingRight="xl">
           <TabListWrapper orientation={orientation}>
             <TabList variant="floating">
@@ -66,8 +64,8 @@ export function MetricInfoTabs({
           </TabListWrapper>
           {additionalActions}
         </Flex>
-      )}
-      {visualize.visible && !contentsHidden && (
+      ) : null}
+      {visualize.visible && !contentsHidden ? (
         <BodyContainer>
           <StyledTabPanels>
             <TabPanels.Item key={Mode.AGGREGATE}>
@@ -84,7 +82,7 @@ export function MetricInfoTabs({
             </TabPanels.Item>
           </StyledTabPanels>
         </BodyContainer>
-      )}
+      ) : null}
     </TabStateProvider>
   );
 }

static/app/views/explore/metrics/metricPanel/index.tsx

@@ -1,6 +1,6 @@
 import {useState} from 'react';
 
-import {Stack} from '@sentry/scraps/layout';
+import {Container, Stack} from '@sentry/scraps/layout';
 
 import {Panel} from 'sentry/components/panels/panel';
 import {PanelBody} from 'sentry/components/panels/panelBody';
@@ -17,13 +17,12 @@ import {useMetricAggregatesTable} from 'sentry/views/explore/metrics/hooks/useMe
 import {useMetricSamplesTable} from 'sentry/views/explore/metrics/hooks/useMetricSamplesTable';
 import {useMetricTimeseries} from 'sentry/views/explore/metrics/hooks/useMetricTimeseries';
 import {useTableOrientationControl} from 'sentry/views/explore/metrics/hooks/useOrientationControl';
-import {MetricsGraph} from 'sentry/views/explore/metrics/metricGraph';
-import {MetricInfoTabs} from 'sentry/views/explore/metrics/metricInfoTabs';
 import {SideBySideOrientation} from 'sentry/views/explore/metrics/metricPanel/sideBySideOrientation';
 import {StackedOrientation} from 'sentry/views/explore/metrics/metricPanel/stackedOrientation';
 import {type TraceMetric} from 'sentry/views/explore/metrics/metricQuery';
 import {canUseMetricsUIRefresh} from 'sentry/views/explore/metrics/metricsFlags';
 import {useMetricVisualize} from 'sentry/views/explore/metrics/metricsQueryParams';
+import {MetricToolbar} from 'sentry/views/explore/metrics/metricToolbar';
 import {
   useQueryParamsAggregateSortBys,
   useQueryParamsMode,
@@ -74,6 +73,7 @@ export function MetricPanel({traceMetric, queryIndex}: MetricPanelProps) {
   const aggregateSortBys = useQueryParamsAggregateSortBys();
   const [interval] = useChartInterval();
   const topEvents = useTopEvents();
+  const visualize = useMetricVisualize();
 
   useMetricsPanelAnalytics({
     interval,
@@ -88,28 +88,25 @@ export function MetricPanel({traceMetric, queryIndex}: MetricPanelProps) {
     panelIndex: queryIndex,
   });
 
-  const visualize = useMetricVisualize();
-
   if (hasMetricsUIRefresh) {
     return (
       <Panel data-test-id="metric-panel">
         <PanelBody>
           <Stack gap="sm">
-            <MetricsGraph
-              timeseriesResult={timeseriesResult}
-              orientation={orientation}
-              isMetricOptionsEmpty={isMetricOptionsEmpty}
-              queryIndex={queryIndex}
-            />
-            {visualize.visible && (
-              <MetricInfoTabs
+            <Container paddingBottom={visualize.visible ? undefined : 'sm'}>
+              <MetricToolbar traceMetric={traceMetric} queryIndex={queryIndex} />
+            </Container>
+            {visualize.visible ? (
+              <SideBySideOrientation
+                timeseriesResult={timeseriesResult}
                 traceMetric={traceMetric}
-                additionalActions={undefined}
-                contentsHidden={infoContentHidden}
+                setOrientation={setUserPreferenceOrientation}
                 orientation={orientation}
+                infoContentHidden={infoContentHidden}
+                setInfoContentHidden={setInfoContentHidden}
                 isMetricOptionsEmpty={isMetricOptionsEmpty}
               />
-            )}
+            ) : null}
           </Stack>
         </PanelBody>
       </Panel>

static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx

@@ -1,9 +1,10 @@
 import {useRef} from 'react';
 
-import {Flex} from '@sentry/scraps/layout';
+import {Flex, Grid} from '@sentry/scraps/layout';
 
 import {SplitPanel} from 'sentry/components/splitPanel';
 import {useDimensions} from 'sentry/utils/useDimensions';
+import {useOrganization} from 'sentry/utils/useOrganization';
 import type {useMetricTimeseries} from 'sentry/views/explore/metrics/hooks/useMetricTimeseries';
 import type {TableOrientation} from 'sentry/views/explore/metrics/hooks/useOrientationControl';
 import {MetricsGraph} from 'sentry/views/explore/metrics/metricGraph';
@@ -12,6 +13,7 @@ import {SAMPLES_PANEL_MIN_WIDTH} from 'sentry/views/explore/metrics/metricInfoTa
 import {HideContentButton} from 'sentry/views/explore/metrics/metricPanel/hideContentButton';
 import {PanelPositionSelector} from 'sentry/views/explore/metrics/metricPanel/panelPositionSelector';
 import type {TraceMetric} from 'sentry/views/explore/metrics/metricQuery';
+import {canUseMetricsUIRefresh} from 'sentry/views/explore/metrics/metricsFlags';
 
 const MIN_LEFT_WIDTH = 400;
 
@@ -37,9 +39,30 @@ export function SideBySideOrientation({
   timeseriesResult: ReturnType<typeof useMetricTimeseries>['result'];
   traceMetric: TraceMetric;
 }) {
+  const organization = useOrganization();
+  const hasMetricsUIRefresh = canUseMetricsUIRefresh(organization);
   const measureRef = useRef<HTMLDivElement>(null);
   const {width} = useDimensions({elementRef: measureRef});
 
+  if (hasMetricsUIRefresh) {
+    return (
+      <Grid columns="1fr 1fr" gap="sm">
+        <MetricsGraph
+          timeseriesResult={timeseriesResult}
+          orientation={orientation}
+          isMetricOptionsEmpty={isMetricOptionsEmpty}
+        />
+        <div>
+          <MetricInfoTabs
+            traceMetric={traceMetric}
+            orientation={orientation}
+            isMetricOptionsEmpty={isMetricOptionsEmpty}
+          />
+        </div>
+      </Grid>
+    );
+  }
+
   const hasSize = width > 0;
   // Default split is 65% of the available width but not less than MIN_LEFT_WIDTH
   // while also accommodating the desired right panel width.

static/app/views/explore/metrics/metricToolbar/index.tsx

@@ -1,6 +1,6 @@
 import {useCallback} from 'react';
 
-import {Container, Flex, Grid, Stack} from '@sentry/scraps/layout';
+import {Flex, Grid} from '@sentry/scraps/layout';
 
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {type TraceMetric} from 'sentry/views/explore/metrics/metricQuery';
@@ -36,30 +36,37 @@ export function MetricToolbar({traceMetric, queryIndex}: MetricToolbarProps) {
 
   if (canUseMetricsUIRefresh(organization)) {
     return (
-      <Flex width="100%" align="start" gap="md" data-test-id="metric-toolbar">
+      <Grid
+        width="100%"
+        align="center"
+        gap="md"
+        columns={`auto 2fr 3fr 6fr ${canRemoveMetric ? '24px' : '0'}`}
+        data-test-id="metric-toolbar"
+        paddingLeft="lg"
+        paddingRight="lg"
+        paddingTop="md"
+      >
         <VisualizeLabel
           index={queryIndex}
           visualize={visualize}
           onClick={toggleVisibility}
         />
-        <Stack flex="1" minWidth={0} gap="sm" width="100%">
-          <Flex minWidth={0} gap="xs" align="center">
-            <Container width="100%" maxWidth={canRemoveMetric ? '225px' : undefined}>
-              <MetricSelector traceMetric={traceMetric} onChange={setTraceMetric} />
-            </Container>
-            {canRemoveMetric && <DeleteMetricButton />}
-          </Flex>
+        <Flex minWidth={0}>
+          <MetricSelector traceMetric={traceMetric} onChange={setTraceMetric} />
+        </Flex>
+        <Flex gap="md" minWidth={0}>
           <Flex flex="2 1 0" minWidth={0}>
             <AggregateDropdown traceMetric={traceMetric} />
           </Flex>
           <Flex flex="3 1 0" minWidth={0}>
             <GroupBySelector traceMetric={traceMetric} />
           </Flex>
-          <Flex minWidth={0} width="100%">
-            <Filter traceMetric={traceMetric} />
-          </Flex>
-        </Stack>
-      </Flex>
+        </Flex>
+        <Flex minWidth={0}>
+          <Filter traceMetric={traceMetric} />
+        </Flex>
+        {canRemoveMetric && <DeleteMetricButton />}
+      </Grid>
     );
   }
 

static/app/views/explore/metrics/metricToolbar/metricSaveAs.tsx

@@ -5,7 +5,11 @@ import {t} from 'sentry/locale';
 import {useChartInterval} from 'sentry/utils/useChartInterval';
 import {useSaveAsMetricItems} from 'sentry/views/explore/metrics/useSaveAsMetricItems';
 
-export function MetricSaveAs() {
+interface MetricSaveAsProps {
+  size?: 'sm' | 'md';
+}
+
+export function MetricSaveAs({size = 'sm'}: MetricSaveAsProps) {
   const [interval] = useChartInterval();
   const items = useSaveAsMetricItems({interval});
 
@@ -16,7 +20,7 @@ export function MetricSaveAs() {
   if (items.length === 1 && 'onAction' in items[0]! && !('children' in items[0])) {
     const item = items[0];
     return (
-      <Button size="sm" onClick={item.onAction} aria-label={item.textValue}>
+      <Button size={size} onClick={item.onAction} aria-label={item.textValue}>
         {t('Save as')}…
       </Button>
     );
@@ -28,7 +32,7 @@ export function MetricSaveAs() {
       trigger={triggerProps => (
         <Button
           {...triggerProps}
-          size="sm"
+          size={size}
           aria-label={t('Save as')}
           onClick={e => {
             e.stopPropagation();