Refresh Every: 5s

I made my own plugin on grafana, basically copy the example app plugin.

When I create a dashboard, the fuction Refresh Every: 5s (for example) on my panel doens’t work. When I select 5s, my panel was refreshed, but next the panel doens’t call /query anymore.

Are you getting any errors?

No. I open the console to and nothing appears. When I select the time the panel call /query but is like don’t save the information. When I come back again the value a I was select before is not select anymore.

Guess the problem is in your code then. The refresh triggers the data-received event which you should be listening to in your panel code.

I don’t uderstand correctly where is that refresh triggers the data-received event. In the panel folder from my plugin I just have 2 files: module.js and plugin.json

My plugin.json:

{
  "type": "panel",
  "name": "Example App Panel",
  "id": "grafana-example-app-panel"
}

And my module.js:

import {PanelCtrl} from  'app/plugins/sdk';
import '../css/example-app.css!'

class ExampleAppPanelCtrl extends PanelCtrl {

  constructor($scope, $injector) {
    super($scope, $injector);
  }

}
ExampleAppPanelCtrl.template = '<h2 class="example-app-heading">Perfsonar Example app!</h2>';

export {
  ExampleAppPanelCtrl as PanelCtrl
};

You are not subscribing to any events in the above code. Have you seen the docs section on developing plugins?

Oh, sorry. I’v read this docs when I start develop the plugin, but at first I waste a lot of time on datasource, now my datasource is ok and I found that error on my panel. Ok, I read the docs, look at the piechart_ctrl.js and now I’m trying this unsucessful:

my perfsonar_ctrl.js code:

import {PanelCtrl} from  'app/plugins/sdk';

class ExampleAppPanelCtrl extends PanelCtrl {

	constructor($scope, $injector) {
		super($scope, $injector);

		this.events.on('render', this.onRender.bind(this));
		this.events.on('data-received', this.onDataReceived.bind(this));
		this.events.on('data-error', this.onDataError.bind(this));
		this.events.on('data-snapshot-load', this.onDataReceived.bind(this));
		this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
	}

  onRender() {
    this.data = this.parseSeries(this.series);
  }

	onDataError() {
		this.series = [];
		this.render();
  }

	onDataReceived(dataList) {
    console.log("Chamou o onDataReceived"); 
    this.series = dataList.map(this.seriesHandler.bind(this));
    this.data = this.parseSeries(this.series);
    console.log("Who is data on onDataReceived: ");
    console.log(data);
    console.log("Who is series on onDataReceived: ");
    console.log(series);
    this.refresh();
    this.render(this.data);
  }

  seriesHandler(seriesData) {
    var series = new TimeSeries({
      datapoints: seriesData.datapoints,
      alias: seriesData.target
    });

    series.flotpairs = series.getFlotPairs(this.panel.nullPointMode);
    return series;
  }
}

And my module.js like this:

import {ExampleAppPanelCtrl} from  './perfsonar_ctrl.js';
import '../css/example-app.css!'

ExampleAppPanelCtrl.template = '<h2 class="example-app-heading">Perfsonar Example app!</h2>';

export {
  ExampleAppPanelCtrl as PanelCtrl
};

I’m still having to much difficult to understand how to think in angularJS code style. Sorry if what I trying to do is too much trivial.

I notice something, When I create a new dashboard, and drag and drop the Graph panel, it starts with default datasource, with random-walk. If I select refresh every: 5s, the random walk refresh every 5s correctly. But if I chose my datasource, the refresh every doens’t hold the value which I chose anymore and don’t refresh every 5s. And if I return to default datasource the random walk stops to refresh too

It is really hard to say what is wrong exactly as I can only see part of the code here. A few pointers:

  • Is the Example App the best starting place? There are 3 types of plugins, apps are the least common. Are you building a panel and data source together? Another option is to find an existing plugin that is similar to what you want to do and clone that.
  • First check that when the data-received event is triggered (by pressing refresh or with the 5s refresh) that the onDataReceived function is called. (If this doesn’t work, then remove all other code and focus on getting this to work).
  • if that works, then look at the data being received and try and understand the format. You don’t say what this plugin is for or what sort of data you are using it for. If it is time series data then the response format is like this:
[
  {
    "target":"upper_75", // The field being queried for
    "datapoints":[
      [622,1450754160000],  // Metric value as a float , unixtimestamp in milliseconds
      [365,1450754220000]
    ]
  },
  {
    "target":"upper_90",
    "datapoints":[
      [861,1450754160000],
      [767,1450754220000]
    ]
  }
]
  • Figure out how to parse this data into what you need. If you know how to, then Test Driven Development (TDD) or unit testing is perfect for this type of programming.

P.S. Parsing data in your render function seems strange/wrong. This will cause this.parseSeries to be called twice every time you refresh. A refresh from a Grafana dashboard triggers both a data-received event and a render event.

Hello @daniellee,

I was developing a datasource plugin, I believe I’m get confused with my english, and I dont undestand de docs correctly and dont make de right question. I’m attached the problem with the wrong way. I don’t wanna to develop a new panel, I need to use a native panel, the Graph panel in that case. My datasource is almost iqual to simple json datasource, except for some data handle needed for my data looks like these timeserie:
[
{
“target”:“upper_75”, // The field being queried for
"datapoints":[
[622,1450754160000], // Metric value as a float , unixtimestamp in milliseconds
[365,1450754220000]
]
}
]

In my datasource.js file inside my datasource folder I receive my data in a json format, and manipulate then to something like the example above to return them in my query(options) function. Probably my problem is on my datasource, since when I select any datasource on grafana and select some value to refresh every time works fine, then when I select my datasource, the “refresh every” stops to work, even in the datasources which was working.

Maybe I found my error, and I discovered I’m so stupid. It doens’t refreshing every time cause some of my datas are old, then I click zoom out to see them. If I chose, last 2 days, or last 2 weeks , or last year so far the refresh works fine.