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