diff --git a/static/app/views/insights/browser/webVitals/components/charts/formatTimeSeriesResultsToChartData.tsx b/static/app/views/insights/browser/webVitals/components/charts/formatTimeSeriesResultsToChartData.tsx new file mode 100644 index 00000000000000..4294c57e6d3aaa --- /dev/null +++ b/static/app/views/insights/browser/webVitals/components/charts/formatTimeSeriesResultsToChartData.tsx @@ -0,0 +1,23 @@ +import type {Series} from 'sentry/types/echarts'; +import {ORDER} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart'; +import type {WebVitalsScoreBreakdown} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/useProjectWebVitalsScoresTimeseriesQuery'; +import type {WebVitals} from 'sentry/views/insights/browser/webVitals/types'; + +export function formatTimeSeriesResultsToChartData( + data: WebVitalsScoreBreakdown, + segmentColors: string[], + order: WebVitals[] = ORDER +): Series[] { + return order.map((webVital, index) => { + const series = data[webVital]; + const color = segmentColors[index]; + return { + seriesName: webVital.toUpperCase(), + data: series.map(({name, value}) => ({ + name, + value: Math.round(value), + })), + color, + }; + }); +} diff --git a/static/app/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart.spec.tsx b/static/app/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart.spec.tsx index c2929e8bcb1e66..2777336aa6bab3 100644 --- a/static/app/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart.spec.tsx +++ b/static/app/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart.spec.tsx @@ -4,15 +4,13 @@ import {render, screen, waitForElementToBeRemoved} from 'sentry-test/reactTestin import {useLocation} from 'sentry/utils/useLocation'; import usePageFilters from 'sentry/utils/usePageFilters'; -import { - formatTimeSeriesResultsToChartData, - PerformanceScoreBreakdownChart, -} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart'; +import {formatTimeSeriesResultsToChartData} from 'sentry/views/insights/browser/webVitals/components/charts/formatTimeSeriesResultsToChartData'; +import {PerformanceScoreBreakdownChartWidget} from 'sentry/views/insights/common/components/widgets/performanceScoreBreakdownChartWidget'; jest.mock('sentry/utils/useLocation'); jest.mock('sentry/utils/usePageFilters'); -describe('PerformanceScoreBreakdownChart', function () { +describe('PerformanceScoreBreakdownChartWidget', function () { const organization = OrganizationFixture(); let eventsStatsMock: jest.Mock; @@ -75,7 +73,7 @@ describe('PerformanceScoreBreakdownChart', function () { action: 'PUSH', key: '', }); - render(, {organization}); + render(, {organization}); await waitForElementToBeRemoved(() => screen.queryByTestId('loading-indicator')); expect(eventsStatsMock).toHaveBeenCalledWith( diff --git a/static/app/views/insights/browser/webVitals/components/charts/performanceScoreChart.tsx b/static/app/views/insights/browser/webVitals/components/charts/performanceScoreChart.tsx index 9cf813c3c386e8..6128a8c0a868dc 100644 --- a/static/app/views/insights/browser/webVitals/components/charts/performanceScoreChart.tsx +++ b/static/app/views/insights/browser/webVitals/components/charts/performanceScoreChart.tsx @@ -9,22 +9,17 @@ import {DEFAULT_RELATIVE_PERIODS} from 'sentry/constants'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import usePageFilters from 'sentry/utils/usePageFilters'; -import {PerformanceScoreBreakdownChart} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart'; import PerformanceScoreRingWithTooltips from 'sentry/views/insights/browser/webVitals/components/performanceScoreRingWithTooltips'; import {MODULE_DOC_LINK} from 'sentry/views/insights/browser/webVitals/settings'; import type { ProjectScore, WebVitals, } from 'sentry/views/insights/browser/webVitals/types'; -import type {BrowserType} from 'sentry/views/insights/browser/webVitals/utils/queryParameterDecoders/browserType'; -import type {SubregionCode} from 'sentry/views/insights/types'; +import {PerformanceScoreBreakdownChartWidget} from 'sentry/views/insights/common/components/widgets/performanceScoreBreakdownChartWidget'; type Props = { - browserTypes?: BrowserType[]; isProjectScoreLoading?: boolean; projectScore?: ProjectScore; - subregions?: SubregionCode[]; - transaction?: string; webVital?: WebVitals | null; }; @@ -33,10 +28,7 @@ export const ORDER: WebVitals[] = ['lcp', 'fcp', 'inp', 'cls', 'ttfb']; export function PerformanceScoreChart({ projectScore, webVital, - transaction, isProjectScoreLoading, - browserTypes, - subregions, }: Props) { const theme = useTheme(); const pageFilters = usePageFilters(); @@ -101,15 +93,17 @@ export function PerformanceScoreChart({ )} - + + + ); } +const ChartContainer = styled('div')` + flex: 1 1 0%; +`; + const Flex = styled('div')` display: flex; flex-direction: row; diff --git a/static/app/views/insights/browser/webVitals/views/pageOverview.tsx b/static/app/views/insights/browser/webVitals/views/pageOverview.tsx index d371650f1b8400..3b1cd4b09c0987 100644 --- a/static/app/views/insights/browser/webVitals/views/pageOverview.tsx +++ b/static/app/views/insights/browser/webVitals/views/pageOverview.tsx @@ -18,7 +18,6 @@ import useOrganization from 'sentry/utils/useOrganization'; import useProjects from 'sentry/utils/useProjects'; import useRouter from 'sentry/utils/useRouter'; import BrowserTypeSelector from 'sentry/views/insights/browser/webVitals/components/browserTypeSelector'; -import {PerformanceScoreBreakdownChart} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart'; import {PageOverviewSidebar} from 'sentry/views/insights/browser/webVitals/components/pageOverviewSidebar'; import {PageOverviewWebVitalsDetailPanel} from 'sentry/views/insights/browser/webVitals/components/pageOverviewWebVitalsDetailPanel'; import {PageSamplePerformanceTable} from 'sentry/views/insights/browser/webVitals/components/tables/pageSamplePerformanceTable'; @@ -32,6 +31,7 @@ import {WebVitalMetersPlaceholder} from 'sentry/views/insights/browser/webVitals import {ModulePageFilterBar} from 'sentry/views/insights/common/components/modulePageFilterBar'; import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders'; import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper'; +import {PerformanceScoreBreakdownChartWidget} from 'sentry/views/insights/common/components/widgets/performanceScoreBreakdownChartWidget'; import {useModuleURL} from 'sentry/views/insights/common/utils/useModuleURL'; import {useWebVitalsDrawer} from 'sentry/views/insights/common/utils/useWebVitalsDrawer'; import {FrontendHeader} from 'sentry/views/insights/pages/frontend/frontendPageHeader'; @@ -196,11 +196,9 @@ export function PageOverview() { - + + + {(isPending || isProjectScoresLoading) && } @@ -267,6 +265,10 @@ const Flex = styled('div')` gap: ${space(1)}; `; +const ChartContainer = styled('div')` + flex: 1 1 0%; +`; + const PageSamplePerformanceTableContainer = styled('div')` margin-top: ${space(1)}; `; diff --git a/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx b/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx index bbf6913c66f844..33276b5d505910 100644 --- a/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx +++ b/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx @@ -95,8 +95,6 @@ export function WebVitalsLandingPage() { projectScore={projectScore} isProjectScoreLoading={isPending || isProjectScoresLoading} webVital={state.webVital} - browserTypes={browserTypes} - subregions={subregions} /> diff --git a/static/app/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart.tsx b/static/app/views/insights/common/components/widgets/performanceScoreBreakdownChartWidget.tsx similarity index 64% rename from static/app/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart.tsx rename to static/app/views/insights/common/components/widgets/performanceScoreBreakdownChartWidget.tsx index e86489cfe88afa..79efd55044f2b9 100644 --- a/static/app/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart.tsx +++ b/static/app/views/insights/common/components/widgets/performanceScoreBreakdownChartWidget.tsx @@ -1,62 +1,42 @@ import {useTheme} from '@emotion/react'; -import styled from '@emotion/styled'; import {t} from 'sentry/locale'; -import type {Series} from 'sentry/types/echarts'; +import {decodeList} from 'sentry/utils/queryString'; import {MutableSearch} from 'sentry/utils/tokenizeSearch'; +import useLocationQuery from 'sentry/utils/url/useLocationQuery'; import {ORDER} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart'; -import type {WebVitalsScoreBreakdown} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/useProjectWebVitalsScoresTimeseriesQuery'; +import {WebVitalsWeightList} from 'sentry/views/insights/browser/webVitals/components/charts/webVitalWeightList'; import type {WebVitals} from 'sentry/views/insights/browser/webVitals/types'; import {getWeights} from 'sentry/views/insights/browser/webVitals/utils/getWeights'; -import type {BrowserType} from 'sentry/views/insights/browser/webVitals/utils/queryParameterDecoders/browserType'; +import decodeBrowserTypes from 'sentry/views/insights/browser/webVitals/utils/queryParameterDecoders/browserType'; import {useDefaultWebVitalsQuery} from 'sentry/views/insights/browser/webVitals/utils/useDefaultQuery'; import {InsightsTimeSeriesWidget} from 'sentry/views/insights/common/components/insightsTimeSeriesWidget'; +import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types'; import { type DiscoverSeries, useMetricsSeries, } from 'sentry/views/insights/common/queries/useDiscoverSeries'; -import {SpanMetricsField, type SubregionCode} from 'sentry/views/insights/types'; +import {SpanIndexedField, SpanMetricsField} from 'sentry/views/insights/types'; -import {WebVitalsWeightList} from './webVitalWeightList'; - -type Props = { - browserTypes?: BrowserType[]; - subregions?: SubregionCode[]; - transaction?: string; -}; - -export function formatTimeSeriesResultsToChartData( - data: WebVitalsScoreBreakdown, - segmentColors: string[], - order: WebVitals[] = ORDER -): Series[] { - return order.map((webVital, index) => { - const series = data[webVital]; - const color = segmentColors[index]; - return { - seriesName: webVital.toUpperCase(), - data: series.map(({name, value}) => ({ - name, - value: Math.round(value), - })), - color, - }; +export function PerformanceScoreBreakdownChartWidget(props: LoadableChartWidgetProps) { + const { + transaction, + [SpanIndexedField.BROWSER_NAME]: browserTypes, + [SpanIndexedField.USER_GEO_SUBREGION]: subregions, + } = useLocationQuery({ + fields: { + [SpanIndexedField.BROWSER_NAME]: decodeBrowserTypes, + [SpanIndexedField.USER_GEO_SUBREGION]: decodeList, + transaction: decodeList, + }, }); -} - -export function PerformanceScoreBreakdownChart({ - transaction, - browserTypes, - subregions, -}: Props) { const theme = useTheme(); const segmentColors = theme.chart.getColorPalette(3).slice(0, 5); const defaultQuery = useDefaultWebVitalsQuery(); - const search = new MutableSearch(`${defaultQuery} has:measurements.score.total`); - if (transaction) { - search.addFilterValue('transaction', transaction); + if (transaction.length && transaction[0]) { + search.addFilterValue('transaction', transaction[0]); } if (subregions) { @@ -84,7 +64,8 @@ export function PerformanceScoreBreakdownChart({ ], transformAliasToInputFormat: true, }, - 'api.performance.browser.web-vitals.timeseries-scores2' + 'api.performance.browser.web-vitals.timeseries-scores2', + props.pageFilters ); const webVitalsThatHaveData: WebVitals[] = vitalScoresData @@ -127,20 +108,14 @@ export function PerformanceScoreBreakdownChart({ : []; return ( - - } - /> - + } + /> ); } - -const ChartContainer = styled('div')` - flex: 1 1 0%; -`; diff --git a/static/app/views/insights/common/queries/useDiscoverSeries.ts b/static/app/views/insights/common/queries/useDiscoverSeries.ts index 0e4dbacb449de5..d23aa33962d3c1 100644 --- a/static/app/views/insights/common/queries/useDiscoverSeries.ts +++ b/static/app/views/insights/common/queries/useDiscoverSeries.ts @@ -78,13 +78,15 @@ export const useEAPSeries = < export const useMetricsSeries = ( options: UseMetricsSeriesOptions = {}, - referrer: string + referrer: string, + pageFilters?: PageFilters ) => { const useEap = useInsightsEap(); return useDiscoverSeries( options, useEap ? DiscoverDatasets.SPANS_EAP_RPC : DiscoverDatasets.METRICS, - referrer + referrer, + pageFilters ); }; diff --git a/static/app/views/performance/landing/widgets/widgets/performanceScoreListWidget.tsx b/static/app/views/performance/landing/widgets/widgets/performanceScoreListWidget.tsx index 31683b7aaea178..e6122f7fbadbac 100644 --- a/static/app/views/performance/landing/widgets/widgets/performanceScoreListWidget.tsx +++ b/static/app/views/performance/landing/widgets/widgets/performanceScoreListWidget.tsx @@ -11,7 +11,7 @@ import LoadingIndicator from 'sentry/components/loadingIndicator'; import Truncate from 'sentry/components/truncate'; import {t} from 'sentry/locale'; import {useLocation} from 'sentry/utils/useLocation'; -import {formatTimeSeriesResultsToChartData} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart'; +import {formatTimeSeriesResultsToChartData} from 'sentry/views/insights/browser/webVitals/components/charts/formatTimeSeriesResultsToChartData'; import {ORDER} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart'; import {PerformanceBadge} from 'sentry/views/insights/browser/webVitals/components/performanceBadge'; import {useProjectWebVitalsScoresQuery} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/useProjectWebVitalsScoresQuery';