mirror of https://github.com/grafana/grafana
Alerting: improve insights UX (#75320)
* Fix legend for grafana missed iterations panel * Change panel titles capitalization * Change tooltip mode to "multi" for timeseries panels * Add panel tooltips * Change colors of series (red for firing, blue for neutral) * Remove unneeded import * Change panel title and firing alert colors * Change constant timeseries panels to stat * Avoid showing legend in panels with just one metric * Add eval duration / interval ratio panel * Fix legend * Fix lint * Rename panel titles * Make firing instances table entries have link styling * Fix betterer * Add section subheaders * Override colors and tooltip mode * Address latest feedback * Rename table to reflect we're showing rules data and not instances * Rework most fired rules panel to show numbers instead of trend * Improve legends and colors * Fix most fired rules panel * Missed Iterations: Override legend to display it in a more user friendly way * Change tab names * Position grafana-managed scenes under collapsible row * Show breakdown of alert instances state panels * Addressing UX feedback - Making stat panels display area - Change layout for grafana-managed panels - Refactor Duration/Interval ratio scene (make calculation directly in PromQL) * set no value as 0 in stats panels * Refactor color overriding to use a common function * fix missing legend for status panels (needed to override color) * Fix legends for Grafana alertmanager Notifications scenepull/75994/head
Virginia Cepeda
2 years ago
committed by
GitHub
parent
6842cc63ec
commit
1d2bdb8f75
@ -0,0 +1,48 @@ |
||||
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; |
||||
import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; |
||||
|
||||
import { overrideToFixedColor, PANEL_STYLES } from '../../home/Insights'; |
||||
|
||||
export function getGrafanaInstancesByStateScene( |
||||
timeRange: SceneTimeRange, |
||||
datasource: DataSourceRef, |
||||
panelTitle: string |
||||
) { |
||||
const query = new SceneQueryRunner({ |
||||
datasource, |
||||
queries: [ |
||||
{ |
||||
refId: 'A', |
||||
expr: 'sum by (state) (grafanacloud_grafana_instance_alerting_alerts)', |
||||
range: true, |
||||
legendFormat: '{{state}}', |
||||
}, |
||||
], |
||||
$timeRange: timeRange, |
||||
}); |
||||
|
||||
return new SceneFlexItem({ |
||||
...PANEL_STYLES, |
||||
height: '400px', |
||||
body: PanelBuilders.timeseries() |
||||
.setTitle(panelTitle) |
||||
.setDescription(panelTitle) |
||||
.setData(query) |
||||
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) |
||||
.setOption('tooltip', { mode: TooltipDisplayMode.Multi }) |
||||
.setOverrides((b) => |
||||
b |
||||
.matchFieldsWithName('alerting') |
||||
.overrideColor(overrideToFixedColor('alerting')) |
||||
.matchFieldsWithName('normal') |
||||
.overrideColor(overrideToFixedColor('normal')) |
||||
.matchFieldsWithName('pending') |
||||
.overrideColor(overrideToFixedColor('pending')) |
||||
.matchFieldsWithName('error') |
||||
.overrideColor(overrideToFixedColor('error')) |
||||
.matchFieldsWithName('nodata') |
||||
.overrideColor(overrideToFixedColor('nodata')) |
||||
) |
||||
.build(), |
||||
}); |
||||
} |
||||
@ -0,0 +1,35 @@ |
||||
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; |
||||
import { DataSourceRef } from '@grafana/schema'; |
||||
|
||||
import { overrideToFixedColor } from '../../home/Insights'; |
||||
|
||||
export function getInstanceStatByStatusScene( |
||||
timeRange: SceneTimeRange, |
||||
datasource: DataSourceRef, |
||||
panelTitle: string, |
||||
status: 'alerting' | 'pending' | 'nodata' | 'normal' | 'error' |
||||
) { |
||||
const query = new SceneQueryRunner({ |
||||
datasource, |
||||
queries: [ |
||||
{ |
||||
refId: 'A', |
||||
instant: true, |
||||
expr: `sum by (state) (grafanacloud_grafana_instance_alerting_alerts{state="${status}"})`, |
||||
legendFormat: '{{state}}', |
||||
}, |
||||
], |
||||
$timeRange: timeRange, |
||||
}); |
||||
|
||||
return new SceneFlexItem({ |
||||
height: '100%', |
||||
body: PanelBuilders.stat() |
||||
.setTitle(panelTitle) |
||||
.setDescription(panelTitle) |
||||
.setData(query) |
||||
.setOverrides((b) => b.matchFieldsWithName(status).overrideColor(overrideToFixedColor(status))) |
||||
.setNoValue('0') |
||||
.build(), |
||||
}); |
||||
} |
||||
@ -1,32 +0,0 @@ |
||||
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; |
||||
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; |
||||
|
||||
import { PANEL_STYLES } from '../../../home/Insights'; |
||||
|
||||
export function getGrafanaAlertmanagerInstancesByStateScene( |
||||
timeRange: SceneTimeRange, |
||||
datasource: DataSourceRef, |
||||
panelTitle: string |
||||
) { |
||||
const query = new SceneQueryRunner({ |
||||
datasource, |
||||
queries: [ |
||||
{ |
||||
refId: 'A', |
||||
expr: 'sum by (state) (grafanacloud_grafana_instance_alerting_alerts)', |
||||
range: true, |
||||
legendFormat: '{{state}}', |
||||
}, |
||||
], |
||||
$timeRange: timeRange, |
||||
}); |
||||
|
||||
return new SceneFlexItem({ |
||||
...PANEL_STYLES, |
||||
body: PanelBuilders.timeseries() |
||||
.setTitle(panelTitle) |
||||
.setData(query) |
||||
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) |
||||
.build(), |
||||
}); |
||||
} |
||||
@ -0,0 +1,53 @@ |
||||
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; |
||||
import { DataSourceRef, GraphDrawStyle, ThresholdsMode, TooltipDisplayMode } from '@grafana/schema'; |
||||
|
||||
import { PANEL_STYLES } from '../../../home/Insights'; |
||||
|
||||
export function getRuleGroupEvaluationDurationIntervalRatioScene( |
||||
timeRange: SceneTimeRange, |
||||
datasource: DataSourceRef, |
||||
panelTitle: string |
||||
) { |
||||
const query = new SceneQueryRunner({ |
||||
datasource, |
||||
queries: [ |
||||
{ |
||||
refId: 'A', |
||||
expr: `grafanacloud_instance_rule_group_last_duration_seconds{rule_group="$rule_group"} / grafanacloud_instance_rule_group_interval_seconds{rule_group="$rule_group"}`, |
||||
range: true, |
||||
legendFormat: 'duration / interval', |
||||
}, |
||||
], |
||||
$timeRange: timeRange, |
||||
}); |
||||
|
||||
return new SceneFlexItem({ |
||||
...PANEL_STYLES, |
||||
body: PanelBuilders.timeseries() |
||||
.setTitle(panelTitle) |
||||
.setDescription(panelTitle) |
||||
.setData(query) |
||||
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) |
||||
.setOption('tooltip', { mode: TooltipDisplayMode.Multi }) |
||||
.setOption('legend', { showLegend: false }) |
||||
.setUnit('percentunit') |
||||
.setThresholds({ |
||||
mode: ThresholdsMode.Percentage, |
||||
steps: [ |
||||
{ |
||||
color: 'green', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
color: 'red', |
||||
value: 80, |
||||
}, |
||||
{ |
||||
color: 'yellow', |
||||
value: 60, |
||||
}, |
||||
], |
||||
}) |
||||
.build(), |
||||
}); |
||||
} |
||||
Loading…
Reference in new issue