How can I use 'angular-toastr' in my plugin?

Grafana Plugin Development
1

Hi
Currently i developing a plugin and i need to use notifications like an alert (at top-right corner of screen). There are several packages for this issue (e.g. angular-toastr - https://github.com/Foxandxss/angular-toastr). My question is how can I import and use an angular package after install that with nmp install??
I’m trying to use this code:
import toastr from '…/node_modules/angular-toastr/dist/angular-toastr’
but i encountered with this error:
Plugin Error
Fetch error: 404 Not Found Instantiating http://x.x.x.x:3000/public/plugins/node_modules/angular-toastr/dist/angular-toastr.js

2

Before you do that - did you know that there is already support for something similar in Grafana?

The easy way is:

  • Import appEvents: import { appEvents} from 'app/core/core';

  • Then emit an event with one of three values: alert-success, alert-warning or alert-error as the the first param and an array with two strings: title and description:

    appEvents.emit('alert-success', ['Test notification sent', '']);

The other way gives you an extra parameter: timeout. Which is how long the toaster notification should be visible before fading away.

  • Use the AlertSrv directive and inject it via your constructor:

    constructor($scope, $injector, alertSrv) {
  this.alertSrv = alertSrv;
  ....

  • Then use the set function to send toaster notifications to the Grafana GUI, the parameters are title, text, severity, timeout. Severity can be success, error, warning or info. Timeout is how many seconds it should be shown for before fading away.

    this.alertSrv.set("Your error", message, 'error', timeout);

1 Like
3

@daniellee
Thanks for your attention. This is a good idea to use appEvents or AlertSrv directive, but in my case we need display more than one notification. for example maybe that need to show three notifications on the page (in one column like a stack). with appEvents we can have only one notification.
Is there any idea?

4

This won’t work - the javascript file has to be included in the plugin directory (the dist directory if you have one). If you search this site then this question has been answered a few times. Here’s one:

https://localhost:3000/t/how-to-importing-an-external-javascript-lib/2013/6?u=daniellee

5

Thanks for this answer. It helped me.

6

Hey @daniellee, I have used the AlertSrv previously and I am using the AlertSrv just as you explained but I am getting “old depricated alert srv being used” in the console. Should we just be using appEvents from here on out with Grafana 6.0?

1 Like
7

Hi, use appEvents in newer grafana version.