From 7aa790cc772dc2c005079fbe3abc9fb50d184031 Mon Sep 17 00:00:00 2001
From: Dominik Buszowiecki <44422760+DominikB2014@users.noreply.github.com>
Date: Tue, 18 Jul 2023 14:39:34 -0400
Subject: [PATCH] feat(starfish): add document titles to db module (#53098)

Adds titles to match the breadcrumbs
i.e
<img width="353" alt="image"
src="https://github.com/getsentry/sentry/assets/44422760/d134433e-cd54-4268-b056-926491840ca6">
---
 .../app/views/starfish/modules/DBModule.tsx   |  41 +--
 .../starfish/views/spanSummaryPage/index.tsx  | 259 +++++++++---------
 2 files changed, 156 insertions(+), 144 deletions(-)

diff --git a/static/app/views/starfish/modules/DBModule.tsx b/static/app/views/starfish/modules/DBModule.tsx
index 1daab8ded94302..6c3d5a626f9c24 100644
--- a/static/app/views/starfish/modules/DBModule.tsx
+++ b/static/app/views/starfish/modules/DBModule.tsx
@@ -1,32 +1,39 @@
 import * as Layout from 'sentry/components/layouts/thirds';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {
   PageErrorAlert,
   PageErrorProvider,
 } from 'sentry/utils/performance/contexts/pageError';
+import useOrganization from 'sentry/utils/useOrganization';
 import {ModuleName} from 'sentry/views/starfish/types';
+import {ROUTE_NAMES} from 'sentry/views/starfish/utils/routeNames';
 import SpansView from 'sentry/views/starfish/views/spans/spansView';
 
 export default function DBModule() {
+  const organization = useOrganization();
+
   return (
-    <Layout.Page>
-      <PageErrorProvider>
-        <Layout.Header>
-          <Layout.HeaderContent>
-            <Layout.Title>{t('Database Queries')}</Layout.Title>
-          </Layout.HeaderContent>
-        </Layout.Header>
+    <SentryDocumentTitle title={ROUTE_NAMES.database} orgSlug={organization.slug}>
+      <Layout.Page>
+        <PageErrorProvider>
+          <Layout.Header>
+            <Layout.HeaderContent>
+              <Layout.Title>{t('Database Queries')}</Layout.Title>
+            </Layout.HeaderContent>
+          </Layout.Header>
 
-        <Layout.Body>
-          <Layout.Main fullWidth>
-            <PageErrorAlert />
-            <PageFiltersContainer>
-              <SpansView moduleName={ModuleName.DB} />
-            </PageFiltersContainer>
-          </Layout.Main>
-        </Layout.Body>
-      </PageErrorProvider>
-    </Layout.Page>
+          <Layout.Body>
+            <Layout.Main fullWidth>
+              <PageErrorAlert />
+              <PageFiltersContainer>
+                <SpansView moduleName={ModuleName.DB} />
+              </PageFiltersContainer>
+            </Layout.Main>
+          </Layout.Body>
+        </PageErrorProvider>
+      </Layout.Page>
+    </SentryDocumentTitle>
   );
 }
diff --git a/static/app/views/starfish/views/spanSummaryPage/index.tsx b/static/app/views/starfish/views/spanSummaryPage/index.tsx
index 0bccd49f56914b..3a4568af05ee31 100644
--- a/static/app/views/starfish/views/spanSummaryPage/index.tsx
+++ b/static/app/views/starfish/views/spanSummaryPage/index.tsx
@@ -9,6 +9,7 @@ import PageFiltersContainer from 'sentry/components/organizations/pageFilters/co
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import QuestionTooltip from 'sentry/components/questionTooltip';
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {fromSorts} from 'sentry/utils/discover/eventView';
@@ -137,155 +138,159 @@ function SpanSummaryPage({params, location}: Props) {
   });
 
   return (
-    <Layout.Page>
-      <PageFiltersContainer>
-        <PageErrorProvider>
-          <Layout.Header>
-            <Layout.HeaderContent>
-              {!isSpanMetricsLoading && <Breadcrumbs crumbs={crumbs} />}
-              <Layout.Title>
-                {endpointMethod && endpoint
-                  ? `${endpointMethod} ${endpoint}`
-                  : !isSpanMetricsLoading && title}
-              </Layout.Title>
-            </Layout.HeaderContent>
-          </Layout.Header>
-          <Layout.Body>
-            <Layout.Main fullWidth>
-              <PageErrorAlert />
-              <BlockContainer>
-                <FilterOptionsContainer>
-                  <StarfishDatePicker />
-                </FilterOptionsContainer>
+    <SentryDocumentTitle title={title} orgSlug={organization.slug}>
+      <Layout.Page>
+        <PageFiltersContainer>
+          <PageErrorProvider>
+            <Layout.Header>
+              <Layout.HeaderContent>
+                {!isSpanMetricsLoading && <Breadcrumbs crumbs={crumbs} />}
+                <Layout.Title>
+                  {endpointMethod && endpoint
+                    ? `${endpointMethod} ${endpoint}`
+                    : !isSpanMetricsLoading && title}
+                </Layout.Title>
+              </Layout.HeaderContent>
+            </Layout.Header>
+            <Layout.Body>
+              <Layout.Main fullWidth>
+                <PageErrorAlert />
                 <BlockContainer>
-                  <Block title={t('Operation')}>{span?.[SPAN_OP]}</Block>
-                  <Block
-                    title={t('Throughput')}
-                    description={t('Throughput of this span per second')}
-                  >
-                    <ThroughputCell throughputPerSecond={spanMetrics?.['sps()']} />
-                  </Block>
-                  <Block
-                    title={t('Duration (P95)')}
-                    description={t('Time spent in this span')}
-                  >
-                    <DurationCell
-                      milliseconds={spanMetrics?.[`p95(${SPAN_SELF_TIME})`]}
-                    />
-                  </Block>
-                  {span?.[SPAN_OP]?.startsWith('http') && (
+                  <FilterOptionsContainer>
+                    <StarfishDatePicker />
+                  </FilterOptionsContainer>
+                  <BlockContainer>
+                    <Block title={t('Operation')}>{span?.[SPAN_OP]}</Block>
                     <Block
-                      title={t('5XX Responses')}
-                      description={t('5XX responses in this span')}
+                      title={t('Throughput')}
+                      description={t('Throughput of this span per second')}
                     >
-                      <CountCell count={spanMetrics?.[`http_error_count()`]} />
+                      <ThroughputCell throughputPerSecond={spanMetrics?.['sps()']} />
                     </Block>
-                  )}
-                  <Block
-                    title={t('Time Spent')}
-                    description={t(
-                      'Time spent in this span as a proportion of total application time'
+                    <Block
+                      title={t('Duration (P95)')}
+                      description={t('Time spent in this span')}
+                    >
+                      <DurationCell
+                        milliseconds={spanMetrics?.[`p95(${SPAN_SELF_TIME})`]}
+                      />
+                    </Block>
+                    {span?.[SPAN_OP]?.startsWith('http') && (
+                      <Block
+                        title={t('5XX Responses')}
+                        description={t('5XX responses in this span')}
+                      >
+                        <CountCell count={spanMetrics?.[`http_error_count()`]} />
+                      </Block>
                     )}
-                  >
-                    <TimeSpentCell
-                      timeSpentPercentage={spanMetrics?.['time_spent_percentage()']}
-                      totalSpanTime={spanMetrics?.[`p95(${SPAN_SELF_TIME})`]}
-                    />
-                  </Block>
+                    <Block
+                      title={t('Time Spent')}
+                      description={t(
+                        'Time spent in this span as a proportion of total application time'
+                      )}
+                    >
+                      <TimeSpentCell
+                        timeSpentPercentage={spanMetrics?.['time_spent_percentage()']}
+                        totalSpanTime={spanMetrics?.[`p95(${SPAN_SELF_TIME})`]}
+                      />
+                    </Block>
+                  </BlockContainer>
                 </BlockContainer>
-              </BlockContainer>
 
-              {span?.[SPAN_DESCRIPTION] && (
-                <BlockContainer>
-                  <Block>
-                    <Panel>
-                      <DescriptionPanelBody>
-                        <DescriptionContainer>
-                          <DescriptionTitle>{spanDescriptionCardTitle}</DescriptionTitle>
-                          <SpanDescription spanMeta={span} />
-                        </DescriptionContainer>
-                      </DescriptionPanelBody>
-                    </Panel>
-                  </Block>
-
-                  <Block>
-                    <ChartPanel title={DataTitles.throughput}>
-                      <Chart
-                        statsPeriod="24h"
-                        height={140}
-                        data={[spanMetricsThroughputSeries]}
-                        start=""
-                        end=""
-                        loading={areSpanMetricsSeriesLoading}
-                        utc={false}
-                        chartColors={[THROUGHPUT_COLOR]}
-                        isLineChart
-                        definedAxisTicks={4}
-                        aggregateOutputFormat="rate"
-                        tooltipFormatterOptions={{
-                          valueFormatter: value => formatThroughput(value),
-                        }}
-                      />
-                    </ChartPanel>
-                  </Block>
-
-                  <Block>
-                    <ChartPanel title={DataTitles.p95}>
-                      <Chart
-                        statsPeriod="24h"
-                        height={140}
-                        data={[spanMetricsSeriesData?.[`p95(${SPAN_SELF_TIME})`]]}
-                        start=""
-                        end=""
-                        loading={areSpanMetricsSeriesLoading}
-                        utc={false}
-                        chartColors={[P95_COLOR]}
-                        isLineChart
-                        definedAxisTicks={4}
-                      />
-                    </ChartPanel>
-                  </Block>
+                {span?.[SPAN_DESCRIPTION] && (
+                  <BlockContainer>
+                    <Block>
+                      <Panel>
+                        <DescriptionPanelBody>
+                          <DescriptionContainer>
+                            <DescriptionTitle>
+                              {spanDescriptionCardTitle}
+                            </DescriptionTitle>
+                            <SpanDescription spanMeta={span} />
+                          </DescriptionContainer>
+                        </DescriptionPanelBody>
+                      </Panel>
+                    </Block>
 
-                  {span?.[SPAN_OP]?.startsWith('http') && (
                     <Block>
-                      <ChartPanel title={DataTitles.errorCount}>
+                      <ChartPanel title={DataTitles.throughput}>
                         <Chart
                           statsPeriod="24h"
                           height={140}
-                          data={[spanMetricsSeriesData?.[`http_error_count()`]]}
+                          data={[spanMetricsThroughputSeries]}
                           start=""
                           end=""
                           loading={areSpanMetricsSeriesLoading}
                           utc={false}
-                          chartColors={[ERRORS_COLOR]}
+                          chartColors={[THROUGHPUT_COLOR]}
                           isLineChart
                           definedAxisTicks={4}
+                          aggregateOutputFormat="rate"
+                          tooltipFormatterOptions={{
+                            valueFormatter: value => formatThroughput(value),
+                          }}
                         />
                       </ChartPanel>
                     </Block>
-                  )}
-                </BlockContainer>
-              )}
-
-              {span && (
-                <SpanTransactionsTable
-                  span={span}
-                  sort={sort}
-                  endpoint={endpoint}
-                  endpointMethod={endpointMethod}
+
+                    <Block>
+                      <ChartPanel title={DataTitles.p95}>
+                        <Chart
+                          statsPeriod="24h"
+                          height={140}
+                          data={[spanMetricsSeriesData?.[`p95(${SPAN_SELF_TIME})`]]}
+                          start=""
+                          end=""
+                          loading={areSpanMetricsSeriesLoading}
+                          utc={false}
+                          chartColors={[P95_COLOR]}
+                          isLineChart
+                          definedAxisTicks={4}
+                        />
+                      </ChartPanel>
+                    </Block>
+
+                    {span?.[SPAN_OP]?.startsWith('http') && (
+                      <Block>
+                        <ChartPanel title={DataTitles.errorCount}>
+                          <Chart
+                            statsPeriod="24h"
+                            height={140}
+                            data={[spanMetricsSeriesData?.[`http_error_count()`]]}
+                            start=""
+                            end=""
+                            loading={areSpanMetricsSeriesLoading}
+                            utc={false}
+                            chartColors={[ERRORS_COLOR]}
+                            isLineChart
+                            definedAxisTicks={4}
+                          />
+                        </ChartPanel>
+                      </Block>
+                    )}
+                  </BlockContainer>
+                )}
+
+                {span && (
+                  <SpanTransactionsTable
+                    span={span}
+                    sort={sort}
+                    endpoint={endpoint}
+                    endpointMethod={endpointMethod}
+                  />
+                )}
+
+                <SampleList
+                  groupId={span.group}
+                  transactionName={transaction}
+                  transactionMethod={transactionMethod}
                 />
-              )}
-
-              <SampleList
-                groupId={span.group}
-                transactionName={transaction}
-                transactionMethod={transactionMethod}
-              />
-            </Layout.Main>
-          </Layout.Body>
-        </PageErrorProvider>
-      </PageFiltersContainer>
-    </Layout.Page>
+              </Layout.Main>
+            </Layout.Body>
+          </PageErrorProvider>
+        </PageFiltersContainer>
+      </Layout.Page>
+    </SentryDocumentTitle>
   );
 }