diff --git a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx b/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx index 5f8d9f49c33..91cb9a8db4c 100644 --- a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx +++ b/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) { {dispatched && loading && !haveResults && } {noAlertsMessage &&
{noAlertsMessage}
}
- {props.options.groupMode === GroupMode.Custom && haveResults && ( + {props.options.viewMode === ViewMode.Stat && haveResults && ( + + )} + {props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Custom && haveResults && ( )} - {props.options.groupMode === GroupMode.Default && haveResults && ( + {props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Default && haveResults && ( )}
diff --git a/public/app/plugins/panel/alertlist/module.tsx b/public/app/plugins/panel/alertlist/module.tsx index fae016c8469..84d8cbb36e8 100644 --- a/public/app/plugins/panel/alertlist/module.tsx +++ b/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(AlertList) const unifiedAlertList = new PanelPlugin(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', diff --git a/public/app/plugins/panel/alertlist/types.ts b/public/app/plugins/panel/alertlist/types.ts index ec79c8b1e0f..c94f5de97e1 100644 --- a/public/app/plugins/panel/alertlist/types.ts +++ b/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;