Skip to content

Commit ab18037

Browse files
billyvgbillyvg
committed
ref(insights): Refactor databaseLanding and databaseSummary chart widgets
Part of #88560 Closes REPLAY-90'
1 parent 59cfc20 commit ab18037

9 files changed

+192
-100
lines changed

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
2+
import {useDatabaseLandingDurationQuery} from 'sentry/views/insights/common/components/widgets/hooks/useDatabaseLandingDurationQuery';
3+
import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
4+
import {getDurationChartTitle} from 'sentry/views/insights/common/views/spans/types';
5+
import {DEFAULT_DURATION_AGGREGATE} from 'sentry/views/insights/database/settings';
6+
7+
export default function DatabaseLandingDurationChartWidget(
8+
props: LoadableChartWidgetProps
9+
) {
10+
const {isPending, data, error} = useDatabaseLandingDurationQuery();
11+
12+
return (
13+
<InsightsLineChartWidget
14+
{...props}
15+
id="databaseLandingDurationChartWidget"
16+
title={getDurationChartTitle('db')}
17+
series={[data[`${DEFAULT_DURATION_AGGREGATE}(span.self_time)`]]}
18+
isLoading={isPending}
19+
error={error}
20+
/>
21+
);
22+
}

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
2+
import {useDatabaseLandingThroughputQuery} from 'sentry/views/insights/common/components/widgets/hooks/useDatabaseLandingThroughputQuery';
3+
import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
4+
import {getThroughputChartTitle} from 'sentry/views/insights/common/views/spans/types';
5+
6+
export default function DatabaseLandingThroughputChartWidget(
7+
props: LoadableChartWidgetProps
8+
) {
9+
const {isPending, data, error} = useDatabaseLandingThroughputQuery();
10+
11+
return (
12+
<InsightsLineChartWidget
13+
{...props}
14+
id="databaseLandingThroughputChartWidget"
15+
title={getThroughputChartTitle('db')}
16+
series={[data['epm()']]}
17+
isLoading={isPending}
18+
error={error}
19+
/>
20+
);
21+
}

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import {MutableSearch} from 'sentry/utils/tokenizeSearch';
2+
import {useParams} from 'sentry/utils/useParams';
3+
import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
4+
import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
5+
import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
6+
import {getDurationChartTitle} from 'sentry/views/insights/common/views/spans/types';
7+
import {DEFAULT_DURATION_AGGREGATE} from 'sentry/views/insights/database/settings';
8+
import type {SpanMetricsQueryFilters} from 'sentry/views/insights/types';
9+
import {SpanMetricsField} from 'sentry/views/insights/types';
10+
11+
export default function DatabaseSummaryDurationChartWidget(
12+
props: LoadableChartWidgetProps
13+
) {
14+
const {groupId} = useParams();
15+
const filters: SpanMetricsQueryFilters = {
16+
'span.group': groupId,
17+
};
18+
const {isPending, data, error} = useSpanMetricsSeries(
19+
{
20+
search: MutableSearch.fromQueryObject(filters),
21+
yAxis: [`${DEFAULT_DURATION_AGGREGATE}(${SpanMetricsField.SPAN_SELF_TIME})`],
22+
enabled: Boolean(groupId),
23+
transformAliasToInputFormat: true,
24+
},
25+
'api.starfish.span-summary-page-metrics-chart'
26+
);
27+
28+
return (
29+
<InsightsLineChartWidget
30+
{...props}
31+
id="databaseSummaryDurationChartWidget"
32+
title={getDurationChartTitle('db')}
33+
series={[data[`${DEFAULT_DURATION_AGGREGATE}(${SpanMetricsField.SPAN_SELF_TIME})`]]}
34+
isLoading={isPending}
35+
error={error}
36+
/>
37+
);
38+
}

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import {MutableSearch} from 'sentry/utils/tokenizeSearch';
2+
import {useParams} from 'sentry/utils/useParams';
3+
import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
4+
import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
5+
import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
6+
import {getThroughputChartTitle} from 'sentry/views/insights/common/views/spans/types';
7+
import type {SpanMetricsQueryFilters} from 'sentry/views/insights/types';
8+
9+
export default function DatabaseSummaryThroughputChartWidget(
10+
props: LoadableChartWidgetProps
11+
) {
12+
const {groupId} = useParams();
13+
const filters: SpanMetricsQueryFilters = {
14+
'span.group': groupId,
15+
};
16+
const {isPending, data, error} = useSpanMetricsSeries(
17+
{
18+
search: MutableSearch.fromQueryObject(filters),
19+
yAxis: ['epm()'],
20+
enabled: Boolean(groupId),
21+
transformAliasToInputFormat: true,
22+
},
23+
'api.starfish.span-summary-page-metrics-chart'
24+
);
25+
26+
return (
27+
<InsightsLineChartWidget
28+
{...props}
29+
id="databaseSummaryThroughputChartWidget"
30+
title={getThroughputChartTitle('db')}
31+
series={[data['epm()']]}
32+
isLoading={isPending}
33+
error={error}
34+
/>
35+
);
36+
}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {decodeScalar} from 'sentry/utils/queryString';
2+
import useLocationQuery from 'sentry/utils/url/useLocationQuery';
3+
import {useSystemSelectorOptions} from 'sentry/views/insights/database/components/useSystemSelectorOptions';
4+
import {BASE_FILTERS} from 'sentry/views/insights/database/settings';
5+
import {SpanMetricsField} from 'sentry/views/insights/types';
6+
7+
export function useDatabaseLandingChartFilter() {
8+
const {
9+
['span.action']: spanAction,
10+
['span.domain']: spanDomain,
11+
[SpanMetricsField.SPAN_SYSTEM]: systemQueryParam,
12+
} = useLocationQuery({
13+
fields: {
14+
['span.action']: decodeScalar,
15+
['span.domain']: decodeScalar,
16+
[SpanMetricsField.SPAN_SYSTEM]: decodeScalar,
17+
},
18+
});
19+
// If there is no query parameter for the system, retrieve the current value from the hook instead
20+
const {selectedSystem} = useSystemSelectorOptions();
21+
const system = systemQueryParam ?? selectedSystem;
22+
23+
return {
24+
...BASE_FILTERS,
25+
'span.action': spanAction,
26+
'span.domain': spanDomain,
27+
'span.system': system,
28+
};
29+
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {MutableSearch} from 'sentry/utils/tokenizeSearch';
2+
import {useDatabaseLandingChartFilter} from 'sentry/views/insights/common/components/widgets/hooks/useDatabaseLandingChartFilter';
3+
import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
4+
import {DEFAULT_DURATION_AGGREGATE} from 'sentry/views/insights/database/settings';
5+
import {SpanMetricsField} from 'sentry/views/insights/types';
6+
7+
export function useDatabaseLandingDurationQuery() {
8+
const chartFilters = useDatabaseLandingChartFilter();
9+
return useSpanMetricsSeries(
10+
{
11+
search: MutableSearch.fromQueryObject(chartFilters),
12+
yAxis: [`${DEFAULT_DURATION_AGGREGATE}(${SpanMetricsField.SPAN_SELF_TIME})`],
13+
transformAliasToInputFormat: true,
14+
},
15+
'api.starfish.span-landing-page-metrics-chart'
16+
);
17+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {MutableSearch} from 'sentry/utils/tokenizeSearch';
2+
import {useDatabaseLandingChartFilter} from 'sentry/views/insights/common/components/widgets/hooks/useDatabaseLandingChartFilter';
3+
import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
4+
5+
export function useDatabaseLandingThroughputQuery() {
6+
const chartFilters = useDatabaseLandingChartFilter();
7+
return useSpanMetricsSeries(
8+
{
9+
search: MutableSearch.fromQueryObject(chartFilters),
10+
yAxis: ['epm()'],
11+
transformAliasToInputFormat: true,
12+
},
13+
'api.starfish.span-landing-page-metrics-chart'
14+
);
15+
}

‎static/app/views/insights/database/views/databaseLandingPage.tsx

Lines changed: 10 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,18 @@ import {MutableSearch} from 'sentry/utils/tokenizeSearch';
1010
import {useLocation} from 'sentry/utils/useLocation';
1111
import {useNavigate} from 'sentry/utils/useNavigate';
1212
import useOrganization from 'sentry/utils/useOrganization';
13-
import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
1413
import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
1514
import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
1615
import {ModulesOnboarding} from 'sentry/views/insights/common/components/modulesOnboarding';
1716
import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper';
17+
import DatabaseLandingDurationChartWidget from 'sentry/views/insights/common/components/widgets/databaseLandingDurationChartWidget';
18+
import DatabaseLandingThroughputChartWidget from 'sentry/views/insights/common/components/widgets/databaseLandingThroughputChartWidget';
19+
import {useDatabaseLandingDurationQuery} from 'sentry/views/insights/common/components/widgets/hooks/useDatabaseLandingDurationQuery';
20+
import {useDatabaseLandingThroughputQuery} from 'sentry/views/insights/common/components/widgets/hooks/useDatabaseLandingThroughputQuery';
1821
import {useSpanMetrics} from 'sentry/views/insights/common/queries/useDiscover';
19-
import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
2022
import {useHasFirstSpan} from 'sentry/views/insights/common/queries/useHasFirstSpan';
2123
import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
2224
import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
23-
import {
24-
getDurationChartTitle,
25-
getThroughputChartTitle,
26-
} from 'sentry/views/insights/common/views/spans/types';
2725
import {DatabasePageFilters} from 'sentry/views/insights/database/components/databasePageFilters';
2826
import {NoDataMessage} from 'sentry/views/insights/database/components/noDataMessage';
2927
import {
@@ -83,13 +81,6 @@ export function DatabaseLandingPage() {
8381
});
8482
};
8583

86-
const chartFilters = {
87-
...BASE_FILTERS,
88-
'span.action': spanAction,
89-
'span.domain': spanDomain,
90-
'span.system': system,
91-
};
92-
9384
const tableFilters = {
9485
...BASE_FILTERS,
9586
'span.action': spanAction,
@@ -120,31 +111,11 @@ export function DatabaseLandingPage() {
120111
'api.starfish.use-span-list'
121112
);
122113

123-
const {
124-
isPending: isThroughputDataLoading,
125-
data: throughputData,
126-
error: throughputError,
127-
} = useSpanMetricsSeries(
128-
{
129-
search: MutableSearch.fromQueryObject(chartFilters),
130-
yAxis: ['epm()'],
131-
transformAliasToInputFormat: true,
132-
},
133-
'api.starfish.span-landing-page-metrics-chart'
134-
);
114+
const {isPending: isThroughputDataLoading, data: throughputData} =
115+
useDatabaseLandingThroughputQuery();
135116

136-
const {
137-
isPending: isDurationDataLoading,
138-
data: durationData,
139-
error: durationError,
140-
} = useSpanMetricsSeries(
141-
{
142-
search: MutableSearch.fromQueryObject(chartFilters),
143-
yAxis: [`${selectedAggregate}(${SpanMetricsField.SPAN_SELF_TIME})`],
144-
transformAliasToInputFormat: true,
145-
},
146-
'api.starfish.span-landing-page-metrics-chart'
147-
);
117+
const {isPending: isDurationDataLoading, data: durationData} =
118+
useDatabaseLandingDurationQuery();
148119

149120
const isCriticalDataLoading =
150121
isThroughputDataLoading || isDurationDataLoading || queryListResponse.isPending;
@@ -179,21 +150,11 @@ export function DatabaseLandingPage() {
179150
</ModuleLayout.Full>
180151
<ModulesOnboarding moduleName={ModuleName.DB}>
181152
<ModuleLayout.Half>
182-
<InsightsLineChartWidget
183-
title={getThroughputChartTitle('db')}
184-
series={[throughputData['epm()']]}
185-
isLoading={isThroughputDataLoading}
186-
error={throughputError}
187-
/>
153+
<DatabaseLandingThroughputChartWidget />
188154
</ModuleLayout.Half>
189155

190156
<ModuleLayout.Half>
191-
<InsightsLineChartWidget
192-
title={getDurationChartTitle('db')}
193-
series={[durationData[`${selectedAggregate}(span.self_time)`]]}
194-
isLoading={isDurationDataLoading}
195-
error={durationError}
196-
/>
157+
<DatabaseLandingDurationChartWidget />
197158
</ModuleLayout.Half>
198159

199160
<ModuleLayout.Full>

‎static/app/views/insights/database/views/databaseSpanSummaryPage.tsx

Lines changed: 4 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {decodeScalar, decodeSorts} from 'sentry/utils/queryString';
1111
import {MutableSearch} from 'sentry/utils/tokenizeSearch';
1212
import {useLocation} from 'sentry/utils/useLocation';
1313
import {HeaderContainer} from 'sentry/views/insights/common/components/headerContainer';
14-
import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
1514
import InsightIssuesList from 'sentry/views/insights/common/components/issues';
1615
import {MetricReadout} from 'sentry/views/insights/common/components/metricReadout';
1716
import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
@@ -21,23 +20,21 @@ import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/modu
2120
import {ReadoutRibbon, ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
2221
import {DatabaseSpanDescription} from 'sentry/views/insights/common/components/spanDescription';
2322
import {getTimeSpentExplanation} from 'sentry/views/insights/common/components/tableCells/timeSpentCell';
23+
import DatabaseSummaryDurationChartWidget from 'sentry/views/insights/common/components/widgets/databaseSummaryDurationChartWidget';
24+
import DatabaseSummaryThroughputChartWidget from 'sentry/views/insights/common/components/widgets/databaseSummaryThroughputChartWidget';
2425
import {
2526
useSpanMetrics,
2627
useSpansIndexed,
2728
} from 'sentry/views/insights/common/queries/useDiscover';
28-
import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
2929
import {useSamplesDrawer} from 'sentry/views/insights/common/utils/useSamplesDrawer';
3030
import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
3131
import {
3232
DataTitles,
33-
getDurationChartTitle,
34-
getThroughputChartTitle,
3533
getThroughputTitle,
3634
} from 'sentry/views/insights/common/views/spans/types';
3735
import {SampleList} from 'sentry/views/insights/common/views/spanSummaryPage/sampleList';
3836
import {isAValidSort} from 'sentry/views/insights/database/components/tables/queriesTable';
3937
import {QueryTransactionsTable} from 'sentry/views/insights/database/components/tables/queryTransactionsTable';
40-
import {DEFAULT_DURATION_AGGREGATE} from 'sentry/views/insights/database/settings';
4138
import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
4239
import type {SpanMetricsQueryFilters} from 'sentry/views/insights/types';
4340
import {
@@ -60,8 +57,6 @@ type Props = RouteComponentProps<{groupId: string}, Record<string, unknown>, any
6057
export function DatabaseSpanSummaryPage({params}: Props) {
6158
const location = useLocation<Query>();
6259

63-
const selectedAggregate = DEFAULT_DURATION_AGGREGATE;
64-
6560
const {groupId} = params;
6661

6762
const filters: SpanMetricsQueryFilters = {
@@ -160,34 +155,6 @@ export function DatabaseSpanSummaryPage({params}: Props) {
160155
requiredParams: ['transaction'],
161156
});
162157

163-
const {
164-
isPending: isThroughputDataLoading,
165-
data: throughputData,
166-
error: throughputError,
167-
} = useSpanMetricsSeries(
168-
{
169-
search: MutableSearch.fromQueryObject(filters),
170-
yAxis: ['epm()'],
171-
enabled: Boolean(groupId),
172-
transformAliasToInputFormat: true,
173-
},
174-
'api.starfish.span-summary-page-metrics-chart'
175-
);
176-
177-
const {
178-
isPending: isDurationDataLoading,
179-
data: durationData,
180-
error: durationError,
181-
} = useSpanMetricsSeries(
182-
{
183-
search: MutableSearch.fromQueryObject(filters),
184-
yAxis: [`${selectedAggregate}(${SpanMetricsField.SPAN_SELF_TIME})`],
185-
enabled: Boolean(groupId),
186-
transformAliasToInputFormat: true,
187-
},
188-
'api.starfish.span-summary-page-metrics-chart'
189-
);
190-
191158
return (
192159
<Fragment>
193160
<BackendHeader
@@ -272,23 +239,9 @@ export function DatabaseSpanSummaryPage({params}: Props) {
272239

273240
<ModuleLayout.Full>
274241
<ChartContainer>
275-
<InsightsLineChartWidget
276-
title={getThroughputChartTitle('db')}
277-
series={[throughputData['epm()']]}
278-
isLoading={isThroughputDataLoading}
279-
error={throughputError}
280-
/>
242+
<DatabaseSummaryThroughputChartWidget />
281243

282-
<InsightsLineChartWidget
283-
title={getDurationChartTitle('db')}
284-
series={[
285-
durationData[
286-
`${selectedAggregate}(${SpanMetricsField.SPAN_SELF_TIME})`
287-
],
288-
]}
289-
isLoading={isDurationDataLoading}
290-
error={durationError}
291-
/>
244+
<DatabaseSummaryDurationChartWidget />
292245
</ChartContainer>
293246
</ModuleLayout.Full>
294247

0 commit comments

Comments
 (0)