Skip to content

Commit

Permalink
feat(starfish): add document titles to db module (#53098)
Browse files Browse the repository at this point in the history 
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">
  • Loading branch information
@DominikB2014
DominikB2014 committed Jul 18, 2023
1 parent c3c1b08 commit 7aa790c
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 144 deletions.
41 changes: 24 additions & 17 deletions static/app/views/starfish/modules/DBModule.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
}
259 changes: 132 additions & 127 deletions static/app/views/starfish/views/spanSummaryPage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
);
}

Expand Down

0 comments on commit 7aa790c

Please sign in to comment.