ref(insights): Declare module base URLs as constants (#70861)

More preparation for moving all insights to the `/insights/` URL
namespace.

Now that every module is wrapped in `ModulePageProviders` I can set the
correct `baseURL` for each one. `BASE_URL` is the _base URL of the whole
module_ rather than of the page. It's also not the _full_ base URL, only
the module itself, relevant to whatever comes before it (usually
"/performance"), which is why they don't have starting slashes (except
for AI).

Most importantly, almost nothing in the app actually _uses_ `baseURL` to
construct URLs, so this PR has almost no impact. The only affected
links:

- resource table
- queries table
- cache samples table

Author: gggritso

static/app/views/aiMonitoring/aiMonitoringDetailsPage.tsx

@@ -21,6 +21,7 @@ import {
   TotalTokensUsedChart,
 } from 'sentry/views/aiMonitoring/aiMonitoringCharts';
 import {PipelineSpansTable} from 'sentry/views/aiMonitoring/pipelineSpansTable';
+import {BASE_URL} from 'sentry/views/aiMonitoring/settings';
 import {MetricReadout} from 'sentry/views/performance/metricReadout';
 import * as ModuleLayout from 'sentry/views/performance/moduleLayout';
 import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
@@ -178,7 +179,7 @@ function PageWithProviders({params}: Props) {
   return (
     <ModulePageProviders
       title={[spanDescription ?? t('(no name)'), t('Pipeline Details')].join(' — ')}
-      baseURL="/ai-monitoring/"
+      baseURL={BASE_URL}
       features="ai-analytics"
     >
       <AiMonitoringPage params={params} />

static/app/views/aiMonitoring/landing.tsx

@@ -17,6 +17,7 @@ import {
 } from 'sentry/views/aiMonitoring/aiMonitoringCharts';
 import {AIMonitoringOnboarding} from 'sentry/views/aiMonitoring/onboarding';
 import {PipelinesTable} from 'sentry/views/aiMonitoring/PipelinesTable';
+import {BASE_URL} from 'sentry/views/aiMonitoring/settings';
 import {useOnboardingProject} from 'sentry/views/performance/browser/webVitals/utils/useOnboardingProject';
 import * as ModuleLayout from 'sentry/views/performance/moduleLayout';
 import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
@@ -92,7 +93,7 @@ function PageWithProviders() {
   return (
     <ModulePageProviders
       title={t('AI Monitoring')}
-      baseURL="/ai-monitoring/"
+      baseURL={BASE_URL}
       features="ai-analytics"
     >
       <AiMonitoringPage />

static/app/views/aiMonitoring/settings.ts

@@ -0,0 +1,4 @@
+import {t} from 'sentry/locale';
+
+export const MODULE_TITLE = t('AI Monitoring');
+export const BASE_URL = '/ai-monitoring';

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 {BASE_URL} from 'sentry/views/performance/browser/resources/settings';
 import {
   BrowserStarfishFields,
   useResourceModuleFilters,
@@ -91,7 +92,7 @@ function PageWithProviders() {
   return (
     <ModulePageProviders
       title={[t('Performance'), t('Resources')].join(' — ')}
-      baseURL="/performance/browser/resources"
+      baseURL={`/performance/${BASE_URL}`}
       features="spans-first-ui"
     >
       <ResourcesLandingPage />

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 {BASE_URL} 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';
@@ -160,7 +161,7 @@ function PageWithProviders() {
   return (
     <ModulePageProviders
       title={[t('Performance'), t('Resources'), t('Resource Summary')].join(' — ')}
-      baseURL="/performance/browser/resources"
+      baseURL={`/performance/${BASE_URL}`}
       features="spans-first-ui"
     >
       <ResourceSummary />

static/app/views/performance/browser/resources/settings.ts

@@ -0,0 +1,4 @@
+import {t} from 'sentry/locale';
+
+export const MODULE_TITLE = t('Resources');
+export const BASE_URL = 'browser/resources';

static/app/views/performance/browser/webVitals/pageOverview.tsx

@@ -37,6 +37,7 @@ import {
 import WebVitalMeters from 'sentry/views/performance/browser/webVitals/components/webVitalMeters';
 import {PageOverviewWebVitalsDetailPanel} from 'sentry/views/performance/browser/webVitals/pageOverviewWebVitalsDetailPanel';
 import {PageSamplePerformanceTable} from 'sentry/views/performance/browser/webVitals/pageSamplePerformanceTable';
+import {BASE_URL} from 'sentry/views/performance/browser/webVitals/settings';
 import {useProjectRawWebVitalsQuery} from 'sentry/views/performance/browser/webVitals/utils/queries/rawWebVitalsQueries/useProjectRawWebVitalsQuery';
 import {calculatePerformanceScoreFromStoredTableDataRow} from 'sentry/views/performance/browser/webVitals/utils/queries/storedScoreQueries/calculatePerformanceScoreFromStored';
 import {useProjectWebVitalsScoresQuery} from 'sentry/views/performance/browser/webVitals/utils/queries/storedScoreQueries/useProjectWebVitalsScoresQuery';
@@ -307,7 +308,7 @@ function PageWithProviders() {
   return (
     <ModulePageProviders
       title={[t('Performance'), t('Web Vitals')].join(' — ')}
-      baseURL="/performance/browser/pageloads"
+      baseURL={`/performance/${BASE_URL}`}
       features="spans-first-ui"
     >
       <PageOverview />

static/app/views/performance/browser/webVitals/settings.ts

@@ -1,2 +1,7 @@
+import {t} from 'sentry/locale';
+
+export const MODULE_TITLE = t('Web Vitals');
+export const BASE_URL = 'browser/pageloads';
+
 export const USE_STORED_SCORES = false;
 export const REPLACE_FID_WITH_INP = false;

static/app/views/performance/browser/webVitals/webVitalsLandingPage.tsx

@@ -27,6 +27,7 @@ import {FID_DEPRECATION_DATE} from 'sentry/views/performance/browser/webVitals/c
 import WebVitalMeters from 'sentry/views/performance/browser/webVitals/components/webVitalMeters';
 import {PagePerformanceTable} from 'sentry/views/performance/browser/webVitals/pagePerformanceTable';
 import {PerformanceScoreChart} from 'sentry/views/performance/browser/webVitals/performanceScoreChart';
+import {BASE_URL} from 'sentry/views/performance/browser/webVitals/settings';
 import {useProjectRawWebVitalsQuery} from 'sentry/views/performance/browser/webVitals/utils/queries/rawWebVitalsQueries/useProjectRawWebVitalsQuery';
 import {calculatePerformanceScoreFromStoredTableDataRow} from 'sentry/views/performance/browser/webVitals/utils/queries/storedScoreQueries/calculatePerformanceScoreFromStored';
 import {useProjectWebVitalsScoresQuery} from 'sentry/views/performance/browser/webVitals/utils/queries/storedScoreQueries/useProjectWebVitalsScoresQuery';
@@ -182,7 +183,7 @@ function PageWithProviders() {
   return (
     <ModulePageProviders
       title={[t('Performance'), t('Web Vitals')].join(' — ')}
-      baseURL="/performance/browser/pageloads"
+      baseURL={`/performance/${BASE_URL}`}
       features="spans-first-ui"
     >
       <WebVitalsLandingPage />

static/app/views/performance/cache/cacheLandingPage.tsx

@@ -23,7 +23,7 @@ import {Referrer} from 'sentry/views/performance/cache/referrers';
 import {CacheSamplePanel} from 'sentry/views/performance/cache/samplePanel/samplePanel';
 import {
   BASE_FILTERS,
-  CACHE_BASE_URL,
+  BASE_URL,
   MODULE_TITLE,
   RELEASE_LEVEL,
 } from 'sentry/views/performance/cache/settings';
@@ -206,7 +206,7 @@ function PageWithProviders() {
   return (
     <ModulePageProviders
       title={[t('Performance'), MODULE_TITLE].join(' — ')}
-      baseURL={CACHE_BASE_URL}
+      baseURL={`/performance/${BASE_URL}`}
       features="performance-cache-view"
     >
       <CacheLandingPage />

static/app/views/performance/cache/settings.ts

@@ -2,6 +2,9 @@ import type {BadgeType} from 'sentry/components/badge/featureBadge';
 import {t} from 'sentry/locale';
 import type {SpanMetricsQueryFilters} from 'sentry/views/starfish/types';
 
+export const MODULE_TITLE = t('Cache');
+export const BASE_URL = 'cache';
+
 export const RELEASE_LEVEL: BadgeType = 'alpha';
 
 // NOTE: Awkward typing, but without it `RELEASE_LEVEL` is narrowed and the comparison is not allowed
@@ -11,11 +14,9 @@ export const releaseLevelAsBadgeProps = {
   isNew: (RELEASE_LEVEL as BadgeType) === 'new',
 };
 
-export const MODULE_TITLE = t('Cache');
-
 export const CHART_HEIGHT = 160;
 
-export const CACHE_BASE_URL = '/performance/cache';
+export const CACHE_BASE_URL = `/performance/${BASE_URL}`;
 
 export const BASE_FILTERS: SpanMetricsQueryFilters = {
   'span.op': 'cache.get_item', //  TODO - add more span ops as they become available, we can't use span.module because db.redis is also `cache`

static/app/views/performance/database/databaseLandingPage.tsx

@@ -23,6 +23,7 @@ import {useOnboardingProject} from 'sentry/views/performance/browser/webVitals/u
 import {DurationChart} from 'sentry/views/performance/database/durationChart';
 import {NoDataMessage} from 'sentry/views/performance/database/noDataMessage';
 import {isAValidSort, QueriesTable} from 'sentry/views/performance/database/queriesTable';
+import {BASE_URL} from 'sentry/views/performance/database/settings';
 import {ThroughputChart} from 'sentry/views/performance/database/throughputChart';
 import {useSelectedDurationAggregate} from 'sentry/views/performance/database/useSelectedDurationAggregate';
 import * as ModuleLayout from 'sentry/views/performance/moduleLayout';
@@ -269,7 +270,7 @@ function PageWithProviders() {
   return (
     <ModulePageProviders
       title={[t('Performance'), t('Database')].join(' — ')}
-      baseURL="/performance/database"
+      baseURL={`/performance/${BASE_URL}`}
       features="spans-first-ui"
     >
       <DatabaseLandingPage />

static/app/views/performance/database/databaseSpanSummaryPage.tsx

@@ -20,6 +20,7 @@ import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import {DurationChart} from 'sentry/views/performance/database/durationChart';
 import {isAValidSort} from 'sentry/views/performance/database/queriesTable';
 import {QueryTransactionsTable} from 'sentry/views/performance/database/queryTransactionsTable';
+import {BASE_URL} from 'sentry/views/performance/database/settings';
 import {ThroughputChart} from 'sentry/views/performance/database/throughputChart';
 import {useSelectedDurationAggregate} from 'sentry/views/performance/database/useSelectedDurationAggregate';
 import {MetricReadout} from 'sentry/views/performance/metricReadout';
@@ -314,7 +315,7 @@ function PageWithProviders(props) {
   return (
     <ModulePageProviders
       title={[t('Performance'), t('Database'), t('Query Summary')].join(' — ')}
-      baseURL="/performance/database"
+      baseURL={`/performance/${BASE_URL}`}
       features="spans-first-ui"
     >
       <DatabaseSpanSummaryPage {...props} />

static/app/views/performance/database/settings.ts

@@ -8,8 +8,12 @@ import {
   TWENTY_FOUR_HOURS,
   TWO_WEEKS,
 } from 'sentry/components/charts/utils';
+import {t} from 'sentry/locale';
 import type {Aggregate} from 'sentry/views/starfish/types';
 
+export const MODULE_TITLE = t('Queries');
+export const BASE_URL = 'database';
+
 export const MIN_SDK_VERSION_BY_PLATFORM: {[platform: string]: string} = {
   'sentry.python': '1.29.2',
   'sentry.javascript': '7.63.0',

static/app/views/performance/http/httpDomainSummaryPage.tsx

@@ -34,6 +34,7 @@ import {HTTPSamplesPanel} from 'sentry/views/performance/http/httpSamplesPanel';
 import {Referrer} from 'sentry/views/performance/http/referrers';
 import {
   BASE_FILTERS,
+  BASE_URL,
   MODULE_TITLE,
   NULL_DOMAIN_DESCRIPTION,
   RELEASE_LEVEL,
@@ -357,7 +358,7 @@ const MetricsRibbon = styled('div')`
 function PageWithProviders() {
   return (
     <ModulePageProviders
-      baseURL="/performance/http"
+      baseURL={`/performance/${BASE_URL}`}
       title={[t('Performance'), MODULE_TITLE, t('Domain Summary')].join(' — ')}
       features="spans-first-ui"
     >

static/app/views/performance/http/httpLandingPage.tsx

@@ -25,6 +25,7 @@ import {ThroughputChart} from 'sentry/views/performance/http/charts/throughputCh
 import {Referrer} from 'sentry/views/performance/http/referrers';
 import {
   BASE_FILTERS,
+  BASE_URL,
   MODULE_TITLE,
   RELEASE_LEVEL,
 } from 'sentry/views/performance/http/settings';
@@ -254,7 +255,7 @@ function PageWithProviders() {
   return (
     <ModulePageProviders
       title={[t('Performance'), MODULE_TITLE].join(' — ')}
-      baseURL="/performance/http"
+      baseURL={`/performance/${BASE_URL}`}
       features="spans-first-ui"
     >
       <HTTPLandingPage />

static/app/views/performance/http/settings.ts

@@ -3,6 +3,7 @@ import {t} from 'sentry/locale';
 import {ModuleName} from 'sentry/views/starfish/types';
 
 export const MODULE_TITLE = t('Requests');
+export const BASE_URL = 'http';
 
 export const NULL_DOMAIN_DESCRIPTION = t('Unknown Domain');
 

static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx

@@ -27,8 +27,11 @@ import withApi from 'sentry/utils/withApi';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import {DEFAULT_RESOURCE_TYPES} from 'sentry/views/performance/browser/resources/resourceView';
 import {getResourcesEventViewQuery} from 'sentry/views/performance/browser/resources/utils/useResourcesQuery';
+import {BASE_URL as RESOURCES_BASE_URL} from 'sentry/views/performance/browser/webVitals/settings';
 import {BASE_FILTERS, CACHE_BASE_URL} from 'sentry/views/performance/cache/settings';
 import DurationChart from 'sentry/views/performance/charts/chart';
+import {BASE_URL as DATABASE_BASE_URL} from 'sentry/views/performance/database/settings';
+import {BASE_URL as HTTP_BASE_URL} from 'sentry/views/performance/http/settings';
 import {DomainCell} from 'sentry/views/performance/http/tables/domainCell';
 import {transactionSummaryRouteWithQuery} from 'sentry/views/performance/transactionSummary/utils';
 import {
@@ -604,7 +607,9 @@ export function LineChartListWidget(props: PerformanceWidgetProps) {
               );
             case PerformanceWidgetSetting.MOST_TIME_CONSUMING_DOMAINS:
               return (
-                <RoutingContextProvider value={{baseURL: '/performance/http'}}>
+                <RoutingContextProvider
+                  value={{baseURL: `/performance/${HTTP_BASE_URL}`}}
+                >
                   <Fragment>
                     <StyledTextOverflow>
                       <DomainCell
@@ -650,8 +655,8 @@ export function LineChartListWidget(props: PerformanceWidgetProps) {
               const moduleName = isQueriesWidget ? ModuleName.DB : ModuleName.RESOURCE;
               const timeSpentOp = isQueriesWidget ? 'op' : undefined;
               const routingContextBaseURL = isQueriesWidget
-                ? '/performance/database'
-                : '/performance/browser/resources';
+                ? `/performance/${DATABASE_BASE_URL}`
+                : `/performance/${RESOURCES_BASE_URL}`;
               return (
                 <RoutingContextProvider value={{baseURL: routingContextBaseURL}}>
                   <Fragment>

static/app/views/performance/mobile/appStarts/index.tsx

@@ -1,5 +1,6 @@
 import AppStartup from 'sentry/views/performance/mobile/appStarts/screens';
 import {StartTypeSelector} from 'sentry/views/performance/mobile/appStarts/screenSummary/startTypeSelector';
+import {BASE_URL} from 'sentry/views/performance/mobile/appStarts/settings';
 import ScreensTemplate from 'sentry/views/performance/mobile/components/screensTemplate';
 import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
 import {ROUTE_NAMES} from 'sentry/views/starfish/utils/routeNames';
@@ -18,7 +19,7 @@ function PageWithProviders() {
   return (
     <ModulePageProviders
       title={ROUTE_NAMES['app-startup']}
-      baseURL="/performance/mobile/app-startup"
+      baseURL={`/performance/${BASE_URL}`}
       features="spans-first-ui"
     >
       <InitializationModule />

static/app/views/performance/mobile/appStarts/screenSummary/index.tsx

@@ -24,6 +24,7 @@ import {
   COLD_START_TYPE,
   StartTypeSelector,
 } from 'sentry/views/performance/mobile/appStarts/screenSummary/startTypeSelector';
+import {BASE_URL} from 'sentry/views/performance/mobile/appStarts/settings';
 import {MetricsRibbon} from 'sentry/views/performance/mobile/screenload/screenLoadSpans/metricsRibbon';
 import {ScreenLoadSpanSamples} from 'sentry/views/performance/mobile/screenload/screenLoadSpans/samples';
 import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
@@ -224,7 +225,7 @@ function PageWithProviders() {
   return (
     <ModulePageProviders
       title={[transaction, ROUTE_NAMES['app-startup']].join(' — ')}
-      baseURL="/performance/mobile/app-startup/spans"
+      baseURL={`/performance/${BASE_URL}`}
       features="spans-first-ui"
     >
       <ScreenSummary />

static/app/views/performance/mobile/appStarts/settings.ts

@@ -0,0 +1,4 @@
+import {t} from 'sentry/locale';
+
+export const MODULE_TITLE = t('App Starts');
+export const BASE_URL = 'mobile/app-startup';

static/app/views/performance/mobile/screenload/index.tsx

@@ -21,6 +21,7 @@ import {useOnboardingProject} from 'sentry/views/performance/browser/webVitals/u
 import {ScreensView, YAxis} from 'sentry/views/performance/mobile/screenload/screens';
 import {PlatformSelector} from 'sentry/views/performance/mobile/screenload/screens/platformSelector';
 import {isCrossPlatform} from 'sentry/views/performance/mobile/screenload/screens/utils';
+import {BASE_URL} from 'sentry/views/performance/mobile/screenload/settings';
 import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
 import Onboarding from 'sentry/views/performance/onboarding';
 import {ReleaseComparisonSelector} from 'sentry/views/starfish/components/releaseSelector';
@@ -104,7 +105,7 @@ function PageWithProviders() {
   return (
     <ModulePageProviders
       title={t('Screen Loads')}
-      baseURL="/performance/mobile/screens"
+      baseURL={`/performance/${BASE_URL}`}
       features="spans-first-ui"
     >
       <PageloadModule />

static/app/views/performance/mobile/screenload/screenLoadSpans/index.tsx

@@ -35,6 +35,7 @@ import {
 } from 'sentry/views/performance/mobile/screenload/screens/constants';
 import {PlatformSelector} from 'sentry/views/performance/mobile/screenload/screens/platformSelector';
 import {isCrossPlatform} from 'sentry/views/performance/mobile/screenload/screens/utils';
+import {BASE_URL} from 'sentry/views/performance/mobile/screenload/settings';
 import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
 import {
   PRIMARY_RELEASE_ALIAS,
@@ -240,7 +241,7 @@ function PageWithProviders() {
   return (
     <ModulePageProviders
       title={[transaction, t('Screen Loads')].join(' — ')}
-      baseURL="/performance/mobile/screens"
+      baseURL={`/performance/${BASE_URL}`}
       features="spans-first-ui"
     >
       <ScreenLoadSpans />

static/app/views/performance/mobile/screenload/settings.ts

@@ -0,0 +1,4 @@
+import {t} from 'sentry/locale';
+
+export const MODULE_TITLE = t('Screen Loads');
+export const BASE_URL = 'mobile/screens';

static/app/views/performance/mobile/ui/index.tsx

@@ -1,5 +1,6 @@
 import ScreensTemplate from 'sentry/views/performance/mobile/components/screensTemplate';
 import {UIScreens} from 'sentry/views/performance/mobile/ui/screens';
+import {BASE_URL} from 'sentry/views/performance/mobile/ui/settings';
 import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
 import {ROUTE_NAMES} from 'sentry/views/starfish/utils/routeNames';
 
@@ -11,7 +12,7 @@ function PageWithProviders() {
   return (
     <ModulePageProviders
       title={ROUTE_NAMES.mobileUI}
-      baseURL="/performance/mobile/ui"
+      baseURL={`/performance/${BASE_URL}`}
       features={['spans-first-ui', 'starfish-mobile-ui-module']}
     >
       <ResponsivenessModule />

static/app/views/performance/mobile/ui/screenSummary/index.tsx

@@ -16,6 +16,7 @@ import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import {SamplesTables} from 'sentry/views/performance/mobile/components/samplesTables';
 import {ScreenLoadSpanSamples} from 'sentry/views/performance/mobile/screenload/screenLoadSpans/samples';
 import {SpanOperationTable} from 'sentry/views/performance/mobile/ui/screenSummary/spanOperationTable';
+import {BASE_URL} from 'sentry/views/performance/mobile/ui/settings';
 import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
 import {ReleaseComparisonSelector} from 'sentry/views/starfish/components/releaseSelector';
 import {SpanMetricsField} from 'sentry/views/starfish/types';
@@ -138,7 +139,7 @@ function PageWithProviders() {
   return (
     <ModulePageProviders
       title={[transaction, t('Screen Loads')].join(' — ')}
-      baseURL="/performance/mobile/ui/spans"
+      baseURL={`/performance/${BASE_URL}`}
       features={['spans-first-ui', 'starfish-mobile-ui-module']}
     >
       <ScreenSummary />

static/app/views/performance/mobile/ui/settings.ts

@@ -0,0 +1,4 @@
+import {t} from 'sentry/locale';
+
+export const MODULE_TITLE = t('Mobile UI');
+export const BASE_URL = 'mobile/ui';