Alerting: Add missing scenes for grafana managed alerts (#75100)

* Add new scenes for grafana managed alerts

* Remove unused import

* Fix lint

* Remove width property from SceneFlexItem

* Add missing scenes for GMA section

* Improve scenes layout

* Add Grafana Alertmanager panels

* Fix lint

* Fix lint

* Refactor expression variables

* Apply shared styles to scenes

public/app/features/alerting/unified/home/Insights.tsx

@@ -9,9 +9,17 @@ import {
   VariableValueSelectors,
 } from '@grafana/scenes';
 
-import { getFiringAlertsScene } from '../insights/grafana/FiringAlertsPercentage';
+import { getGrafanaEvalDurationScene } from '../insights/grafana/EvalDurationScene';
-import { getFiringAlertsRateScene } from '../insights/grafana/FiringAlertsRate';
+import { getGrafanaEvalSuccessVsFailuresScene } from '../insights/grafana/EvalSuccessVsFailuresScene';
+import { getFiringGrafanaAlertsScene } from '../insights/grafana/Firing';
+import { getGrafanaInstancesByStateScene } from '../insights/grafana/InstancesByState';
+import { getGrafanaInstancesPercentageByStateScene } from '../insights/grafana/InstancesPercentageByState';
+import { getGrafanaMissedIterationsScene } from '../insights/grafana/MissedIterationsScene';
 import { getMostFiredInstancesScene } from '../insights/grafana/MostFiredInstancesTable';
+import { getPausedGrafanaAlertsScene } from '../insights/grafana/Paused';
+import { getGrafanaAlertmanagerInstancesByStateScene } from '../insights/grafana/alertmanager/AlertsByStateScene';
+import { getGrafanaAlertmanagerNotificationsScene } from '../insights/grafana/alertmanager/NotificationsScene';
+import { getGrafanaAlertmanagerSilencesScene } from '../insights/grafana/alertmanager/SilencesByStateScene';
 import { getAlertsByStateScene } from '../insights/mimir/AlertsByState';
 import { getInvalidConfigScene } from '../insights/mimir/InvalidConfig';
 import { getNotificationsScene } from '../insights/mimir/Notifications';
@@ -43,6 +51,8 @@ const grafanaCloudPromDs = {
   uid: 'grafanacloud-prom',
 };
 
+export const PANEL_STYLES = { minHeight: 300 };
+
 const THIS_WEEK_TIME_RANGE = new SceneTimeRange({ from: 'now-1w', to: 'now' });
 const LAST_WEEK_TIME_RANGE = new SceneTimeRange({ from: 'now-2w', to: 'now-1w' });
 
@@ -54,15 +64,33 @@ export function getGrafanaScenes() {
         new SceneFlexLayout({
           children: [
             getMostFiredInstancesScene(THIS_WEEK_TIME_RANGE, ashDs, 'Top 10 firing instances this week'),
-            getFiringAlertsRateScene(THIS_WEEK_TIME_RANGE, ashDs, 'Alerts firing per minute'),
+            getFiringGrafanaAlertsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Firing'),
+            getPausedGrafanaAlertsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Paused'),
           ],
         }),
         new SceneFlexLayout({
           children: [
-            getFiringAlertsScene(THIS_WEEK_TIME_RANGE, ashDs, 'Firing alerts this week'),
+            getGrafanaInstancesByStateScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Count of alert instances by state'),
-            getFiringAlertsScene(LAST_WEEK_TIME_RANGE, ashDs, 'Firing alerts last week'),
+            getGrafanaInstancesPercentageByStateScene(
+              THIS_WEEK_TIME_RANGE,
+              cloudUsageDs,
+              '% of Alert Instances by State'
+            ),
           ],
         }),
+        new SceneFlexLayout({
+          children: [
+            getGrafanaEvalSuccessVsFailuresScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Evaluation Success vs Failures'),
+            getGrafanaMissedIterationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Iterations Missed'),
+          ],
+        }),
+        new SceneFlexLayout({
+          children: [getGrafanaEvalDurationScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Evaluation Duration')],
+        }),
+        new SceneFlexItem({
+          ySizing: 'content',
+          body: getGrafanaAlertmanagerScenes(),
+        }),
         new SceneFlexItem({
           ySizing: 'content',
           body: getCloudScenes(),
@@ -80,18 +108,48 @@ export function getGrafanaScenes() {
   });
 }
 
+function getGrafanaAlertmanagerScenes() {
+  return new NestedScene({
+    title: 'Grafana Alertmanager',
+    canCollapse: true,
+    isCollapsed: false,
+    body: new SceneFlexLayout({
+      direction: 'column',
+      children: [
+        new SceneFlexLayout({
+          children: [
+            getGrafanaAlertmanagerInstancesByStateScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Alerts by State'),
+            getGrafanaAlertmanagerNotificationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Notifications'),
+          ],
+        }),
+        new SceneFlexLayout({
+          children: [getGrafanaAlertmanagerSilencesScene(LAST_WEEK_TIME_RANGE, cloudUsageDs, 'Silences')],
+        }),
+      ],
+    }),
+  });
+}
+
 function getCloudScenes() {
   return new NestedScene({
     title: 'Mimir alertmanager',
     canCollapse: true,
-    isCollapsed: true,
+    isCollapsed: false,
     body: new SceneFlexLayout({
-      wrap: 'wrap',
+      direction: 'column',
       children: [
-        getAlertsByStateScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Alerts by State'),
+        new SceneFlexLayout({
-        getNotificationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Notifications'),
+          children: [
-        getSilencesScene(LAST_WEEK_TIME_RANGE, cloudUsageDs, 'Silences'),
+            getAlertsByStateScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Alerts by State'),
-        getInvalidConfigScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Invalid configuration'),
+            getNotificationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Notifications'),
+          ],
+        }),
+        new SceneFlexLayout({
+          children: [
+            getSilencesScene(LAST_WEEK_TIME_RANGE, cloudUsageDs, 'Silences'),
+            getInvalidConfigScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Invalid configuration'),
+          ],
+        }),
       ],
     }),
   });
@@ -101,19 +159,33 @@ function getMimirManagedRulesScenes() {
   return new NestedScene({
     title: 'Mimir-managed rules',
     canCollapse: true,
-    isCollapsed: true,
+    isCollapsed: false,
     body: new SceneFlexLayout({
-      wrap: 'wrap',
+      direction: 'column',
       children: [
-        getMostFiredCloudInstances(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, 'Top 10 firing instance this week'),
+        new SceneFlexLayout({
-        getFiringCloudAlertsScene(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, 'Firing'),
+          children: [
-        getPendingCloudAlertsScene(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, 'Pending'),
+            getMostFiredCloudInstances(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, 'Top 10 firing instance this week'),
-
+            getFiringCloudAlertsScene(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, 'Firing'),
-        getInstancesByStateScene(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, 'Count of alert instances by state'),
+            getPendingCloudAlertsScene(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, 'Pending'),
-        getInstancesPercentageByStateScene(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, '% of Alert Instances by State'),
+          ],
-
+        }),
-        getEvalSuccessVsFailuresScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Evaluation Success vs Failures'),
+        new SceneFlexLayout({
-        getMissedIterationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Iterations Missed'),
+          children: [
+            getInstancesByStateScene(THIS_WEEK_TIME_RANGE, grafanaCloudPromDs, 'Count of alert instances by state'),
+            getInstancesPercentageByStateScene(
+              THIS_WEEK_TIME_RANGE,
+              grafanaCloudPromDs,
+              '% of Alert Instances by State'
+            ),
+          ],
+        }),
+        new SceneFlexLayout({
+          children: [
+            getEvalSuccessVsFailuresScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Evaluation Success vs Failures'),
+            getMissedIterationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Iterations Missed'),
+          ],
+        }),
       ],
     }),
   });
@@ -130,14 +202,22 @@ function getMimirManagedRulesPerGroupScenes() {
   return new NestedScene({
     title: 'Mimir-managed Rules - Per Rule Group',
     canCollapse: true,
-    isCollapsed: true,
+    isCollapsed: false,
     body: new SceneFlexLayout({
-      wrap: 'wrap',
+      direction: 'column',
       children: [
-        getRuleGroupEvaluationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rule Group Evaluation'),
+        new SceneFlexLayout({
-        getRuleGroupIntervalScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rule Group Interval'),
+          children: [
-        getRuleGroupEvaluationDurationScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rule Group Evaluation Duration'),
+            getRuleGroupEvaluationsScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rule Group Evaluation'),
-        getRulesPerGroupScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rules per Group'),
+            getRuleGroupIntervalScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rule Group Interval'),
+          ],
+        }),
+        new SceneFlexLayout({
+          children: [
+            getRuleGroupEvaluationDurationScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rule Group Evaluation Duration'),
+            getRulesPerGroupScene(THIS_WEEK_TIME_RANGE, cloudUsageDs, 'Rules per Group'),
+          ],
+        }),
       ],
     }),
     $variables: new SceneVariableSet({

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

@@ -0,0 +1,34 @@
+import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
+import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
+
+import { PANEL_STYLES } from '../../home/Insights';
+
+export function getGrafanaEvalDurationScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
+  const query = new SceneQueryRunner({
+    datasource,
+    queries: [
+      {
+        refId: 'A',
+        expr: 'sum(grafanacloud_grafana_instance_alerting_rule_evaluations_total:rate5m) - sum(grafanacloud_grafana_instance_alerting_rule_evaluation_failures_total:rate5m)',
+        range: true,
+        legendFormat: 'success',
+      },
+      {
+        refId: 'B',
+        expr: 'sum(grafanacloud_grafana_instance_alerting_rule_evaluation_failures_total:rate5m)',
+        range: true,
+        legendFormat: 'failed',
+      },
+    ],
+    $timeRange: timeRange,
+  });
+
+  return new SceneFlexItem({
+    ...PANEL_STYLES,
+    body: PanelBuilders.timeseries()
+      .setTitle(panelTitle)
+      .setData(query)
+      .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
+      .build(),
+  });
+}

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

@@ -0,0 +1,38 @@
+import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
+import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
+
+import { PANEL_STYLES } from '../../home/Insights';
+
+export function getGrafanaEvalSuccessVsFailuresScene(
+  timeRange: SceneTimeRange,
+  datasource: DataSourceRef,
+  panelTitle: string
+) {
+  const query = new SceneQueryRunner({
+    datasource,
+    queries: [
+      {
+        refId: 'A',
+        expr: 'sum(grafanacloud_grafana_instance_alerting_rule_evaluations_total:rate5m) - sum(grafanacloud_grafana_instance_alerting_rule_evaluation_failures_total:rate5m)',
+        range: true,
+        legendFormat: 'success',
+      },
+      {
+        refId: 'B',
+        expr: 'sum(grafanacloud_grafana_instance_alerting_rule_evaluation_failures_total:rate5m)',
+        range: true,
+        legendFormat: 'failed',
+      },
+    ],
+    $timeRange: timeRange,
+  });
+
+  return new SceneFlexItem({
+    ...PANEL_STYLES,
+    body: PanelBuilders.timeseries()
+      .setTitle(panelTitle)
+      .setData(query)
+      .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
+      .build(),
+  });
+}

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

@@ -0,0 +1,40 @@
+import { ThresholdsMode } from '@grafana/data';
+import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
+import { DataSourceRef } from '@grafana/schema';
+
+import { PANEL_STYLES } from '../../home/Insights';
+
+export function getFiringGrafanaAlertsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
+  const query = new SceneQueryRunner({
+    datasource,
+    queries: [
+      {
+        refId: 'A',
+        instant: true,
+        expr: 'sum by (state) (grafanacloud_grafana_instance_alerting_rule_group_rules{state="active"})',
+      },
+    ],
+    $timeRange: timeRange,
+  });
+
+  return new SceneFlexItem({
+    ...PANEL_STYLES,
+    body: PanelBuilders.stat()
+      .setTitle(panelTitle)
+      .setData(query)
+      .setThresholds({
+        mode: ThresholdsMode.Absolute,
+        steps: [
+          {
+            color: 'red',
+            value: 0,
+          },
+          {
+            color: 'red',
+            value: 80,
+          },
+        ],
+      })
+      .build(),
+  });
+}

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

@@ -1,8 +1,7 @@
 import { PanelBuilders, SceneDataTransformer, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef } from '@grafana/schema';
 
-const TOTALS = 'sum(count_over_time({from="state-history"} | json [1w]))';
+import { PANEL_STYLES } from '../../home/Insights';
-const TOTALS_FIRING = 'sum(count_over_time({from="state-history"} | json | current="Alerting"[1w]))';
 
 export function getFiringAlertsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
   const query = new SceneQueryRunner({
@@ -11,12 +10,12 @@ export function getFiringAlertsScene(timeRange: SceneTimeRange, datasource: Data
       {
         refId: 'A',
         instant: true,
-        expr: TOTALS_FIRING,
+        expr: 'sum(count_over_time({from="state-history"} | json | current="Alerting"[1w]))',
       },
       {
         refId: 'B',
         instant: true,
-        expr: TOTALS,
+        expr: 'sum(count_over_time({from="state-history"} | json [1w]))',
       },
     ],
     $timeRange: timeRange,
@@ -61,7 +60,7 @@ export function getFiringAlertsScene(timeRange: SceneTimeRange, datasource: Data
   });
 
   return new SceneFlexItem({
-    minHeight: 300,
+    ...PANEL_STYLES,
     body: PanelBuilders.stat().setTitle(panelTitle).setData(transformation).setUnit('percent').build(),
   });
 }

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

@@ -1,7 +1,7 @@
 import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
 
-const RATE_FIRING = 'sum(count_over_time({from="state-history"} | json | current="Alerting"[5m]))';
+import { PANEL_STYLES } from '../../home/Insights';
 
 export function getFiringAlertsRateScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
   const query = new SceneQueryRunner({
@@ -9,7 +9,7 @@ export function getFiringAlertsRateScene(timeRange: SceneTimeRange, datasource:
     queries: [
       {
         refId: 'A',
-        expr: RATE_FIRING,
+        expr: 'sum(count_over_time({from="state-history"} | json | current="Alerting"[5m]))',
         range: true,
         legendFormat: 'Number of fires',
       },
@@ -18,7 +18,7 @@ export function getFiringAlertsRateScene(timeRange: SceneTimeRange, datasource:
   });
 
   return new SceneFlexItem({
-    minHeight: 300,
+    ...PANEL_STYLES,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
       .setData(query)

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

@@ -0,0 +1,32 @@
+import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
+import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
+
+import { PANEL_STYLES } from '../../home/Insights';
+
+export function getGrafanaInstancesByStateScene(
+  timeRange: SceneTimeRange,
+  datasource: DataSourceRef,
+  panelTitle: string
+) {
+  const query = new SceneQueryRunner({
+    datasource,
+    queries: [
+      {
+        refId: 'A',
+        expr: 'sum by (state) (grafanacloud_grafana_instance_alerting_rule_group_rules)',
+        range: true,
+        legendFormat: '{{state}}',
+      },
+    ],
+    $timeRange: timeRange,
+  });
+
+  return new SceneFlexItem({
+    ...PANEL_STYLES,
+    body: PanelBuilders.timeseries()
+      .setTitle(panelTitle)
+      .setData(query)
+      .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
+      .build(),
+  });
+}

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

@@ -0,0 +1,49 @@
+import { ThresholdsMode } from '@grafana/data';
+import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
+import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
+
+import { PANEL_STYLES } from '../../home/Insights';
+
+export function getGrafanaInstancesPercentageByStateScene(
+  timeRange: SceneTimeRange,
+  datasource: DataSourceRef,
+  panelTitle: string
+) {
+  const query = new SceneQueryRunner({
+    datasource,
+    queries: [
+      {
+        refId: 'A',
+        expr: 'sum by (state) (grafanacloud_grafana_instance_alerting_rule_group_rules) / ignoring(state) group_left sum(grafanacloud_grafana_instance_alerting_rule_group_rules)',
+        range: true,
+        legendFormat: '{{alertstate}}',
+      },
+    ],
+    $timeRange: timeRange,
+  });
+
+  return new SceneFlexItem({
+    ...PANEL_STYLES,
+    body: PanelBuilders.timeseries()
+      .setTitle(panelTitle)
+      .setData(query)
+      .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
+      .setCustomFieldConfig('fillOpacity', 45)
+      .setUnit('percentunit')
+      .setMax(1)
+      .setThresholds({
+        mode: ThresholdsMode.Absolute,
+        steps: [
+          {
+            color: 'green',
+            value: 0,
+          },
+          {
+            color: 'red',
+            value: 80,
+          },
+        ],
+      })
+      .build(),
+  });
+}

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

@@ -0,0 +1,32 @@
+import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
+import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
+
+import { PANEL_STYLES } from '../../home/Insights';
+
+export function getGrafanaMissedIterationsScene(
+  timeRange: SceneTimeRange,
+  datasource: DataSourceRef,
+  panelTitle: string
+) {
+  const query = new SceneQueryRunner({
+    datasource,
+    queries: [
+      {
+        refId: 'A',
+        expr: 'sum by (rule_group) (grafanacloud_instance_rule_group_iterations_missed_total:rate5m)',
+        range: true,
+        legendFormat: 'missed',
+      },
+    ],
+    $timeRange: timeRange,
+  });
+
+  return new SceneFlexItem({
+    ...PANEL_STYLES,
+    body: PanelBuilders.timeseries()
+      .setTitle(panelTitle)
+      .setData(query)
+      .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
+      .build(),
+  });
+}

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

@@ -13,18 +13,16 @@ import {
 import { DataSourceRef } from '@grafana/schema';
 import { Icon, Link } from '@grafana/ui';
 
+import { PANEL_STYLES } from '../../home/Insights';
 import { createUrl } from '../../utils/url';
 
-const TOP_FIRING_INSTANCES =
-  'topk(10, sum by(labels_alertname, ruleUID) (count_over_time({from="state-history"} | json | current = `Alerting` [1w])))';
-
 export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
   const query = new SceneQueryRunner({
     datasource,
     queries: [
       {
         refId: 'A',
-        expr: TOP_FIRING_INSTANCES,
+        expr: 'topk(10, sum by(labels_alertname, ruleUID) (count_over_time({from="state-history"} | json | current = `Alerting` [1w])))',
         instant: true,
       },
     ],
@@ -103,7 +101,7 @@ export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource
   });
 
   return new SceneFlexItem({
-    minHeight: 300,
+    ...PANEL_STYLES,
     body: PanelBuilders.table().setTitle(panelTitle).setData(transformation).build(),
   });
 }

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

@@ -1,8 +1,7 @@
 import { PanelBuilders, SceneDataTransformer, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef } from '@grafana/schema';
 
-const TOP_5_FIRING_RULES =
+import { PANEL_STYLES } from '../../home/Insights';
-  'topk(5, sum by(group, labels_grafana_folder) (count_over_time({from="state-history"} | json | current = `Alerting` [1w])))';
 
 export function getMostFiredRulesScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
   const query = new SceneQueryRunner({
@@ -10,7 +9,7 @@ export function getMostFiredRulesScene(timeRange: SceneTimeRange, datasource: Da
     queries: [
       {
         refId: 'A',
-        expr: TOP_5_FIRING_RULES,
+        expr: 'topk(5, sum by(group, labels_grafana_folder) (count_over_time({from="state-history"} | json | current = `Alerting` [1w])))',
         instant: true,
       },
     ],
@@ -54,7 +53,7 @@ export function getMostFiredRulesScene(timeRange: SceneTimeRange, datasource: Da
   });
 
   return new SceneFlexItem({
-    minHeight: 300,
+    ...PANEL_STYLES,
     body: PanelBuilders.table().setTitle(panelTitle).setData(transformation).build(),
   });
 }

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

@@ -13,6 +13,8 @@ import {
 import { DataQuery, DataSourceRef } from '@grafana/schema';
 import { getTimeRange } from 'app/features/dashboard/utils/timeRange';
 
+import { PANEL_STYLES } from '../../home/Insights';
+
 export const getLabelsInfo = (from: number, to: number): Observable<DataQueryResponseData> => {
   return getBackendSrv().fetch({
     url: `/api/v1/rules/history`,
@@ -49,7 +51,7 @@ export function getMostFiredLabelsScene(timeRange: SceneTimeRange, datasource: D
   });
 
   return new SceneFlexItem({
-    minHeight: 300,
+    ...PANEL_STYLES,
     body: PanelBuilders.table().setTitle(panelTitle).setData(query).build(),
   });
 }

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

@@ -0,0 +1,40 @@
+import { ThresholdsMode } from '@grafana/data';
+import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
+import { DataSourceRef } from '@grafana/schema';
+
+import { PANEL_STYLES } from '../../home/Insights';
+
+export function getPausedGrafanaAlertsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
+  const query = new SceneQueryRunner({
+    datasource,
+    queries: [
+      {
+        refId: 'A',
+        instant: true,
+        expr: 'sum by (state) (grafanacloud_grafana_instance_alerting_rule_group_rules{state="paused"})',
+      },
+    ],
+    $timeRange: timeRange,
+  });
+
+  return new SceneFlexItem({
+    ...PANEL_STYLES,
+    body: PanelBuilders.stat()
+      .setTitle(panelTitle)
+      .setData(query)
+      .setThresholds({
+        mode: ThresholdsMode.Absolute,
+        steps: [
+          {
+            color: 'yellow',
+            value: 0,
+          },
+          {
+            color: 'red',
+            value: 80,
+          },
+        ],
+      })
+      .build(),
+  });
+}

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

@@ -0,0 +1,32 @@
+import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
+import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
+
+import { PANEL_STYLES } from '../../../home/Insights';
+
+export function getGrafanaAlertmanagerInstancesByStateScene(
+  timeRange: SceneTimeRange,
+  datasource: DataSourceRef,
+  panelTitle: string
+) {
+  const query = new SceneQueryRunner({
+    datasource,
+    queries: [
+      {
+        refId: 'A',
+        expr: 'sum by (state) (grafanacloud_grafana_instance_alerting_alerts)',
+        range: true,
+        legendFormat: '{{state}}',
+      },
+    ],
+    $timeRange: timeRange,
+  });
+
+  return new SceneFlexItem({
+    ...PANEL_STYLES,
+    body: PanelBuilders.timeseries()
+      .setTitle(panelTitle)
+      .setData(query)
+      .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
+      .build(),
+  });
+}

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

@@ -0,0 +1,38 @@
+import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
+import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
+
+import { PANEL_STYLES } from '../../../home/Insights';
+
+export function getGrafanaAlertmanagerNotificationsScene(
+  timeRange: SceneTimeRange,
+  datasource: DataSourceRef,
+  panelTitle: string
+) {
+  const query = new SceneQueryRunner({
+    datasource,
+    queries: [
+      {
+        refId: 'A',
+        expr: 'grafanacloud_grafana_instance_alerting_notifications_total:rate5m - grafanacloud_grafana_instance_alerting_notifications_failed_total:rate5m',
+        range: true,
+        legendFormat: 'success',
+      },
+      {
+        refId: 'B',
+        expr: 'grafanacloud_grafana_instance_alerting_notifications_failed_total:rate5m',
+        range: true,
+        legendFormat: 'failed',
+      },
+    ],
+    $timeRange: timeRange,
+  });
+
+  return new SceneFlexItem({
+    ...PANEL_STYLES,
+    body: PanelBuilders.timeseries()
+      .setTitle(panelTitle)
+      .setData(query)
+      .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
+      .build(),
+  });
+}

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

@@ -0,0 +1,32 @@
+import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
+import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
+
+import { PANEL_STYLES } from '../../../home/Insights';
+
+export function getGrafanaAlertmanagerSilencesScene(
+  timeRange: SceneTimeRange,
+  datasource: DataSourceRef,
+  panelTitle: string
+) {
+  const query = new SceneQueryRunner({
+    datasource,
+    queries: [
+      {
+        refId: 'A',
+        expr: 'sum by (state) (grafanacloud_grafana_instance_alerting_silences)',
+        range: true,
+        legendFormat: '{{state}}',
+      },
+    ],
+    $timeRange: timeRange,
+  });
+
+  return new SceneFlexItem({
+    ...PANEL_STYLES,
+    body: PanelBuilders.timeseries()
+      .setTitle(panelTitle)
+      .setData(query)
+      .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
+      .build(),
+  });
+}

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

@@ -1,7 +1,7 @@
 import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
 
-const QUERY = 'sum by (state) (grafanacloud_instance_alertmanager_alerts)';
+import { PANEL_STYLES } from '../../home/Insights';
 
 export function getAlertsByStateScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
   const query = new SceneQueryRunner({
@@ -9,7 +9,7 @@ export function getAlertsByStateScene(timeRange: SceneTimeRange, datasource: Dat
     queries: [
       {
         refId: 'A',
-        expr: QUERY,
+        expr: 'sum by (state) (grafanacloud_instance_alertmanager_alerts)',
         range: true,
         legendFormat: '{{state}}',
       },
@@ -18,8 +18,7 @@ export function getAlertsByStateScene(timeRange: SceneTimeRange, datasource: Dat
   });
 
   return new SceneFlexItem({
-    width: 'calc(50% - 4px)',
+    ...PANEL_STYLES,
-    height: 300,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
       .setData(query)

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

@@ -1,7 +1,7 @@
 import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
 
-const QUERY_A = 'sum by (cluster)(grafanacloud_instance_alertmanager_invalid_config)';
+import { PANEL_STYLES } from '../../home/Insights';
 
 export function getInvalidConfigScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
   const query = new SceneQueryRunner({
@@ -9,7 +9,7 @@ export function getInvalidConfigScene(timeRange: SceneTimeRange, datasource: Dat
     queries: [
       {
         refId: 'A',
-        expr: QUERY_A,
+        expr: 'sum by (cluster)(grafanacloud_instance_alertmanager_invalid_config)',
         range: true,
         legendFormat: '{{cluster}}',
       },
@@ -18,8 +18,7 @@ export function getInvalidConfigScene(timeRange: SceneTimeRange, datasource: Dat
   });
 
   return new SceneFlexItem({
-    width: 'calc(50% - 4px)',
+    ...PANEL_STYLES,
-    height: 300,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
       .setData(query)

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

@@ -1,9 +1,7 @@
 import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
 
-const QUERY_A =
+import { PANEL_STYLES } from '../../home/Insights';
-  'sum by(cluster)(grafanacloud_instance_alertmanager_notifications_per_second) - sum by (cluster)(grafanacloud_instance_alertmanager_notifications_failed_per_second)';
-const QUERY_B = 'sum by(cluster)(grafanacloud_instance_alertmanager_notifications_failed_per_second)';
 
 export function getNotificationsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
   const query = new SceneQueryRunner({
@@ -11,13 +9,13 @@ export function getNotificationsScene(timeRange: SceneTimeRange, datasource: Dat
     queries: [
       {
         refId: 'A',
-        expr: QUERY_A,
+        expr: 'sum by(cluster)(grafanacloud_instance_alertmanager_notifications_per_second) - sum by (cluster)(grafanacloud_instance_alertmanager_notifications_failed_per_second)',
         range: true,
         legendFormat: '{{cluster}} - success',
       },
       {
         refId: 'B',
-        expr: QUERY_B,
+        expr: 'sum by(cluster)(grafanacloud_instance_alertmanager_notifications_failed_per_second)',
         range: true,
         legendFormat: '{{cluster}} - failed',
       },
@@ -26,8 +24,7 @@ export function getNotificationsScene(timeRange: SceneTimeRange, datasource: Dat
   });
 
   return new SceneFlexItem({
-    width: 'calc(50% - 4px)',
+    ...PANEL_STYLES,
-    height: 300,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
       .setData(query)

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

@@ -1,7 +1,7 @@
 import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
 
-const QUERY_A = 'sum by (state) (grafanacloud_instance_alertmanager_silences)';
+import { PANEL_STYLES } from '../../home/Insights';
 
 export function getSilencesScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
   const query = new SceneQueryRunner({
@@ -9,7 +9,7 @@ export function getSilencesScene(timeRange: SceneTimeRange, datasource: DataSour
     queries: [
       {
         refId: 'A',
-        expr: QUERY_A,
+        expr: 'sum by (state) (grafanacloud_instance_alertmanager_silences)',
         range: true,
         legendFormat: '{{state}}',
       },
@@ -18,8 +18,7 @@ export function getSilencesScene(timeRange: SceneTimeRange, datasource: DataSour
   });
 
   return new SceneFlexItem({
-    width: 'calc(50% - 4px)',
+    ...PANEL_STYLES,
-    height: 300,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
       .setData(query)

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

@@ -1,7 +1,7 @@
 import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
 
-const QUERY_A = `grafanacloud_instance_rule_group_last_duration_seconds{rule_group="$rule_group"}`;
+import { PANEL_STYLES } from '../../../home/Insights';
 
 export function getRuleGroupEvaluationDurationScene(
   timeRange: SceneTimeRange,
@@ -13,7 +13,7 @@ export function getRuleGroupEvaluationDurationScene(
     queries: [
       {
         refId: 'A',
-        expr: QUERY_A,
+        expr: `grafanacloud_instance_rule_group_last_duration_seconds{rule_group="$rule_group"}`,
         range: true,
         legendFormat: '{{rule_group}}',
       },
@@ -22,8 +22,7 @@ export function getRuleGroupEvaluationDurationScene(
   });
 
   return new SceneFlexItem({
-    width: 'calc(50% - 4px)',
+    ...PANEL_STYLES,
-    height: 300,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
       .setData(query)

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

@@ -1,8 +1,7 @@
 import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
 
-const QUERY_A = `grafanacloud_instance_rule_evaluations_total:rate5m{rule_group="$rule_group"} - grafanacloud_instance_rule_evaluation_failures_total:rate5m{rule_group=~"$rule_group"}`;
+import { PANEL_STYLES } from '../../../home/Insights';
-const QUERY_B = `grafanacloud_instance_rule_evaluation_failures_total:rate5m{rule_group=~"$rule_group"}`;
 
 export function getRuleGroupEvaluationsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
   const query = new SceneQueryRunner({
@@ -10,13 +9,13 @@ export function getRuleGroupEvaluationsScene(timeRange: SceneTimeRange, datasour
     queries: [
       {
         refId: 'A',
-        expr: QUERY_A,
+        expr: `grafanacloud_instance_rule_evaluations_total:rate5m{rule_group="$rule_group"} - grafanacloud_instance_rule_evaluation_failures_total:rate5m{rule_group=~"$rule_group"}`,
         range: true,
         legendFormat: 'success',
       },
       {
         refId: 'B',
-        expr: QUERY_B,
+        expr: `grafanacloud_instance_rule_evaluation_failures_total:rate5m{rule_group=~"$rule_group"}`,
         range: true,
         legendFormat: 'failed',
       },
@@ -25,8 +24,7 @@ export function getRuleGroupEvaluationsScene(timeRange: SceneTimeRange, datasour
   });
 
   return new SceneFlexItem({
-    width: 'calc(50% - 4px)',
+    ...PANEL_STYLES,
-    height: 300,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
       .setData(query)

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

@@ -1,7 +1,7 @@
 import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
 
-const QUERY_A = `grafanacloud_instance_rule_group_interval_seconds{rule_group="$rule_group"}`;
+import { PANEL_STYLES } from '../../../home/Insights';
 
 export function getRuleGroupIntervalScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
   const query = new SceneQueryRunner({
@@ -9,7 +9,7 @@ export function getRuleGroupIntervalScene(timeRange: SceneTimeRange, datasource:
     queries: [
       {
         refId: 'A',
-        expr: QUERY_A,
+        expr: `grafanacloud_instance_rule_group_interval_seconds{rule_group="$rule_group"}`,
         range: true,
         legendFormat: 'interval',
       },
@@ -18,8 +18,7 @@ export function getRuleGroupIntervalScene(timeRange: SceneTimeRange, datasource:
   });
 
   return new SceneFlexItem({
-    width: 'calc(50% - 4px)',
+    ...PANEL_STYLES,
-    height: 300,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
       .setData(query)

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

@@ -1,7 +1,7 @@
 import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
 
-const QUERY_A = `sum(grafanacloud_instance_rule_group_rules{rule_group="$rule_group"})`;
+import { PANEL_STYLES } from '../../../home/Insights';
 
 export function getRulesPerGroupScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
   const query = new SceneQueryRunner({
@@ -9,7 +9,7 @@ export function getRulesPerGroupScene(timeRange: SceneTimeRange, datasource: Dat
     queries: [
       {
         refId: 'A',
-        expr: QUERY_A,
+        expr: `sum(grafanacloud_instance_rule_group_rules{rule_group="$rule_group"})`,
         range: true,
         legendFormat: 'number of rules',
       },
@@ -18,8 +18,7 @@ export function getRulesPerGroupScene(timeRange: SceneTimeRange, datasource: Dat
   });
 
   return new SceneFlexItem({
-    width: 'calc(50% - 4px)',
+    ...PANEL_STYLES,
-    height: 300,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
       .setData(query)

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

@@ -1,10 +1,7 @@
 import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
 
-const QUERY_A =
+import { PANEL_STYLES } from '../../../home/Insights';
-  'sum(grafanacloud_instance_rule_evaluations_total:rate5m) - sum(grafanacloud_instance_rule_evaluation_failures_total:rate5m)';
-
-const QUERY_B = 'sum(grafanacloud_instance_rule_evaluation_failures_total:rate5m)';
 
 export function getEvalSuccessVsFailuresScene(
   timeRange: SceneTimeRange,
@@ -16,13 +13,13 @@ export function getEvalSuccessVsFailuresScene(
     queries: [
       {
         refId: 'A',
-        expr: QUERY_A,
+        expr: 'sum(grafanacloud_instance_rule_evaluations_total:rate5m) - sum(grafanacloud_instance_rule_evaluation_failures_total:rate5m)',
         range: true,
         legendFormat: 'success',
       },
       {
         refId: 'B',
-        expr: QUERY_B,
+        expr: 'sum(grafanacloud_instance_rule_evaluation_failures_total:rate5m)',
         range: true,
         legendFormat: 'failed',
       },
@@ -31,8 +28,7 @@ export function getEvalSuccessVsFailuresScene(
   });
 
   return new SceneFlexItem({
-    width: 'calc(50% - 4px)',
+    ...PANEL_STYLES,
-    height: 300,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
       .setData(query)

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

@@ -2,7 +2,7 @@ import { ThresholdsMode } from '@grafana/data';
 import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef } from '@grafana/schema';
 
-const QUERY = 'sum by (alertstate) (ALERTS{alertstate="firing"})';
+import { PANEL_STYLES } from '../../../home/Insights';
 
 export function getFiringCloudAlertsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
   const query = new SceneQueryRunner({
@@ -11,15 +11,14 @@ export function getFiringCloudAlertsScene(timeRange: SceneTimeRange, datasource:
       {
         refId: 'A',
         instant: true,
-        expr: QUERY,
+        expr: 'sum by (alertstate) (ALERTS{alertstate="firing"})',
       },
     ],
     $timeRange: timeRange,
   });
 
   return new SceneFlexItem({
-    width: 'calc(25% - 4px)',
+    ...PANEL_STYLES,
-    height: 300,
     body: PanelBuilders.stat()
       .setTitle(panelTitle)
       .setData(query)

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

@@ -1,7 +1,7 @@
 import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
 
-const QUERY = 'sum by (alertstate) (ALERTS)';
+import { PANEL_STYLES } from '../../../home/Insights';
 
 export function getInstancesByStateScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
   const query = new SceneQueryRunner({
@@ -9,7 +9,7 @@ export function getInstancesByStateScene(timeRange: SceneTimeRange, datasource:
     queries: [
       {
         refId: 'A',
-        expr: QUERY,
+        expr: 'sum by (alertstate) (ALERTS)',
         range: true,
         legendFormat: '{{state}}',
       },
@@ -18,8 +18,7 @@ export function getInstancesByStateScene(timeRange: SceneTimeRange, datasource:
   });
 
   return new SceneFlexItem({
-    width: 'calc(50% - 4px)',
+    ...PANEL_STYLES,
-    height: 300,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
       .setData(query)

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

@@ -2,7 +2,7 @@ import { ThresholdsMode } from '@grafana/data';
 import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
 
-const QUERY = 'sum by (alertstate) (ALERTS) / ignoring(alertstate) group_left sum(ALERTS)';
+import { PANEL_STYLES } from '../../../home/Insights';
 
 export function getInstancesPercentageByStateScene(
   timeRange: SceneTimeRange,
@@ -14,7 +14,7 @@ export function getInstancesPercentageByStateScene(
     queries: [
       {
         refId: 'A',
-        expr: QUERY,
+        expr: 'sum by (alertstate) (ALERTS) / ignoring(alertstate) group_left sum(ALERTS)',
         range: true,
         legendFormat: '{{alertstate}}',
       },
@@ -23,8 +23,7 @@ export function getInstancesPercentageByStateScene(
   });
 
   return new SceneFlexItem({
-    width: 'calc(50% - 4px)',
+    ...PANEL_STYLES,
-    height: 300,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
       .setData(query)

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

@@ -1,7 +1,7 @@
 import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
 
-const QUERY_A = 'sum(grafanacloud_instance_rule_group_iterations_missed_total:rate5m)';
+import { PANEL_STYLES } from '../../../home/Insights';
 
 export function getMissedIterationsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
   const query = new SceneQueryRunner({
@@ -9,7 +9,7 @@ export function getMissedIterationsScene(timeRange: SceneTimeRange, datasource:
     queries: [
       {
         refId: 'A',
-        expr: QUERY_A,
+        expr: 'sum(grafanacloud_instance_rule_group_iterations_missed_total:rate5m)',
         range: true,
         legendFormat: 'missed',
       },
@@ -18,8 +18,7 @@ export function getMissedIterationsScene(timeRange: SceneTimeRange, datasource:
   });
 
   return new SceneFlexItem({
-    width: 'calc(50% - 4px)',
+    ...PANEL_STYLES,
-    height: 300,
     body: PanelBuilders.timeseries()
       .setTitle(panelTitle)
       .setData(query)

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

@@ -1,7 +1,7 @@
 import { PanelBuilders, SceneDataTransformer, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef } from '@grafana/schema';
 
-const TOP_5_FIRING_INSTANCES = 'topk(10, sum by (alertname) (ALERTS))';
+import { PANEL_STYLES } from '../../../home/Insights';
 
 export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
   const query = new SceneQueryRunner({
@@ -9,7 +9,7 @@ export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource
     queries: [
       {
         refId: 'A',
-        expr: TOP_5_FIRING_INSTANCES,
+        expr: 'topk(10, sum by (alertname) (ALERTS))',
         range: true,
       },
     ],
@@ -39,8 +39,7 @@ export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource
   });
 
   return new SceneFlexItem({
-    width: 'calc(50% - 8px)',
+    ...PANEL_STYLES,
-    height: 300,
     body: PanelBuilders.table().setTitle(panelTitle).setData(transformation).build(),
   });
 }

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

@@ -2,7 +2,7 @@ import { ThresholdsMode } from '@grafana/data';
 import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes';
 import { DataSourceRef } from '@grafana/schema';
 
-const QUERY = 'sum by (alertstate) (ALERTS{alertstate="pending"})';
+import { PANEL_STYLES } from '../../../home/Insights';
 
 export function getPendingCloudAlertsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) {
   const query = new SceneQueryRunner({
@@ -11,15 +11,14 @@ export function getPendingCloudAlertsScene(timeRange: SceneTimeRange, datasource
       {
         refId: 'A',
         instant: true,
-        expr: QUERY,
+        expr: 'sum by (alertstate) (ALERTS{alertstate="pending"})',
       },
     ],
     $timeRange: timeRange,
   });
 
   return new SceneFlexItem({
-    width: 'calc(25% - 4px)',
+    ...PANEL_STYLES,
-    height: 300,
     body: PanelBuilders.stat()
       .setTitle(panelTitle)
       .setData(query)