feat(starfish): Add agg waterfall to spans tab in web vitals (#58884)

![Screenshot 2023-10-26 at 2 11
52 PM](https://github.com/getsentry/sentry/assets/63818634/27923890-3b05-48a4-8e8a-bd79eab8f288)

static/app/views/performance/browser/webVitals/components/miniAggregateWaterfall.tsx

@@ -9,6 +9,7 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {useLocation} from 'sentry/utils/useLocation';
+import {LandingDisplayField} from 'sentry/views/performance/browser/webVitals/pageOverview';
 
 type Props = {
   transaction: string;
@@ -24,7 +25,10 @@ export function MiniAggregateWaterfall({transaction}: Props) {
   }
   const AggregateSpanWaterfallLocation = {
     ...location,
-    pathname: '/performance/summary/aggregateWaterfall',
+    query: {
+      ...location.query,
+      tab: LandingDisplayField.SPANS,
+    },
   };
   const minimap = (
     <ActualMinimap

static/app/views/performance/browser/webVitals/pageOverview.tsx

@@ -1,9 +1,11 @@
 import {useMemo, useState} from 'react';
+import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 
 import ProjectAvatar from 'sentry/components/avatar/projectAvatar';
 import Breadcrumbs from 'sentry/components/breadcrumbs';
 import {LinkButton} from 'sentry/components/button';
+import {AggregateSpans} from 'sentry/components/events/interfaces/spans/aggregateSpans';
 import FeatureBadge from 'sentry/components/featureBadge';
 import FeedbackWidget from 'sentry/components/feedback/widget/feedbackWidget';
 import * as Layout from 'sentry/components/layouts/thirds';
@@ -14,6 +16,8 @@ import {TabList, Tabs} from 'sentry/components/tabs';
 import {IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {defined} from 'sentry/utils';
+import {decodeScalar} from 'sentry/utils/queryString';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
@@ -28,7 +32,7 @@ import {WebVitals} from 'sentry/views/performance/browser/webVitals/utils/types'
 import {useProjectWebVitalsQuery} from 'sentry/views/performance/browser/webVitals/utils/useProjectWebVitalsQuery';
 import {ModulePageProviders} from 'sentry/views/performance/database/modulePageProviders';
 
-enum LandingDisplayField {
+export enum LandingDisplayField {
   OVERVIEW = 'overview',
   SPANS = 'spans',
 }
@@ -39,11 +43,19 @@ const LANDING_DISPLAYS = [
     field: LandingDisplayField.OVERVIEW,
   },
   {
-    label: t('Spans'),
+    label: t('Aggregate Spans'),
     field: LandingDisplayField.SPANS,
   },
 ];
 
+function getCurrentTabSelection(selectedTab) {
+  const tab = decodeScalar(selectedTab);
+  if (tab && Object.values(LandingDisplayField).includes(tab as LandingDisplayField)) {
+    return tab as LandingDisplayField;
+  }
+  return LandingDisplayField.OVERVIEW;
+}
+
 export default function PageOverview() {
   const organization = useOrganization();
   const location = useLocation();
@@ -58,6 +70,8 @@ export default function PageOverview() {
     [projects, location.query.project]
   );
 
+  const tab = getCurrentTabSelection(location.query.tab);
+
   // TODO: When visiting page overview from a specific webvital detail panel in the landing page,
   // we should automatically default this webvital state to the respective webvital so the detail
   // panel in this page opens automatically.
@@ -87,7 +101,18 @@ export default function PageOverview() {
 
   return (
     <ModulePageProviders title={[t('Performance'), t('Web Vitals')].join(' — ')}>
-      <Tabs value={LandingDisplayField.OVERVIEW}>
+      <Tabs
+        value={tab}
+        onChange={value => {
+          browserHistory.push({
+            ...location,
+            query: {
+              ...location.query,
+              tab: value,
+            },
+          });
+        }}
+      >
         <Layout.Header>
           <Layout.HeaderContent>
             <Breadcrumbs
@@ -120,57 +145,68 @@ export default function PageOverview() {
             ))}
           </TabList>
         </Layout.Header>
-        <Layout.Body>
-          <FeedbackWidget />
-          <Layout.Main>
-            <TopMenuContainer>
-              {transaction && (
-                <ViewAllPagesButton
-                  to={{
-                    ...location,
-                    pathname: '/performance/browser/pageloads/',
-                    query: {...location.query, transaction: undefined},
-                  }}
-                >
-                  <IconChevron direction="left" /> {t('View All Pages')}
-                </ViewAllPagesButton>
-              )}
-              <PageFilterBar condensed>
-                <ProjectPageFilter />
-                <DatePageFilter />
-              </PageFilterBar>
-            </TopMenuContainer>
-            <Flex>
-              <PerformanceScoreBreakdownChart transaction={transaction} />
-            </Flex>
-            <WebVitalsRingMeters
-              projectScore={projectScore}
-              onClick={webVital => setState({...state, webVital})}
-              transaction={transaction}
-            />
-            {/* TODO: Need to pass in a handler function to each tag list here to handle opening detail panel for tags */}
-            <Flex>
-              <PageOverviewFeaturedTagsList
-                tag="browser.name"
-                title={t('Slowest Browsers')}
-                transaction={transaction}
-              />
-              <PageOverviewFeaturedTagsList
-                tag="release"
-                title={t('Slowest Releases')}
+        {tab === LandingDisplayField.SPANS ? (
+          <Layout.Body>
+            <Layout.Main fullWidth>
+              {defined(transaction) && <AggregateSpans transaction={transaction} />}
+            </Layout.Main>
+          </Layout.Body>
+        ) : (
+          <Layout.Body>
+            <FeedbackWidget />
+            <Layout.Main>
+              <TopMenuContainer>
+                {transaction && (
+                  <ViewAllPagesButton
+                    to={{
+                      ...location,
+                      pathname: '/performance/browser/pageloads/',
+                      query: {...location.query, transaction: undefined},
+                    }}
+                  >
+                    <IconChevron direction="left" /> {t('View All Pages')}
+                  </ViewAllPagesButton>
+                )}
+                <PageFilterBar condensed>
+                  <ProjectPageFilter />
+                  <DatePageFilter />
+                </PageFilterBar>
+              </TopMenuContainer>
+              <Flex>
+                <PerformanceScoreBreakdownChart transaction={transaction} />
+              </Flex>
+              <WebVitalsRingMeters
+                projectScore={projectScore}
+                onClick={webVital => setState({...state, webVital})}
                 transaction={transaction}
               />
-              <PageOverviewFeaturedTagsList
-                tag="geo.country_code"
-                title={t('Slowest Regions')}
+              {/* TODO: Need to pass in a handler function to each tag list here to handle opening detail panel for tags */}
+              <Flex>
+                <PageOverviewFeaturedTagsList
+                  tag="browser.name"
+                  title={t('Slowest Browsers')}
+                  transaction={transaction}
+                />
+                <PageOverviewFeaturedTagsList
+                  tag="release"
+                  title={t('Slowest Releases')}
+                  transaction={transaction}
+                />
+                <PageOverviewFeaturedTagsList
+                  tag="geo.country_code"
+                  title={t('Slowest Regions')}
+                  transaction={transaction}
+                />
+              </Flex>
+            </Layout.Main>
+            <Layout.Side>
+              <PageOverviewSidebar
+                projectScore={projectScore}
                 transaction={transaction}
               />
-            </Flex>
-          </Layout.Main>
-          <Layout.Side>
-            <PageOverviewSidebar projectScore={projectScore} transaction={transaction} />
-          </Layout.Side>
-        </Layout.Body>
+            </Layout.Side>
+          </Layout.Body>
+        )}
         <PageOverviewWebVitalsDetailPanel
           webVital={state.webVital}
           onClose={() => {

static/app/views/performance/transactionSummary/aggregateSpanWaterfall/index.tsx

@@ -40,7 +40,7 @@ function AggregateSpanWaterfall(): React.ReactElement {
         projects={projects.projects}
         tab={Tab.AGGREGATE_WATERFALL}
         generateEventView={() => EventView.fromLocation(location)}
-        getDocumentTitle={() => t(`Aggregate Waterfall: %s`, transaction)}
+        getDocumentTitle={() => t(`Aggregate Spans: %s`, transaction)}
         childComponent={() => {
           return (
             <Layout.Main fullWidth>

static/app/views/performance/transactionSummary/header.tsx

@@ -230,10 +230,10 @@ function TransactionHeader({
               </TabList.Item>
               <TabList.Item
                 key={Tab.AGGREGATE_WATERFALL}
-                textValue={t('Aggregate Waterfall')}
+                textValue={t('Aggregate Spans')}
                 hidden={!hasAggregateWaterfall}
               >
-                {t('Aggregate Waterfall')}
+                {t('Aggregate Spans')}
               </TabList.Item>
             </TabList>
           );