feat(alerts): Add alert type filter frontend

Looks like this <img alt="clipboard.png" width="520" src="https://i.imgur.com/uNjbXcB.png" />
getsentry · Jan 21, 2025 · ed40f20 · ed40f20
1 parent 89301e6
commit ed40f20
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 1 deletion.
diff --git a/static/app/views/alerts/filterBar.tsx b/static/app/views/alerts/filterBar.tsx
@@ -9,13 +9,16 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 
 import TeamFilter from './list/rules/teamFilter';
-import {getQueryStatus, getTeamParams} from './utils';
+import {CombinedAlertType} from './types';
+import {getQueryAlertType, getQueryStatus, getTeamParams} from './utils';
 
 interface Props {
   location: Location<any>;
   onChangeFilter: (activeFilters: string[]) => void;
   onChangeSearch: (query: string) => void;
   hasStatusFilters?: boolean;
+  hasTypeFilter?: boolean;
+  onChangeAlertType?: (types: CombinedAlertType[]) => void;
   onChangeStatus?: (status: string) => void;
 }
 
@@ -24,16 +27,48 @@ function FilterBar({
   onChangeSearch,
   onChangeFilter,
   onChangeStatus,
+  onChangeAlertType,
   hasStatusFilters,
+  hasTypeFilter,
 }: Props) {
   const selectedTeams = getTeamParams(location.query.team);
   const selectedStatus = getQueryStatus(location.query.status);
+  const selectedAlertTypes = getQueryAlertType(location.query.alertType);
 
   return (
     <Wrapper>
       <FilterButtons gap={1.5}>
         <TeamFilter selectedTeams={selectedTeams} handleChangeFilter={onChangeFilter} />
         <ProjectPageFilter />
+        {hasTypeFilter && (
+          <CompactSelect
+            multiple
+            triggerLabel={selectedAlertTypes.length === 0 ? t('All') : undefined}
+            triggerProps={{
+              prefix: t('Alert Type'),
+            }}
+            options={[
+              {
+                value: CombinedAlertType.ISSUE,
+                label: t('Issue Alerts'),
+              },
+              {
+                value: CombinedAlertType.METRIC,
+                label: t('Metric Alerts'),
+              },
+              {
+                value: CombinedAlertType.UPTIME,
+                label: t('Uptime Monitors'),
+              },
+              {
+                value: CombinedAlertType.CRONS,
+                label: t('Cron Monitors'),
+              },
+            ]}
+            value={selectedAlertTypes}
+            onChange={value => onChangeAlertType?.(value.map(v => v.value))}
+          />
+        )}
         {hasStatusFilters && onChangeStatus && (
           <CompactSelect
             triggerProps={{

diff --git a/static/app/views/alerts/list/rules/alertRulesList.tsx b/static/app/views/alerts/list/rules/alertRulesList.tsx
@@ -111,6 +111,17 @@ function AlertRulesList() {
     });
   };
 
+  const handleChangeType = (alertType: CombinedAlertType[]) => {
+    const {cursor: _cursor, page: _page, ...currentQuery} = location.query;
+    router.push({
+      pathname: location.pathname,
+      query: {
+        ...currentQuery,
+        alertType,
+      },
+    });
+  };
+
   const handleOwnerChange = (
     projectId: string,
     rule: CombinedAlerts,
@@ -200,6 +211,8 @@ function AlertRulesList() {
               location={location}
               onChangeFilter={handleChangeFilter}
               onChangeSearch={handleChangeSearch}
+              onChangeAlertType={handleChangeType}
+              hasTypeFilter
             />
             <StyledPanelTable
               isLoading={isPending}

diff --git a/static/app/views/alerts/utils/index.tsx b/static/app/views/alerts/utils/index.tsx
@@ -218,3 +218,20 @@ export function getTeamParams(team?: string | string[]): string[] {
 
   return toArray(team);
 }
+
+/**
+ * Normalize a alert type string
+ */
+export function getQueryAlertType(alertType?: string | string[]): CombinedAlertType[] {
+  if (alertType === undefined) {
+    return [];
+  }
+
+  if (alertType === '') {
+    return [];
+  }
+
+  const validTypes = new Set(Object.values(CombinedAlertType));
+
+  return [...validTypes.intersection(new Set(toArray(alertType)))];
+}