diff --git a/public/app/features/alerting/unified/home/Insights.tsx b/public/app/features/alerting/unified/home/Insights.tsx
index 289b77c7def..33ec4e4f9b7 100644
--- a/public/app/features/alerting/unified/home/Insights.tsx
+++ b/public/app/features/alerting/unified/home/Insights.tsx
@@ -17,6 +17,7 @@ import {
VariableValueSelectors,
} from '@grafana/scenes';
+import { SectionFooter } from '../insights/SectionFooter';
import { SectionSubheader } from '../insights/SectionSubheader';
import { getGrafanaInstancesByStateScene } from '../insights/grafana/AlertsByStateScene';
import { getGrafanaEvalSuccessVsFailuresScene } from '../insights/grafana/EvalSuccessVsFailuresScene';
@@ -127,15 +128,6 @@ export function getInsightsScenes() {
);
}
- if (showMimirAlertmanager) {
- categories.push(
- new SceneFlexItem({
- ySizing: 'content',
- body: getCloudScenes(),
- })
- );
- }
-
if (showMimirManaged) {
categories.push(
new SceneFlexItem({
@@ -154,12 +146,21 @@ export function getInsightsScenes() {
);
}
+ if (showMimirAlertmanager) {
+ categories.push(
+ new SceneFlexItem({
+ ySizing: 'content',
+ body: getCloudScenes(),
+ })
+ );
+ }
+
return new EmbeddedScene({
$timeRange: THIS_WEEK_TIME_RANGE,
controls: [
new SceneReactObject({
component: SectionSubheader,
- props: { children: Monitor the status of your system.
, datasources: [] },
+ props: { children: Monitor the status of your system.
},
}),
new SceneControlsSpacer(),
new SceneTimePicker({}),
@@ -180,18 +181,12 @@ function getGrafanaManagedScenes() {
body: new SceneFlexLayout({
direction: 'column',
children: [
- new SceneFlexItem({
- body: new SceneReactObject({
- component: SectionSubheader,
- props: { children: Grafana-managed rules
, datasources: [] },
- }),
- }),
new SceneFlexLayout({
direction: 'column',
children: [
new SceneFlexLayout({
children: [
- getMostFiredInstancesScene(ashDs, 'Top 10 firing instances this week'),
+ getMostFiredInstancesScene(ashDs, 'Top 10 firing instances'),
getFiringGrafanaAlertsScene(cloudUsageDs, 'Firing rules'),
getPausedGrafanaAlertsScene(cloudUsageDs, 'Paused rules'),
],
@@ -206,14 +201,34 @@ function getGrafanaManagedScenes() {
new SceneFlexLayout({
height: '400px',
children: [
- getInstanceStatByStatusScene(cloudUsageDs, 'Alerting instances', 'alerting'),
- getInstanceStatByStatusScene(cloudUsageDs, 'Pending instances', 'pending'),
+ getInstanceStatByStatusScene(
+ cloudUsageDs,
+ 'Firing instances',
+ 'The number of currently firing alert rule instances',
+ 'alerting'
+ ),
+ getInstanceStatByStatusScene(
+ cloudUsageDs,
+ 'Pending instances',
+ 'The number of currently pending alert rule instances',
+ 'pending'
+ ),
],
}),
new SceneFlexLayout({
children: [
- getInstanceStatByStatusScene(cloudUsageDs, 'No data instances', 'nodata'),
- getInstanceStatByStatusScene(cloudUsageDs, 'Error instances', 'error'),
+ getInstanceStatByStatusScene(
+ cloudUsageDs,
+ 'No data instances',
+ 'The current number of alert rule instances in No data state',
+ 'nodata'
+ ),
+ getInstanceStatByStatusScene(
+ cloudUsageDs,
+ 'Error instances',
+ 'The current number of alert rule instances in Error state',
+ 'error'
+ ),
],
}),
],
@@ -234,6 +249,9 @@ function getGrafanaManagedScenes() {
}),
],
}),
+ new SceneReactObject({
+ component: SectionFooter,
+ }),
],
}),
});
@@ -247,18 +265,15 @@ function getGrafanaAlertmanagerScenes() {
body: new SceneFlexLayout({
direction: 'column',
children: [
- new SceneFlexItem({
- body: new SceneReactObject({
- component: SectionSubheader,
- props: { children: Grafana Alertmanager
, datasources: [] },
- }),
- }),
new SceneFlexLayout({
children: [
- getGrafanaAlertmanagerNotificationsScene(cloudUsageDs, 'Notifications'),
+ getGrafanaAlertmanagerNotificationsScene(cloudUsageDs, 'Notification delivery'),
getGrafanaAlertmanagerSilencesScene(cloudUsageDs, 'Silences'),
],
}),
+ new SceneReactObject({
+ component: SectionFooter,
+ }),
],
}),
});
@@ -275,13 +290,13 @@ function getCloudScenes() {
new SceneFlexItem({
body: new SceneReactObject({
component: SectionSubheader,
- props: { children: Mimir Alertmanager
, datasources: [cloudUsageDs] },
+ props: { datasources: [cloudUsageDs] },
}),
}),
new SceneFlexLayout({
children: [
- getAlertsByStateScene(cloudUsageDs, 'Alerts by state'),
- getNotificationsScene(cloudUsageDs, 'Notifications'),
+ getAlertsByStateScene(cloudUsageDs, 'Firing alerts by state'),
+ getNotificationsScene(cloudUsageDs, 'Notification delivery'),
],
}),
new SceneFlexLayout({
@@ -290,6 +305,9 @@ function getCloudScenes() {
getInvalidConfigScene(cloudUsageDs, 'Invalid configuration'),
],
}),
+ new SceneReactObject({
+ component: SectionFooter,
+ }),
],
}),
});
@@ -306,28 +324,31 @@ function getMimirManagedRulesScenes() {
new SceneFlexItem({
body: new SceneReactObject({
component: SectionSubheader,
- props: { children: Mimir-managed rules
, datasources: [grafanaCloudPromDs, cloudUsageDs] },
+ props: { datasources: [grafanaCloudPromDs, cloudUsageDs] },
}),
}),
new SceneFlexLayout({
children: [
- getMostFiredRulesScene(grafanaCloudPromDs, 'Top 10 firing rules this week'),
+ getMostFiredRulesScene(grafanaCloudPromDs, 'Top 10 firing rules'),
getFiringCloudAlertsScene(grafanaCloudPromDs, 'Firing instances'),
getPendingCloudAlertsScene(grafanaCloudPromDs, 'Pending instances'),
],
}),
new SceneFlexLayout({
children: [
- getInstancesByStateScene(grafanaCloudPromDs, 'Count of alert instances by state'),
- getInstancesPercentageByStateScene(grafanaCloudPromDs, '% of alert instances by State'),
+ getInstancesByStateScene(grafanaCloudPromDs, 'Firing and pending alert instances'),
+ getInstancesPercentageByStateScene(grafanaCloudPromDs, '% of alert instances by state'),
],
}),
new SceneFlexLayout({
children: [
getEvalSuccessVsFailuresScene(cloudUsageDs, 'Evaluation success vs failures'),
- getMissedIterationsScene(cloudUsageDs, 'Iterations missed'),
+ getMissedIterationsScene(cloudUsageDs, 'Missed evaluations'),
],
}),
+ new SceneReactObject({
+ component: SectionFooter,
+ }),
],
}),
});
@@ -351,7 +372,7 @@ function getMimirManagedRulesPerGroupScenes() {
new SceneFlexItem({
body: new SceneReactObject({
component: SectionSubheader,
- props: { children: Mimir-managed Rules - Per Rule Group
, datasources: [cloudUsageDs] },
+ props: { datasources: [cloudUsageDs] },
}),
}),
new SceneFlexLayout({
@@ -367,6 +388,9 @@ function getMimirManagedRulesPerGroupScenes() {
getRuleGroupEvaluationDurationIntervalRatioScene(cloudUsageDs, 'Evaluation duration / interval ratio'),
],
}),
+ new SceneReactObject({
+ component: SectionFooter,
+ }),
],
}),
$variables: new SceneVariableSet({
diff --git a/public/app/features/alerting/unified/insights/SectionFooter.tsx b/public/app/features/alerting/unified/insights/SectionFooter.tsx
new file mode 100644
index 00000000000..337352ea18c
--- /dev/null
+++ b/public/app/features/alerting/unified/insights/SectionFooter.tsx
@@ -0,0 +1,17 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data/src/themes';
+import { useStyles2 } from '@grafana/ui';
+
+export function SectionFooter({ children }: React.PropsWithChildren<{}>) {
+ const styles = useStyles2(getStyles);
+
+ return ;
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ sectionFooter: css({
+ marginBottom: theme.spacing(2),
+ }),
+});
diff --git a/public/app/features/alerting/unified/insights/SectionSubheader.tsx b/public/app/features/alerting/unified/insights/SectionSubheader.tsx
index 7c0a9dda0a3..3490ed2a01c 100644
--- a/public/app/features/alerting/unified/insights/SectionSubheader.tsx
+++ b/public/app/features/alerting/unified/insights/SectionSubheader.tsx
@@ -11,13 +11,13 @@ import { DataSourcesInfo } from './DataSourcesInfo';
export function SectionSubheader({
children,
datasources,
-}: React.PropsWithChildren<{ datasources: DataSourceInformation[] }>) {
+}: React.PropsWithChildren<{ datasources?: DataSourceInformation[] }>) {
const styles = useStyles2(getStyles);
return (
-
{children}
-
+ {children}
+ {datasources &&
}