Alerting: Add option to show inactive alerts in alert list panel (#96888)

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

docs/sources/panels-visualizations/visualizations/alert-list/index.md

@@ -105,6 +105,7 @@ These options allow you to limit alerts shown to only those that match the query
 | Alert instance label | Filter alert instances using [label](ref:alert-label) querying. For example,`{severity="critical", instance=~"cluster-us-.+"}`. |
 | Datasource | Filter alerts from the selected data source. |
 | Folder | Filter alerts by the selected folder. Only alerts from dashboards in this folder are displayed. |
+| Show alerts with 0 instances | Filter for alert rules with no instances. Alert rules with 0 (zero) instances are hidden by default. You can choose to show them by toggling this switch. Because these rules have no instances, they remain hidden if the **Alert instance label** filter is configured. |
 
 ### Alert state filter options
 

public/app/plugins/panel/alertlist/UnifiedAlertList.tsx

@@ -323,7 +323,7 @@ function filterRules(props: PanelProps<UnifiedAlertListOptions>, rules: Combined
     );
   }
 
-  // Remove rules having 0 instances
+  // Remove rules having 0 instances unless explicitly configured
   // AlertInstances filters instances and we need to prevent situation
   // when we display a rule with 0 instances
   filteredRules = filteredRules.reduce<CombinedRuleWithLocation[]>((rules, rule) => {
@@ -337,7 +337,12 @@ function filterRules(props: PanelProps<UnifiedAlertListOptions>, rules: Combined
           alertingRule.alerts ?? []
         )
       : [];
-    if (filteredAlerts.length) {
+    if (
+      filteredAlerts.length ||
+      (alertingRule?.state === PromAlertingRuleState.Inactive &&
+        options.showInactiveAlerts &&
+        !options.alertInstanceLabelFilter.length)
+    ) {
       // We intentionally don't set alerts to filteredAlerts
       // because later we couldn't display that some alerts are hidden (ref AlertInstances filtering)
       rules.push(rule);

public/app/plugins/panel/alertlist/UnifiedalertList.test.tsx

@@ -113,6 +113,7 @@ const defaultOptions: UnifiedAlertListOptions = {
   alertInstanceLabelFilter: '',
   datasource: 'grafana',
   viewMode: ViewMode.List,
+  showInactiveAlerts: false,
 };
 
 const defaultProps: PanelProps<UnifiedAlertListOptions> = {

public/app/plugins/panel/alertlist/module.tsx

@@ -129,7 +129,7 @@ const unifiedAlertList = new PanelPlugin<UnifiedAlertListOptions>(UnifiedAlertLi
       showIf: (options) => options.datasource === GRAFANA_DATASOURCE_NAME || !Boolean(options.datasource),
       path: 'folder',
       name: 'Folder',
-      description: 'Filter for alerts in the selected folder (only for Grafana alerts)',
+      description: 'Filter for alerts in the selected folder (for Grafana-managed alert rules only)',
       id: 'folder',
       defaultValue: null,
       editor: function RenderFolderPicker(props) {
@@ -148,6 +148,14 @@ const unifiedAlertList = new PanelPlugin<UnifiedAlertListOptions>(UnifiedAlertLi
       },
       category: ['Filter'],
     })
+    .addBooleanSwitch({
+      path: 'showInactiveAlerts',
+      name: 'Show alerts with 0 instances',
+      description:
+        'Include alert rules which have 0 (zero) instances. Because these rules have no instances, they remain hidden if the Alert instance label filter is configured.',
+      defaultValue: false,
+      category: ['Filter'],
+    })
     .addBooleanSwitch({
       path: 'stateFilter.firing',
       name: 'Alerting / Firing',

public/app/plugins/panel/alertlist/types.ts

@@ -38,6 +38,7 @@ export interface AlertListOptions {
     pending: boolean;
   };
   folderId: number;
+  showInactiveAlerts: boolean;
 }
 
 export interface StateFilter {
@@ -62,4 +63,5 @@ export interface UnifiedAlertListOptions {
   alertInstanceLabelFilter: string;
   datasource: string;
   viewMode: ViewMode;
+  showInactiveAlerts: boolean;
 }

public/app/plugins/panel/alertlist/util.test.tsx

@@ -18,6 +18,7 @@ const defaultOption: UnifiedAlertListOptions = {
   alertInstanceLabelFilter: '',
   datasource: 'Alertmanager',
   viewMode: ViewMode.List,
+  showInactiveAlerts: false,
 };
 
 const alerts: Alert[] = [