ref(crons): Use enum for status types (#44679)

static/app/views/monitors/checkInIcon.tsx

@@ -19,11 +19,11 @@ export default styled('div')<Props>`
     p.color
       ? `background: ${p.color};`
       : `background: ${
-          p.status === 'error'
+          p.status === CheckInStatus.ERROR
             ? p.theme.error
-            : p.status === 'ok'
+            : p.status === CheckInStatus.OK
             ? p.theme.success
-            : p.status === 'missed'
+            : p.status === CheckInStatus.MISSED
             ? p.theme.warning
             : p.theme.disabled
         };`};

static/app/views/monitors/monitorForm.tsx

@@ -20,11 +20,11 @@ import commonTheme from 'sentry/utils/theme';
 import withPageFilters from 'sentry/utils/withPageFilters';
 import withProjects from 'sentry/utils/withProjects';
 
-import {Monitor, MonitorConfig, MonitorTypes, ScheduleType} from './types';
+import {Monitor, MonitorConfig, MonitorType, ScheduleType} from './types';
 
 const SCHEDULE_TYPES: SelectValue<ScheduleType>[] = [
-  {value: 'crontab', label: 'Crontab'},
-  {value: 'interval', label: 'Interval'},
+  {value: ScheduleType.CRONTAB, label: 'Crontab'},
+  {value: ScheduleType.INTERVAL, label: 'Interval'},
 ];
 
 const DEFAULT_MONITOR_TYPE = 'cron_job';
@@ -83,7 +83,7 @@ function transformData(_data: Record<string, any>, model: FormModel) {
 class MonitorForm extends Component<Props> {
   form = new FormModel({transformData});
 
-  formDataFromConfig(type: MonitorTypes, config: MonitorConfig) {
+  formDataFromConfig(type: MonitorType, config: MonitorConfig) {
     const rv = {};
     switch (type) {
       case 'cron_job':

static/app/views/monitors/monitorHeader.tsx

@@ -12,11 +12,11 @@ import {space} from 'sentry/styles/space';
 
 import MonitorHeaderActions from './monitorHeaderActions';
 import MonitorIcon from './monitorIcon';
-import {Status} from './types';
+import {MonitorStatus} from './types';
 
 type Props = React.ComponentProps<typeof MonitorHeaderActions>;
 
-const statusToLabel: Record<Status, string> = {
+const statusToLabel: Record<MonitorStatus, string> = {
   ok: t('Ok'),
   error: t('Failed'),
   disabled: t('Disabled'),
@@ -62,10 +62,10 @@ const MonitorHeader = ({monitor, orgId, onUpdate}: Props) => {
           <MonitorStatLabel>{t('Status')}</MonitorStatLabel>
           <div>{monitor.lastCheckIn && <TimeSince date={monitor.lastCheckIn} />}</div>
           <div>{monitor.nextCheckIn && <TimeSince date={monitor.nextCheckIn} />}</div>
-          <MonitorStatus>
+          <Status>
             <MonitorIcon status={monitor.status} size={16} />
             <MonitorStatusLabel>{statusToLabel[monitor.status]}</MonitorStatusLabel>
-          </MonitorStatus>
+          </Status>
         </MonitorStats>
       </Layout.HeaderActions>
     </Layout.Header>
@@ -95,7 +95,7 @@ const MonitorStatLabel = styled(SectionHeading)`
   text-align: center;
 `;
 
-const MonitorStatus = styled('div')`
+const Status = styled('div')`
   display: flex;
   align-items: center;
 `;

static/app/views/monitors/monitorHeaderActions.tsx

@@ -15,7 +15,7 @@ import useApi from 'sentry/utils/useApi';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 
 import CronsFeedbackButton from './cronsFeedbackButton';
-import {Monitor} from './types';
+import {Monitor, MonitorStatus} from './types';
 
 type Props = {
   monitor: Monitor;
@@ -61,7 +61,10 @@ const MonitorHeaderActions = ({monitor, orgId, onUpdate}: Props) => {
 
   const toggleStatus = () =>
     updateMonitor({
-      status: monitor.status === 'disabled' ? 'active' : 'disabled',
+      status:
+        monitor.status === MonitorStatus.DISABLED
+          ? MonitorStatus.ACTIVE
+          : MonitorStatus.DISABLED,
     });
 
   return (

static/app/views/monitors/monitorIcon.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 
-import {Status} from './types';
+import {MonitorStatus} from './types';
 
-export default styled('div')<{size: number; status: Status}>`
+export default styled('div')<{size: number; status: MonitorStatus}>`
   display: inline-block;
   position: relative;
   border-radius: 50%;

static/app/views/monitors/types.tsx

@@ -1,22 +1,43 @@
 import {Project} from 'sentry/types';
 
-export type Status = 'ok' | 'error' | 'disabled' | 'active' | 'missed_checkin';
+export enum MonitorType {
+  CRON_JOB = 'cron_job',
+  // XXX(epurkhiser): There are 3 other types defined in the backend. But right
+  // now we've only implemented a frontend for the CRON_JOB type
+  HEALTH_CHECK = 'health_check',
+  HEARTBEAT = 'heartbeat',
+  UNKNOWN = 'unknown',
+}
 
-export type CheckInStatus = 'ok' | 'error' | 'missed';
+export enum ScheduleType {
+  CRONTAB = 'crontab',
+  INTERVAL = 'interval',
+}
 
-export type MonitorTypes = 'cron_job';
+export enum MonitorStatus {
+  OK = 'ok',
+  ERROR = 'error',
+  DISABLED = 'disabled',
+  ACTIVE = 'active',
+  MISSED_CHECKIN = 'missed_checkin',
+}
 
-export type ScheduleType = 'crontab' | 'interval';
+export enum CheckInStatus {
+  OK = 'ok',
+  ERROR = 'error',
+  IN_PROGRESS = 'in_progress',
+  MISSED = 'missed',
+}
 
-export type MonitorConfig = {
+export interface MonitorConfig {
   checkin_margin: number;
   max_runtime: number;
   schedule: unknown[];
   schedule_type: ScheduleType;
   timezone: string;
-};
+}
 
-export type Monitor = {
+export interface Monitor {
   config: MonitorConfig;
   dateCreated: string;
   id: string;
@@ -24,14 +45,14 @@ export type Monitor = {
   name: string;
   nextCheckIn: string;
   project: Project;
-  status: Status;
-  type: MonitorTypes;
-};
+  status: MonitorStatus;
+  type: MonitorType;
+}
 
-export type MonitorStat = {
+export interface MonitorStat {
   duration: number;
   error: number;
   missed: number;
   ok: number;
   ts: number;
-};
+}