Skip to content

Commit 1e99673

Browse files
billyvggggritso
authored and
andrewshie-sentry
committed
ref(insights): Refactor databaseLanding and databaseSummary chart widgets (#89714)
Part of #88560 Closes REPLAY-90 --------- Co-authored-by: George Gritsouk <989898+gggritso@users.noreply.github.com>
1 parent 8dc5a3e commit 1e99673

10 files changed

+200
-106
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+
[SpanMetricsField.SPAN_ACTION]: spanAction,
10+
[SpanMetricsField.SPAN_DOMAIN]: spanDomain,
11+
[SpanMetricsField.SPAN_SYSTEM]: systemQueryParam,
12+
} = useLocationQuery({
13+
fields: {
14+
[SpanMetricsField.SPAN_ACTION]: decodeScalar,
15+
[SpanMetricsField.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+
[SpanMetricsField.SPAN_ACTION]: spanAction,
26+
[SpanMetricsField.SPAN_DOMAIN]: spanDomain,
27+
[SpanMetricsField.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.spec.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@ import {render, screen, waitForElementToBeRemoved} from 'sentry-test/reactTestin
66

77
import {useLocation} from 'sentry/utils/useLocation';
88
import usePageFilters from 'sentry/utils/usePageFilters';
9+
import {useParams} from 'sentry/utils/useParams';
910
import {DatabaseSpanSummaryPage} from 'sentry/views/insights/database/views/databaseSpanSummaryPage';
1011

1112
jest.mock('sentry/utils/useLocation');
13+
jest.mock('sentry/utils/useParams');
1214
jest.mock('sentry/utils/usePageFilters');
1315
import {useReleaseStats} from 'sentry/utils/useReleaseStats';
1416

@@ -19,6 +21,7 @@ describe('DatabaseSpanSummaryPage', function () {
1921
features: ['insights-related-issues-table', 'insights-initial-modules'],
2022
});
2123
const group = GroupFixture();
24+
const groupId = '1756baf8fd19c116';
2225

2326
jest.mocked(usePageFilters).mockReturnValue({
2427
isReady: true,
@@ -37,6 +40,10 @@ describe('DatabaseSpanSummaryPage', function () {
3740
},
3841
});
3942

43+
jest.mocked(useParams).mockReturnValue({
44+
groupId,
45+
});
46+
4047
jest.mocked(useLocation).mockReturnValue({
4148
pathname: '',
4249
search: '',
@@ -167,12 +174,7 @@ describe('DatabaseSpanSummaryPage', function () {
167174
});
168175

169176
render(
170-
<DatabaseSpanSummaryPage
171-
{...RouteComponentPropsFixture()}
172-
params={{
173-
groupId: '1756baf8fd19c116',
174-
}}
175-
/>,
177+
<DatabaseSpanSummaryPage {...RouteComponentPropsFixture({params: {groupId}})} />,
176178
{organization}
177179
);
178180

0 commit comments

Comments
 (0)