public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboards: Add join and customqueryparam template variable formatters (#107904)

Browse Source 
* Update scenes lib

* update schema for customqueryparam formatter

* add docs for new formatters

* fix docs example

* sort alpha
This commit is contained in:
Josh Hunt
2025-07-14 17:08:06 +01:00
committed by GitHub
parent 403d6380fa
commit 12f05a8553
5 changed files with 49 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/sources/dashboards/variables/variable-syntax/index.md
+28 -10
View File
@@ -94,6 +94,16 @@ String to interpolate: '${servers:glob}'
Interpolation result: '{test1,test2}'
```
### Join
Formats multi-valued variables with a custom delimiter. If no delimiter argument is supplied, they will be combined with `,`.
```bash
servers = ["test1", "test2"]
String to interpolate: '${servers:join:&}'
Interpolation result: "test1&test2"
```
### JSON
Formats variables with multiple values as a comma-separated string.
@@ -134,6 +144,24 @@ String to interpolate: '${servers:pipe}'
Interpolation result: 'test1.|test2'
```
### Query parameters
Formats single- and multi-valued variables into their query parameter representation. Example: `var-foo=value1&var-foo=value2`
```bash
servers = ["test1", "test2"]
String to interpolate: '${servers:queryparam}'
Interpolation result: "var-servers=test1&var-servers=test2"
```
Use the `customqueryparam` formatter to customize how the query parameters are formatted. It accepts two optional arguments to specify the parameter name, and a value prefix.
```bash
servers = ["test1", "test2"]
String to interpolate: '${servers:customqueryparam:v-servers:x-}'
Interpolation result: "v-servers=x-test1&v-servers=x-test2"
```
### Raw
Doesn't apply any data source-specific formatting to the variable.
@@ -194,13 +222,3 @@ servers = ["test1", "test2"]
String to interpolate: '${servers:text}'
Interpolation result: "test1 + test2"
```
### Query parameters
Formats single- and multi-valued variables into their query parameter representation. Example: `var-foo=value1&var-foo=value2`
```bash
servers = ["test1", "test2"]
String to interpolate: '${servers:queryparam}'
Interpolation result: "var-servers=test1&var-servers=test2"
```
package.json
+2 -2
View File
@@ -289,8 +289,8 @@
"@grafana/plugin-ui": "0.10.7",
"@grafana/prometheus": "workspace:*",
"@grafana/runtime": "workspace:*",
"@grafana/scenes": "^6.27.1",
"@grafana/scenes-react": "^6.27.1",
"@grafana/scenes": "^6.27.2",
"@grafana/scenes-react": "^6.27.2",
"@grafana/schema": "workspace:*",
"@grafana/sql": "workspace:*",
"@grafana/ui": "workspace:*",
packages/grafana-schema/src/common/common.gen.ts
+1
View File
@@ -888,6 +888,7 @@ export type TimeZoneBrowser = 'browser';
*/
export enum VariableFormatID {
CSV = 'csv',
CustomQueryParam = 'customqueryparam',
Date = 'date',
Distributed = 'distributed',
DoubleQuote = 'doublequote',
packages/grafana-schema/src/common/variables.cue
+3 -1
View File
@@ -38,4 +38,6 @@ VariableFormatID:
// Format variables in their text representation. Example in multi-variable scenario A + B + C.
"text" |
// Format variables as URL parameters. Example in multi-variable scenario A + B + C => var-foo=A&var-foo=B&var-foo=C.
"queryparam" @cuetsy(kind="enum",memberNames="Join|Lucene|Raw|Regex|Pipe|Distributed|CSV|HTML|JSON|PercentEncode|UriEncode|SingleQuote|DoubleQuote|SQLString|Date|Glob|Text|QueryParam")
"queryparam" |
// Format variables as URL parameters with custom parameter name and value prefix.
"customqueryparam" @cuetsy(kind="enum",memberNames="Join|Lucene|Raw|Regex|Pipe|Distributed|CSV|HTML|JSON|PercentEncode|UriEncode|SingleQuote|DoubleQuote|SQLString|Date|Glob|Text|QueryParam|CustomQueryParam")
yarn.lock
+15 -5
View File
@@ -3549,7 +3549,7 @@ __metadata:
languageName: unknown
linkType: soft
"@grafana/scenes-react@npm:^6.27.1":
"@grafana/scenes-react@npm:^6.27.2":
version: 6.27.2
resolution: "@grafana/scenes-react@npm:6.27.2"
dependencies:
@@ -3569,7 +3569,7 @@ __metadata:
languageName: node
linkType: hard
"@grafana/scenes@npm:6.27.2, @grafana/scenes@npm:^6.27.1":
"@grafana/scenes@npm:6.27.2, @grafana/scenes@npm:^6.27.2":
version: 6.27.2
resolution: "@grafana/scenes@npm:6.27.2"
dependencies:
@@ -18159,8 +18159,8 @@ __metadata:
"@grafana/plugin-ui": "npm:0.10.7"
"@grafana/prometheus": "workspace:*"
"@grafana/runtime": "workspace:*"
"@grafana/scenes": "npm:^6.27.1"
"@grafana/scenes-react": "npm:^6.27.1"
"@grafana/scenes": "npm:^6.27.2"
"@grafana/scenes-react": "npm:^6.27.2"
"@grafana/schema": "workspace:*"
"@grafana/sql": "workspace:*"
"@grafana/test-utils": "workspace:*"
@@ -27341,7 +27341,7 @@ __metadata:
languageName: node
linkType: hard
"react-virtualized-auto-sizer@npm:*, react-virtualized-auto-sizer@npm:1.0.26, react-virtualized-auto-sizer@npm:^1.0.6":
"react-virtualized-auto-sizer@npm:*, react-virtualized-auto-sizer@npm:1.0.26":
version: 1.0.26
resolution: "react-virtualized-auto-sizer@npm:1.0.26"
peerDependencies:
@@ -27361,6 +27361,16 @@ __metadata:
languageName: node
linkType: hard
"react-virtualized-auto-sizer@npm:^1.0.6":
version: 1.0.25
resolution: "react-virtualized-auto-sizer@npm:1.0.25"
peerDependencies:
react: ^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0
react-dom: ^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0
checksum: 10/43678a904019f0413a3c649b5b64ea51263283120c991b285077b5075cf2ea564571f6d48b3a396b588d500d45820d1c98989cb7091e2a009e73e4faa7da9d20
languageName: node
linkType: hard
"react-window-infinite-loader@npm:1.0.10":
version: 1.0.10
resolution: "react-window-infinite-loader@npm:1.0.10"