feat(uptime): Add link to "Uptime Detection Rule" (#76632)

There is a new button ![clipboard.png](https://i.imgur.com/Uw7vWKH.png)
getsentry · Aug 27, 2024 · 0d3a753 · 0d3a753
1 parent 5e6bc97
commit 0d3a753
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 6 deletions.
diff --git a/static/app/components/events/interfaces/uptime/uptimeDataSection.spec.tsx b/static/app/components/events/interfaces/uptime/uptimeDataSection.spec.tsx
@@ -1,31 +1,35 @@
+import {EventFixture} from 'sentry-fixture/event';
 import {GroupFixture} from 'sentry-fixture/group';
 import {ProjectFixture} from 'sentry-fixture/project';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import {UptimeDataSection} from 'sentry/components/events/interfaces/uptime/uptimeDataSection';
 import {
   type GroupActivity,
   GroupActivityType,
   GroupStatus,
   IssueCategory,
 } from 'sentry/types/group';
 
+import {UptimeDataSection} from './uptimeDataSection';
+
 describe('Uptime Data Section', function () {
   it('displays downtime according to activity', function () {
+    const project = ProjectFixture();
+
     const activity: GroupActivity[] = [
       {
         data: {},
         id: '1',
         dateCreated: '2024-06-20T20:36:51.884284Z',
-        project: ProjectFixture(),
+        project,
         type: GroupActivityType.FIRST_SEEN,
       },
       {
         data: {},
         id: '2',
         dateCreated: '2024-06-21T20:36:51.884284Z',
-        project: ProjectFixture(),
+        project,
         type: GroupActivityType.SET_RESOLVED,
       },
     ];
@@ -36,8 +40,22 @@ describe('Uptime Data Section', function () {
       activity,
     });
 
-    render(<UptimeDataSection group={group} />);
+    const event = EventFixture({
+      tags: [
+        {
+          key: 'uptime_rule',
+          value: '1234',
+        },
+      ],
+    });
+
+    render(<UptimeDataSection event={event} group={group} project={project} />);
 
     expect(screen.getByText('1 day')).toBeInTheDocument();
+
+    expect(screen.getByRole('button', {name: 'Uptime Alert Rule'})).toHaveAttribute(
+      'href',
+      '/organizations/org-slug/alerts/rules/uptime/project-slug/1234/details/'
+    );
   });
 });
diff --git a/static/app/components/events/interfaces/uptime/uptimeDataSection.tsx b/static/app/components/events/interfaces/uptime/uptimeDataSection.tsx
@@ -1,16 +1,24 @@
 import {useRef} from 'react';
 import styled from '@emotion/styled';
 
+import {LinkButton} from 'sentry/components/button';
 import DateTime from 'sentry/components/dateTime';
 import Duration from 'sentry/components/duration';
 import {EventDataSection} from 'sentry/components/events/eventDataSection';
 import {Tooltip} from 'sentry/components/tooltip';
+import {IconSettings} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import type {Event} from 'sentry/types/event';
 import {type Group, GroupActivityType, GroupStatus} from 'sentry/types/group';
+import type {Project} from 'sentry/types/project';
+import normalizeUrl from 'sentry/utils/url/normalizeUrl';
+import useOrganization from 'sentry/utils/useOrganization';
 
 interface Props {
+  event: Event;
   group: Group;
+  project: Project;
 }
 
 const DOWNTIME_START_TYPES = [
@@ -20,7 +28,8 @@ const DOWNTIME_START_TYPES = [
 
 const DOWNTIME_TERMINAL_TYPES = [GroupActivityType.SET_RESOLVED];
 
-export function UptimeDataSection({group}: Props) {
+export function UptimeDataSection({group, event, project}: Props) {
+  const organization = useOrganization();
   const nowRef = useRef(new Date());
   const downtimeStartActivity = group.activity.findLast(activity =>
     DOWNTIME_START_TYPES.includes(activity.type)
@@ -53,11 +62,26 @@ export function UptimeDataSection({group}: Props) {
     </Tooltip>
   );
 
+  const alertRuleId = event.tags.find(tag => tag.key === 'uptime_rule')?.value;
+
   return (
     <EventDataSection
       title={t('Downtime Information')}
       type="downtime"
       help={t('Information about the detected downtime')}
+      actions={
+        alertRuleId !== undefined && (
+          <LinkButton
+            icon={<IconSettings />}
+            size="xs"
+            to={normalizeUrl(
+              `/organizations/${organization.slug}/alerts/rules/uptime/${project.slug}/${alertRuleId}/details/`
+            )}
+          >
+            {t('Uptime Alert Rule')}
+          </LinkButton>
+        )
+      }
     >
       {isResolved
         ? tct('Domain was down for [duration]', {

diff --git a/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx b/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx
@@ -220,7 +220,7 @@ export function EventDetailsContent({
         />
       ) : null}
       {group.issueCategory === IssueCategory.UPTIME && (
-        <UptimeDataSection group={group} />
+        <UptimeDataSection event={event} project={project} group={group} />
       )}
       {group.issueCategory === IssueCategory.CRON && (
         <CronTimelineSection