feat(uptime): Add percentile to overview rows (#96793)

Looks like this

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

Author: evanpurkhiser

static/app/views/alerts/rules/uptime/types.tsx

@@ -44,6 +44,13 @@ export interface UptimeCheck {
   uptimeCheckId: string;
 }
 
+export interface UptimeSummary {
+  downtimeChecks: number;
+  failedChecks: number;
+  missedWindowChecks: number;
+  totalChecks: number;
+}
+
 export enum CheckStatusReason {
   FAILURE = 'failure',
   TIMEOUT = 'timeout',

static/app/views/insights/uptime/components/overviewTimeline/index.tsx

@@ -14,6 +14,7 @@ import {space} from 'sentry/styles/space';
 import {useDebouncedValue} from 'sentry/utils/useDebouncedValue';
 import {useDimensions} from 'sentry/utils/useDimensions';
 import type {UptimeRule} from 'sentry/views/alerts/rules/uptime/types';
+import {useUptimeMonitorSummaries} from 'sentry/views/insights/uptime/utils/useUptimeMonitorSummary';
 
 import {OverviewRow} from './overviewRow';
 
@@ -29,6 +30,11 @@ export function OverviewTimeline({uptimeRules}: Props) {
   const timeWindowConfig = useTimeWindowConfig({timelineWidth});
   const dateNavigation = useDateNavigation();
 
+  const {data: summaries} = useUptimeMonitorSummaries({
+    timeWindowConfig,
+    ruleIds: uptimeRules.map(rule => rule.id),
+  });
+
   return (
     <MonitorListPanel role="region">
       <TimelineWidthTracker ref={elementRef} />
@@ -66,6 +72,7 @@ export function OverviewTimeline({uptimeRules}: Props) {
             key={uptimeRule.id}
             timeWindowConfig={timeWindowConfig}
             uptimeRule={uptimeRule}
+            summary={summaries?.[uptimeRule.id] ?? null}
           />
         ))}
       </UptimeAlertRow>

static/app/views/insights/uptime/components/overviewTimeline/overviewRow.tsx

@@ -6,18 +6,22 @@ import {CheckInPlaceholder} from 'sentry/components/checkInTimeline/checkInPlace
 import {CheckInTimeline} from 'sentry/components/checkInTimeline/checkInTimeline';
 import type {TimeWindowConfig} from 'sentry/components/checkInTimeline/types';
 import {Tag} from 'sentry/components/core/badge/tag';
+import {Flex} from 'sentry/components/core/layout';
 import {Link} from 'sentry/components/core/link';
+import {Text} from 'sentry/components/core/text';
 import ActorBadge from 'sentry/components/idBadge/actorBadge';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
-import {IconTimer, IconUser} from 'sentry/icons';
+import Placeholder from 'sentry/components/placeholder';
+import {IconStats, IconTimer, IconUser} from 'sentry/icons';
 import {t, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import getDuration from 'sentry/utils/duration/getDuration';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjectFromSlug from 'sentry/utils/useProjectFromSlug';
 import {makeAlertsPathname} from 'sentry/views/alerts/pathnames';
-import type {UptimeRule} from 'sentry/views/alerts/rules/uptime/types';
+import type {UptimeRule, UptimeSummary} from 'sentry/views/alerts/rules/uptime/types';
+import {UptimePercentile} from 'sentry/views/insights/uptime/components/percentile';
 import {
   checkStatusPrecedent,
   statusToText,
@@ -34,9 +38,15 @@ interface Props {
    * rule name.
    */
   singleRuleView?: boolean;
+  summary?: UptimeSummary | null;
 }
 
-export function OverviewRow({uptimeRule, timeWindowConfig, singleRuleView}: Props) {
+export function OverviewRow({
+  summary,
+  uptimeRule,
+  timeWindowConfig,
+  singleRuleView,
+}: Props) {
   const organization = useOrganization();
   const project = useProjectFromSlug({
     organization,
@@ -65,26 +75,40 @@ export function OverviewRow({uptimeRule, timeWindowConfig, singleRuleView}: Prop
         <DetailsHeadline>
           <Name>{uptimeRule.name}</Name>
         </DetailsHeadline>
-        <DetailsContainer>
+        <Flex direction="column" gap="xs">
           <OwnershipDetails>
             {project && <ProjectBadge project={project} avatarSize={12} disableLink />}
             {uptimeRule.owner ? (
               <ActorBadge actor={uptimeRule.owner} avatarSize={12} />
             ) : (
-              <UnassignedLabel>
+              <Flex gap="xs" align="center">
                 <IconUser size="xs" />
                 {t('Unassigned')}
-              </UnassignedLabel>
+              </Flex>
             )}
           </OwnershipDetails>
-          <ScheduleDetails>
-            <IconTimer size="xs" />
-            {t('Checked every %s', getDuration(uptimeRule.intervalSeconds))}
-          </ScheduleDetails>
+          <Flex gap="xs" align="center">
+            <Flex gap="xs" align="center">
+              <IconTimer color="subText" size="xs" />
+              <Text size="xs" variant="muted">
+                {t('Checked every %s', getDuration(uptimeRule.intervalSeconds))}
+              </Text>
+            </Flex>
+            {summary === undefined ? null : summary === null ? (
+              <Text size="xs">
+                <Placeholder width="60px" height="1lh" />
+              </Text>
+            ) : (
+              <Flex gap="xs" align="center">
+                <IconStats color="subText" size="xs" />
+                <UptimePercentile size="xs" summary={summary} />
+              </Flex>
+            )}
+          </Flex>
           <MonitorStatuses>
             {uptimeRule.status === 'disabled' && <Tag>{t('Disabled')}</Tag>}
           </MonitorStatuses>
-        </DetailsContainer>
+        </Flex>
       </DetailsLink>
     </DetailsArea>
   );
@@ -136,12 +160,6 @@ const DetailsHeadline = styled('div')`
   grid-template-columns: 1fr minmax(30px, max-content);
 `;
 
-const DetailsContainer = styled('div')`
-  display: flex;
-  flex-direction: column;
-  gap: ${space(0.5)};
-`;
-
 const OwnershipDetails = styled('div')`
   display: flex;
   flex-wrap: wrap;
@@ -151,26 +169,12 @@ const OwnershipDetails = styled('div')`
   font-size: ${p => p.theme.fontSize.sm};
 `;
 
-const UnassignedLabel = styled('div')`
-  display: flex;
-  gap: ${space(0.5)};
-  align-items: center;
-`;
-
 const Name = styled('h3')`
   font-size: ${p => p.theme.fontSize.lg};
   word-break: break-word;
   margin-bottom: ${space(0.5)};
 `;
 
-const ScheduleDetails = styled('small')`
-  display: flex;
-  gap: ${space(0.5)};
-  align-items: center;
-  color: ${p => p.theme.subText};
-  font-size: ${p => p.theme.fontSize.sm};
-`;
-
 const MonitorStatuses = styled('div')`
   display: flex;
   gap: ${space(0.5)};

static/app/views/insights/uptime/components/percentile.spec.tsx

@@ -0,0 +1,94 @@
+import {UptimeSummaryFixture} from 'sentry-fixture/uptimeSummary';
+
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import {UptimePercentile} from './percentile';
+
+describe('UptimePercentile', () => {
+  const mockSummary = UptimeSummaryFixture();
+
+  it('calculates and displays uptime percentage correctly', () => {
+    // Known checks = totalChecks - missedWindowChecks = 100 - 2 = 98
+    // Uptime calculation = (knownChecks - downtimeChecks) / knownChecks = (98 - 5) / 98 = 93/98 = 0.9489...
+    // Uptime = 94.897% which rounds down to 94.897%
+    render(<UptimePercentile summary={mockSummary} />);
+
+    expect(screen.getByText('94.897%')).toBeInTheDocument();
+  });
+
+  it('displays 100% uptime when all checks are successful', () => {
+    const perfectSummary = UptimeSummaryFixture({
+      downtimeChecks: 0,
+      failedChecks: 0,
+      missedWindowChecks: 0,
+    });
+
+    render(<UptimePercentile summary={perfectSummary} />);
+
+    expect(screen.getByText('100%')).toBeInTheDocument();
+  });
+
+  it('displays 0% uptime when no checks are known', () => {
+    const noKnownChecksSummary = UptimeSummaryFixture({
+      downtimeChecks: 0,
+      failedChecks: 0,
+      missedWindowChecks: 100,
+    });
+
+    render(<UptimePercentile summary={noKnownChecksSummary} />);
+
+    expect(screen.getByText('0.0%')).toBeInTheDocument();
+  });
+
+  it('displays uptime when some checks are down', () => {
+    const allFailedSummary = UptimeSummaryFixture({
+      downtimeChecks: 50,
+      failedChecks: 48,
+      missedWindowChecks: 2,
+    });
+    // knownChecks = 100 - 2 = 98, uptime = (98 - 50) / 98 = 48/98 = 0.48979... = 48.979%
+
+    render(<UptimePercentile summary={allFailedSummary} />);
+
+    expect(screen.getByText('48.979%')).toBeInTheDocument();
+  });
+
+  it('handles zero total checks', () => {
+    const zeroChecksSummary = UptimeSummaryFixture({
+      totalChecks: 0,
+      downtimeChecks: 0,
+      failedChecks: 0,
+      missedWindowChecks: 0,
+    });
+
+    render(<UptimePercentile summary={zeroChecksSummary} />);
+
+    expect(screen.getByText('0.0%')).toBeInTheDocument();
+  });
+
+  it('rounds down to 3 decimal places', () => {
+    const preciseSummary = UptimeSummaryFixture({
+      downtimeChecks: 1,
+      failedChecks: 0,
+      missedWindowChecks: 0,
+      totalChecks: 7,
+    });
+    // Uptime = 6/7 = 0.857142... which should round down to 85.714%
+
+    render(<UptimePercentile summary={preciseSummary} />);
+
+    expect(screen.getByText('85.714%')).toBeInTheDocument();
+  });
+
+  it('shows tooltip with detailed breakdown on hover', async () => {
+    render(<UptimePercentile summary={mockSummary} />);
+
+    const percentageText = screen.getByText('94.897%');
+    await userEvent.hover(percentageText);
+
+    expect(await screen.findByText(/uptime/i)).toBeInTheDocument();
+    expect(screen.getByText('Up Checks')).toBeInTheDocument();
+    expect(screen.getByText('Failed Checks')).toBeInTheDocument();
+    expect(screen.getByText('Down Checks')).toBeInTheDocument();
+  });
+});

static/app/views/insights/uptime/components/percentile.tsx

@@ -0,0 +1,62 @@
+import {Flex, Grid} from 'sentry/components/core/layout';
+import {Text} from 'sentry/components/core/text';
+import type {BaseTextProps} from 'sentry/components/core/text/text';
+import {Tooltip} from 'sentry/components/core/tooltip';
+import {t} from 'sentry/locale';
+import {formatAbbreviatedNumber} from 'sentry/utils/formatters';
+import {CheckIndicator} from 'sentry/views/alerts/rules/uptime/checkIndicator';
+import {CheckStatus, type UptimeSummary} from 'sentry/views/alerts/rules/uptime/types';
+
+type UptimePercentileProps = {
+  summary: UptimeSummary;
+  size?: BaseTextProps['size'];
+};
+
+export function UptimePercentile({summary, size}: UptimePercentileProps) {
+  const knownChecks = summary.totalChecks - summary.missedWindowChecks;
+
+  if (knownChecks === 0) {
+    return <Text variant="muted">0.0%</Text>;
+  }
+
+  const percentFull = ((knownChecks - summary.downtimeChecks) / knownChecks) * 100;
+  const successChecks = knownChecks - summary.downtimeChecks - summary.failedChecks;
+
+  // Round down to 3 decimals
+  const percent = Math.floor(percentFull * 1000) / 1000;
+
+  const tooltip = (
+    <Flex direction="column" gap="md" style={{textAlign: 'left'}}>
+      {t('The percent uptime of this monitor in the selected time period.')}
+      <Grid columns={'max-content max-content max-content'} gap="xs md">
+        <span>
+          <CheckIndicator status={CheckStatus.SUCCESS} width={8} />
+        </span>
+        <span>{t('Up Checks')}</span>
+        <span>{formatAbbreviatedNumber(successChecks)}</span>
+        <span>
+          <CheckIndicator status={CheckStatus.FAILURE} width={8} />
+        </span>
+        <span>{t('Failed Checks')}</span>
+        <span>{formatAbbreviatedNumber(summary.failedChecks)}</span>
+        <span>
+          <CheckIndicator status={CheckStatus.FAILURE_INCIDENT} width={8} />
+        </span>
+        <span>{t('Down Checks')}</span>
+        <span>{formatAbbreviatedNumber(summary.downtimeChecks)}</span>
+      </Grid>
+    </Flex>
+  );
+
+  return (
+    <Tooltip skipWrapper title={tooltip}>
+      <Text
+        tabular
+        size={size}
+        variant={percent > 99 ? 'success' : percent > 95 ? 'warning' : 'danger'}
+      >
+        {`${percent}%`}
+      </Text>
+    </Tooltip>
+  );
+}

static/app/views/insights/uptime/utils/useUptimeMonitorSummary.tsx

@@ -0,0 +1,44 @@
+import type {TimeWindowConfig} from 'sentry/components/checkInTimeline/types';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
+import type {UptimeSummary} from 'sentry/views/alerts/rules/uptime/types';
+
+interface Options {
+  /**
+   * The list of uptime monitor IDs to fetch summaries for. These are the numeric
+   * IDs of the UptimeRule id's
+   */
+  ruleIds: string[];
+  /**
+   * The window configuration object
+   */
+  timeWindowConfig: TimeWindowConfig;
+}
+
+/**
+ * Fetches Uptime Monitor summaries
+ */
+export function useUptimeMonitorSummaries({ruleIds, timeWindowConfig}: Options) {
+  const {start, end} = timeWindowConfig;
+
+  const selectionQuery = {
+    start: Math.floor(start.getTime() / 1000),
+    end: Math.floor(end.getTime() / 1000),
+  };
+
+  const organization = useOrganization();
+  const monitorStatsQueryKey = `/organizations/${organization.slug}/uptime-summary/`;
+
+  return useApiQuery<Record<string, UptimeSummary>>(
+    [
+      monitorStatsQueryKey,
+      {
+        query: {
+          projectUptimeSubscriptionId: ruleIds,
+          ...selectionQuery,
+        },
+      },
+    ],
+    {staleTime: 0}
+  );
+}