feat(metric-issues): Add "correlated issues" section (#83353)

<img width="956" alt="image"
src="https://github.com/user-attachments/assets/8e06af3b-0499-4a6d-9c41-612c9856c80f"
/>

---------

Co-authored-by: Scott Cooper <[email protected]>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: 3 people

static/app/utils/issueTypeConfig/metricIssueConfig.tsx

@@ -28,6 +28,7 @@ const metricIssueConfig: IssueCategoryConfigMapping = {
     userFeedback: {enabled: false},
     usesIssuePlatform: true,
     stats: {enabled: false},
+    tags: {enabled: false},
     tagsTab: {enabled: false},
     issueSummary: {enabled: false},
   },

static/app/views/alerts/rules/metric/details/relatedIssues.tsx

@@ -29,9 +29,17 @@ interface Props {
   rule: MetricRule;
   timePeriod: TimePeriodType;
   query?: string;
+  skipHeader?: boolean;
 }
 
-function RelatedIssues({rule, organization, projects, query, timePeriod}: Props) {
+function RelatedIssues({
+  rule,
+  organization,
+  projects,
+  query,
+  timePeriod,
+  skipHeader,
+}: Props) {
   const router = useRouter();
 
   // Add environment to the query parameters to be picked up by GlobalSelectionLink
@@ -96,12 +104,14 @@ function RelatedIssues({rule, organization, projects, query, timePeriod}: Props)
 
   return (
     <Fragment>
-      <ControlsWrapper>
-        <StyledSectionHeading>{t('Related Issues')}</StyledSectionHeading>
-        <LinkButton data-test-id="issues-open" size="xs" to={issueSearch}>
-          {t('Open in Issues')}
-        </LinkButton>
-      </ControlsWrapper>
+      {!skipHeader && (
+        <ControlsWrapper>
+          <StyledSectionHeading>{t('Related Issues')}</StyledSectionHeading>
+          <LinkButton data-test-id="issues-open" size="xs" to={issueSearch}>
+            {t('Open in Issues')}
+          </LinkButton>
+        </ControlsWrapper>
+      )}
 
       <TableWrapper>
         <GroupList

static/app/views/issueDetails/correlatedIssues.tsx

@@ -0,0 +1,134 @@
+import {Fragment, useMemo} from 'react';
+import moment from 'moment-timezone';
+
+import {LinkButton} from 'sentry/components/button';
+import {DateTime} from 'sentry/components/dateTime';
+import {t} from 'sentry/locale';
+import type {Event} from 'sentry/types/event';
+import type {Group} from 'sentry/types/group';
+import type {Organization} from 'sentry/types/organization';
+import type {Project} from 'sentry/types/project';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import type {TimePeriodType} from 'sentry/views/alerts/rules/metric/details/constants';
+import RelatedIssues from 'sentry/views/alerts/rules/metric/details/relatedIssues';
+import {
+  Dataset,
+  type MetricRule,
+  TimePeriod,
+} from 'sentry/views/alerts/rules/metric/types';
+import {extractEventTypeFilterFromRule} from 'sentry/views/alerts/rules/metric/utils/getEventTypeFilter';
+import {isCrashFreeAlert} from 'sentry/views/alerts/rules/metric/utils/isCrashFreeAlert';
+import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
+import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
+
+interface CorrelatedIssuesProps {
+  event: Event;
+  group: Group;
+  organization: Organization;
+  project: Project;
+}
+
+export default function CorrelatedIssues({
+  organization,
+  event,
+  group,
+  project,
+}: CorrelatedIssuesProps) {
+  const ruleId = event.contexts?.metric_alert?.alert_rule_id;
+  const {data: rule} = useApiQuery<MetricRule>(
+    [
+      `/organizations/${organization.slug}/alert-rules/${ruleId}/`,
+      {
+        query: {
+          expand: 'latestIncident',
+        },
+      },
+    ],
+    {
+      staleTime: Infinity,
+      retry: false,
+    }
+  );
+
+  const openPeriod = group.openPeriods?.[0];
+  const timePeriod = useMemo((): TimePeriodType | null => {
+    if (!openPeriod) {
+      return null;
+    }
+    const start = openPeriod.start;
+    let end = openPeriod.end;
+    if (!end) {
+      end = new Date().toISOString();
+    }
+    return {
+      start,
+      end,
+      period: TimePeriod.SEVEN_DAYS,
+      usingPeriod: false,
+      label: t('Custom time'),
+      display: (
+        <Fragment>
+          <DateTime date={moment.utc(start)} />
+          {' — '}
+          <DateTime date={moment.utc(end)} />
+        </Fragment>
+      ),
+      custom: true,
+    };
+  }, [openPeriod]);
+
+  if (!rule || !timePeriod) {
+    return null;
+  }
+
+  const {dataset, query} = rule;
+
+  if (![Dataset.METRICS, Dataset.SESSIONS, Dataset.ERRORS].includes(dataset)) {
+    return null;
+  }
+
+  const queryParams = {
+    start: timePeriod.start,
+    end: timePeriod.end,
+    groupStatsPeriod: 'auto',
+    ...(rule.environment ? {environment: rule.environment} : {}),
+    sort: rule.aggregate === 'count_unique(user)' ? 'user' : 'freq',
+    query,
+    project: [project.id],
+  };
+  const issueSearch = {
+    pathname: `/organizations/${organization.slug}/issues/`,
+    query: queryParams,
+  };
+
+  const actions = (
+    <LinkButton data-test-id="issues-open" size="xs" to={issueSearch}>
+      {t('Open in Issues')}
+    </LinkButton>
+  );
+
+  return (
+    <InterimSection
+      title={t('Correlated Issues')}
+      type={SectionKey.CORRELATED_ISSUES}
+      help={t('A list of issues that are correlated with this event')}
+      actions={actions}
+    >
+      <RelatedIssues
+        organization={organization}
+        rule={rule}
+        projects={[project]}
+        timePeriod={timePeriod}
+        query={
+          dataset === Dataset.ERRORS
+            ? // Not using (query) AND (event.type:x) because issues doesn't support it yet
+              `${extractEventTypeFilterFromRule(rule)} ${query}`.trim()
+            : isCrashFreeAlert(dataset)
+              ? `${query} error.unhandled:true`.trim()
+              : undefined
+        }
+        skipHeader
+      />
+    </InterimSection>
+  );
+}

static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx

@@ -70,6 +70,7 @@ import QuickTraceQuery from 'sentry/utils/performance/quickTrace/quickTraceQuery
 import {getReplayIdFromEvent} from 'sentry/utils/replays/getReplayIdFromEvent';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import CorrelatedIssues from 'sentry/views/issueDetails/correlatedIssues';
 import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
 import {EventDetails} from 'sentry/views/issueDetails/streamline/eventDetails';
 import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
@@ -221,6 +222,14 @@ export function EventDetailsContent({
           project={project}
         />
       )}
+      {event.contexts?.metric_alert?.alert_rule_id && (
+        <CorrelatedIssues
+          organization={organization}
+          group={group}
+          event={event}
+          project={project}
+        />
+      )}
 
       <EventEvidence event={event} group={group} project={project} />
       {defined(eventEntries[EntryType.MESSAGE]) && (

static/app/views/issueDetails/streamline/context.tsx

@@ -19,6 +19,7 @@ export const enum SectionKey {
   UPTIME = 'uptime', // Only Uptime issues
   DOWNTIME = 'downtime',
   CRON_TIMELINE = 'cron-timeline', // Only Cron issues
+  CORRELATED_ISSUES = 'correlated-issues', // Only Metric issues
 
   HIGHLIGHTS = 'highlights',
   RESOURCES = 'resources', // Position controlled by flag