diff --git a/static/app/views/insights/browser/resources/views/resourceSummaryPage.tsx b/static/app/views/insights/browser/resources/views/resourceSummaryPage.tsx
index a1da1c79853fab..36f2a2afc2496e 100644
--- a/static/app/views/insights/browser/resources/views/resourceSummaryPage.tsx
+++ b/static/app/views/insights/browser/resources/views/resourceSummaryPage.tsx
@@ -119,7 +119,17 @@ function ResourceSummary() {
)}
- {isInDomainView && }
+ {isInDomainView && (
+
+ )}
diff --git a/static/app/views/insights/browser/resources/views/resourcesLandingPage.tsx b/static/app/views/insights/browser/resources/views/resourcesLandingPage.tsx
index c77c09fb64d92d..61dfc086c0b1b6 100644
--- a/static/app/views/insights/browser/resources/views/resourcesLandingPage.tsx
+++ b/static/app/views/insights/browser/resources/views/resourcesLandingPage.tsx
@@ -63,7 +63,20 @@ function ResourcesLandingPage() {
)}
- {isInDomainView && }
+ {isInDomainView && (
+
+ {MODULE_TITLE}
+
+
+ }
+ module={ModuleName.RESOURCE}
+ />
+ )}
diff --git a/static/app/views/insights/browser/webVitals/views/pageOverview.tsx b/static/app/views/insights/browser/webVitals/views/pageOverview.tsx
index 145bc50979906b..b1a0711d9e5061 100644
--- a/static/app/views/insights/browser/webVitals/views/pageOverview.tsx
+++ b/static/app/views/insights/browser/webVitals/views/pageOverview.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo, useState} from 'react';
+import React, {Fragment, useMemo, useState} from 'react';
import styled from '@emotion/styled';
import omit from 'lodash/omit';
@@ -135,24 +135,23 @@ export function PageOverview() {
? undefined
: calculatePerformanceScoreFromStoredTableDataRow(projectScores?.data?.[0]);
+ const handleTabChange = (value: string) => {
+ trackAnalytics('insight.vital.overview.toggle_tab', {
+ organization,
+ tab: value,
+ });
+ browserHistory.push({
+ ...location,
+ query: {
+ ...location.query,
+ tab: value,
+ },
+ });
+ };
+
return (
- {
- trackAnalytics('insight.vital.overview.toggle_tab', {
- organization,
- tab: value,
- });
- browserHistory.push({
- ...location,
- query: {
- ...location.query,
- tab: value,
- },
- });
- }}
- >
+
{!isInDomainView && (
@@ -189,7 +188,45 @@ export function PageOverview() {
)}
- {isInDomainView && }
+ {isInDomainView && (
+
+ {transaction && project && }
+ {transaction ?? t('Page Loads')}
+
+ }
+ headerActions={
+ transactionSummaryTarget && (
+ {
+ trackAnalytics('insight.vital.overview.open_transaction_summary', {
+ organization,
+ });
+ }}
+ size="sm"
+ >
+ {t('View Transaction Summary')}
+
+ )
+ }
+ hideDefaultTabs
+ tabs={{
+ value: tab,
+ onTabChange: handleTabChange,
+ tabList: (
+
+ {LANDING_DISPLAYS.map(({label, field}) => (
+ {label}
+ ))}
+
+ ),
+ }}
+ breadcrumbs={transaction ? [{label: 'Page Summary'}] : []}
+ module={ModuleName.VITAL}
+ />
+ )}
{tab === LandingDisplayField.SPANS ? (
diff --git a/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx b/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx
index 39b52be040546e..d048ad80fa9864 100644
--- a/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx
+++ b/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx
@@ -95,7 +95,20 @@ export function WebVitalsLandingPage() {
)}
- {isInDomainView && }
+ {isInDomainView && (
+
+ {MODULE_TITLE}
+
+
+ }
+ module={ModuleName.VITAL}
+ />
+ )}
diff --git a/static/app/views/insights/http/views/httpDomainSummaryPage.tsx b/static/app/views/insights/http/views/httpDomainSummaryPage.tsx
index 0ec3625062f1d1..7ca5292c7e2e2e 100644
--- a/static/app/views/insights/http/views/httpDomainSummaryPage.tsx
+++ b/static/app/views/insights/http/views/httpDomainSummaryPage.tsx
@@ -223,7 +223,21 @@ export function HTTPDomainSummaryPage() {
)}
{isInDomainView && view === FRONTEND_LANDING_SUB_PATH && (
-
+
+ {project && }
+ {domain || NULL_DOMAIN_DESCRIPTION}
+
+
+ }
+ breadcrumbs={[
+ {
+ label: 'Domain Summary',
+ },
+ ]}
+ module={ModuleName.HTTP}
+ />
)}
{isInDomainView && view === BACKEND_LANDING_SUB_PATH && (
diff --git a/static/app/views/insights/http/views/httpLandingPage.tsx b/static/app/views/insights/http/views/httpLandingPage.tsx
index b58829e522e821..ee61ee7863c733 100644
--- a/static/app/views/insights/http/views/httpLandingPage.tsx
+++ b/static/app/views/insights/http/views/httpLandingPage.tsx
@@ -189,7 +189,18 @@ export function HTTPLandingPage() {
)}
{isInDomainView && view === FRONTEND_LANDING_SUB_PATH && (
-
+
+ {MODULE_TITLE}
+
+
+ }
+ module={ModuleName.HTTP}
+ />
)}
{isInDomainView && view === BACKEND_LANDING_SUB_PATH && (
diff --git a/static/app/views/insights/pages/frontend/frontendOverviewPage.tsx b/static/app/views/insights/pages/frontend/frontendOverviewPage.tsx
index 4de820279414bf..c9180bea4746b5 100644
--- a/static/app/views/insights/pages/frontend/frontendOverviewPage.tsx
+++ b/static/app/views/insights/pages/frontend/frontendOverviewPage.tsx
@@ -30,7 +30,10 @@ import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
import {ViewTrendsButton} from 'sentry/views/insights/common/components/viewTrendsButton';
import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
import {FrontendHeader} from 'sentry/views/insights/pages/frontend/frontendPageHeader';
-import {OVERVIEW_PAGE_ALLOWED_OPS} from 'sentry/views/insights/pages/frontend/settings';
+import {
+ FRONTEND_LANDING_TITLE,
+ OVERVIEW_PAGE_ALLOWED_OPS,
+} from 'sentry/views/insights/pages/frontend/settings';
import {OVERVIEW_PAGE_TITLE} from 'sentry/views/insights/pages/settings';
import {generateFrontendOtherPerformanceEventView} from 'sentry/views/performance/data';
import {
@@ -160,7 +163,10 @@ function FrontendOverviewPage() {
organization={organization}
renderDisabled={NoAccess}
>
- } />
+ }
+ />
diff --git a/static/app/views/insights/pages/frontend/frontendPageHeader.tsx b/static/app/views/insights/pages/frontend/frontendPageHeader.tsx
index f2c28aee1b7a06..883f7f86d1bdba 100644
--- a/static/app/views/insights/pages/frontend/frontendPageHeader.tsx
+++ b/static/app/views/insights/pages/frontend/frontendPageHeader.tsx
@@ -1,6 +1,9 @@
import normalizeUrl from 'sentry/utils/url/normalizeUrl';
import useOrganization from 'sentry/utils/useOrganization';
-import {DomainViewHeader} from 'sentry/views/insights/pages/domainViewHeader';
+import {
+ DomainViewHeader,
+ type Props as HeaderProps,
+} from 'sentry/views/insights/pages/domainViewHeader';
import {
FRONTEND_LANDING_SUB_PATH,
FRONTEND_LANDING_TITLE,
@@ -9,12 +12,23 @@ 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'];
+ hideDefaultTabs?: HeaderProps['hideDefaultTabs'];
+ module?: HeaderProps['selectedModule'];
+ tabs?: HeaderProps['tabs'];
};
// TODO - add props to append to breadcrumbs and change title
-export function FrontendHeader({module, headerActions}: Props) {
+export function FrontendHeader({
+ module,
+ headerActions,
+ headerTitle,
+ breadcrumbs,
+ tabs,
+ hideDefaultTabs,
+}: Props) {
const {slug} = useOrganization();
const frontendBaseUrl = normalizeUrl(
@@ -29,8 +43,11 @@ export function FrontendHeader({module, headerActions}: Props) {
domainTitle={FRONTEND_LANDING_TITLE}
modules={modules}
selectedModule={module}
+ additionalBreadCrumbs={breadcrumbs}
additonalHeaderActions={headerActions}
- headerTitle={FRONTEND_LANDING_TITLE}
+ headerTitle={headerTitle}
+ tabs={tabs}
+ hideDefaultTabs={hideDefaultTabs}
/>
);
}