2021-03-11 08:53:13 -06:00
|
|
|
import React from 'react';
|
|
|
|
import { PanelPlugin } from '@grafana/data';
|
|
|
|
import { TagsInput } from '@grafana/ui';
|
|
|
|
import { AlertList } from './AlertList';
|
2021-05-31 07:08:05 -05:00
|
|
|
import { UnifiedAlertList } from './UnifiedAlertList';
|
2021-09-30 23:20:25 -05:00
|
|
|
import { AlertListOptions, ShowOption, SortOrder, UnifiedAlertListOptions } from './types';
|
2021-03-11 08:53:13 -06:00
|
|
|
import { alertListPanelMigrationHandler } from './AlertListMigrationHandler';
|
2021-12-16 12:17:24 -06:00
|
|
|
import { config, DataSourcePicker } from '@grafana/runtime';
|
2021-05-31 07:08:05 -05:00
|
|
|
import { RuleFolderPicker } from 'app/features/alerting/unified/components/rule-editor/RuleFolderPicker';
|
2021-09-30 23:20:25 -05:00
|
|
|
import {
|
|
|
|
ALL_FOLDER,
|
|
|
|
GENERAL_FOLDER,
|
|
|
|
ReadonlyFolderPicker,
|
|
|
|
} from '../../../core/components/Select/ReadonlyFolderPicker/ReadonlyFolderPicker';
|
2021-10-25 06:55:06 -05:00
|
|
|
import { AlertListSuggestionsSupplier } from './suggestions';
|
2021-03-11 08:53:13 -06:00
|
|
|
|
|
|
|
function showIfCurrentState(options: AlertListOptions) {
|
|
|
|
return options.showOptions === ShowOption.Current;
|
|
|
|
}
|
|
|
|
|
2021-05-31 07:08:05 -05:00
|
|
|
const alertList = new PanelPlugin<AlertListOptions>(AlertList)
|
2021-03-11 08:53:13 -06:00
|
|
|
.setPanelOptions((builder) => {
|
|
|
|
builder
|
|
|
|
.addSelect({
|
|
|
|
name: 'Show',
|
|
|
|
path: 'showOptions',
|
|
|
|
settings: {
|
|
|
|
options: [
|
|
|
|
{ label: 'Current state', value: ShowOption.Current },
|
|
|
|
{ label: 'Recent state changes', value: ShowOption.RecentChanges },
|
|
|
|
],
|
|
|
|
},
|
|
|
|
defaultValue: ShowOption.Current,
|
|
|
|
category: ['Options'],
|
|
|
|
})
|
|
|
|
.addNumberInput({
|
|
|
|
name: 'Max items',
|
|
|
|
path: 'maxItems',
|
|
|
|
defaultValue: 10,
|
|
|
|
category: ['Options'],
|
|
|
|
})
|
|
|
|
.addSelect({
|
|
|
|
name: 'Sort order',
|
|
|
|
path: 'sortOrder',
|
|
|
|
settings: {
|
|
|
|
options: [
|
|
|
|
{ label: 'Alphabetical (asc)', value: SortOrder.AlphaAsc },
|
|
|
|
{ label: 'Alphabetical (desc)', value: SortOrder.AlphaDesc },
|
|
|
|
{ label: 'Importance', value: SortOrder.Importance },
|
|
|
|
{ label: 'Time (asc)', value: SortOrder.TimeAsc },
|
|
|
|
{ label: 'Time (desc)', value: SortOrder.TimeDesc },
|
|
|
|
],
|
|
|
|
},
|
|
|
|
defaultValue: SortOrder.AlphaAsc,
|
|
|
|
category: ['Options'],
|
|
|
|
})
|
|
|
|
.addBooleanSwitch({
|
|
|
|
path: 'dashboardAlerts',
|
|
|
|
name: 'Alerts from this dashboard',
|
|
|
|
defaultValue: false,
|
|
|
|
category: ['Options'],
|
|
|
|
})
|
|
|
|
.addTextInput({
|
|
|
|
path: 'alertName',
|
|
|
|
name: 'Alert name',
|
|
|
|
defaultValue: '',
|
|
|
|
category: ['Filter'],
|
|
|
|
showIf: showIfCurrentState,
|
|
|
|
})
|
|
|
|
.addTextInput({
|
|
|
|
path: 'dashboardTitle',
|
|
|
|
name: 'Dashboard title',
|
|
|
|
defaultValue: '',
|
|
|
|
category: ['Filter'],
|
|
|
|
showIf: showIfCurrentState,
|
|
|
|
})
|
|
|
|
.addCustomEditor({
|
|
|
|
path: 'folderId',
|
|
|
|
name: 'Folder',
|
|
|
|
id: 'folderId',
|
|
|
|
defaultValue: null,
|
2021-09-30 23:20:25 -05:00
|
|
|
editor: function RenderFolderPicker({ value, onChange }) {
|
2021-03-11 08:53:13 -06:00
|
|
|
return (
|
2021-09-30 23:20:25 -05:00
|
|
|
<ReadonlyFolderPicker
|
|
|
|
initialFolderId={value}
|
|
|
|
onChange={(folder) => onChange(folder?.id)}
|
|
|
|
extraFolders={[ALL_FOLDER, GENERAL_FOLDER]}
|
2021-03-11 08:53:13 -06:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
category: ['Filter'],
|
|
|
|
showIf: showIfCurrentState,
|
|
|
|
})
|
|
|
|
.addCustomEditor({
|
|
|
|
id: 'tags',
|
|
|
|
path: 'tags',
|
|
|
|
name: 'Tags',
|
|
|
|
description: '',
|
|
|
|
defaultValue: [],
|
|
|
|
editor(props) {
|
|
|
|
return <TagsInput tags={props.value} onChange={props.onChange} />;
|
|
|
|
},
|
|
|
|
category: ['Filter'],
|
|
|
|
showIf: showIfCurrentState,
|
|
|
|
})
|
|
|
|
.addBooleanSwitch({
|
|
|
|
path: 'stateFilter.ok',
|
|
|
|
name: 'Ok',
|
|
|
|
defaultValue: false,
|
|
|
|
category: ['State filter'],
|
|
|
|
showIf: showIfCurrentState,
|
|
|
|
})
|
|
|
|
.addBooleanSwitch({
|
|
|
|
path: 'stateFilter.paused',
|
|
|
|
name: 'Paused',
|
|
|
|
defaultValue: false,
|
|
|
|
category: ['State filter'],
|
|
|
|
showIf: showIfCurrentState,
|
|
|
|
})
|
|
|
|
.addBooleanSwitch({
|
|
|
|
path: 'stateFilter.no_data',
|
|
|
|
name: 'No data',
|
|
|
|
defaultValue: false,
|
|
|
|
category: ['State filter'],
|
|
|
|
showIf: showIfCurrentState,
|
|
|
|
})
|
|
|
|
.addBooleanSwitch({
|
|
|
|
path: 'stateFilter.execution_error',
|
|
|
|
name: 'Execution error',
|
|
|
|
defaultValue: false,
|
|
|
|
category: ['State filter'],
|
|
|
|
showIf: showIfCurrentState,
|
|
|
|
})
|
|
|
|
.addBooleanSwitch({
|
|
|
|
path: 'stateFilter.alerting',
|
|
|
|
name: 'Alerting',
|
|
|
|
defaultValue: false,
|
|
|
|
category: ['State filter'],
|
|
|
|
showIf: showIfCurrentState,
|
|
|
|
})
|
|
|
|
.addBooleanSwitch({
|
|
|
|
path: 'stateFilter.pending',
|
|
|
|
name: 'Pending',
|
|
|
|
defaultValue: false,
|
|
|
|
category: ['State filter'],
|
|
|
|
showIf: showIfCurrentState,
|
|
|
|
});
|
|
|
|
})
|
2021-10-25 06:55:06 -05:00
|
|
|
.setMigrationHandler(alertListPanelMigrationHandler)
|
|
|
|
.setSuggestionsSupplier(new AlertListSuggestionsSupplier());
|
2021-05-31 07:08:05 -05:00
|
|
|
|
|
|
|
const unifiedAlertList = new PanelPlugin<UnifiedAlertListOptions>(UnifiedAlertList).setPanelOptions((builder) => {
|
|
|
|
builder
|
|
|
|
.addNumberInput({
|
|
|
|
name: 'Max items',
|
|
|
|
path: 'maxItems',
|
2021-12-13 04:54:36 -06:00
|
|
|
description: 'Maximum alerts to display',
|
2021-05-31 07:08:05 -05:00
|
|
|
defaultValue: 20,
|
|
|
|
category: ['Options'],
|
|
|
|
})
|
|
|
|
.addSelect({
|
|
|
|
name: 'Sort order',
|
|
|
|
path: 'sortOrder',
|
2021-12-13 04:54:36 -06:00
|
|
|
description: 'Sort order of alerts and alert instances',
|
2021-05-31 07:08:05 -05:00
|
|
|
settings: {
|
|
|
|
options: [
|
|
|
|
{ label: 'Alphabetical (asc)', value: SortOrder.AlphaAsc },
|
|
|
|
{ label: 'Alphabetical (desc)', value: SortOrder.AlphaDesc },
|
|
|
|
{ label: 'Importance', value: SortOrder.Importance },
|
|
|
|
{ label: 'Time (asc)', value: SortOrder.TimeAsc },
|
|
|
|
{ label: 'Time (desc)', value: SortOrder.TimeDesc },
|
|
|
|
],
|
|
|
|
},
|
|
|
|
defaultValue: SortOrder.AlphaAsc,
|
|
|
|
category: ['Options'],
|
|
|
|
})
|
|
|
|
.addBooleanSwitch({
|
|
|
|
path: 'dashboardAlerts',
|
|
|
|
name: 'Alerts from this dashboard',
|
2021-12-13 04:54:36 -06:00
|
|
|
description: 'Show alerts from this dashboard',
|
2021-05-31 07:08:05 -05:00
|
|
|
defaultValue: false,
|
|
|
|
category: ['Options'],
|
|
|
|
})
|
|
|
|
.addBooleanSwitch({
|
|
|
|
path: 'showInstances',
|
|
|
|
name: 'Show alert instances',
|
2021-12-13 04:54:36 -06:00
|
|
|
description: 'Show individual alert instances for multi-dimensional rules',
|
2021-05-31 07:08:05 -05:00
|
|
|
defaultValue: false,
|
|
|
|
category: ['Options'],
|
|
|
|
})
|
|
|
|
.addTextInput({
|
|
|
|
path: 'alertName',
|
|
|
|
name: 'Alert name',
|
2021-12-13 04:54:36 -06:00
|
|
|
description: 'Filter for alerts containing this text',
|
|
|
|
defaultValue: '',
|
|
|
|
category: ['Filter'],
|
|
|
|
})
|
|
|
|
.addTextInput({
|
|
|
|
path: 'alertInstanceLabelFilter',
|
|
|
|
name: 'Alert instance label',
|
|
|
|
description: 'Filter alert instances using label querying, ex: {severity="critical", instance=~"cluster-us-.+"}',
|
2021-05-31 07:08:05 -05:00
|
|
|
defaultValue: '',
|
|
|
|
category: ['Filter'],
|
|
|
|
})
|
|
|
|
.addCustomEditor({
|
|
|
|
path: 'folder',
|
|
|
|
name: 'Folder',
|
2021-12-13 04:54:36 -06:00
|
|
|
description: 'Filter for alerts in the selected folder',
|
2021-05-31 07:08:05 -05:00
|
|
|
id: 'folder',
|
|
|
|
defaultValue: null,
|
|
|
|
editor: function RenderFolderPicker(props) {
|
|
|
|
return (
|
|
|
|
<RuleFolderPicker
|
|
|
|
{...props}
|
|
|
|
enableReset={true}
|
|
|
|
onChange={({ title, id }) => {
|
|
|
|
return props.onChange({ title, id });
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
category: ['Filter'],
|
|
|
|
})
|
2021-12-16 12:17:24 -06:00
|
|
|
.addCustomEditor({
|
|
|
|
path: 'datasource',
|
|
|
|
name: 'Datasource',
|
|
|
|
description: 'Filter alerts from selected datasource',
|
|
|
|
id: 'datasource',
|
|
|
|
defaultValue: null,
|
|
|
|
editor: function RenderDatasourcePicker(props) {
|
|
|
|
return (
|
|
|
|
<DataSourcePicker
|
|
|
|
{...props}
|
|
|
|
type={['prometheus', 'loki', 'grafana']}
|
|
|
|
noDefault
|
|
|
|
current={props.value}
|
|
|
|
onChange={(ds) => props.onChange(ds.name)}
|
|
|
|
onClear={() => props.onChange('')}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
category: ['Filter'],
|
|
|
|
})
|
2021-05-31 07:08:05 -05:00
|
|
|
.addBooleanSwitch({
|
|
|
|
path: 'stateFilter.firing',
|
2021-12-16 12:17:24 -06:00
|
|
|
name: 'Alerting / Firing',
|
2021-05-31 07:08:05 -05:00
|
|
|
defaultValue: true,
|
2021-12-13 04:54:36 -06:00
|
|
|
category: ['Alert state filter'],
|
2021-05-31 07:08:05 -05:00
|
|
|
})
|
|
|
|
.addBooleanSwitch({
|
|
|
|
path: 'stateFilter.pending',
|
|
|
|
name: 'Pending',
|
|
|
|
defaultValue: true,
|
2021-12-13 04:54:36 -06:00
|
|
|
category: ['Alert state filter'],
|
2021-05-31 07:08:05 -05:00
|
|
|
})
|
|
|
|
.addBooleanSwitch({
|
|
|
|
path: 'stateFilter.inactive',
|
|
|
|
name: 'Inactive',
|
|
|
|
defaultValue: false,
|
2021-12-13 04:54:36 -06:00
|
|
|
category: ['Alert state filter'],
|
|
|
|
})
|
|
|
|
.addBooleanSwitch({
|
2021-12-16 12:17:24 -06:00
|
|
|
path: 'stateFilter.noData',
|
2021-12-13 04:54:36 -06:00
|
|
|
name: 'No Data',
|
|
|
|
defaultValue: false,
|
2021-12-16 12:17:24 -06:00
|
|
|
category: ['Alert state filter'],
|
2021-12-13 04:54:36 -06:00
|
|
|
})
|
|
|
|
.addBooleanSwitch({
|
2021-12-16 12:17:24 -06:00
|
|
|
path: 'stateFilter.normal',
|
2021-12-13 04:54:36 -06:00
|
|
|
name: 'Normal',
|
|
|
|
defaultValue: false,
|
2021-12-16 12:17:24 -06:00
|
|
|
category: ['Alert state filter'],
|
2021-12-13 04:54:36 -06:00
|
|
|
})
|
|
|
|
.addBooleanSwitch({
|
2021-12-16 12:17:24 -06:00
|
|
|
path: 'stateFilter.error',
|
2021-12-13 04:54:36 -06:00
|
|
|
name: 'Error',
|
|
|
|
defaultValue: true,
|
2021-12-16 12:17:24 -06:00
|
|
|
category: ['Alert state filter'],
|
2021-05-31 07:08:05 -05:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2021-09-29 09:16:40 -05:00
|
|
|
export const plugin = config.unifiedAlertingEnabled ? unifiedAlertList : alertList;
|