From 3baab1c6c8a6f6a992822d8cec9d2de9dade463c Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Tue, 14 May 2024 14:41:13 -0400 Subject: [PATCH 01/24] fix --- .../landing/widgets/widgets/lineChartListWidget.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx index bb0b5700e5457a..49a5869dad9f93 100644 --- a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx +++ b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx @@ -687,7 +687,7 @@ export function LineChartListWidget(props: PerformanceWidgetProps) { case PerformanceWidgetSetting.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS: const cacheMissRate = listItem[fieldString]; const target = normalizeUrl( - `${CACHE_BASE_URL}/?${qs.stringify({transaction: transaction})}` + `${CACHE_BASE_URL}/?${qs.stringify({transaction: transaction, project: listItem['project.id']})}` ); return ( @@ -804,12 +804,14 @@ export function LineChartListWidget(props: PerformanceWidgetProps) { [PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES]: 'performance/browser/resources/', [PerformanceWidgetSetting.MOST_TIME_CONSUMING_DOMAINS]: 'performance/http/', + [PerformanceWidgetSetting.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS]: CACHE_BASE_URL, }[props.chartSetting] ?? ''; return [ PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES, PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES, PerformanceWidgetSetting.MOST_TIME_CONSUMING_DOMAINS, + PerformanceWidgetSetting.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS, ].includes(props.chartSetting) ? (
From 35f1711f8b65607387a9913cfd66693257df526b Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Tue, 14 May 2024 14:43:59 -0400 Subject: [PATCH 02/24] fix --- .../landing/widgets/widgets/lineChartListWidget.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx index 49a5869dad9f93..c2553399e0790e 100644 --- a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx +++ b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx @@ -804,7 +804,8 @@ export function LineChartListWidget(props: PerformanceWidgetProps) { [PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES]: 'performance/browser/resources/', [PerformanceWidgetSetting.MOST_TIME_CONSUMING_DOMAINS]: 'performance/http/', - [PerformanceWidgetSetting.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS]: CACHE_BASE_URL, + [PerformanceWidgetSetting.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS]: + CACHE_BASE_URL.slice(1), }[props.chartSetting] ?? ''; return [ From 84f3ba393be7144b90a5d0cca10abaad6a9d52c9 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 15 May 2024 12:17:40 -0400 Subject: [PATCH 03/24] rename resource module to assets --- static/app/components/sidebar/index.tsx | 3 ++- static/app/views/performance/browser/resources/index.tsx | 5 +++-- .../browser/resources/resourceSummaryPage/index.tsx | 3 ++- static/app/views/performance/browser/resources/settings.ts | 3 +++ 4 files changed, 10 insertions(+), 4 deletions(-) create mode 100644 static/app/views/performance/browser/resources/settings.ts diff --git a/static/app/components/sidebar/index.tsx b/static/app/components/sidebar/index.tsx index 9b0623c219b56c..72696dead12171 100644 --- a/static/app/components/sidebar/index.tsx +++ b/static/app/components/sidebar/index.tsx @@ -55,6 +55,7 @@ import useOrganization from 'sentry/utils/useOrganization'; import useProjects from 'sentry/utils/useProjects'; import {normalizeUrl} from 'sentry/utils/withDomainRequired'; import MetricsOnboardingSidebar from 'sentry/views/metrics/ddmOnboarding/sidebar'; +import {MODULE_NAME} from 'sentry/views/performance/browser/resources/settings'; import { MODULE_TITLE as CACHE_MODULE_TITLE, releaseLevelAsBadgeProps as CacheModuleBadgeProps, @@ -364,7 +365,7 @@ function Sidebar() { {t('Resources')}} + label={{MODULE_NAME}} to={`/organizations/${organization.slug}/performance/browser/resources/`} id="performance-browser-resources" icon={} diff --git a/static/app/views/performance/browser/resources/index.tsx b/static/app/views/performance/browser/resources/index.tsx index e43e7ca7f9b400..2a1caa8aad6870 100644 --- a/static/app/views/performance/browser/resources/index.tsx +++ b/static/app/views/performance/browser/resources/index.tsx @@ -19,6 +19,7 @@ import ResourceView, { DEFAULT_RESOURCE_TYPES, FilterOptionsContainer, } from 'sentry/views/performance/browser/resources/resourceView'; +import {MODULE_NAME} from 'sentry/views/performance/browser/resources/settings'; import { BrowserStarfishFields, useResourceModuleFilters, @@ -53,7 +54,7 @@ function ResourcesLandingPage() { ]} /> - {t('Resources')} + {MODULE_NAME} @@ -90,7 +91,7 @@ function ResourcesLandingPage() { function PageWithProviders() { return ( diff --git a/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx b/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx index 8a586366aa268b..6fb98547ab3153 100644 --- a/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx +++ b/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx @@ -21,6 +21,7 @@ import ResourceSummaryCharts from 'sentry/views/performance/browser/resources/re import ResourceSummaryTable from 'sentry/views/performance/browser/resources/resourceSummaryPage/resourceSummaryTable'; import SampleImages from 'sentry/views/performance/browser/resources/resourceSummaryPage/sampleImages'; import {FilterOptionsContainer} from 'sentry/views/performance/browser/resources/resourceView'; +import {MODULE_NAME} from 'sentry/views/performance/browser/resources/settings'; import {IMAGE_FILE_EXTENSIONS} from 'sentry/views/performance/browser/resources/shared/constants'; import RenderBlockingSelector from 'sentry/views/performance/browser/resources/shared/renderBlockingSelector'; import {ResourceSpanOps} from 'sentry/views/performance/browser/resources/shared/types'; @@ -159,7 +160,7 @@ function ResourceSummary() { function PageWithProviders() { return ( diff --git a/static/app/views/performance/browser/resources/settings.ts b/static/app/views/performance/browser/resources/settings.ts new file mode 100644 index 00000000000000..02c024d4933bc0 --- /dev/null +++ b/static/app/views/performance/browser/resources/settings.ts @@ -0,0 +1,3 @@ +import {t} from 'sentry/locale'; + +export const MODULE_NAME = t('Assets'); From b8918ea41f7e7a9fc6790e735b2674380c6966b8 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 15 May 2024 12:18:25 -0400 Subject: [PATCH 04/24] update --- .../components/events/interfaces/spans/spanSummaryButton.tsx | 2 +- .../performance/browser/resources/resourceSummaryPage/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/static/app/components/events/interfaces/spans/spanSummaryButton.tsx b/static/app/components/events/interfaces/spans/spanSummaryButton.tsx index 19fa2b9571873b..fc82acc7b3b6a0 100644 --- a/static/app/components/events/interfaces/spans/spanSummaryButton.tsx +++ b/static/app/components/events/interfaces/spans/spanSummaryButton.tsx @@ -62,7 +62,7 @@ function SpanSummaryButton(props: Props) { projectID: event.projectID, })} > - {t('View Resource Summary')} + {t('View Asset Summary')} ); } diff --git a/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx b/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx index 6fb98547ab3153..39b093bdaec448 100644 --- a/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx +++ b/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx @@ -100,7 +100,7 @@ function ResourceSummary() { preservePageFilters: true, }, { - label: 'Resource Summary', + label: 'Asset Summary', }, ]} /> From 06218b72b01207306b5fcb7d8be6c736ddb3755a Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 15 May 2024 12:22:49 -0400 Subject: [PATCH 05/24] update --- static/app/components/sidebar/index.tsx | 4 ++-- .../app/views/performance/browser/resources/index.tsx | 10 ++++++---- .../browser/resources/resourceSummaryPage/index.tsx | 8 +++++--- .../views/performance/browser/resources/settings.ts | 3 +-- 4 files changed, 14 insertions(+), 11 deletions(-) diff --git a/static/app/components/sidebar/index.tsx b/static/app/components/sidebar/index.tsx index 72696dead12171..d4316eed41882a 100644 --- a/static/app/components/sidebar/index.tsx +++ b/static/app/components/sidebar/index.tsx @@ -55,7 +55,7 @@ import useOrganization from 'sentry/utils/useOrganization'; import useProjects from 'sentry/utils/useProjects'; import {normalizeUrl} from 'sentry/utils/withDomainRequired'; import MetricsOnboardingSidebar from 'sentry/views/metrics/ddmOnboarding/sidebar'; -import {MODULE_NAME} from 'sentry/views/performance/browser/resources/settings'; +import {MODULE_TITLE} from 'sentry/views/performance/browser/resources/settings'; import { MODULE_TITLE as CACHE_MODULE_TITLE, releaseLevelAsBadgeProps as CacheModuleBadgeProps, @@ -365,7 +365,7 @@ function Sidebar() { {MODULE_NAME}} + label={{MODULE_TITLE}} to={`/organizations/${organization.slug}/performance/browser/resources/`} id="performance-browser-resources" icon={} diff --git a/static/app/views/performance/browser/resources/index.tsx b/static/app/views/performance/browser/resources/index.tsx index a7420b198f7abc..885a69627d8154 100644 --- a/static/app/views/performance/browser/resources/index.tsx +++ b/static/app/views/performance/browser/resources/index.tsx @@ -19,8 +19,10 @@ import ResourceView, { DEFAULT_RESOURCE_TYPES, FilterOptionsContainer, } from 'sentry/views/performance/browser/resources/resourceView'; -import {MODULE_NAME} from 'sentry/views/performance/browser/resources/settings'; -import {BASE_URL} from 'sentry/views/performance/browser/resources/settings'; +import { + BASE_URL, + MODULE_TITLE, +} from 'sentry/views/performance/browser/resources/settings'; import { BrowserStarfishFields, useResourceModuleFilters, @@ -55,7 +57,7 @@ function ResourcesLandingPage() { ]} /> - {MODULE_NAME} + {MODULE_TITLE} @@ -92,7 +94,7 @@ function ResourcesLandingPage() { function PageWithProviders() { return ( diff --git a/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx b/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx index 785b21f69fbae4..a8d213a5540a82 100644 --- a/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx +++ b/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx @@ -21,8 +21,10 @@ import ResourceSummaryCharts from 'sentry/views/performance/browser/resources/re import ResourceSummaryTable from 'sentry/views/performance/browser/resources/resourceSummaryPage/resourceSummaryTable'; import SampleImages from 'sentry/views/performance/browser/resources/resourceSummaryPage/sampleImages'; import {FilterOptionsContainer} from 'sentry/views/performance/browser/resources/resourceView'; -import {MODULE_NAME} from 'sentry/views/performance/browser/resources/settings'; -import {BASE_URL} from 'sentry/views/performance/browser/resources/settings'; +import { + BASE_URL, + MODULE_TITLE, +} from 'sentry/views/performance/browser/resources/settings'; import {IMAGE_FILE_EXTENSIONS} from 'sentry/views/performance/browser/resources/shared/constants'; import RenderBlockingSelector from 'sentry/views/performance/browser/resources/shared/renderBlockingSelector'; import {ResourceSpanOps} from 'sentry/views/performance/browser/resources/shared/types'; @@ -161,7 +163,7 @@ function ResourceSummary() { function PageWithProviders() { return ( diff --git a/static/app/views/performance/browser/resources/settings.ts b/static/app/views/performance/browser/resources/settings.ts index f2c561ede366d3..05743d8b876f79 100644 --- a/static/app/views/performance/browser/resources/settings.ts +++ b/static/app/views/performance/browser/resources/settings.ts @@ -1,5 +1,4 @@ import {t} from 'sentry/locale'; -export const MODULE_NAME = t('Assets'); -export const MODULE_TITLE = t('Resources'); +export const MODULE_TITLE = t('Assets'); export const BASE_URL = 'browser/resources'; From 609dbbbcadf8d171fee2486ba84c67a3c995e2ec Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 15 May 2024 15:17:42 -0400 Subject: [PATCH 06/24] update route --- static/app/routes.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/routes.tsx b/static/app/routes.tsx index 5227be62d4c56a..85b32723f8ddf2 100644 --- a/static/app/routes.tsx +++ b/static/app/routes.tsx @@ -1504,7 +1504,7 @@ function buildRoutes() { )} /> - + import('sentry/views/performance/browser/resources/index') From b953b58495b6dd9ef6f98087ac68ed1c771dd046 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 15 May 2024 15:34:35 -0400 Subject: [PATCH 07/24] update links --- static/app/components/sidebar/index.tsx | 9 ++++++--- .../app/views/performance/browser/resources/settings.ts | 2 +- .../transactionSpans/spanDetails/utils.tsx | 3 ++- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/static/app/components/sidebar/index.tsx b/static/app/components/sidebar/index.tsx index d4316eed41882a..00bae1fefd9e19 100644 --- a/static/app/components/sidebar/index.tsx +++ b/static/app/components/sidebar/index.tsx @@ -55,7 +55,10 @@ import useOrganization from 'sentry/utils/useOrganization'; import useProjects from 'sentry/utils/useProjects'; import {normalizeUrl} from 'sentry/utils/withDomainRequired'; import MetricsOnboardingSidebar from 'sentry/views/metrics/ddmOnboarding/sidebar'; -import {MODULE_TITLE} from 'sentry/views/performance/browser/resources/settings'; +import { + BASE_URL as RESOURCES_BASE_URL, + MODULE_TITLE, +} from 'sentry/views/performance/browser/resources/settings'; import { MODULE_TITLE as CACHE_MODULE_TITLE, releaseLevelAsBadgeProps as CacheModuleBadgeProps, @@ -366,8 +369,8 @@ function Sidebar() { {MODULE_TITLE}} - to={`/organizations/${organization.slug}/performance/browser/resources/`} - id="performance-browser-resources" + to={`/organizations/${organization.slug}/performance/${RESOURCES_BASE_URL}/`} + id="performance-browser-assets" icon={} /> diff --git a/static/app/views/performance/browser/resources/settings.ts b/static/app/views/performance/browser/resources/settings.ts index 05743d8b876f79..3362e71ab98e63 100644 --- a/static/app/views/performance/browser/resources/settings.ts +++ b/static/app/views/performance/browser/resources/settings.ts @@ -1,4 +1,4 @@ import {t} from 'sentry/locale'; export const MODULE_TITLE = t('Assets'); -export const BASE_URL = 'browser/resources'; +export const BASE_URL = 'browser/assets'; diff --git a/static/app/views/performance/transactionSummary/transactionSpans/spanDetails/utils.tsx b/static/app/views/performance/transactionSummary/transactionSpans/spanDetails/utils.tsx index aa727ebc701f70..3b0e9ac18c696f 100644 --- a/static/app/views/performance/transactionSummary/transactionSpans/spanDetails/utils.tsx +++ b/static/app/views/performance/transactionSummary/transactionSpans/spanDetails/utils.tsx @@ -1,6 +1,7 @@ import type {Query} from 'history'; import type {SpanSlug} from 'sentry/utils/performance/suspectSpans/types'; +import {BASE_URL} from 'sentry/views/performance/browser/resources/settings'; export function generateSpanDetailsRoute({ orgSlug, @@ -90,7 +91,7 @@ export function generateResourceSummaryRoute({ group: string; orgSlug: string; }): string { - return `/organizations/${orgSlug}/performance/browser/resources/spans/span/${group}/`; + return `/organizations/${orgSlug}/performance/${BASE_URL}/spans/span/${group}/`; } export function resourceSummaryRouteWithQuery({ From c90f066185b7242ad0199b4ec4eaafac1157de56 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Thu, 16 May 2024 09:52:31 -0400 Subject: [PATCH 08/24] widget title --- .../performance/landing/views/frontendOtherView.tsx | 2 +- .../widgets/components/widgetContainer.spec.tsx | 4 ++-- .../landing/widgets/components/widgetHeader.tsx | 2 +- .../landing/widgets/widgetDefinitions.tsx | 6 +++--- .../landing/widgets/widgets/lineChartListWidget.tsx | 13 ++++++------- 5 files changed, 13 insertions(+), 14 deletions(-) diff --git a/static/app/views/performance/landing/views/frontendOtherView.tsx b/static/app/views/performance/landing/views/frontendOtherView.tsx index 8b649fc371c5ca..059720a110c9c7 100644 --- a/static/app/views/performance/landing/views/frontendOtherView.tsx +++ b/static/app/views/performance/landing/views/frontendOtherView.tsx @@ -39,7 +39,7 @@ export function FrontendOtherView(props: BasePerformanceViewProps) { if (props.organization.features.includes('spans-first-ui')) { doubleChartRowCharts.unshift(PerformanceWidgetSetting.MOST_TIME_CONSUMING_DOMAINS); - doubleChartRowCharts.unshift(PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES); + doubleChartRowCharts.unshift(PerformanceWidgetSetting.MOST_TIME_CONSUMING_ASSETS); } if (props.organization.features.includes('starfish-browser-webvitals')) { 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 87881716ef0980..7bcf7bbbb9748f 100644 --- a/static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx +++ b/static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx @@ -941,13 +941,13 @@ describe('Performance > Widgets > WidgetContainer', function () { ); expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent( - 'Most Time Consuming Resources' + 'Most Time Consuming Assets' ); expect(eventsMock).toHaveBeenCalledTimes(1); expect(eventsMock).toHaveBeenNthCalledWith( diff --git a/static/app/views/performance/landing/widgets/components/widgetHeader.tsx b/static/app/views/performance/landing/widgets/components/widgetHeader.tsx index 3fd36e2802972b..26082e475c4ae3 100644 --- a/static/app/views/performance/landing/widgets/components/widgetHeader.tsx +++ b/static/app/views/performance/landing/widgets/components/widgetHeader.tsx @@ -25,7 +25,7 @@ export function WidgetHeader( ].includes(chartSetting); const isResourcesWidget = - chartSetting === PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES; + chartSetting === PerformanceWidgetSetting.MOST_TIME_CONSUMING_ASSETS; const isRequestsWidget = chartSetting === PerformanceWidgetSetting.MOST_TIME_CONSUMING_DOMAINS; diff --git a/static/app/views/performance/landing/widgets/widgetDefinitions.tsx b/static/app/views/performance/landing/widgets/widgetDefinitions.tsx index 7e3c18503d5a39..bd2ce8a395f27c 100644 --- a/static/app/views/performance/landing/widgets/widgetDefinitions.tsx +++ b/static/app/views/performance/landing/widgets/widgetDefinitions.tsx @@ -65,7 +65,7 @@ export enum PerformanceWidgetSetting { TIME_TO_INITIAL_DISPLAY = 'time_to_initial_display', TIME_TO_FULL_DISPLAY = 'time_to_full_display', OVERALL_PERFORMANCE_SCORE = 'overall_performance_score', - MOST_TIME_CONSUMING_RESOURCES = 'most_time_consuming_resources', + MOST_TIME_CONSUMING_ASSETS = 'most_time_consuming_assets', MOST_TIME_CONSUMING_DOMAINS = 'most_time_consuming_domains', SLOW_SCREENS_BY_TTID = 'slow_screens_by_ttid', SLOW_SCREENS_BY_COLD_START = 'slow_screens_by_cold_start', @@ -277,8 +277,8 @@ export const WIDGET_DEFINITIONS: ({ dataType: GenericPerformanceWidgetDataType.LINE_LIST, chartColor: WIDGET_PALETTE[0], }, - [PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES]: { - title: t('Most Time Consuming Resources'), + [PerformanceWidgetSetting.MOST_TIME_CONSUMING_ASSETS]: { + title: t('Most Time Consuming Assets'), subTitle: t('Render blocking for pages'), titleTooltip: getTermHelp( organization, diff --git a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx index 3c333a90fbc3c0..3258ad4c8ebb11 100644 --- a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx +++ b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx @@ -221,7 +221,7 @@ export function LineChartListWidget(props: PerformanceWidgetProps) { mutableSearch.addFilterValue('span.module', 'http'); eventView.query = mutableSearch.formatString(); } else if ( - props.chartSetting === PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES + props.chartSetting === PerformanceWidgetSetting.MOST_TIME_CONSUMING_ASSETS ) { // Set fields eventView.fields = [ @@ -289,7 +289,7 @@ export function LineChartListWidget(props: PerformanceWidgetProps) { if ( ![ PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES, - PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES, + PerformanceWidgetSetting.MOST_TIME_CONSUMING_ASSETS, PerformanceWidgetSetting.MOST_TIME_CONSUMING_DOMAINS, PerformanceWidgetSetting.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS, ].includes(props.chartSetting) @@ -380,8 +380,7 @@ export function LineChartListWidget(props: PerformanceWidgetProps) { eventView.query = mutableSearch.formatString(); } else if ( props.chartSetting === PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES || - props.chartSetting === - PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES || + props.chartSetting === PerformanceWidgetSetting.MOST_TIME_CONSUMING_ASSETS || props.chartSetting === PerformanceWidgetSetting.MOST_TIME_CONSUMING_DOMAINS ) { // Update request params @@ -641,7 +640,7 @@ export function LineChartListWidget(props: PerformanceWidgetProps) { ); case PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES: - case PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES: + case PerformanceWidgetSetting.MOST_TIME_CONSUMING_ASSETS: const description: string = listItem[SpanMetricsField.SPAN_DESCRIPTION]; const group: string = listItem[SpanMetricsField.SPAN_GROUP]; const projectID: number = listItem['project.id']; @@ -806,7 +805,7 @@ export function LineChartListWidget(props: PerformanceWidgetProps) { const route = { [PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES]: 'performance/database/', - [PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES]: + [PerformanceWidgetSetting.MOST_TIME_CONSUMING_ASSETS]: 'performance/browser/resources/', [PerformanceWidgetSetting.MOST_TIME_CONSUMING_DOMAINS]: 'performance/http/', [PerformanceWidgetSetting.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS]: @@ -815,7 +814,7 @@ export function LineChartListWidget(props: PerformanceWidgetProps) { return [ PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES, - PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES, + PerformanceWidgetSetting.MOST_TIME_CONSUMING_ASSETS, PerformanceWidgetSetting.MOST_TIME_CONSUMING_DOMAINS, PerformanceWidgetSetting.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS, ].includes(props.chartSetting) ? ( From a350a9d288a40e7783331974f2a2c494d313330f Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 29 May 2024 12:05:37 -0400 Subject: [PATCH 09/24] code review --- .../app/views/performance/landing/views/frontendOtherView.tsx | 2 +- .../landing/widgets/components/widgetContainer.spec.tsx | 2 +- .../performance/landing/widgets/components/widgetHeader.tsx | 2 +- .../views/performance/landing/widgets/widgetDefinitions.tsx | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/static/app/views/performance/landing/views/frontendOtherView.tsx b/static/app/views/performance/landing/views/frontendOtherView.tsx index 059720a110c9c7..8b649fc371c5ca 100644 --- a/static/app/views/performance/landing/views/frontendOtherView.tsx +++ b/static/app/views/performance/landing/views/frontendOtherView.tsx @@ -39,7 +39,7 @@ export function FrontendOtherView(props: BasePerformanceViewProps) { if (props.organization.features.includes('spans-first-ui')) { doubleChartRowCharts.unshift(PerformanceWidgetSetting.MOST_TIME_CONSUMING_DOMAINS); - doubleChartRowCharts.unshift(PerformanceWidgetSetting.MOST_TIME_CONSUMING_ASSETS); + doubleChartRowCharts.unshift(PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES); } if (props.organization.features.includes('starfish-browser-webvitals')) { 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 64aa6c4da3e1a6..d46fb8988e27a2 100644 --- a/static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx +++ b/static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx @@ -949,7 +949,7 @@ describe('Performance > Widgets > WidgetContainer', function () { ); diff --git a/static/app/views/performance/landing/widgets/components/widgetHeader.tsx b/static/app/views/performance/landing/widgets/components/widgetHeader.tsx index 3e09e62fb49211..bf523d5e0ebdf0 100644 --- a/static/app/views/performance/landing/widgets/components/widgetHeader.tsx +++ b/static/app/views/performance/landing/widgets/components/widgetHeader.tsx @@ -25,7 +25,7 @@ export function WidgetHeader( ].includes(chartSetting); const isResourcesWidget = - chartSetting === PerformanceWidgetSetting.MOST_TIME_CONSUMING_ASSETS; + chartSetting === PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES; const isCacheWidget = chartSetting === PerformanceWidgetSetting.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS; diff --git a/static/app/views/performance/landing/widgets/widgetDefinitions.tsx b/static/app/views/performance/landing/widgets/widgetDefinitions.tsx index bd2ce8a395f27c..a2bb838a62e8cb 100644 --- a/static/app/views/performance/landing/widgets/widgetDefinitions.tsx +++ b/static/app/views/performance/landing/widgets/widgetDefinitions.tsx @@ -65,7 +65,7 @@ export enum PerformanceWidgetSetting { TIME_TO_INITIAL_DISPLAY = 'time_to_initial_display', TIME_TO_FULL_DISPLAY = 'time_to_full_display', OVERALL_PERFORMANCE_SCORE = 'overall_performance_score', - MOST_TIME_CONSUMING_ASSETS = 'most_time_consuming_assets', + MOST_TIME_CONSUMING_RESOURCES = 'most_time_consuming_resources', MOST_TIME_CONSUMING_DOMAINS = 'most_time_consuming_domains', SLOW_SCREENS_BY_TTID = 'slow_screens_by_ttid', SLOW_SCREENS_BY_COLD_START = 'slow_screens_by_cold_start', @@ -277,7 +277,7 @@ export const WIDGET_DEFINITIONS: ({ dataType: GenericPerformanceWidgetDataType.LINE_LIST, chartColor: WIDGET_PALETTE[0], }, - [PerformanceWidgetSetting.MOST_TIME_CONSUMING_ASSETS]: { + [PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES]: { title: t('Most Time Consuming Assets'), subTitle: t('Render blocking for pages'), titleTooltip: getTermHelp( From a36a5f40e84e80604459a140e0b878a1569ff87a Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 29 May 2024 13:23:34 -0400 Subject: [PATCH 10/24] update --- .../interfaces/spans/spanSummaryButton.tsx | 13 +- .../resources/resourceSummaryPage/index.tsx | 14 +- .../resources/resourceView/resourceTable.tsx | 16 +- .../performance/browser/resources/settings.ts | 6 +- .../components/widgetContainer.spec.tsx | 4 +- .../landing/widgets/widgetDefinitions.tsx | 713 +++++++++--------- .../performance/utils/useModuleTitle.tsx | 17 +- 7 files changed, 422 insertions(+), 361 deletions(-) diff --git a/static/app/components/events/interfaces/spans/spanSummaryButton.tsx b/static/app/components/events/interfaces/spans/spanSummaryButton.tsx index fc82acc7b3b6a0..db2aec9ed71834 100644 --- a/static/app/components/events/interfaces/spans/spanSummaryButton.tsx +++ b/static/app/components/events/interfaces/spans/spanSummaryButton.tsx @@ -1,8 +1,12 @@ import {LinkButton} from 'sentry/components/button'; import type {SpanType} from 'sentry/components/events/interfaces/spans/types'; -import {t} from 'sentry/locale'; +import {t, tct} from 'sentry/locale'; import type {EventTransaction, Organization} from 'sentry/types'; import {useLocation} from 'sentry/utils/useLocation'; +import { + DATA_TYPE as RESOURCE_DATA_TYPE, + PERFORMANCE_DATA_TYPE as PERFORMANCE_RESOURCE_DATA_TYPE, +} from 'sentry/views/performance/browser/resources/settings'; import { querySummaryRouteWithQuery, resourceSummaryRouteWithQuery, @@ -27,6 +31,11 @@ function SpanSummaryButton(props: Props) { } const resolvedModule = resolveSpanModule(sentryTags.op, sentryTags.category); + const isInsightsEnabled = organization.features.includes('performance-insights'); + + const resourceDataType = isInsightsEnabled + ? RESOURCE_DATA_TYPE + : PERFORMANCE_RESOURCE_DATA_TYPE; if ( organization.features.includes('spans-first-ui') && @@ -62,7 +71,7 @@ function SpanSummaryButton(props: Props) { projectID: event.projectID, })} > - {t('View Asset Summary')} + {tct('View [dataType] Summary', {dataType: resourceDataType})} ); } diff --git a/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx b/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx index 18fc31f9a5537b..d910bd7a765a87 100644 --- a/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx +++ b/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx @@ -9,9 +9,10 @@ import {DatePageFilter} from 'sentry/components/organizations/datePageFilter'; import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter'; import PageFilterBar from 'sentry/components/organizations/pageFilterBar'; import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter'; -import {t} from 'sentry/locale'; +import {t, tct} from 'sentry/locale'; import {MutableSearch} from 'sentry/utils/tokenizeSearch'; import {useLocation} from 'sentry/utils/useLocation'; +import useOrganization from 'sentry/utils/useOrganization'; import {useParams} from 'sentry/utils/useParams'; import {Referrer} from 'sentry/views/performance/browser/resources/referrer'; import ResourceInfo from 'sentry/views/performance/browser/resources/resourceSummaryPage/resourceInfo'; @@ -19,6 +20,10 @@ import ResourceSummaryCharts from 'sentry/views/performance/browser/resources/re import ResourceSummaryTable from 'sentry/views/performance/browser/resources/resourceSummaryPage/resourceSummaryTable'; import SampleImages from 'sentry/views/performance/browser/resources/resourceSummaryPage/sampleImages'; import {FilterOptionsContainer} from 'sentry/views/performance/browser/resources/resourceView'; +import { + DATA_TYPE, + PERFORMANCE_DATA_TYPE, +} from 'sentry/views/performance/browser/resources/settings'; import {IMAGE_FILE_EXTENSIONS} from 'sentry/views/performance/browser/resources/shared/constants'; import RenderBlockingSelector from 'sentry/views/performance/browser/resources/shared/renderBlockingSelector'; import {ResourceSpanOps} from 'sentry/views/performance/browser/resources/shared/types'; @@ -42,6 +47,7 @@ const { function ResourceSummary() { const webVitalsModuleURL = useModuleURL('vital'); + const organization = useOrganization(); const {groupId} = useParams(); const filters = useResourceModuleFilters(); const selectedSpanOp = filters[SPAN_OP]; @@ -83,6 +89,10 @@ function ResourceSummary() { const crumbs = useModuleBreadcrumbs('resource'); + const isInsightsEnabled = organization.features.includes('performance-insights'); + + const resourceDataType = isInsightsEnabled ? DATA_TYPE : PERFORMANCE_DATA_TYPE; + return ( @@ -91,7 +101,7 @@ function ResourceSummary() { crumbs={[ ...crumbs, { - label: 'Asset Summary', + label: tct('[dataType] Summary', {dataType: resourceDataType}), }, ]} /> diff --git a/static/app/views/performance/browser/resources/resourceView/resourceTable.tsx b/static/app/views/performance/browser/resources/resourceView/resourceTable.tsx index ebeee40211f3a8..1a71b2caf64e64 100644 --- a/static/app/views/performance/browser/resources/resourceView/resourceTable.tsx +++ b/static/app/views/performance/browser/resources/resourceView/resourceTable.tsx @@ -13,7 +13,12 @@ import {browserHistory} from 'sentry/utils/browserHistory'; import {DismissId, usePageAlert} from 'sentry/utils/performance/contexts/pageAlert'; import {decodeScalar} from 'sentry/utils/queryString'; import {useLocation} from 'sentry/utils/useLocation'; +import useOrganization from 'sentry/utils/useOrganization'; import {RESOURCE_THROUGHPUT_UNIT} from 'sentry/views/performance/browser/resources'; +import { + DATA_TYPE, + PERFORMANCE_DATA_TYPE, +} from 'sentry/views/performance/browser/resources/settings'; import { FONT_FILE_EXTENSIONS, IMAGE_FILE_EXTENSIONS, @@ -69,9 +74,14 @@ type Props = { function ResourceTable({sort, defaultResourceTypes}: Props) { const location = useLocation(); + const organization = useOrganization(); const cursor = decodeScalar(location.query?.[QueryParameterNames.SPANS_CURSOR]); const {setPageInfo, pageAlert} = usePageAlert(); + const isInsightsEnabled = organization.features.includes('performance-insights'); + + const resourceDataType = isInsightsEnabled ? DATA_TYPE : PERFORMANCE_DATA_TYPE; + const {data, isLoading, pageLinks} = useResourcesQuery({ sort, defaultResourceTypes, @@ -80,7 +90,11 @@ function ResourceTable({sort, defaultResourceTypes}: Props) { }); const columnOrder: GridColumnOrder[] = [ - {key: SPAN_DESCRIPTION, width: COL_WIDTH_UNDEFINED, name: t('Resource Description')}, + { + key: SPAN_DESCRIPTION, + width: COL_WIDTH_UNDEFINED, + name: `${resourceDataType} ${t('Description')}`, + }, { key: `${SPM}()`, width: COL_WIDTH_UNDEFINED, diff --git a/static/app/views/performance/browser/resources/settings.ts b/static/app/views/performance/browser/resources/settings.ts index 1bb4214e67a445..57d09adbbc7dde 100644 --- a/static/app/views/performance/browser/resources/settings.ts +++ b/static/app/views/performance/browser/resources/settings.ts @@ -1,7 +1,11 @@ import {t} from 'sentry/locale'; -export const MODULE_TITLE = t('Resources'); +export const MODULE_TITLE = t('Assets'); export const BASE_URL = 'browser/resources'; +export const DATA_TYPE = t('Asset'); // Name of the data shown (singular) + +export const PERFORMANCE_MODULE_TITLE = t('Resources'); +export const PERFORMANCE_DATA_TYPE = t('Resource'); export const MODULE_DESCRIPTION = t( 'Find large and slow-to-load resources used by your application and understand their impact on page performance.' 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 d46fb8988e27a2..ce7ac3f47fb9cf 100644 --- a/static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx +++ b/static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx @@ -943,7 +943,7 @@ describe('Performance > Widgets > WidgetContainer', function () { }); it('Most time consuming resources widget', async function () { - const data = initializeData(); + const data = initializeData(undefined, {features: ['performance-insights']}); wrapper = render( @@ -959,7 +959,7 @@ describe('Performance > Widgets > WidgetContainer', function () { ); expect(await screen.findByRole('button', {name: 'View All'})).toHaveAttribute( 'href', - '/performance/browser/resources/' + '/insights/browser/resources/' ); expect(eventsMock).toHaveBeenCalledTimes(1); expect(eventsMock).toHaveBeenNthCalledWith( diff --git a/static/app/views/performance/landing/widgets/widgetDefinitions.tsx b/static/app/views/performance/landing/widgets/widgetDefinitions.tsx index a2bb838a62e8cb..dd5b23d884ed1e 100644 --- a/static/app/views/performance/landing/widgets/widgetDefinitions.tsx +++ b/static/app/views/performance/landing/widgets/widgetDefinitions.tsx @@ -2,6 +2,8 @@ import {CHART_PALETTE} from 'sentry/constants/chartPalette'; import {t} from 'sentry/locale'; import type {Organization} from 'sentry/types/organization'; import {SPAN_OP_BREAKDOWN_FIELDS} from 'sentry/utils/discover/fields'; +import {useModuleTitle} from 'sentry/views/performance/utils/useModuleTitle'; +import {ModuleName} from 'sentry/views/starfish/types'; import {getTermHelp, PerformanceTerm} from '../../data'; @@ -82,355 +84,362 @@ export const WIDGET_DEFINITIONS: ({ organization, }: { organization: Organization; -}) => ({ - [PerformanceWidgetSetting.DURATION_HISTOGRAM]: { - title: t('Duration Distribution'), - titleTooltip: getTermHelp(organization, PerformanceTerm.DURATION_DISTRIBUTION), - fields: ['transaction.duration'], - dataType: GenericPerformanceWidgetDataType.HISTOGRAM, - chartColor: WIDGET_PALETTE[5], - }, - [PerformanceWidgetSetting.LCP_HISTOGRAM]: { - title: t('LCP Distribution'), - titleTooltip: getTermHelp(organization, PerformanceTerm.DURATION_DISTRIBUTION), - fields: ['measurements.lcp'], - dataType: GenericPerformanceWidgetDataType.HISTOGRAM, - chartColor: WIDGET_PALETTE[5], - }, - [PerformanceWidgetSetting.FCP_HISTOGRAM]: { - title: t('FCP Distribution'), - titleTooltip: getTermHelp(organization, PerformanceTerm.DURATION_DISTRIBUTION), - fields: ['measurements.fcp'], - dataType: GenericPerformanceWidgetDataType.HISTOGRAM, - chartColor: WIDGET_PALETTE[5], - }, - [PerformanceWidgetSetting.FID_HISTOGRAM]: { - title: t('FID Distribution'), - titleTooltip: getTermHelp(organization, PerformanceTerm.DURATION_DISTRIBUTION), - fields: ['measurements.fid'], - dataType: GenericPerformanceWidgetDataType.HISTOGRAM, - chartColor: WIDGET_PALETTE[5], - }, - [PerformanceWidgetSetting.WORST_LCP_VITALS]: { - title: t('Worst LCP Web Vitals'), - titleTooltip: getTermHelp(organization, PerformanceTerm.LCP), - fields: ['measurements.lcp'], - vitalStops: { - poor: 4000, - meh: 2500, - }, - dataType: GenericPerformanceWidgetDataType.VITALS, - }, - [PerformanceWidgetSetting.WORST_FCP_VITALS]: { - title: t('Worst FCP Web Vitals'), - titleTooltip: getTermHelp(organization, PerformanceTerm.FCP), - fields: ['measurements.fcp'], - vitalStops: { - poor: 3000, - meh: 1000, - }, - dataType: GenericPerformanceWidgetDataType.VITALS, - }, - [PerformanceWidgetSetting.WORST_FID_VITALS]: { - title: t('Worst FID Web Vitals'), - titleTooltip: getTermHelp(organization, PerformanceTerm.FID), - fields: ['measurements.fid'], - vitalStops: { - poor: 300, - meh: 100, - }, - dataType: GenericPerformanceWidgetDataType.VITALS, - }, - [PerformanceWidgetSetting.WORST_CLS_VITALS]: { - title: t('Worst CLS Web Vitals'), - titleTooltip: getTermHelp(organization, PerformanceTerm.CLS), - fields: ['measurements.cls'], - vitalStops: { - poor: 0.25, - meh: 0.1, - }, - dataType: GenericPerformanceWidgetDataType.VITALS, - }, - [PerformanceWidgetSetting.TPM_AREA]: { - title: t('Transactions Per Minute'), - titleTooltip: getTermHelp(organization, PerformanceTerm.TPM), - fields: ['tpm()'], - dataType: GenericPerformanceWidgetDataType.AREA, - chartColor: WIDGET_PALETTE[1], - allowsOpenInDiscover: true, - }, - [PerformanceWidgetSetting.APDEX_AREA]: { - title: t('Apdex'), - titleTooltip: getTermHelp(organization, PerformanceTerm.APDEX), - fields: ['apdex()'], - dataType: GenericPerformanceWidgetDataType.AREA, - chartColor: WIDGET_PALETTE[4], - allowsOpenInDiscover: true, - }, - [PerformanceWidgetSetting.P50_DURATION_AREA]: { - title: t('p50 Duration'), - titleTooltip: getTermHelp(organization, PerformanceTerm.P50), - fields: ['p50(transaction.duration)'], - dataType: GenericPerformanceWidgetDataType.AREA, - chartColor: WIDGET_PALETTE[3], - allowsOpenInDiscover: true, - }, - [PerformanceWidgetSetting.P75_DURATION_AREA]: { - title: t('p75 Duration'), - titleTooltip: getTermHelp(organization, PerformanceTerm.P75), - fields: ['p75(transaction.duration)'], - dataType: GenericPerformanceWidgetDataType.AREA, - chartColor: WIDGET_PALETTE[3], - allowsOpenInDiscover: true, - }, - [PerformanceWidgetSetting.P95_DURATION_AREA]: { - title: t('p95 Duration'), - titleTooltip: getTermHelp(organization, PerformanceTerm.P95), - fields: ['p95(transaction.duration)'], - dataType: GenericPerformanceWidgetDataType.AREA, - chartColor: WIDGET_PALETTE[3], - allowsOpenInDiscover: true, - }, - [PerformanceWidgetSetting.P99_DURATION_AREA]: { - title: t('p99 Duration'), - titleTooltip: getTermHelp(organization, PerformanceTerm.P99), - fields: ['p99(transaction.duration)'], - dataType: GenericPerformanceWidgetDataType.AREA, - chartColor: WIDGET_PALETTE[3], - allowsOpenInDiscover: true, - }, - [PerformanceWidgetSetting.P75_LCP_AREA]: { - title: t('p75 LCP'), - titleTooltip: getTermHelp(organization, PerformanceTerm.P75), - fields: ['p75(measurements.lcp)'], - dataType: GenericPerformanceWidgetDataType.AREA, - chartColor: WIDGET_PALETTE[1], - allowsOpenInDiscover: true, - }, - [PerformanceWidgetSetting.FAILURE_RATE_AREA]: { - title: t('Failure Rate'), - titleTooltip: getTermHelp(organization, PerformanceTerm.FAILURE_RATE), - fields: ['failure_rate()'], - dataType: GenericPerformanceWidgetDataType.AREA, - chartColor: WIDGET_PALETTE[2], - allowsOpenInDiscover: true, - }, - [PerformanceWidgetSetting.USER_MISERY_AREA]: { - title: t('User Misery'), - titleTooltip: getTermHelp(organization, PerformanceTerm.USER_MISERY), - fields: [`user_misery()`], - dataType: GenericPerformanceWidgetDataType.AREA, - chartColor: WIDGET_PALETTE[0], - allowsOpenInDiscover: true, - }, - [PerformanceWidgetSetting.COLD_STARTUP_AREA]: { - title: t('Cold Startup Time'), - titleTooltip: getTermHelp(organization, PerformanceTerm.APP_START_COLD), - fields: ['p75(measurements.app_start_cold)'], - dataType: GenericPerformanceWidgetDataType.AREA, - chartColor: WIDGET_PALETTE[4], - allowsOpenInDiscover: true, - }, - [PerformanceWidgetSetting.WARM_STARTUP_AREA]: { - title: t('Warm Startup Time'), - titleTooltip: getTermHelp(organization, PerformanceTerm.APP_START_WARM), - fields: ['p75(measurements.app_start_warm)'], - dataType: GenericPerformanceWidgetDataType.AREA, - chartColor: WIDGET_PALETTE[3], - allowsOpenInDiscover: true, - }, - [PerformanceWidgetSetting.SLOW_FRAMES_AREA]: { - title: t('Slow Frames'), - titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_FRAMES), - fields: ['p75(measurements.frames_slow_rate)'], - dataType: GenericPerformanceWidgetDataType.AREA, - chartColor: WIDGET_PALETTE[0], - allowsOpenInDiscover: true, - }, - [PerformanceWidgetSetting.FROZEN_FRAMES_AREA]: { - title: t('Frozen Frames'), - titleTooltip: getTermHelp(organization, PerformanceTerm.FROZEN_FRAMES), - fields: ['p75(measurements.frames_frozen_rate)'], - dataType: GenericPerformanceWidgetDataType.AREA, - chartColor: WIDGET_PALETTE[5], - allowsOpenInDiscover: true, - }, - [PerformanceWidgetSetting.MOST_RELATED_ERRORS]: { - title: t('Most Related Errors'), - titleTooltip: getTermHelp(organization, PerformanceTerm.MOST_ERRORS), - fields: [`failure_count()`], - dataType: GenericPerformanceWidgetDataType.LINE_LIST, - chartColor: WIDGET_PALETTE[0], - }, - [PerformanceWidgetSetting.MOST_RELATED_ISSUES]: { - title: t('Most Related Issues'), - titleTooltip: getTermHelp(organization, PerformanceTerm.MOST_ISSUES), - fields: [`count()`], - dataType: GenericPerformanceWidgetDataType.LINE_LIST, - chartColor: WIDGET_PALETTE[0], - }, - [PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES]: { - title: t('Most Time-Consuming Queries'), - subTitle: t('Top queries by total duration'), - titleTooltip: getTermHelp(organization, PerformanceTerm.MOST_TIME_SPENT_DB_QUERIES), - fields: [`time_spent_percentage()`], - dataType: GenericPerformanceWidgetDataType.LINE_LIST, - chartColor: WIDGET_PALETTE[0], - }, - [PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES]: { - title: t('Most Time Consuming Assets'), - subTitle: t('Render blocking for pages'), - titleTooltip: getTermHelp( - organization, - PerformanceTerm.MOST_TIME_CONSUMING_RESOURCES - ), - fields: [`time_spent_percentage()`], - dataType: GenericPerformanceWidgetDataType.LINE_LIST, - chartColor: WIDGET_PALETTE[0], - }, - [PerformanceWidgetSetting.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS]: { - title: t('Highest Cache Miss Rates'), - subTitle: t('Suggested Transactions'), - titleTooltip: getTermHelp( - organization, - PerformanceTerm.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS - ), - fields: [`cache_miss_rate()`], - dataType: GenericPerformanceWidgetDataType.LINE_LIST, - chartColor: WIDGET_PALETTE[0], - }, - [PerformanceWidgetSetting.MOST_TIME_CONSUMING_DOMAINS]: { - title: t('Most Time-Consuming Domains'), - subTitle: t('Top outgoing HTTP request domains by time spent'), - titleTooltip: getTermHelp(organization, PerformanceTerm.MOST_TIME_CONSUMING_DOMAINS), - fields: [`time_spent_percentage()`], - dataType: GenericPerformanceWidgetDataType.LINE_LIST, - chartColor: WIDGET_PALETTE[0], - }, - [PerformanceWidgetSetting.HIGHEST_OPPORTUNITY_PAGES]: { - title: t('Best Page Opportunities'), - subTitle: t('Pages to improve your performance score'), - titleTooltip: '', - fields: [`count()`], - dataType: GenericPerformanceWidgetDataType.PERFORMANCE_SCORE_LIST, - }, - [PerformanceWidgetSetting.OVERALL_PERFORMANCE_SCORE]: { - title: t('Performance Score'), - subTitle: t('The overall performance score across selected frontend projects only'), - titleTooltip: '', - fields: [], - dataType: GenericPerformanceWidgetDataType.PERFORMANCE_SCORE, - }, - [PerformanceWidgetSetting.SLOW_HTTP_OPS]: { - title: t('Slow HTTP Ops'), - titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_HTTP_SPANS), - fields: [`p75(spans.http)`, 'p75(spans.db)'], - dataType: GenericPerformanceWidgetDataType.LINE_LIST, - chartColor: WIDGET_PALETTE[0], - }, - [PerformanceWidgetSetting.SLOW_BROWSER_OPS]: { - title: t('Slow Browser Ops'), - titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_HTTP_SPANS), - fields: [`p75(spans.browser)`], - dataType: GenericPerformanceWidgetDataType.LINE_LIST, - chartColor: WIDGET_PALETTE[0], - }, - [PerformanceWidgetSetting.SLOW_RESOURCE_OPS]: { - title: t('Slow Resource Ops'), - titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_HTTP_SPANS), - fields: [`p75(spans.resource)`], - dataType: GenericPerformanceWidgetDataType.LINE_LIST, - chartColor: WIDGET_PALETTE[0], - }, - [PerformanceWidgetSetting.SLOW_DB_OPS]: { - title: t('Slow DB Ops'), - titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_HTTP_SPANS), - fields: [`p75(spans.db)`, 'p75(spans.http)'], - dataType: GenericPerformanceWidgetDataType.LINE_LIST, - chartColor: WIDGET_PALETTE[0], - }, - [PerformanceWidgetSetting.TIME_TO_INITIAL_DISPLAY]: { - title: t('Time to Initial Display'), - titleTooltip: getTermHelp(organization, PerformanceTerm.TIME_TO_INITIAL_DISPLAY), - fields: ['p75(measurements.time_to_initial_display)'], - dataType: GenericPerformanceWidgetDataType.AREA, - chartColor: WIDGET_PALETTE[4], - allowsOpenInDiscover: true, - }, - [PerformanceWidgetSetting.TIME_TO_FULL_DISPLAY]: { - title: t('Time to Full Display'), - titleTooltip: getTermHelp(organization, PerformanceTerm.TIME_TO_FULL_DISPLAY), - fields: ['p75(measurements.time_to_full_display)'], - dataType: GenericPerformanceWidgetDataType.AREA, - chartColor: WIDGET_PALETTE[4], - allowsOpenInDiscover: true, - }, - [PerformanceWidgetSetting.MOST_SLOW_FRAMES]: { - title: t('Most Slow Frames'), - titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_FRAMES), - fields: ['avg(measurements.frames_slow)'], - dataType: GenericPerformanceWidgetDataType.LINE_LIST, - chartColor: WIDGET_PALETTE[0], - }, - [PerformanceWidgetSetting.MOST_FROZEN_FRAMES]: { - title: t('Most Frozen Frames'), - titleTooltip: getTermHelp(organization, PerformanceTerm.FROZEN_FRAMES), - fields: ['avg(measurements.frames_frozen)'], - dataType: GenericPerformanceWidgetDataType.LINE_LIST, - chartColor: WIDGET_PALETTE[0], - }, - [PerformanceWidgetSetting.MOST_IMPROVED]: { - title: t('Most Improved (P95)'), - titleTooltip: t( - 'This compares the baseline (%s) of the past with the present.', - 'improved' - ), - fields: [], - dataType: GenericPerformanceWidgetDataType.TRENDS, - }, - [PerformanceWidgetSetting.MOST_REGRESSED]: { - title: t('Most Regressed (P95)'), - titleTooltip: t( - 'This compares the baseline (%s) of the past with the present.', - 'regressed' - ), - fields: [], - dataType: GenericPerformanceWidgetDataType.TRENDS, - }, - [PerformanceWidgetSetting.MOST_CHANGED]: { - title: t('Most Changed (P95)'), - titleTooltip: t( - 'This compares the baseline (%s) of the past with the present.', - 'changed' - ), - fields: [], - dataType: GenericPerformanceWidgetDataType.TRENDS, - }, - [PerformanceWidgetSetting.SPAN_OPERATIONS]: { - title: t('Span Operations Breakdown'), - titleTooltip: '', - fields: SPAN_OP_BREAKDOWN_FIELDS.map(spanOp => `p75(${spanOp})`), - dataType: GenericPerformanceWidgetDataType.STACKED_AREA, - }, - [PerformanceWidgetSetting.SLOW_SCREENS_BY_TTID]: { - title: t('Average TTIDs'), - titleTooltip: '', - subTitle: t('Top screens by count'), - fields: ['avg(measurements.time_to_initial_display)'], - dataType: GenericPerformanceWidgetDataType.SLOW_SCREENS_BY_TTID, - }, - [PerformanceWidgetSetting.SLOW_SCREENS_BY_COLD_START]: { - title: t('Average Cold Start'), - titleTooltip: '', - subTitle: t('Top screens by start count'), - fields: ['avg(measurements.app_start_cold)'], - dataType: GenericPerformanceWidgetDataType.SLOW_SCREENS_BY_COLD_START, - }, - [PerformanceWidgetSetting.SLOW_SCREENS_BY_WARM_START]: { - title: t('Average Warm Start'), - titleTooltip: '', - subTitle: t('Top screens by start count'), - fields: ['avg(measurements.app_start_warm)'], - dataType: GenericPerformanceWidgetDataType.SLOW_SCREENS_BY_WARM_START, - }, -}); +}) => { + const resourceModuleTitle = useModuleTitle(ModuleName.RESOURCE); + + return { + [PerformanceWidgetSetting.DURATION_HISTOGRAM]: { + title: t('Duration Distribution'), + titleTooltip: getTermHelp(organization, PerformanceTerm.DURATION_DISTRIBUTION), + fields: ['transaction.duration'], + dataType: GenericPerformanceWidgetDataType.HISTOGRAM, + chartColor: WIDGET_PALETTE[5], + }, + [PerformanceWidgetSetting.LCP_HISTOGRAM]: { + title: t('LCP Distribution'), + titleTooltip: getTermHelp(organization, PerformanceTerm.DURATION_DISTRIBUTION), + fields: ['measurements.lcp'], + dataType: GenericPerformanceWidgetDataType.HISTOGRAM, + chartColor: WIDGET_PALETTE[5], + }, + [PerformanceWidgetSetting.FCP_HISTOGRAM]: { + title: t('FCP Distribution'), + titleTooltip: getTermHelp(organization, PerformanceTerm.DURATION_DISTRIBUTION), + fields: ['measurements.fcp'], + dataType: GenericPerformanceWidgetDataType.HISTOGRAM, + chartColor: WIDGET_PALETTE[5], + }, + [PerformanceWidgetSetting.FID_HISTOGRAM]: { + title: t('FID Distribution'), + titleTooltip: getTermHelp(organization, PerformanceTerm.DURATION_DISTRIBUTION), + fields: ['measurements.fid'], + dataType: GenericPerformanceWidgetDataType.HISTOGRAM, + chartColor: WIDGET_PALETTE[5], + }, + [PerformanceWidgetSetting.WORST_LCP_VITALS]: { + title: t('Worst LCP Web Vitals'), + titleTooltip: getTermHelp(organization, PerformanceTerm.LCP), + fields: ['measurements.lcp'], + vitalStops: { + poor: 4000, + meh: 2500, + }, + dataType: GenericPerformanceWidgetDataType.VITALS, + }, + [PerformanceWidgetSetting.WORST_FCP_VITALS]: { + title: t('Worst FCP Web Vitals'), + titleTooltip: getTermHelp(organization, PerformanceTerm.FCP), + fields: ['measurements.fcp'], + vitalStops: { + poor: 3000, + meh: 1000, + }, + dataType: GenericPerformanceWidgetDataType.VITALS, + }, + [PerformanceWidgetSetting.WORST_FID_VITALS]: { + title: t('Worst FID Web Vitals'), + titleTooltip: getTermHelp(organization, PerformanceTerm.FID), + fields: ['measurements.fid'], + vitalStops: { + poor: 300, + meh: 100, + }, + dataType: GenericPerformanceWidgetDataType.VITALS, + }, + [PerformanceWidgetSetting.WORST_CLS_VITALS]: { + title: t('Worst CLS Web Vitals'), + titleTooltip: getTermHelp(organization, PerformanceTerm.CLS), + fields: ['measurements.cls'], + vitalStops: { + poor: 0.25, + meh: 0.1, + }, + dataType: GenericPerformanceWidgetDataType.VITALS, + }, + [PerformanceWidgetSetting.TPM_AREA]: { + title: t('Transactions Per Minute'), + titleTooltip: getTermHelp(organization, PerformanceTerm.TPM), + fields: ['tpm()'], + dataType: GenericPerformanceWidgetDataType.AREA, + chartColor: WIDGET_PALETTE[1], + allowsOpenInDiscover: true, + }, + [PerformanceWidgetSetting.APDEX_AREA]: { + title: t('Apdex'), + titleTooltip: getTermHelp(organization, PerformanceTerm.APDEX), + fields: ['apdex()'], + dataType: GenericPerformanceWidgetDataType.AREA, + chartColor: WIDGET_PALETTE[4], + allowsOpenInDiscover: true, + }, + [PerformanceWidgetSetting.P50_DURATION_AREA]: { + title: t('p50 Duration'), + titleTooltip: getTermHelp(organization, PerformanceTerm.P50), + fields: ['p50(transaction.duration)'], + dataType: GenericPerformanceWidgetDataType.AREA, + chartColor: WIDGET_PALETTE[3], + allowsOpenInDiscover: true, + }, + [PerformanceWidgetSetting.P75_DURATION_AREA]: { + title: t('p75 Duration'), + titleTooltip: getTermHelp(organization, PerformanceTerm.P75), + fields: ['p75(transaction.duration)'], + dataType: GenericPerformanceWidgetDataType.AREA, + chartColor: WIDGET_PALETTE[3], + allowsOpenInDiscover: true, + }, + [PerformanceWidgetSetting.P95_DURATION_AREA]: { + title: t('p95 Duration'), + titleTooltip: getTermHelp(organization, PerformanceTerm.P95), + fields: ['p95(transaction.duration)'], + dataType: GenericPerformanceWidgetDataType.AREA, + chartColor: WIDGET_PALETTE[3], + allowsOpenInDiscover: true, + }, + [PerformanceWidgetSetting.P99_DURATION_AREA]: { + title: t('p99 Duration'), + titleTooltip: getTermHelp(organization, PerformanceTerm.P99), + fields: ['p99(transaction.duration)'], + dataType: GenericPerformanceWidgetDataType.AREA, + chartColor: WIDGET_PALETTE[3], + allowsOpenInDiscover: true, + }, + [PerformanceWidgetSetting.P75_LCP_AREA]: { + title: t('p75 LCP'), + titleTooltip: getTermHelp(organization, PerformanceTerm.P75), + fields: ['p75(measurements.lcp)'], + dataType: GenericPerformanceWidgetDataType.AREA, + chartColor: WIDGET_PALETTE[1], + allowsOpenInDiscover: true, + }, + [PerformanceWidgetSetting.FAILURE_RATE_AREA]: { + title: t('Failure Rate'), + titleTooltip: getTermHelp(organization, PerformanceTerm.FAILURE_RATE), + fields: ['failure_rate()'], + dataType: GenericPerformanceWidgetDataType.AREA, + chartColor: WIDGET_PALETTE[2], + allowsOpenInDiscover: true, + }, + [PerformanceWidgetSetting.USER_MISERY_AREA]: { + title: t('User Misery'), + titleTooltip: getTermHelp(organization, PerformanceTerm.USER_MISERY), + fields: [`user_misery()`], + dataType: GenericPerformanceWidgetDataType.AREA, + chartColor: WIDGET_PALETTE[0], + allowsOpenInDiscover: true, + }, + [PerformanceWidgetSetting.COLD_STARTUP_AREA]: { + title: t('Cold Startup Time'), + titleTooltip: getTermHelp(organization, PerformanceTerm.APP_START_COLD), + fields: ['p75(measurements.app_start_cold)'], + dataType: GenericPerformanceWidgetDataType.AREA, + chartColor: WIDGET_PALETTE[4], + allowsOpenInDiscover: true, + }, + [PerformanceWidgetSetting.WARM_STARTUP_AREA]: { + title: t('Warm Startup Time'), + titleTooltip: getTermHelp(organization, PerformanceTerm.APP_START_WARM), + fields: ['p75(measurements.app_start_warm)'], + dataType: GenericPerformanceWidgetDataType.AREA, + chartColor: WIDGET_PALETTE[3], + allowsOpenInDiscover: true, + }, + [PerformanceWidgetSetting.SLOW_FRAMES_AREA]: { + title: t('Slow Frames'), + titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_FRAMES), + fields: ['p75(measurements.frames_slow_rate)'], + dataType: GenericPerformanceWidgetDataType.AREA, + chartColor: WIDGET_PALETTE[0], + allowsOpenInDiscover: true, + }, + [PerformanceWidgetSetting.FROZEN_FRAMES_AREA]: { + title: t('Frozen Frames'), + titleTooltip: getTermHelp(organization, PerformanceTerm.FROZEN_FRAMES), + fields: ['p75(measurements.frames_frozen_rate)'], + dataType: GenericPerformanceWidgetDataType.AREA, + chartColor: WIDGET_PALETTE[5], + allowsOpenInDiscover: true, + }, + [PerformanceWidgetSetting.MOST_RELATED_ERRORS]: { + title: t('Most Related Errors'), + titleTooltip: getTermHelp(organization, PerformanceTerm.MOST_ERRORS), + fields: [`failure_count()`], + dataType: GenericPerformanceWidgetDataType.LINE_LIST, + chartColor: WIDGET_PALETTE[0], + }, + [PerformanceWidgetSetting.MOST_RELATED_ISSUES]: { + title: t('Most Related Issues'), + titleTooltip: getTermHelp(organization, PerformanceTerm.MOST_ISSUES), + fields: [`count()`], + dataType: GenericPerformanceWidgetDataType.LINE_LIST, + chartColor: WIDGET_PALETTE[0], + }, + [PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES]: { + title: t('Most Time-Consuming Queries'), + subTitle: t('Top queries by total duration'), + titleTooltip: getTermHelp(organization, PerformanceTerm.MOST_TIME_SPENT_DB_QUERIES), + fields: [`time_spent_percentage()`], + dataType: GenericPerformanceWidgetDataType.LINE_LIST, + chartColor: WIDGET_PALETTE[0], + }, + [PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES]: { + title: t('Most Time Consuming [resourceModuleTitle]', {resourceModuleTitle}), + subTitle: t('Render blocking for pages'), + titleTooltip: getTermHelp( + organization, + PerformanceTerm.MOST_TIME_CONSUMING_RESOURCES + ), + fields: [`time_spent_percentage()`], + dataType: GenericPerformanceWidgetDataType.LINE_LIST, + chartColor: WIDGET_PALETTE[0], + }, + [PerformanceWidgetSetting.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS]: { + title: t('Highest Cache Miss Rates'), + subTitle: t('Suggested Transactions'), + titleTooltip: getTermHelp( + organization, + PerformanceTerm.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS + ), + fields: [`cache_miss_rate()`], + dataType: GenericPerformanceWidgetDataType.LINE_LIST, + chartColor: WIDGET_PALETTE[0], + }, + [PerformanceWidgetSetting.MOST_TIME_CONSUMING_DOMAINS]: { + title: t('Most Time-Consuming Domains'), + subTitle: t('Top outgoing HTTP request domains by time spent'), + titleTooltip: getTermHelp( + organization, + PerformanceTerm.MOST_TIME_CONSUMING_DOMAINS + ), + fields: [`time_spent_percentage()`], + dataType: GenericPerformanceWidgetDataType.LINE_LIST, + chartColor: WIDGET_PALETTE[0], + }, + [PerformanceWidgetSetting.HIGHEST_OPPORTUNITY_PAGES]: { + title: t('Best Page Opportunities'), + subTitle: t('Pages to improve your performance score'), + titleTooltip: '', + fields: [`count()`], + dataType: GenericPerformanceWidgetDataType.PERFORMANCE_SCORE_LIST, + }, + [PerformanceWidgetSetting.OVERALL_PERFORMANCE_SCORE]: { + title: t('Performance Score'), + subTitle: t('The overall performance score across selected frontend projects only'), + titleTooltip: '', + fields: [], + dataType: GenericPerformanceWidgetDataType.PERFORMANCE_SCORE, + }, + [PerformanceWidgetSetting.SLOW_HTTP_OPS]: { + title: t('Slow HTTP Ops'), + titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_HTTP_SPANS), + fields: [`p75(spans.http)`, 'p75(spans.db)'], + dataType: GenericPerformanceWidgetDataType.LINE_LIST, + chartColor: WIDGET_PALETTE[0], + }, + [PerformanceWidgetSetting.SLOW_BROWSER_OPS]: { + title: t('Slow Browser Ops'), + titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_HTTP_SPANS), + fields: [`p75(spans.browser)`], + dataType: GenericPerformanceWidgetDataType.LINE_LIST, + chartColor: WIDGET_PALETTE[0], + }, + [PerformanceWidgetSetting.SLOW_RESOURCE_OPS]: { + title: t('Slow Resource Ops'), + titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_HTTP_SPANS), + fields: [`p75(spans.resource)`], + dataType: GenericPerformanceWidgetDataType.LINE_LIST, + chartColor: WIDGET_PALETTE[0], + }, + [PerformanceWidgetSetting.SLOW_DB_OPS]: { + title: t('Slow DB Ops'), + titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_HTTP_SPANS), + fields: [`p75(spans.db)`, 'p75(spans.http)'], + dataType: GenericPerformanceWidgetDataType.LINE_LIST, + chartColor: WIDGET_PALETTE[0], + }, + [PerformanceWidgetSetting.TIME_TO_INITIAL_DISPLAY]: { + title: t('Time to Initial Display'), + titleTooltip: getTermHelp(organization, PerformanceTerm.TIME_TO_INITIAL_DISPLAY), + fields: ['p75(measurements.time_to_initial_display)'], + dataType: GenericPerformanceWidgetDataType.AREA, + chartColor: WIDGET_PALETTE[4], + allowsOpenInDiscover: true, + }, + [PerformanceWidgetSetting.TIME_TO_FULL_DISPLAY]: { + title: t('Time to Full Display'), + titleTooltip: getTermHelp(organization, PerformanceTerm.TIME_TO_FULL_DISPLAY), + fields: ['p75(measurements.time_to_full_display)'], + dataType: GenericPerformanceWidgetDataType.AREA, + chartColor: WIDGET_PALETTE[4], + allowsOpenInDiscover: true, + }, + [PerformanceWidgetSetting.MOST_SLOW_FRAMES]: { + title: t('Most Slow Frames'), + titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_FRAMES), + fields: ['avg(measurements.frames_slow)'], + dataType: GenericPerformanceWidgetDataType.LINE_LIST, + chartColor: WIDGET_PALETTE[0], + }, + [PerformanceWidgetSetting.MOST_FROZEN_FRAMES]: { + title: t('Most Frozen Frames'), + titleTooltip: getTermHelp(organization, PerformanceTerm.FROZEN_FRAMES), + fields: ['avg(measurements.frames_frozen)'], + dataType: GenericPerformanceWidgetDataType.LINE_LIST, + chartColor: WIDGET_PALETTE[0], + }, + [PerformanceWidgetSetting.MOST_IMPROVED]: { + title: t('Most Improved (P95)'), + titleTooltip: t( + 'This compares the baseline (%s) of the past with the present.', + 'improved' + ), + fields: [], + dataType: GenericPerformanceWidgetDataType.TRENDS, + }, + [PerformanceWidgetSetting.MOST_REGRESSED]: { + title: t('Most Regressed (P95)'), + titleTooltip: t( + 'This compares the baseline (%s) of the past with the present.', + 'regressed' + ), + fields: [], + dataType: GenericPerformanceWidgetDataType.TRENDS, + }, + [PerformanceWidgetSetting.MOST_CHANGED]: { + title: t('Most Changed (P95)'), + titleTooltip: t( + 'This compares the baseline (%s) of the past with the present.', + 'changed' + ), + fields: [], + dataType: GenericPerformanceWidgetDataType.TRENDS, + }, + [PerformanceWidgetSetting.SPAN_OPERATIONS]: { + title: t('Span Operations Breakdown'), + titleTooltip: '', + fields: SPAN_OP_BREAKDOWN_FIELDS.map(spanOp => `p75(${spanOp})`), + dataType: GenericPerformanceWidgetDataType.STACKED_AREA, + }, + [PerformanceWidgetSetting.SLOW_SCREENS_BY_TTID]: { + title: t('Average TTIDs'), + titleTooltip: '', + subTitle: t('Top screens by count'), + fields: ['avg(measurements.time_to_initial_display)'], + dataType: GenericPerformanceWidgetDataType.SLOW_SCREENS_BY_TTID, + }, + [PerformanceWidgetSetting.SLOW_SCREENS_BY_COLD_START]: { + title: t('Average Cold Start'), + titleTooltip: '', + subTitle: t('Top screens by start count'), + fields: ['avg(measurements.app_start_cold)'], + dataType: GenericPerformanceWidgetDataType.SLOW_SCREENS_BY_COLD_START, + }, + [PerformanceWidgetSetting.SLOW_SCREENS_BY_WARM_START]: { + title: t('Average Warm Start'), + titleTooltip: '', + subTitle: t('Top screens by start count'), + fields: ['avg(measurements.app_start_warm)'], + dataType: GenericPerformanceWidgetDataType.SLOW_SCREENS_BY_WARM_START, + }, + }; +}; diff --git a/static/app/views/performance/utils/useModuleTitle.tsx b/static/app/views/performance/utils/useModuleTitle.tsx index c2c1c1e59dce49..c9ed0934249e97 100644 --- a/static/app/views/performance/utils/useModuleTitle.tsx +++ b/static/app/views/performance/utils/useModuleTitle.tsx @@ -1,5 +1,9 @@ +import useOrganization from 'sentry/utils/useOrganization'; import {MODULE_TITLE as AI_MODULE_TITLE} from 'sentry/views/llmMonitoring/settings'; -import {MODULE_TITLE as RESOURCES_MODULE_TITLE} from 'sentry/views/performance/browser/resources/settings'; +import { + MODULE_TITLE as RESOURCES_MODULE_TITLE, + PERFORMANCE_MODULE_TITLE as PERFORMANCE_RESOURCES_MODULE_TITLE, +} from 'sentry/views/performance/browser/resources/settings'; import {MODULE_TITLE as VITALS_MODULE_TITLE} from 'sentry/views/performance/browser/webVitals/settings'; import {MODULE_TITLE as CACHE_MODULE_TITLE} from 'sentry/views/performance/cache/settings'; import {MODULE_TITLE as DB_MODULE_TITLE} from 'sentry/views/performance/database/settings'; @@ -25,9 +29,20 @@ export const MODULE_TITLES: Record = { [ModuleName.ALL]: '', }; +export const PERFORMANCE_MODULE_TITLES: {[key in ModuleName]?: string} = { + [ModuleName.RESOURCE]: PERFORMANCE_RESOURCES_MODULE_TITLE, +}; + type ModuleNameStrings = `${ModuleName}`; type TitleableModuleNames = Exclude; export function useModuleTitle(moduleName: TitleableModuleNames) { + const organization = useOrganization(); + const isInsightsEnabled = organization?.features?.includes('performance-insights'); + + if (!isInsightsEnabled && PERFORMANCE_MODULE_TITLES[moduleName]) { + return PERFORMANCE_MODULE_TITLES[moduleName]; + } + return MODULE_TITLES[moduleName]; } From 0cf801cf327e20fccb6ee966f1b6f900c0641df2 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 29 May 2024 13:28:26 -0400 Subject: [PATCH 11/24] update samples panel --- .../resourceSummaryPage/resourceSummaryCharts.tsx | 13 +++++++++++-- .../resources/resourceView/resourceTable.tsx | 1 - .../views/spanSummaryPage/sampleList/index.tsx | 11 ++++++++++- 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/static/app/views/performance/browser/resources/resourceSummaryPage/resourceSummaryCharts.tsx b/static/app/views/performance/browser/resources/resourceSummaryPage/resourceSummaryCharts.tsx index a51a44c401cad9..774ab48ab34c1d 100644 --- a/static/app/views/performance/browser/resources/resourceSummaryPage/resourceSummaryCharts.tsx +++ b/static/app/views/performance/browser/resources/resourceSummaryPage/resourceSummaryCharts.tsx @@ -1,10 +1,15 @@ -import {t} from 'sentry/locale'; +import {t, tct} from 'sentry/locale'; import {formatBytesBase2} from 'sentry/utils'; import {formatRate} from 'sentry/utils/formatters'; import getDynamicText from 'sentry/utils/getDynamicText'; import {MutableSearch} from 'sentry/utils/tokenizeSearch'; +import useOrganization from 'sentry/utils/useOrganization'; import {RESOURCE_THROUGHPUT_UNIT} from 'sentry/views/performance/browser/resources'; import {Referrer} from 'sentry/views/performance/browser/resources/referrer'; +import { + DATA_TYPE, + PERFORMANCE_DATA_TYPE, +} from 'sentry/views/performance/browser/resources/settings'; import {useResourceModuleFilters} from 'sentry/views/performance/browser/resources/utils/useResourceFilters'; import {AVG_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colors'; import Chart, {ChartType} from 'sentry/views/starfish/components/chart'; @@ -28,6 +33,10 @@ const { function ResourceSummaryCharts(props: {groupId: string}) { const filters = useResourceModuleFilters(); + const organization = useOrganization(); + + const isInsightsEnabled = organization.features.includes('performance-insights'); + const resourceDataType = isInsightsEnabled ? DATA_TYPE : PERFORMANCE_DATA_TYPE; const {data: spanMetricsSeriesData, isLoading: areSpanMetricsSeriesLoading} = useSpanMetricsSeries( @@ -96,7 +105,7 @@ function ResourceSummaryCharts(props: {groupId: string}) { - + Date: Wed, 29 May 2024 13:33:01 -0400 Subject: [PATCH 12/24] update --- .../browser/resources/resourceSummaryPage/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx b/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx index d910bd7a765a87..c184206bc865b4 100644 --- a/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx +++ b/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx @@ -90,7 +90,6 @@ function ResourceSummary() { const crumbs = useModuleBreadcrumbs('resource'); const isInsightsEnabled = organization.features.includes('performance-insights'); - const resourceDataType = isInsightsEnabled ? DATA_TYPE : PERFORMANCE_DATA_TYPE; return ( @@ -158,10 +157,14 @@ function ResourceSummary() { } function PageWithProviders() { + const organization = useOrganization(); + + const isInsightsEnabled = organization.features.includes('performance-insights'); + const resourceDataType = isInsightsEnabled ? DATA_TYPE : PERFORMANCE_DATA_TYPE; return ( From 50fb90b52c658ad6ed54c9029a8dfb71f29b4615 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 29 May 2024 13:59:26 -0400 Subject: [PATCH 13/24] fix routes --- .../interfaces/spans/spanSummaryButton.tsx | 4 +++- static/app/routes.tsx | 21 ++++++++++++++++++- .../performance/browser/resources/index.tsx | 7 ++++++- .../performance/browser/resources/settings.ts | 11 ++++++---- .../transactionSpans/spanDetails/utils.tsx | 13 ++++++------ .../performance/utils/useModuleTitle.tsx | 2 +- .../views/performance/utils/useModuleURL.tsx | 18 +++++++++++++++- 7 files changed, 60 insertions(+), 16 deletions(-) diff --git a/static/app/components/events/interfaces/spans/spanSummaryButton.tsx b/static/app/components/events/interfaces/spans/spanSummaryButton.tsx index db2aec9ed71834..30d15bfa6312b9 100644 --- a/static/app/components/events/interfaces/spans/spanSummaryButton.tsx +++ b/static/app/components/events/interfaces/spans/spanSummaryButton.tsx @@ -11,6 +11,7 @@ import { querySummaryRouteWithQuery, resourceSummaryRouteWithQuery, } from 'sentry/views/performance/transactionSummary/transactionSpans/spanDetails/utils'; +import {useModuleURL} from 'sentry/views/performance/utils/useModuleURL'; import {ModuleName} from 'sentry/views/starfish/types'; import {resolveSpanModule} from 'sentry/views/starfish/utils/resolveSpanModule'; @@ -22,6 +23,7 @@ interface Props { function SpanSummaryButton(props: Props) { const location = useLocation(); + const resourceBaseUrl = useModuleURL(ModuleName.RESOURCE); const {event, organization, span} = props; @@ -65,7 +67,7 @@ function SpanSummaryButton(props: Props) { + + import('sentry/views/performance/browser/resources/index') + )} + /> + + import( + 'sentry/views/performance/browser/resources/resourceSummaryPage/index' + ) + )} + /> + @@ -53,7 +56,9 @@ function ResourcesLandingPage() { {moduleTitle} diff --git a/static/app/views/performance/browser/resources/settings.ts b/static/app/views/performance/browser/resources/settings.ts index 57d09adbbc7dde..091ca5a33f2eda 100644 --- a/static/app/views/performance/browser/resources/settings.ts +++ b/static/app/views/performance/browser/resources/settings.ts @@ -1,13 +1,16 @@ import {t} from 'sentry/locale'; export const MODULE_TITLE = t('Assets'); -export const BASE_URL = 'browser/resources'; -export const DATA_TYPE = t('Asset'); // Name of the data shown (singular) +export const BASE_URL = 'browser/assets'; // Name of the data shown (singular) +export const MODULE_DESCRIPTION = t( + 'Find large and slow-to-load resources used by your application and understand their impact on page performance.' +); export const PERFORMANCE_MODULE_TITLE = t('Resources'); +export const PERFORMANCE_BASE_URL = 'browser/resources'; export const PERFORMANCE_DATA_TYPE = t('Resource'); - -export const MODULE_DESCRIPTION = t( +export const PERFORMANCE_MODULE_DESCRIPTION = t( 'Find large and slow-to-load resources used by your application and understand their impact on page performance.' ); + export const MODULE_DOC_LINK = 'https://docs.sentry.io/product/performance/resources/'; diff --git a/static/app/views/performance/transactionSummary/transactionSpans/spanDetails/utils.tsx b/static/app/views/performance/transactionSummary/transactionSpans/spanDetails/utils.tsx index 3b0e9ac18c696f..9d1b49269f3219 100644 --- a/static/app/views/performance/transactionSummary/transactionSpans/spanDetails/utils.tsx +++ b/static/app/views/performance/transactionSummary/transactionSpans/spanDetails/utils.tsx @@ -1,7 +1,6 @@ import type {Query} from 'history'; import type {SpanSlug} from 'sentry/utils/performance/suspectSpans/types'; -import {BASE_URL} from 'sentry/views/performance/browser/resources/settings'; export function generateSpanDetailsRoute({ orgSlug, @@ -85,28 +84,28 @@ export function querySummaryRouteWithQuery({ } export function generateResourceSummaryRoute({ - orgSlug, + baseUrl, group, }: { + baseUrl: string; group: string; - orgSlug: string; }): string { - return `/organizations/${orgSlug}/performance/${BASE_URL}/spans/span/${group}/`; + return `${baseUrl}/spans/span/${group}/`; } export function resourceSummaryRouteWithQuery({ - orgSlug, + baseUrl, query, group, projectID, }: { + baseUrl: string; group: string; - orgSlug: string; query: Query; projectID?: string | string[]; }) { const pathname = generateResourceSummaryRoute({ - orgSlug, + baseUrl, group, }); diff --git a/static/app/views/performance/utils/useModuleTitle.tsx b/static/app/views/performance/utils/useModuleTitle.tsx index c9ed0934249e97..b51af6d0431e03 100644 --- a/static/app/views/performance/utils/useModuleTitle.tsx +++ b/static/app/views/performance/utils/useModuleTitle.tsx @@ -37,7 +37,7 @@ type ModuleNameStrings = `${ModuleName}`; type TitleableModuleNames = Exclude; export function useModuleTitle(moduleName: TitleableModuleNames) { - const organization = useOrganization(); + const organization = useOrganization({allowNull: true}); const isInsightsEnabled = organization?.features?.includes('performance-insights'); if (!isInsightsEnabled && PERFORMANCE_MODULE_TITLES[moduleName]) { diff --git a/static/app/views/performance/utils/useModuleURL.tsx b/static/app/views/performance/utils/useModuleURL.tsx index c7f2e6f586e706..97e806ba40b0d3 100644 --- a/static/app/views/performance/utils/useModuleURL.tsx +++ b/static/app/views/performance/utils/useModuleURL.tsx @@ -1,7 +1,10 @@ import useOrganization from 'sentry/utils/useOrganization'; import {normalizeUrl} from 'sentry/utils/withDomainRequired'; import {BASE_URL as AI_BASE_URL} from 'sentry/views/llmMonitoring/settings'; -import {BASE_URL as RESOURCES_BASE_URL} from 'sentry/views/performance/browser/resources/settings'; +import { + BASE_URL as RESOURCES_BASE_URL, + PERFORMANCE_BASE_URL as PERFORMANCE_RESOURCES_BASE_URL, +} from 'sentry/views/performance/browser/resources/settings'; import {BASE_URL as VITALS_BASE_URL} from 'sentry/views/performance/browser/webVitals/settings'; import {BASE_URL as CACHE_BASE_URL} from 'sentry/views/performance/cache/settings'; import {BASE_URL as DB_BASE_URL} from 'sentry/views/performance/database/settings'; @@ -28,6 +31,10 @@ export const MODULE_BASE_URLS: Record = { [ModuleName.ALL]: '', }; +export const PERFORMANCE_MODULE_BASE_URLS: {[key in ModuleName]?: string} = { + [ModuleName.RESOURCE]: PERFORMANCE_RESOURCES_BASE_URL, +}; + type ModuleNameStrings = `${ModuleName}`; type RoutableModuleNames = Exclude; @@ -43,6 +50,7 @@ type URLBuilder = (moduleName: RoutableModuleNames) => string; export function useModuleURLBuilder(bare: boolean = false): URLBuilder { const organization = useOrganization({allowNull: true}); // Some parts of the app, like the main sidebar, render even if the organization isn't available (during loading, or at all). + const isInsightsEnabled = organization?.features?.includes('performance-insights'); const insightsURLBuilder = useInsightsURLBuilder(); @@ -65,6 +73,14 @@ export function useModuleURLBuilder(bare: boolean = false): URLBuilder { : normalizeUrl(`/organizations/${slug}/${moduleURLSegment}`); } + if (!isInsightsEnabled && PERFORMANCE_MODULE_BASE_URLS[moduleName]) { + return bare + ? `${insightsURL}/${PERFORMANCE_MODULE_BASE_URLS[moduleName]}` + : normalizeUrl( + `/organizations/${slug}/${insightsURL}/${PERFORMANCE_MODULE_BASE_URLS[moduleName]}` + ); + } + return bare ? `${insightsURL}/${MODULE_BASE_URLS[moduleName]}` : normalizeUrl( From 2edb494d3190d461a4d1ff1808a0c18c33553cc6 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 29 May 2024 14:05:52 -0400 Subject: [PATCH 14/24] update --- static/app/views/performance/browser/resources/settings.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/static/app/views/performance/browser/resources/settings.ts b/static/app/views/performance/browser/resources/settings.ts index 091ca5a33f2eda..a79c3510dfd2b7 100644 --- a/static/app/views/performance/browser/resources/settings.ts +++ b/static/app/views/performance/browser/resources/settings.ts @@ -1,6 +1,7 @@ import {t} from 'sentry/locale'; export const MODULE_TITLE = t('Assets'); +export const DATA_TYPE = t('Asset'); export const BASE_URL = 'browser/assets'; // Name of the data shown (singular) export const MODULE_DESCRIPTION = t( 'Find large and slow-to-load resources used by your application and understand their impact on page performance.' From e245c28648dee5a7cbae1667727780b9316e673e Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 29 May 2024 14:06:14 -0400 Subject: [PATCH 15/24] update --- static/app/views/performance/browser/resources/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/static/app/views/performance/browser/resources/index.tsx b/static/app/views/performance/browser/resources/index.tsx index a28dbf60d5c3ac..b00a0dc9a8f9d7 100644 --- a/static/app/views/performance/browser/resources/index.tsx +++ b/static/app/views/performance/browser/resources/index.tsx @@ -13,6 +13,7 @@ import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionT import {space} from 'sentry/styles/space'; import {RateUnit} from 'sentry/utils/discover/fields'; import {PageAlert, PageAlertProvider} from 'sentry/utils/performance/contexts/pageAlert'; +import useOrganization from 'sentry/utils/useOrganization'; import ResourceView, { DEFAULT_RESOURCE_TYPES, FilterOptionsContainer, From c18714782b1110c1a7f9f1338be83eaeb5169aaa Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 29 May 2024 14:09:40 -0400 Subject: [PATCH 16/24] test case --- .../app/views/performance/landing/widgets/widgetDefinitions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/views/performance/landing/widgets/widgetDefinitions.tsx b/static/app/views/performance/landing/widgets/widgetDefinitions.tsx index dd5b23d884ed1e..761bb63c8b13a0 100644 --- a/static/app/views/performance/landing/widgets/widgetDefinitions.tsx +++ b/static/app/views/performance/landing/widgets/widgetDefinitions.tsx @@ -283,7 +283,7 @@ export const WIDGET_DEFINITIONS: ({ chartColor: WIDGET_PALETTE[0], }, [PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES]: { - title: t('Most Time Consuming [resourceModuleTitle]', {resourceModuleTitle}), + title: `${t('Most Time-Consuming')} ${resourceModuleTitle}`, subTitle: t('Render blocking for pages'), titleTooltip: getTermHelp( organization, From 4757bb555db321b27378f2cc843dc799e6749be4 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 29 May 2024 14:14:19 -0400 Subject: [PATCH 17/24] fix test --- .../landing/widgets/components/widgetHeader.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/static/app/views/performance/landing/widgets/components/widgetHeader.tsx b/static/app/views/performance/landing/widgets/components/widgetHeader.tsx index bf523d5e0ebdf0..97537960bcc4ad 100644 --- a/static/app/views/performance/landing/widgets/components/widgetHeader.tsx +++ b/static/app/views/performance/landing/widgets/components/widgetHeader.tsx @@ -24,16 +24,11 @@ export function WidgetHeader( PerformanceWidgetSetting.OVERALL_PERFORMANCE_SCORE, ].includes(chartSetting); - const isResourcesWidget = - chartSetting === PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES; - const isCacheWidget = chartSetting === PerformanceWidgetSetting.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS; const featureBadge = - isWebVitalsWidget || isResourcesWidget || isCacheWidget ? ( - - ) : null; + isWebVitalsWidget || isCacheWidget ? : null; return ( From 794ed118438f1fa7cc89716fcd777a1ea605ea0d Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 29 May 2024 14:14:43 -0400 Subject: [PATCH 18/24] fix test --- .../landing/widgets/components/widgetContainer.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ce7ac3f47fb9cf..d567ab7698d503 100644 --- a/static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx +++ b/static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx @@ -955,7 +955,7 @@ describe('Performance > Widgets > WidgetContainer', function () { ); expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent( - 'Most Time Consuming Assets' + 'Most Time Consuming-Assets' ); expect(await screen.findByRole('button', {name: 'View All'})).toHaveAttribute( 'href', From 55a5815f049c037eb3dd98ce60acd1a31d6e9272 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 29 May 2024 14:15:23 -0400 Subject: [PATCH 19/24] fix test --- .../landing/widgets/components/widgetContainer.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 d567ab7698d503..12a6ab08730330 100644 --- a/static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx +++ b/static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx @@ -955,7 +955,7 @@ describe('Performance > Widgets > WidgetContainer', function () { ); expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent( - 'Most Time Consuming-Assets' + 'Most Time-Consuming Assets' ); expect(await screen.findByRole('button', {name: 'View All'})).toHaveAttribute( 'href', From c1864a56dfd4e050a7d8c2030d842cb0cfa5bc10 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 29 May 2024 14:16:10 -0400 Subject: [PATCH 20/24] fix test --- .../landing/widgets/components/widgetContainer.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 12a6ab08730330..74f3039afd7a35 100644 --- a/static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx +++ b/static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx @@ -959,7 +959,7 @@ describe('Performance > Widgets > WidgetContainer', function () { ); expect(await screen.findByRole('button', {name: 'View All'})).toHaveAttribute( 'href', - '/insights/browser/resources/' + '/insights/browser/assets/' ); expect(eventsMock).toHaveBeenCalledTimes(1); expect(eventsMock).toHaveBeenNthCalledWith( From 895071798767c0a6d60747722eb319504d7fa24d Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki <44422760+DominikB2014@users.noreply.github.com> Date: Wed, 29 May 2024 15:21:55 -0400 Subject: [PATCH 21/24] Update index.tsx Co-authored-by: George Gritsouk <989898+gggritso@users.noreply.github.com> --- static/app/components/sidebar/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/components/sidebar/index.tsx b/static/app/components/sidebar/index.tsx index b4515c4565ee69..784b65e243af1a 100644 --- a/static/app/components/sidebar/index.tsx +++ b/static/app/components/sidebar/index.tsx @@ -360,7 +360,7 @@ function Sidebar() { ); const resources = hasOrganization && ( - + {resourceModuleTitle}} From 1213fe2709ad7033b2a061bf9b3ada08ca2a12e0 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 29 May 2024 16:08:44 -0400 Subject: [PATCH 22/24] code review --- static/app/views/performance/utils/useModuleTitle.tsx | 8 ++------ static/app/views/performance/utils/useModuleURL.tsx | 10 +++------- 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/static/app/views/performance/utils/useModuleTitle.tsx b/static/app/views/performance/utils/useModuleTitle.tsx index b51af6d0431e03..5fc05dc8b0d656 100644 --- a/static/app/views/performance/utils/useModuleTitle.tsx +++ b/static/app/views/performance/utils/useModuleTitle.tsx @@ -29,10 +29,6 @@ export const MODULE_TITLES: Record = { [ModuleName.ALL]: '', }; -export const PERFORMANCE_MODULE_TITLES: {[key in ModuleName]?: string} = { - [ModuleName.RESOURCE]: PERFORMANCE_RESOURCES_MODULE_TITLE, -}; - type ModuleNameStrings = `${ModuleName}`; type TitleableModuleNames = Exclude; @@ -40,8 +36,8 @@ export function useModuleTitle(moduleName: TitleableModuleNames) { const organization = useOrganization({allowNull: true}); const isInsightsEnabled = organization?.features?.includes('performance-insights'); - if (!isInsightsEnabled && PERFORMANCE_MODULE_TITLES[moduleName]) { - return PERFORMANCE_MODULE_TITLES[moduleName]; + if (!isInsightsEnabled && moduleName === ModuleName.RESOURCE) { + return PERFORMANCE_RESOURCES_MODULE_TITLE; } return MODULE_TITLES[moduleName]; diff --git a/static/app/views/performance/utils/useModuleURL.tsx b/static/app/views/performance/utils/useModuleURL.tsx index 97e806ba40b0d3..175f2c65ed12fe 100644 --- a/static/app/views/performance/utils/useModuleURL.tsx +++ b/static/app/views/performance/utils/useModuleURL.tsx @@ -31,10 +31,6 @@ export const MODULE_BASE_URLS: Record = { [ModuleName.ALL]: '', }; -export const PERFORMANCE_MODULE_BASE_URLS: {[key in ModuleName]?: string} = { - [ModuleName.RESOURCE]: PERFORMANCE_RESOURCES_BASE_URL, -}; - type ModuleNameStrings = `${ModuleName}`; type RoutableModuleNames = Exclude; @@ -73,11 +69,11 @@ export function useModuleURLBuilder(bare: boolean = false): URLBuilder { : normalizeUrl(`/organizations/${slug}/${moduleURLSegment}`); } - if (!isInsightsEnabled && PERFORMANCE_MODULE_BASE_URLS[moduleName]) { + if (!isInsightsEnabled && PERFORMANCE_RESOURCES_BASE_URL) { return bare - ? `${insightsURL}/${PERFORMANCE_MODULE_BASE_URLS[moduleName]}` + ? `${insightsURL}/${PERFORMANCE_RESOURCES_BASE_URL}` : normalizeUrl( - `/organizations/${slug}/${insightsURL}/${PERFORMANCE_MODULE_BASE_URLS[moduleName]}` + `/organizations/${slug}/${insightsURL}/${PERFORMANCE_RESOURCES_BASE_URL}` ); } From aeb0a6e521683abe82a2d3c98f6c85380ed0b3df Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 29 May 2024 16:37:06 -0400 Subject: [PATCH 23/24] fix --- static/app/views/performance/utils/useModuleURL.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/views/performance/utils/useModuleURL.tsx b/static/app/views/performance/utils/useModuleURL.tsx index 175f2c65ed12fe..d007d607d5346b 100644 --- a/static/app/views/performance/utils/useModuleURL.tsx +++ b/static/app/views/performance/utils/useModuleURL.tsx @@ -69,7 +69,7 @@ export function useModuleURLBuilder(bare: boolean = false): URLBuilder { : normalizeUrl(`/organizations/${slug}/${moduleURLSegment}`); } - if (!isInsightsEnabled && PERFORMANCE_RESOURCES_BASE_URL) { + if (!isInsightsEnabled && moduleName === ModuleName.RESOURCE) { return bare ? `${insightsURL}/${PERFORMANCE_RESOURCES_BASE_URL}` : normalizeUrl( From 80b27127f314ab9cb2853cc8c8e32df33870f127 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 29 May 2024 17:02:16 -0400 Subject: [PATCH 24/24] fix lint --- static/app/routes.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/static/app/routes.tsx b/static/app/routes.tsx index e699513c93cf0a..2e067891079ab3 100644 --- a/static/app/routes.tsx +++ b/static/app/routes.tsx @@ -19,10 +19,8 @@ import IssueListOverview from 'sentry/views/issueList/overview'; import OrganizationContainer from 'sentry/views/organizationContainer'; import OrganizationLayout from 'sentry/views/organizationLayout'; import OrganizationRoot from 'sentry/views/organizationRoot'; -import { - MODULE_BASE_URLS, - PERFORMANCE_MODULE_BASE_URLS, -} from 'sentry/views/performance/utils/useModuleURL'; +import {PERFORMANCE_BASE_URL as PERFORMANCE_RESOURCE_BASE_URL} from 'sentry/views/performance/browser/resources/settings'; +import {MODULE_BASE_URLS} from 'sentry/views/performance/utils/useModuleURL'; import ProjectEventRedirect from 'sentry/views/projectEventRedirect'; import redirectDeprecatedProjectRoute from 'sentry/views/projects/redirectDeprecatedProjectRoute'; import RouteNotFound from 'sentry/views/routeNotFound'; @@ -1508,7 +1506,7 @@ function buildRoutes() { )} /> - + import('sentry/views/performance/browser/resources/index')