feat(ui): Show units in check-in timeline

Author: evanpurkhiser

static/app/components/checkInTimeline/checkInTimeline.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import {DateTime} from 'sentry/components/dateTime';
 import {Tooltip} from 'sentry/components/tooltip';
+import {tn} from 'sentry/locale';
 
 import {getAggregateStatus} from './utils/getAggregateStatus';
 import {getTickStyle} from './utils/getTickStyle';
@@ -35,6 +36,12 @@ export interface CheckInTimelineProps<Status extends string>
    * Represents each check-in tick as bucketed check-in data.
    */
   bucketedData: Array<CheckInBucket<Status>>;
+  /**
+   * Status unit. Displayed on the check-in tooltip.
+   *
+   * Defaults to 'check-ins'
+   */
+  makeUnit?: (count: number) => React.ReactNode;
 }
 
 function getBucketedCheckInsPosition(
@@ -54,6 +61,7 @@ export function CheckInTimeline<Status extends string>({
   statusPrecedent,
   className,
   style,
+  makeUnit = count => tn('check-in', 'check-ins', count),
 }: CheckInTimelineProps<Status>) {
   const jobTicks = mergeBuckets(
     statusPrecedent,
@@ -76,6 +84,7 @@ export function CheckInTimeline<Status extends string>({
             timeWindowConfig={timeWindowConfig}
             skipWrapper
             key={startTs}
+            makeUnit={makeUnit}
           >
             <JobTick
               style={{left, width}}

static/app/components/checkInTimeline/checkInTooltip.spec.tsx

@@ -51,6 +51,7 @@ describe('CheckInTooltip', function () {
         statusLabel={testStatusLabel}
         statusStyle={testStatusStyle}
         forceVisible
+        makeUnit={() => 'some unit'}
       />
     );
 
@@ -82,23 +83,28 @@ describe('CheckInTooltip', function () {
         statusLabel={testStatusLabel}
         statusStyle={testStatusStyle}
         forceVisible
+        makeUnit={() => 'some unit'}
       />
     );
 
     const okayRow = (await screen.findAllByRole('row'))[1]!;
     expect(within(okayRow).getByText('Okay')).toBeInTheDocument();
     expect(within(okayRow).getByText('1')).toBeInTheDocument();
+    expect(within(okayRow).getByText('some unit')).toBeInTheDocument();
 
     const missedRow = screen.getAllByRole('row')[2]!;
     expect(within(missedRow).getByText('Missed')).toBeInTheDocument();
     expect(within(missedRow).getByText('1')).toBeInTheDocument();
+    expect(within(missedRow).getByText('some unit')).toBeInTheDocument();
 
     const timeoutRow = screen.getAllByRole('row')[3]!;
     expect(within(timeoutRow).getByText('Timed Out')).toBeInTheDocument();
     expect(within(timeoutRow).getByText('1')).toBeInTheDocument();
+    expect(within(timeoutRow).getByText('some unit')).toBeInTheDocument();
 
     const errorRow = screen.getAllByRole('row')[4]!;
     expect(within(errorRow).getByText('Failed')).toBeInTheDocument();
     expect(within(errorRow).getByText('1')).toBeInTheDocument();
+    expect(within(errorRow).getByText('some unit')).toBeInTheDocument();
   });
 });

static/app/components/checkInTimeline/checkInTooltip.tsx

@@ -16,6 +16,10 @@ interface CheckInTooltipProps<Status extends string> extends Omit<TooltipProps,
    * The tick that the tooltip is rendered for
    */
   jobTick: JobTickData<Status>;
+  /**
+   * A function which returns the unit for the row given the count of check-ins.
+   */
+  makeUnit: (count: number) => React.ReactNode;
   /**
    * Maps the job tick status to a human readable label
    */
@@ -33,6 +37,7 @@ export function CheckInTooltip<Status extends string>({
   statusStyle,
   statusLabel,
   children,
+  makeUnit,
   ...props
 }: CheckInTooltipProps<Status>) {
   const {startTs, endTs, stats} = jobTick;
@@ -56,6 +61,7 @@ export function CheckInTooltip<Status extends string>({
           <tr>
             <td>{t('Status')}</td>
             <td>{t('Count')}</td>
+            <td>{t('Unit')}</td>
           </tr>
         </thead>
         <tbody>
@@ -67,6 +73,7 @@ export function CheckInTooltip<Status extends string>({
                     {statusLabel[status]}
                   </StatusLabel>
                   <StatusCount>{count}</StatusCount>
+                  <StatusUnit>{makeUnit(count)}</StatusUnit>
                 </tr>
               )
           )}
@@ -86,7 +93,7 @@ const StatusCountContainer = styled('table')`
   width: 100%;
   margin: 0;
   display: grid;
-  grid-template-columns: max-content max-content;
+  grid-template-columns: max-content max-content max-content;
   gap: ${space(1)};
 
   /* Visually hide the tooltip headers but keep them for accessability */
@@ -106,6 +113,10 @@ const StatusCountContainer = styled('table')`
     grid-column: 1 / -1;
     grid-template-columns: subgrid;
   }
+
+  td {
+    text-align: left;
+  }
 `;
 
 const TooltipTimeLabel = styled('div')`
@@ -115,10 +126,12 @@ const TooltipTimeLabel = styled('div')`
 
 const StatusLabel = styled('td')<{labelColor: ColorOrAlias}>`
   color: ${p => p.theme[p.labelColor]};
-  text-align: left;
 `;
 
 const StatusCount = styled('td')`
   font-variant-numeric: tabular-nums;
-  text-align: left;
+`;
+
+const StatusUnit = styled('td')`
+  color: ${p => p.theme.subText};
 `;

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

@@ -10,7 +10,7 @@ import ActorBadge from 'sentry/components/idBadge/actorBadge';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import Link from 'sentry/components/links/link';
 import {IconTimer, IconUser} from 'sentry/icons';
-import {t} from 'sentry/locale';
+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';
@@ -103,6 +103,7 @@ export function OverviewRow({uptimeRule, timeWindowConfig, singleRuleView}: Prop
             statusStyle={tickStyle}
             statusPrecedent={checkStatusPrecedent}
             timeWindowConfig={timeWindowConfig}
+            makeUnit={count => tn('check', 'checks', count)}
           />
         )}
       </TimelineContainer>