HTML Panel refresh

Hi, I have an HTML panel that I write to with a backend process to create an index of different datasets. I add a simple refresh through javascript:

<script language='javascript'>setTimeout(function(){location.reload(true)}, 15000)</script>

This works OK (except for a full page refresh), except that new dashboards seem to be ajax loaded so they all refresh once, as the timer is still set.

What is a better way to refresh my HTML panel?

1 Like

You could fetch the html panel content with an Ajax call and then set the content of the panel when it returns with the result.

Lots of results if you google it I think:

Hi, thanks for the response. That is an option but it’s not ideal. The content is all in the html dashboard/panel - I really just want a way to refresh the html dashboard, like all the other dashboards. Is there a way of hooking into the grafana or angular somehow, to trigger a refresh?

An external job/process is changing the dashboard json on the disk/database - is that correct? The normal render/refresh in Grafana does not reload the dashboard json from the database or disk.

So you have to refresh the page either with:

  • a full page reload
  • or by doing it with Ajax and manipulating the panel html to include the new content
  • or possibly with an iframe that you refresh with JavaScript (see StackOverflow link above for an example).

Yes an external process rewrites the dashboard through the API. I just need a way to refresh the dashboard. The dashboard chooser loads the dashboards through ajax, so presumably there’s already a mechanism within the grafana javascript, just need to know how to trigger it.

With angular you would use the $location service to reload the route.

Your code is executing outside of the Grafana app but there is some stuff available on the window object so maybe you can get hold of the service like this:

Literally all I want to do is refresh the dashboard. There must be a simple call to do this, already in the Grafana js somewhere.
Just to clarify I’m using the grafana http api to update the dashboard, not touching the disk or database directly.

It does not make a difference how the file on disk/database is updated - it will still be different from the version that is loaded in Grafana.

Yes, see my previous answer - Grafana is an Angular app:

With angular you would use the $location service to reload the route.

From the Grafana code:

i want to write an angular service, how could i use the service in the mysql datasource.ts .how to write a service in the .ts file .if there has an example .thx!!!

Is this related to the original question? Do you want to write your service in the html panel?