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 381d3a86a98ff5..525b58e68b2ae4 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 @@ -14,7 +14,7 @@ jest.mock('sentry/utils/usePageFilters'); describe('PerformanceScoreBreakdownChart', function () { const organization = OrganizationFixture(); - let eventsMock, eventsStatsMock; + let eventsStatsMock; beforeEach(function () { jest.mocked(useLocation).mockReturnValue({ @@ -43,12 +43,6 @@ describe('PerformanceScoreBreakdownChart', function () { }, }); - eventsMock = MockApiClient.addMockResponse({ - url: `/organizations/${organization.slug}/events/`, - body: { - data: [], - }, - }); eventsStatsMock = MockApiClient.addMockResponse({ url: `/organizations/${organization.slug}/events-stats/`, body: {}, @@ -71,35 +65,6 @@ describe('PerformanceScoreBreakdownChart', function () { }); render(, {organization}); await waitForElementToBeRemoved(() => screen.getByTestId('loading-indicator')); - expect(eventsMock).toHaveBeenCalledTimes(1); - expect(eventsMock).toHaveBeenCalledWith( - '/organizations/org-slug/events/', - expect.objectContaining({ - method: 'GET', - query: expect.objectContaining({ - field: [ - 'performance_score(measurements.score.lcp)', - 'performance_score(measurements.score.fcp)', - 'performance_score(measurements.score.cls)', - 'performance_score(measurements.score.inp)', - 'performance_score(measurements.score.ttfb)', - 'avg(measurements.score.total)', - 'avg(measurements.score.weight.lcp)', - 'avg(measurements.score.weight.fcp)', - 'avg(measurements.score.weight.cls)', - 'avg(measurements.score.weight.inp)', - 'avg(measurements.score.weight.ttfb)', - 'count()', - 'count_scores(measurements.score.total)', - 'count_scores(measurements.score.lcp)', - 'count_scores(measurements.score.fcp)', - 'count_scores(measurements.score.cls)', - 'count_scores(measurements.score.ttfb)', - 'count_scores(measurements.score.inp)', - ], - }), - }) - ); expect(eventsStatsMock).toHaveBeenCalledWith( '/organizations/org-slug/events-stats/', diff --git a/static/app/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart.tsx b/static/app/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart.tsx index 4e422de730618a..556d4a96b12a54 100644 --- a/static/app/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart.tsx +++ b/static/app/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart.tsx @@ -7,8 +7,6 @@ import {space} from 'sentry/styles/space'; import type {Series} from 'sentry/types/echarts'; import usePageFilters from 'sentry/utils/usePageFilters'; import {ORDER} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart'; -import {calculatePerformanceScoreFromStoredTableDataRow} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/calculatePerformanceScoreFromStored'; -import {useProjectWebVitalsScoresQuery} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/useProjectWebVitalsScoresQuery'; import { useProjectWebVitalsScoresTimeseriesQuery, type WebVitalsScoreBreakdown, @@ -16,7 +14,6 @@ import { import {applyStaticWeightsToTimeseries} from 'sentry/views/insights/browser/webVitals/utils/applyStaticWeightsToTimeseries'; import type {BrowserType} from 'sentry/views/insights/browser/webVitals/utils/queryParameterDecoders/browserType'; import {PERFORMANCE_SCORE_WEIGHTS} from 'sentry/views/insights/browser/webVitals/utils/scoreThresholds'; -import {useStaticWeightsSetting} from 'sentry/views/insights/browser/webVitals/utils/useStaticWeightsSetting'; import Chart, {ChartType} from 'sentry/views/insights/common/components/chart'; type Props = { @@ -54,22 +51,12 @@ export function PerformanceScoreBreakdownChart({transaction, browserTypes}: Prop const {data: timeseriesData, isLoading: isTimeseriesLoading} = useProjectWebVitalsScoresTimeseriesQuery({transaction, browserTypes}); - const {data: projectScores, isLoading: isProjectScoresLoading} = - useProjectWebVitalsScoresQuery({transaction, browserTypes}); - - const projectScore = isProjectScoresLoading - ? undefined - : calculatePerformanceScoreFromStoredTableDataRow(projectScores?.data?.[0]); const period = pageFilters.selection.datetime.period; const performanceScoreSubtext = (period && DEFAULT_RELATIVE_PERIODS[period]) ?? ''; const chartSeriesOrder = ORDER; - const shouldUseStaticWeights = useStaticWeightsSetting(); - - const weightedTimeseriesData = shouldUseStaticWeights - ? applyStaticWeightsToTimeseries(timeseriesData) - : timeseriesData; + const weightedTimeseriesData = applyStaticWeightsToTimeseries(timeseriesData); const weightedTimeseries = formatTimeSeriesResultsToChartData( weightedTimeseriesData, @@ -93,17 +80,7 @@ export function PerformanceScoreBreakdownChart({transaction, browserTypes}: Prop ); const weightsSeries = weightedTimeseries[0].data.map(({name}) => { - const value = shouldUseStaticWeights - ? PERFORMANCE_SCORE_WEIGHTS - : projectScore !== undefined - ? { - lcp: projectScore.lcpWeight, - fcp: projectScore.fcpWeight, - inp: projectScore.inpWeight, - cls: projectScore.clsWeight, - ttfb: projectScore.ttfbWeight, - } - : undefined; + const value = PERFORMANCE_SCORE_WEIGHTS; return {name, value}; }); @@ -117,7 +94,7 @@ export function PerformanceScoreBreakdownChart({transaction, browserTypes}: Prop height={180} data={isTimeseriesLoading ? [] : weightedTimeseries} disableXAxis - loading={isTimeseriesLoading || isProjectScoresLoading} + loading={isTimeseriesLoading} type={ChartType.AREA} grid={{ left: 5, diff --git a/static/app/views/insights/browser/webVitals/components/performanceScoreRingWithTooltips.tsx b/static/app/views/insights/browser/webVitals/components/performanceScoreRingWithTooltips.tsx index 182afbbf259101..75feddbdb3f5a8 100644 --- a/static/app/views/insights/browser/webVitals/components/performanceScoreRingWithTooltips.tsx +++ b/static/app/views/insights/browser/webVitals/components/performanceScoreRingWithTooltips.tsx @@ -17,7 +17,6 @@ import type { WebVitals, } from 'sentry/views/insights/browser/webVitals/types'; import {PERFORMANCE_SCORE_WEIGHTS} from 'sentry/views/insights/browser/webVitals/utils/scoreThresholds'; -import {useStaticWeightsSetting} from 'sentry/views/insights/browser/webVitals/utils/useStaticWeightsSetting'; import {useModuleURL} from 'sentry/views/insights/common/utils/useModuleURL'; import {getFormattedDuration} from './webVitalMeters'; @@ -163,19 +162,7 @@ function PerformanceScoreRingWithTooltips({ }); } - const shouldUseStaticWeights = useStaticWeightsSetting(); - const weights = - ['lcpWeight', 'fcpWeight', 'inpWeight', 'clsWeight', 'ttfbWeight'].every( - key => projectScore[key] === 0 - ) || shouldUseStaticWeights - ? PERFORMANCE_SCORE_WEIGHTS - : { - lcp: projectScore.lcpWeight, - fcp: projectScore.fcpWeight, - inp: projectScore.inpWeight, - cls: projectScore.clsWeight, - ttfb: projectScore.ttfbWeight, - }; + const weights = PERFORMANCE_SCORE_WEIGHTS; const commonWebVitalLabelProps = { organization, diff --git a/static/app/views/insights/browser/webVitals/components/tables/pagePerformanceTable.spec.tsx b/static/app/views/insights/browser/webVitals/components/tables/pagePerformanceTable.spec.tsx index d02ae116061ec5..52c2b26f31b651 100644 --- a/static/app/views/insights/browser/webVitals/components/tables/pagePerformanceTable.spec.tsx +++ b/static/app/views/insights/browser/webVitals/components/tables/pagePerformanceTable.spec.tsx @@ -124,7 +124,7 @@ describe('PagePerformanceTable', function () { }); render(, {organization}); await waitFor(() => { - expect(eventsMock).toHaveBeenCalledTimes(2); + expect(eventsMock).toHaveBeenCalledTimes(1); expect(eventsMock).toHaveBeenLastCalledWith( '/organizations/org-slug/events/', expect.objectContaining({ @@ -172,6 +172,6 @@ describe('PagePerformanceTable', function () { expect(screen.getByRole('cell', {name: '0.18'})).toBeInTheDocument(); expect(screen.getByRole('cell', {name: '783ms'})).toBeInTheDocument(); expect(screen.getByRole('cell', {name: 'Meh 85'})).toBeInTheDocument(); - expect(screen.getByRole('cell', {name: '18.25'})).toBeInTheDocument(); + expect(screen.getByRole('cell', {name: '0.01'})).toBeInTheDocument(); }); }); diff --git a/static/app/views/insights/browser/webVitals/components/tables/pagePerformanceTable.tsx b/static/app/views/insights/browser/webVitals/components/tables/pagePerformanceTable.tsx index 3c978eeefba9ec..458d16f3c34189 100644 --- a/static/app/views/insights/browser/webVitals/components/tables/pagePerformanceTable.tsx +++ b/static/app/views/insights/browser/webVitals/components/tables/pagePerformanceTable.tsx @@ -25,13 +25,11 @@ import {escapeFilterValue} from 'sentry/utils/tokenizeSearch'; import {useLocation} from 'sentry/utils/useLocation'; import useOrganization from 'sentry/utils/useOrganization'; import {PerformanceBadge} from 'sentry/views/insights/browser/webVitals/components/performanceBadge'; -import {useProjectWebVitalsScoresQuery} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/useProjectWebVitalsScoresQuery'; import {useTransactionWebVitalsScoresQuery} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/useTransactionWebVitalsScoresQuery'; import {MODULE_DOC_LINK} from 'sentry/views/insights/browser/webVitals/settings'; import type {RowWithScoreAndOpportunity} from 'sentry/views/insights/browser/webVitals/types'; import {SORTABLE_FIELDS} from 'sentry/views/insights/browser/webVitals/types'; import decodeBrowserTypes from 'sentry/views/insights/browser/webVitals/utils/queryParameterDecoders/browserType'; -import {useStaticWeightsSetting} from 'sentry/views/insights/browser/webVitals/utils/useStaticWeightsSetting'; import {useWebVitalsSort} from 'sentry/views/insights/browser/webVitals/utils/useWebVitalsSort'; import {ModuleName, SpanIndexedField} from 'sentry/views/insights/types'; @@ -64,7 +62,6 @@ const DEFAULT_SORT: Sort = { export function PagePerformanceTable() { const location = useLocation(); const organization = useOrganization(); - const shouldUseStaticWeights = useStaticWeightsSetting(); const columnOrder = COLUMN_ORDER; @@ -72,8 +69,6 @@ export function PagePerformanceTable() { const browserTypes = decodeBrowserTypes(location.query[SpanIndexedField.BROWSER_NAME]); const sort = useWebVitalsSort({defaultSort: DEFAULT_SORT}); - const {data: projectScoresData, isLoading: isProjectScoresLoading} = - useProjectWebVitalsScoresQuery({browserTypes}); const { data, @@ -88,15 +83,9 @@ export function PagePerformanceTable() { browserTypes, }); - const scoreCount = projectScoresData?.data?.[0]?.[ - 'count_scores(measurements.score.total)' - ] as number; - const tableData: RowWithScoreAndOpportunity[] = data.map(row => ({ ...row, - opportunity: - (((row as RowWithScoreAndOpportunity).opportunity ?? 0) * 100) / - (shouldUseStaticWeights ? 1 : scoreCount), // static weight keys are already normalized + opportunity: ((row as RowWithScoreAndOpportunity).opportunity ?? 0) * 100, })); const getFormattedDuration = (value: number) => { return getDuration(value, value < 1 ? 0 : 2, true); @@ -310,7 +299,7 @@ export function PagePerformanceTable() { /> {/* The Pagination component disappears if pageLinks is not defined, @@ -336,7 +325,7 @@ export function PagePerformanceTable() { { // Map back performance score key so we don't have to handle both keys in the UI - if ( - shouldUseStaticWeights && - row['performance_score(measurements.score.total)'] !== undefined - ) { + if (row['performance_score(measurements.score.total)'] !== undefined) { row['avg(measurements.score.total)'] = row['performance_score(measurements.score.total)']; } @@ -159,7 +152,7 @@ export const useTransactionWebVitalsScoresQuery = ({ inpScore: inpScore ?? 0, // Map back opportunity score key so we don't have to handle both keys in the UI opportunity: row[ - shouldUseStaticWeights && webVital === 'total' + webVital === 'total' ? 'total_opportunity_score()' : `opportunity_score(measurements.score.${webVital})` ] as number, diff --git a/static/app/views/insights/browser/webVitals/utils/useStaticWeightsSetting.tsx b/static/app/views/insights/browser/webVitals/utils/useStaticWeightsSetting.tsx deleted file mode 100644 index c98c41eca4d493..00000000000000 --- a/static/app/views/insights/browser/webVitals/utils/useStaticWeightsSetting.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import useOrganization from 'sentry/utils/useOrganization'; - -export function useStaticWeightsSetting(): boolean { - const organization = useOrganization(); - return organization.features.includes('insights-browser-webvitals-static-weights'); -} diff --git a/static/app/views/insights/browser/webVitals/views/pageOverview.spec.tsx b/static/app/views/insights/browser/webVitals/views/pageOverview.spec.tsx index e299933c2c2d6a..a2fede615ec182 100644 --- a/static/app/views/insights/browser/webVitals/views/pageOverview.spec.tsx +++ b/static/app/views/insights/browser/webVitals/views/pageOverview.spec.tsx @@ -103,7 +103,7 @@ describe('PageOverview', function () { 'performance_score(measurements.score.cls)', `performance_score(measurements.score.inp)`, 'performance_score(measurements.score.ttfb)', - 'avg(measurements.score.total)', + 'performance_score(measurements.score.total)', 'avg(measurements.score.weight.lcp)', 'avg(measurements.score.weight.fcp)', 'avg(measurements.score.weight.cls)', diff --git a/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.spec.tsx b/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.spec.tsx index 95591c536dbef1..55caaab03a1d22 100644 --- a/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.spec.tsx +++ b/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.spec.tsx @@ -78,41 +78,9 @@ describe('WebVitalsLandingPage', function () { it('renders', async () => { render(, {organization}); await waitForElementToBeRemoved(() => screen.queryAllByTestId('loading-indicator')); - // Project performance score ring query - expect(eventsMock).toHaveBeenNthCalledWith( - 1, - expect.anything(), - expect.objectContaining({ - query: expect.objectContaining({ - dataset: 'metrics', - field: [ - 'performance_score(measurements.score.lcp)', - 'performance_score(measurements.score.fcp)', - 'performance_score(measurements.score.cls)', - `performance_score(measurements.score.inp)`, - 'performance_score(measurements.score.ttfb)', - 'avg(measurements.score.total)', - 'avg(measurements.score.weight.lcp)', - 'avg(measurements.score.weight.fcp)', - 'avg(measurements.score.weight.cls)', - `avg(measurements.score.weight.inp)`, - 'avg(measurements.score.weight.ttfb)', - 'count()', - 'count_scores(measurements.score.total)', - 'count_scores(measurements.score.lcp)', - 'count_scores(measurements.score.fcp)', - 'count_scores(measurements.score.cls)', - 'count_scores(measurements.score.ttfb)', - `count_scores(measurements.score.inp)`, - ], - query: - 'transaction.op:[pageload,""] span.op:[ui.interaction.click,ui.interaction.hover,ui.interaction.drag,ui.interaction.press,""] !transaction:"<< unparameterized >>"', - }), - }) - ); // Table query expect(eventsMock).toHaveBeenNthCalledWith( - 2, + 1, expect.anything(), expect.objectContaining({ query: expect.objectContaining({ @@ -127,7 +95,7 @@ describe('WebVitalsLandingPage', function () { 'p75(measurements.ttfb)', 'p75(measurements.inp)', 'opportunity_score(measurements.score.total)', - 'avg(measurements.score.total)', + 'performance_score(measurements.score.total)', 'count()', 'count_scores(measurements.score.lcp)', 'count_scores(measurements.score.fcp)', @@ -143,7 +111,7 @@ describe('WebVitalsLandingPage', function () { ); // Raw web vital metric tile queries expect(eventsMock).toHaveBeenNthCalledWith( - 3, + 2, expect.anything(), expect.objectContaining({ query: expect.objectContaining({ @@ -167,5 +135,37 @@ describe('WebVitalsLandingPage', function () { }), }) ); + // Project performance score ring query + expect(eventsMock).toHaveBeenNthCalledWith( + 3, + expect.anything(), + expect.objectContaining({ + query: expect.objectContaining({ + dataset: 'metrics', + field: [ + 'performance_score(measurements.score.lcp)', + 'performance_score(measurements.score.fcp)', + 'performance_score(measurements.score.cls)', + `performance_score(measurements.score.inp)`, + 'performance_score(measurements.score.ttfb)', + 'performance_score(measurements.score.total)', + 'avg(measurements.score.weight.lcp)', + 'avg(measurements.score.weight.fcp)', + 'avg(measurements.score.weight.cls)', + `avg(measurements.score.weight.inp)`, + 'avg(measurements.score.weight.ttfb)', + 'count()', + 'count_scores(measurements.score.total)', + 'count_scores(measurements.score.lcp)', + 'count_scores(measurements.score.fcp)', + 'count_scores(measurements.score.cls)', + 'count_scores(measurements.score.ttfb)', + `count_scores(measurements.score.inp)`, + ], + query: + 'transaction.op:[pageload,""] span.op:[ui.interaction.click,ui.interaction.hover,ui.interaction.drag,ui.interaction.press,""] !transaction:"<< unparameterized >>"', + }), + }) + ); }); }); diff --git a/static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx b/static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx index 9b33ae788e2e7c..9081fc79048626 100644 --- a/static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx +++ b/static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx @@ -1065,7 +1065,7 @@ describe('Performance > Widgets > WidgetContainer', function () { 'p75(measurements.ttfb)', 'p75(measurements.inp)', 'opportunity_score(measurements.score.total)', - 'avg(measurements.score.total)', + 'performance_score(measurements.score.total)', 'count()', 'count_scores(measurements.score.lcp)', 'count_scores(measurements.score.fcp)', diff --git a/static/app/views/performance/landing/widgets/widgets/performanceScoreListWidget.tsx b/static/app/views/performance/landing/widgets/widgets/performanceScoreListWidget.tsx index 635e0eb0dd6bb3..d7bced93fa0bd3 100644 --- a/static/app/views/performance/landing/widgets/widgets/performanceScoreListWidget.tsx +++ b/static/app/views/performance/landing/widgets/widgets/performanceScoreListWidget.tsx @@ -23,7 +23,6 @@ import {useTransactionWebVitalsScoresQuery} from 'sentry/views/insights/browser/ import {MODULE_DOC_LINK} from 'sentry/views/insights/browser/webVitals/settings'; import type {RowWithScoreAndOpportunity} from 'sentry/views/insights/browser/webVitals/types'; import {applyStaticWeightsToTimeseries} from 'sentry/views/insights/browser/webVitals/utils/applyStaticWeightsToTimeseries'; -import {useStaticWeightsSetting} from 'sentry/views/insights/browser/webVitals/utils/useStaticWeightsSetting'; import Chart, {ChartType} from 'sentry/views/insights/common/components/chart'; import {useModuleURL} from 'sentry/views/insights/common/utils/useModuleURL'; @@ -64,11 +63,7 @@ export function PerformanceScoreListWidget(props: PerformanceWidgetProps) { const order = ORDER; - const shouldUseStaticWeights = useStaticWeightsSetting(); - - const weightedTimeseriesData = shouldUseStaticWeights - ? applyStaticWeightsToTimeseries(timeseriesData) - : timeseriesData; + const weightedTimeseriesData = applyStaticWeightsToTimeseries(timeseriesData); const getAreaChart = _ => { const segmentColors = theme.charts.getColorPalette(3).slice(0, 5); @@ -107,8 +102,7 @@ export function PerformanceScoreListWidget(props: PerformanceWidgetProps) { 'count_scores(measurements.score.total)' ] as number; const opportunity = scoreCount - ? (((listItem as RowWithScoreAndOpportunity).opportunity ?? 0) * 100) / - (shouldUseStaticWeights ? 1 : scoreCount) // static weight keys are already normalized + ? ((listItem as RowWithScoreAndOpportunity).opportunity ?? 0) * 100 : 0; return (