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} /> ); }