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

There is a new button

![clipboard.png](https://i.imgur.com/Uw7vWKH.png)

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/'
+ );
  });
 });

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]', {

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