ref(crons): Share checks table with group details (#91988)

evanpurkhiser · web-flow · commit 7d987463d2e8 · 2025-05-20T16:13:29.000-07:00
Prior to this change the checks table for cron issues was a totally separate implementation from the table in the cron details page. This unifies the two tables <img alt="clipboard.png" width="1815" src="https://i.imgur.com/2aPAb8w.png" />
diff --git a/static/app/views/insights/crons/components/checkInCell.tsx b/static/app/views/insights/crons/components/checkInCell.tsx
@@ -15,20 +15,21 @@ import {
 import Text from 'sentry/components/text';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import type {Project} from 'sentry/types/project';
 import {defined} from 'sentry/utils';
 import useOrganization from 'sentry/utils/useOrganization';
 import {QuickContextHovercard} from 'sentry/views/discover/table/quickContext/quickContextHovercard';
 import {ContextType} from 'sentry/views/discover/table/quickContext/utils';
-import type {CheckIn, Monitor} from 'sentry/views/insights/crons/types';
+import type {CheckIn, CheckInCellKey} from 'sentry/views/insights/crons/types';
 import {CheckInStatus} from 'sentry/views/insights/crons/types';
 import {statusToText} from 'sentry/views/insights/crons/utils';
 
 import {DEFAULT_CHECKIN_MARGIN, DEFAULT_MAX_RUNTIME} from './monitorForm';
 
 interface CheckInRowProps {
+  cellKey: CheckInCellKey;
   checkIn: CheckIn;
-  monitor: Monitor;
-  hasMultiEnv?: boolean;
+  project: Project;
 }
 
 const checkStatusToIndicatorStatus: Record<
@@ -92,7 +93,7 @@ function getCompletionStatus({status, duration}: CheckIn) {
   return CompletionStatus.INCOMPLETE;
 }
 
-export function CheckInRow({monitor, checkIn, hasMultiEnv}: CheckInRowProps) {
+export function CheckInCell({cellKey, project, checkIn}: CheckInRowProps) {
   const organization = useOrganization();
   const {
     status,
@@ -113,11 +114,13 @@ export function CheckInRow({monitor, checkIn, hasMultiEnv}: CheckInRowProps) {
         status={checkStatusToIndicatorStatus[status]}
         tooltipTitle={tct('Check-in Status: [statusText]', {statusText})}
       />
-      <Text>{statusText}</Text>
+      {statusText}
     </Status>
   );
 
-  const expectedTimeColum = expectedTime ? (
+  const environmentColumn = <div>{environment}</div>;
+
+  const expectedAtColumn = expectedTime ? (
     <TimestampContainer>
       <ExpectedDateTime date={expectedTime} timeZone seconds />
       <OffScheduleIndicator checkIn={checkIn} />
@@ -128,17 +131,16 @@ export function CheckInRow({monitor, checkIn, hasMultiEnv}: CheckInRowProps) {
 
   // Missed rows are mostly empty
   if (status === CheckInStatus.MISSED) {
-    return (
-      <Fragment>
-        {statusColumn}
-        {emptyCell}
-        {emptyCell}
-        {emptyCell}
-        {emptyCell}
-        {hasMultiEnv ? emptyCell : null}
-        {expectedTimeColum}
-      </Fragment>
-    );
+    switch (cellKey) {
+      case 'status':
+        return statusColumn;
+      case 'environment':
+        return environmentColumn;
+      case 'expectedAt':
+        return expectedAtColumn;
+      default:
+        return emptyCell;
+    }
   }
 
   const hadInProgress = !!dateInProgress;
@@ -198,7 +200,7 @@ export function CheckInRow({monitor, checkIn, hasMultiEnv}: CheckInRowProps) {
           >
             <StyledShortId
               shortId={shortId}
-              avatar={<ProjectBadge project={monitor.project} hideName avatarSize={12} />}
+              avatar={<ProjectBadge project={project} hideName avatarSize={12} />}
               to={`/organizations/${organization.slug}/issues/${id}/`}
             />
           </QuickContextHovercard>
@@ -208,17 +210,24 @@ export function CheckInRow({monitor, checkIn, hasMultiEnv}: CheckInRowProps) {
       emptyCell
     );
 
-  return (
-    <Fragment>
-      {statusColumn}
-      {startedColumn}
-      {completedColumn}
-      {durationColumn}
-      {groupsColumn}
-      {hasMultiEnv ? <div>{environment}</div> : null}
-      {expectedTimeColum}
-    </Fragment>
-  );
+  switch (cellKey) {
+    case 'status':
+      return statusColumn;
+    case 'started':
+      return startedColumn;
+    case 'completed':
+      return completedColumn;
+    case 'duration':
+      return durationColumn;
+    case 'issues':
+      return groupsColumn;
+    case 'environment':
+      return environmentColumn;
+    case 'expectedAt':
+      return expectedAtColumn;
+    default:
+      return emptyCell;
+  }
 }
 
 interface OffScheduleIndicatorProps {
diff --git a/static/app/views/insights/crons/components/monitorCheckIns.tsx b/static/app/views/insights/crons/components/monitorCheckIns.tsx
@@ -1,19 +1,15 @@
 import {Fragment} from 'react';
-import styled from '@emotion/styled';
 
 import {SectionHeading} from 'sentry/components/charts/styles';
 import LoadingError from 'sentry/components/loadingError';
 import Pagination from 'sentry/components/pagination';
-import {PanelTable} from 'sentry/components/panels/panelTable';
-import Placeholder from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import type {Monitor, MonitorEnvironment} from 'sentry/views/insights/crons/types';
 import {useMonitorCheckIns} from 'sentry/views/insights/crons/utils/useMonitorCheckIns';
 
-import {CheckInRow} from './checkInRow';
+import {MonitorCheckInsGrid} from './monitorCheckInsGrid';
 
 type Props = {
   monitor: Monitor;
@@ -47,49 +43,16 @@ export function MonitorCheckIns({monitor, monitorEnvs}: Props) {
 
   const hasMultiEnv = monitorEnvs.length > 1;
 
-  const headers = [
-    t('Status'),
-    t('Started'),
-    t('Completed'),
-    t('Duration'),
-    t('Issues'),
-    ...(hasMultiEnv ? [t('Environment')] : []),
-    t('Expected At'),
-  ];
-
   return (
     <Fragment>
       <SectionHeading>{t('Recent Check-Ins')}</SectionHeading>
-      <PanelTable
-        headers={headers}
-        isEmpty={!isPending && checkInList.length === 0}
-        emptyMessage={t('No check-ins have been recorded for this time period.')}
-      >
-        {isPending
-          ? [...new Array(PER_PAGE)].map((_, i) => (
-              <RowPlaceholder key={i}>
-                <Placeholder height="2rem" />
-              </RowPlaceholder>
-            ))
-          : checkInList.map(checkIn => (
-              <CheckInRow
-                key={checkIn.id}
-                monitor={monitor}
-                checkIn={checkIn}
-                hasMultiEnv={hasMultiEnv}
-              />
-            ))}
-      </PanelTable>
+      <MonitorCheckInsGrid
+        checkIns={checkInList ?? []}
+        isLoading={isPending}
+        hasMultiEnv={hasMultiEnv}
+        project={monitor.project}
+      />
       <Pagination pageLinks={getResponseHeader?.('Link')} />
     </Fragment>
   );
 }
-
-const RowPlaceholder = styled('div')`
-  grid-column: 1 / -1;
-  padding: ${space(1)};
-
-  &:not(:last-child) {
-    border-bottom: solid 1px ${p => p.theme.innerBorder};
-  }
-`;
diff --git a/static/app/views/insights/crons/components/monitorCheckInsGrid.spec.tsx b/static/app/views/insights/crons/components/monitorCheckInsGrid.spec.tsx
@@ -1,23 +1,23 @@
 import {CheckInFixture} from 'sentry-fixture/checkIn';
-import {MonitorFixture} from 'sentry-fixture/monitor';
+import {ProjectFixture} from 'sentry-fixture/project';
 
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 import {textWithMarkupMatcher} from 'sentry-test/utils';
 
 import {CheckInStatus} from 'sentry/views/insights/crons/types';
 
-import {CheckInRow} from './checkInRow';
+import {MonitorCheckInsGrid} from './monitorCheckInsGrid';
 
 describe('CheckInRow', () => {
-  const monitor = MonitorFixture();
+  const project = ProjectFixture();
 
   it('represents a simple Missed check-in', function () {
     const checkIn = CheckInFixture({
       status: CheckInStatus.MISSED,
       duration: null,
     });
 
-    render(<CheckInRow monitor={monitor} checkIn={checkIn} />);
+    render(<MonitorCheckInsGrid project={project} checkIns={[checkIn]} />);
 
     expect(screen.getByText('Missed')).toBeInTheDocument();
     expect(screen.getByText('Jan 1, 2025 12:00:00 AM UTC')).toBeInTheDocument();
@@ -28,7 +28,7 @@ describe('CheckInRow', () => {
       status: CheckInStatus.OK,
     });
 
-    render(<CheckInRow monitor={monitor} checkIn={checkIn} />);
+    render(<MonitorCheckInsGrid project={project} checkIns={[checkIn]} />);
 
     expect(screen.getByText('Okay')).toBeInTheDocument();
     expect(screen.getByText('Jan 1, 2025 12:00:01 AM UTC')).toBeInTheDocument();
@@ -49,7 +49,7 @@ describe('CheckInRow', () => {
       duration: null,
     });
 
-    render(<CheckInRow monitor={monitor} checkIn={checkIn} />);
+    render(<MonitorCheckInsGrid project={project} checkIns={[checkIn]} />);
 
     expect(screen.getAllByText('In Progress')).toHaveLength(2);
   });
@@ -60,7 +60,7 @@ describe('CheckInRow', () => {
       environment: 'prod',
     });
 
-    render(<CheckInRow monitor={monitor} checkIn={checkIn} hasMultiEnv />);
+    render(<MonitorCheckInsGrid project={project} checkIns={[checkIn]} hasMultiEnv />);
 
     expect(screen.getByText('prod')).toBeInTheDocument();
   });
@@ -72,7 +72,7 @@ describe('CheckInRow', () => {
       dateInProgress: null,
     });
 
-    render(<CheckInRow monitor={monitor} checkIn={checkIn} />);
+    render(<MonitorCheckInsGrid project={project} checkIns={[checkIn]} />);
 
     const notSent = screen.getByText('Not Sent');
     expect(notSent).toBeInTheDocument();
@@ -92,7 +92,7 @@ describe('CheckInRow', () => {
       duration: null,
     });
 
-    render(<CheckInRow monitor={monitor} checkIn={checkIn} />);
+    render(<MonitorCheckInsGrid project={project} checkIns={[checkIn]} />);
 
     const incomplete = screen.getByText('Incomplete');
     expect(incomplete).toBeInTheDocument();
@@ -113,7 +113,7 @@ describe('CheckInRow', () => {
       duration: 12 * 60 * 1000,
     });
 
-    render(<CheckInRow monitor={monitor} checkIn={checkIn} />);
+    render(<MonitorCheckInsGrid project={project} checkIns={[checkIn]} />);
 
     const overrunBadge = screen.getByText(textWithMarkupMatcher('2min late'));
     expect(overrunBadge).toBeInTheDocument();
@@ -135,7 +135,7 @@ describe('CheckInRow', () => {
       expectedTime: '2025-01-02T00:00:00Z',
     });
 
-    render(<CheckInRow monitor={monitor} checkIn={checkIn} />);
+    render(<MonitorCheckInsGrid project={project} checkIns={[checkIn]} />);
 
     const earlyBadge = screen.getByText(textWithMarkupMatcher('Early'));
     expect(earlyBadge).toBeInTheDocument();
@@ -158,7 +158,7 @@ describe('CheckInRow', () => {
       duration: 12 * 60 * 1000,
     });
 
-    render(<CheckInRow monitor={monitor} checkIn={checkIn} />);
+    render(<MonitorCheckInsGrid project={project} checkIns={[checkIn]} />);
 
     const earlyBadge = screen.getByText(textWithMarkupMatcher('Early'));
     expect(earlyBadge).toBeInTheDocument();
diff --git a/static/app/views/insights/crons/components/monitorCheckInsGrid.tsx b/static/app/views/insights/crons/components/monitorCheckInsGrid.tsx
@@ -0,0 +1,43 @@
+import type {GridColumnOrder} from 'sentry/components/gridEditable';
+import GridEditable from 'sentry/components/gridEditable';
+import {t} from 'sentry/locale';
+import type {Project} from 'sentry/types/project';
+import type {CheckIn, CheckInCellKey} from 'sentry/views/insights/crons/types';
+
+import {CheckInCell} from './checkInCell';
+
+type Props = {
+  checkIns: CheckIn[];
+  project: Project;
+  hasMultiEnv?: boolean;
+  isLoading?: boolean;
+};
+
+export function MonitorCheckInsGrid({checkIns, isLoading, project, hasMultiEnv}: Props) {
+  const envColumn: Array<GridColumnOrder<CheckInCellKey>> = hasMultiEnv
+    ? [{key: 'environment', width: 120, name: t('Environment')}]
+    : [];
+
+  return (
+    <GridEditable<CheckIn, CheckInCellKey>
+      isLoading={isLoading}
+      emptyMessage={t('No check-ins have been recorded for this time period.')}
+      data={checkIns}
+      columnOrder={[
+        {key: 'status', width: 120, name: t('Status')},
+        {key: 'started', width: 200, name: t('Started')},
+        {key: 'completed', width: 240, name: t('Completed')},
+        {key: 'duration', width: 150, name: t('Duration')},
+        {key: 'issues', width: 160, name: t('Issues')},
+        ...envColumn,
+        {key: 'expectedAt', width: 240, name: t('Expected At')},
+      ]}
+      columnSortBy={[]}
+      grid={{
+        renderBodyCell: (column, checkIn) => (
+          <CheckInCell cellKey={column.key} project={project} checkIn={checkIn} />
+        ),
+      }}
+    />
+  );
+}
diff --git a/static/app/views/insights/crons/types.tsx b/static/app/views/insights/crons/types.tsx
@@ -176,9 +176,9 @@ export interface CheckIn {
   environment: string;
   /**
    * What was the monitors nextCheckIn value when this check-in occured, this
-   * is when we expected the check-in to happen.
+   * is when we expected the check-in to happen. May be null for the very first check-in.
    */
-  expectedTime: string;
+  expectedTime: string | null;
   /**
    * Check-in GUID
    */
@@ -322,3 +322,12 @@ export interface CheckinProcessingError {
   errors: ProcessingError[];
   id: string;
 }
+
+export type CheckInCellKey =
+  | 'status'
+  | 'started'
+  | 'completed'
+  | 'duration'
+  | 'issues'
+  | 'environment'
+  | 'expectedAt';
diff --git a/static/app/views/issueDetails/groupCheckIns.spec.tsx b/static/app/views/issueDetails/groupCheckIns.spec.tsx
diff --git a/static/app/views/issueDetails/groupCheckIns.tsx b/static/app/views/issueDetails/groupCheckIns.tsx
