Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 17, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cc19d38
update backend headers
DominikB2014 Oct 10, 2024
b8ec41d
update domain title
DominikB2014 Oct 10, 2024
d9ccd62
Merge remote-tracking branch 'origin/master' into DominikB2014/update…
DominikB2014 Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion static/app/views/insights/cache/views/cacheLandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
15 changes: 14 additions & 1 deletion static/app/views/insights/database/views/databaseLandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 12 additions & 2 deletions static/app/views/insights/database/views/databaseSpanSummaryPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ export function DatabaseSpanSummaryPage({params}: Props) {
crumbs={[
...crumbs,
{
label: 'Query Summary',
label: t('Query Summary'),
},
]}
/>
Expand All @@ -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>
Expand Down
22 changes: 19 additions & 3 deletions static/app/views/insights/http/views/httpDomainSummaryPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 && (
Expand All @@ -196,7 +204,7 @@ export function HTTPDomainSummaryPage() {
crumbs={[
...crumbs,
{
label: 'Domain Summary',
label: t('Domain Summary'),
},
]}
/>
Expand All @@ -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>
Expand Down
19 changes: 10 additions & 9 deletions static/app/views/insights/http/views/httpLandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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}>
Expand All @@ -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>
Expand Down
6 changes: 5 additions & 1 deletion static/app/views/insights/pages/backend/backendOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,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 {
Expand Down Expand Up @@ -157,7 +158,10 @@ function BackendOverviewPage() {
organization={organization}
renderDisabled={NoAccess}
>
<BackendHeader headerActions={<ViewTrendsButton />} />
<BackendHeader
headerTitle={BACKEND_LANDING_TITLE}
headerActions={<ViewTrendsButton />}
/>
<Layout.Body>
<Layout.Main fullWidth>
<ModuleLayout.Layout>
Expand Down
16 changes: 11 additions & 5 deletions static/app/views/insights/pages/backend/backendPageHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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}
/>
);
}
12 changes: 11 additions & 1 deletion static/app/views/insights/queues/views/destinationSummaryPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
15 changes: 14 additions & 1 deletion static/app/views/insights/queues/views/queuesLandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading