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.