Tuesday, August 21, 2018

Grafana Buttons and Actions

Viewing data with Grafana is quite simple but taking some action not so much. So here is my way of doing it :)

A simple solution is to use a TEXT Panel and inject some HTML with a button and a Javascript code.

Bellow is a sample that will use the $Datasource and perform a GET request on a specific URL "/"

<button class="btn navbar-button gf-timepicker-nav-btn" style="width: 100%" onClick="runGame()">Start</button>

<script>
function runGame() {
  var t = angular.element('grafana-app').injector().get('templateSrv');
  t.updateTemplateData();
  url = t.index.Datasource.datasourceSrv.datasources["$Datasource"].url;
  
  $.get( url + "/" , function( data ) {
    $( "#output" ).html( data );
  });
  
}

</script>

<p id="output"></p>

From this point things should be much easier.

10 comments:

  1. Hello! I have a problem. I can't work anything in HTML in the text plugin. Is it simply copying the code and that's it? Or I'm missing somewhere. I read but the documentation of grafana is not clear. Thanks for your time!!!!

    ReplyDelete
    Replies
    1. Hi, the code above actually is from an older Grafana version, but things should still work.

      Try something simple: add a text panel, switch it to HTML and then add:

      button type="button" onclick="alert('Hello world!')">Click Me! </button

      save the dashboard and try to click the button.

      Delete
    2. Hey Julius! thanks for your quick response!
      I commented that I tried the code, but Grafana shows plain text, does not interpret it as html.
      I have set up an alert with a webhock that commands the outputs of my raspberry, but I wanted to add buttons to command them manually if necessary, and I can't do it.

      Thanks again for your time. Best regards.

      Delete
    3. Dont forget to switch the control to HTML from plain text ... if that is possible in your Grafana

      Delete
    4. Yes of course! I change text to HTML and HTML to markdown, but I always see the text on the dashboard, without interpreting. I can't think of other ideas.

      thanks again! Cheers

      Delete
    5. Maybe is a bug on your version ... I use Grafana v6.2.0

      Delete
    6. maybe... im using v6.2.2. Thank again!

      Delete
    7. Another possible method would be to be able to generate specific alerts from a button, because I could already configure and use webhook.

      Delete
    8. add < before the code. So it should work

      Delete
  2. This comment has been removed by the author.

    ReplyDelete