Skip to content

Commit 90d8b5b

Browse files
edwardgou-sentryedwardgou-sentry
authored
feat(starfish): Replaces usage of p95 in the Database Module with avg (#53515)
Replaces usage of p95 in the Database Module with avg in the frontend. Also cleans ups some types and column related constants.
1 parent af3ae3b commit 90d8b5b

File tree

15 files changed

+88
-82
lines changed

15 files changed

+88
-82
lines changed

‎static/app/views/starfish/colours.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ import {CHART_PALETTE} from 'sentry/constants/chartPalette';
33
export const THROUGHPUT_COLOR = CHART_PALETTE[3][3];
44
export const P50_COLOR = CHART_PALETTE[3][1];
55
export const P95_COLOR = CHART_PALETTE[0][0];
6+
export const AVG_COLOR = CHART_PALETTE[0][0];
67
export const ERRORS_COLOR = CHART_PALETTE[5][3];

‎static/app/views/starfish/components/samplesTable/common.tsx

+11-7
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,22 @@ import {getDuration} from 'sentry/utils/formatters';
55
import {TextAlignRight} from 'sentry/views/starfish/components/textAlign';
66

77
type Props = {
8+
compareToDuration: number;
89
duration: number;
9-
p95: number;
1010
containerProps?: React.DetailedHTMLProps<
1111
React.HTMLAttributes<HTMLSpanElement>,
1212
HTMLSpanElement
1313
>;
1414
};
1515

16-
export function DurationComparisonCell({duration, p95, containerProps}: Props) {
17-
const diff = duration - p95;
16+
export function DurationComparisonCell({
17+
duration,
18+
compareToDuration,
19+
containerProps,
20+
}: Props) {
21+
const diff = duration - compareToDuration;
1822

19-
if (isNearBaseline(duration, p95)) {
23+
if (isNearBaseline(duration, compareToDuration)) {
2024
return <TextAlignRight {...containerProps}>{t('Near baseline')}</TextAlignRight>;
2125
}
2226

@@ -30,9 +34,9 @@ export function DurationComparisonCell({duration, p95, containerProps}: Props) {
3034
);
3135
}
3236

33-
export const isNearBaseline = (duration: number, p95: number) => {
34-
const maxDiff = 0.03 * p95;
35-
const diff = Math.abs(duration - p95);
37+
export const isNearBaseline = (duration: number, compareToDuration: number) => {
38+
const maxDiff = 0.03 * compareToDuration;
39+
const diff = Math.abs(duration - compareToDuration);
3640
return diff < maxDiff;
3741
};
3842

‎static/app/views/starfish/components/samplesTable/spanSamplesTable.tsx

+16-7
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,12 @@ import {
1111
} from 'sentry/views/starfish/components/textAlign';
1212
import {SpanSample} from 'sentry/views/starfish/queries/useSpanSamples';
1313

14-
type Keys = 'transaction_id' | 'timestamp' | 'duration' | 'p95_comparison';
14+
type Keys =
15+
| 'transaction_id'
16+
| 'timestamp'
17+
| 'duration'
18+
| 'p95_comparison'
19+
| 'avg_comparison';
1520
type TableColumnHeader = GridColumnHeader<Keys>;
1621

1722
const COLUMN_ORDER: TableColumnHeader[] = [
@@ -26,7 +31,7 @@ const COLUMN_ORDER: TableColumnHeader[] = [
2631
width: 200,
2732
},
2833
{
29-
key: 'p95_comparison',
34+
key: 'avg_comparison',
3035
name: 'Compared to baseline',
3136
width: 200,
3237
},
@@ -43,9 +48,9 @@ type SpanTableRow = {
4348
} & SpanSample;
4449

4550
type Props = {
51+
avg: number;
4652
data: SpanTableRow[];
4753
isLoading: boolean;
48-
p95: number;
4954
highlightedSpanId?: string;
5055
onMouseLeaveSample?: () => void;
5156
onMouseOverSample?: (sample: SpanSample) => void;
@@ -54,7 +59,7 @@ type Props = {
5459
export function SpanSamplesTable({
5560
isLoading,
5661
data,
57-
p95,
62+
avg,
5863
highlightedSpanId,
5964
onMouseLeaveSample,
6065
onMouseOverSample,
@@ -74,7 +79,11 @@ export function SpanSamplesTable({
7479
}
7580

7681
function renderHeadCell(column: GridColumnHeader): React.ReactNode {
77-
if (column.key === 'p95_comparison' || column.key === 'duration') {
82+
if (
83+
column.key === 'p95_comparison' ||
84+
column.key === 'avg_comparison' ||
85+
column.key === 'duration'
86+
) {
7887
return (
7988
<TextAlignRight>
8089
<OverflowEllipsisTextContainer>{column.name}</OverflowEllipsisTextContainer>
@@ -110,12 +119,12 @@ export function SpanSamplesTable({
110119
);
111120
}
112121

113-
if (column.key === 'p95_comparison') {
122+
if (column.key === 'avg_comparison') {
114123
return (
115124
<DurationComparisonCell
116125
containerProps={commonProps}
117126
duration={row['span.self_time']}
118-
p95={p95}
127+
compareToDuration={avg}
119128
/>
120129
);
121130
}

‎static/app/views/starfish/components/samplesTable/transactionSamplesTable.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,9 @@ export function TransactionSamplesTable({queryConditions, sampleFilter}: Props)
191191
return (
192192
<DurationComparisonCell
193193
duration={row['transaction.duration']}
194-
p95={(aggregatesData?.['p95(transaction.duration)'] as number) ?? 0}
194+
compareToDuration={
195+
(aggregatesData?.['p95(transaction.duration)'] as number) ?? 0
196+
}
195197
/>
196198
);
197199
}

‎static/app/views/starfish/components/tableCells/renderHeadCell.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,11 @@ type Options = {
2020
const {SPAN_SELF_TIME} = SpanMetricsFields;
2121

2222
export const SORTABLE_FIELDS = new Set([
23+
`avg(${SPAN_SELF_TIME})`,
2324
`p95(${SPAN_SELF_TIME})`,
24-
`percentile_percent_change(${SPAN_SELF_TIME}, 0.95)`,
2525
'sps()',
26-
'sps_percent_change()',
2726
'time_spent_percentage()',
28-
'time_spent_percentage(local)',
2927
'http_error_count()',
30-
'http_error_count_percent_change()',
3128
]);
3229

3330
export const renderHeadCell = ({column, location, sort}: Options) => {

‎static/app/views/starfish/queries/useSpanList.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,13 @@ const {SPAN_SELF_TIME, SPAN_DESCRIPTION, SPAN_GROUP, SPAN_OP, SPAN_DOMAIN} =
1414
SpanMetricsFields;
1515

1616
export type SpanMetrics = {
17+
'avg(span.self_time)': number;
1718
'http_error_count()': number;
18-
'http_error_count_percent_change()': number;
19-
'p95(span.self_time)': number;
20-
'percentile_percent_change(span.self_time, 0.95)': number;
2119
'span.description': string;
2220
'span.domain': string;
2321
'span.group': string;
2422
'span.op': string;
2523
'sps()': number;
26-
'sps_percent_change()': number;
2724
'sum(span.self_time)': number;
2825
'time_spent_percentage()': number;
2926
'time_spent_percentage(local)': number;
@@ -87,7 +84,7 @@ function getEventView(
8784
SPAN_DOMAIN,
8885
'sps()',
8986
`sum(${SPAN_SELF_TIME})`,
90-
`p95(${SPAN_SELF_TIME})`,
87+
`avg(${SPAN_SELF_TIME})`,
9188
'http_error_count()',
9289
];
9390

‎static/app/views/starfish/queries/useSpanTransactionMetrics.tsx

+2-6
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,9 @@ import {useWrappedDiscoverQuery} from 'sentry/views/starfish/utils/useSpansQuery
1111
const {SPAN_SELF_TIME, SPAN_GROUP} = SpanMetricsFields;
1212

1313
export type SpanTransactionMetrics = {
14+
'avg(span.self_time)': number;
1415
'http_error_count()': number;
15-
'http_error_count_percent_change()': number;
16-
'p50(span.self_time)': number;
17-
'p95(span.self_time)': number;
18-
'percentile_percent_change(span.self_time, 0.95)': number;
1916
'sps()': number;
20-
'sps_percent_change()': number;
2117
'sum(span.self_time)': number;
2218
'time_spent_percentage(local)': number;
2319
transaction: string;
@@ -67,7 +63,7 @@ function getEventView(
6763
'transaction.method',
6864
'sps()',
6965
`sum(${SPAN_SELF_TIME})`,
70-
`p95(${SPAN_SELF_TIME})`,
66+
`avg(${SPAN_SELF_TIME})`,
7167
'time_spent_percentage(local)',
7268
'transaction.op',
7369
'http_error_count()',

‎static/app/views/starfish/views/spanSummaryPage/index.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
} from 'sentry/utils/performance/contexts/pageError';
2020
import useOrganization from 'sentry/utils/useOrganization';
2121
import {normalizeUrl} from 'sentry/utils/withDomainRequired';
22-
import {ERRORS_COLOR, P95_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colours';
22+
import {AVG_COLOR, ERRORS_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colours';
2323
import Chart, {useSynchronizeCharts} from 'sentry/views/starfish/components/chart';
2424
import ChartPanel from 'sentry/views/starfish/components/chartPanel';
2525
import StarfishDatePicker from 'sentry/views/starfish/components/datePicker';
@@ -86,7 +86,7 @@ function SpanSummaryPage({params, location}: Props) {
8686
'count()',
8787
'sps()',
8888
`sum(${SpanMetricsFields.SPAN_SELF_TIME})`,
89-
`p95(${SpanMetricsFields.SPAN_SELF_TIME})`,
89+
`avg(${SpanMetricsFields.SPAN_SELF_TIME})`,
9090
'time_spent_percentage()',
9191
'http_error_count()',
9292
],
@@ -108,7 +108,7 @@ function SpanSummaryPage({params, location}: Props) {
108108
useSpanMetricsSeries(
109109
groupId,
110110
queryFilter,
111-
[`p95(${SpanMetricsFields.SPAN_SELF_TIME})`, 'sps()', 'http_error_count()'],
111+
[`avg(${SpanMetricsFields.SPAN_SELF_TIME})`, 'sps()', 'http_error_count()'],
112112
'api.starfish.span-summary-page-metrics-chart'
113113
);
114114

@@ -185,7 +185,7 @@ function SpanSummaryPage({params, location}: Props) {
185185
<ThroughputCell throughputPerSecond={spanMetrics?.['sps()']} />
186186
</Block>
187187
<Block
188-
title={t('Duration (P95)')}
188+
title={DataTitles.avg}
189189
description={tct(
190190
'95% of [spanType] in the selected period have a lower duration than this value',
191191
{
@@ -197,7 +197,7 @@ function SpanSummaryPage({params, location}: Props) {
197197
>
198198
<DurationCell
199199
milliseconds={
200-
spanMetrics?.[`p95(${SpanMetricsFields.SPAN_SELF_TIME})`]
200+
spanMetrics?.[`avg(${SpanMetricsFields.SPAN_SELF_TIME})`]
201201
}
202202
/>
203203
</Block>
@@ -218,7 +218,7 @@ function SpanSummaryPage({params, location}: Props) {
218218
<TimeSpentCell
219219
timeSpentPercentage={spanMetrics?.['time_spent_percentage()']}
220220
totalSpanTime={
221-
spanMetrics?.[`p95(${SpanMetricsFields.SPAN_SELF_TIME})`]
221+
spanMetrics?.[`avg(${SpanMetricsFields.SPAN_SELF_TIME})`]
222222
}
223223
/>
224224
</Block>
@@ -261,17 +261,17 @@ function SpanSummaryPage({params, location}: Props) {
261261
</Block>
262262

263263
<Block>
264-
<ChartPanel title={DataTitles.p95}>
264+
<ChartPanel title={DataTitles.avg}>
265265
<Chart
266266
height={140}
267267
data={[
268268
spanMetricsSeriesData?.[
269-
`p95(${SpanMetricsFields.SPAN_SELF_TIME})`
269+
`avg(${SpanMetricsFields.SPAN_SELF_TIME})`
270270
],
271271
]}
272272
loading={areSpanMetricsSeriesLoading}
273273
utc={false}
274-
chartColors={[P95_COLOR]}
274+
chartColors={[AVG_COLOR]}
275275
isLineChart
276276
definedAxisTicks={4}
277277
/>

‎static/app/views/starfish/views/spanSummaryPage/sampleList/durationChart/index.tsx

+17-17
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {useTheme} from '@emotion/react';
33
import {t} from 'sentry/locale';
44
import {EChartClickHandler, EChartHighlightHandler, Series} from 'sentry/types/echarts';
55
import {usePageError} from 'sentry/utils/performance/contexts/pageError';
6-
import {P95_COLOR} from 'sentry/views/starfish/colours';
6+
import {AVG_COLOR} from 'sentry/views/starfish/colours';
77
import Chart from 'sentry/views/starfish/components/chart';
88
import {isNearBaseline} from 'sentry/views/starfish/components/samplesTable/common';
99
import {useSpanMetrics} from 'sentry/views/starfish/queries/useSpanMetrics';
@@ -39,16 +39,16 @@ function DurationChart({
3939

4040
const getSampleSymbol = (
4141
duration: number,
42-
p95: number
42+
compareToDuration: number
4343
): {color: string; symbol: string} => {
44-
if (isNearBaseline(duration, p95)) {
44+
if (isNearBaseline(duration, compareToDuration)) {
4545
return {
4646
symbol: 'path://M 0 0 V -8 L 5 0 L 0 8 L -5 0 L 0 -8',
4747
color: theme.gray300,
4848
};
4949
}
5050

51-
return duration > p95
51+
return duration > compareToDuration
5252
? {
5353
symbol: 'path://M 5 4 L 0 -4 L -5 4 L 5 4',
5454
color: theme.red300,
@@ -66,18 +66,18 @@ function DurationChart({
6666
} = useSpanMetricsSeries(
6767
groupId,
6868
{transactionName, 'transaction.method': transactionMethod},
69-
[`p95(${SPAN_SELF_TIME})`],
69+
[`avg(${SPAN_SELF_TIME})`],
7070
'api.starfish.sidebar-span-metrics-chart'
7171
);
7272

7373
const {data: spanMetrics, error: spanMetricsError} = useSpanMetrics(
7474
groupId,
7575
{transactionName, 'transaction.method': transactionMethod},
76-
[`p95(${SPAN_SELF_TIME})`, SPAN_OP],
77-
'api.starfish.span-summary-panel-samples-table-p95'
76+
[`avg(${SPAN_SELF_TIME})`, SPAN_OP],
77+
'api.starfish.span-summary-panel-samples-table-avg'
7878
);
7979

80-
const p95 = spanMetrics?.[`p95(${SPAN_SELF_TIME})`] || 0;
80+
const avg = spanMetrics?.[`avg(${SPAN_SELF_TIME})`] || 0;
8181

8282
const {
8383
data: spans,
@@ -89,11 +89,11 @@ function DurationChart({
8989
transactionMethod,
9090
});
9191

92-
const baselineP95Series: Series = {
93-
seriesName: 'Baseline P95',
92+
const baselineAvgSeries: Series = {
93+
seriesName: 'Baseline Average',
9494
data: [],
9595
markLine: {
96-
data: [{valueDim: 'x', yAxis: p95}],
96+
data: [{valueDim: 'x', yAxis: avg}],
9797
symbol: ['none', 'none'],
9898
lineStyle: {
9999
color: theme.gray400,
@@ -102,7 +102,7 @@ function DurationChart({
102102
label: {
103103
fontSize: 11,
104104
position: 'insideEndBottom',
105-
formatter: () => 'Baseline P95',
105+
formatter: () => 'Baseline Average',
106106
},
107107
},
108108
};
@@ -120,8 +120,8 @@ function DurationChart({
120120
value: duration,
121121
},
122122
],
123-
symbol: getSampleSymbol(duration, p95).symbol,
124-
color: getSampleSymbol(duration, p95).color,
123+
symbol: getSampleSymbol(duration, avg).symbol,
124+
color: getSampleSymbol(duration, avg).color,
125125
symbolSize: span_id === highlightedSpanId ? 15 : 10,
126126
seriesName: transaction_id.substring(0, 8),
127127
})
@@ -170,21 +170,21 @@ function DurationChart({
170170

171171
return (
172172
<div onMouseLeave={handleMouseLeave}>
173-
<h5>{DataTitles.p95}</h5>
173+
<h5>{DataTitles.avg}</h5>
174174
<Chart
175175
height={140}
176176
onClick={handleChartClick}
177177
onHighlight={handleChartHighlight}
178178
aggregateOutputFormat="duration"
179-
data={[spanMetricsSeriesData?.[`p95(${SPAN_SELF_TIME})`], baselineP95Series]}
179+
data={[spanMetricsSeriesData?.[`avg(${SPAN_SELF_TIME})`], baselineAvgSeries]}
180180
loading={isLoading}
181181
scatterPlot={
182182
areSpanSamplesLoading || areSpanSamplesRefetching
183183
? undefined
184184
: sampledSpanDataSeries
185185
}
186186
utc={false}
187-
chartColors={[P95_COLOR, 'black']}
187+
chartColors={[AVG_COLOR, 'black']}
188188
isLineChart
189189
definedAxisTicks={4}
190190
/>

0 commit comments

Comments
 (0)