From 16ef9442c5e7893ec3efce1d3008d88ae05e063f Mon Sep 17 00:00:00 2001
From: Snigdha Sharma <snigdha.sharma@sentry.io>
Date: Wed, 8 Jan 2025 09:25:30 -0800
Subject: [PATCH] feat(metric-issues): Add detector details to sidebar (#82972)

![image](https://github.com/user-attachments/assets/a0b0b13d-75ae-4029-9daa-7ff236e20580)
---
 static/app/types/event.tsx                    |  5 ++++
 .../sidebar/metricIssueSidebarSection.tsx     | 26 +++++++++++++++++++
 .../streamline/sidebar/sidebar.tsx            |  8 ++++++
 3 files changed, 39 insertions(+)
 create mode 100644 static/app/views/issueDetails/streamline/sidebar/metricIssueSidebarSection.tsx

diff --git a/static/app/types/event.tsx b/static/app/types/event.tsx
index 9411791e5b4530..f6894d1e22dbae 100644
--- a/static/app/types/event.tsx
+++ b/static/app/types/event.tsx
@@ -613,6 +613,10 @@ export interface ThreadPoolInfoContext {
   [ThreadPoolInfoContextKey.AVAILABLE_COMPLETION_PORT_THREADS]: number;
 }
 
+export type MetricAlertContextType = {
+  alert_rule_id?: string;
+};
+
 export enum ProfileContextKey {
   PROFILE_ID = 'profile_id',
   PROFILER_ID = 'profiler_id',
@@ -657,6 +661,7 @@ export type EventContexts = {
   feedback?: Record<string, any>;
   flags?: Flags;
   memory_info?: MemoryInfoContext;
+  metric_alert?: MetricAlertContextType;
   missing_instrumentation?: MissingInstrumentationContext;
   os?: OSContext;
   otel?: OtelContext;
diff --git a/static/app/views/issueDetails/streamline/sidebar/metricIssueSidebarSection.tsx b/static/app/views/issueDetails/streamline/sidebar/metricIssueSidebarSection.tsx
new file mode 100644
index 00000000000000..ae9914c0de0a3c
--- /dev/null
+++ b/static/app/views/issueDetails/streamline/sidebar/metricIssueSidebarSection.tsx
@@ -0,0 +1,26 @@
+import {LinkButton} from 'sentry/components/button';
+import {Flex} from 'sentry/components/container/flex';
+import {t} from 'sentry/locale';
+import type {Event} from 'sentry/types/event';
+import useOrganization from 'sentry/utils/useOrganization';
+
+export function MetricIssueSidebarSection({event}: {event?: Event}) {
+  const organization = useOrganization();
+  const alert_rule_id = event?.contexts?.metric_alert?.alert_rule_id;
+
+  if (!alert_rule_id) {
+    return null;
+  }
+
+  return (
+    <Flex>
+      <LinkButton
+        aria-label={t('View detector details')}
+        href={`/organizations/${organization.slug}/alerts/rules/details/${alert_rule_id}/`}
+        style={{width: '100%'}}
+      >
+        {t('View detector details')}
+      </LinkButton>
+    </Flex>
+  );
+}
diff --git a/static/app/views/issueDetails/streamline/sidebar/sidebar.tsx b/static/app/views/issueDetails/streamline/sidebar/sidebar.tsx
index 380be6f458d896..e29a5737cfd722 100644
--- a/static/app/views/issueDetails/streamline/sidebar/sidebar.tsx
+++ b/static/app/views/issueDetails/streamline/sidebar/sidebar.tsx
@@ -16,6 +16,7 @@ import StreamlinedActivitySection from 'sentry/views/issueDetails/streamline/sid
 import {ExternalIssueList} from 'sentry/views/issueDetails/streamline/sidebar/externalIssueList';
 import FirstLastSeenSection from 'sentry/views/issueDetails/streamline/sidebar/firstLastSeenSection';
 import {MergedIssuesSidebarSection} from 'sentry/views/issueDetails/streamline/sidebar/mergedSidebarSection';
+import {MetricIssueSidebarSection} from 'sentry/views/issueDetails/streamline/sidebar/metricIssueSidebarSection';
 import PeopleSection from 'sentry/views/issueDetails/streamline/sidebar/peopleSection';
 import {SimilarIssuesSidebarSection} from 'sentry/views/issueDetails/streamline/sidebar/similarIssuesSidebarSection';
 import SolutionsSection from 'sentry/views/issueDetails/streamline/sidebar/solutionsSection';
@@ -44,6 +45,7 @@ export default function StreamlinedSidebar({group, event, project}: Props) {
 
   const showPeopleSection = group.participants.length > 0 || viewers.length > 0;
   const issueTypeConfig = getConfigForIssueType(group, group.project);
+  const showMetricIssueSection = event?.contexts?.metric_alert?.alert_rule_id;
 
   return (
     <Side>
@@ -89,6 +91,12 @@ export default function StreamlinedSidebar({group, event, project}: Props) {
           <MergedIssuesSidebarSection />
         </Fragment>
       )}
+      {showMetricIssueSection && (
+        <Fragment>
+          <StyledBreak />
+          <MetricIssueSidebarSection event={event} />
+        </Fragment>
+      )}
     </Side>
   );
 }