feat(crons): Add tooltip for monitor status (#58463)

<img width="1260" alt="image"
src="https://github.com/getsentry/sentry/assets/9372512/97333ba9-fdde-4252-badb-da8091a4de15">

static/app/views/monitors/components/overviewTimeline/timelineTableRow.tsx

@@ -6,6 +6,7 @@ import styled from '@emotion/styled';
 import {Button} from 'sentry/components/button';
 import {openConfirmModal} from 'sentry/components/confirm';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
+import {Tooltip} from 'sentry/components/tooltip';
 import {IconEllipsis} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {fadeIn} from 'sentry/styles/animations';
@@ -54,6 +55,7 @@ export function TimelineTableRow({
         {environments.map(({name, status}) => {
           const envStatus =
             monitor.status === MonitorStatus.DISABLED ? MonitorStatus.DISABLED : status;
+          const {label, icon} = statusIconColorMap[envStatus];
           return (
             <EnvWithStatus key={name}>
               {onDeleteEnvironment && (
@@ -88,7 +90,9 @@ export function TimelineTableRow({
                 />
               )}
               <MonitorEnvLabel status={envStatus}>{name}</MonitorEnvLabel>
-              {statusIconColorMap[envStatus].icon}
+              <Tooltip title={label} skipWrapper>
+                {icon}
+              </Tooltip>
             </EnvWithStatus>
           );
         })}

static/app/views/monitors/utils/constants.tsx

@@ -5,6 +5,7 @@ import {
   IconUnsubscribed,
   IconWarning,
 } from 'sentry/icons';
+import {t} from 'sentry/locale';
 import {Aliases} from 'sentry/utils/theme';
 import {StatsBucket} from 'sentry/views/monitors/components/overviewTimeline/types';
 import {CheckInStatus, MonitorStatus} from 'sentry/views/monitors/types';
@@ -20,30 +21,36 @@ export const CHECKIN_STATUS_PRECEDENT = [
 
 export const statusIconColorMap: Record<
   MonitorStatus,
-  {color: keyof Aliases; icon: React.ReactNode}
+  {color: keyof Aliases; icon: React.ReactNode; label: string}
 > = {
   ok: {
     icon: <IconCheckmark color="successText" />,
     color: 'successText',
+    label: t('Okay'),
   },
   error: {
     icon: <IconFire color="errorText" />,
     color: 'errorText',
+    label: t('Error'),
   },
   timeout: {
     icon: <IconFire color="errorText" />,
     color: 'errorText',
+    label: t('Timed Out'),
   },
   missed_checkin: {
     icon: <IconWarning color="warningText" />,
     color: 'warningText',
+    label: t('Missed'),
   },
   active: {
     icon: <IconTimer color="subText" />,
     color: 'subText',
+    label: t('Waiting For Check-In'),
   },
   disabled: {
     icon: <IconUnsubscribed color="subText" size="xs" />,
     color: 'subText',
+    label: t('Muted'),
   },
 };