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

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,131 @@
+import {Fragment, useEffect, useState} 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 type {TimePeriodType} from 'sentry/views/alerts/rules/metric/details/constants';
+import RelatedIssues from 'sentry/views/alerts/rules/metric/details/relatedIssues';
+import {Dataset, 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 {fetchAlertRule} from 'sentry/views/alerts/utils/apiCalls';
+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 [rule, setRule] = useState<any>(null);
+  const ruleId = event.contexts?.metric_alert?.alert_rule_id;
+  useEffect(() => {
+    async function getRuleData() {
+      if (!ruleId) {
+        return;
+      }
+      const ruleData = await fetchAlertRule(organization.slug, ruleId, {
+        expand: 'latestIncident',
+      });
+      setRule(ruleData);
+    }
+    getRuleData();
+  }, [ruleId, organization.slug]);
+
+  const openPeriod = group.openPeriods?.[0];
+  if (!ruleId || !openPeriod) {
+    return null;
+  }
+
+  const start = openPeriod.start;
+  let end = openPeriod.end;
+  if (!end) {
+    end = moment().toISOString();
+  }
+  const getTimePeriod = (): TimePeriodType => {
+    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,
+    };
+  };
+
+  const timePeriod = getTimePeriod();
+
+  if (!rule || !timePeriod) {
+    return null;
+  }
+
+  const {dataset, query} = rule;
+
+  const queryParams = {
+    start,
+    end,
+    groupStatsPeriod: 'auto',
+    limit: 5,
+    ...(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}
+    >
+      {[Dataset.METRICS, Dataset.SESSIONS, Dataset.ERRORS].includes(dataset) && (
+        <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