diff --git a/public/app/features/alerting/unified/home/Home.tsx b/public/app/features/alerting/unified/home/Home.tsx index 011876109b0..c5656587529 100644 --- a/public/app/features/alerting/unified/home/Home.tsx +++ b/public/app/features/alerting/unified/home/Home.tsx @@ -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, }), diff --git a/public/app/features/alerting/unified/home/Insights.tsx b/public/app/features/alerting/unified/home/Insights.tsx index acdb627703e..80aab01b348 100644 --- a/public/app/features/alerting/unified/home/Insights.tsx +++ b/public/app/features/alerting/unified/home/Insights.tsx @@ -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
{children}
; +} + +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:
Grafana-managed rules
}, + }), + }), + 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:
Grafana Alertmanager
}, + }), }), 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:
Mimir Alertmanager
}, + }), + }), 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:
Mimir-managed rules
}, + }), + }), 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:
Mimir-managed Rules - Per Rule Group
}, + }), + }), 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' + ), ], }), ], diff --git a/public/app/features/alerting/unified/insights/grafana/AlertsByStateScene.tsx b/public/app/features/alerting/unified/insights/grafana/AlertsByStateScene.tsx new file mode 100644 index 00000000000..0a6cf12267a --- /dev/null +++ b/public/app/features/alerting/unified/insights/grafana/AlertsByStateScene.tsx @@ -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(), + }); +} diff --git a/public/app/features/alerting/unified/insights/grafana/EvalDurationScene.tsx b/public/app/features/alerting/unified/insights/grafana/EvalDurationScene.tsx index 13de44bc4d1..014d653e873 100644 --- a/public/app/features/alerting/unified/insights/grafana/EvalDurationScene.tsx +++ b/public/app/features/alerting/unified/insights/grafana/EvalDurationScene.tsx @@ -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(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx b/public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx index a3a07ca0b16..62a8bda86cd 100644 --- a/public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx +++ b/public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx @@ -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(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/Firing.tsx b/public/app/features/alerting/unified/insights/grafana/Firing.tsx index de8a85bd9f8..a4c01935a9d 100644 --- a/public/app/features/alerting/unified/insights/grafana/Firing.tsx +++ b/public/app/features/alerting/unified/insights/grafana/Firing.tsx @@ -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(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/FiringAlertsPercentage.tsx b/public/app/features/alerting/unified/insights/grafana/FiringAlertsPercentage.tsx index b0cf530d996..982ccf8c17c 100644 --- a/public/app/features/alerting/unified/insights/grafana/FiringAlertsPercentage.tsx +++ b/public/app/features/alerting/unified/insights/grafana/FiringAlertsPercentage.tsx @@ -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(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/FiringAlertsRate.tsx b/public/app/features/alerting/unified/insights/grafana/FiringAlertsRate.tsx index c9c2b48a2aa..abb02efe280 100644 --- a/public/app/features/alerting/unified/insights/grafana/FiringAlertsRate.tsx +++ b/public/app/features/alerting/unified/insights/grafana/FiringAlertsRate.tsx @@ -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) diff --git a/public/app/features/alerting/unified/insights/grafana/InstanceStatusScene.tsx b/public/app/features/alerting/unified/insights/grafana/InstanceStatusScene.tsx new file mode 100644 index 00000000000..f73b353e60f --- /dev/null +++ b/public/app/features/alerting/unified/insights/grafana/InstanceStatusScene.tsx @@ -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(), + }); +} diff --git a/public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx b/public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx index 088dccfc6ba..d079fddd7bd 100644 --- a/public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx +++ b/public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx @@ -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) => { + 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(), }); diff --git a/public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx b/public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx index 76b1c894de8..07ae5b7c077 100644 --- a/public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx +++ b/public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx @@ -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 ( - - {value} - - ); + return ; }), }; }; @@ -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 ( +
+ + {value} + +
+ ); +} diff --git a/public/app/features/alerting/unified/insights/grafana/MostFiredRulesTable.tsx b/public/app/features/alerting/unified/insights/grafana/MostFiredRulesTable.tsx index 2ddaf8f7bc9..a74012a2fa2 100644 --- a/public/app/features/alerting/unified/insights/grafana/MostFiredRulesTable.tsx +++ b/public/app/features/alerting/unified/insights/grafana/MostFiredRulesTable.tsx @@ -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(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/MostFiringLabels.tsx b/public/app/features/alerting/unified/insights/grafana/MostFiringLabels.tsx index 46fc3d46fd8..1a6c054846f 100644 --- a/public/app/features/alerting/unified/insights/grafana/MostFiringLabels.tsx +++ b/public/app/features/alerting/unified/insights/grafana/MostFiringLabels.tsx @@ -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(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/Paused.tsx b/public/app/features/alerting/unified/insights/grafana/Paused.tsx index 26cf69201ac..1ddd5dcb6c2 100644 --- a/public/app/features/alerting/unified/insights/grafana/Paused.tsx +++ b/public/app/features/alerting/unified/insights/grafana/Paused.tsx @@ -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(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/InstancesByState.tsx b/public/app/features/alerting/unified/insights/grafana/RulesByEvaluation.tsx similarity index 57% rename from public/app/features/alerting/unified/insights/grafana/InstancesByState.tsx rename to public/app/features/alerting/unified/insights/grafana/RulesByEvaluation.tsx index 00ba27a6659..bd4ebabc668 100644 --- a/public/app/features/alerting/unified/insights/grafana/InstancesByState.tsx +++ b/public/app/features/alerting/unified/insights/grafana/RulesByEvaluation.tsx @@ -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(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/InstancesPercentageByState.tsx b/public/app/features/alerting/unified/insights/grafana/RulesByEvaluationPercentage.tsx similarity index 62% rename from public/app/features/alerting/unified/insights/grafana/InstancesPercentageByState.tsx rename to public/app/features/alerting/unified/insights/grafana/RulesByEvaluationPercentage.tsx index 04148a29729..ebc91e8172c 100644 --- a/public/app/features/alerting/unified/insights/grafana/InstancesPercentageByState.tsx +++ b/public/app/features/alerting/unified/insights/grafana/RulesByEvaluationPercentage.tsx @@ -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(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/alertmanager/AlertsByStateScene.tsx b/public/app/features/alerting/unified/insights/grafana/alertmanager/AlertsByStateScene.tsx deleted file mode 100644 index 6107bbfd3cc..00000000000 --- a/public/app/features/alerting/unified/insights/grafana/alertmanager/AlertsByStateScene.tsx +++ /dev/null @@ -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(), - }); -} diff --git a/public/app/features/alerting/unified/insights/grafana/alertmanager/NotificationsScene.tsx b/public/app/features/alerting/unified/insights/grafana/alertmanager/NotificationsScene.tsx index e87740f7485..55801286c9b 100644 --- a/public/app/features/alerting/unified/insights/grafana/alertmanager/NotificationsScene.tsx +++ b/public/app/features/alerting/unified/insights/grafana/alertmanager/NotificationsScene.tsx @@ -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(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/alertmanager/SilencesByStateScene.tsx b/public/app/features/alerting/unified/insights/grafana/alertmanager/SilencesByStateScene.tsx index 6818eb32b60..6cd9c679667 100644 --- a/public/app/features/alerting/unified/insights/grafana/alertmanager/SilencesByStateScene.tsx +++ b/public/app/features/alerting/unified/insights/grafana/alertmanager/SilencesByStateScene.tsx @@ -25,6 +25,7 @@ export function getGrafanaAlertmanagerSilencesScene( ...PANEL_STYLES, body: PanelBuilders.timeseries() .setTitle(panelTitle) + .setDescription(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 fc424c9d711..7c5cd0ce137 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'; +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(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx b/public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx index 9a092e314c2..d1e20e97809 100644 --- a/public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx +++ b/public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx @@ -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(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/Notifications.tsx b/public/app/features/alerting/unified/insights/mimir/Notifications.tsx index 77c50e352a4..aa514af236a 100644 --- a/public/app/features/alerting/unified/insights/mimir/Notifications.tsx +++ b/public/app/features/alerting/unified/insights/mimir/Notifications.tsx @@ -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(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/Silences.tsx b/public/app/features/alerting/unified/insights/mimir/Silences.tsx index 76271cde7db..bad8a823edd 100644 --- a/public/app/features/alerting/unified/insights/mimir/Silences.tsx +++ b/public/app/features/alerting/unified/insights/mimir/Silences.tsx @@ -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(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationIntervalRatioScene.tsx b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationIntervalRatioScene.tsx new file mode 100644 index 00000000000..d9d9a924feb --- /dev/null +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationIntervalRatioScene.tsx @@ -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(), + }); +} 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 e379d429c70..11e262bd5b2 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationScene.tsx @@ -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(), }); } 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 f719f61f013..b24529c7f31 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationsScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationsScene.tsx @@ -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(), }); } 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 03a3ae7a637..de988a3692f 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupIntervalScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupIntervalScene.tsx @@ -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(), }); } 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 36c03fa67a0..9703b10950d 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RulesPerGroupScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RulesPerGroupScene.tsx @@ -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(), }); } 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 26f8c3bcf99..7e77c99abfb 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/EvalSuccessVsFailuresScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/EvalSuccessVsFailuresScene.tsx @@ -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(), }); } 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 12757821107..eadd850caed 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/Firing.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/Firing.tsx @@ -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(), }); } 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 319ff52051a..34507e043b3 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'; +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(), }); } 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 04cf055d19f..477fbccc833 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/InstancesPercentageByState.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/InstancesPercentageByState.tsx @@ -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(), }); } 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 051c1cbb58e..392a134addd 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'; +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(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/rules/MostFiredInstances.tsx b/public/app/features/alerting/unified/insights/mimir/rules/MostFiredRules.tsx similarity index 60% rename from public/app/features/alerting/unified/insights/mimir/rules/MostFiredInstances.tsx rename to public/app/features/alerting/unified/insights/mimir/rules/MostFiredRules.tsx index 046199d800e..9e5f912a3e9 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/MostFiredInstances.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/MostFiredRules.tsx @@ -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(), }); } 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 515f2c437a5..9a33b7c8386 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/Pending.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/Pending.tsx @@ -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(), }); }