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

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.CRON_CHECKS]}
+        component={make(() => import('sentry/views/issueDetails/groupCronChecks'))}
+      />
       <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},
+      cronChecks: {enabled: true},
       attachments: {enabled: false},
       userFeedback: {enabled: false},
       replays: {enabled: false},

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

@@ -0,0 +1,91 @@
+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 GroupCronChecks from 'sentry/views/issueDetails/groupCronChecks';
+import {statusToText} from 'sentry/views/monitors/utils';
+
+describe('GroupCronChecks', () => {
+  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 cron check table', async () => {
+    MockApiClient.addMockResponse({
+      url: `/projects/${organization.slug}/${project.slug}/monitors/${monitorId}/checkins/`,
+      body: [],
+    });
+
+    render(<GroupCronChecks />, {organization, router});
+    expect(await screen.findByText('All Monitor Checks')).toBeInTheDocument();
+    for (const column of [
+      'Timestamp',
+      'Status',
+      'Duration',
+      'Environment',
+      'Config',
+      'ID',
+    ]) {
+      expect(screen.getByText(column)).toBeInTheDocument();
+    }
+    expect(screen.getByText('No matching monitor checks found')).toBeInTheDocument();
+  });
+
+  it('renders the cron check table with data', async () => {
+    const check = CheckInFixture();
+    MockApiClient.addMockResponse({
+      url: `/projects/${organization.slug}/${project.slug}/monitors/${monitorId}/checkins/`,
+      body: [check],
+    });
+
+    render(<GroupCronChecks />, {organization, router});
+    expect(await screen.findByText('All Monitor Checks')).toBeInTheDocument();
+    expect(
+      screen.queryByText('No matching monitor checks found')
+    ).not.toBeInTheDocument();
+    expect(screen.getByText('Showing 1-1 matching monitor checks')).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();
+  });
+});

static/app/views/issueDetails/groupCronChecks.tsx

@@ -0,0 +1,267 @@
+import {Fragment} from 'react';
+import {useTheme} from '@emotion/react';
+import styled from '@emotion/styled';
+import moment from 'moment-timezone';
+
+import Duration from 'sentry/components/duration';
+import GridEditable, {type GridColumnOrder} from 'sentry/components/gridEditable';
+import LoadingError from 'sentry/components/loadingError';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
+import {Tooltip} from 'sentry/components/tooltip';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import type {User} from 'sentry/types/user';
+import {defined} from 'sentry/utils';
+import {FIELD_FORMATTERS} from 'sentry/utils/discover/fieldRenderers';
+import parseLinkHeader from 'sentry/utils/parseLinkHeader';
+import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
+import {useParams} from 'sentry/utils/useParams';
+import {useUser} from 'sentry/utils/useUser';
+import {EventListTable} from 'sentry/views/issueDetails/streamline/eventListTable';
+import {useCronIssueAlertId} from 'sentry/views/issueDetails/streamline/issueCronCheckTimeline';
+import {useGroup} from 'sentry/views/issueDetails/useGroup';
+import {type CheckIn, CheckInStatus} from 'sentry/views/monitors/types';
+import {statusToText, tickStyle} from 'sentry/views/monitors/utils';
+import {scheduleAsText} from 'sentry/views/monitors/utils/scheduleAsText';
+import {useMonitorChecks} from 'sentry/views/monitors/utils/useMonitorChecks';
+
+export default function GroupCronChecks() {
+  const organization = useOrganization();
+  const {groupId} = useParams<{groupId: string}>();
+  const location = useLocation();
+  const user = useUser();
+  const cronAlertId = useCronIssueAlertId({groupId});
+
+  const {
+    data: group,
+    isPending: isGroupPending,
+    isError: isGroupError,
+    refetch: refetchGroup,
+  } = useGroup({groupId});
+
+  const canFetchMonitorChecks =
+    Boolean(organization.slug) && Boolean(group?.project.slug) && Boolean(cronAlertId);
+
+  const {
+    data: cronData = [],
+    isPending: isDataPending,
+    getResponseHeader,
+  } = useMonitorChecks(
+    {
+      orgSlug: organization.slug,
+      projectSlug: group?.project.slug ?? '',
+      monitorIdOrSlug: cronAlertId ?? '',
+      limit: 50,
+      queryParams: {...location.query},
+    },
+    {enabled: canFetchMonitorChecks}
+  );
+
+  if (isGroupError) {
+    return <LoadingError onRetry={refetchGroup} />;
+  }
+
+  if (isGroupPending) {
+    return <LoadingIndicator />;
+  }
+
+  const links = parseLinkHeader(getResponseHeader?.('Link') ?? '');
+  const previousDisabled = links?.previous?.results === false;
+  const nextDisabled = links?.next?.results === false;
+  const pageCount = cronData.length;
+
+  return (
+    <EventListTable
+      title={t('All Monitor Checks')}
+      pagination={{
+        tableUnits: t('monitor checks'),
+        links,
+        pageCount,
+        nextDisabled,
+        previousDisabled,
+      }}
+    >
+      <GridEditable
+        isLoading={isDataPending}
+        emptyMessage={t('No matching monitor checks found')}
+        data={cronData}
+        columnOrder={[
+          {key: 'dateCreated', width: 225, name: t('Timestamp')},
+          {key: 'status', width: 100, name: t('Status')},
+          {key: 'duration', width: 130, name: t('Duration')},
+          {key: 'environment', width: 120, name: t('Environment')},
+          {key: 'monitorConfig', width: 100, name: t('Config')},
+          {key: 'id', width: 100, name: t('ID')},
+        ]}
+        columnSortBy={[]}
+        grid={{
+          renderHeadCell: (col: GridColumnOrder) => <Cell>{col.name}</Cell>,
+          renderBodyCell: (column, dataRow) => (
+            <CronCheckCell column={column} dataRow={dataRow} userOptions={user.options} />
+          ),
+        }}
+      />
+    </EventListTable>
+  );
+}
+
+function CronCheckCell({
+  dataRow,
+  column,
+  userOptions,
+}: {
+  column: GridColumnOrder<string>;
+  dataRow: CheckIn;
+  userOptions: User['options'];
+}) {
+  const theme = useTheme();
+  const columnKey = column.key as keyof CheckIn;
+
+  if (!dataRow[columnKey]) {
+    return <Cell />;
+  }
+
+  switch (columnKey) {
+    case 'dateCreated': {
+      const format = userOptions.clock24Hours
+        ? 'MMM D, YYYY HH:mm:ss z'
+        : 'MMM D, YYYY h:mm:ss A z';
+      return (
+        <HoverableCell>
+          <Tooltip
+            maxWidth={300}
+            isHoverable
+            title={
+              <LabelledTooltip>
+                {dataRow.expectedTime && (
+                  <Fragment>
+                    <dt>{t('Expected at')}</dt>
+                    <dd>
+                      {moment
+                        .tz(dataRow.expectedTime, userOptions?.timezone ?? '')
+                        .format(format)}
+                    </dd>
+                  </Fragment>
+                )}
+                <dt>{t('Received at')}</dt>
+                <dd>
+                  {moment
+                    .tz(dataRow[columnKey], userOptions?.timezone ?? '')
+                    .format(format)}
+                </dd>
+              </LabelledTooltip>
+            }
+          >
+            {FIELD_FORMATTERS.date.renderFunc('dateCreated', dataRow)}
+          </Tooltip>
+        </HoverableCell>
+      );
+    }
+    case 'duration': {
+      const cellData = dataRow[columnKey];
+      if (typeof cellData === 'number') {
+        return (
+          <Cell>
+            <Duration seconds={cellData / 1000} abbreviation exact />
+          </Cell>
+        );
+      }
+      return <Cell>{cellData}</Cell>;
+    }
+    case 'status': {
+      const status = dataRow[columnKey];
+      let checkResult = <Cell>{status}</Cell>;
+      if (Object.values(CheckInStatus).includes(status)) {
+        const colorKey = tickStyle[status].labelColor ?? 'textColor';
+        checkResult = (
+          <Cell style={{color: theme[colorKey] as string}}>{statusToText[status]}</Cell>
+        );
+      }
+      return checkResult;
+    }
+    case 'monitorConfig': {
+      const config = dataRow[columnKey];
+
+      return (
+        <HoverableCell>
+          <Tooltip
+            maxWidth={400}
+            isHoverable
+            title={
+              <LabelledTooltip>
+                <dt>{t('Schedule')}</dt>
+                <dd>{scheduleAsText(config)}</dd>
+                {defined(config.schedule_type) && (
+                  <Fragment>
+                    <dt>{t('Schedule Type')}</dt>
+                    <dd>{config.schedule_type}</dd>
+                  </Fragment>
+                )}
+
+                {defined(config.checkin_margin) && (
+                  <Fragment>
+                    <dt>{t('Check-in Margin')}</dt>
+                    <dd>{config.checkin_margin}</dd>
+                  </Fragment>
+                )}
+                {defined(config.max_runtime) && (
+                  <Fragment>
+                    <dt>{t('Max Runtime')}</dt>
+                    <dd>{config.max_runtime}</dd>
+                  </Fragment>
+                )}
+                {defined(config.timezone) && (
+                  <Fragment>
+                    <dt>{t('Timezone')}</dt>
+                    <dd>{config.timezone}</dd>
+                  </Fragment>
+                )}
+                {defined(config.failure_issue_threshold) && (
+                  <Fragment>
+                    <dt>{t('Failure Threshold')}</dt>
+                    <dd>{config.failure_issue_threshold}</dd>
+                  </Fragment>
+                )}
+                {defined(config.recovery_threshold) && (
+                  <Fragment>
+                    <dt>{t('Recovery Threshold')}</dt>
+                    <dd>{config.recovery_threshold}</dd>
+                  </Fragment>
+                )}
+              </LabelledTooltip>
+            }
+          >
+            {t('View Config')}
+          </Tooltip>
+        </HoverableCell>
+      );
+    }
+    // We don't query groups for this table yet
+    case 'groups':
+      return <Cell />;
+    default:
+      return <Cell>{dataRow[columnKey]}</Cell>;
+  }
+}
+
+const Cell = styled('div')`
+  display: flex;
+  align-items: center;
+  text-align: left;
+  gap: ${space(1)};
+`;
+
+const HoverableCell = styled(Cell)`
+  color: ${p => p.theme.subText};
+  text-decoration: underline;
+  text-decoration-style: dotted;
+`;
+
+const LabelledTooltip = styled('div')`
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: ${space(0.5)} ${space(1)};
+  text-align: left;
+  margin: 0;
+`;