feat(crons/uptime): Move to insights top-level nav

Author: evanpurkhiser

static/app/components/sidebar/index.spec.tsx

@@ -377,8 +377,8 @@ describe('Sidebar', function () {
         'Backend',
         'Mobile',
         'AI',
-        'User Feedback',
         'Crons',
+        'User Feedback',
         'Alerts',
         'Dashboards',
         'Releases',

static/app/components/sidebar/index.tsx

@@ -35,7 +35,6 @@ import {
   IconSiren,
   IconStats,
   IconTelescope,
-  IconTimer,
 } from 'sentry/icons';
 import {t} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
@@ -269,16 +268,6 @@ function Sidebar() {
     />
   );
 
-  const monitors = hasOrganization && (
-    <SidebarItem
-      {...sidebarItemProps}
-      icon={<IconTimer />}
-      label={t('Crons')}
-      to={`/organizations/${organization.slug}/crons/`}
-      id="crons"
-    />
-  );
-
   const replays = hasOrganization && (
     <Feature
       hookName="feature-disabled:replay-sidebar-item"
@@ -404,6 +393,22 @@ function Sidebar() {
             icon={<SubitemDot collapsed />}
           />
         </AgentInsightsFeature>
+        <SidebarItem
+          {...sidebarItemProps}
+          label={t('Crons')}
+          to={`/organizations/${organization.slug}/${DOMAIN_VIEW_BASE_URL}/crons/`}
+          id="performance-crons"
+          icon={<SubitemDot collapsed />}
+        />
+        <Feature features={['uptime']} organization={organization}>
+          <SidebarItem
+            {...sidebarItemProps}
+            label={t('Uptime')}
+            to={`/organizations/${organization.slug}/${DOMAIN_VIEW_BASE_URL}/uptime/`}
+            id="performance-uptime"
+            icon={<SubitemDot collapsed />}
+          />
+        </Feature>
       </SidebarAccordion>
     </Feature>
   );
@@ -458,7 +463,6 @@ function Sidebar() {
 
                     <SidebarSection>
                       {feedback}
-                      {monitors}
                       {alerts}
                       {dashboards}
                       {releases}

static/app/routes.tsx

@@ -1434,15 +1434,6 @@ function buildRoutes() {
     </Fragment>
   );
 
-  // XXX(epurkhiser): This is legacy until we remove crons from the sidebar
-  const cronsRoutes = (
-    <Route
-      path="/crons/"
-      component={make(() => import('sentry/views/monitors'))}
-      withOrgPath
-    />
-  );
-
   const replayChildRoutes = (
     <Fragment>
       <IndexRoute component={make(() => import('sentry/views/replays/list'))} />
@@ -1728,11 +1719,6 @@ function buildRoutes() {
           )}
         />
       </Route>
-      <Route path={`${MODULE_BASE_URLS[ModuleName.UPTIME]}/`}>
-        <IndexRoute
-          component={make(() => import('sentry/views/insights/uptime/views/overview'))}
-        />
-      </Route>
       <Route path={`${MODULE_BASE_URLS[ModuleName.AI]}/`}>
         <IndexRoute
           component={make(
@@ -1748,11 +1734,6 @@ function buildRoutes() {
           )}
         />
       </Route>
-      <Route path={`${MODULE_BASE_URLS[ModuleName.CRONS]}/`}>
-        <IndexRoute
-          component={make(() => import('sentry/views/insights/crons/views/overview'))}
-        />
-      </Route>
       <Route path={`${MODULE_BASE_URLS[ModuleName.SESSIONS]}/`}>
         <IndexRoute
           component={make(() => import('sentry/views/insights/sessions/views/overview'))}
@@ -1811,6 +1792,16 @@ function buildRoutes() {
       <Route path="projects/" component={make(() => import('sentry/views/projects/'))}>
         {projectsChildRoutes}
       </Route>
+      <Route path="uptime/">
+        <IndexRoute
+          component={make(() => import('sentry/views/insights/uptime/views/overview'))}
+        />
+      </Route>
+      <Route path="crons/">
+        <IndexRoute
+          component={make(() => import('sentry/views/insights/crons/views/overview'))}
+        />
+      </Route>
     </Route>
   );
 
@@ -2454,7 +2445,6 @@ function buildRoutes() {
       {issueRoutes}
       {alertRoutes}
       {codecovRoutes}
-      {cronsRoutes}
       {replayRoutes}
       {releasesRoutes}
       {statsRoutes}

static/app/views/insights/common/components/modulesOnboarding.tsx

@@ -497,22 +497,6 @@ const EMPTY_STATE_CONTENT: Record<TitleableModuleNames, EmptyStateContent> = {
     ],
     supportedSdks: ['android', 'flutter', 'apple-ios', 'react-native'],
   },
-  // XXX(epurkhiser): Crons does not use the insights onboarding component.
-  crons: {
-    description: null,
-    heading: null,
-    imageSrc: null,
-    valuePropDescription: null,
-    valuePropPoints: [],
-  },
-  // XXX(epurkhiser): Uptime does not use the insights onboarding component.
-  uptime: {
-    description: null,
-    heading: null,
-    imageSrc: null,
-    valuePropDescription: null,
-    valuePropPoints: [],
-  },
   sessions: {
     heading: t(`Get insights about your application's session health`),
     description: tct(

static/app/views/insights/common/queries/useHasFirstSpan.tsx

@@ -8,8 +8,6 @@ const excludedModuleNames = [
   ModuleName.OTHER,
   ModuleName.MOBILE_UI,
   ModuleName.MOBILE_VITALS,
-  ModuleName.CRONS,
-  ModuleName.UPTIME,
   ModuleName.SESSIONS,
   ModuleName.AGENTS,
 ] as const;

static/app/views/insights/common/utils/useModuleURL.tsx

@@ -4,7 +4,6 @@ import {BASE_URL as AGENTS_BASE_URL} from 'sentry/views/insights/agentMonitoring
 import {BASE_URL as RESOURCES_BASE_URL} from 'sentry/views/insights/browser/resources/settings';
 import {BASE_URL as VITALS_BASE_URL} from 'sentry/views/insights/browser/webVitals/settings';
 import {BASE_URL as CACHE_BASE_URL} from 'sentry/views/insights/cache/settings';
-import {BASE_URL as CRONS_BASE_URL} from 'sentry/views/insights/crons/settings';
 import {BASE_URL as DB_BASE_URL} from 'sentry/views/insights/database/settings';
 import {BASE_URL as HTTP_BASE_URL} from 'sentry/views/insights/http/settings';
 import {BASE_URL as AI_BASE_URL} from 'sentry/views/insights/llmMonitoring/settings';
@@ -22,7 +21,6 @@ import {getModuleView} from 'sentry/views/insights/pages/utils';
 import {BASE_URL as QUEUE_BASE_URL} from 'sentry/views/insights/queues/settings';
 import {BASE_URL as SESSIONS_BASE_URL} from 'sentry/views/insights/sessions/settings';
 import {ModuleName} from 'sentry/views/insights/types';
-import {BASE_URL as UPTIME_BASE_URL} from 'sentry/views/insights/uptime/settings';
 
 export const MODULE_BASE_URLS: Record<ModuleName, string> = {
   [ModuleName.DB]: DB_BASE_URL,
@@ -38,8 +36,6 @@ export const MODULE_BASE_URLS: Record<ModuleName, string> = {
   [ModuleName.MOBILE_UI]: MOBILE_UI_BASE_URL,
   [ModuleName.MOBILE_VITALS]: MOBILE_SCREENS_BASE_URL,
   [ModuleName.SCREEN_RENDERING]: SCREEN_RENDERING_BASE_URL,
-  [ModuleName.CRONS]: CRONS_BASE_URL,
-  [ModuleName.UPTIME]: UPTIME_BASE_URL,
   [ModuleName.SESSIONS]: SESSIONS_BASE_URL,
   [ModuleName.OTHER]: '',
 };

static/app/views/insights/common/views/spans/selectors/actionSelector.tsx

@@ -125,8 +125,6 @@ const LABEL_FOR_MODULE_NAME: Record<ModuleName, ReactNode> = {
   screen_load: t('Action'),
   app_start: t('Action'),
   resource: t('Resource'),
-  crons: t('Action'),
-  uptime: t('Action'),
   other: t('Action'),
   'mobile-ui': t('Action'),
   'mobile-vitals': t('Action'),

static/app/views/insights/crons/settings.ts

@@ -1,14 +1,6 @@
 import {t} from 'sentry/locale';
 
-export const MODULE_TITLE = t('Cron Monitors');
-export const DATA_TYPE = t('Cron Check-In');
-export const DATA_TYPE_PLURAL = t('Cron Check-Ins');
-export const BASE_URL = 'crons';
-
 export const MODULE_DESCRIPTION = t(
   'Scheduled monitors that check in on recurring jobs and tell you if they’re running on schedule, failing, or succeeding.'
 );
 export const MODULE_DOC_LINK = 'https://docs.sentry.io/product/crons/';
-
-export const MODULE_FEATURES = [];
-export const MODULE_VISIBLE_FEATURES = [];

static/app/views/insights/crons/views/overview.tsx

@@ -7,17 +7,21 @@ import {deleteProjectProcessingErrorByType} from 'sentry/actionCreators/monitors
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
+import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import * as Layout from 'sentry/components/layouts/thirds';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
+import NoProjectMessage from 'sentry/components/noProjectMessage';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
+import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 import Pagination from 'sentry/components/pagination';
 import SearchBar from 'sentry/components/searchBar';
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {IconAdd, IconList} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -29,7 +33,6 @@ import useApi from 'sentry/utils/useApi';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
-import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
 import {
   CronsLandingPanel,
   isValidGuide,
@@ -40,19 +43,13 @@ import {OverviewTimeline} from 'sentry/views/insights/crons/components/overviewT
 import {OwnerFilter} from 'sentry/views/insights/crons/components/ownerFilter';
 import {MonitorProcessingErrors} from 'sentry/views/insights/crons/components/processingErrors/monitorProcessingErrors';
 import {makeMonitorListErrorsQueryKey} from 'sentry/views/insights/crons/components/processingErrors/utils';
-import {
-  MODULE_DESCRIPTION,
-  MODULE_DOC_LINK,
-  MODULE_TITLE,
-} from 'sentry/views/insights/crons/settings';
+import {MODULE_DESCRIPTION, MODULE_DOC_LINK} from 'sentry/views/insights/crons/settings';
 import type {
   CheckinProcessingError,
   Monitor,
   ProcessingErrorType,
 } from 'sentry/views/insights/crons/types';
 import {makeMonitorListQueryKey} from 'sentry/views/insights/crons/utils';
-import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
-import {ModuleName} from 'sentry/views/insights/types';
 
 const CronsListPageHeader = HookOrDefault({
   hookName: 'component:crons-list-page-header',
@@ -105,22 +102,24 @@ function CronsOverview() {
 
   const showAddMonitor = !isValidPlatform(platform) || !isValidGuide(guide);
 
-  return (
+  const page = (
     <Fragment>
       <CronsListPageHeader organization={organization} />
-      <BackendHeader
-        headerTitle={
-          <Fragment>
-            <GuideAnchor target="crons_backend_insights">{MODULE_TITLE}</GuideAnchor>
+      <Layout.Header unified>
+        <Layout.HeaderContent>
+          <Layout.Title>
+            <GuideAnchor target="crons_backend_insights">
+              {t('Cron Monitors')}
+            </GuideAnchor>
             <PageHeadingQuestionTooltip
               docsUrl={MODULE_DOC_LINK}
               title={MODULE_DESCRIPTION}
             />
-          </Fragment>
-        }
-        module={ModuleName.CRONS}
-        headerActions={
+          </Layout.Title>
+        </Layout.HeaderContent>
+        <Layout.HeaderActions>
           <ButtonBar gap={1}>
+            <FeedbackWidgetButton />
             <Button
               icon={<IconList />}
               size="sm"
@@ -140,8 +139,8 @@ function CronsOverview() {
               </NewMonitorButton>
             )}
           </ButtonBar>
-        }
-      />
+        </Layout.HeaderActions>
+      </Layout.Header>
       <Layout.Body>
         <Layout.Main fullWidth>
           <Filters>
@@ -192,17 +191,17 @@ function CronsOverview() {
       </Layout.Body>
     </Fragment>
   );
-}
 
-function PageWithProviders() {
   return (
-    <ModulePageProviders moduleName="crons" pageTitle={t('Overview')}>
-      <CronsOverview />
-    </ModulePageProviders>
+    <NoProjectMessage organization={organization}>
+      <SentryDocumentTitle title={t('Cron Monitors')} orgSlug={organization.slug}>
+        <PageFiltersContainer>{page}</PageFiltersContainer>
+      </SentryDocumentTitle>
+    </NoProjectMessage>
   );
 }
 
-export default PageWithProviders;
+export default CronsOverview;
 
 const Filters = styled('div')`
   display: flex;

static/app/views/insights/pages/backend/settings.ts

@@ -13,8 +13,6 @@ export const MODULES = [
   ModuleName.HTTP,
   ModuleName.CACHE,
   ModuleName.QUEUE,
-  ModuleName.CRONS,
-  ModuleName.UPTIME,
 ];
 
 export const OVERVIEW_PAGE_ALLOWED_OPS = ['http.server'];

static/app/views/insights/pages/frontend/settings.ts

@@ -34,7 +34,6 @@ export const MODULES = [
   ModuleName.HTTP,
   ModuleName.RESOURCE,
   ModuleName.SESSIONS,
-  ModuleName.UPTIME,
 ];
 
 // Mirrors `FRONTEND` in src/sentry/utils/platform_categories.py, except shared platforms are removed