feat(crons): Add timezone override picker to details (#91843)

It's often useful to view cron details in either your timezone, the
timezone of the monitor itself, or just in UTC.

This also drops the tooltips on the check-ins, since you can now change
the timezone completely.

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

Author: evanpurkhiser

static/app/views/alerts/rules/crons/details.tsx

@@ -14,6 +14,7 @@ import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
+import {TimezoneProvider, useTimezone} from 'sentry/components/timezoneProvider';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
@@ -30,6 +31,7 @@ import {MonitorOnboarding} from 'sentry/views/insights/crons/components/onboardi
 import {MonitorProcessingErrors} from 'sentry/views/insights/crons/components/processingErrors/monitorProcessingErrors';
 import {makeMonitorErrorsQueryKey} from 'sentry/views/insights/crons/components/processingErrors/utils';
 import {StatusToggleButton} from 'sentry/views/insights/crons/components/statusToggleButton';
+import {TimezoneOverride} from 'sentry/views/insights/crons/components/timezoneOverride';
 import type {
   CheckinProcessingError,
   Monitor,
@@ -114,6 +116,9 @@ function MonitorDetails({params, location}: Props) {
     refetchErrors();
   }
 
+  const userTimezone = useTimezone();
+  const [timezoneOverride, setTimezoneOverride] = useState(userTimezone);
+
   // Only display the unknown legend when there are visible unknown check-ins
   // in the timeline
   const [showUnknownLegend, setShowUnknownLegend] = useState(false);
@@ -146,61 +151,77 @@ function MonitorDetails({params, location}: Props) {
       <SentryDocumentTitle title={`${monitor.name} — Alerts`} />
       <MonitorHeader monitor={monitor} orgSlug={organization.slug} onUpdate={onUpdate} />
       <Layout.Body>
-        <Layout.Main>
-          <StyledPageFilterBar condensed>
-            <DatePageFilter maxPickableDays={30} />
-            <EnvironmentPageFilter />
-          </StyledPageFilterBar>
-          {monitor.status === 'disabled' && (
-            <Alert.Container>
-              <Alert
-                type="muted"
-                showIcon
-                trailingItems={
-                  <StatusToggleButton
-                    monitor={monitor}
-                    size="xs"
-                    onToggleStatus={status => handleUpdate({status})}
-                  >
-                    {t('Enable')}
-                  </StatusToggleButton>
-                }
+        <TimezoneProvider timezone={timezoneOverride}>
+          <Layout.Main>
+            <MainActions>
+              <StyledPageFilterBar condensed>
+                <DatePageFilter maxPickableDays={30} />
+                <EnvironmentPageFilter />
+              </StyledPageFilterBar>
+              <TimezoneOverride
+                monitor={monitor}
+                userTimezone={userTimezone}
+                onTimezoneSelected={setTimezoneOverride}
+              />
+            </MainActions>
+            {monitor.status === 'disabled' && (
+              <Alert.Container>
+                <Alert
+                  type="muted"
+                  showIcon
+                  trailingItems={
+                    <StatusToggleButton
+                      monitor={monitor}
+                      size="xs"
+                      onToggleStatus={status => handleUpdate({status})}
+                    >
+                      {t('Enable')}
+                    </StatusToggleButton>
+                  }
+                >
+                  {t('This monitor is disabled and is not accepting check-ins.')}
+                </Alert>
+              </Alert.Container>
+            )}
+            {!!checkinErrors?.length && (
+              <MonitorProcessingErrors
+                checkinErrors={checkinErrors}
+                onDismiss={handleDismissError}
               >
-                {t('This monitor is disabled and is not accepting check-ins.')}
-              </Alert>
-            </Alert.Container>
-          )}
-          {!!checkinErrors?.length && (
-            <MonitorProcessingErrors
-              checkinErrors={checkinErrors}
-              onDismiss={handleDismissError}
-            >
-              {t('Errors were encountered while ingesting check-ins for this monitor')}
-            </MonitorProcessingErrors>
-          )}
-          {hasLastCheckIn(monitor) ? (
-            <Fragment>
-              <DetailsTimeline monitor={monitor} onStatsLoaded={checkHasUnknown} />
-              <MonitorStats monitor={monitor} monitorEnvs={monitor.environments} />
-              <MonitorIssues monitor={monitor} monitorEnvs={monitor.environments} />
-              <MonitorCheckIns monitor={monitor} monitorEnvs={monitor.environments} />
-            </Fragment>
-          ) : (
-            <MonitorOnboarding monitor={monitor} />
-          )}
-        </Layout.Main>
-        <Layout.Side>
-          <DetailsSidebar
-            monitorEnv={envsSortedByLastCheck[envsSortedByLastCheck.length - 1]}
-            monitor={monitor}
-            showUnknownLegend={showUnknownLegend}
-          />
-        </Layout.Side>
+                {t('Errors were encountered while ingesting check-ins for this monitor')}
+              </MonitorProcessingErrors>
+            )}
+            {hasLastCheckIn(monitor) ? (
+              <Fragment>
+                <DetailsTimeline monitor={monitor} onStatsLoaded={checkHasUnknown} />
+                <MonitorStats monitor={monitor} monitorEnvs={monitor.environments} />
+                <MonitorIssues monitor={monitor} monitorEnvs={monitor.environments} />
+                <MonitorCheckIns monitor={monitor} monitorEnvs={monitor.environments} />
+              </Fragment>
+            ) : (
+              <MonitorOnboarding monitor={monitor} />
+            )}
+          </Layout.Main>
+          <Layout.Side>
+            <DetailsSidebar
+              monitorEnv={envsSortedByLastCheck[envsSortedByLastCheck.length - 1]}
+              monitor={monitor}
+              showUnknownLegend={showUnknownLegend}
+            />
+          </Layout.Side>
+        </TimezoneProvider>
       </Layout.Body>
     </Layout.Page>
   );
 }
 
+const MainActions = styled('div')`
+  display: flex;
+  gap: ${space(1)};
+  justify-content: space-between;
+  align-items: center;
+`;
+
 const StyledPageFilterBar = styled(PageFilterBar)`
   margin-bottom: ${space(2)};
 `;

static/app/views/insights/crons/components/monitorCheckIns.tsx

@@ -23,7 +23,6 @@ import {space} from 'sentry/styles/space';
 import {defined} from 'sentry/utils';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
-import {useUser} from 'sentry/utils/useUser';
 import {QuickContextHovercard} from 'sentry/views/discover/table/quickContext/quickContextHovercard';
 import {ContextType} from 'sentry/views/discover/table/quickContext/utils';
 import type {Monitor, MonitorEnvironment} from 'sentry/views/insights/crons/types';
@@ -53,7 +52,6 @@ const checkStatusToIndicatorStatus: Record<
 const PER_PAGE = 10;
 
 export function MonitorCheckIns({monitor, monitorEnvs}: Props) {
-  const user = useUser();
   const location = useLocation();
   const organization = useOrganization();
 
@@ -95,9 +93,6 @@ export function MonitorCheckIns({monitor, monitorEnvs}: Props) {
     t('Expected At'),
   ];
 
-  const customTimezone =
-    monitor.config.timezone && monitor.config.timezone !== user.options.timezone;
-
   return (
     <Fragment>
       <SectionHeading>{t('Recent Check-Ins')}</SectionHeading>
@@ -127,19 +122,7 @@ export function MonitorCheckIns({monitor, monitorEnvs}: Props) {
                   emptyCell
                 ) : (
                   <div>
-                    <Tooltip
-                      disabled={!customTimezone}
-                      title={
-                        <DateTime
-                          date={checkIn.dateAdded}
-                          forcedTimezone={monitor.config.timezone ?? 'UTC'}
-                          timeZone
-                          seconds
-                        />
-                      }
-                    >
-                      <DateTime date={checkIn.dateAdded} timeZone seconds />
-                    </Tooltip>
+                    <DateTime date={checkIn.dateAdded} timeZone seconds />
                   </div>
                 )}
                 {defined(checkIn.duration) ? (
@@ -196,19 +179,7 @@ export function MonitorCheckIns({monitor, monitorEnvs}: Props) {
                 {hasMultiEnv ? <div>{checkIn.environment}</div> : null}
                 <div>
                   {checkIn.expectedTime ? (
-                    <Tooltip
-                      disabled={!customTimezone}
-                      title={
-                        <DateTime
-                          date={checkIn.expectedTime}
-                          forcedTimezone={monitor.config.timezone ?? 'UTC'}
-                          timeZone
-                          seconds
-                        />
-                      }
-                    >
-                      <Timestamp date={checkIn.expectedTime} timeZone seconds />
-                    </Tooltip>
+                    <Timestamp date={checkIn.expectedTime} timeZone seconds />
                   ) : (
                     emptyCell
                   )}

static/app/views/insights/crons/components/timezoneOverride.tsx

@@ -0,0 +1,82 @@
+import {useCallback, useMemo, useState} from 'react';
+import styled from '@emotion/styled';
+import moment from 'moment-timezone';
+
+import {CompactSelect} from 'sentry/components/core/compactSelect';
+import {t} from 'sentry/locale';
+import type {Monitor} from 'sentry/views/insights/crons/types';
+
+interface TimezoneOverrideProps {
+  monitor: Monitor;
+  onTimezoneSelected: (timezone: string) => void;
+  userTimezone: string;
+}
+
+type Mode = 'user' | 'monitor' | 'utc';
+
+export function TimezoneOverride({
+  monitor,
+  onTimezoneSelected,
+  userTimezone,
+}: TimezoneOverrideProps) {
+  const monitorTimezone = monitor.config.timezone ?? 'UTC';
+
+  const [mode, setMode] = useState<Mode>('user');
+
+  const timezoneMapping = useMemo<Record<Mode, string>>(
+    () => ({
+      user: userTimezone,
+      monitor: monitorTimezone,
+      utc: 'UTC',
+    }),
+    [monitorTimezone, userTimezone]
+  );
+
+  const handleChange = useCallback(
+    (newMode: Mode) => {
+      setMode(newMode);
+      onTimezoneSelected(timezoneMapping[newMode]);
+    },
+    [onTimezoneSelected, timezoneMapping]
+  );
+
+  return (
+    <CompactSelect<Mode>
+      size="xs"
+      value={mode}
+      position="bottom-end"
+      onChange={option => handleChange(option.value)}
+      triggerProps={{prefix: t('Date Display')}}
+      options={[
+        {
+          value: 'user',
+          label: 'My Timezone',
+          trailingItems: <TimezoneLabel timezone={userTimezone} />,
+        },
+        {
+          value: 'monitor',
+          label: 'Monitor',
+          trailingItems: <TimezoneLabel timezone={monitorTimezone} />,
+        },
+        {
+          value: 'utc',
+          label: 'UTC',
+          trailingItems: <TimezoneLabel timezone="UTC" />,
+        },
+      ]}
+    />
+  );
+}
+
+function TimezoneLabel({timezone}: {timezone: string}) {
+  return <TimezoneName>{moment.tz(timezone).format('z Z')}</TimezoneName>;
+}
+
+const TimezoneName = styled('div')`
+  color: ${p => p.theme.subText};
+  font-weight: ${p => p.theme.fontWeightBold};
+  display: flex;
+  align-items: center;
+  font-size: ${p => p.theme.fontSizeSmall};
+  width: max-content;
+`;