Is there a way to introduce new line or a tab in the legend format for table?
I have a table with long list of columns, each representing a prometheus target. This makes it harder to read the column name(i.e. target description). I have a few labels that i want to use in the legend format.
Is it possible to introduce a new line in legend format, some thing like below which doesn’t work.
eg. {{name}} {{\n}} {{other-label/s}}
What do you mean by legend format? There is no legend for the table panel. Do you mean on the Graph panel?
There is a PR for creating aliases for column headers which should be merged soon but I think you mean something else?
Please see the attached image. I am using grafana with prometheus.
Regardless of graph/table panels, I am wondering if we can introduce a newline character in column name or wrap text (microsoft excel terminology)
Aha, thanks for the screenshot. You can use html here. So the
tag or wrapping your text in a
tag will produce a newline.
<p>{{alertname}}</p><br /><p>hi</p>
gives three newlines (one for each
tag and one for the
tag):
Though this can mess up the table layout a bit.
Thanks for the response @daniellee.
Tried this. But whatever tags i put in the legend format is displayed as-is on the table.
Am i missing something?
Looks you have a newline under the text to me. Your br tag is incorrect, it should be <br/>
(not </br>
). Trying writing something after the br tag to test if works:
<p>{{instance}}</p><br />test
or
<p>{{instance}}</p><br />{{instance}}
I am afraid it doesn’t work.
The text box for ‘legend format’ is not rendering the html tags. It is using the tags as plain text.
Did this work for you?
Yes. I went into this panel on the demo site: http://play.grafana.org/dashboard/db/1-promcon-dashboard?panelId=2&fullscreen&edit&orgId=1
and then changed the html in the Legend Format field to: <p>{{alertname}}</p><br /><p>hi</p>
It seems to depend in which mode you are in. Sorry, I have no idea why it is different for different modes. Probably a question for one of the Prometheus guys.
Maybe the Sanitize HTML option has something to do with it:
@anilmanyam looks like the HTML technique does not work for column headers, only for column cells in the table panel.
If the HTML Sanitize
option is checked, the cell formatter code will the mark the html code as safe using ngSanitize. The code for the column headers does not have this option.
Thanks Daniel. Will see if i can find any alternate way.