Alerting: add help texts to insights (#76366)

* Change texts and add spacing between sections

* Minor text changes

* Display timeseries with 0 values if result is empty

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,29 +128,29 @@ export function getInsightsScenes() {
     );
   }
 
-  if (showMimirAlertmanager) {
+  if (showMimirManaged) {
     categories.push(
       new SceneFlexItem({
         ySizing: 'content',
-        body: getCloudScenes(),
+        body: getMimirManagedRulesScenes(),
       })
     );
   }
 
-  if (showMimirManaged) {
+  if (showMimirManagedPerGroup) {
     categories.push(
       new SceneFlexItem({
         ySizing: 'content',
-        body: getMimirManagedRulesScenes(),
+        body: getMimirManagedRulesPerGroupScenes(),
       })
     );
   }
 
-  if (showMimirManagedPerGroup) {
+  if (showMimirAlertmanager) {
     categories.push(
       new SceneFlexItem({
         ySizing: 'content',
-        body: getMimirManagedRulesPerGroupScenes(),
+        body: getCloudScenes(),
       })
     );
   }
@@ -159,7 +160,7 @@ export function getInsightsScenes() {
     controls: [
       new SceneReactObject({
         component: SectionSubheader,
-        props: { children: <div>Monitor the status of your system.</div>, datasources: [] },
+        props: { children: <div>Monitor the status of your system.</div> },
       }),
       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: <div>Grafana-managed rules</div>, 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: <div>Grafana Alertmanager</div>, 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: <div>Mimir Alertmanager</div>, 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: <div>Mimir-managed rules</div>, 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: <div>Mimir-managed Rules - Per Rule Group</div>, 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({

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 <div className={styles.sectionFooter}>{children && <div>{children}</div>}</div>;
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  sectionFooter: css({
+    marginBottom: theme.spacing(2),
+  }),
+});

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 (
     <div className={styles.container}>
-      <div>{children}</div>
-      <DataSourcesInfo datasources={datasources} />
+      {children}
+      {datasources && <DataSourcesInfo datasources={datasources} />}
     </div>
   );
 }

public/app/features/alerting/unified/insights/grafana/AlertsByStateScene.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes';
+import { PanelBuilders, SceneDataTransformer, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes';
 import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema';
 
 import { overrideToFixedColor, PANEL_STYLES } from '../../home/Insights';
@@ -19,19 +19,32 @@ export function getGrafanaInstancesByStateScene(datasource: DataSourceRef, panel
     ],
   });
 
+  const transformation = new SceneDataTransformer({
+    $data: query,
+    transformations: [
+      {
+        id: 'renameByRegex',
+        options: {
+          regex: 'alerting',
+          renamePattern: 'firing',
+        },
+      },
+    ],
+  });
+
   return new SceneFlexItem({
     ...PANEL_STYLES,
     height: '400px',
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
-      .setData(query)
+      .setDescription('A breakdown of all of your alert rule instances based on state')
+      .setData(transformation)
       .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
       .setOption('tooltip', { mode: TooltipDisplayMode.Multi })
       .setOverrides((b) =>
         b
-          .matchFieldsWithName('alerting')
-          .overrideColor(overrideToFixedColor('alerting'))
+          .matchFieldsWithName('firing')
+          .overrideColor(overrideToFixedColor('firing'))
           .matchFieldsWithName('normal')
           .overrideColor(overrideToFixedColor('normal'))
           .matchFieldsWithName('pending')

public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx

@@ -29,7 +29,7 @@ export function getGrafanaEvalSuccessVsFailuresScene(datasource: DataSourceRef,
     ...PANEL_STYLES,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The number of successful and failed alert rule evaluations')
       .setData(query)
       .setOption('tooltip', { mode: TooltipDisplayMode.Multi })
       .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)

public/app/features/alerting/unified/insights/grafana/Firing.tsx

@@ -23,7 +23,7 @@ export function getFiringGrafanaAlertsScene(datasource: DataSourceRef, panelTitl
     ...PANEL_STYLES,
     body: PanelBuilders.stat()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The number of currently firing alert rules')
       .setData(query)
       .setThresholds({
         mode: ThresholdsMode.Absolute,

public/app/features/alerting/unified/insights/grafana/InstanceStatusScene.tsx

@@ -8,6 +8,7 @@ import { InsightsRatingModal } from '../RatingModal';
 export function getInstanceStatByStatusScene(
   datasource: DataSourceRef,
   panelTitle: string,
+  panelDescription: string,
   status: 'alerting' | 'pending' | 'nodata' | 'normal' | 'error'
 ) {
   const query = new SceneQueryRunner({
@@ -26,7 +27,7 @@ export function getInstanceStatByStatusScene(
     height: '100%',
     body: PanelBuilders.stat()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription(panelDescription)
       .setData(query)
       .setOverrides((b) => b.matchFieldsWithName(status).overrideColor(overrideToFixedColor(status)))
       .setNoValue('0')

public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx

@@ -58,7 +58,7 @@ export function getGrafanaMissedIterationsScene(datasource: DataSourceRef, panel
     ...PANEL_STYLES,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The number of missed iterations per evaluation group')
       .setData(transformation)
       .setOption('tooltip', { mode: TooltipDisplayMode.Multi })
       .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)

public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx

@@ -88,7 +88,7 @@ export function getMostFiredInstancesScene(datasource: DataSourceRef, panelTitle
           },
           renameByName: {
             labels_alertname: 'Alert rule name',
-            'Value #A': 'Fires this week',
+            'Value #A': 'Number of fires',
           },
         },
       },
@@ -99,7 +99,7 @@ export function getMostFiredInstancesScene(datasource: DataSourceRef, panelTitle
     ...PANEL_STYLES,
     body: PanelBuilders.table()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The alert rule instances that have fired the most')
       .setData(transformation)
       .setNoValue('No new alerts fired last week')
       .setHeaderActions(<InsightsRatingModal panel={panelTitle} />)

public/app/features/alerting/unified/insights/grafana/Paused.tsx

@@ -23,7 +23,7 @@ export function getPausedGrafanaAlertsScene(datasource: DataSourceRef, panelTitl
     ...PANEL_STYLES,
     body: PanelBuilders.stat()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The number of current paused alert rules')
       .setData(query)
       .setThresholds({
         mode: ThresholdsMode.Absolute,

public/app/features/alerting/unified/insights/grafana/RulesByEvaluation.tsx

@@ -23,7 +23,7 @@ export function getGrafanaRulesByEvaluationScene(datasource: DataSourceRef, pane
     ...PANEL_STYLES,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('See how many of your alert rules are paused or active')
       .setData(query)
       .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
       .setOption('tooltip', { mode: TooltipDisplayMode.Multi })

public/app/features/alerting/unified/insights/grafana/RulesByEvaluationPercentage.tsx

@@ -23,7 +23,7 @@ export function getGrafanaRulesByEvaluationPercentageScene(datasource: DataSourc
     ...PANEL_STYLES,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('See what percentage of your alert rules are paused or active')
       .setData(query)
       .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
       .setCustomFieldConfig('fillOpacity', 45)

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

@@ -12,7 +12,7 @@ export function getGrafanaAlertmanagerNotificationsScene(datasource: DataSourceR
     queries: [
       {
         refId: 'A',
-        expr: 'grafanacloud_grafana_instance_alerting_notifications_total:rate5m - grafanacloud_grafana_instance_alerting_notifications_failed_total:rate5m',
+        expr: '(grafanacloud_grafana_instance_alerting_notifications_total:rate5m - grafanacloud_grafana_instance_alerting_notifications_failed_total:rate5m) or vector(0)',
         range: true,
         legendFormat: 'success',
       },
@@ -29,7 +29,7 @@ export function getGrafanaAlertmanagerNotificationsScene(datasource: DataSourceR
     ...PANEL_STYLES,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The number of successful and failed notifications')
       .setData(query)
       .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
       .setOption('tooltip', { mode: TooltipDisplayMode.Multi })

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

@@ -23,7 +23,7 @@ export function getGrafanaAlertmanagerSilencesScene(datasource: DataSourceRef, p
     ...PANEL_STYLES,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The number of silences by state')
       .setData(query)
       .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
       .setOption('tooltip', { mode: TooltipDisplayMode.Multi })

public/app/features/alerting/unified/insights/mimir/AlertsByState.tsx

@@ -23,7 +23,7 @@ export function getAlertsByStateScene(datasource: DataSourceRef, panelTitle: str
     ...PANEL_STYLES,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('A breakdown of all of your firing alert rule instances based on state')
       .setData(query)
       .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
       .setOption('tooltip', { mode: TooltipDisplayMode.Multi })

public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx

@@ -23,7 +23,7 @@ export function getInvalidConfigScene(datasource: DataSourceRef, panelTitle: str
     ...PANEL_STYLES,
     body: PanelBuilders.stat()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The current state of your alertmanager configuration')
       .setData(query)
       .setUnit('bool_yes_no')
       .setOption('graphMode', BigValueGraphMode.None)

public/app/features/alerting/unified/insights/mimir/Notifications.tsx

@@ -29,7 +29,7 @@ export function getNotificationsScene(datasource: DataSourceRef, panelTitle: str
     ...PANEL_STYLES,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The number of successful and failed notifications')
       .setData(query)
       .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
       .setOption('tooltip', { mode: TooltipDisplayMode.Multi })

public/app/features/alerting/unified/insights/mimir/Silences.tsx

@@ -23,7 +23,7 @@ export function getSilencesScene(datasource: DataSourceRef, panelTitle: string)
     ...PANEL_STYLES,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The number of silences by state')
       .setData(query)
       .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
       .setOption('tooltip', { mode: TooltipDisplayMode.Multi })

public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationIntervalRatioScene.tsx

@@ -23,7 +23,7 @@ export function getRuleGroupEvaluationDurationIntervalRatioScene(datasource: Dat
     ...PANEL_STYLES,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The percentage of interval time spent evaluating')
       .setData(query)
       .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
       .setOption('tooltip', { mode: TooltipDisplayMode.Multi })

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

@@ -23,7 +23,7 @@ export function getRuleGroupEvaluationDurationScene(datasource: DataSourceRef, p
     ...PANEL_STYLES,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('How long it took to evaluate the rule group')
       .setData(query)
       .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
       .setUnit('s')

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

@@ -29,7 +29,7 @@ export function getRuleGroupEvaluationsScene(datasource: DataSourceRef, panelTit
     ...PANEL_STYLES,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The number of successful and failed evaluations for the rule group')
       .setData(query)
       .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
       .setOption('tooltip', { mode: TooltipDisplayMode.Multi })

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

@@ -23,7 +23,7 @@ export function getRuleGroupIntervalScene(datasource: DataSourceRef, panelTitle:
     ...PANEL_STYLES,
     body: PanelBuilders.stat()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The current and historical rule group evaluation interval')
       .setData(query)
       .setUnit('s')
       .setOption('graphMode', BigValueGraphMode.Area)

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

@@ -23,7 +23,7 @@ export function getRulesPerGroupScene(datasource: DataSourceRef, panelTitle: str
     ...PANEL_STYLES,
     body: PanelBuilders.stat()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The current and historical number of alert rules in the rule group')
       .setData(query)
       .setUnit('none')
       .setOption('graphMode', BigValueGraphMode.Area)

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

@@ -29,7 +29,7 @@ export function getEvalSuccessVsFailuresScene(datasource: DataSourceRef, panelTi
     ...PANEL_STYLES,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The number of successful and failed alert rule evaluations')
       .setData(query)
       .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
       .setOption('tooltip', { mode: TooltipDisplayMode.Multi })

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

@@ -23,7 +23,7 @@ export function getFiringCloudAlertsScene(datasource: DataSourceRef, panelTitle:
     ...PANEL_STYLES,
     body: PanelBuilders.stat()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The number of currently firing alert rule instances')
       .setData(query)
       .setThresholds({
         mode: ThresholdsMode.Absolute,

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

@@ -23,7 +23,7 @@ export function getInstancesByStateScene(datasource: DataSourceRef, panelTitle:
     ...PANEL_STYLES,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The number of firing and pending alert rule instances')
       .setData(query)
       .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
       .setOption('tooltip', { mode: TooltipDisplayMode.Multi })

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

@@ -23,7 +23,7 @@ export function getInstancesPercentageByStateScene(datasource: DataSourceRef, pa
     ...PANEL_STYLES,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('See what percentage of your alert rules are firing versus pending')
       .setData(query)
       .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
       .setCustomFieldConfig('fillOpacity', 45)

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

@@ -23,7 +23,7 @@ export function getMissedIterationsScene(datasource: DataSourceRef, panelTitle:
     ...PANEL_STYLES,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The number of evaluations missed')
       .setData(query)
       .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
       .setOption('tooltip', { mode: TooltipDisplayMode.Multi })

public/app/features/alerting/unified/insights/mimir/rules/MostFiredRules.tsx

@@ -43,7 +43,7 @@ export function getMostFiredRulesScene(datasource: DataSourceRef, panelTitle: st
     ...PANEL_STYLES,
     body: PanelBuilders.table()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The alert rules that have fired the most')
       .setData(transformation)
       .setHeaderActions(<InsightsRatingModal panel={panelTitle} />)
       .build(),

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

@@ -23,7 +23,7 @@ export function getPendingCloudAlertsScene(datasource: DataSourceRef, panelTitle
     ...PANEL_STYLES,
     body: PanelBuilders.stat()
       .setTitle(panelTitle)
-      .setDescription(panelTitle)
+      .setDescription('The number of currently pending alert rule instances')
       .setData(query)
       .setThresholds({
         mode: ThresholdsMode.Absolute,