feat(workflow): View alert rule status in list (#25212)

Author: scttcper

docs-ui/components/alertBadge.stories.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import AlertBadge from 'app/views/alerts/alertBadge';
+import {IncidentStatus} from 'app/views/alerts/types';
+
+export default {
+  title: 'Features/Alerts/AlertBadge',
+  component: AlertBadge,
+  args: {
+    status: 0,
+    hideText: false,
+    isIssue: false,
+  },
+  argTypes: {
+    status: {
+      control: {
+        type: 'radio',
+        options: Object.values(IncidentStatus).filter(Number.isInteger),
+        labels: IncidentStatus,
+      },
+    },
+  },
+};
+
+export const Default = ({...args}) => <AlertBadge {...args} />;

src/sentry/api/serializers/models/alert_rule.py

@@ -8,6 +8,7 @@
     AlertRuleActivityType,
     AlertRuleExcludedProjects,
     AlertRuleTrigger,
+    Incident,
 )
 from sentry.models import ACTOR_TYPES, Rule, actor_type_to_class, actor_type_to_string
 from sentry.snuba.models import SnubaQueryEventType
@@ -144,15 +145,27 @@ def serialize(self, obj, attrs, user):
 
 
 class CombinedRuleSerializer(Serializer):
+    def __init__(self, expand=None):
+        self.expand = expand or []
+
     def get_attrs(self, item_list, user, **kwargs):
         results = super().get_attrs(item_list, user)
 
-        alert_rules = serialize([x for x in item_list if isinstance(x, AlertRule)], user=user)
+        alert_rules = [x for x in item_list if isinstance(x, AlertRule)]
+        incident_map = {}
+        if "latestIncident" in self.expand:
+            for incident in Incident.objects.filter(id__in=[x.incident_id for x in alert_rules]):
+                incident_map[incident.id] = serialize(incident, user=user)
+
+        serialized_alert_rules = serialize(alert_rules, user=user)
         rules = serialize([x for x in item_list if isinstance(x, Rule)], user=user)
 
         for item in item_list:
             if isinstance(item, AlertRule):
-                results[item] = alert_rules.pop(0)
+                alert_rule = serialized_alert_rules.pop(0)
+                if "latestIncident" in self.expand:
+                    alert_rule["latestIncident"] = incident_map.get(item.incident_id)
+                results[item] = alert_rule
             elif isinstance(item, Rule):
                 results[item] = rules.pop(0)
 

src/sentry/incidents/endpoints/organization_alert_rule_index.py

@@ -13,7 +13,8 @@
     CombinedQuerysetPaginator,
     OffsetPaginator,
 )
-from sentry.api.serializers import CombinedRuleSerializer, serialize
+from sentry.api.serializers import serialize
+from sentry.api.serializers.models.alert_rule import CombinedRuleSerializer
 from sentry.auth.superuser import is_active_superuser
 from sentry.incidents.endpoints.serializers import AlertRuleSerializer
 from sentry.incidents.models import AlertRule, Incident
@@ -102,6 +103,19 @@ def get(self, request, organization):
             alert_rules = alert_rules.filter(team_filter_query)
             issue_rules = issue_rules.filter(team_filter_query)
 
+        expand = request.GET.getlist("expand", [])
+        if "latestIncident" in expand:
+            alert_rules = alert_rules.annotate(
+                incident_id=Coalesce(
+                    Subquery(
+                        Incident.objects.filter(alert_rule=OuterRef("pk"))
+                        .order_by("-date_started")
+                        .values("id")[:1]
+                    ),
+                    Value("-1"),
+                )
+            )
+
         is_asc = request.GET.get("asc", False) == "1"
         sort_key = request.GET.getlist("sort", ["date_added"])
         rule_sort_key = [
@@ -142,7 +156,7 @@ def get(self, request, organization):
         return self.paginate(
             request,
             paginator_cls=CombinedQuerysetPaginator,
-            on_results=lambda x: serialize(x, request.user, CombinedRuleSerializer()),
+            on_results=lambda x: serialize(x, request.user, CombinedRuleSerializer(expand=expand)),
             default_per_page=25,
             intermediaries=[alert_rule_intermediary, rule_intermediary],
             desc=not is_asc,

src/sentry/static/sentry/app/components/sidebar/index.tsx

@@ -314,11 +314,14 @@ class Sidebar extends React.Component<Props, State> {
     );
 
     const alerts = hasOrganization && (
-      <Feature features={['incidents']}>
-        {({hasFeature}) => {
-          const alertsPath = hasFeature
-            ? `/organizations/${organization.slug}/alerts/`
-            : `/organizations/${organization.slug}/alerts/rules/`;
+      <Feature features={['incidents', 'alert-list']} requireAll={false}>
+        {({features}) => {
+          const hasIncidents = features.includes('incidents');
+          const hasAlertList = features.includes('alert-list');
+          const alertsPath =
+            hasIncidents && !hasAlertList
+              ? `/organizations/${organization.slug}/alerts/`
+              : `/organizations/${organization.slug}/alerts/rules/`;
           return (
             <SidebarItem
               {...sidebarItemProps}

src/sentry/static/sentry/app/components/sidebar/sidebarItem.tsx

@@ -95,7 +95,10 @@ const SidebarItem = ({
     (!hasPanel && router && to && location.pathname.startsWith(to)) ||
     (labelString === 'Discover' && location.pathname.includes('/discover/')) ||
     // TODO: this won't be necessary once we remove settingsHome
-    (labelString === 'Settings' && location.pathname.startsWith('/settings/'));
+    (labelString === 'Settings' && location.pathname.startsWith('/settings/')) ||
+    (labelString === 'Alerts' &&
+      location.pathname.includes('/alerts/') &&
+      !location.pathname.startsWith('/settings/'));
 
   const isActive = active || isActiveRouter;
   const isTop = orientation === 'top';

src/sentry/static/sentry/app/views/alerts/alertBadge.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import {IconCheckmark, IconFire, IconIssues, IconWarning} from 'app/icons';
+import {t} from 'app/locale';
+import space from 'app/styles/space';
+import {Color} from 'app/utils/theme';
+
+import {IncidentStatus} from './types';
+
+type Props = {
+  status?: IncidentStatus;
+  hideText?: boolean;
+  isIssue?: boolean;
+};
+
+function AlertBadge({status, hideText = false, isIssue}: Props) {
+  let statusText = t('Okay');
+  let Icon = IconCheckmark;
+  let color: Color = 'green300';
+  if (isIssue) {
+    statusText = t('Issue');
+    Icon = IconIssues;
+    color = 'gray300';
+  } else if (status === IncidentStatus.CRITICAL) {
+    statusText = t('Critical');
+    Icon = IconFire;
+    color = 'red300';
+  } else if (status === IncidentStatus.WARNING) {
+    statusText = t('Warning');
+    Icon = IconWarning;
+    color = 'yellow300';
+  }
+
+  return (
+    <Wrapper displayFlex={!hideText}>
+      <AlertIconWrapper color={color} icon={Icon}>
+        <Icon color="white" />
+      </AlertIconWrapper>
+
+      {!hideText && <IncidentStatusValue color={color}>{statusText}</IncidentStatusValue>}
+    </Wrapper>
+  );
+}
+
+export default AlertBadge;
+
+const Wrapper = styled('div')<{displayFlex: boolean}>`
+  display: ${p => (p.displayFlex ? `flex` : `block`)};
+  align-items: center;
+`;
+
+const AlertIconWrapper = styled('div')<{color: Color; icon: React.ReactNode}>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  /* icon warning needs to be treated differently to look visually centered */
+  line-height: ${p => (p.icon === IconWarning ? undefined : 1)};
+  left: 3px;
+  min-width: 30px;
+
+  &:before {
+    content: '';
+    position: absolute;
+    width: 22px;
+    height: 22px;
+    border-radius: ${p => p.theme.borderRadius};
+    background-color: ${p => p.theme[p.color]};
+    transform: rotate(45deg);
+  }
+
+  svg {
+    width: ${p => (p.icon === IconIssues ? '11px' : '13px')};
+    z-index: 1;
+  }
+`;
+
+const IncidentStatusValue = styled('div')<{color: Color}>`
+  margin-left: ${space(1)};
+  color: ${p => p.theme[p.color]};
+`;

src/sentry/static/sentry/app/views/alerts/list/header.tsx

@@ -30,6 +30,14 @@ const AlertHeader = ({router, organization, activeTab}: Props) => {
     navigateTo(`/settings/${organization.slug}/projects/:projectId/alerts/`, router);
   };
 
+  const alertRulesLink = (
+    <li className={activeTab === 'rules' ? 'active' : ''}>
+      <GlobalSelectionLink to={`/organizations/${organization.slug}/alerts/rules/`}>
+        {t('Alert Rules')}
+      </GlobalSelectionLink>
+    </li>
+  );
+
   return (
     <React.Fragment>
       <BorderlessHeader>
@@ -58,18 +66,35 @@ const AlertHeader = ({router, organization, activeTab}: Props) => {
       </BorderlessHeader>
       <TabLayoutHeader>
         <Layout.HeaderNavTabs underlined>
-          <Feature features={['incidents']} organization={organization}>
-            <li className={activeTab === 'stream' ? 'active' : ''}>
-              <GlobalSelectionLink to={`/organizations/${organization.slug}/alerts/`}>
-                {t('Metric Alerts')}
-              </GlobalSelectionLink>
-            </li>
+          <Feature features={['alert-list']} organization={organization}>
+            {({hasFeature}) =>
+              !hasFeature ? (
+                <React.Fragment>
+                  <Feature features={['incidents']} organization={organization}>
+                    <li className={activeTab === 'stream' ? 'active' : ''}>
+                      <GlobalSelectionLink
+                        to={`/organizations/${organization.slug}/alerts/`}
+                      >
+                        {t('Metric Alerts')}
+                      </GlobalSelectionLink>
+                    </li>
+                  </Feature>
+                  {alertRulesLink}
+                </React.Fragment>
+              ) : (
+                <React.Fragment>
+                  {alertRulesLink}
+                  <li className={activeTab === 'stream' ? 'active' : ''}>
+                    <GlobalSelectionLink
+                      to={`/organizations/${organization.slug}/alerts/`}
+                    >
+                      {t('History')}
+                    </GlobalSelectionLink>
+                  </li>
+                </React.Fragment>
+              )
+            }
           </Feature>
-          <li className={activeTab === 'rules' ? 'active' : ''}>
-            <GlobalSelectionLink to={`/organizations/${organization.slug}/alerts/rules/`}>
-              {t('Alert Rules')}
-            </GlobalSelectionLink>
-          </li>
         </Layout.HeaderNavTabs>
       </TabLayoutHeader>
     </React.Fragment>

src/sentry/static/sentry/app/views/alerts/rules/details/body.tsx

@@ -25,7 +25,6 @@ import overflowEllipsis from 'app/styles/overflowEllipsis';
 import space from 'app/styles/space';
 import {Actor, Organization, Project} from 'app/types';
 import Projects from 'app/utils/projects';
-import theme from 'app/utils/theme';
 import Timeline from 'app/views/alerts/rules/details/timeline';
 import {DATASET_EVENT_TYPE_FILTERS} from 'app/views/settings/incidentRules/constants';
 import {
@@ -36,6 +35,7 @@ import {
 } from 'app/views/settings/incidentRules/types';
 import {extractEventTypeFilterFromRule} from 'app/views/settings/incidentRules/utils/getEventTypeFilter';
 
+import AlertBadge from '../../alertBadge';
 import {Incident, IncidentStatus} from '../../types';
 
 import {API_INTERVAL_POINTS_LIMIT, TIME_OPTIONS, TimePeriodType} from './constants';
@@ -209,18 +209,6 @@ export default class DetailsBody extends React.Component<Props> {
     // get current status
     const activeIncident = incidents?.find(({dateClosed}) => !dateClosed);
     const status = activeIncident ? activeIncident.status : IncidentStatus.CLOSED;
-    let statusText = t('Okay');
-    let Icon = IconCheckmark;
-    let color: string = theme.green300;
-    if (status === IncidentStatus.CRITICAL) {
-      statusText = t('Critical');
-      Icon = IconFire;
-      color = theme.red300;
-    } else if (status === IncidentStatus.WARNING) {
-      statusText = t('Warning');
-      Icon = IconWarning;
-      color = theme.yellow300;
-    }
 
     const latestIncident = incidents?.length ? incidents[0] : null;
     // The date at which the alert was triggered or resolved
@@ -235,12 +223,7 @@ export default class DetailsBody extends React.Component<Props> {
         <div>
           <SidebarHeading noMargin>{t('Status')}</SidebarHeading>
           <ItemValue>
-            <AlertBadge color={color} icon={Icon}>
-              <AlertIconWrapper>
-                <Icon color="white" />
-              </AlertIconWrapper>
-            </AlertBadge>
-            <IncidentStatusValue color={color}>{statusText}</IncidentStatusValue>
+            <AlertBadge status={status} />
           </ItemValue>
         </div>
         <div>
@@ -442,41 +425,6 @@ const ItemValue = styled('div')`
   font-size: ${p => p.theme.fontSizeExtraLarge};
 `;
 
-const IncidentStatusValue = styled('div')<{color: string}>`
-  margin-left: 30px;
-  color: ${p => p.color};
-`;
-
-const AlertBadge = styled('div')<{color: string; icon: React.ReactNode}>`
-  display: flex;
-  position: absolute;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  /* icon warning needs to be treated differently to look visually centered */
-  line-height: ${p => (p.icon === IconWarning ? undefined : 1)};
-  left: 3px;
-
-  &:before {
-    content: '';
-    width: 20px;
-    height: 20px;
-    border-radius: ${p => p.theme.borderRadius};
-    background-color: ${p => p.color};
-    transform: rotate(45deg);
-  }
-`;
-
-const AlertIconWrapper = styled('div')`
-  position: absolute;
-
-  svg {
-    width: 13px;
-    position: relative;
-    top: 1px;
-  }
-`;
-
 const StatusContainer = styled('div')`
   display: grid;
   grid-template-columns: 50% 50%;