ref(crons): Improve details legend (#70515)

The legend now differentiates between timeout and failed

<img alt="clipboard.png" width="267"
src="https://i.imgur.com/yQAfXaB.png" />

---------

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

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

@@ -18,7 +18,7 @@ import {
 } from 'sentry/views/monitors/components/monitorForm';
 import {MonitorIndicator} from 'sentry/views/monitors/components/monitorIndicator';
 import type {Monitor, MonitorEnvironment} from 'sentry/views/monitors/types';
-import {ScheduleType} from 'sentry/views/monitors/types';
+import {CheckInStatus, ScheduleType} from 'sentry/views/monitors/types';
 import {scheduleAsText} from 'sentry/views/monitors/utils/scheduleAsText';
 
 interface Props {
@@ -77,21 +77,23 @@ export default function DetailsSidebar({monitorEnv, monitor}: Props) {
           <CrontabText>({schedule})</CrontabText>
         )}
       </Schedule>
-      <SectionHeading>{t('Margins')}</SectionHeading>
+      <SectionHeading>{t('Legend')}</SectionHeading>
       <Thresholds>
-        <MonitorIndicator status="warning" size={12} />
+        <MonitorIndicator status={CheckInStatus.MISSED} size={12} />
         <Text>
           {tn(
-            'Check-ins missed after %s min',
-            'Check-ins missed after %s mins',
+            'Check-in missed after %s min',
+            'Check-in missed after %s mins',
             checkin_margin ?? DEFAULT_CHECKIN_MARGIN
           )}
         </Text>
-        <MonitorIndicator status="error" size={12} />
+        <MonitorIndicator status={CheckInStatus.ERROR} size={12} />
+        <Text>{t('Check-in reported as failed')}</Text>
+        <MonitorIndicator status={CheckInStatus.TIMEOUT} size={12} />
         <Text>
           {tn(
-            'Check-ins longer than %s min or errors',
-            'Check-ins longer than %s mins or errors',
+            'Check-in timed out after %s min',
+            'Check-in timed out after %s mins',
             max_runtime ?? DEFAULT_MAX_RUNTIME
           )}
         </Text>

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

@@ -1,15 +1,18 @@
 import styled from '@emotion/styled';
 
+import type {CheckInStatus} from 'sentry/views/monitors/types';
+import {getTickStyle} from 'sentry/views/monitors/utils';
+
 const MonitorIndicator = styled('div')<{
   size: number;
-  status: 'success' | 'warning' | 'error' | 'disabled';
+  status: CheckInStatus;
 }>`
   display: inline-block;
   position: relative;
   border-radius: 50%;
   height: ${p => p.size}px;
   width: ${p => p.size}px;
-  background: ${p => p.theme[p.status]};
+  ${p => getTickStyle(p.status, p.theme)}
 `;
 
 export {MonitorIndicator};

static/app/views/monitors/components/timeline/checkInTimeline.tsx

@@ -1,10 +1,9 @@
-import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {DateTime} from 'sentry/components/dateTime';
 import {Tooltip} from 'sentry/components/tooltip';
 import {CheckInStatus} from 'sentry/views/monitors/types';
-import {tickStyle} from 'sentry/views/monitors/utils';
+import {getTickStyle} from 'sentry/views/monitors/utils';
 
 import {getAggregateStatus} from './utils/getAggregateStatus';
 import {mergeBuckets} from './utils/mergeBuckets';
@@ -131,44 +130,7 @@ const JobTick = styled('div')<{
   transform: translateY(-50%);
   opacity: 0.7;
 
-  ${p => {
-    const style = tickStyle[p.status];
-
-    if (style.hatchTick === undefined) {
-      return css`
-        background: ${p.theme[style.tickColor]};
-      `;
-    }
-
-    return css`
-      border: 1px solid ${p.theme[style.tickColor]};
-      ${!p.roundedLeft && 'border-left-width: 0'};
-      ${!p.roundedRight && 'border-right-width: 0'};
-
-      background-size: 3px 3px;
-      opacity: 0.5;
-      background-image: linear-gradient(
-          -45deg,
-          ${p.theme[style.hatchTick]} 25%,
-          transparent 25%,
-          transparent 50%,
-          ${p.theme[style.hatchTick]} 50%,
-          ${p.theme[style.hatchTick]} 75%,
-          transparent 75%,
-          transparent
-        ),
-        linear-gradient(
-          45deg,
-          ${p.theme[style.hatchTick]} 25%,
-          transparent 25%,
-          transparent 50%,
-          ${p.theme[style.hatchTick]} 50%,
-          ${p.theme[style.hatchTick]} 75%,
-          transparent 75%,
-          transparent
-        );
-    `;
-  }};
+  ${p => getTickStyle(p.status, p.theme)};
 
   ${p =>
     p.roundedLeft &&
@@ -182,4 +144,6 @@ const JobTick = styled('div')<{
     border-top-right-radius: 2px;
     border-bottom-right-radius: 2px;
   `}
+  ${p => !p.roundedLeft && 'border-left-width: 0'};
+  ${p => !p.roundedRight && 'border-right-width: 0'};
 `;

static/app/views/monitors/utils.tsx

@@ -1,3 +1,5 @@
+import {css, type Theme} from '@emotion/react';
+
 import {t, tn} from 'sentry/locale';
 import type {Organization, SelectValue} from 'sentry/types';
 import type {ColorOrAlias} from 'sentry/utils/theme';
@@ -95,3 +97,39 @@ export const getScheduleIntervals = (n: number): SelectValue<string>[] => [
   {value: 'month', label: tn('month', 'months', n)},
   {value: 'year', label: tn('year', 'years', n)},
 ];
+
+export function getTickStyle(status: CheckInStatus, theme: Theme) {
+  const style = tickStyle[status];
+
+  if (style.hatchTick === undefined) {
+    return css`
+      background: ${theme[style.tickColor]};
+    `;
+  }
+
+  return css`
+    border: 1px solid ${theme[style.tickColor]};
+    background-size: 3px 3px;
+    opacity: 0.5;
+    background-image: linear-gradient(
+        -45deg,
+        ${theme[style.hatchTick]} 25%,
+        transparent 25%,
+        transparent 50%,
+        ${theme[style.hatchTick]} 50%,
+        ${theme[style.hatchTick]} 75%,
+        transparent 75%,
+        transparent
+      ),
+      linear-gradient(
+        45deg,
+        ${theme[style.hatchTick]} 25%,
+        transparent 25%,
+        transparent 50%,
+        ${theme[style.hatchTick]} 50%,
+        ${theme[style.hatchTick]} 75%,
+        transparent 75%,
+        transparent
+      );
+  `;
+}