feat(crons): Support timeout status in frontend monitor pages (#47944)

<img width="459" alt="image"
src="https://user-images.githubusercontent.com/9372512/234410198-dbda4f63-bcd7-49d2-b38b-86c258cb4dbd.png">
<img width="497" alt="image"
src="https://user-images.githubusercontent.com/9372512/234410181-1ac441e5-4c57-4b69-a4d0-fc01362078c3.png">

static/app/views/monitors/components/checkInIcon.tsx

@@ -19,7 +19,7 @@ export default styled('div')<Props>`
     p.color
       ? `background: ${p.color};`
       : `background: ${
-          p.status === CheckInStatus.ERROR
+          p.status === CheckInStatus.ERROR || p.status === CheckInStatus.TIMEOUT
             ? p.theme.error
             : p.status === CheckInStatus.OK
             ? p.theme.success

static/app/views/monitors/components/monitorBadge.tsx

@@ -37,6 +37,10 @@ const statusMap: Record<MonitorStatus, StatusData> = {
     Icon: IconFire,
     color: 'errorText',
   },
+  timeout: {
+    Icon: IconFire,
+    color: 'errorText',
+  },
   missed_checkin: {
     Icon: IconExclamation,
     color: 'warningText',

static/app/views/monitors/components/monitorHeader.tsx

@@ -28,6 +28,7 @@ const statusToLabel: Record<MonitorStatus, string> = {
   disabled: t('Disabled'),
   active: t('Active'),
   missed_checkin: t('Missed'),
+  timeout: t('Timeout'),
 };
 
 function MonitorHeader({monitor, monitorEnv, orgId, onUpdate}: Props) {

static/app/views/monitors/components/monitorIcon.tsx

@@ -13,11 +13,11 @@ export default styled('div')<{size: number; status: MonitorStatus}>`
     p.color
       ? `background: ${p.color};`
       : `background: ${
-          p.status === 'error'
+          p.status === MonitorStatus.ERROR || p.status === MonitorStatus.TIMEOUT
             ? p.theme.error
-            : p.status === 'ok'
+            : p.status === MonitorStatus.OK
             ? p.theme.success
-            : p.status === 'missed_checkin'
+            : p.status === MonitorStatus.MISSED_CHECKIN
             ? p.theme.warning
             : p.theme.disabled
         };`};

static/app/views/monitors/components/row.tsx

@@ -159,6 +159,8 @@ function MonitorRow({monitor, monitorEnv, organization, onDelete}: MonitorRowPro
             ? tct('Missed [lastCheckin]', {lastCheckin})
             : monitorStatus === MonitorStatus.ERROR
             ? tct('Failed [lastCheckin]', {lastCheckin})
+            : monitorStatus === MonitorStatus.TIMEOUT
+            ? t('Timed out')
             : null}
         </TextOverflow>
       </MonitorColumn>

static/app/views/monitors/types.tsx

@@ -24,6 +24,7 @@ export enum MonitorStatus {
   DISABLED = 'disabled',
   ACTIVE = 'active',
   MISSED_CHECKIN = 'missed_checkin',
+  TIMEOUT = 'timeout',
 }
 
 export enum CheckInStatus {
@@ -31,6 +32,7 @@ export enum CheckInStatus {
   ERROR = 'error',
   IN_PROGRESS = 'in_progress',
   MISSED = 'missed',
+  TIMEOUT = 'timeout',
 }
 
 interface BaseConfig {