Alert List plugin customization

Hi, good morning!

I read in another topic that customizing a demo grafana plugin is not recommended.

I’m using Grafana v7 and I need a panel just like the alert list demo plugin : https://grafana.com/docs/grafana/latest/panels/visualizations/alert-list-panel/.

But also I want to add two buttons to each alert.

How is the right way to do it?

Thanks for your attention!

Just took a look at the source for the alert list plugin, and it’s actually not that complex. I’d suggest that you use it as a reference and build a new panel plugin from scratch. If you rewrite it to React, I think you could even create a PR to update it for the new plugin platform :slight_smile:

I can definitely rewrite this plugin!

So I created a plugin with the grafana-toolkit and I run the following commands:

yarn install
yarn dev

Next, I added the source code for the alert list plugin and installed all the dependencies. I took the app folder from grafana/public/ and put it in the root of my project, than I changed the imports’s path:

alt text

My problem is that there are some properties in module.ts like this.panel, this.events, this.dashboard that does not exist on type ‘AlertListPanel’.
Also there are some methods missing too:

alt text

Here is my source code.

Yeah, the built-in plugins rely on internal APIs (which is why we don’t recommend that you extend them for your own plugins). The current alert list is based on AngularJS, but the new plugin platform is based on React. I’d suggest that you start with a React-based plugin and then migrate the relevant parts of the Angular code. It looks like this mainly consists of moving the Angular templates into the SimplePanel component.

Let me know your progress. I’d be happy to review and contribute to this.