Skip to content

Commit fa47fc2

Browse files
billyvgbillyvg
committed
ref(insights): Refactor cacheLandingPage widgets
Part of #88560
1 parent e0535bd commit fa47fc2

13 files changed

+165
-54
lines changed

‎static/app/views/insights/cache/views/cacheLandingPage.tsx

Lines changed: 5 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,13 @@ import {
2121
} from 'sentry/views/insights/cache/components/tables/transactionsTable';
2222
import {Referrer} from 'sentry/views/insights/cache/referrers';
2323
import {BASE_FILTERS, MODULE_DOC_LINK} from 'sentry/views/insights/cache/settings';
24-
import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
2524
import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
2625
import {ModulePageFilterBar} from 'sentry/views/insights/common/components/modulePageFilterBar';
2726
import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
2827
import {ModulesOnboarding} from 'sentry/views/insights/common/components/modulesOnboarding';
2928
import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper';
29+
import CacheMissRateChartWidget from 'sentry/views/insights/common/components/widgets/cacheMissRateChartWidget';
30+
import CacheThroughputChartWidget from 'sentry/views/insights/common/components/widgets/cacheThroughputChartWidget';
3031
import {
3132
useMetrics,
3233
useSpanMetrics,
@@ -37,10 +38,6 @@ import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnbo
3738
import {useInsightsEap} from 'sentry/views/insights/common/utils/useEap';
3839
import {useSamplesDrawer} from 'sentry/views/insights/common/utils/useSamplesDrawer';
3940
import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
40-
import {
41-
DataTitles,
42-
getThroughputChartTitle,
43-
} from 'sentry/views/insights/common/views/spans/types';
4441
import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
4542
import {
4643
type MetricsProperty,
@@ -81,11 +78,7 @@ export function CacheLandingPage() {
8178
requiredParams: ['transaction'],
8279
});
8380

84-
const {
85-
isPending: isCacheMissRateLoading,
86-
data: cacheMissRateData,
87-
error: cacheMissRateError,
88-
} = useSpanMetricsSeries(
81+
const {error: cacheMissRateError} = useSpanMetricsSeries(
8982
{
9083
yAxis: [`${CACHE_MISS_RATE}()`],
9184
search: MutableSearch.fromQueryObject(BASE_FILTERS),
@@ -94,19 +87,6 @@ export function CacheLandingPage() {
9487
Referrer.LANDING_CACHE_HIT_MISS_CHART
9588
);
9689

97-
const {
98-
isPending: isThroughputDataLoading,
99-
data: throughputData,
100-
error: throughputError,
101-
} = useSpanMetricsSeries(
102-
{
103-
search: MutableSearch.fromQueryObject(BASE_FILTERS),
104-
yAxis: ['epm()'],
105-
transformAliasToInputFormat: true,
106-
},
107-
Referrer.LANDING_CACHE_THROUGHPUT_CHART
108-
);
109-
11090
const {
11191
isFetching: isTransactionsListFetching,
11292
data: transactionsList,
@@ -211,20 +191,10 @@ export function CacheLandingPage() {
211191
</ModuleLayout.Full>
212192
<ModulesOnboarding moduleName={ModuleName.CACHE}>
213193
<ModuleLayout.Half>
214-
<InsightsLineChartWidget
215-
title={DataTitles[`cache_miss_rate()`]}
216-
series={[cacheMissRateData[`${CACHE_MISS_RATE}()`]]}
217-
isLoading={isCacheMissRateLoading}
218-
error={cacheMissRateError}
219-
/>
194+
<CacheMissRateChartWidget />
220195
</ModuleLayout.Half>
221196
<ModuleLayout.Half>
222-
<InsightsLineChartWidget
223-
title={getThroughputChartTitle('cache.get_item')}
224-
series={[throughputData['epm()']]}
225-
isLoading={isThroughputDataLoading}
226-
error={throughputError}
227-
/>
197+
<CacheThroughputChartWidget />
228198
</ModuleLayout.Half>
229199
<ModuleLayout.Full>
230200
<TransactionsTable

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import {MutableSearch} from 'sentry/utils/tokenizeSearch';
2+
import {Referrer} from 'sentry/views/insights/cache/referrers';
3+
import {BASE_FILTERS} from 'sentry/views/insights/cache/settings';
4+
import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
5+
import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
6+
import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
7+
import {DataTitles} from 'sentry/views/insights/common/views/spans/types';
8+
import {SpanFunction} from 'sentry/views/insights/types';
9+
10+
const {CACHE_MISS_RATE} = SpanFunction;
11+
12+
export default function CacheMissRateWidget(props: LoadableChartWidgetProps) {
13+
const {isPending, data, error} = useSpanMetricsSeries(
14+
{
15+
yAxis: [`${CACHE_MISS_RATE}()`],
16+
search: MutableSearch.fromQueryObject(BASE_FILTERS),
17+
transformAliasToInputFormat: true,
18+
},
19+
Referrer.LANDING_CACHE_HIT_MISS_CHART,
20+
props.pageFilters
21+
);
22+
return (
23+
<InsightsLineChartWidget
24+
{...props}
25+
id="cacheMissRateChartWidget"
26+
title={DataTitles[`cache_miss_rate()`]}
27+
series={[data[`${CACHE_MISS_RATE}()`]]}
28+
isLoading={isPending}
29+
error={error}
30+
/>
31+
);
32+
}

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {MutableSearch} from 'sentry/utils/tokenizeSearch';
2+
import {Referrer} from 'sentry/views/insights/cache/referrers';
3+
import {BASE_FILTERS} from 'sentry/views/insights/cache/settings';
4+
import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
5+
import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
6+
import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
7+
import {getThroughputChartTitle} from 'sentry/views/insights/common/views/spans/types';
8+
9+
export default function CacheThroughputChartWidget(props: LoadableChartWidgetProps) {
10+
const {isPending, data, error} = useSpanMetricsSeries(
11+
{
12+
search: MutableSearch.fromQueryObject(BASE_FILTERS),
13+
yAxis: ['epm()'],
14+
transformAliasToInputFormat: true,
15+
},
16+
Referrer.LANDING_CACHE_THROUGHPUT_CHART,
17+
props.pageFilters
18+
);
19+
20+
return (
21+
<InsightsLineChartWidget
22+
{...props}
23+
id="cacheThroughputChartWidget"
24+
title={getThroughputChartTitle('cache.get_item')}
25+
series={[data['epm()']]}
26+
isLoading={isPending}
27+
error={error}
28+
/>
29+
);
30+
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
2+
import {LatencyChart} from 'sentry/views/insights/queues/charts/latencyChart';
3+
import {Referrer} from 'sentry/views/insights/queues/referrers';
4+
5+
export default function QueuesLandingLatencyChartWidget(props: LoadableChartWidgetProps) {
6+
return (
7+
<LatencyChart
8+
{...props}
9+
id="queuesLandingLatencyChartWidget"
10+
referrer={Referrer.QUEUES_LANDING_CHARTS}
11+
/>
12+
);
13+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
2+
import {ThroughputChart} from 'sentry/views/insights/queues/charts/throughputChart';
3+
import {Referrer} from 'sentry/views/insights/queues/referrers';
4+
5+
export default function QueuesLandingThroughputChartWidget(
6+
props: LoadableChartWidgetProps
7+
) {
8+
return (
9+
<ThroughputChart
10+
{...props}
11+
id="queuesLandingThroughputChartWidget"
12+
referrer={Referrer.QUEUES_LANDING_CHARTS}
13+
/>
14+
);
15+
}

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import {decodeScalar} from 'sentry/utils/queryString';
2+
import useLocationQuery from 'sentry/utils/url/useLocationQuery';
3+
import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
4+
import {LatencyChart} from 'sentry/views/insights/queues/charts/latencyChart';
5+
import {Referrer} from 'sentry/views/insights/queues/referrers';
6+
7+
export default function QueuesSummaryLatencyChartWidget(props: LoadableChartWidgetProps) {
8+
const {destination} = useLocationQuery({
9+
fields: {
10+
destination: decodeScalar,
11+
},
12+
});
13+
return (
14+
<LatencyChart
15+
{...props}
16+
id="queuesSummaryLatencyChartWidget"
17+
referrer={Referrer.QUEUES_SUMMARY_CHARTS}
18+
destination={destination}
19+
/>
20+
);
21+
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {decodeScalar} from 'sentry/utils/queryString';
2+
import useLocationQuery from 'sentry/utils/url/useLocationQuery';
3+
import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
4+
import {ThroughputChart} from 'sentry/views/insights/queues/charts/throughputChart';
5+
import {Referrer} from 'sentry/views/insights/queues/referrers';
6+
7+
export default function QueuesSummaryThroughputChartWidget(
8+
props: LoadableChartWidgetProps
9+
) {
10+
const {destination} = useLocationQuery({
11+
fields: {
12+
destination: decodeScalar,
13+
},
14+
});
15+
return (
16+
<ThroughputChart
17+
{...props}
18+
id="queuesSummaryThroughputChartWidget"
19+
referrer={Referrer.QUEUES_SUMMARY_CHARTS}
20+
destination={destination}
21+
/>
22+
);
23+
}

‎static/app/views/insights/queues/charts/latencyChart.spec.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,11 @@ describe('latencyChart', () => {
4444
});
4545
it('renders', async () => {
4646
render(
47-
<LatencyChart destination="events" referrer={Referrer.QUEUES_SUMMARY_CHARTS} />,
47+
<LatencyChart
48+
id="latency-chart-test"
49+
destination="events"
50+
referrer={Referrer.QUEUES_SUMMARY_CHARTS}
51+
/>,
4852
{organization}
4953
);
5054
screen.getByText('Average Duration');

‎static/app/views/insights/queues/charts/latencyChart.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ import type {Referrer} from 'sentry/views/insights/queues/referrers';
88
import {FIELD_ALIASES} from 'sentry/views/insights/queues/settings';
99

1010
interface Props {
11+
id: string;
1112
referrer: Referrer;
1213
destination?: string;
1314
error?: Error | null;
1415
}
1516

16-
export function LatencyChart({error, destination, referrer}: Props) {
17+
export function LatencyChart({id, error, destination, referrer}: Props) {
1718
const {
1819
data,
1920
isPending,
@@ -51,6 +52,7 @@ export function LatencyChart({error, destination, referrer}: Props) {
5152

5253
return (
5354
<InsightsAreaChartWidget
55+
id={id}
5456
title={t('Average Duration')}
5557
series={[messageReceiveLatencySeries, data['avg(span.duration)']]}
5658
aliases={FIELD_ALIASES}

‎static/app/views/insights/queues/charts/throughputChart.spec.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,13 @@ describe('throughputChart', () => {
3131
});
3232
});
3333
it('renders', async () => {
34-
render(<ThroughputChart referrer={Referrer.QUEUES_SUMMARY_CHARTS} />, {organization});
34+
render(
35+
<ThroughputChart
36+
id="throughput-chart-test"
37+
referrer={Referrer.QUEUES_SUMMARY_CHARTS}
38+
/>,
39+
{organization}
40+
);
3541
screen.getByText('Published vs Processed');
3642
expect(eventsStatsMock).toHaveBeenCalledWith(
3743
'/organizations/org-slug/events-stats/',

‎static/app/views/insights/queues/charts/throughputChart.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,13 @@ import type {Referrer} from 'sentry/views/insights/queues/referrers';
99
import {FIELD_ALIASES} from 'sentry/views/insights/queues/settings';
1010

1111
interface Props {
12+
id: string;
1213
referrer: Referrer;
1314
destination?: string;
1415
error?: Error | null;
1516
}
1617

17-
export function ThroughputChart({error, destination, referrer}: Props) {
18+
export function ThroughputChart({id, error, destination, referrer}: Props) {
1819
const theme = useTheme();
1920
const {
2021
data: publishData,
@@ -36,6 +37,7 @@ export function ThroughputChart({error, destination, referrer}: Props) {
3637

3738
return (
3839
<InsightsLineChartWidget
40+
id={id}
3941
title={t('Published vs Processed')}
4042
series={[
4143
renameDiscoverSeries(

‎static/app/views/insights/queues/views/destinationSummaryPage.tsx

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ import {ModulePageProviders} from 'sentry/views/insights/common/components/modul
1616
import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper';
1717
import {ReadoutRibbon, ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
1818
import {getTimeSpentExplanation} from 'sentry/views/insights/common/components/tableCells/timeSpentCell';
19+
import QueuesSummaryLatencyChartWidget from 'sentry/views/insights/common/components/widgets/queuesSummaryLatencyChartWidget';
20+
import QueuesSummaryThroughputChartWidget from 'sentry/views/insights/common/components/widgets/queuesSummaryThroughputChartWidget';
1921
import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
2022
import {useSamplesDrawer} from 'sentry/views/insights/common/utils/useSamplesDrawer';
2123
import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
22-
import {LatencyChart} from 'sentry/views/insights/queues/charts/latencyChart';
23-
import {ThroughputChart} from 'sentry/views/insights/queues/charts/throughputChart';
2424
import {MessageSpanSamplesPanel} from 'sentry/views/insights/queues/components/messageSpanSamplesPanel';
2525
import {TransactionsTable} from 'sentry/views/insights/queues/components/tables/transactionsTable';
2626
import {useQueuesMetricsQuery} from 'sentry/views/insights/queues/queries/useQueuesMetricsQuery';
@@ -125,17 +125,11 @@ function DestinationSummaryPage() {
125125
{!onboardingProject && (
126126
<Fragment>
127127
<ModuleLayout.Half>
128-
<LatencyChart
129-
destination={destination}
130-
referrer={Referrer.QUEUES_SUMMARY_CHARTS}
131-
/>
128+
<QueuesSummaryLatencyChartWidget />
132129
</ModuleLayout.Half>
133130

134131
<ModuleLayout.Half>
135-
<ThroughputChart
136-
destination={destination}
137-
referrer={Referrer.QUEUES_SUMMARY_CHARTS}
138-
/>
132+
<QueuesSummaryThroughputChartWidget />
139133
</ModuleLayout.Half>
140134

141135
<ModuleLayout.Full>

‎static/app/views/insights/queues/views/queuesLandingPage.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,14 @@ import {ModulePageFilterBar} from 'sentry/views/insights/common/components/modul
1717
import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
1818
import {ModulesOnboarding} from 'sentry/views/insights/common/components/modulesOnboarding';
1919
import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper';
20+
import QueuesLandingLatencyChartWidget from 'sentry/views/insights/common/components/widgets/queuesLandingLatencyChartWidget';
21+
import QueuesLandingThroughputChartWidget from 'sentry/views/insights/common/components/widgets/queuesLandingThroughputChartWidget';
2022
import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
2123
import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
22-
import {LatencyChart} from 'sentry/views/insights/queues/charts/latencyChart';
23-
import {ThroughputChart} from 'sentry/views/insights/queues/charts/throughputChart';
2424
import {
2525
isAValidSort,
2626
QueuesTable,
2727
} from 'sentry/views/insights/queues/components/tables/queuesTable';
28-
import {Referrer} from 'sentry/views/insights/queues/referrers';
2928
import {ModuleName} from 'sentry/views/insights/types';
3029

3130
const DEFAULT_SORT = {
@@ -84,10 +83,10 @@ function QueuesLandingPage() {
8483
</ModuleLayout.Full>
8584
<ModulesOnboarding moduleName={ModuleName.QUEUE}>
8685
<ModuleLayout.Half>
87-
<LatencyChart referrer={Referrer.QUEUES_LANDING_CHARTS} />
86+
<QueuesLandingLatencyChartWidget />
8887
</ModuleLayout.Half>
8988
<ModuleLayout.Half>
90-
<ThroughputChart referrer={Referrer.QUEUES_LANDING_CHARTS} />
89+
<QueuesLandingThroughputChartWidget />
9190
</ModuleLayout.Half>
9291
<ModuleLayout.Full>
9392
<Flex>

0 commit comments

Comments
 (0)