ref(insights): Extract `Ribbon` component (#74164)

Finally resolving this duplication. Adding a generic, logic-less
`Ribbon` component to wrap all these metrics ribbons in, instead of
containers all over the place.

static/app/views/insights/browser/resources/components/resourceInfo.tsx

@@ -1,14 +1,13 @@
 import {Fragment} from 'react';
-import styled from '@emotion/styled';
 
 import Alert from 'sentry/components/alert';
 import {t, tct} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import {formatBytesBase2} from 'sentry/utils/bytes/formatBytesBase2';
 import {DurationUnit, SizeUnit} from 'sentry/utils/discover/fields';
 import getDynamicText from 'sentry/utils/getDynamicText';
 import {RESOURCE_THROUGHPUT_UNIT} from 'sentry/views/insights/browser/resources/settings';
 import {MetricReadout} from 'sentry/views/insights/common/components/metricReadout';
+import {Ribbon} from 'sentry/views/insights/common/components/ribbon';
 import {getTimeSpentExplanation} from 'sentry/views/insights/common/components/tableCells/timeSpentCell';
 import {
   DataTitles,
@@ -68,7 +67,7 @@ function ResourceInfo(props: Props) {
 
   return (
     <Fragment>
-      <MetricsRibbon>
+      <Ribbon>
         <MetricReadout
           align="left"
           title={getThroughputTitle('resource')}
@@ -114,7 +113,7 @@ function ResourceInfo(props: Props) {
           unit={DurationUnit.MILLISECOND}
           tooltip={getTimeSpentExplanation(timeSpentPercentage, 'resource')}
         />
-      </MetricsRibbon>
+      </Ribbon>
 
       {hasNoData && (
         <Alert style={{width: '100%'}} type="warning" showIcon>
@@ -127,10 +126,4 @@ function ResourceInfo(props: Props) {
   );
 }
 
-const MetricsRibbon = styled('div')`
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${space(4)};
-`;
-
 export default ResourceInfo;

static/app/views/insights/cache/components/samplePanel.tsx

@@ -32,6 +32,7 @@ import {BASE_FILTERS} from 'sentry/views/insights/cache/settings';
 import DetailPanel from 'sentry/views/insights/common/components/detailPanel';
 import {MetricReadout} from 'sentry/views/insights/common/components/metricReadout';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
+import {Ribbon} from 'sentry/views/insights/common/components/ribbon';
 import {getTimeSpentExplanation} from 'sentry/views/insights/common/components/tableCells/timeSpentCell';
 import {
   useMetrics,
@@ -299,7 +300,7 @@ export function CacheSamplePanel() {
           </ModuleLayout.Full>
 
           <ModuleLayout.Full>
-            <MetricsRibbon>
+            <Ribbon>
               <MetricReadout
                 align="left"
                 title={DataTitles[`avg(${SpanMetricsField.CACHE_ITEM_SIZE})`]}
@@ -351,7 +352,7 @@ export function CacheSamplePanel() {
                 )}
                 isLoading={areCacheTransactionMetricsFetching}
               />
-            </MetricsRibbon>
+            </Ribbon>
           </ModuleLayout.Full>
           <ModuleLayout.Full>
             <CompactSelect
@@ -498,9 +499,3 @@ const Title = styled('h4')`
   white-space: nowrap;
   margin: 0;
 `;
-
-const MetricsRibbon = styled('div')`
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${space(4)};
-`;

static/app/views/insights/common/components/ribbon.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+import {space} from 'sentry/styles/space';
+
+export const Ribbon = styled('div')`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${space(4)};
+`;

static/app/views/insights/common/views/spanSummaryPage/sampleList/sampleInfo/index.tsx

@@ -1,10 +1,8 @@
-import styled from '@emotion/styled';
-
-import {space} from 'sentry/styles/space';
 import {DurationUnit, RateUnit} from 'sentry/utils/discover/fields';
 import {usePageAlert} from 'sentry/utils/performance/contexts/pageAlert';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {MetricReadout} from 'sentry/views/insights/common/components/metricReadout';
+import {Ribbon} from 'sentry/views/insights/common/components/ribbon';
 import {getTimeSpentExplanation} from 'sentry/views/insights/common/components/tableCells/timeSpentCell';
 import {useSpanMetrics} from 'sentry/views/insights/common/queries/useDiscover';
 import {
@@ -56,7 +54,7 @@ function SampleInfo(props: Props) {
   }
 
   return (
-    <MetricsRibbon>
+    <Ribbon>
       <MetricReadout
         title={getThroughputTitle(spanMetrics?.[SpanMetricsField.SPAN_OP])}
         align="left"
@@ -84,14 +82,8 @@ function SampleInfo(props: Props) {
         )}
         isLoading={isLoading}
       />
-    </MetricsRibbon>
+    </Ribbon>
   );
 }
 
-const MetricsRibbon = styled('div')`
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${space(4)};
-`;
-
 export default SampleInfo;

static/app/views/insights/database/views/databaseSpanSummaryPage.tsx

@@ -19,6 +19,7 @@ import {useSynchronizeCharts} from 'sentry/views/insights/common/components/char
 import {MetricReadout} from 'sentry/views/insights/common/components/metricReadout';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
+import {Ribbon} from 'sentry/views/insights/common/components/ribbon';
 import {DatabaseSpanDescription} from 'sentry/views/insights/common/components/spanDescription';
 import {getTimeSpentExplanation} from 'sentry/views/insights/common/components/tableCells/timeSpentCell';
 import {useSpanMetrics} from 'sentry/views/insights/common/queries/useDiscover';
@@ -184,7 +185,7 @@ export function DatabaseSpanSummaryPage({params}: Props) {
               <DatePageFilter />
             </PageFilterBar>
 
-            <MetricsRibbon>
+            <Ribbon>
               <MetricReadout
                 title={getThroughputTitle('db')}
                 value={spanMetrics?.[`${SpanFunction.SPM}()`]}
@@ -209,7 +210,7 @@ export function DatabaseSpanSummaryPage({params}: Props) {
                 )}
                 isLoading={areSpanMetricsLoading}
               />
-            </MetricsRibbon>
+            </Ribbon>
           </HeaderContainer>
 
           <ModuleLayout.Layout>
@@ -298,12 +299,6 @@ const DescriptionContainer = styled(ModuleLayout.Full)`
   line-height: 1.2;
 `;
 
-const MetricsRibbon = styled('div')`
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${space(4)};
-`;
-
 function PageWithProviders(props) {
   return (
     <ModulePageProviders

static/app/views/insights/http/components/httpSamplesPanel.tsx

@@ -32,6 +32,7 @@ import {computeAxisMax} from 'sentry/views/insights/common/components/chart';
 import DetailPanel from 'sentry/views/insights/common/components/detailPanel';
 import {MetricReadout} from 'sentry/views/insights/common/components/metricReadout';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
+import {Ribbon} from 'sentry/views/insights/common/components/ribbon';
 import {getTimeSpentExplanation} from 'sentry/views/insights/common/components/tableCells/timeSpentCell';
 import {
   useSpanMetrics,
@@ -354,7 +355,7 @@ export function HTTPSamplesPanel() {
           </ModuleLayout.Full>
 
           <ModuleLayout.Full>
-            <MetricsRibbon>
+            <Ribbon>
               <MetricReadout
                 align="left"
                 title={getThroughputTitle('http')}
@@ -410,7 +411,7 @@ export function HTTPSamplesPanel() {
                 )}
                 isLoading={areDomainTransactionMetricsFetching}
               />
-            </MetricsRibbon>
+            </Ribbon>
           </ModuleLayout.Full>
 
           <ModuleLayout.Full>
@@ -633,12 +634,6 @@ const Title = styled('h4')`
   margin: 0;
 `;
 
-const MetricsRibbon = styled('div')`
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${space(4)};
-`;
-
 const PanelControls = styled('div')`
   display: flex;
   justify-content: space-between;

static/app/views/insights/http/views/httpDomainSummaryPage.tsx

@@ -12,7 +12,6 @@ import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {t, tct} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import {DurationUnit, RateUnit} from 'sentry/utils/discover/fields';
 import {decodeScalar, decodeSorts} from 'sentry/utils/queryString';
 import {
@@ -27,6 +26,7 @@ import {useSynchronizeCharts} from 'sentry/views/insights/common/components/char
 import {MetricReadout} from 'sentry/views/insights/common/components/metricReadout';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
+import {Ribbon} from 'sentry/views/insights/common/components/ribbon';
 import {getTimeSpentExplanation} from 'sentry/views/insights/common/components/tableCells/timeSpentCell';
 import {useSpanMetrics} from 'sentry/views/insights/common/queries/useDiscover';
 import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
@@ -213,7 +213,7 @@ export function HTTPDomainSummaryPage() {
                   <DatePageFilter />
                 </PageFilterBar>
 
-                <MetricsRibbon>
+                <Ribbon>
                   <MetricReadout
                     title={getThroughputTitle('http')}
                     value={domainMetrics?.[0]?.[`${SpanFunction.SPM}()`]}
@@ -261,7 +261,7 @@ export function HTTPDomainSummaryPage() {
                     )}
                     isLoading={areDomainMetricsLoading}
                   />
-                </MetricsRibbon>
+                </Ribbon>
               </HeaderContainer>
             </ModuleLayout.Full>
 
@@ -335,12 +335,6 @@ const HeaderContainer = styled('div')`
   flex-wrap: wrap;
 `;
 
-const MetricsRibbon = styled('div')`
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${space(4)};
-`;
-
 function PageWithProviders() {
   return (
     <ModulePageProviders

static/app/views/insights/llmMonitoring/views/llmMonitoringDetailsPage.tsx

@@ -18,6 +18,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import {MetricReadout} from 'sentry/views/insights/common/components/metricReadout';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
+import {Ribbon} from 'sentry/views/insights/common/components/ribbon';
 import {useSpanMetrics} from 'sentry/views/insights/common/queries/useDiscover';
 import {useModuleBreadcrumbs} from 'sentry/views/insights/common/utils/useModuleBreadcrumbs';
 import {
@@ -115,7 +116,7 @@ export function LLMMonitoringPage({params}: Props) {
                     <EnvironmentPageFilter />
                     <DatePageFilter />
                   </PageFilterBar>
-                  <MetricsRibbon>
+                  <Ribbon>
                     <MetricReadout
                       title={t('Total Tokens Used')}
                       value={tokenUsedMetric['sum(ai.total_tokens.used)']}
@@ -143,7 +144,7 @@ export function LLMMonitoringPage({params}: Props) {
                       unit={RateUnit.PER_MINUTE}
                       isLoading={areSpanMetricsLoading}
                     />
-                  </MetricsRibbon>
+                  </Ribbon>
                 </SpaceBetweenWrap>
               </ModuleLayout.Full>
               <ModuleLayout.Third>
@@ -186,9 +187,3 @@ const SpaceBetweenWrap = styled('div')`
   flex-wrap: wrap;
   gap: ${space(2)};
 `;
-
-const MetricsRibbon = styled('div')`
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${space(4)};
-`;

static/app/views/insights/mobile/appStarts/views/screenSummaryPage.tsx

@@ -29,7 +29,7 @@ import {
   StartTypeSelector,
 } from 'sentry/views/insights/mobile/appStarts/components/startTypeSelector';
 import {SpanSamplesPanel} from 'sentry/views/insights/mobile/common/components/spanSamplesPanel';
-import {MetricsRibbon} from 'sentry/views/insights/mobile/screenload/components/metricsRibbon';
+import {MobileMetricsRibbon} from 'sentry/views/insights/mobile/screenload/components/metricsRibbon';
 import {ModuleName, SpanMetricsField} from 'sentry/views/insights/types';
 
 import AppStartWidgets from '../components/widgets';
@@ -105,7 +105,7 @@ export function ScreenSummary() {
                 <ReleaseComparisonSelector />
                 <StartTypeSelector />
               </ControlsContainer>
-              <MetricsRibbon
+              <MobileMetricsRibbon
                 dataset={DiscoverDatasets.SPANS_METRICS}
                 filters={[
                   `transaction:${transactionName}`,

static/app/views/insights/mobile/common/components/spanSamplesPanelContainer.tsx

@@ -20,6 +20,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useRouter from 'sentry/utils/useRouter';
 import {MetricReadout} from 'sentry/views/insights/common/components/metricReadout';
+import {Ribbon} from 'sentry/views/insights/common/components/ribbon';
 import {useSpanMetrics} from 'sentry/views/insights/common/queries/useDiscover';
 import {formatVersionAndCenterTruncate} from 'sentry/views/insights/common/utils/centerTruncate';
 import {DataTitles} from 'sentry/views/insights/common/views/spans/types';
@@ -155,7 +156,7 @@ export function SpanSamplesContainer({
         )}
       </PaddedTitle>
 
-      <Container>
+      <Ribbon>
         <MetricReadout
           title={DataTitles.avg}
           align="left"
@@ -168,7 +169,7 @@ export function SpanSamplesContainer({
           value={spanMetrics?.['count()'] ?? 0}
           unit="count"
         />
-      </Container>
+      </Ribbon>
 
       <DurationChart
         spanSearch={spanSearch}
@@ -251,10 +252,6 @@ const PaddedTitle = styled('div')`
   margin-bottom: ${space(1)};
 `;
 
-const Container = styled('div')`
-  display: flex;
-`;
-
 const StyledSearchBar = styled(SearchBar)`
   margin-top: ${space(2)};
 `;