[solved] Embedding javascript into text panel

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

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

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: https://github.com/grafana/grafana/issues/15647

1 Like

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

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

Did you find any solution for it?

Hey facing the same, can someone help

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

No solution for me yet :frowning:

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

Looks like they did fix the issue in 7.1.1: