UI Extension Not Showing in Dashboard Panel Menu for Grafana < 11.5.0

Grafana Plugin Development
,
1

Hi all,

I’m currently developing a Grafana App Plugin with a UI extension that adds a custom link to the Dashboard Panel Menu. It works as expected in Grafana version 11.5.0 and above, but does not appear at all in versions 11.4.0 and below.

According to the Grafana documentation, UI extensions (specifically grafana/dashboard/panel/menu targets) should be supported starting from version 11.1.0, so I was expecting this to work in 11.1–11.4 too.

Here’s a simplified version of my setup:

plugin.json

{
  "type": "app",
  "id": "test-testing-app",
  "name": "Testing",
  "info": {
    "version": "%VERSION%",
    "updated": "%TODAY%"
  },
  "dependencies": {
    "grafanaDependency": ">=11.1.0",
    "plugins": []
  },
  "extensions": {
    "addedLinks": [
      {
        "targets": ["grafana/dashboard/panel/menu"],
        "extensionPointId": "grafana/dashboard/panel/menu",
        "type": "link",
        "title": "Test UI Extension",
        "description": "Test description"
      }
    ]
  }
}

My module.tsx (Plugin Entry)

import { AppPlugin, PluginExtensionPoints } from '@grafana/data';
import { Button, Modal } from '@grafana/ui';

export const plugin = new AppPlugin()
  .addLink({
    targets: [PluginExtensionPoints.DashboardPanelMenu],
    title: 'Test UI Extension',
    description: 'Test description',
    onClick: (event, { openModal }) =>
      openModal({
        title: 'My Modal',
        width: 500,
        height: 500,
        body: ({ onDismiss }) => (
          <div>
            <p>This is our Test modal.</p>
            <Modal.ButtonRow>
              <Button variant="secondary" fill="outline" onClick={onDismiss}>Cancel</Button>
              <Button onClick={onDismiss}>OK</Button>
            </Modal.ButtonRow>
          </div>
        ),
      }),
  });

Here is the screenshot of my plugin extension in v11.5.0

image
image1842×1084 106 KB

image
image1842×1084 77.1 KB

Here is the screenshot of my plugin extension in v11.2.0

image
image1842×1084 100 KB

My Questions:

  1. Is there a known breaking change or bug in Grafana versions 11.1.0–11.4.0 that prevents grafana/dashboard/panel/menu UI extensions from rendering?
  2. Are there any additional flags or plugin settings required in lower versions for these links to appear?
  3. Can anyone from the Grafana team or community confirm the actual working version range for PluginExtensionPoints.DashboardPanelMenu support?
2

Hey @tarun17 :waving_hand:

Thanks for reaching out!

Everything looks correct, except one thing: if you would like to support versions <11.5 then you need to set { preload: true } in your plugin.json - we had this change targeting 11.4 which removes the need for the preload: true flag if your plugin is defining extensions (this is why your setup is working in newer versions). Sorry for the confusion, please let us know if this change fixes the problem.

I think although the panel-menu extension point was available in 9.5, the backwards-compatible methods in the module.tsx (.addLink()) are only available starting 11.1.0 (PR
).

1 Like
3

Thanks a lot! That solution worked perfectly and everything is now functioning correctly.