feat(crons): Implement an all checks page for crons (#85202)

Adds an all monitor checks page for cron issues with some custom cells.
There is one thing that should be addressed though but it requires a
backend fix, the schedule from the API currently returns the enum
integer for the schedule (e.g. `1` instead of `crontab`). I will put up
a PR to fix this serialization, since without it, the number appears in
the tool tip, along with 'Unknown Schedule'.


<img width="1197" alt="image"
src="https://github.com/user-attachments/assets/4f93ed4d-6740-4f30-adee-e1b715655aa7"
/>


**todo**
- [x] Add tests 
- [x] Put up the PR to change the serialization -
#85211

---------

Co-authored-by: Evan Purkhiser <evanpurkhiser@gmail.com>

Author: leeandher

static/app/routes.tsx

@@ -2066,6 +2066,10 @@ function buildRoutes() {
         path={TabPaths[Tab.UPTIME_CHECKS]}
         component={make(() => import('sentry/views/issueDetails/groupUptimeChecks'))}
       />
+      <Route
+        path={TabPaths[Tab.CHECK_INS]}
+        component={make(() => import('sentry/views/issueDetails/groupCheckIns'))}
+      />
       <Route
         path={TabPaths[Tab.TAGS]}
         component={make(() => import('sentry/views/issueDetails/groupTags/groupTagsTab'))}

static/app/utils/issueTypeConfig/cronConfig.tsx

@@ -39,7 +39,7 @@ const cronConfig: IssueCategoryConfigMapping = {
       events: {enabled: true},
       openPeriods: {enabled: false},
       uptimeChecks: {enabled: false},
-      cronChecks: {enabled: false},
+      checkIns: {enabled: true},
       attachments: {enabled: false},
       userFeedback: {enabled: false},
       replays: {enabled: false},

static/app/utils/issueTypeConfig/errorConfig.tsx

@@ -26,7 +26,7 @@ export const errorConfig: IssueCategoryConfigMapping = {
       landingPage: Tab.DETAILS,
       events: {enabled: true},
       openPeriods: {enabled: false},
-      cronChecks: {enabled: false},
+      checkIns: {enabled: false},
       uptimeChecks: {enabled: false},
       attachments: {enabled: true},
       userFeedback: {enabled: true},

static/app/utils/issueTypeConfig/index.tsx

@@ -51,7 +51,7 @@ const BASE_CONFIG: IssueTypeConfig = {
     landingPage: Tab.DETAILS,
     events: {enabled: true},
     openPeriods: {enabled: false},
-    cronChecks: {enabled: false},
+    checkIns: {enabled: false},
     uptimeChecks: {enabled: false},
     attachments: {enabled: false},
     userFeedback: {enabled: false},

static/app/utils/issueTypeConfig/metricIssueConfig.tsx

@@ -33,7 +33,7 @@ const metricIssueConfig: IssueCategoryConfigMapping = {
       landingPage: Tab.DETAILS,
       events: {enabled: false},
       openPeriods: {enabled: true},
-      cronChecks: {enabled: false},
+      checkIns: {enabled: false},
       uptimeChecks: {enabled: false},
       attachments: {enabled: false},
       userFeedback: {enabled: false},

static/app/utils/issueTypeConfig/performanceConfig.tsx

@@ -28,7 +28,7 @@ const performanceConfig: IssueCategoryConfigMapping = {
       landingPage: Tab.DETAILS,
       events: {enabled: true},
       openPeriods: {enabled: false},
-      cronChecks: {enabled: false},
+      checkIns: {enabled: false},
       uptimeChecks: {enabled: false},
       attachments: {enabled: false},
       userFeedback: {enabled: false},
@@ -208,7 +208,7 @@ const performanceConfig: IssueCategoryConfigMapping = {
       landingPage: Tab.DETAILS,
       events: {enabled: true},
       openPeriods: {enabled: false},
-      cronChecks: {enabled: false},
+      checkIns: {enabled: false},
       uptimeChecks: {enabled: false},
       attachments: {enabled: false},
       userFeedback: {enabled: false},
@@ -253,7 +253,7 @@ const performanceConfig: IssueCategoryConfigMapping = {
       landingPage: Tab.DETAILS,
       events: {enabled: false},
       openPeriods: {enabled: false},
-      cronChecks: {enabled: false},
+      checkIns: {enabled: false},
       uptimeChecks: {enabled: false},
       attachments: {enabled: false},
       userFeedback: {enabled: false},
@@ -358,7 +358,7 @@ const performanceConfig: IssueCategoryConfigMapping = {
       events: {enabled: false},
       openPeriods: {enabled: false},
       uptimeChecks: {enabled: false},
-      cronChecks: {enabled: false},
+      checkIns: {enabled: false},
       attachments: {enabled: false},
       userFeedback: {enabled: false},
       replays: {enabled: false},
@@ -403,7 +403,7 @@ const performanceConfig: IssueCategoryConfigMapping = {
       events: {enabled: false},
       openPeriods: {enabled: false},
       uptimeChecks: {enabled: false},
-      cronChecks: {enabled: false},
+      checkIns: {enabled: false},
       attachments: {enabled: false},
       userFeedback: {enabled: false},
       replays: {enabled: false},

static/app/utils/issueTypeConfig/replayConfig.tsx

@@ -28,7 +28,7 @@ const replayConfig: IssueCategoryConfigMapping = {
       events: {enabled: true},
       openPeriods: {enabled: false},
       uptimeChecks: {enabled: false},
-      cronChecks: {enabled: false},
+      checkIns: {enabled: false},
       attachments: {enabled: false},
       userFeedback: {enabled: true},
       replays: {enabled: true},

static/app/utils/issueTypeConfig/types.tsx

@@ -99,7 +99,7 @@ export type IssueTypeConfig = {
     /**
      * Is the Cron Checks page shown for this issue
      */
-    cronChecks: DisabledWithReasonConfig;
+    checkIns: DisabledWithReasonConfig;
     /**
      * Is the All Events/Occurrences page shown for this issue
      */

static/app/utils/issueTypeConfig/uptimeConfig.tsx

@@ -33,7 +33,7 @@ const uptimeConfig: IssueCategoryConfigMapping = {
       landingPage: Tab.EVENTS,
       events: {enabled: true},
       openPeriods: {enabled: false},
-      cronChecks: {enabled: false},
+      checkIns: {enabled: false},
       uptimeChecks: {enabled: true},
       attachments: {enabled: false},
       userFeedback: {enabled: false},

static/app/views/issueDetails/groupCheckIns.spec.tsx

@@ -0,0 +1,89 @@
+import {CheckInFixture} from 'sentry-fixture/checkIn';
+import {EventFixture} from 'sentry-fixture/event';
+import {GroupFixture} from 'sentry-fixture/group';
+import {OrganizationFixture} from 'sentry-fixture/organization';
+import {ProjectFixture} from 'sentry-fixture/project';
+import {RouterFixture} from 'sentry-fixture/routerFixture';
+
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import GroupStore from 'sentry/stores/groupStore';
+import {IssueCategory, IssueType} from 'sentry/types/group';
+import GroupCheckIns from 'sentry/views/issueDetails/groupCheckIns';
+import {statusToText} from 'sentry/views/monitors/utils';
+
+describe('GroupCheckIns', () => {
+  const monitorId = 'f75a223c-aae1-47e4-8f77-6c72243cb76e';
+  const event = EventFixture({
+    tags: [
+      {
+        key: 'monitor.id',
+        value: monitorId,
+      },
+    ],
+  });
+  const project = ProjectFixture();
+  const group = GroupFixture({
+    issueCategory: IssueCategory.CRON,
+    issueType: IssueType.MONITOR_CHECK_IN_FAILURE,
+    project,
+  });
+  const organization = OrganizationFixture();
+  const router = RouterFixture({params: {groupId: group.id}});
+
+  beforeEach(() => {
+    GroupStore.init();
+    GroupStore.add([group]);
+    MockApiClient.clearMockResponses();
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/issues/${group.id}/`,
+      body: group,
+    });
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/issues/${group.id}/events/recommended/`,
+      body: event,
+    });
+  });
+
+  it('renders the empty check-in table', async () => {
+    MockApiClient.addMockResponse({
+      url: `/projects/${organization.slug}/${project.slug}/monitors/${monitorId}/checkins/`,
+      body: [],
+    });
+
+    render(<GroupCheckIns />, {organization, router});
+    expect(await screen.findByText('All Check-Ins')).toBeInTheDocument();
+    for (const column of [
+      'Timestamp',
+      'Status',
+      'Duration',
+      'Environment',
+      'Monitor Config',
+      'ID',
+    ]) {
+      expect(screen.getByText(column)).toBeInTheDocument();
+    }
+    expect(screen.getByText('No matching check-ins found')).toBeInTheDocument();
+  });
+
+  it('renders the check-in table with data', async () => {
+    const check = CheckInFixture();
+    MockApiClient.addMockResponse({
+      url: `/projects/${organization.slug}/${project.slug}/monitors/${monitorId}/checkins/`,
+      body: [check],
+    });
+
+    render(<GroupCheckIns />, {organization, router});
+    expect(await screen.findByText('All Check-Ins')).toBeInTheDocument();
+    expect(screen.queryByText('No matching check-ins found')).not.toBeInTheDocument();
+    expect(screen.getByText('Showing 1-1 matching check-ins')).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Previous Page'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Next Page'})).toBeInTheDocument();
+
+    expect(screen.getByRole('time')).toHaveTextContent(/Jan 1, 2025/);
+    expect(screen.getByText(statusToText[check.status])).toBeInTheDocument();
+    expect(screen.getByText(`${check.duration}ms`)).toBeInTheDocument();
+    expect(screen.getByText(check.environment)).toBeInTheDocument();
+    expect(screen.getByText(check.id)).toBeInTheDocument();
+  });
+});