Skip to content

Commit 0ca02e0

Browse files
billyvgbillyvg
committed
ref(insights): Refactor ResourceSummaryCharts into separate modules
Part of #88560
1 parent 290e7c9 commit 0ca02e0

File tree

6 files changed

+157
-90
lines changed

6 files changed

+157
-90
lines changed

‎static/app/views/insights/browser/resources/components/charts/resourceSummaryCharts.tsx

Lines changed: 7 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,23 @@
11
import {Fragment} from 'react';
22

3-
import {t} from 'sentry/locale';
4-
import {MutableSearch} from 'sentry/utils/tokenizeSearch';
5-
import {Referrer} from 'sentry/views/insights/browser/resources/referrer';
6-
import {DATA_TYPE, FIELD_ALIASES} from 'sentry/views/insights/browser/resources/settings';
7-
import {useResourceModuleFilters} from 'sentry/views/insights/browser/resources/utils/useResourceFilters';
8-
import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
93
import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
10-
import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
11-
import {
12-
getDurationChartTitle,
13-
getThroughputChartTitle,
14-
} from 'sentry/views/insights/common/views/spans/types';
15-
import {SpanMetricsField} from 'sentry/views/insights/types';
16-
17-
const {
18-
SPAN_SELF_TIME,
19-
HTTP_RESPONSE_CONTENT_LENGTH,
20-
HTTP_DECODED_RESPONSE_CONTENT_LENGTH,
21-
HTTP_RESPONSE_TRANSFER_SIZE,
22-
RESOURCE_RENDER_BLOCKING_STATUS,
23-
} = SpanMetricsField;
24-
25-
function ResourceSummaryCharts(props: {groupId: string}) {
26-
const filters = useResourceModuleFilters();
27-
28-
const mutableSearch = MutableSearch.fromQueryObject({
29-
'span.group': props.groupId,
30-
...(filters[RESOURCE_RENDER_BLOCKING_STATUS]
31-
? {
32-
[RESOURCE_RENDER_BLOCKING_STATUS]: filters[RESOURCE_RENDER_BLOCKING_STATUS],
33-
}
34-
: {}),
35-
...(filters[SpanMetricsField.USER_GEO_SUBREGION]
36-
? {
37-
[SpanMetricsField.USER_GEO_SUBREGION]: `[${filters[SpanMetricsField.USER_GEO_SUBREGION].join(',')}]`,
38-
}
39-
: {}),
40-
});
41-
42-
const {
43-
data: spanMetricsSeriesData,
44-
isPending: areSpanMetricsSeriesLoading,
45-
error: spanMetricsSeriesError,
46-
} = useSpanMetricsSeries(
47-
{
48-
search: mutableSearch,
49-
yAxis: [
50-
`epm()`,
51-
`avg(${SPAN_SELF_TIME})`,
52-
`avg(${HTTP_RESPONSE_CONTENT_LENGTH})`,
53-
`avg(${HTTP_DECODED_RESPONSE_CONTENT_LENGTH})`,
54-
`avg(${HTTP_RESPONSE_TRANSFER_SIZE})`,
55-
],
56-
enabled: Boolean(props.groupId),
57-
transformAliasToInputFormat: true,
58-
},
59-
Referrer.RESOURCE_SUMMARY_CHARTS
60-
);
61-
62-
if (spanMetricsSeriesData) {
63-
spanMetricsSeriesData[`avg(${HTTP_RESPONSE_TRANSFER_SIZE})`].lineStyle = {
64-
type: 'dashed',
65-
};
66-
spanMetricsSeriesData[`avg(${HTTP_DECODED_RESPONSE_CONTENT_LENGTH})`].lineStyle = {
67-
type: 'dashed',
68-
};
69-
}
4+
import {BrowserResourceAverageSizeChartWidget} from 'sentry/views/insights/common/components/widgets/browserResourceAverageSizeChartWidget';
5+
import {BrowserResourceDurationChartWidget} from 'sentry/views/insights/common/components/widgets/browserResourceDurationChartWidget';
6+
import {BrowserResourceThroughputChartWidget} from 'sentry/views/insights/common/components/widgets/browserResourceThroughtputChartWidget';
707

8+
function ResourceSummaryCharts() {
719
return (
7210
<Fragment>
7311
<ModuleLayout.Third>
74-
<InsightsLineChartWidget
75-
title={getThroughputChartTitle('resource')}
76-
series={[spanMetricsSeriesData?.[`epm()`]]}
77-
isLoading={areSpanMetricsSeriesLoading}
78-
error={spanMetricsSeriesError}
79-
/>
12+
<BrowserResourceThroughputChartWidget />
8013
</ModuleLayout.Third>
8114

8215
<ModuleLayout.Third>
83-
<InsightsLineChartWidget
84-
title={getDurationChartTitle('resource')}
85-
series={[spanMetricsSeriesData?.[`avg(${SPAN_SELF_TIME})`]]}
86-
isLoading={areSpanMetricsSeriesLoading}
87-
error={spanMetricsSeriesError}
88-
/>
16+
<BrowserResourceDurationChartWidget />
8917
</ModuleLayout.Third>
9018

9119
<ModuleLayout.Third>
92-
<InsightsLineChartWidget
93-
title={t('Average %s Size', DATA_TYPE)}
94-
series={[
95-
spanMetricsSeriesData?.[`avg(${HTTP_DECODED_RESPONSE_CONTENT_LENGTH})`],
96-
spanMetricsSeriesData?.[`avg(${HTTP_RESPONSE_TRANSFER_SIZE})`],
97-
spanMetricsSeriesData?.[`avg(${HTTP_RESPONSE_CONTENT_LENGTH})`],
98-
]}
99-
aliases={FIELD_ALIASES}
100-
isLoading={areSpanMetricsSeriesLoading}
101-
error={spanMetricsSeriesError}
102-
/>
20+
<BrowserResourceAverageSizeChartWidget />
10321
</ModuleLayout.Third>
10422
</Fragment>
10523
);

‎static/app/views/insights/browser/resources/views/resourceSummaryPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ function ResourceSummary() {
155155
</ModuleLayout.Full>
156156
)}
157157

158-
<ResourceSummaryCharts groupId={groupId!} />
158+
<ResourceSummaryCharts />
159159

160160
<ModuleLayout.Full>
161161
<ResourceSummaryTable />

‎static/app/views/insights/common/components/widgets/browserResourceAverageSizeChartWidget.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import {t} from 'sentry/locale';
2+
import {useParams} from 'sentry/utils/useParams';
3+
import {DATA_TYPE, FIELD_ALIASES} from 'sentry/views/insights/browser/resources/settings';
4+
import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
5+
import {useBrowserResourceSeries} from 'sentry/views/insights/common/components/widgets/hooks/useBrowserResourceSeries';
6+
import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
7+
import {SpanMetricsField} from 'sentry/views/insights/types';
8+
9+
const {
10+
HTTP_RESPONSE_CONTENT_LENGTH,
11+
HTTP_DECODED_RESPONSE_CONTENT_LENGTH,
12+
HTTP_RESPONSE_TRANSFER_SIZE,
13+
} = SpanMetricsField;
14+
15+
export function BrowserResourceAverageSizeChartWidget(props: LoadableChartWidgetProps) {
16+
const {groupId} = useParams();
17+
18+
const {
19+
data: spanMetricsSeriesData,
20+
isPending: areSpanMetricsSeriesLoading,
21+
error: spanMetricsSeriesError,
22+
} = useBrowserResourceSeries({groupId});
23+
24+
if (spanMetricsSeriesData) {
25+
spanMetricsSeriesData[`avg(${HTTP_RESPONSE_TRANSFER_SIZE})`].lineStyle = {
26+
type: 'dashed',
27+
};
28+
spanMetricsSeriesData[`avg(${HTTP_DECODED_RESPONSE_CONTENT_LENGTH})`].lineStyle = {
29+
type: 'dashed',
30+
};
31+
}
32+
return (
33+
<InsightsLineChartWidget
34+
{...props}
35+
id="browserResourceAverageSizeChartWidget"
36+
title={t('Average %s Size', DATA_TYPE)}
37+
series={[
38+
spanMetricsSeriesData?.[`avg(${HTTP_DECODED_RESPONSE_CONTENT_LENGTH})`],
39+
spanMetricsSeriesData?.[`avg(${HTTP_RESPONSE_TRANSFER_SIZE})`],
40+
spanMetricsSeriesData?.[`avg(${HTTP_RESPONSE_CONTENT_LENGTH})`],
41+
]}
42+
aliases={FIELD_ALIASES}
43+
isLoading={areSpanMetricsSeriesLoading}
44+
error={spanMetricsSeriesError}
45+
/>
46+
);
47+
}

‎static/app/views/insights/common/components/widgets/browserResourceDurationChartWidget.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {useParams} from 'sentry/utils/useParams';
2+
import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
3+
import {useBrowserResourceSeries} from 'sentry/views/insights/common/components/widgets/hooks/useBrowserResourceSeries';
4+
import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
5+
import {getDurationChartTitle} from 'sentry/views/insights/common/views/spans/types';
6+
import {SpanMetricsField} from 'sentry/views/insights/types';
7+
8+
const {SPAN_SELF_TIME} = SpanMetricsField;
9+
10+
export function BrowserResourceDurationChartWidget(props: LoadableChartWidgetProps) {
11+
const {groupId} = useParams();
12+
13+
const {
14+
data: spanMetricsSeriesData,
15+
isPending: areSpanMetricsSeriesLoading,
16+
error: spanMetricsSeriesError,
17+
} = useBrowserResourceSeries({groupId});
18+
19+
return (
20+
<InsightsLineChartWidget
21+
{...props}
22+
id="browserResourceDurationChartWidget"
23+
title={getDurationChartTitle('resource')}
24+
series={[spanMetricsSeriesData?.[`avg(${SPAN_SELF_TIME})`]]}
25+
isLoading={areSpanMetricsSeriesLoading}
26+
error={spanMetricsSeriesError}
27+
/>
28+
);
29+
}

‎static/app/views/insights/common/components/widgets/browserResourceThroughtputChartWidget.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import {useParams} from 'sentry/utils/useParams';
2+
import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
3+
import {useBrowserResourceSeries} from 'sentry/views/insights/common/components/widgets/hooks/useBrowserResourceSeries';
4+
import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
5+
import {getThroughputChartTitle} from 'sentry/views/insights/common/views/spans/types';
6+
7+
export function BrowserResourceThroughputChartWidget(props: LoadableChartWidgetProps) {
8+
const {groupId} = useParams();
9+
10+
const {
11+
data: spanMetricsSeriesData,
12+
isPending: areSpanMetricsSeriesLoading,
13+
error: spanMetricsSeriesError,
14+
} = useBrowserResourceSeries({groupId});
15+
16+
return (
17+
<InsightsLineChartWidget
18+
{...props}
19+
id="browserResourceThroughputChartWidget"
20+
title={getThroughputChartTitle('resource')}
21+
series={[spanMetricsSeriesData?.[`epm()`]]}
22+
isLoading={areSpanMetricsSeriesLoading}
23+
error={spanMetricsSeriesError}
24+
/>
25+
);
26+
}

‎static/app/views/insights/common/components/widgets/hooks/useBrowserResourceSeries.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import {MutableSearch} from 'sentry/utils/tokenizeSearch';
2+
import {Referrer} from 'sentry/views/insights/browser/resources/referrer';
3+
import {useResourceModuleFilters} from 'sentry/views/insights/browser/resources/utils/useResourceFilters';
4+
import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
5+
import {SpanMetricsField} from 'sentry/views/insights/types';
6+
7+
const {
8+
SPAN_SELF_TIME,
9+
HTTP_RESPONSE_CONTENT_LENGTH,
10+
HTTP_DECODED_RESPONSE_CONTENT_LENGTH,
11+
HTTP_RESPONSE_TRANSFER_SIZE,
12+
RESOURCE_RENDER_BLOCKING_STATUS,
13+
} = SpanMetricsField;
14+
15+
export function useBrowserResourceSeries({groupId}: {groupId?: string}) {
16+
const filters = useResourceModuleFilters();
17+
18+
const mutableSearch = MutableSearch.fromQueryObject({
19+
'span.group': groupId,
20+
...(filters[RESOURCE_RENDER_BLOCKING_STATUS]
21+
? {
22+
[RESOURCE_RENDER_BLOCKING_STATUS]: filters[RESOURCE_RENDER_BLOCKING_STATUS],
23+
}
24+
: {}),
25+
...(filters[SpanMetricsField.USER_GEO_SUBREGION]
26+
? {
27+
[SpanMetricsField.USER_GEO_SUBREGION]: `[${filters[SpanMetricsField.USER_GEO_SUBREGION].join(',')}]`,
28+
}
29+
: {}),
30+
});
31+
32+
return useSpanMetricsSeries(
33+
{
34+
search: mutableSearch,
35+
yAxis: [
36+
`epm()`,
37+
`avg(${SPAN_SELF_TIME})`,
38+
`avg(${HTTP_RESPONSE_CONTENT_LENGTH})`,
39+
`avg(${HTTP_DECODED_RESPONSE_CONTENT_LENGTH})`,
40+
`avg(${HTTP_RESPONSE_TRANSFER_SIZE})`,
41+
],
42+
enabled: Boolean(groupId),
43+
transformAliasToInputFormat: true,
44+
},
45+
Referrer.RESOURCE_SUMMARY_CHARTS
46+
);
47+
}

0 commit comments

Comments
 (0)