@grafana/scenes 6.27.0 → 6.27.2

package/dist/index.js

@@ -1504,6 +1504,20 @@ const formatRegistry = new data.Registry(() => {
       description: "SQL string quoting and commas for use in IN statements and other scenarios",
       formatter: sqlStringFormatter
     },
+    {
+      id: "join",
+      // join not yet available in depended @grafana/schema version
+      name: "Join",
+      description: "Join values with a comma",
+      formatter: (value, args) => {
+        var _a;
+        if (lodash.isArray(value)) {
+          const separator = (_a = args[0]) != null ? _a : ",";
+          return value.join(separator);
+        }
+        return String(value);
+      }
+    },
     {
       id: schema.VariableFormatID.Date,
       name: "Date",
@@ -1578,6 +1592,19 @@ const formatRegistry = new data.Registry(() => {
         return formatQueryParameter(variable.state.name, value);
       }
     },
+    {
+      id: "customqueryparam",
+      name: "Custom query parameter",
+      description: "Format variables as URL parameters with custom name and value prefix. Example in multi-variable scenario A + B + C => p-foo=x-A&p-foo=x-B&p-foo=x-C.",
+      formatter: (value, args, variable) => {
+        const name = encodeURIComponentStrict(args[0] || variable.state.name);
+        const valuePrefix = encodeURIComponentStrict(args[1] || "");
+        if (Array.isArray(value)) {
+          return value.map((v) => customFormatQueryParameter(name, v, valuePrefix)).join("&");
+        }
+        return customFormatQueryParameter(name, value, valuePrefix);
+      }
+    },
     {
       id: schema.VariableFormatID.UriEncode,
       name: "Percent encode as URI",
@@ -1614,6 +1641,9 @@ const replaceSpecialCharactersToASCII = (value) => value.replace(/[!'()*]/g, (c)
 function formatQueryParameter(name, value) {
   return `var-${name}=${encodeURIComponentStrict(value)}`;
 }
+function customFormatQueryParameter(name, value, valuePrefix = "") {
+  return `${name}=${valuePrefix}${encodeURIComponentStrict(value)}`;
+}
 const SQL_ESCAPE_MAP = {
   "'": "''",
   '"': '\\"'
@@ -1835,14 +1865,21 @@ class MultiValueVariable extends SceneObjectBase {
     }
     this.skipNextValidation = false;
   }
-  getValue() {
+  getValue(fieldPath) {
+    let value = this.state.value;
     if (this.hasAllValue()) {
       if (this.state.allValue) {
         return new CustomAllValue(this.state.allValue, this);
       }
-      return this.state.options.map((x) => x.value);
+      value = this.state.options.map((x) => x.value);
     }
-    return this.state.value;
+    if (fieldPath != null && Array.isArray(value)) {
+      const index = parseInt(fieldPath, 10);
+      if (!isNaN(index) && index >= 0 && index < value.length) {
+        return value[index];
+      }
+    }
+    return value;
   }
   getValueText() {
     if (this.hasAllValue()) {
@@ -7354,7 +7391,19 @@ class QueryVariable extends MultiValueVariable {
             if (this.state.regex) {
               regex = sceneGraph.interpolate(this, this.state.regex, void 0, "regex");
             }
-            return rxjs.of(metricNamesToVariableValues(regex, this.state.sort, values));
+            let options = metricNamesToVariableValues(regex, this.state.sort, values);
+            if (this.state.staticOptions) {
+              const customOptions = this.state.staticOptions;
+              options = options.filter((option) => !customOptions.find((custom) => custom.value === option.value));
+              if (this.state.staticOptionsOrder === "after") {
+                options.push(...customOptions);
+              } else if (this.state.staticOptionsOrder === "sorted") {
+                options = sortVariableValues(options.concat(customOptions), this.state.sort);
+              } else {
+                options.unshift(...customOptions);
+              }
+            }
+            return rxjs.of(options);
           }),
           rxjs.catchError((error) => {
             if (error.cancelled) {
@@ -10424,7 +10473,7 @@ class TextBoxVariable extends SceneObjectBase {
       name: "",
       ...initialState
     });
-    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: () => [this.getKey()] });
+    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: () => this.getKeys() });
   }
   getValue() {
     return this.state.value;
@@ -10438,7 +10487,16 @@ class TextBoxVariable extends SceneObjectBase {
   getKey() {
     return `var-${this.state.name}`;
   }
+  getKeys() {
+    if (this.state.skipUrlSync) {
+      return [];
+    }
+    return [this.getKey()];
+  }
   getUrlState() {
+    if (this.state.skipUrlSync) {
+      return {};
+    }
     return { [this.getKey()]: this.state.value };
   }
   updateFromUrl(values) {