Using the HTML panel plugin

Grafana
1

I’d like to create a panel using the community uploaded HTML panel to generate a panel, but the readme instructions for how to use javascript within are a little unclear. Here’s the basic code that I’m using:

CSS:

.alert-box {
    background-color: #444444;
    border: 1px solid #888888;
    border-radius: 7px;
    color: #BBB;
    margin: .25rem;
    padding: 1rem;
    text-align: center;
}

div {
    white-space: pre;
}

#alert1 {
    border: 1px solid #f64971;
    background-color: #611f2e;
    color: #f64971;
}

HTML:

<div class='alert-box' id=alert1>
  alert1 Text
</div>

The readme seems to indicate that the onHandleMetric function is executed on the init and refresh events:

onHandleMetric(ctrl: MetricsPanelCtrl, svgnode: HTMLElement)

JS:

// My JS has included some variation of 
me.$.alert1.innerHTML = "Hello World";

// or trying to set the svgnode parameter of the onHandleMetric function to something that looks right 
// to me, like:
svgnode = me.$.alert1
svgnode.innerHTML = "Hello World"

but I get a Grafana error screen that states that " ‘me’ is not defined". Ultimately, I just want to change the color and inner html of the node (or hide the node) with a certain ID, based on the values returned from my query. My JS is pretty rusty, can I get a little help in manipulating that div with JS using this panel?

2

Thank you @shelleyhung836 for your reply in this thread; related thread . You got me to a starting point with this panel.

There is a dearth of useful information on this panel plugin, so I’ll update my progress as I find new ways to use it. This panel seems to ignore the CSS window if the JS windows are populated. So I’m resorting to building an html string with inline style tags, and I’ll set variables from the return object from my query to build the panel.

I’m hoping someone chimes in and says “No No No, ya dummy do it this way instead”, LOL. Here is my code so far:

let html = '';

html += '\n<div style="background-color: #611f2e; ' 
html += 'border: 1px solid #f64971; '
html += 'border-radius: 7px; '
html += 'color: #f64971; '
html += 'margin: 0.25rem; '
html += 'padding: 1rem; '
html += 'text-align: center">Hello World</div>';

htmlnode.innerHTML = html;

And the result is:

grafanaPanel
grafanaPanel1280×101 2.14 KB

I’ll update again when I make some more progress.

1 Like
3

Here is my semi-final code to drive this panel. This will be my last update to this thread unless someone wants to suggest a better way of formatting style than what I’m doing.

let arrayHxObj = ctrl.data[0].rows;
let alertStatus = "-";
let bgColor = '#444';
let borderColor = '#888';
let txtColor = '#BBB';
let html = '';

console.log(arrayHxObj)

for (let i=0; i<arrayHxObj.length; i++){
    console.log(arrayHxObj[i]["alertstatus"]);
    if (arrayHxObj[i]["alertstatus"] === "Initiated") {
        alertStatus = "Initiated";
        bgColor = "#611f2e";
        borderColor = '#f64971';
        txtColor = '#f64971';
        html += '\n<div style="background-color: ' + bgColor + ';' 
        html += 'border: 1px solid ' + borderColor + ';'
        html += 'border-radius: 7px; '
        html += 'color: ' + txtColor + ';'
        html += 'margin: 0.25rem; '
        html += 'padding: 1rem; '
        html += 'text-align: center"> ' + alertStatus + ' </div>';
    } 
    if (arrayHxObj[i]["alertstatus"] === "Acknowledged") {
        alertStatus = "Acknowledged";
        bgColor = "#5e380a";
        borderColor = '#FFAF51';
        txtColor = '#FFAF51';
        html += '\n<div style="background-color: ' + bgColor + ';' 
        html += 'border: 1px solid ' + borderColor + ';'
        html += 'border-radius: 7px; '
        html += 'color: ' + txtColor + ';'
        html += 'margin: 0.25rem; '
        html += 'padding: 1rem; '
        html += 'text-align: center"> ' + alertStatus + ' </div>';
    }  
    if (arrayHxObj[i]["alertstatus"] === "Resolved") {
        alertStatus = "Resolved"
        bgColor = "#123b21";
        borderColor = '#71E097';
        txtColor = '#71E097';
        html += '\n<div style="background-color: ' + bgColor + ';' 
        html += 'border: 1px solid ' + borderColor + ';'
        html += 'border-radius: 7px; '
        html += 'color: ' + txtColor + ';'
        html += 'margin: 0.25rem; '
        html += 'padding: 1rem; '
        html += 'text-align: center"> ' + alertStatus + ' </div>';
    } 
}

//console.log(ctrl.data[0].datapoints[0])

htmlnode.innerHTML = html
4

Did you find a better way how to use this panel?