feat(crons): Display unknown legend when unknown check-ins present (#80985)

Author: evanpurkhiser

static/app/views/monitors/components/detailsTimeline.tsx

@@ -1,4 +1,4 @@
-import {useRef} from 'react';
+import {useEffect, useRef} from 'react';
 import styled from '@emotion/styled';
 
 import {
@@ -9,24 +9,30 @@ import Panel from 'sentry/components/panels/panel';
 import Text from 'sentry/components/text';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {Organization} from 'sentry/types/organization';
 import {setApiQueryData, useQueryClient} from 'sentry/utils/queryClient';
 import useApi from 'sentry/utils/useApi';
 import {useDimensions} from 'sentry/utils/useDimensions';
 import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
 import type {Monitor} from 'sentry/views/monitors/types';
 import {makeMonitorDetailsQueryKey} from 'sentry/views/monitors/utils';
 
 import {OverviewRow} from './overviewTimeline/overviewRow';
 import {GridLineLabels, GridLineOverlay} from './timeline/gridLines';
+import {useMonitorStats} from './timeline/hooks/useMonitorStats';
 import {useTimeWindowConfig} from './timeline/hooks/useTimeWindowConfig';
+import type {MonitorBucket} from './timeline/types';
 
 interface Props {
   monitor: Monitor;
-  organization: Organization;
+  /**
+   * Called when monitor stats have been loaded for this timeline.
+   */
+  onStatsLoaded: (stats: MonitorBucket[]) => void;
 }
 
-export function DetailsTimeline({monitor, organization}: Props) {
+export function DetailsTimeline({monitor, onStatsLoaded}: Props) {
+  const organization = useOrganization();
   const location = useLocation();
   const api = useApi();
   const queryClient = useQueryClient();
@@ -43,6 +49,16 @@ export function DetailsTimeline({monitor, organization}: Props) {
     {...location.query}
   );
 
+  const {data: monitorStats} = useMonitorStats({
+    monitors: [monitor.id],
+    timeWindowConfig,
+  });
+
+  useEffect(
+    () => monitorStats?.[monitor.id] && onStatsLoaded?.(monitorStats[monitor.id]),
+    [onStatsLoaded, monitorStats, monitor.id]
+  );
+
   const handleDeleteEnvironment = async (env: string) => {
     const success = await deleteMonitorEnvironment(api, organization.slug, monitor, env);
     if (!success) {

static/app/views/monitors/details.tsx

@@ -1,4 +1,4 @@
-import {Fragment} from 'react';
+import {Fragment, useCallback, useState} from 'react';
 import styled from '@emotion/styled';
 import sortBy from 'lodash/sortBy';
 
@@ -32,6 +32,7 @@ import MonitorIssues from './components/monitorIssues';
 import MonitorStats from './components/monitorStats';
 import MonitorOnboarding from './components/onboarding';
 import {StatusToggleButton} from './components/statusToggleButton';
+import type {MonitorBucket} from './components/timeline/types';
 import type {CheckinProcessingError, Monitor, ProcessingErrorType} from './types';
 
 const DEFAULT_POLL_INTERVAL_MS = 5000;
@@ -110,6 +111,17 @@ function MonitorDetails({params, location}: Props) {
     refetchErrors();
   }
 
+  // Only display the unknown legend when there are visible unknown check-ins
+  // in the timeline
+  const [showUnknownLegend, setShowUnknownLegend] = useState(false);
+
+  const checkHasUnknown = useCallback((stats: MonitorBucket[]) => {
+    const hasUnknown = stats.some(bucket =>
+      Object.values(bucket[1]).some(envBucket => Boolean(envBucket.unknown))
+    );
+    setShowUnknownLegend(hasUnknown);
+  }, []);
+
   if (isError) {
     return (
       <LoadingError message={t('The monitor you were looking for was not found.')} />
@@ -169,7 +181,7 @@ function MonitorDetails({params, location}: Props) {
               <MonitorOnboarding monitor={monitor} />
             ) : (
               <Fragment>
-                <DetailsTimeline organization={organization} monitor={monitor} />
+                <DetailsTimeline monitor={monitor} onStatsLoaded={checkHasUnknown} />
                 <MonitorStats
                   orgSlug={organization.slug}
                   monitor={monitor}
@@ -194,6 +206,7 @@ function MonitorDetails({params, location}: Props) {
             <DetailsSidebar
               monitorEnv={envsSortedByLastCheck[envsSortedByLastCheck.length - 1]}
               monitor={monitor}
+              showUnknownLegend={showUnknownLegend}
             />
           </Layout.Side>
         </Layout.Body>