feat(insights): update headers and breadcrumbs on backend domain view (…

…#78948) Work for #77572 Ensures all headers and breadcrumbs are correct within modules on backend domain view. Identical to #78945 But for backend
getsentry · Oct 17, 2024 · a17ab1d · a17ab1d
1 parent 20495aa
commit a17ab1d
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 24 deletions.
diff --git a/static/app/views/insights/cache/views/cacheLandingPage.tsx b/static/app/views/insights/cache/views/cacheLandingPage.tsx
@@ -205,7 +205,20 @@ export function CacheLandingPage() {
         </Layout.Header>
       )}
 
-      {isInDomainView && <BackendHeader module={ModuleName.CACHE} />}
+      {isInDomainView && (
+        <BackendHeader
+          headerTitle={
+            <Fragment>
+              {MODULE_TITLE}
+              <PageHeadingQuestionTooltip
+                docsUrl={MODULE_DOC_LINK}
+                title={MODULE_DESCRIPTION}
+              />
+            </Fragment>
+          }
+          module={ModuleName.CACHE}
+        />
+      )}
 
       <Layout.Body>
         <Layout.Main fullWidth>

diff --git a/static/app/views/insights/database/views/databaseLandingPage.tsx b/static/app/views/insights/database/views/databaseLandingPage.tsx
@@ -186,7 +186,20 @@ export function DatabaseLandingPage() {
         </Layout.Header>
       )}
 
-      {isInDomainView && <BackendHeader module={ModuleName.DB} />}
+      {isInDomainView && (
+        <BackendHeader
+          headerTitle={
+            <React.Fragment>
+              {MODULE_TITLE}
+              <PageHeadingQuestionTooltip
+                docsUrl={MODULE_DOC_LINK}
+                title={MODULE_DESCRIPTION}
+              />
+            </React.Fragment>
+          }
+          module={ModuleName.DB}
+        />
+      )}
 
       <Layout.Body>
         <Layout.Main fullWidth>

diff --git a/static/app/views/insights/database/views/databaseSpanSummaryPage.tsx b/static/app/views/insights/database/views/databaseSpanSummaryPage.tsx
@@ -193,7 +193,7 @@ export function DatabaseSpanSummaryPage({params}: Props) {
               crumbs={[
                 ...crumbs,
                 {
-                  label: 'Query Summary',
+                  label: t('Query Summary'),
                 },
               ]}
             />
@@ -207,7 +207,17 @@ export function DatabaseSpanSummaryPage({params}: Props) {
         </Layout.Header>
       )}
 
-      {isInDomainView && <BackendHeader module={ModuleName.DB} />}
+      {isInDomainView && (
+        <BackendHeader
+          headerTitle={t('Query Summary')}
+          breadcrumbs={[
+            {
+              label: t('Query Summary'),
+            },
+          ]}
+          module={ModuleName.DB}
+        />
+      )}
 
       <Layout.Body>
         <Layout.Main fullWidth>

diff --git a/static/app/views/insights/http/views/httpDomainSummaryPage.tsx b/static/app/views/insights/http/views/httpDomainSummaryPage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 
 import Alert from 'sentry/components/alert';
 import ProjectAvatar from 'sentry/components/avatar/projectAvatar';
@@ -187,6 +187,14 @@ export function HTTPDomainSummaryPage() {
 
   const crumbs = useModuleBreadcrumbs('http');
 
+  const headerTitle = (
+    <Fragment>
+      {project && <ProjectAvatar project={project} size={36} />}
+      {domain || NULL_DOMAIN_DESCRIPTION}
+      <DomainStatusLink domain={domain} />
+    </Fragment>
+  );
+
   return (
     <React.Fragment>
       {!isInDomainView && (
@@ -196,7 +204,7 @@ export function HTTPDomainSummaryPage() {
               crumbs={[
                 ...crumbs,
                 {
-                  label: 'Domain Summary',
+                  label: t('Domain Summary'),
                 },
               ]}
             />
@@ -219,7 +227,15 @@ export function HTTPDomainSummaryPage() {
       )}
 
       {isInDomainView && view === BACKEND_LANDING_SUB_PATH && (
-        <BackendHeader module={ModuleName.HTTP} />
+        <BackendHeader
+          headerTitle={headerTitle}
+          module={ModuleName.HTTP}
+          breadcrumbs={[
+            {
+              label: t('Domain Summary'),
+            },
+          ]}
+        />
       )}
 
       <Layout.Body>

diff --git a/static/app/views/insights/http/views/httpLandingPage.tsx b/static/app/views/insights/http/views/httpLandingPage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 
 import {Breadcrumbs} from 'sentry/components/breadcrumbs';
 import ButtonBar from 'sentry/components/buttonBar';
@@ -164,20 +164,21 @@ export function HTTPLandingPage() {
 
   const crumbs = useModuleBreadcrumbs('http');
 
+  const headerTitle = (
+    <Fragment>
+      {MODULE_TITLE}
+      <PageHeadingQuestionTooltip docsUrl={MODULE_DOC_LINK} title={MODULE_DESCRIPTION} />
+    </Fragment>
+  );
+
   return (
     <React.Fragment>
       {!isInDomainView && (
         <Layout.Header>
           <Layout.HeaderContent>
             <Breadcrumbs crumbs={crumbs} />
 
-            <Layout.Title>
-              {MODULE_TITLE}
-              <PageHeadingQuestionTooltip
-                docsUrl={MODULE_DOC_LINK}
-                title={MODULE_DESCRIPTION}
-              />
-            </Layout.Title>
+            <Layout.Title>{headerTitle}</Layout.Title>
           </Layout.HeaderContent>
           <Layout.HeaderActions>
             <ButtonBar gap={1}>
@@ -192,7 +193,7 @@ export function HTTPLandingPage() {
       )}
 
       {isInDomainView && view === BACKEND_LANDING_SUB_PATH && (
-        <BackendHeader module={ModuleName.HTTP} />
+        <BackendHeader headerTitle={headerTitle} module={ModuleName.HTTP} />
       )}
 
       <Layout.Body>

diff --git a/static/app/views/insights/pages/backend/backendOverviewPage.tsx b/static/app/views/insights/pages/backend/backendOverviewPage.tsx
@@ -30,6 +30,7 @@ import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
 import {ViewTrendsButton} from 'sentry/views/insights/common/viewTrendsButton';
 import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
+import {BACKEND_LANDING_TITLE} from 'sentry/views/insights/pages/backend/settings';
 import {OVERVIEW_PAGE_TITLE} from 'sentry/views/insights/pages/settings';
 import {generateBackendPerformanceEventView} from 'sentry/views/performance/data';
 import {
@@ -160,7 +161,10 @@ function BackendOverviewPage() {
       organization={organization}
       renderDisabled={NoAccess}
     >
-      <BackendHeader headerActions={<ViewTrendsButton />} />
+      <BackendHeader
+        headerTitle={BACKEND_LANDING_TITLE}
+        headerActions={<ViewTrendsButton />}
+      />
       <Layout.Body>
         <Layout.Main fullWidth>
           <ModuleLayout.Layout>

diff --git a/static/app/views/insights/pages/backend/backendPageHeader.tsx b/static/app/views/insights/pages/backend/backendPageHeader.tsx
@@ -4,17 +4,22 @@ import {
   BACKEND_LANDING_SUB_PATH,
   BACKEND_LANDING_TITLE,
 } from 'sentry/views/insights/pages/backend/settings';
-import {DomainViewHeader} from 'sentry/views/insights/pages/domainViewHeader';
+import {
+  DomainViewHeader,
+  type Props as HeaderProps,
+} from 'sentry/views/insights/pages/domainViewHeader';
 import {DOMAIN_VIEW_BASE_URL} from 'sentry/views/insights/pages/settings';
 import {ModuleName} from 'sentry/views/insights/types';
 
 type Props = {
-  headerActions?: React.ReactNode;
-  module?: ModuleName;
+  headerTitle: HeaderProps['headerTitle'];
+  breadcrumbs?: HeaderProps['additionalBreadCrumbs'];
+  headerActions?: HeaderProps['additonalHeaderActions'];
+  module?: HeaderProps['selectedModule'];
 };
 
 // TODO - add props to append to breadcrumbs and change title
-export function BackendHeader({module, headerActions}: Props) {
+export function BackendHeader({module, headerActions, headerTitle, breadcrumbs}: Props) {
   const {slug} = useOrganization();
 
   const backendBaseUrl = normalizeUrl(
@@ -26,10 +31,11 @@ export function BackendHeader({module, headerActions}: Props) {
     <DomainViewHeader
       domainBaseUrl={backendBaseUrl}
       domainTitle={BACKEND_LANDING_TITLE}
-      headerTitle={BACKEND_LANDING_TITLE}
+      headerTitle={headerTitle}
       additonalHeaderActions={headerActions}
       modules={modules}
       selectedModule={module}
+      additionalBreadCrumbs={breadcrumbs}
     />
   );
 }
diff --git a/static/app/views/insights/queues/views/destinationSummaryPage.tsx b/static/app/views/insights/queues/views/destinationSummaryPage.tsx
@@ -75,7 +75,17 @@ function DestinationSummaryPage() {
         </Layout.Header>
       )}
 
-      {isInDomainView && <BackendHeader module={ModuleName.QUEUE} />}
+      {isInDomainView && (
+        <BackendHeader
+          headerTitle={destination}
+          breadcrumbs={[
+            {
+              label: DESTINATION_TITLE,
+            },
+          ]}
+          module={ModuleName.QUEUE}
+        />
+      )}
 
       <Layout.Body>
         <Layout.Main fullWidth>

diff --git a/static/app/views/insights/queues/views/queuesLandingPage.tsx b/static/app/views/insights/queues/views/queuesLandingPage.tsx
@@ -107,7 +107,20 @@ function QueuesLandingPage() {
         </Layout.Header>
       )}
 
-      {isInDomainView && <BackendHeader module={ModuleName.QUEUE} />}
+      {isInDomainView && (
+        <BackendHeader
+          headerTitle={
+            <Fragment>
+              {MODULE_TITLE}
+              <PageHeadingQuestionTooltip
+                docsUrl={MODULE_DOC_LINK}
+                title={MODULE_DESCRIPTION}
+              />
+            </Fragment>
+          }
+          module={ModuleName.QUEUE}
+        />
+      )}
 
       <Layout.Body>
         <Layout.Main fullWidth>