fix(crons): Show paused status on cron listing page correctly (#53993)

Because pausing a monitor doesn't affect individual environments we have
to account for the `monitor.status` not just `environment.status` when
evaluating what status to display on the timeline row.

Before, all these monitors should be marked as paused:
<img width="1253" alt="image"
src="https://github.com/getsentry/sentry/assets/9372512/3689c3ab-c83f-434c-9f8a-3b8920ff77f5">

After:
<img width="1259" alt="image"
src="https://github.com/getsentry/sentry/assets/9372512/c7472e91-e13d-4bcf-b70a-1531f88262b2">

After (alternative) with the paused icon instead:
<img width="1256" alt="image"
src="https://github.com/getsentry/sentry/assets/9372512/1641e2db-3ea8-4f3b-8b88-cb609a1b09d4">

Fixes https://github.com/getsentry/team-crons/issues/78

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

@@ -35,12 +35,16 @@ export function TimelineTableRow({monitor, bucketedData, ...timelineProps}: Prop
     <TimelineRow key={monitor.id}>
       <MonitorDetails monitor={monitor} />
       <MonitorEnvContainer>
-        {environments.map(({name, status}) => (
-          <EnvWithStatus key={name}>
-            <MonitorEnvLabel status={status}>{name}</MonitorEnvLabel>
-            {statusIconColorMap[status].icon}
-          </EnvWithStatus>
-        ))}
+        {environments.map(({name, status}) => {
+          const envStatus =
+            monitor.status === MonitorStatus.DISABLED ? MonitorStatus.DISABLED : status;
+          return (
+            <EnvWithStatus key={name}>
+              <MonitorEnvLabel status={envStatus}>{name}</MonitorEnvLabel>
+              {statusIconColorMap[envStatus].icon}
+            </EnvWithStatus>
+          );
+        })}
         {!isExpanded && (
           <Button size="xs" onClick={() => setExpanded(true)}>
             {tct('Show [num] More', {

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

@@ -1,4 +1,10 @@
-import {IconCheckmark, IconFire, IconPause, IconTimer, IconWarning} from 'sentry/icons';
+import {
+  IconCheckmark,
+  IconFire,
+  IconTimer,
+  IconUnsubscribed,
+  IconWarning,
+} from 'sentry/icons';
 import {Aliases} from 'sentry/utils/theme';
 import {StatsBucket} from 'sentry/views/monitors/components/overviewTimeline/types';
 import {CheckInStatus, MonitorStatus} from 'sentry/views/monitors/types';
@@ -36,7 +42,7 @@ export const statusIconColorMap: Record<
     color: 'subText',
   },
   disabled: {
-    icon: <IconPause color="subText" size="xs" />,
+    icon: <IconUnsubscribed color="subText" size="xs" />,
     color: 'subText',
   },
 };