Alert list panel: Add view mode "Stat" (#53281)

* add stat mode

* remove unused import

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

@@ -4,7 +4,17 @@ import React, { useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { GrafanaTheme2, PanelProps } from '@grafana/data';
-import { Alert, CustomScrollbar, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
+import {
+  Alert,
+  BigValue,
+  BigValueGraphMode,
+  BigValueJustifyMode,
+  BigValueTextMode,
+  CustomScrollbar,
+  LoadingPlaceholder,
+  useStyles2,
+} from '@grafana/ui';
+import { config } from 'app/core/config';
 import { contextSrv } from 'app/core/services/context_srv';
 import alertDef from 'app/features/alerting/state/alertDef';
 import { useUnifiedAlertingSelector } from 'app/features/alerting/unified/hooks/useUnifiedAlertingSelector';
@@ -22,7 +32,7 @@ import { AccessControlAction } from 'app/types';
 import { PromRuleWithLocation } from 'app/types/unified-alerting';
 import { PromAlertingRuleState } from 'app/types/unified-alerting-dto';
 
-import { GroupMode, SortOrder, UnifiedAlertListOptions } from './types';
+import { GroupMode, SortOrder, UnifiedAlertListOptions, ViewMode } from './types';
 import GroupedModeView from './unified-alerting/GroupedView';
 import UngroupedModeView from './unified-alerting/UngroupedView';
 import { filterAlerts } from './util';
@@ -86,10 +96,21 @@ export function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
         {dispatched && loading && !haveResults && <LoadingPlaceholder text="Loading..." />}
         {noAlertsMessage && <div className={styles.noAlertsMessage}>{noAlertsMessage}</div>}
         <section>
-          {props.options.groupMode === GroupMode.Custom && haveResults && (
+          {props.options.viewMode === ViewMode.Stat && haveResults && (
+            <BigValue
+              width={props.width}
+              height={props.height}
+              graphMode={BigValueGraphMode.None}
+              textMode={BigValueTextMode.Auto}
+              justifyMode={BigValueJustifyMode.Auto}
+              theme={config.theme2}
+              value={{ text: `${rules.length}`, numeric: rules.length }}
+            />
+          )}
+          {props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Custom && haveResults && (
             <GroupedModeView rules={rules} options={props.options} />
           )}
-          {props.options.groupMode === GroupMode.Default && haveResults && (
+          {props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Default && haveResults && (
             <UngroupedModeView rules={rules} options={props.options} />
           )}
         </section>

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

@@ -16,7 +16,7 @@ import { alertListPanelMigrationHandler } from './AlertListMigrationHandler';
 import { GroupBy } from './GroupByWithLoading';
 import { UnifiedAlertList } from './UnifiedAlertList';
 import { AlertListSuggestionsSupplier } from './suggestions';
-import { AlertListOptions, GroupMode, ShowOption, SortOrder, UnifiedAlertListOptions } from './types';
+import { AlertListOptions, GroupMode, ShowOption, SortOrder, UnifiedAlertListOptions, ViewMode } from './types';
 
 function showIfCurrentState(options: AlertListOptions) {
   return options.showOptions === ShowOption.Current;
@@ -155,6 +155,19 @@ const alertList = new PanelPlugin<AlertListOptions>(AlertList)
 
 const unifiedAlertList = new PanelPlugin<UnifiedAlertListOptions>(UnifiedAlertList).setPanelOptions((builder) => {
   builder
+    .addRadio({
+      path: 'viewMode',
+      name: 'View mode',
+      description: 'Toggle between list view and stat view',
+      defaultValue: ViewMode.List,
+      settings: {
+        options: [
+          { label: 'List', value: ViewMode.List },
+          { label: 'Stat', value: ViewMode.Stat },
+        ],
+      },
+      category: ['Options'],
+    })
     .addRadio({
       path: 'groupMode',
       name: 'Group mode',

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

@@ -18,6 +18,11 @@ export enum GroupMode {
   Custom = 'custom',
 }
 
+export enum ViewMode {
+  List = 'list',
+  Stat = 'stat',
+}
+
 export interface AlertListOptions {
   showOptions: ShowOption;
   maxItems: number;
@@ -58,6 +63,7 @@ export interface UnifiedAlertListOptions {
   stateFilter: StateFilter;
   alertInstanceLabelFilter: string;
   datasource: string;
+  viewMode: ViewMode;
 }
 
 export type GroupedRules = Map<string, Alert[]>;