From dfc139b2ffa50f56d2483cf7cb163739bbd8fc2f Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Thu, 7 Dec 2023 10:24:22 +0100
Subject: [PATCH] DashboardScene: Add support for showing notices in panel
 header (#79146)

---
 .../dashboard-scene/scene/PanelNotices.tsx    | 50 +++++++++++++++++++
 .../transformSaveModelToScene.ts              |  7 ++-
 2 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 public/app/features/dashboard-scene/scene/PanelNotices.tsx

diff --git a/public/app/features/dashboard-scene/scene/PanelNotices.tsx b/public/app/features/dashboard-scene/scene/PanelNotices.tsx
new file mode 100644
index 00000000000..673ea89ce06
--- /dev/null
+++ b/public/app/features/dashboard-scene/scene/PanelNotices.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { SceneComponentProps, SceneObjectBase, VizPanel, sceneGraph } from '@grafana/scenes';
+import { PanelHeaderNotices } from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotices';
+
+import { getPanelIdForVizPanel } from '../utils/utils';
+
+export class PanelNotices extends SceneObjectBase {
+  static Component = PanelNoticesRenderer;
+
+  constructor() {
+    super({});
+    this.addActivationHandler(this.onActivate);
+  }
+
+  private onActivate = () => {
+    const panel = this.parent;
+    if (!panel || !(panel instanceof VizPanel)) {
+      throw new Error('PanelNotices can be used only as title items for VizPanel');
+    }
+  };
+
+  public getPanel() {
+    const panel = this.parent;
+
+    if (panel && panel instanceof VizPanel) {
+      return panel;
+    }
+
+    return null;
+  }
+}
+
+function PanelNoticesRenderer({ model }: SceneComponentProps<PanelNotices>) {
+  const panel = model.getPanel();
+  const dataObject = sceneGraph.getData(model);
+  const data = dataObject.useState();
+
+  if (!panel) {
+    return null;
+  }
+
+  const panelId = getPanelIdForVizPanel(panel);
+
+  if (data.data?.series) {
+    return <PanelHeaderNotices frames={data.data?.series} panelId={panelId} />;
+  }
+
+  return null;
+}
diff --git a/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts b/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts
index 846d8d22759..cdf16c08bb7 100644
--- a/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts
+++ b/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts
@@ -40,6 +40,7 @@ import { DashboardScene } from '../scene/DashboardScene';
 import { LibraryVizPanel } from '../scene/LibraryVizPanel';
 import { VizPanelLinks, VizPanelLinksMenu } from '../scene/PanelLinks';
 import { getPanelLinksBehavior, panelMenuBehavior } from '../scene/PanelMenuBehavior';
+import { PanelNotices } from '../scene/PanelNotices';
 import { PanelRepeaterGridItem } from '../scene/PanelRepeaterGridItem';
 import { PanelTimeRange } from '../scene/PanelTimeRange';
 import { RowRepeaterBehavior } from '../scene/RowRepeaterBehavior';
@@ -391,14 +392,18 @@ export function buildGridItemForLibPanel(panel: PanelModel) {
 
 export function buildGridItemForPanel(panel: PanelModel): SceneGridItemLike {
   const hasPanelLinks = panel.links && panel.links.length > 0;
+  const titleItems: SceneObject[] = [];
   let panelLinks;
 
   if (hasPanelLinks) {
     panelLinks = new VizPanelLinks({
       menu: new VizPanelLinksMenu({ $behaviors: [getPanelLinksBehavior(panel)] }),
     });
+    titleItems.push(panelLinks);
   }
 
+  titleItems.push(new PanelNotices());
+
   const vizPanelState: VizPanelState = {
     key: getVizPanelKeyForPanelId(panel.id),
     title: panel.title,
@@ -414,7 +419,7 @@ export function buildGridItemForPanel(panel: PanelModel): SceneGridItemLike {
     menu: new VizPanelMenu({
       $behaviors: [panelMenuBehavior],
     }),
-    titleItems: panelLinks,
+    titleItems,
 
     extendPanelContext: setDashboardPanelContext,
     _UNSAFE_customMigrationHandler: getAngularPanelMigrationHandler(panel),