Browse Source

feat(crons): Add datetime with timezone tooltip to monitors with configured timezone (#51633)

In response to customer feedback complaining that monitor check-in times
weren't respecting the configured timezone and thus became hard to read.

<img width="916" alt="image"
src="https://github.com/getsentry/sentry/assets/9372512/7364db49-e4ed-481f-9e07-ae84ce11a372">
David Wang 1 year ago
parent
commit
29fa2b1912
1 changed files with 19 additions and 1 deletions
  1. 19 1
      static/app/views/monitors/components/monitorCheckIns.tsx

+ 19 - 1
static/app/views/monitors/components/monitorCheckIns.tsx

@@ -11,6 +11,7 @@ import Pagination from 'sentry/components/pagination';
 import {PanelTable} from 'sentry/components/panels';
 import StatusIndicator from 'sentry/components/statusIndicator';
 import Text from 'sentry/components/text';
+import {Tooltip} from 'sentry/components/tooltip';
 import {IconDownload} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {defined} from 'sentry/utils';
@@ -97,7 +98,24 @@ function MonitorCheckIns({monitor, monitorEnvs, orgId}: Props) {
               <Text>{statusToText[checkIn.status]}</Text>
             </Status>
             {checkIn.status !== CheckInStatus.MISSED ? (
-              <DateTime date={checkIn.dateCreated} timeOnly />
+              <div>
+                {monitor.config.timezone ? (
+                  <Tooltip
+                    title={
+                      <DateTime
+                        date={checkIn.dateCreated}
+                        forcedTimezone={monitor.config.timezone}
+                        timeZone
+                        timeOnly
+                      />
+                    }
+                  >
+                    {<DateTime date={checkIn.dateCreated} timeOnly />}
+                  </Tooltip>
+                ) : (
+                  <DateTime date={checkIn.dateCreated} timeOnly />
+                )}
+              </div>
             ) : (
               emptyCell
             )}