[solved] Embedding javascript into text panel

Grafana
1

EDIT: found the AJAX plugin - I think that’s what I need. Thanks!

---- original post —

Hello,
I’m trying to make a REST operation using javascript embedded inside a text panel set to HTML mode. I wonder if that’s not the intention of the text panel?

Here’s what’s in the text panel.

<script type="text/javascript" language="javascript">
function UserAction() {
    alert('test');
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", "http://192.168.2.24:8080/rest/items/itm_all_off_fnt", true);
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.send("OFF");
    var response = JSON.parse(xhttp.responseText);
}
</script>
<button type="submit" onclick="UserAction()">Clickme</button>

I see the button and I’m able to click it, but I never see the alert(), so I don’t think UserAction() ever actually gets run.

Is there some other way of doing it? Is there a plugin that lets us do custom REST calls?

1 Like
2

How did you do it?
someone can illustrate an example??

3

For anyone searching for this - I learned that there’s a grafana.ini setting that you have to update in order for HTML and Javascript to render in a text panel without being sanitized.

Once I enabled this, javascript and HTML work correctly.

Here’s the original post:

To enable unsafe javascript execution in text panels enable the settings disable_sanitize_html under the section [panels] in your Grafana ini file, or set env variable GF_PANELS_DISABLE_SANITIZE_HTML=true.

found in this issue: HTML is not working in Text panel using Grafana 6 · Issue #15647 · grafana/grafana · GitHub

2 Likes
4

Once i have upgraded to Grafana 7.1 script stop working

Here’s what’s in the text panel.

    <div style="width: 100%; font-size: 22px; font-weight: 500; text-align: right;" id="time_range_info"></div>
<div style="width: 100%; font-size: 100%; text-align: right;" id="time_range_text">a</div>

<script>
   alert("");
function getDashboardTimeRange(){
   var dateFormat = "ll";
   var tr = angular.element('grafana-app').injector().get('timeSrv').timeRange();
   return ["<img src='/public/stealth/calendar.png'/>&nbsp;&nbsp;", tr.from.format(dateFormat), ' - ', tr.to.format(dateFormat)].join('');
}
function textFill(){
   $('#time_range_info').html(getDashboardTimeRange());
   $('#time_range_text').html($("button[aria-label='TimePicker Open Button'] > span.css-1cvxpvr > span").html());
}
angular.element('grafana-app').injector().get('dashboardSrv').getCurrent().events.on('refresh', function () {textFill()});
textFill();
</script>
2 Likes
5

Hi, After upgrading 7.1 scripts in text panel stopped working.

Did you find any solution for it?

6

Hey facing the same, can someone help

7

Same issue, also using 7.1 version. Script is not working at all. Please help!

8

No solution for me yet :frowning:

9

They fixed the bug, but haven’t released yet, 7.2.0 should address this issue!

10

Looks like they did fix the issue in 7.1.1:

1 Like