feat(aci): Add environment labels to cron checkin timeline (#102497)

Author: malwilley

static/app/views/detectors/components/detectorListTable/detectorListRow.tsx

@@ -1,3 +1,4 @@
+import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import {Checkbox} from 'sentry/components/core/checkbox';
@@ -11,20 +12,17 @@ import {DetectorLink} from 'sentry/views/detectors/components/detectorLink';
 import {DetectorListConnectedAutomations} from 'sentry/views/detectors/components/detectorListConnectedAutomations';
 import {DetectorAssigneeCell} from 'sentry/views/detectors/components/detectorListTable/detectorAssigneeCell';
 import {DetectorTypeCell} from 'sentry/views/detectors/components/detectorListTable/detectorTypeCell';
+import {useMonitorViewContext} from 'sentry/views/detectors/monitorViewContext';
 
 interface DetectorListRowProps {
   detector: Detector;
   onSelect: (id: string) => void;
   selected: boolean;
-  renderVisualization?: (detector: Detector) => React.ReactNode;
 }
 
-export function DetectorListRow({
-  detector,
-  selected,
-  onSelect,
-  renderVisualization,
-}: DetectorListRowProps) {
+export function DetectorListRow({detector, selected, onSelect}: DetectorListRowProps) {
+  const {additionalColumns = [], renderVisualization} = useMonitorViewContext();
+
   return (
     <DetectorSimpleTableRow
       variant={detector.enabled ? 'default' : 'faded'}
@@ -55,12 +53,17 @@ export function DetectorListRow({
       <SimpleTable.RowCell data-column-name="connected-automations">
         <DetectorListConnectedAutomations automationIds={detector.workflowIds} />
       </SimpleTable.RowCell>
-      {defined(renderVisualization) && renderVisualization(detector)}
+      {additionalColumns.map(col => (
+        <Fragment key={col.id}>{col.renderCell(detector)}</Fragment>
+      ))}
+      {defined(renderVisualization) && renderVisualization({detector})}
     </DetectorSimpleTableRow>
   );
 }
 
 export function DetectorListRowSkeleton() {
+  const {additionalColumns = [], renderVisualization} = useMonitorViewContext();
+
   return (
     <DetectorSimpleTableRow>
       <SimpleTable.RowCell>
@@ -81,6 +84,16 @@ export function DetectorListRowSkeleton() {
       <SimpleTable.RowCell data-column-name="connected-automations">
         <Placeholder height="20px" />
       </SimpleTable.RowCell>
+      {additionalColumns.map(col => (
+        <Fragment key={col.id}>
+          {col.renderPendingCell?.() ?? (
+            <SimpleTable.RowCell data-column-name={col.id}>
+              <Placeholder height="20px" />
+            </SimpleTable.RowCell>
+          )}
+        </Fragment>
+      ))}
+      {defined(renderVisualization) ? renderVisualization({detector: null}) : null}
     </DetectorSimpleTableRow>
   );
 }

static/app/views/detectors/components/detectorListTable/index.tsx

@@ -1,4 +1,11 @@
-import {useCallback, useMemo, useRef, useState, type ComponentProps} from 'react';
+import {
+  Fragment,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentProps,
+} from 'react';
 import {css, type Theme} from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -25,6 +32,10 @@ import {
   DetectorListRowSkeleton,
 } from 'sentry/views/detectors/components/detectorListTable/detectorListRow';
 import {DETECTOR_LIST_PAGE_LIMIT} from 'sentry/views/detectors/constants';
+import {
+  useMonitorViewContext,
+  type MonitorListAdditionalColumn,
+} from 'sentry/views/detectors/monitorViewContext';
 import {useCanEditDetectors} from 'sentry/views/detectors/utils/useCanEditDetector';
 import {CronServiceIncidents} from 'sentry/views/insights/crons/components/serviceIncidents';
 
@@ -36,7 +47,6 @@ type DetectorListTableProps = {
   isSuccess: boolean;
   queryCount: string;
   sort: Sort | undefined;
-  renderVisualization?: (detector: Detector) => React.ReactNode;
 };
 
 function LoadingSkeletons() {
@@ -45,14 +55,14 @@ function LoadingSkeletons() {
   ));
 }
 
-function HeaderCell({
+export function HeaderCell({
   children,
   sortKey,
   sort,
   ...props
 }: {
-  children: React.ReactNode;
   sort: Sort | undefined;
+  children?: React.ReactNode;
   divider?: boolean;
   sortKey?: string;
 } & Omit<ComponentProps<typeof SimpleTable.HeaderCell>, 'sort'>) {
@@ -90,7 +100,6 @@ function DetectorListTable({
   sort,
   queryCount,
   allResultsVisible,
-  renderVisualization,
 }: DetectorListTableProps) {
   const [selected, setSelected] = useState<Set<string>>(new Set());
 
@@ -136,11 +145,15 @@ function DetectorListTable({
   const timelineWidth = useDebouncedValue(containerWidth, 1000);
   const timeWindowConfig = useTimeWindowConfig({timelineWidth});
 
+  const {additionalColumns = [], renderVisualization} = useMonitorViewContext();
   const hasVisualization = defined(renderVisualization);
 
   return (
     <TableContainer>
-      <DetectorListSimpleTable hasVisualization={hasVisualization}>
+      <DetectorListSimpleTable
+        hasVisualization={hasVisualization}
+        additionalColumns={additionalColumns}
+      >
         {selected.size === 0 ? (
           <SimpleTable.Header>
             <HeaderCell sortKey="name" sort={sort}>
@@ -174,6 +187,9 @@ function DetectorListTable({
             >
               {t('Alerts')}
             </HeaderCell>
+            {additionalColumns.map(col => (
+              <Fragment key={col.id}>{col.renderHeaderCell()}</Fragment>
+            ))}
             {hasVisualization && (
               <Container
                 data-column-name="visualization"
@@ -211,7 +227,6 @@ function DetectorListTable({
             detector={detector}
             selected={selected.has(detector.id)}
             onSelect={handleSelect}
-            renderVisualization={renderVisualization}
           />
         ))}
         {hasVisualization && (
@@ -235,7 +250,10 @@ const TableContainer = styled('div')`
   container-type: inline-size;
 `;
 
-const gridDefinitions = (p: {theme: Theme}) => css`
+const gridDefinitions = (
+  p: {theme: Theme},
+  additionalColumns: MonitorListAdditionalColumn[]
+) => css`
   @container (min-width: ${p.theme.breakpoints.xs}) {
     grid-template-columns: 3fr 0.8fr;
 
@@ -267,10 +285,27 @@ const gridDefinitions = (p: {theme: Theme}) => css`
       display: flex;
     }
   }
+
+  @container (min-width: ${p.theme.breakpoints.xl}) {
+    grid-template-columns: 4.5fr 0.8fr 1.5fr 0.8fr 1.1fr ${additionalColumns
+        .map(col => col.columnWidth ?? 'auto')
+        .join(' ')};
+
+    ${additionalColumns.map(
+      col => css`
+        [data-column-name='${col.id}'] {
+          display: flex;
+        }
+      `
+    )}
+  }
 `;
 
 // When there is a visualization, replace the "Type" column with the visualization
-const gridDefinitionsWithVisualization = (p: {theme: Theme}) => css`
+const gridDefinitionsWithVisualization = (
+  p: {theme: Theme},
+  additionalColumns: MonitorListAdditionalColumn[]
+) => css`
   @container (min-width: ${p.theme.breakpoints.sm}) {
     grid-template-columns: 3fr 1.5fr;
 
@@ -296,15 +331,28 @@ const gridDefinitionsWithVisualization = (p: {theme: Theme}) => css`
   }
 
   @container (min-width: ${p.theme.breakpoints.xl}) {
-    grid-template-columns: 4.5fr 2fr auto 1.1fr 6fr;
+    grid-template-columns: 4.5fr 2fr auto 1.1fr ${additionalColumns
+        .map(col => col.columnWidth ?? 'auto')
+        .join(' ')} 6fr;
 
     [data-column-name='visualization'] {
       display: block;
     }
+
+    ${additionalColumns.map(
+      col => css`
+        [data-column-name='${col.id}'] {
+          display: flex;
+        }
+      `
+    )}
   }
 `;
 
-const DetectorListSimpleTable = styled(SimpleTable)<{hasVisualization: boolean}>`
+const DetectorListSimpleTable = styled(SimpleTable)<{
+  additionalColumns: MonitorListAdditionalColumn[];
+  hasVisualization: boolean;
+}>`
   grid-template-columns: 1fr;
   margin-bottom: ${space(2)};
 
@@ -316,7 +364,19 @@ const DetectorListSimpleTable = styled(SimpleTable)<{hasVisualization: boolean}>
     display: none;
   }
 
-  ${p => (p.hasVisualization ? gridDefinitionsWithVisualization(p) : gridDefinitions(p))}
+  ${p =>
+    p.additionalColumns.map(
+      col => css`
+        [data-column-name='${col.id}'] {
+          display: none;
+        }
+      `
+    )}
+
+  ${p =>
+    p.hasVisualization
+      ? gridDefinitionsWithVisualization(p, p.additionalColumns)
+      : gridDefinitions(p, p.additionalColumns)}
 `;
 
 const PositionedGridLineOverlay = styled(GridLineOverlay)`
@@ -327,7 +387,7 @@ const PositionedGridLineOverlay = styled(GridLineOverlay)`
 
   display: none;
 
-  @media (min-width: ${p => p.theme.breakpoints.xl}) {
+  @container (min-width: ${p => p.theme.breakpoints.xl}) {
     display: block;
   }
 `;

static/app/views/detectors/list.tsx

@@ -73,8 +73,7 @@ export default function DetectorsList() {
   const location = useLocation();
   const navigate = useNavigate();
   const {selection, isReady} = usePageFilters();
-  const {detectorFilter, assigneeFilter, renderVisualization, emptyState} =
-    useMonitorViewContext();
+  const {detectorFilter, assigneeFilter, emptyState} = useMonitorViewContext();
 
   const {
     sort: sorts,
@@ -180,7 +179,6 @@ export default function DetectorsList() {
                   sort={sort}
                   queryCount={hitsInt > maxHitsInt ? `${maxHits}+` : hits}
                   allResultsVisible={allResultsVisible()}
-                  renderVisualization={renderVisualization}
                 />
               )}
             </VisuallyCompleteWithData>

static/app/views/detectors/list/cron.spec.tsx

@@ -108,6 +108,9 @@ describe('CronDetectorsList', () => {
     // Name
     expect(within(row).getByText('Cron Detector')).toBeInTheDocument();
 
+    // Environment name
+    expect(within(row).getByText('production')).toBeInTheDocument();
+
     // Timeline visualization should render ticks once stats load
     expect(await screen.findAllByTestId('monitor-checkin-tick')).not.toHaveLength(0);
     expect(monitorStatsRequest).toHaveBeenCalled();