feat(aci): set up detector Ongoing Issues (#96604)

<img width="856" height="694" alt="Screenshot 2025-07-29 at 9 47 43 AM"
src="https://github.com/user-attachments/assets/606673d9-f62a-4c71-8a35-bfdef1ee1bc3"
/>

extracted time selector for metric detector chart to the details
component so that it could be shared between the chart and table

Author: ameliahsu

static/app/components/workflowEngine/ui/section.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import {Flex} from 'sentry/components/core/layout';
 
 type SectionProps = {
-  title: string;
+  title: React.ReactNode;
   children?: React.ReactNode;
   description?: string;
 };

static/app/views/detectors/components/details/common/ongoingIssues.tsx

@@ -1,19 +1,80 @@
+import {LinkButton} from 'sentry/components/core/button/linkButton';
+import {Flex} from 'sentry/components/core/layout';
+import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import ErrorBoundary from 'sentry/components/errorBoundary';
-import {SimpleTable} from 'sentry/components/tables/simpleTable';
+import GroupList from 'sentry/components/issues/groupList';
+import Panel from 'sentry/components/panels/panel';
+import PanelBody from 'sentry/components/panels/panelBody';
 import Section from 'sentry/components/workflowEngine/ui/section';
 import {t} from 'sentry/locale';
+import {getUtcDateString} from 'sentry/utils/dates';
+import useOrganization from 'sentry/utils/useOrganization';
+import usePageFilters from 'sentry/utils/usePageFilters';
+
+interface Props {
+  detectorId: string;
+  query?: Record<string, any>;
+}
+
+function EmptyMessage() {
+  return (
+    <Panel>
+      <PanelBody>
+        <EmptyStateWarning small withIcon={false}>
+          {t('No ongoing issues found for this monitor')}
+        </EmptyStateWarning>
+      </PanelBody>
+    </Panel>
+  );
+}
+
+export function DetectorDetailsOngoingIssues({detectorId, query}: Props) {
+  const organization = useOrganization();
+
+  const {selection} = usePageFilters();
+  const {start, end, period} = selection.datetime;
+  const timeProps =
+    start && end
+      ? {
+          start: getUtcDateString(start),
+          end: getUtcDateString(end),
+        }
+      : {
+          statsPeriod: period,
+        };
+
+  const queryParams = {
+    ...(query || timeProps),
+    query: `is:unresolved detector:${detectorId}`,
+    limit: 5,
+  };
+
+  const issueSearch = {
+    pathname: `/organizations/${organization.slug}/issues/`,
+    query: queryParams,
+  };
 
-export function DetectorDetailsOngoingIssues() {
   return (
-    <Section title={t('Ongoing Issues')}>
-      {/* TODO: Implement fetching and replace with GroupList */}
+    <Section
+      title={
+        <Flex justify={'between'} align="center">
+          {t('Ongoing Issues')}
+          <LinkButton size="xs" to={issueSearch}>
+            {t('View All')}
+          </LinkButton>
+        </Flex>
+      }
+    >
       <ErrorBoundary mini>
-        <SimpleTable>
-          <SimpleTable.Header>
-            <SimpleTable.HeaderCell>{t('Issue')}</SimpleTable.HeaderCell>
-          </SimpleTable.Header>
-          <SimpleTable.Empty>{t('Not yet implemented')}</SimpleTable.Empty>
-        </SimpleTable>
+        <GroupList
+          endpointPath={`/organizations/${organization.slug}/issues/`}
+          queryParams={queryParams}
+          canSelectGroups={false}
+          withPagination={false}
+          withChart={false}
+          renderEmptyMessage={EmptyMessage}
+          source="detector-details"
+        />
       </ErrorBoundary>
     </Section>
   );

static/app/views/detectors/components/details/error/index.spec.tsx

@@ -1,4 +1,5 @@
 import {ErrorDetectorFixture} from 'sentry-fixture/detectors';
+import {GroupFixture} from 'sentry-fixture/group';
 import {ProjectFixture} from 'sentry-fixture/project';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
@@ -17,6 +18,16 @@ describe('ErrorDetectorDetails', function () {
       method: 'GET',
       body: ProjectFixture(),
     });
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/users/',
+      method: 'GET',
+      body: [],
+    });
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/issues/?limit=5&query=is%3Aunresolved%20detector%3A2&statsPeriod=14d',
+      method: 'GET',
+      body: [GroupFixture()],
+    });
   });
 
   describe('Resolve section', function () {

static/app/views/detectors/components/details/error/index.tsx

@@ -1,5 +1,6 @@
 import {ExternalLink, Link} from 'sentry/components/core/link';
 import {Text} from 'sentry/components/core/text';
+import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import Placeholder from 'sentry/components/placeholder';
 import DetailLayout from 'sentry/components/workflowEngine/layout/detail';
 import Section from 'sentry/components/workflowEngine/ui/section';
@@ -69,7 +70,8 @@ export function ErrorDetectorDetails({detector, project}: ErrorDetectorDetailsPr
       <DetectorDetailsHeader detector={detector} project={project} />
       <DetailLayout.Body>
         <DetailLayout.Main>
-          <DetectorDetailsOngoingIssues />
+          <DatePageFilter />
+          <DetectorDetailsOngoingIssues detectorId={detector.id} />
           <DetectorDetailsAutomations detector={detector} />
         </DetailLayout.Main>
         <DetailLayout.Sidebar>

static/app/views/detectors/components/details/fallback.tsx

@@ -1,6 +1,8 @@
 import DetailLayout from 'sentry/components/workflowEngine/layout/detail';
 import type {Project} from 'sentry/types/project';
 import type {Detector} from 'sentry/types/workflowEngine/detectors';
+import {getUtcDateString} from 'sentry/utils/dates';
+import usePageFilters from 'sentry/utils/usePageFilters';
 import {DetectorDetailsAssignee} from 'sentry/views/detectors/components/details/common/assignee';
 import {DetectorDetailsAutomations} from 'sentry/views/detectors/components/details/common/automations';
 import {DetectorExtraDetails} from 'sentry/views/detectors/components/details/common/extraDetails';
@@ -16,12 +18,24 @@ export function FallbackDetectorDetails({
   detector,
   project,
 }: FallbackDetectorDetailsProps) {
+  const {selection} = usePageFilters();
+  const {start, end, period} = selection.datetime;
+  const timeProps =
+    start && end
+      ? {
+          start: getUtcDateString(start),
+          end: getUtcDateString(end),
+        }
+      : {
+          statsPeriod: period,
+        };
+
   return (
     <DetailLayout>
       <DetectorDetailsHeader detector={detector} project={project} />
       <DetailLayout.Body>
         <DetailLayout.Main>
-          <DetectorDetailsOngoingIssues />
+          <DetectorDetailsOngoingIssues detectorId={detector.id} query={timeProps} />
           <DetectorDetailsAutomations detector={detector} />
         </DetailLayout.Main>
         <DetailLayout.Sidebar>

static/app/views/detectors/components/details/metric/chart.tsx

@@ -1,27 +1,23 @@
 import styled from '@emotion/styled';
 
-import {CompactSelect} from 'sentry/components/core/compactSelect';
 import {Flex} from 'sentry/components/core/layout';
 import type {MetricDetector} from 'sentry/types/workflowEngine/detectors';
-import {Dataset} from 'sentry/views/alerts/rules/metric/types';
+import type {TimePeriod} from 'sentry/views/alerts/rules/metric/types';
 import {MetricDetectorChart} from 'sentry/views/detectors/components/forms/metric/metricDetectorChart';
 import {getDetectorDataset} from 'sentry/views/detectors/components/forms/metric/metricFormData';
-import {useTimePeriodSelection} from 'sentry/views/detectors/hooks/useTimePeriodSelection';
 
 interface MetricDetectorDetailsChartProps {
   detector: MetricDetector;
+  statsPeriod: TimePeriod;
 }
 
-export function MetricDetectorDetailsChart({detector}: MetricDetectorDetailsChartProps) {
+export function MetricDetectorDetailsChart({
+  detector,
+  statsPeriod,
+}: MetricDetectorDetailsChartProps) {
   const dataSource = detector.dataSources[0];
   const snubaQuery = dataSource.queryObj?.snubaQuery;
 
-  const {selectedTimePeriod, setSelectedTimePeriod, timePeriodOptions} =
-    useTimePeriodSelection({
-      dataset: snubaQuery?.dataset ?? Dataset.ERRORS,
-      interval: snubaQuery?.timeWindow,
-    });
-
   if (!snubaQuery) {
     // Unlikely, helps narrow types
     return null;
@@ -39,12 +35,6 @@ export function MetricDetectorDetailsChart({detector}: MetricDetectorDetailsChar
 
   return (
     <Flex direction="column" gap="xl">
-      <CompactSelect
-        size="sm"
-        options={timePeriodOptions}
-        value={selectedTimePeriod}
-        onChange={opt => setSelectedTimePeriod(opt.value)}
-      />
       <ChartContainer>
         <ChartContainerBody>
           <MetricDetectorChart
@@ -56,7 +46,7 @@ export function MetricDetectorDetailsChart({detector}: MetricDetectorDetailsChar
             projectId={detector.projectId}
             conditions={conditions}
             detectionType={detectionType}
-            statsPeriod={selectedTimePeriod}
+            statsPeriod={statsPeriod}
             comparisonDelta={comparisonDelta}
           />
         </ChartContainerBody>

static/app/views/detectors/components/details/metric/index.tsx

@@ -1,25 +1,49 @@
+import {CompactSelect} from 'sentry/components/core/compactSelect';
 import DetailLayout from 'sentry/components/workflowEngine/layout/detail';
 import type {Project} from 'sentry/types/project';
 import type {MetricDetector} from 'sentry/types/workflowEngine/detectors';
+import {Dataset} from 'sentry/views/alerts/rules/metric/types';
 import {DetectorDetailsAutomations} from 'sentry/views/detectors/components/details/common/automations';
 import {DetectorDetailsHeader} from 'sentry/views/detectors/components/details/common/header';
 import {DetectorDetailsOngoingIssues} from 'sentry/views/detectors/components/details/common/ongoingIssues';
 import {MetricDetectorDetailsChart} from 'sentry/views/detectors/components/details/metric/chart';
 import {MetricDetectorDetailsSidebar} from 'sentry/views/detectors/components/details/metric/sidebar';
+import {useTimePeriodSelection} from 'sentry/views/detectors/hooks/useTimePeriodSelection';
 
 type MetricDetectorDetailsProps = {
   detector: MetricDetector;
   project: Project;
 };
 
 export function MetricDetectorDetails({detector, project}: MetricDetectorDetailsProps) {
+  const dataSource = detector.dataSources[0];
+  const snubaQuery = dataSource.queryObj?.snubaQuery;
+
+  const {selectedTimePeriod, setSelectedTimePeriod, timePeriodOptions} =
+    useTimePeriodSelection({
+      dataset: snubaQuery?.dataset ?? Dataset.ERRORS,
+      interval: snubaQuery?.timeWindow,
+    });
+
   return (
     <DetailLayout>
       <DetectorDetailsHeader detector={detector} project={project} />
       <DetailLayout.Body>
         <DetailLayout.Main>
-          <MetricDetectorDetailsChart detector={detector} />
-          <DetectorDetailsOngoingIssues />
+          <CompactSelect
+            size="sm"
+            options={timePeriodOptions}
+            value={selectedTimePeriod}
+            onChange={opt => setSelectedTimePeriod(opt.value)}
+          />
+          <MetricDetectorDetailsChart
+            detector={detector}
+            statsPeriod={selectedTimePeriod}
+          />
+          <DetectorDetailsOngoingIssues
+            detectorId={detector.id}
+            query={{statsPeriod: selectedTimePeriod}}
+          />
           <DetectorDetailsAutomations detector={detector} />
         </DetailLayout.Main>
         <DetailLayout.Sidebar>

static/app/views/detectors/components/details/uptime/index.spec.tsx

@@ -1,5 +1,6 @@
 import {AutomationFixture} from 'sentry-fixture/automations';
 import {UptimeDetectorFixture} from 'sentry-fixture/detectors';
+import {GroupFixture} from 'sentry-fixture/group';
 import {ProjectFixture} from 'sentry-fixture/project';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
@@ -18,6 +19,14 @@ describe('UptimeDetectorDetails', function () {
       method: 'GET',
       body: [AutomationFixture()],
     });
+    MockApiClient.addMockResponse({
+      url: `/organizations/org-slug/users/`,
+      body: [],
+    });
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/issues/?limit=5&query=is%3Aunresolved%20detector%3A3&statsPeriod=14d',
+      body: [GroupFixture()],
+    });
   });
 
   it('displays correct detector details', async function () {

static/app/views/detectors/components/details/uptime/index.tsx

@@ -1,4 +1,5 @@
 import {KeyValueTableRow} from 'sentry/components/keyValueTable';
+import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import DetailLayout from 'sentry/components/workflowEngine/layout/detail';
 import Section from 'sentry/components/workflowEngine/ui/section';
 import {t} from 'sentry/locale';
@@ -24,7 +25,8 @@ export function UptimeDetectorDetails({detector, project}: UptimeDetectorDetails
       <DetectorDetailsHeader detector={detector} project={project} />
       <DetailLayout.Body>
         <DetailLayout.Main>
-          <DetectorDetailsOngoingIssues />
+          <DatePageFilter />
+          <DetectorDetailsOngoingIssues detectorId={detector.id} />
           <DetectorDetailsAutomations detector={detector} />
         </DetailLayout.Main>
         <DetailLayout.Sidebar>

static/app/views/detectors/detail.spec.tsx

@@ -3,12 +3,13 @@ import {
   MetricDetectorFixture,
   SnubaQueryDataSourceFixture,
 } from 'sentry-fixture/detectors';
+import {GroupFixture} from 'sentry-fixture/group';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
 import {TeamFixture} from 'sentry-fixture/team';
 import {UserFixture} from 'sentry-fixture/user';
 
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import ProjectsStore from 'sentry/stores/projectsStore';
 import TeamStore from 'sentry/stores/teamStore';
@@ -57,6 +58,10 @@ describe('DetectorDetails', function () {
       ],
       match: [MockApiClient.matchQuery({id: ['1', '2']})],
     });
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/users/`,
+      body: [],
+    });
     MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/users/1/`,
       body: UserFixture(),
@@ -70,6 +75,10 @@ describe('DetectorDetails', function () {
         ],
       },
     });
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/issues/?limit=5&query=is%3Aunresolved%20detector%3A1&statsPeriod=9998m',
+      body: [GroupFixture()],
+    });
   });
 
   it('renders the detector details and snuba query', async function () {
@@ -122,5 +131,30 @@ describe('DetectorDetails', function () {
       expect(screen.getByText('Last Triggered')).toBeInTheDocument();
       expect(screen.getByText('Actions')).toBeInTheDocument();
     });
+
+    it('displays ongoing issues for the detector', async function () {
+      const {router} = render(<DetectorDetails />, {
+        organization,
+        initialRouterConfig,
+      });
+
+      // Verify ongoing issues section is displayed
+      expect(await screen.findByText('RequestError')).toBeInTheDocument();
+
+      // Verify the View All button links to the issues page with the correct query
+      const viewAllButton = screen.getByRole('button', {name: 'View All'});
+
+      await userEvent.click(viewAllButton);
+
+      // Check that navigation occurred to the issues page with the detector query
+      expect(router.location.pathname).toBe(
+        `/organizations/${organization.slug}/issues/`
+      );
+      expect(router.location.query).toEqual(
+        expect.objectContaining({
+          query: `is:unresolved detector:${snubaQueryDetector.id}`,
+        })
+      );
+    });
   });
 });