Retrieve entire Custom Variable list

[psheehymn]

I have a Custom variable with key:value pairs representing divisions within our company used to subset a CSV in the Infinity data source. I use the CSV to construct a custom Select list (using HTML and Javascript) that drives the dashboard.

The key is a user-friendly text string that may contain spaces and/or special characters (such as "&") that tend not to work well if included in a URL query string; the value has spaces removed and special values altered (i.e "&" => "n") to solve that problem. The page reinvokes itself when the user makes a selection, passing new values on the query string based on the user's selection (alleviating the above concern). In the CSV, I have a column that matches the different value options and it filters the list as expected.

I have the Custom variable defined with an All option as well, which, as expected, does not filter the list. However, in that particular case, I'd like to pre-pend the text in the select list options with the user-friendly version of the division name. Since I have the value version of the division in each CSV record, I need to do a reverse lookup on the Custom variable values to get back the key.

I've looked thru all the Grafana documentation on Custom variables and can't find anything about getting the key based on the value. However, if I could retrieve the entire Custom variable list in the JS, I could build a Map object with the keys and values inverted to easily look up the user-friendly name based on the values from the CSV records.

I couldn't find anything in the HTML Graphics docs about retrieving all the values from a Custom variable (although I could easily have missed it, too). Is that possible?

[ZuperZee]

You could use

htmlGraphics.getTemplateSrv().getVariables()

The getVariables() is a bit hidden, but here is the Grafana source code definition
https://github.com/grafana/grafana/blob/2c2ac096fe66df155b68f1578bfc1137e7af53e8/public/app/features/templating/template_srv.ts#L77
It just retrieves all the variables on the current dashboard.

I might be misinterpreting it, but below is a dashboard retrieving a value from somewhere. I retrieved it from the Grafana variables. The key is retrieved based on the value by retrieving all the Grafana variables and finding the key from the value.

{
  "__inputs": [],
  "__elements": {},
  "__requires": [
    {
      "type": "panel",
      "id": "gapit-htmlgraphics-panel",
      "name": "HTML graphics",
      "version": "2.1.1"
    },
    {
      "type": "grafana",
      "id": "grafana",
      "name": "Grafana",
      "version": "11.0.0"
    }
  ],
  "annotations": {
    "list": [
      {
        "builtIn": 1,
        "datasource": {
          "type": "grafana",
          "uid": "-- Grafana --"
        },
        "enable": true,
        "hide": true,
        "iconColor": "rgba(0, 211, 255, 1)",
        "name": "Annotations & Alerts",
        "type": "dashboard"
      }
    ]
  },
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 0,
  "id": null,
  "links": [],
  "panels": [
    {
      "datasource": {
        "type": "grafana",
        "uid": "grafana"
      },
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "thresholds"
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          }
        },
        "overrides": []
      },
      "gridPos": {
        "h": 12,
        "w": 10,
        "x": 0,
        "y": 0
      },
      "id": 1,
      "options": {
        "SVGBaseFix": true,
        "add100Percentage": true,
        "calcsMutation": "standard",
        "centerAlignContent": true,
        "codeData": "{\n  \"text\": \"\"\n}",
        "css": "* {\n  font-family: Open Sans;\n}\n\n.box {\n  border: solid #555 2px;\n  border-radius: 10px;\n  padding: 10px 20px;\n}\n",
        "dynamicData": false,
        "dynamicFieldDisplayValues": false,
        "dynamicHtmlGraphics": false,
        "dynamicProps": false,
        "html": "<div>\n  <div id=\"value\"></div>\n  <div id=\"key\"></div>\n</div>",
        "onInit": "",
        "onInitOnResize": false,
        "onRender": "/*\n  $var2\n  Reference the variable to watch to force the panel\n  to update when the variable changes.\n  It's referenced further down, but just as a note\n  to remember to keep the variable reference ($var2)\n  somewhere in the panel:D\n */\n\nconst variables = htmlGraphics.getTemplateSrv().getVariables();\nconst var2Value = htmlGraphics.getTemplateSrv().replace(\"$var2\");\nconst var1Obj = variables.find((v) => v.name === \"var1\");\nconst var1KeyFromVar2Value = var1Obj.options.find((option) => option.value === var2Value).text;\n\nconst keyElt = htmlNode.querySelector(\"#key\");\nkeyElt.textContent = `Key: ${var1KeyFromVar2Value}`;\n\nconst valueElt = htmlNode.querySelector(\"#value\");\nvalueElt.textContent = `Value: ${var2Value}`;\n",
        "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
      },
      "targets": [
        {
          "datasource": {
            "type": "datasource",
            "uid": "grafana"
          },
          "queryType": "randomWalk",
          "refId": "A"
        }
      ],
      "title": "Panel Title",
      "type": "gapit-htmlgraphics-panel"
    }
  ],
  "refresh": "",
  "schemaVersion": 39,
  "tags": [],
  "templating": {
    "list": [
      {
        "current": {
          "selected": true,
          "text": [
            "All"
          ],
          "value": [
            "$__all"
          ]
        },
        "hide": 0,
        "includeAll": true,
        "multi": true,
        "name": "var1",
        "options": [
          {
            "selected": true,
            "text": "All",
            "value": "$__all"
          },
          {
            "selected": false,
            "text": "key1",
            "value": "value1"
          },
          {
            "selected": false,
            "text": "key2",
            "value": "value2"
          },
          {
            "selected": false,
            "text": "key3",
            "value": "value3"
          }
        ],
        "query": "key1 : value1,key2 : value2,key3 : value3",
        "queryValue": "",
        "skipUrlSync": false,
        "type": "custom"
      },
      {
        "current": {
          "selected": true,
          "text": "key1",
          "value": "value1"
        },
        "hide": 0,
        "includeAll": false,
        "multi": false,
        "name": "var2",
        "options": [
          {
            "selected": true,
            "text": "key1",
            "value": "value1"
          },
          {
            "selected": false,
            "text": "key2",
            "value": "value2"
          },
          {
            "selected": false,
            "text": "key3",
            "value": "value3"
          }
        ],
        "query": "key1 : value1,key2 : value2,key3 : value3",
        "queryValue": "",
        "skipUrlSync": false,
        "type": "custom"
      }
    ]
  },
  "time": {
    "from": "now-1h",
    "to": "now"
  },
  "timeRangeUpdatedDuringEditOrView": false,
  "timepicker": {},
  "timezone": "browser",
  "title": "Retrieve entire variable list",
  "uid": "edol8bc2leupsd",
  "version": 8,
  "weekStart": ""
}