From 7896df7513f2d49eba3ef3e19f9505b3dfa6557e Mon Sep 17 00:00:00 2001 From: Virginia Cepeda Date: Thu, 21 Sep 2023 12:07:04 -0300 Subject: [PATCH] Alerting: Add missing scenes for grafana managed alerts (#75100) * Add new scenes for grafana managed alerts * Remove unused import * Fix lint * Remove width property from SceneFlexItem * Add missing scenes for GMA section * Improve scenes layout * Add Grafana Alertmanager panels * Fix lint * Fix lint * Refactor expression variables * Apply shared styles to scenes --- .../alerting/unified/home/Insights.tsx | 136 ++++++++++++++---- .../insights/grafana/EvalDurationScene.tsx | 34 +++++ .../grafana/EvalSuccessVsFailuresScene.tsx | 38 +++++ .../unified/insights/grafana/Firing.tsx | 40 ++++++ .../grafana/FiringAlertsPercentage.tsx | 9 +- .../insights/grafana/FiringAlertsRate.tsx | 6 +- .../insights/grafana/InstancesByState.tsx | 32 +++++ .../grafana/InstancesPercentageByState.tsx | 49 +++++++ .../grafana/MissedIterationsScene.tsx | 32 +++++ .../grafana/MostFiredInstancesTable.tsx | 8 +- .../insights/grafana/MostFiredRulesTable.tsx | 7 +- .../insights/grafana/MostFiringLabels.tsx | 4 +- .../unified/insights/grafana/Paused.tsx | 40 ++++++ .../alertmanager/AlertsByStateScene.tsx | 32 +++++ .../alertmanager/NotificationsScene.tsx | 38 +++++ .../alertmanager/SilencesByStateScene.tsx | 32 +++++ .../unified/insights/mimir/AlertsByState.tsx | 7 +- .../unified/insights/mimir/InvalidConfig.tsx | 7 +- .../unified/insights/mimir/Notifications.tsx | 11 +- .../unified/insights/mimir/Silences.tsx | 7 +- .../RuleGroupEvaluationDurationScene.tsx | 7 +- .../perGroup/RuleGroupEvaluationsScene.tsx | 10 +- .../mimir/perGroup/RuleGroupIntervalScene.tsx | 7 +- .../mimir/perGroup/RulesPerGroupScene.tsx | 7 +- .../rules/EvalSuccessVsFailuresScene.tsx | 12 +- .../unified/insights/mimir/rules/Firing.tsx | 7 +- .../insights/mimir/rules/InstancesByState.tsx | 7 +- .../rules/InstancesPercentageByState.tsx | 7 +- .../mimir/rules/MissedIterationsScene.tsx | 7 +- .../mimir/rules/MostFiredInstances.tsx | 7 +- .../unified/insights/mimir/rules/Pending.tsx | 7 +- 31 files changed, 539 insertions(+), 115 deletions(-) create mode 100644 public/app/features/alerting/unified/insights/grafana/EvalDurationScene.tsx create mode 100644 public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx create mode 100644 public/app/features/alerting/unified/insights/grafana/Firing.tsx create mode 100644 public/app/features/alerting/unified/insights/grafana/InstancesByState.tsx create mode 100644 public/app/features/alerting/unified/insights/grafana/InstancesPercentageByState.tsx create mode 100644 public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx create mode 100644 public/app/features/alerting/unified/insights/grafana/Paused.tsx create mode 100644 public/app/features/alerting/unified/insights/grafana/alertmanager/AlertsByStateScene.tsx create mode 100644 public/app/features/alerting/unified/insights/grafana/alertmanager/NotificationsScene.tsx create mode 100644 public/app/features/alerting/unified/insights/grafana/alertmanager/SilencesByStateScene.tsx diff --git a/public/app/features/alerting/unified/home/Insights.tsx b/public/app/features/alerting/unified/home/Insights.tsx index 8674486dcd3..acdb627703e 100644 --- a/public/app/features/alerting/unified/home/Insights.tsx +++ b/public/app/features/alerting/unified/home/Insights.tsx @@ -9,9 +9,17 @@ import { VariableValueSelectors, } from '@grafana/scenes'; -import { getFiringAlertsScene } from '../insights/grafana/FiringAlertsPercentage'; -import { getFiringAlertsRateScene } from '../insights/grafana/FiringAlertsRate'; +import { getGrafanaEvalDurationScene } from '../insights/grafana/EvalDurationScene'; +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 { 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 { 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'; @@ -43,6 +51,8 @@ const grafanaCloudPromDs = { uid: 'grafanacloud-prom', }; +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' }); @@ -54,15 +64,33 @@ export function getGrafanaScenes() { new SceneFlexLayout({ children: [ getMostFiredInstancesScene(THIS_WEEK_TIME_RANGE, ashDs, 'Top 10 firing instances this week'), - getFiringAlertsRateScene(THIS_WEEK_TIME_RANGE, ashDs, 'Alerts firing per minute'), + getFiringGrafanaAlertsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Firing'), + getPausedGrafanaAlertsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Paused'), ], }), new SceneFlexLayout({ children: [ - getFiringAlertsScene(THIS_WEEK_TIME_RANGE, ashDs, 'Firing alerts this week'), - getFiringAlertsScene(LAST_WEEK_TIME_RANGE, ashDs, 'Firing alerts last week'), + 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: getGrafanaAlertmanagerScenes(), + }), new SceneFlexItem({ ySizing: 'content', body: getCloudScenes(), @@ -80,18 +108,48 @@ export function getGrafanaScenes() { }); } +function getGrafanaAlertmanagerScenes() { + return new NestedScene({ + title: 'Grafana Alertmanager', + canCollapse: true, + isCollapsed: false, + 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 SceneFlexLayout({ + children: [getGrafanaAlertmanagerSilencesScene(LAST_WEEK_TIME_RANGE, cloudUsageDs, 'Silences')], + }), + ], + }), + }); +} + function getCloudScenes() { return new NestedScene({ title: 'Mimir alertmanager', canCollapse: true, - isCollapsed: true, + isCollapsed: false, body: new SceneFlexLayout({ - wrap: 'wrap', + direction: 'column', children: [ - getAlertsByStateScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Alerts by State'), - getNotificationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Notifications'), - getSilencesScene(LAST_WEEK_TIME_RANGE, cloudUsageDs, 'Silences'), - getInvalidConfigScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Invalid configuration'), + new SceneFlexLayout({ + children: [ + getAlertsByStateScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Alerts by State'), + getNotificationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Notifications'), + ], + }), + new SceneFlexLayout({ + children: [ + getSilencesScene(LAST_WEEK_TIME_RANGE, cloudUsageDs, 'Silences'), + getInvalidConfigScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Invalid configuration'), + ], + }), ], }), }); @@ -101,19 +159,33 @@ function getMimirManagedRulesScenes() { return new NestedScene({ title: 'Mimir-managed rules', canCollapse: true, - isCollapsed: true, + isCollapsed: false, body: new SceneFlexLayout({ - wrap: 'wrap', + direction: 'column', 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'), - - getInstancesByStateScene(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, 'Count of alert instances by state'), - getInstancesPercentageByStateScene(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, '% of Alert Instances by State'), - - getEvalSuccessVsFailuresScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Evaluation Success vs Failures'), - getMissedIterationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Iterations Missed'), + 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'), + ], + }), + new SceneFlexLayout({ + children: [ + getInstancesByStateScene(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, 'Count of alert instances by state'), + getInstancesPercentageByStateScene( + THIS_WEEK_TIME_RANGE, + grafanaCloudPromDs, + '% 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'), + ], + }), ], }), }); @@ -130,14 +202,22 @@ function getMimirManagedRulesPerGroupScenes() { return new NestedScene({ title: 'Mimir-managed Rules - Per Rule Group', canCollapse: true, - isCollapsed: true, + isCollapsed: false, body: new SceneFlexLayout({ - wrap: 'wrap', + direction: 'column', children: [ - getRuleGroupEvaluationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rule Group Evaluation'), - getRuleGroupIntervalScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rule Group Interval'), - getRuleGroupEvaluationDurationScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rule Group Evaluation Duration'), - getRulesPerGroupScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rules per Group'), + new SceneFlexLayout({ + children: [ + 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'), + ], + }), ], }), $variables: new SceneVariableSet({ diff --git a/public/app/features/alerting/unified/insights/grafana/EvalDurationScene.tsx b/public/app/features/alerting/unified/insights/grafana/EvalDurationScene.tsx new file mode 100644 index 00000000000..13de44bc4d1 --- /dev/null +++ b/public/app/features/alerting/unified/insights/grafana/EvalDurationScene.tsx @@ -0,0 +1,34 @@ +import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; +import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; + +import { PANEL_STYLES } from '../../home/Insights'; + +export function getGrafanaEvalDurationScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { + const query = new SceneQueryRunner({ + datasource, + queries: [ + { + refId: 'A', + expr: 'sum(grafanacloud_grafana_instance_alerting_rule_evaluations_total:rate5m) - sum(grafanacloud_grafana_instance_alerting_rule_evaluation_failures_total:rate5m)', + range: true, + legendFormat: 'success', + }, + { + refId: 'B', + expr: 'sum(grafanacloud_grafana_instance_alerting_rule_evaluation_failures_total:rate5m)', + range: true, + legendFormat: 'failed', + }, + ], + $timeRange: timeRange, + }); + + return new SceneFlexItem({ + ...PANEL_STYLES, + body: PanelBuilders.timeseries() + .setTitle(panelTitle) + .setData(query) + .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) + .build(), + }); +} diff --git a/public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx b/public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx new file mode 100644 index 00000000000..a3a07ca0b16 --- /dev/null +++ b/public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx @@ -0,0 +1,38 @@ +import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; +import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; + +import { PANEL_STYLES } from '../../home/Insights'; + +export function getGrafanaEvalSuccessVsFailuresScene( + timeRange: SceneTimeRange, + datasource: DataSourceRef, + panelTitle: string +) { + const query = new SceneQueryRunner({ + datasource, + queries: [ + { + refId: 'A', + expr: 'sum(grafanacloud_grafana_instance_alerting_rule_evaluations_total:rate5m) - sum(grafanacloud_grafana_instance_alerting_rule_evaluation_failures_total:rate5m)', + range: true, + legendFormat: 'success', + }, + { + refId: 'B', + expr: 'sum(grafanacloud_grafana_instance_alerting_rule_evaluation_failures_total:rate5m)', + range: true, + legendFormat: 'failed', + }, + ], + $timeRange: timeRange, + }); + + return new SceneFlexItem({ + ...PANEL_STYLES, + body: PanelBuilders.timeseries() + .setTitle(panelTitle) + .setData(query) + .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) + .build(), + }); +} diff --git a/public/app/features/alerting/unified/insights/grafana/Firing.tsx b/public/app/features/alerting/unified/insights/grafana/Firing.tsx new file mode 100644 index 00000000000..de8a85bd9f8 --- /dev/null +++ b/public/app/features/alerting/unified/insights/grafana/Firing.tsx @@ -0,0 +1,40 @@ +import { ThresholdsMode } from '@grafana/data'; +import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; +import { DataSourceRef } from '@grafana/schema'; + +import { PANEL_STYLES } from '../../home/Insights'; + +export function getFiringGrafanaAlertsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { + const query = new SceneQueryRunner({ + datasource, + queries: [ + { + refId: 'A', + instant: true, + expr: 'sum by (state) (grafanacloud_grafana_instance_alerting_rule_group_rules{state="active"})', + }, + ], + $timeRange: timeRange, + }); + + return new SceneFlexItem({ + ...PANEL_STYLES, + body: PanelBuilders.stat() + .setTitle(panelTitle) + .setData(query) + .setThresholds({ + mode: ThresholdsMode.Absolute, + steps: [ + { + color: 'red', + value: 0, + }, + { + color: 'red', + value: 80, + }, + ], + }) + .build(), + }); +} diff --git a/public/app/features/alerting/unified/insights/grafana/FiringAlertsPercentage.tsx b/public/app/features/alerting/unified/insights/grafana/FiringAlertsPercentage.tsx index b771e2de78a..b0cf530d996 100644 --- a/public/app/features/alerting/unified/insights/grafana/FiringAlertsPercentage.tsx +++ b/public/app/features/alerting/unified/insights/grafana/FiringAlertsPercentage.tsx @@ -1,8 +1,7 @@ import { PanelBuilders, SceneDataTransformer, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef } from '@grafana/schema'; -const TOTALS = 'sum(count_over_time({from="state-history"} | json [1w]))'; -const TOTALS_FIRING = 'sum(count_over_time({from="state-history"} | json | current="Alerting"[1w]))'; +import { PANEL_STYLES } from '../../home/Insights'; export function getFiringAlertsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -11,12 +10,12 @@ export function getFiringAlertsScene(timeRange: SceneTimeRange, datasource: Data { refId: 'A', instant: true, - expr: TOTALS_FIRING, + expr: 'sum(count_over_time({from="state-history"} | json | current="Alerting"[1w]))', }, { refId: 'B', instant: true, - expr: TOTALS, + expr: 'sum(count_over_time({from="state-history"} | json [1w]))', }, ], $timeRange: timeRange, @@ -61,7 +60,7 @@ export function getFiringAlertsScene(timeRange: SceneTimeRange, datasource: Data }); return new SceneFlexItem({ - minHeight: 300, + ...PANEL_STYLES, body: PanelBuilders.stat().setTitle(panelTitle).setData(transformation).setUnit('percent').build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/FiringAlertsRate.tsx b/public/app/features/alerting/unified/insights/grafana/FiringAlertsRate.tsx index 6765d283584..c9c2b48a2aa 100644 --- a/public/app/features/alerting/unified/insights/grafana/FiringAlertsRate.tsx +++ b/public/app/features/alerting/unified/insights/grafana/FiringAlertsRate.tsx @@ -1,7 +1,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; -const RATE_FIRING = 'sum(count_over_time({from="state-history"} | json | current="Alerting"[5m]))'; +import { PANEL_STYLES } from '../../home/Insights'; export function getFiringAlertsRateScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -9,7 +9,7 @@ export function getFiringAlertsRateScene(timeRange: SceneTimeRange, datasource: queries: [ { refId: 'A', - expr: RATE_FIRING, + expr: 'sum(count_over_time({from="state-history"} | json | current="Alerting"[5m]))', range: true, legendFormat: 'Number of fires', }, @@ -18,7 +18,7 @@ export function getFiringAlertsRateScene(timeRange: SceneTimeRange, datasource: }); return new SceneFlexItem({ - minHeight: 300, + ...PANEL_STYLES, body: PanelBuilders.timeseries() .setTitle(panelTitle) .setData(query) diff --git a/public/app/features/alerting/unified/insights/grafana/InstancesByState.tsx b/public/app/features/alerting/unified/insights/grafana/InstancesByState.tsx new file mode 100644 index 00000000000..00ba27a6659 --- /dev/null +++ b/public/app/features/alerting/unified/insights/grafana/InstancesByState.tsx @@ -0,0 +1,32 @@ +import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; +import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; + +import { 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_rule_group_rules)', + range: true, + legendFormat: '{{state}}', + }, + ], + $timeRange: timeRange, + }); + + return new SceneFlexItem({ + ...PANEL_STYLES, + body: PanelBuilders.timeseries() + .setTitle(panelTitle) + .setData(query) + .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) + .build(), + }); +} diff --git a/public/app/features/alerting/unified/insights/grafana/InstancesPercentageByState.tsx b/public/app/features/alerting/unified/insights/grafana/InstancesPercentageByState.tsx new file mode 100644 index 00000000000..04148a29729 --- /dev/null +++ b/public/app/features/alerting/unified/insights/grafana/InstancesPercentageByState.tsx @@ -0,0 +1,49 @@ +import { ThresholdsMode } from '@grafana/data'; +import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; +import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; + +import { PANEL_STYLES } from '../../home/Insights'; + +export function getGrafanaInstancesPercentageByStateScene( + timeRange: SceneTimeRange, + datasource: DataSourceRef, + panelTitle: string +) { + const query = new SceneQueryRunner({ + datasource, + queries: [ + { + 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}}', + }, + ], + $timeRange: timeRange, + }); + + return new SceneFlexItem({ + ...PANEL_STYLES, + body: PanelBuilders.timeseries() + .setTitle(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, + }, + ], + }) + .build(), + }); +} diff --git a/public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx b/public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx new file mode 100644 index 00000000000..088dccfc6ba --- /dev/null +++ b/public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx @@ -0,0 +1,32 @@ +import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; +import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; + +import { PANEL_STYLES } from '../../home/Insights'; + +export function getGrafanaMissedIterationsScene( + timeRange: SceneTimeRange, + datasource: DataSourceRef, + panelTitle: string +) { + const query = new SceneQueryRunner({ + datasource, + queries: [ + { + refId: 'A', + expr: 'sum by (rule_group) (grafanacloud_instance_rule_group_iterations_missed_total:rate5m)', + range: true, + legendFormat: 'missed', + }, + ], + $timeRange: timeRange, + }); + + return new SceneFlexItem({ + ...PANEL_STYLES, + body: PanelBuilders.timeseries() + .setTitle(panelTitle) + .setData(query) + .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) + .build(), + }); +} diff --git a/public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx b/public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx index 10012787a4d..76b1c894de8 100644 --- a/public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx +++ b/public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx @@ -13,18 +13,16 @@ import { import { DataSourceRef } from '@grafana/schema'; import { Icon, Link } from '@grafana/ui'; +import { PANEL_STYLES } from '../../home/Insights'; import { createUrl } from '../../utils/url'; -const TOP_FIRING_INSTANCES = - 'topk(10, sum by(labels_alertname, ruleUID) (count_over_time({from="state-history"} | json | current = `Alerting` [1w])))'; - export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ datasource, queries: [ { refId: 'A', - expr: TOP_FIRING_INSTANCES, + expr: 'topk(10, sum by(labels_alertname, ruleUID) (count_over_time({from="state-history"} | json | current = `Alerting` [1w])))', instant: true, }, ], @@ -103,7 +101,7 @@ export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource }); return new SceneFlexItem({ - minHeight: 300, + ...PANEL_STYLES, body: PanelBuilders.table().setTitle(panelTitle).setData(transformation).build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/MostFiredRulesTable.tsx b/public/app/features/alerting/unified/insights/grafana/MostFiredRulesTable.tsx index 9789806304c..2ddaf8f7bc9 100644 --- a/public/app/features/alerting/unified/insights/grafana/MostFiredRulesTable.tsx +++ b/public/app/features/alerting/unified/insights/grafana/MostFiredRulesTable.tsx @@ -1,8 +1,7 @@ import { PanelBuilders, SceneDataTransformer, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef } from '@grafana/schema'; -const TOP_5_FIRING_RULES = - 'topk(5, sum by(group, labels_grafana_folder) (count_over_time({from="state-history"} | json | current = `Alerting` [1w])))'; +import { PANEL_STYLES } from '../../home/Insights'; export function getMostFiredRulesScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -10,7 +9,7 @@ export function getMostFiredRulesScene(timeRange: SceneTimeRange, datasource: Da queries: [ { refId: 'A', - expr: TOP_5_FIRING_RULES, + expr: 'topk(5, sum by(group, labels_grafana_folder) (count_over_time({from="state-history"} | json | current = `Alerting` [1w])))', instant: true, }, ], @@ -54,7 +53,7 @@ export function getMostFiredRulesScene(timeRange: SceneTimeRange, datasource: Da }); return new SceneFlexItem({ - minHeight: 300, + ...PANEL_STYLES, body: PanelBuilders.table().setTitle(panelTitle).setData(transformation).build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/MostFiringLabels.tsx b/public/app/features/alerting/unified/insights/grafana/MostFiringLabels.tsx index 758a0f02653..46fc3d46fd8 100644 --- a/public/app/features/alerting/unified/insights/grafana/MostFiringLabels.tsx +++ b/public/app/features/alerting/unified/insights/grafana/MostFiringLabels.tsx @@ -13,6 +13,8 @@ import { import { DataQuery, DataSourceRef } from '@grafana/schema'; import { getTimeRange } from 'app/features/dashboard/utils/timeRange'; +import { PANEL_STYLES } from '../../home/Insights'; + export const getLabelsInfo = (from: number, to: number): Observable => { return getBackendSrv().fetch({ url: `/api/v1/rules/history`, @@ -49,7 +51,7 @@ export function getMostFiredLabelsScene(timeRange: SceneTimeRange, datasource: D }); return new SceneFlexItem({ - minHeight: 300, + ...PANEL_STYLES, body: PanelBuilders.table().setTitle(panelTitle).setData(query).build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/Paused.tsx b/public/app/features/alerting/unified/insights/grafana/Paused.tsx new file mode 100644 index 00000000000..26cf69201ac --- /dev/null +++ b/public/app/features/alerting/unified/insights/grafana/Paused.tsx @@ -0,0 +1,40 @@ +import { ThresholdsMode } from '@grafana/data'; +import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; +import { DataSourceRef } from '@grafana/schema'; + +import { PANEL_STYLES } from '../../home/Insights'; + +export function getPausedGrafanaAlertsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { + const query = new SceneQueryRunner({ + datasource, + queries: [ + { + refId: 'A', + instant: true, + expr: 'sum by (state) (grafanacloud_grafana_instance_alerting_rule_group_rules{state="paused"})', + }, + ], + $timeRange: timeRange, + }); + + return new SceneFlexItem({ + ...PANEL_STYLES, + body: PanelBuilders.stat() + .setTitle(panelTitle) + .setData(query) + .setThresholds({ + mode: ThresholdsMode.Absolute, + steps: [ + { + color: 'yellow', + value: 0, + }, + { + color: 'red', + value: 80, + }, + ], + }) + .build(), + }); +} diff --git a/public/app/features/alerting/unified/insights/grafana/alertmanager/AlertsByStateScene.tsx b/public/app/features/alerting/unified/insights/grafana/alertmanager/AlertsByStateScene.tsx new file mode 100644 index 00000000000..6107bbfd3cc --- /dev/null +++ b/public/app/features/alerting/unified/insights/grafana/alertmanager/AlertsByStateScene.tsx @@ -0,0 +1,32 @@ +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(), + }); +} diff --git a/public/app/features/alerting/unified/insights/grafana/alertmanager/NotificationsScene.tsx b/public/app/features/alerting/unified/insights/grafana/alertmanager/NotificationsScene.tsx new file mode 100644 index 00000000000..e87740f7485 --- /dev/null +++ b/public/app/features/alerting/unified/insights/grafana/alertmanager/NotificationsScene.tsx @@ -0,0 +1,38 @@ +import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; +import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; + +import { PANEL_STYLES } from '../../../home/Insights'; + +export function getGrafanaAlertmanagerNotificationsScene( + timeRange: SceneTimeRange, + datasource: DataSourceRef, + panelTitle: string +) { + const query = new SceneQueryRunner({ + datasource, + queries: [ + { + refId: 'A', + expr: 'grafanacloud_grafana_instance_alerting_notifications_total:rate5m - grafanacloud_grafana_instance_alerting_notifications_failed_total:rate5m', + range: true, + legendFormat: 'success', + }, + { + refId: 'B', + expr: 'grafanacloud_grafana_instance_alerting_notifications_failed_total:rate5m', + range: true, + legendFormat: 'failed', + }, + ], + $timeRange: timeRange, + }); + + return new SceneFlexItem({ + ...PANEL_STYLES, + body: PanelBuilders.timeseries() + .setTitle(panelTitle) + .setData(query) + .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) + .build(), + }); +} diff --git a/public/app/features/alerting/unified/insights/grafana/alertmanager/SilencesByStateScene.tsx b/public/app/features/alerting/unified/insights/grafana/alertmanager/SilencesByStateScene.tsx new file mode 100644 index 00000000000..6818eb32b60 --- /dev/null +++ b/public/app/features/alerting/unified/insights/grafana/alertmanager/SilencesByStateScene.tsx @@ -0,0 +1,32 @@ +import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; +import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; + +import { PANEL_STYLES } from '../../../home/Insights'; + +export function getGrafanaAlertmanagerSilencesScene( + timeRange: SceneTimeRange, + datasource: DataSourceRef, + panelTitle: string +) { + const query = new SceneQueryRunner({ + datasource, + queries: [ + { + refId: 'A', + expr: 'sum by (state) (grafanacloud_grafana_instance_alerting_silences)', + range: true, + legendFormat: '{{state}}', + }, + ], + $timeRange: timeRange, + }); + + return new SceneFlexItem({ + ...PANEL_STYLES, + body: PanelBuilders.timeseries() + .setTitle(panelTitle) + .setData(query) + .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) + .build(), + }); +} diff --git a/public/app/features/alerting/unified/insights/mimir/AlertsByState.tsx b/public/app/features/alerting/unified/insights/mimir/AlertsByState.tsx index 442f32df450..fc424c9d711 100644 --- a/public/app/features/alerting/unified/insights/mimir/AlertsByState.tsx +++ b/public/app/features/alerting/unified/insights/mimir/AlertsByState.tsx @@ -1,7 +1,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; -const QUERY = 'sum by (state) (grafanacloud_instance_alertmanager_alerts)'; +import { PANEL_STYLES } from '../../home/Insights'; export function getAlertsByStateScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -9,7 +9,7 @@ export function getAlertsByStateScene(timeRange: SceneTimeRange, datasource: Dat queries: [ { refId: 'A', - expr: QUERY, + expr: 'sum by (state) (grafanacloud_instance_alertmanager_alerts)', range: true, legendFormat: '{{state}}', }, @@ -18,8 +18,7 @@ export function getAlertsByStateScene(timeRange: SceneTimeRange, datasource: Dat }); return new SceneFlexItem({ - width: 'calc(50% - 4px)', - height: 300, + ...PANEL_STYLES, body: PanelBuilders.timeseries() .setTitle(panelTitle) .setData(query) diff --git a/public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx b/public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx index 935bf1408dc..9a092e314c2 100644 --- a/public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx +++ b/public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx @@ -1,7 +1,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; -const QUERY_A = 'sum by (cluster)(grafanacloud_instance_alertmanager_invalid_config)'; +import { PANEL_STYLES } from '../../home/Insights'; export function getInvalidConfigScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -9,7 +9,7 @@ export function getInvalidConfigScene(timeRange: SceneTimeRange, datasource: Dat queries: [ { refId: 'A', - expr: QUERY_A, + expr: 'sum by (cluster)(grafanacloud_instance_alertmanager_invalid_config)', range: true, legendFormat: '{{cluster}}', }, @@ -18,8 +18,7 @@ export function getInvalidConfigScene(timeRange: SceneTimeRange, datasource: Dat }); return new SceneFlexItem({ - width: 'calc(50% - 4px)', - height: 300, + ...PANEL_STYLES, body: PanelBuilders.timeseries() .setTitle(panelTitle) .setData(query) diff --git a/public/app/features/alerting/unified/insights/mimir/Notifications.tsx b/public/app/features/alerting/unified/insights/mimir/Notifications.tsx index 666e7133ada..77c50e352a4 100644 --- a/public/app/features/alerting/unified/insights/mimir/Notifications.tsx +++ b/public/app/features/alerting/unified/insights/mimir/Notifications.tsx @@ -1,9 +1,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; -const QUERY_A = - 'sum by(cluster)(grafanacloud_instance_alertmanager_notifications_per_second) - sum by (cluster)(grafanacloud_instance_alertmanager_notifications_failed_per_second)'; -const QUERY_B = 'sum by(cluster)(grafanacloud_instance_alertmanager_notifications_failed_per_second)'; +import { PANEL_STYLES } from '../../home/Insights'; export function getNotificationsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -11,13 +9,13 @@ export function getNotificationsScene(timeRange: SceneTimeRange, datasource: Dat queries: [ { refId: 'A', - expr: QUERY_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', }, { refId: 'B', - expr: QUERY_B, + expr: 'sum by(cluster)(grafanacloud_instance_alertmanager_notifications_failed_per_second)', range: true, legendFormat: '{{cluster}} - failed', }, @@ -26,8 +24,7 @@ export function getNotificationsScene(timeRange: SceneTimeRange, datasource: Dat }); return new SceneFlexItem({ - width: 'calc(50% - 4px)', - height: 300, + ...PANEL_STYLES, body: PanelBuilders.timeseries() .setTitle(panelTitle) .setData(query) diff --git a/public/app/features/alerting/unified/insights/mimir/Silences.tsx b/public/app/features/alerting/unified/insights/mimir/Silences.tsx index 4972a021012..76271cde7db 100644 --- a/public/app/features/alerting/unified/insights/mimir/Silences.tsx +++ b/public/app/features/alerting/unified/insights/mimir/Silences.tsx @@ -1,7 +1,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; -const QUERY_A = 'sum by (state) (grafanacloud_instance_alertmanager_silences)'; +import { PANEL_STYLES } from '../../home/Insights'; export function getSilencesScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -9,7 +9,7 @@ export function getSilencesScene(timeRange: SceneTimeRange, datasource: DataSour queries: [ { refId: 'A', - expr: QUERY_A, + expr: 'sum by (state) (grafanacloud_instance_alertmanager_silences)', range: true, legendFormat: '{{state}}', }, @@ -18,8 +18,7 @@ export function getSilencesScene(timeRange: SceneTimeRange, datasource: DataSour }); return new SceneFlexItem({ - width: 'calc(50% - 4px)', - height: 300, + ...PANEL_STYLES, body: PanelBuilders.timeseries() .setTitle(panelTitle) .setData(query) diff --git a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationScene.tsx b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationScene.tsx index 3830a1de2d0..e379d429c70 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationScene.tsx @@ -1,7 +1,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; -const QUERY_A = `grafanacloud_instance_rule_group_last_duration_seconds{rule_group="$rule_group"}`; +import { PANEL_STYLES } from '../../../home/Insights'; export function getRuleGroupEvaluationDurationScene( timeRange: SceneTimeRange, @@ -13,7 +13,7 @@ export function getRuleGroupEvaluationDurationScene( queries: [ { refId: 'A', - expr: QUERY_A, + expr: `grafanacloud_instance_rule_group_last_duration_seconds{rule_group="$rule_group"}`, range: true, legendFormat: '{{rule_group}}', }, @@ -22,8 +22,7 @@ export function getRuleGroupEvaluationDurationScene( }); return new SceneFlexItem({ - width: 'calc(50% - 4px)', - height: 300, + ...PANEL_STYLES, body: PanelBuilders.timeseries() .setTitle(panelTitle) .setData(query) diff --git a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationsScene.tsx b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationsScene.tsx index c2eb7a13798..f719f61f013 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationsScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationsScene.tsx @@ -1,8 +1,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; -const QUERY_A = `grafanacloud_instance_rule_evaluations_total:rate5m{rule_group="$rule_group"} - grafanacloud_instance_rule_evaluation_failures_total:rate5m{rule_group=~"$rule_group"}`; -const QUERY_B = `grafanacloud_instance_rule_evaluation_failures_total:rate5m{rule_group=~"$rule_group"}`; +import { PANEL_STYLES } from '../../../home/Insights'; export function getRuleGroupEvaluationsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -10,13 +9,13 @@ export function getRuleGroupEvaluationsScene(timeRange: SceneTimeRange, datasour queries: [ { refId: 'A', - expr: QUERY_A, + expr: `grafanacloud_instance_rule_evaluations_total:rate5m{rule_group="$rule_group"} - grafanacloud_instance_rule_evaluation_failures_total:rate5m{rule_group=~"$rule_group"}`, range: true, legendFormat: 'success', }, { refId: 'B', - expr: QUERY_B, + expr: `grafanacloud_instance_rule_evaluation_failures_total:rate5m{rule_group=~"$rule_group"}`, range: true, legendFormat: 'failed', }, @@ -25,8 +24,7 @@ export function getRuleGroupEvaluationsScene(timeRange: SceneTimeRange, datasour }); return new SceneFlexItem({ - width: 'calc(50% - 4px)', - height: 300, + ...PANEL_STYLES, body: PanelBuilders.timeseries() .setTitle(panelTitle) .setData(query) diff --git a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupIntervalScene.tsx b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupIntervalScene.tsx index 6fd3fc9cf8f..03a3ae7a637 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupIntervalScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupIntervalScene.tsx @@ -1,7 +1,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; -const QUERY_A = `grafanacloud_instance_rule_group_interval_seconds{rule_group="$rule_group"}`; +import { PANEL_STYLES } from '../../../home/Insights'; export function getRuleGroupIntervalScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -9,7 +9,7 @@ export function getRuleGroupIntervalScene(timeRange: SceneTimeRange, datasource: queries: [ { refId: 'A', - expr: QUERY_A, + expr: `grafanacloud_instance_rule_group_interval_seconds{rule_group="$rule_group"}`, range: true, legendFormat: 'interval', }, @@ -18,8 +18,7 @@ export function getRuleGroupIntervalScene(timeRange: SceneTimeRange, datasource: }); return new SceneFlexItem({ - width: 'calc(50% - 4px)', - height: 300, + ...PANEL_STYLES, body: PanelBuilders.timeseries() .setTitle(panelTitle) .setData(query) diff --git a/public/app/features/alerting/unified/insights/mimir/perGroup/RulesPerGroupScene.tsx b/public/app/features/alerting/unified/insights/mimir/perGroup/RulesPerGroupScene.tsx index 44ffc0390bc..36c03fa67a0 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RulesPerGroupScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RulesPerGroupScene.tsx @@ -1,7 +1,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; -const QUERY_A = `sum(grafanacloud_instance_rule_group_rules{rule_group="$rule_group"})`; +import { PANEL_STYLES } from '../../../home/Insights'; export function getRulesPerGroupScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -9,7 +9,7 @@ export function getRulesPerGroupScene(timeRange: SceneTimeRange, datasource: Dat queries: [ { refId: 'A', - expr: QUERY_A, + expr: `sum(grafanacloud_instance_rule_group_rules{rule_group="$rule_group"})`, range: true, legendFormat: 'number of rules', }, @@ -18,8 +18,7 @@ export function getRulesPerGroupScene(timeRange: SceneTimeRange, datasource: Dat }); return new SceneFlexItem({ - width: 'calc(50% - 4px)', - height: 300, + ...PANEL_STYLES, body: PanelBuilders.timeseries() .setTitle(panelTitle) .setData(query) diff --git a/public/app/features/alerting/unified/insights/mimir/rules/EvalSuccessVsFailuresScene.tsx b/public/app/features/alerting/unified/insights/mimir/rules/EvalSuccessVsFailuresScene.tsx index 4fce85c0332..26f8c3bcf99 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/EvalSuccessVsFailuresScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/EvalSuccessVsFailuresScene.tsx @@ -1,10 +1,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; -const QUERY_A = - 'sum(grafanacloud_instance_rule_evaluations_total:rate5m) - sum(grafanacloud_instance_rule_evaluation_failures_total:rate5m)'; - -const QUERY_B = 'sum(grafanacloud_instance_rule_evaluation_failures_total:rate5m)'; +import { PANEL_STYLES } from '../../../home/Insights'; export function getEvalSuccessVsFailuresScene( timeRange: SceneTimeRange, @@ -16,13 +13,13 @@ export function getEvalSuccessVsFailuresScene( queries: [ { refId: 'A', - expr: QUERY_A, + expr: 'sum(grafanacloud_instance_rule_evaluations_total:rate5m) - sum(grafanacloud_instance_rule_evaluation_failures_total:rate5m)', range: true, legendFormat: 'success', }, { refId: 'B', - expr: QUERY_B, + expr: 'sum(grafanacloud_instance_rule_evaluation_failures_total:rate5m)', range: true, legendFormat: 'failed', }, @@ -31,8 +28,7 @@ export function getEvalSuccessVsFailuresScene( }); return new SceneFlexItem({ - width: 'calc(50% - 4px)', - height: 300, + ...PANEL_STYLES, body: PanelBuilders.timeseries() .setTitle(panelTitle) .setData(query) diff --git a/public/app/features/alerting/unified/insights/mimir/rules/Firing.tsx b/public/app/features/alerting/unified/insights/mimir/rules/Firing.tsx index 5ade01a1580..12757821107 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/Firing.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/Firing.tsx @@ -2,7 +2,7 @@ import { ThresholdsMode } from '@grafana/data'; import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef } from '@grafana/schema'; -const QUERY = 'sum by (alertstate) (ALERTS{alertstate="firing"})'; +import { PANEL_STYLES } from '../../../home/Insights'; export function getFiringCloudAlertsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -11,15 +11,14 @@ export function getFiringCloudAlertsScene(timeRange: SceneTimeRange, datasource: { refId: 'A', instant: true, - expr: QUERY, + expr: 'sum by (alertstate) (ALERTS{alertstate="firing"})', }, ], $timeRange: timeRange, }); return new SceneFlexItem({ - width: 'calc(25% - 4px)', - height: 300, + ...PANEL_STYLES, body: PanelBuilders.stat() .setTitle(panelTitle) .setData(query) diff --git a/public/app/features/alerting/unified/insights/mimir/rules/InstancesByState.tsx b/public/app/features/alerting/unified/insights/mimir/rules/InstancesByState.tsx index 88ab15571a2..319ff52051a 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/InstancesByState.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/InstancesByState.tsx @@ -1,7 +1,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; -const QUERY = 'sum by (alertstate) (ALERTS)'; +import { PANEL_STYLES } from '../../../home/Insights'; export function getInstancesByStateScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -9,7 +9,7 @@ export function getInstancesByStateScene(timeRange: SceneTimeRange, datasource: queries: [ { refId: 'A', - expr: QUERY, + expr: 'sum by (alertstate) (ALERTS)', range: true, legendFormat: '{{state}}', }, @@ -18,8 +18,7 @@ export function getInstancesByStateScene(timeRange: SceneTimeRange, datasource: }); return new SceneFlexItem({ - width: 'calc(50% - 4px)', - height: 300, + ...PANEL_STYLES, body: PanelBuilders.timeseries() .setTitle(panelTitle) .setData(query) diff --git a/public/app/features/alerting/unified/insights/mimir/rules/InstancesPercentageByState.tsx b/public/app/features/alerting/unified/insights/mimir/rules/InstancesPercentageByState.tsx index 298aa62f9a1..04cf055d19f 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/InstancesPercentageByState.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/InstancesPercentageByState.tsx @@ -2,7 +2,7 @@ import { ThresholdsMode } from '@grafana/data'; import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; -const QUERY = 'sum by (alertstate) (ALERTS) / ignoring(alertstate) group_left sum(ALERTS)'; +import { PANEL_STYLES } from '../../../home/Insights'; export function getInstancesPercentageByStateScene( timeRange: SceneTimeRange, @@ -14,7 +14,7 @@ export function getInstancesPercentageByStateScene( queries: [ { refId: 'A', - expr: QUERY, + expr: 'sum by (alertstate) (ALERTS) / ignoring(alertstate) group_left sum(ALERTS)', range: true, legendFormat: '{{alertstate}}', }, @@ -23,8 +23,7 @@ export function getInstancesPercentageByStateScene( }); return new SceneFlexItem({ - width: 'calc(50% - 4px)', - height: 300, + ...PANEL_STYLES, body: PanelBuilders.timeseries() .setTitle(panelTitle) .setData(query) diff --git a/public/app/features/alerting/unified/insights/mimir/rules/MissedIterationsScene.tsx b/public/app/features/alerting/unified/insights/mimir/rules/MissedIterationsScene.tsx index ae2f8dc102a..051c1cbb58e 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/MissedIterationsScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/MissedIterationsScene.tsx @@ -1,7 +1,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; -const QUERY_A = 'sum(grafanacloud_instance_rule_group_iterations_missed_total:rate5m)'; +import { PANEL_STYLES } from '../../../home/Insights'; export function getMissedIterationsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -9,7 +9,7 @@ export function getMissedIterationsScene(timeRange: SceneTimeRange, datasource: queries: [ { refId: 'A', - expr: QUERY_A, + expr: 'sum(grafanacloud_instance_rule_group_iterations_missed_total:rate5m)', range: true, legendFormat: 'missed', }, @@ -18,8 +18,7 @@ export function getMissedIterationsScene(timeRange: SceneTimeRange, datasource: }); return new SceneFlexItem({ - width: 'calc(50% - 4px)', - height: 300, + ...PANEL_STYLES, body: PanelBuilders.timeseries() .setTitle(panelTitle) .setData(query) diff --git a/public/app/features/alerting/unified/insights/mimir/rules/MostFiredInstances.tsx b/public/app/features/alerting/unified/insights/mimir/rules/MostFiredInstances.tsx index 0f56724dfee..046199d800e 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/MostFiredInstances.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/MostFiredInstances.tsx @@ -1,7 +1,7 @@ import { PanelBuilders, SceneDataTransformer, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef } from '@grafana/schema'; -const TOP_5_FIRING_INSTANCES = 'topk(10, sum by (alertname) (ALERTS))'; +import { PANEL_STYLES } from '../../../home/Insights'; export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -9,7 +9,7 @@ export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource queries: [ { refId: 'A', - expr: TOP_5_FIRING_INSTANCES, + expr: 'topk(10, sum by (alertname) (ALERTS))', range: true, }, ], @@ -39,8 +39,7 @@ export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource }); return new SceneFlexItem({ - width: 'calc(50% - 8px)', - height: 300, + ...PANEL_STYLES, body: PanelBuilders.table().setTitle(panelTitle).setData(transformation).build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/rules/Pending.tsx b/public/app/features/alerting/unified/insights/mimir/rules/Pending.tsx index 42ea05a7903..515f2c437a5 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/Pending.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/Pending.tsx @@ -2,7 +2,7 @@ import { ThresholdsMode } from '@grafana/data'; import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef } from '@grafana/schema'; -const QUERY = 'sum by (alertstate) (ALERTS{alertstate="pending"})'; +import { PANEL_STYLES } from '../../../home/Insights'; export function getPendingCloudAlertsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -11,15 +11,14 @@ export function getPendingCloudAlertsScene(timeRange: SceneTimeRange, datasource { refId: 'A', instant: true, - expr: QUERY, + expr: 'sum by (alertstate) (ALERTS{alertstate="pending"})', }, ], $timeRange: timeRange, }); return new SceneFlexItem({ - width: 'calc(25% - 4px)', - height: 300, + ...PANEL_STYLES, body: PanelBuilders.stat() .setTitle(panelTitle) .setData(query)