-
|
I have an HTML Graphics panel I use to generate a navigation dropdown to the dashboards within our ecosystem. It reads an Infinity CSV to build the dropdown and then adds an event listener on that Select list to monitor for a change. It works very well, except for one issue. We want to pass the currently selected time range on the URL to the new dashboard page. I can successfully do this with a Custom Property defined as &from=${__from}&to=${__to} except that it retrieves the absolute range values of the currently time selection. If the user had selected a relative time (for example, "Today so far" or "Last 6 hours"), that ends up locking them into the time range from the original dashboard they began on. After a few minutes and possibly navigating to other dashboards (which all use the same navigation dropdown), that time range becomes a time in the past and is no longer what they original selected. What I really want is to pass the relative time selection available in ${__url_time_range}. However, when I create a Custom Property for that variable (which interpolates correctly when used in straight HTML in a Text panel), I get back the literal text ${__url_time_range}. I've tried variations of the variable with and without the braces ({}) but neither works. Since the Customer Properties can obviously read the global variables, is there something different about ${__url_time_range} that prevents it from working properly? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
The
{
"calcsMutation": "standard",
"add100Percentage": true,
"centerAlignContent": true,
"overflow": "visible",
"useGrafanaScrollbar": true,
"SVGBaseFix": true,
"codeData": "{\n \"text\": \"Random text\"\n}",
"rootCSS": "",
"css": "* {\n font-family: Open Sans;\n}\n",
"html": "<div></div>",
"renderOnMount": true,
"onRender": "const divElt = htmlNode.querySelector(\"div\");\n\ndivElt.textContent = htmlGraphics.props.replaceVariables(\"${__url_time_range}\");",
"dynamicHtmlGraphics": false,
"dynamicData": false,
"dynamicFieldDisplayValues": false,
"dynamicProps": false,
"panelupdateOnMount": true,
"onInitOnResize": false,
"onInit": ""
}Full dashboard JSON Model {
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": {
"type": "grafana",
"uid": "-- Grafana --"
},
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"target": {
"limit": 100,
"matchAny": false,
"tags": [],
"type": "dashboard"
},
"type": "dashboard"
}
]
},
"editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 0,
"id": 24,
"links": [],
"liveNow": false,
"panels": [
{
"datasource": {
"type": "testdata",
"uid": "o7YyP16nz"
},
"gridPos": {
"h": 9,
"w": 12,
"x": 0,
"y": 0
},
"id": 4,
"options": {
"code": {
"language": "plaintext",
"showLineNumbers": false,
"showMiniMap": false
},
"content": "${__url_time_range}",
"mode": "markdown"
},
"pluginVersion": "9.3.6",
"title": "Text panel",
"type": "text"
},
{
"datasource": {
"type": "testdata",
"uid": "o7YyP16nz"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 9,
"w": 12,
"x": 12,
"y": 0
},
"id": 2,
"options": {
"SVGBaseFix": true,
"add100Percentage": true,
"calcsMutation": "standard",
"centerAlignContent": true,
"codeData": "{\n \"text\": \"Random text\"\n}",
"css": "* {\n font-family: Open Sans;\n}\n",
"dynamicData": false,
"dynamicFieldDisplayValues": false,
"dynamicHtmlGraphics": false,
"dynamicProps": false,
"html": "<div></div>",
"onInit": "",
"onInitOnResize": false,
"onRender": "const divElt = htmlNode.querySelector(\"div\");\n\ndivElt.textContent = htmlGraphics.props.replaceVariables(\"${__url_time_range}\");",
"overflow": "visible",
"panelupdateOnMount": true,
"reduceOptions": {
"calcs": [
"lastNotNull",
"last",
"firstNotNull",
"first",
"min",
"max",
"mean",
"sum",
"count",
"range",
"delta",
"step",
"diff",
"logmin",
"allIsZero",
"allIsNull",
"diffperc"
]
},
"renderOnMount": true,
"rootCSS": "",
"useGrafanaScrollbar": true
},
"title": "HTMLGraphics panel",
"type": "gapit-htmlgraphics-panel"
}
],
"schemaVersion": 37,
"style": "dark",
"tags": [],
"templating": {
"list": []
},
"time": {
"from": "now-6h",
"to": "now"
},
"timepicker": {},
"timezone": "",
"title": "URL time range",
"uid": "8K9QlhAVz",
"version": 5,
"weekStart": ""
} |
Beta Was this translation helpful? Give feedback.
-
|
OK, I've pared a test dashboard down to bare bones. It contains a Text panel and an HTML graphics panel, both displaying the $__url_time_range, $__from and $__to variables. Here is the dashboard visual: And here is the dashboard JSON: |
Beta Was this translation helpful? Give feedback.
-
|
Changing I wonder why there is a difference between them. Full dashboard JSON Model {
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": {
"type": "grafana",
"uid": "-- Grafana --"
},
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"target": {
"limit": 100,
"matchAny": false,
"tags": [],
"type": "dashboard"
},
"type": "dashboard"
}
]
},
"editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 0,
"id": 26,
"links": [],
"liveNow": false,
"panels": [
{
"datasource": {
"type": "grafana-datadog-datasource",
"uid": "azSs4xo7z"
},
"gridPos": {
"h": 4,
"w": 14,
"x": 0,
"y": 0
},
"id": 10,
"options": {
"code": {
"language": "plaintext",
"showLineNumbers": false,
"showMiniMap": false
},
"content": "url_time_range => ${__url_time_range}\n\nfrom & to => from=${__from}&to=${__to}",
"mode": "html"
},
"pluginVersion": "9.3.6",
"targets": [
{
"datasource": {
"uid": "azSs4xo7z"
},
"functions": [],
"groupBy": [],
"queryType": "query",
"refId": "A",
"tags": []
}
],
"title": "Text Panel",
"type": "text"
},
{
"datasource": {
"type": "grafana",
"uid": "grafana"
},
"description": "",
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 4,
"w": 14,
"x": 0,
"y": 4
},
"id": 8,
"options": {
"SVGBaseFix": true,
"add100Percentage": false,
"calcsMutation": "standard",
"centerAlignContent": false,
"codeData": "{\n \"TimeRange\": \"from=${__from}&to=${__to}\",\n \"TimeRange2\": \"${__url_time_range}\"\n}",
"css": "",
"dynamicData": false,
"dynamicFieldDisplayValues": false,
"dynamicHtmlGraphics": false,
"dynamicProps": false,
"html": "",
"onInit": "// ********* //\r\n// Functions //\r\n// ********* //\r\n\r\n// ----------------------------------------\r\n// Retrieve the value of a Grafana variable\r\n// ----------------------------------------\r\nfunction getGrafanaVariableValue(variable) {\r\n return htmlGraphics.props.replaceVariables(variable);\r\n}\r\n\r\n// ******************************************* //\r\n// Begin Main Code //\r\n// ******************************************* //\r\n// Access the Custom Properties settings\r\nconst { TimeRange, TimeRange2, TimeFilter } = customProperties;\r\n\r\n// Get the content of the Grafana variables\r\nlet TimeRangeText = getGrafanaVariableValue(TimeRange).trim();\r\nlet TimeRange2Text = getGrafanaVariableValue(TimeRange2).trim();\r\n\r\n// Copy the current HTML content to work string\r\nlet htmlContent = 'url_time_range => '+TimeRange2Text\r\n + ''\r\n + 'from & to => '+TimeRangeText;\r\n\r\n// Replace the HTML\r\nhtmlNode.innerHTML = htmlContent;\r\n",
"onInitOnResize": false,
"onRender": "",
"overflow": "visible",
"panelupdateOnMount": true,
"reduceOptions": {
"calcs": [
"lastNotNull",
"last",
"firstNotNull",
"first",
"min",
"max",
"mean",
"sum",
"count",
"range",
"delta",
"step",
"diff",
"logmin",
"allIsZero",
"allIsNull",
"diffperc"
]
},
"renderOnMount": true,
"rootCSS": "",
"useGrafanaScrollbar": false
},
"targets": [
{
"datasource": {
"type": "datasource",
"uid": "grafana"
},
"refId": "A"
}
],
"title": "HTML graphics Panel",
"type": "gapit-htmlgraphics-panel"
}
],
"refresh": false,
"schemaVersion": 37,
"style": "dark",
"tags": [],
"templating": {
"list": []
},
"time": {
"from": "now/d",
"to": "now"
},
"timepicker": {},
"timezone": "",
"title": "HTML Tests - Time Range fix",
"uid": "p4MWe2A4k",
"version": 1,
"weekStart": ""
}PS: Making it easier to see/copy the code <3 |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for both the solution and the tip on formatting! :-) |
Beta Was this translation helpful? Give feedback.
The
${__url_time_range}should work in the HTMLGraphics panel.Could you share a bit more information about your setup?
Panel options{ "calcsMutation": "standard", "add100Percentage": true, "centerAlignContent": true, "overflow": "visible", "useGrafanaScrollbar": true, "SVGBaseFix": true, "codeData": "{\n \"text\": \"Random text\"\n}", "rootCSS": "", "css": "* {\n font-family: Open Sans;\n}\n", "html": "<div></div>", "renderOnMount": true, "onRender": "const divElt = htmlNode.querySelector(\"div\");\n\ndivElt.textContent = htmlGraphics.props.replaceVariables(\"${__url_time_range}\");", "dynamicHtmlGraphics": false, "dynamicData": …