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

Grafana Plugin Development
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