IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Alerting: improve insights UX (#75320)

Browse Source 
* 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 scene
This commit is contained in:
Virginia Cepeda 2023-10-04 17:29:05 -03:00 committed by GitHub
parent 6842cc63ec
commit 1d2bdb8f75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 543 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/features/alerting/unified/home/Home.tsx
View File

@ -8,7 +8,7 @@ import { PluginPageContext, PluginPageContextType } from 'app/features/plugins/c
import { isLocalDevEnv, isOpenSourceEdition } from '../utils/misc';
import { getOverviewScene, WelcomeHeader } from './GettingStarted';
import { getGrafanaScenes } from './Insights';
import { getInsightsScenes } from './Insights';
let homeApp: SceneApp | undefined;
@ -27,12 +27,12 @@ export function getHomeApp(insightsEnabled: boolean) {
hideFromBreadcrumbs: true,
tabs: [
new SceneAppPage({
title: 'Grafana',
title: 'Insights',
url: '/alerting/home/insights',
getScene: getGrafanaScenes,
getScene: getInsightsScenes,
}),
new SceneAppPage({
title: 'Overview',
title: 'Get started',
url: '/alerting/home/overview',
getScene: getOverviewScene,
}),

218
public/app/features/alerting/unified/home/Insights.tsx
View File

@ -1,29 +1,33 @@
import React from 'react';
import {
EmbeddedScene,
NestedScene,
QueryVariable,
SceneFlexItem,
SceneFlexLayout,
SceneReactObject,
SceneTimeRange,
SceneVariableSet,
VariableValueSelectors,
} from '@grafana/scenes';
import { getGrafanaEvalDurationScene } from '../insights/grafana/EvalDurationScene';
import { getGrafanaInstancesByStateScene } from '../insights/grafana/AlertsByStateScene';
import { getGrafanaEvalSuccessVsFailuresScene } from '../insights/grafana/EvalSuccessVsFailuresScene';
import { getFiringGrafanaAlertsScene } from '../insights/grafana/Firing';
import { getGrafanaInstancesByStateScene } from '../insights/grafana/InstancesByState';
import { getGrafanaInstancesPercentageByStateScene } from '../insights/grafana/InstancesPercentageByState';
import { getInstanceStatByStatusScene } from '../insights/grafana/InstanceStatusScene';
import { getGrafanaMissedIterationsScene } from '../insights/grafana/MissedIterationsScene';
import { getMostFiredInstancesScene } from '../insights/grafana/MostFiredInstancesTable';
import { getPausedGrafanaAlertsScene } from '../insights/grafana/Paused';
import { getGrafanaAlertmanagerInstancesByStateScene } from '../insights/grafana/alertmanager/AlertsByStateScene';
import { getGrafanaRulesByEvaluationScene } from '../insights/grafana/RulesByEvaluation';
import { getGrafanaRulesByEvaluationPercentageScene } from '../insights/grafana/RulesByEvaluationPercentage';
import { getGrafanaAlertmanagerNotificationsScene } from '../insights/grafana/alertmanager/NotificationsScene';
import { getGrafanaAlertmanagerSilencesScene } from '../insights/grafana/alertmanager/SilencesByStateScene';
import { getAlertsByStateScene } from '../insights/mimir/AlertsByState';
import { getInvalidConfigScene } from '../insights/mimir/InvalidConfig';
import { getNotificationsScene } from '../insights/mimir/Notifications';
import { getSilencesScene } from '../insights/mimir/Silences';
import { getRuleGroupEvaluationDurationIntervalRatioScene } from '../insights/mimir/perGroup/RuleGroupEvaluationDurationIntervalRatioScene';
import { getRuleGroupEvaluationDurationScene } from '../insights/mimir/perGroup/RuleGroupEvaluationDurationScene';
import { getRuleGroupEvaluationsScene } from '../insights/mimir/perGroup/RuleGroupEvaluationsScene';
import { getRuleGroupIntervalScene } from '../insights/mimir/perGroup/RuleGroupIntervalScene';
@ -33,7 +37,7 @@ import { getFiringCloudAlertsScene } from '../insights/mimir/rules/Firing';
import { getInstancesByStateScene } from '../insights/mimir/rules/InstancesByState';
import { getInstancesPercentageByStateScene } from '../insights/mimir/rules/InstancesPercentageByState';
import { getMissedIterationsScene } from '../insights/mimir/rules/MissedIterationsScene';
import { getMostFiredInstancesScene as getMostFiredCloudInstances } from '../insights/mimir/rules/MostFiredInstances';
import { getMostFiredRulesScene } from '../insights/mimir/rules/MostFiredRules';
import { getPendingCloudAlertsScene } from '../insights/mimir/rules/Pending';
const ashDs = {
@ -51,41 +55,44 @@ const grafanaCloudPromDs = {
uid: 'grafanacloud-prom',
};
const SERIES_COLORS = {
alerting: 'red',
firing: 'red',
active: 'red',
missed: 'red',
failed: 'red',
pending: 'yellow',
nodata: 'blue',
'active evaluation': 'blue',
normal: 'green',
success: 'green',
error: 'orange',
};
export function overrideToFixedColor(key: keyof typeof SERIES_COLORS) {
return {
mode: 'fixed',
fixedColor: SERIES_COLORS[key],
};
}
export const PANEL_STYLES = { minHeight: 300 };
const THIS_WEEK_TIME_RANGE = new SceneTimeRange({ from: 'now-1w', to: 'now' });
const LAST_WEEK_TIME_RANGE = new SceneTimeRange({ from: 'now-2w', to: 'now-1w' });
export function getGrafanaScenes() {
export function SectionSubheader({ children }: React.PropsWithChildren) {
return <div>{children}</div>;
}
export function getInsightsScenes() {
return new EmbeddedScene({
body: new SceneFlexLayout({
direction: 'column',
children: [
new SceneFlexLayout({
children: [
getMostFiredInstancesScene(THIS_WEEK_TIME_RANGE, ashDs, 'Top 10 firing instances this week'),
getFiringGrafanaAlertsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Firing'),
getPausedGrafanaAlertsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Paused'),
],
}),
new SceneFlexLayout({
children: [
getGrafanaInstancesByStateScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Count of alert instances by state'),
getGrafanaInstancesPercentageByStateScene(
THIS_WEEK_TIME_RANGE,
cloudUsageDs,
'% of Alert Instances by State'
),
],
}),
new SceneFlexLayout({
children: [
getGrafanaEvalSuccessVsFailuresScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Evaluation Success vs Failures'),
getGrafanaMissedIterationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Iterations Missed'),
],
}),
new SceneFlexLayout({
children: [getGrafanaEvalDurationScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Evaluation Duration')],
new SceneFlexItem({
ySizing: 'content',
body: getGrafanaManagedScenes(),
}),
new SceneFlexItem({
ySizing: 'content',
@ -108,6 +115,95 @@ export function getGrafanaScenes() {
});
}
function getGrafanaManagedScenes() {
return new NestedScene({
title: 'Grafana-managed rules',
canCollapse: true,
isCollapsed: false,
body: new SceneFlexLayout({
direction: 'column',
children: [
new SceneFlexItem({
body: new SceneReactObject({
component: SectionSubheader,
props: { children: <div>Grafana-managed rules</div> },
}),
}),
new SceneFlexLayout({
direction: 'column',
children: [
new SceneFlexLayout({
children: [
getMostFiredInstancesScene(THIS_WEEK_TIME_RANGE, ashDs, 'Top 10 firing instances this week'),
getFiringGrafanaAlertsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Firing rules'),
getPausedGrafanaAlertsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Paused rules'),
],
}),
new SceneFlexLayout({
children: [
getGrafanaInstancesByStateScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Alert instances by state'),
new SceneFlexLayout({
height: '400px',
direction: 'column',
children: [
new SceneFlexLayout({
height: '400px',
children: [
getInstanceStatByStatusScene(
THIS_WEEK_TIME_RANGE,
cloudUsageDs,
'Alerting instances',
'alerting'
),
getInstanceStatByStatusScene(
THIS_WEEK_TIME_RANGE,
cloudUsageDs,
'Pending instances',
'pending'
),
],
}),
new SceneFlexLayout({
children: [
getInstanceStatByStatusScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'No data instances', 'nodata'),
getInstanceStatByStatusScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Error instances', 'error'),
],
}),
],
}),
],
}),
new SceneFlexLayout({
children: [
getGrafanaRulesByEvaluationScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Alert rule evaluation'),
getGrafanaRulesByEvaluationPercentageScene(
THIS_WEEK_TIME_RANGE,
cloudUsageDs,
'% of alert rule evaluation'
),
],
}),
new SceneFlexLayout({
children: [
getGrafanaEvalSuccessVsFailuresScene(
THIS_WEEK_TIME_RANGE,
cloudUsageDs,
'Evaluation success vs failures'
),
getGrafanaMissedIterationsScene(
THIS_WEEK_TIME_RANGE,
cloudUsageDs,
'Iterations missed per evaluation group'
),
],
}),
],
}),
],
}),
});
}
function getGrafanaAlertmanagerScenes() {
return new NestedScene({
title: 'Grafana Alertmanager',
@ -116,14 +212,17 @@ function getGrafanaAlertmanagerScenes() {
body: new SceneFlexLayout({
direction: 'column',
children: [
new SceneFlexLayout({
children: [
getGrafanaAlertmanagerInstancesByStateScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Alerts by State'),
getGrafanaAlertmanagerNotificationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Notifications'),
],
new SceneFlexItem({
body: new SceneReactObject({
component: SectionSubheader,
props: { children: <div>Grafana Alertmanager</div> },
}),
}),
new SceneFlexLayout({
children: [getGrafanaAlertmanagerSilencesScene(LAST_WEEK_TIME_RANGE, cloudUsageDs, 'Silences')],
children: [
getGrafanaAlertmanagerNotificationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Notifications'),
getGrafanaAlertmanagerSilencesScene(LAST_WEEK_TIME_RANGE, cloudUsageDs, 'Silences'),
],
}),
],
}),
@ -138,9 +237,15 @@ function getCloudScenes() {
body: new SceneFlexLayout({
direction: 'column',
children: [
new SceneFlexItem({
body: new SceneReactObject({
component: SectionSubheader,
props: { children: <div>Mimir Alertmanager</div> },
}),
}),
new SceneFlexLayout({
children: [
getAlertsByStateScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Alerts by State'),
getAlertsByStateScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Alerts by state'),
getNotificationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Notifications'),
],
}),
@ -163,11 +268,17 @@ function getMimirManagedRulesScenes() {
body: new SceneFlexLayout({
direction: 'column',
children: [
new SceneFlexItem({
body: new SceneReactObject({
component: SectionSubheader,
props: { children: <div>Mimir-managed rules</div> },
}),
}),
new SceneFlexLayout({
children: [
getMostFiredCloudInstances(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, 'Top 10 firing instance this week'),
getFiringCloudAlertsScene(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, 'Firing'),
getPendingCloudAlertsScene(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, 'Pending'),
getMostFiredRulesScene(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, 'Top 10 firing rules this week'),
getFiringCloudAlertsScene(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, 'Firing instances'),
getPendingCloudAlertsScene(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, 'Pending instances'),
],
}),
new SceneFlexLayout({
@ -176,14 +287,14 @@ function getMimirManagedRulesScenes() {
getInstancesPercentageByStateScene(
THIS_WEEK_TIME_RANGE,
grafanaCloudPromDs,
'% of Alert Instances by State'
'% of alert instances by State'
),
],
}),
new SceneFlexLayout({
children: [
getEvalSuccessVsFailuresScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Evaluation Success vs Failures'),
getMissedIterationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Iterations Missed'),
getEvalSuccessVsFailuresScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Evaluation success vs failures'),
getMissedIterationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Iterations missed'),
],
}),
],
@ -206,16 +317,27 @@ function getMimirManagedRulesPerGroupScenes() {
body: new SceneFlexLayout({
direction: 'column',
children: [
new SceneFlexItem({
body: new SceneReactObject({
component: SectionSubheader,
props: { children: <div>Mimir-managed Rules - Per Rule Group</div> },
}),
}),
new SceneFlexLayout({
children: [
getRuleGroupEvaluationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rule Group Evaluation'),
getRuleGroupIntervalScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rule Group Interval'),
getRuleGroupEvaluationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rule group evaluation'),
getRuleGroupIntervalScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rule group interval'),
],
}),
new SceneFlexLayout({
children: [
getRuleGroupEvaluationDurationScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rule Group Evaluation Duration'),
getRulesPerGroupScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rules per Group'),
getRuleGroupEvaluationDurationScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rule group evaluation duration'),
getRulesPerGroupScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rules per group'),
getRuleGroupEvaluationDurationIntervalRatioScene(
THIS_WEEK_TIME_RANGE,
cloudUsageDs,
'Evaluation duration / interval ratio'
),
],
}),
],

48
public/app/features/alerting/unified/insights/grafana/AlertsByStateScene.tsx Normal file
View File

@ -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(),
});
}

13
public/app/features/alerting/unified/insights/grafana/EvalDurationScene.tsx
View File

@ -1,7 +1,7 @@
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema';
import { PANEL_STYLES } from '../../home/Insights';
import { overrideToFixedColor, PANEL_STYLES } from '../../home/Insights';
export function getGrafanaEvalDurationScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
const query = new SceneQueryRunner({
@ -27,8 +27,17 @@ export function getGrafanaEvalDurationScene(timeRange: SceneTimeRange, datasourc
...PANEL_STYLES,
body: PanelBuilders.timeseries()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setOption('tooltip', { mode: TooltipDisplayMode.Multi })
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setOverrides((b) =>
b
.matchFieldsWithName('success')
.overrideColor(overrideToFixedColor('success'))
.matchFieldsWithName('failed')
.overrideColor(overrideToFixedColor('failed'))
)
.build(),
});
}

13
public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx
View File

@ -1,7 +1,7 @@
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema';
import { PANEL_STYLES } from '../../home/Insights';
import { overrideToFixedColor, PANEL_STYLES } from '../../home/Insights';
export function getGrafanaEvalSuccessVsFailuresScene(
timeRange: SceneTimeRange,
@ -31,8 +31,17 @@ export function getGrafanaEvalSuccessVsFailuresScene(
...PANEL_STYLES,
body: PanelBuilders.timeseries()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setOption('tooltip', { mode: TooltipDisplayMode.Multi })
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setOverrides((b) =>
b
.matchFieldsWithName('success')
.overrideColor(overrideToFixedColor('success'))
.matchFieldsWithName('failed')
.overrideColor(overrideToFixedColor('failed'))
)
.build(),
});
}

2
public/app/features/alerting/unified/insights/grafana/Firing.tsx
View File

@ -21,6 +21,7 @@ export function getFiringGrafanaAlertsScene(timeRange: SceneTimeRange, datasourc
...PANEL_STYLES,
body: PanelBuilders.stat()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setThresholds({
mode: ThresholdsMode.Absolute,
@ -35,6 +36,7 @@ export function getFiringGrafanaAlertsScene(timeRange: SceneTimeRange, datasourc
},
],
})
.setNoValue('0')
.build(),
});
}

7
public/app/features/alerting/unified/insights/grafana/FiringAlertsPercentage.tsx
View File

@ -61,6 +61,11 @@ export function getFiringAlertsScene(timeRange: SceneTimeRange, datasource: Data
return new SceneFlexItem({
...PANEL_STYLES,
body: PanelBuilders.stat().setTitle(panelTitle).setData(transformation).setUnit('percent').build(),
body: PanelBuilders.stat()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(transformation)
.setUnit('percent')
.build(),
});
}

1
public/app/features/alerting/unified/insights/grafana/FiringAlertsRate.tsx
View File

@ -21,6 +21,7 @@ export function getFiringAlertsRateScene(timeRange: SceneTimeRange, datasource:
...PANEL_STYLES,
body: PanelBuilders.timeseries()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setCustomFieldConfig('fillOpacity', 10)

35
public/app/features/alerting/unified/insights/grafana/InstanceStatusScene.tsx Normal file
View File

@ -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(),
});
}

47
public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx
View File

@ -1,5 +1,15 @@
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { Observable, map } from 'rxjs';
import { DataFrame } from '@grafana/data';
import {
CustomTransformOperator,
PanelBuilders,
SceneDataTransformer,
SceneFlexItem,
SceneQueryRunner,
SceneTimeRange,
} from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema';
import { PANEL_STYLES } from '../../home/Insights';
@ -15,17 +25,46 @@ export function getGrafanaMissedIterationsScene(
refId: 'A',
expr: 'sum by (rule_group) (grafanacloud_instance_rule_group_iterations_missed_total:rate5m)',
range: true,
legendFormat: 'missed',
legendFormat: '{{rule_group}}',
},
],
$timeRange: timeRange,
});
const legendTransformation: CustomTransformOperator = () => (source: Observable<DataFrame[]>) => {
return source.pipe(
map((data: DataFrame[]) => {
return data.map((frame: DataFrame) => {
return {
...frame,
fields: frame.fields.map((field) => {
const displayNameFromDs = field.config.displayNameFromDS || '';
const matches = displayNameFromDs.match(/\/rules\/\d+\/(\w+);(\w+)/);
if (matches) {
field.config.displayName = `Folder: ${matches[1]} - Group: ${matches[2]}`;
}
return field;
}),
};
});
})
);
};
const transformation = new SceneDataTransformer({
$data: query,
transformations: [legendTransformation],
});
return new SceneFlexItem({
...PANEL_STYLES,
body: PanelBuilders.timeseries()
.setTitle(panelTitle)
.setData(query)
.setDescription(panelTitle)
.setData(transformation)
.setOption('tooltip', { mode: TooltipDisplayMode.Multi })
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.build(),
});

40
public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx
View File

@ -1,7 +1,8 @@
import { css } from '@emotion/css';
import React from 'react';
import { Observable, map } from 'rxjs';
import { DataFrame, Field } from '@grafana/data';
import { DataFrame, Field, GrafanaTheme2 } from '@grafana/data';
import {
CustomTransformOperator,
PanelBuilders,
@ -11,7 +12,7 @@ import {
SceneTimeRange,
} from '@grafana/scenes';
import { DataSourceRef } from '@grafana/schema';
import { Icon, Link } from '@grafana/ui';
import { Link, useStyles2 } from '@grafana/ui';
import { PANEL_STYLES } from '../../home/Insights';
import { createUrl } from '../../utils/url';
@ -36,11 +37,7 @@ export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource
values: field.values.map((value, index) => {
const ruleUIDs = frame.fields.find((field) => field.name === 'ruleUID');
const ruleUID = ruleUIDs?.values[index];
return (
<Link key={value} target="_blank" href={createUrl(`/alerting/grafana/${ruleUID}/view`)}>
{value} <Icon name="external-link-alt" />
</Link>
);
return <RuleLink key={value} value={value} ruleUID={ruleUID} />;
}),
};
};
@ -92,7 +89,7 @@ export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource
'Value #A': 1,
},
renameByName: {
labels_alertname: 'Alert Name',
labels_alertname: 'Alert rule name',
'Value #A': 'Fires this week',
},
},
@ -102,6 +99,31 @@ export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource
return new SceneFlexItem({
...PANEL_STYLES,
body: PanelBuilders.table().setTitle(panelTitle).setData(transformation).build(),
body: PanelBuilders.table()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(transformation)
.setNoValue('No new alerts fired last week')
.build(),
});
}
export function RuleLink({ value, ruleUID }: { value: string; ruleUID: string }) {
const getStyles = (theme: GrafanaTheme2) => ({
link: css({
'& > a': {
color: theme.colors.text.link,
},
}),
});
const styles = useStyles2(getStyles);
return (
<div className={styles.link}>
<Link target="_blank" href={createUrl(`/alerting/grafana/${ruleUID}/view`)}>
{value}
</Link>
</div>
);
}

2
public/app/features/alerting/unified/insights/grafana/MostFiredRulesTable.tsx
View File

@ -54,6 +54,6 @@ export function getMostFiredRulesScene(timeRange: SceneTimeRange, datasource: Da
return new SceneFlexItem({
...PANEL_STYLES,
body: PanelBuilders.table().setTitle(panelTitle).setData(transformation).build(),
body: PanelBuilders.table().setTitle(panelTitle).setDescription(panelTitle).setData(transformation).build(),
});
}

2
public/app/features/alerting/unified/insights/grafana/MostFiringLabels.tsx
View File

@ -52,6 +52,6 @@ export function getMostFiredLabelsScene(timeRange: SceneTimeRange, datasource: D
return new SceneFlexItem({
...PANEL_STYLES,
body: PanelBuilders.table().setTitle(panelTitle).setData(query).build(),
body: PanelBuilders.table().setTitle(panelTitle).setDescription(panelTitle).setData(query).build(),
});
}

2
public/app/features/alerting/unified/insights/grafana/Paused.tsx
View File

@ -21,6 +21,7 @@ export function getPausedGrafanaAlertsScene(timeRange: SceneTimeRange, datasourc
...PANEL_STYLES,
body: PanelBuilders.stat()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setThresholds({
mode: ThresholdsMode.Absolute,
@ -35,6 +36,7 @@ export function getPausedGrafanaAlertsScene(timeRange: SceneTimeRange, datasourc
},
],
})
.setNoValue('0')
.build(),
});
}

13
public/app/features/alerting/unified/insights/grafana/InstancesByState.tsx → public/app/features/alerting/unified/insights/grafana/RulesByEvaluation.tsx
View File

@ -1,9 +1,9 @@
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema';
import { PANEL_STYLES } from '../../home/Insights';
import { overrideToFixedColor, PANEL_STYLES } from '../../home/Insights';
export function getGrafanaInstancesByStateScene(
export function getGrafanaRulesByEvaluationScene(
timeRange: SceneTimeRange,
datasource: DataSourceRef,
panelTitle: string
@ -15,7 +15,7 @@ export function getGrafanaInstancesByStateScene(
refId: 'A',
expr: 'sum by (state) (grafanacloud_grafana_instance_alerting_rule_group_rules)',
range: true,
legendFormat: '{{state}}',
legendFormat: '{{state}} evaluation',
},
],
$timeRange: timeRange,
@ -25,8 +25,13 @@ export function getGrafanaInstancesByStateScene(
...PANEL_STYLES,
body: PanelBuilders.timeseries()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setOption('tooltip', { mode: TooltipDisplayMode.Multi })
.setOverrides((b) =>
b.matchFieldsWithName('active evaluation').overrideColor(overrideToFixedColor('active evaluation'))
)
.build(),
});
}

27
public/app/features/alerting/unified/insights/grafana/InstancesPercentageByState.tsx → public/app/features/alerting/unified/insights/grafana/RulesByEvaluationPercentage.tsx
View File

@ -1,10 +1,9 @@
import { ThresholdsMode } from '@grafana/data';
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema';
import { PANEL_STYLES } from '../../home/Insights';
import { overrideToFixedColor, PANEL_STYLES } from '../../home/Insights';
export function getGrafanaInstancesPercentageByStateScene(
export function getGrafanaRulesByEvaluationPercentageScene(
timeRange: SceneTimeRange,
datasource: DataSourceRef,
panelTitle: string
@ -16,7 +15,7 @@ export function getGrafanaInstancesPercentageByStateScene(
refId: 'A',
expr: 'sum by (state) (grafanacloud_grafana_instance_alerting_rule_group_rules) / ignoring(state) group_left sum(grafanacloud_grafana_instance_alerting_rule_group_rules)',
range: true,
legendFormat: '{{alertstate}}',
legendFormat: '{{state}} evaluation',
},
],
$timeRange: timeRange,
@ -26,24 +25,16 @@ export function getGrafanaInstancesPercentageByStateScene(
...PANEL_STYLES,
body: PanelBuilders.timeseries()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setCustomFieldConfig('fillOpacity', 45)
.setUnit('percentunit')
.setOption('tooltip', { mode: TooltipDisplayMode.Multi })
.setMax(1)
.setThresholds({
mode: ThresholdsMode.Absolute,
steps: [
{
color: 'green',
value: 0,
},
{
color: 'red',
value: 80,
},
],
})
.setOverrides((b) =>
b.matchFieldsWithName('active evaluation').overrideColor(overrideToFixedColor('active evaluation'))
)
.build(),
});
}

32
public/app/features/alerting/unified/insights/grafana/alertmanager/AlertsByStateScene.tsx
View File

@ -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(),
});
}

10
public/app/features/alerting/unified/insights/grafana/alertmanager/NotificationsScene.tsx
View File

@ -1,7 +1,7 @@
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { PANEL_STYLES } from '../../../home/Insights';
import { overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights';
export function getGrafanaAlertmanagerNotificationsScene(
timeRange: SceneTimeRange,
@ -31,8 +31,16 @@ export function getGrafanaAlertmanagerNotificationsScene(
...PANEL_STYLES,
body: PanelBuilders.timeseries()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setOverrides((b) =>
b
.matchFieldsWithName('success')
.overrideColor(overrideToFixedColor('success'))
.matchFieldsWithName('failed')
.overrideColor(overrideToFixedColor('failed'))
)
.build(),
});
}

1
public/app/features/alerting/unified/insights/grafana/alertmanager/SilencesByStateScene.tsx
View File

@ -25,6 +25,7 @@ export function getGrafanaAlertmanagerSilencesScene(
...PANEL_STYLES,
body: PanelBuilders.timeseries()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.build(),

7
public/app/features/alerting/unified/insights/mimir/AlertsByState.tsx
View File

@ -1,7 +1,7 @@
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema';
import { PANEL_STYLES } from '../../home/Insights';
import { overrideToFixedColor, PANEL_STYLES } from '../../home/Insights';
export function getAlertsByStateScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
const query = new SceneQueryRunner({
@ -21,8 +21,11 @@ export function getAlertsByStateScene(timeRange: SceneTimeRange, datasource: Dat
...PANEL_STYLES,
body: PanelBuilders.timeseries()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setOption('tooltip', { mode: TooltipDisplayMode.Multi })
.setOverrides((b) => b.matchFieldsWithName('active').overrideColor(overrideToFixedColor('active')))
.build(),
});
}

7
public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx
View File

@ -1,5 +1,5 @@
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { BigValueGraphMode, DataSourceRef } from '@grafana/schema';
import { PANEL_STYLES } from '../../home/Insights';
@ -19,11 +19,12 @@ export function getInvalidConfigScene(timeRange: SceneTimeRange, datasource: Dat
return new SceneFlexItem({
...PANEL_STYLES,
body: PanelBuilders.timeseries()
body: PanelBuilders.stat()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setUnit('bool_yes_no')
.setOption('graphMode', BigValueGraphMode.None)
.build(),
});
}

17
public/app/features/alerting/unified/insights/mimir/Notifications.tsx
View File

@ -1,7 +1,7 @@
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema';
import { PANEL_STYLES } from '../../home/Insights';
import { overrideToFixedColor, PANEL_STYLES } from '../../home/Insights';
export function getNotificationsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
const query = new SceneQueryRunner({
@ -11,13 +11,13 @@ export function getNotificationsScene(timeRange: SceneTimeRange, datasource: Dat
refId: 'A',
expr: 'sum by(cluster)(grafanacloud_instance_alertmanager_notifications_per_second) - sum by (cluster)(grafanacloud_instance_alertmanager_notifications_failed_per_second)',
range: true,
legendFormat: '{{cluster}} - success',
legendFormat: 'success',
},
{
refId: 'B',
expr: 'sum by(cluster)(grafanacloud_instance_alertmanager_notifications_failed_per_second)',
range: true,
legendFormat: '{{cluster}} - failed',
legendFormat: 'failed',
},
],
$timeRange: timeRange,
@ -27,8 +27,17 @@ export function getNotificationsScene(timeRange: SceneTimeRange, datasource: Dat
...PANEL_STYLES,
body: PanelBuilders.timeseries()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setOption('tooltip', { mode: TooltipDisplayMode.Multi })
.setOverrides((b) =>
b
.matchFieldsWithName('success')
.overrideColor(overrideToFixedColor('success'))
.matchFieldsWithName('failed')
.overrideColor(overrideToFixedColor('failed'))
)
.build(),
});
}

4
public/app/features/alerting/unified/insights/mimir/Silences.tsx
View File

@ -1,5 +1,5 @@
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema';
import { PANEL_STYLES } from '../../home/Insights';
@ -21,8 +21,10 @@ export function getSilencesScene(timeRange: SceneTimeRange, datasource: DataSour
...PANEL_STYLES,
body: PanelBuilders.timeseries()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setOption('tooltip', { mode: TooltipDisplayMode.Multi })
.build(),
});
}

53
public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationIntervalRatioScene.tsx Normal file
View File

@ -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(),
});
}

11
public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationScene.tsx
View File

@ -1,5 +1,5 @@
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema';
import { PANEL_STYLES } from '../../../home/Insights';
@ -25,9 +25,18 @@ export function getRuleGroupEvaluationDurationScene(
...PANEL_STYLES,
body: PanelBuilders.timeseries()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setUnit('s')
.setOption('tooltip', { mode: TooltipDisplayMode.Multi })
.setOption('legend', { showLegend: false })
.setOverrides((b) =>
b.matchFieldsByQuery('A').overrideColor({
mode: 'fixed',
fixedColor: 'blue',
})
)
.build(),
});
}

13
public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationsScene.tsx
View File

@ -1,7 +1,7 @@
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema';
import { PANEL_STYLES } from '../../../home/Insights';
import { overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights';
export function getRuleGroupEvaluationsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
const query = new SceneQueryRunner({
@ -27,8 +27,17 @@ export function getRuleGroupEvaluationsScene(timeRange: SceneTimeRange, datasour
...PANEL_STYLES,
body: PanelBuilders.timeseries()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setOption('tooltip', { mode: TooltipDisplayMode.Multi })
.setOverrides((b) =>
b
.matchFieldsWithName('success')
.overrideColor(overrideToFixedColor('success'))
.matchFieldsWithName('failed')
.overrideColor(overrideToFixedColor('failed'))
)
.build(),
});
}

7
public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupIntervalScene.tsx
View File

@ -1,5 +1,5 @@
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { BigValueGraphMode, DataSourceRef } from '@grafana/schema';
import { PANEL_STYLES } from '../../../home/Insights';
@ -19,11 +19,12 @@ export function getRuleGroupIntervalScene(timeRange: SceneTimeRange, datasource:
return new SceneFlexItem({
...PANEL_STYLES,
body: PanelBuilders.timeseries()
body: PanelBuilders.stat()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setUnit('s')
.setOption('graphMode', BigValueGraphMode.Area)
.build(),
});
}

14
public/app/features/alerting/unified/insights/mimir/perGroup/RulesPerGroupScene.tsx
View File

@ -1,5 +1,5 @@
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { BigValueGraphMode, DataSourceRef } from '@grafana/schema';
import { PANEL_STYLES } from '../../../home/Insights';
@ -19,11 +19,19 @@ export function getRulesPerGroupScene(timeRange: SceneTimeRange, datasource: Dat
return new SceneFlexItem({
...PANEL_STYLES,
body: PanelBuilders.timeseries()
body: PanelBuilders.stat()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setUnit('none')
.setOption('graphMode', BigValueGraphMode.Area)
.setOverrides((b) =>
b.matchFieldsByQuery('A').overrideColor({
mode: 'fixed',
fixedColor: 'blue',
})
)
.setNoValue('0')
.build(),
});
}

7
public/app/features/alerting/unified/insights/mimir/rules/EvalSuccessVsFailuresScene.tsx
View File

@ -1,7 +1,7 @@
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema';
import { PANEL_STYLES } from '../../../home/Insights';
import { overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights';
export function getEvalSuccessVsFailuresScene(
timeRange: SceneTimeRange,
@ -31,8 +31,11 @@ export function getEvalSuccessVsFailuresScene(
...PANEL_STYLES,
body: PanelBuilders.timeseries()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setOption('tooltip', { mode: TooltipDisplayMode.Multi })
.setOverrides((b) => b.matchFieldsWithName('failed').overrideColor(overrideToFixedColor('failed')))
.build(),
});
}

2
public/app/features/alerting/unified/insights/mimir/rules/Firing.tsx
View File

@ -21,6 +21,7 @@ export function getFiringCloudAlertsScene(timeRange: SceneTimeRange, datasource:
...PANEL_STYLES,
body: PanelBuilders.stat()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setThresholds({
mode: ThresholdsMode.Absolute,
@ -35,6 +36,7 @@ export function getFiringCloudAlertsScene(timeRange: SceneTimeRange, datasource:
},
],
})
.setNoValue('0')
.build(),
});
}

7
public/app/features/alerting/unified/insights/mimir/rules/InstancesByState.tsx
View File

@ -1,7 +1,7 @@
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema';
import { PANEL_STYLES } from '../../../home/Insights';
import { overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights';
export function getInstancesByStateScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
const query = new SceneQueryRunner({
@ -21,8 +21,11 @@ export function getInstancesByStateScene(timeRange: SceneTimeRange, datasource:
...PANEL_STYLES,
body: PanelBuilders.timeseries()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setOption('tooltip', { mode: TooltipDisplayMode.Multi })
.setOverrides((b) => b.matchFieldsWithName('firing').overrideColor(overrideToFixedColor('firing')))
.build(),
});
}

21
public/app/features/alerting/unified/insights/mimir/rules/InstancesPercentageByState.tsx
View File

@ -1,8 +1,7 @@
import { ThresholdsMode } from '@grafana/data';
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema';
import { PANEL_STYLES } from '../../../home/Insights';
import { overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights';
export function getInstancesPercentageByStateScene(
timeRange: SceneTimeRange,
@ -26,24 +25,14 @@ export function getInstancesPercentageByStateScene(
...PANEL_STYLES,
body: PanelBuilders.timeseries()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setCustomFieldConfig('fillOpacity', 45)
.setUnit('percentunit')
.setMax(1)
.setThresholds({
mode: ThresholdsMode.Absolute,
steps: [
{
color: 'green',
value: 0,
},
{
color: 'red',
value: 80,
},
],
})
.setOption('tooltip', { mode: TooltipDisplayMode.Multi })
.setOverrides((b) => b.matchFieldsWithName('firing').overrideColor(overrideToFixedColor('firing')))
.build(),
});
}

8
public/app/features/alerting/unified/insights/mimir/rules/MissedIterationsScene.tsx
View File

@ -1,7 +1,7 @@
import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema';
import { PANEL_STYLES } from '../../../home/Insights';
import { overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights';
export function getMissedIterationsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
const query = new SceneQueryRunner({
@ -21,8 +21,12 @@ export function getMissedIterationsScene(timeRange: SceneTimeRange, datasource:
...PANEL_STYLES,
body: PanelBuilders.timeseries()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
.setOption('tooltip', { mode: TooltipDisplayMode.Multi })
.setOption('legend', { showLegend: false })
.setOverrides((b) => b.matchFieldsWithName('missed').overrideColor(overrideToFixedColor('missed')))
.build(),
});
}

20
public/app/features/alerting/unified/insights/mimir/rules/MostFiredInstances.tsx → public/app/features/alerting/unified/insights/mimir/rules/MostFiredRules.tsx
View File

@ -3,14 +3,16 @@ import { DataSourceRef } from '@grafana/schema';
import { PANEL_STYLES } from '../../../home/Insights';
export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
export function getMostFiredRulesScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
const query = new SceneQueryRunner({
datasource,
queries: [
{
refId: 'A',
expr: 'topk(10, sum by (alertname) (ALERTS))',
range: true,
expr: 'topk(10, sum by(alertname) (ALERTS{alertstate="firing"}))',
instant: true,
range: false,
format: 'table',
},
],
@ -20,17 +22,15 @@ export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource
const transformation = new SceneDataTransformer({
$data: query,
transformations: [
{
id: 'timeSeriesTable',
options: {},
},
{
id: 'organize',
options: {
excludeByName: {},
excludeByName: {
Time: true,
},
indexByName: {},
renameByName: {
Trend: '',
Value: 'Fires this week',
alertname: 'Alert Rule Name',
},
},
@ -40,6 +40,6 @@ export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource
return new SceneFlexItem({
...PANEL_STYLES,
body: PanelBuilders.table().setTitle(panelTitle).setData(transformation).build(),
body: PanelBuilders.table().setTitle(panelTitle).setDescription(panelTitle).setData(transformation).build(),
});
}

2
public/app/features/alerting/unified/insights/mimir/rules/Pending.tsx
View File

@ -21,6 +21,7 @@ export function getPendingCloudAlertsScene(timeRange: SceneTimeRange, datasource
...PANEL_STYLES,
body: PanelBuilders.stat()
.setTitle(panelTitle)
.setDescription(panelTitle)
.setData(query)
.setThresholds({
mode: ThresholdsMode.Absolute,
@ -35,6 +36,7 @@ export function getPendingCloudAlertsScene(timeRange: SceneTimeRange, datasource
},
],
})
.setNoValue('0')
.build(),
});
}