@grafana/scenes 4.13.0--canary.705.8801395113.0 → 4.13.0

package/dist/index.js

@@ -1304,7 +1304,7 @@ function lookupVariable(name, sceneObject) {
   return null;
 }
 
-function sceneInterpolator(sceneObject, target, scopedVars, format) {
+function sceneInterpolator(sceneObject, target, scopedVars, format, interpolations) {
   if (!target) {
     return target != null ? target : "";
   }
@@ -1314,9 +1314,16 @@ function sceneInterpolator(sceneObject, target, scopedVars, format) {
     const fmt = fmt2 || fmt3 || format;
     const variable = lookupFormatVariable(variableName, match, scopedVars, sceneObject);
     if (!variable) {
+      if (interpolations) {
+        interpolations.push({ match, variableName, fieldPath, format: fmt, value: match, found: false });
+      }
       return match;
     }
-    return formatValue(variable, variable.getValue(fieldPath), fmt);
+    const value = formatValue(variable, variable.getValue(fieldPath), fmt);
+    if (interpolations) {
+      interpolations.push({ match, variableName, fieldPath, format: fmt, value, found: value !== match });
+    }
+    return value;
   });
 }
 function lookupFormatVariable(name, match, scopedVars, sceneObject) {
@@ -1455,11 +1462,11 @@ function getLayout(scene) {
   }
   return null;
 }
-function interpolate(sceneObject, value, scopedVars, format) {
+function interpolate(sceneObject, value, scopedVars, format, interpolations) {
   if (value === "" || value == null) {
     return "";
   }
-  return sceneInterpolator(sceneObject, value, scopedVars, format);
+  return sceneInterpolator(sceneObject, value, scopedVars, format, interpolations);
 }
 function hasVariableDependencyInLoadingState(sceneObject) {
   if (!sceneObject.variableDependency) {
@@ -2840,59 +2847,6 @@ class CustomAllValue {
   }
 }
 
-class GroupByVariableUrlSyncHandler {
-  constructor(_sceneObject) {
-    this._sceneObject = _sceneObject;
-  }
-  getKey() {
-    return `var-${this._sceneObject.state.name}`;
-  }
-  getKeys() {
-    if (this._sceneObject.state.skipUrlSync) {
-      return [];
-    }
-    return [this.getKey()];
-  }
-  getUrlState() {
-    if (this._sceneObject.state.skipUrlSync) {
-      return {};
-    }
-    let { value: values, text: texts } = this._sceneObject.state;
-    values = Array.isArray(values) ? values : [values];
-    texts = Array.isArray(texts) ? texts : [texts];
-    const urlValue = lodash.zip(values, texts).map(toUrlValues);
-    return { [this.getKey()]: urlValue };
-  }
-  updateFromUrl(values) {
-    let urlValue = values[this.getKey()];
-    if (urlValue != null) {
-      if (!this._sceneObject.isActive) {
-        this._sceneObject.skipNextValidation = true;
-      }
-      urlValue = Array.isArray(urlValue) ? urlValue : [urlValue];
-      const valuesLabelsPairs = urlValue.map((value) => value ? value.split(",") : [value]);
-      let [values2, labels] = lodash.unzip(valuesLabelsPairs);
-      values2 = (values2 != null ? values2 : []).map(unescapeUrlDelimiters);
-      labels = (labels != null ? labels : []).map(unescapeUrlDelimiters);
-      this._sceneObject.setState({
-        urlOptions: values2.map((value, idx) => ({
-          value,
-          text: labels[idx]
-        }))
-      });
-      this._sceneObject.changeValueTo(values2, labels);
-    }
-  }
-}
-function toUrlValues([value, label]) {
-  if (value === void 0 || value === null) {
-    return "";
-  }
-  value = String(value);
-  label = label === void 0 || label === null ? value : String(label);
-  return toUrlCommaDelimitedString(value, label);
-}
-
 var __defProp$z = Object.defineProperty;
 var __defProps$n = Object.defineProperties;
 var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
@@ -2929,7 +2883,6 @@ class GroupByVariable extends MultiValueVariable {
       noValueOnClear: true
     }));
     this.isLazy = true;
-    this._urlSync = new GroupByVariableUrlSyncHandler(this);
     this._getKeys = async (ds) => {
       var _a, _b, _c;
       const override = await ((_b = (_a = this.state).getTagKeysProvider) == null ? void 0 : _b.call(_a, this, null));
@@ -2979,11 +2932,9 @@ class GroupByVariable extends MultiValueVariable {
     this.setState(stateUpdate);
   }
   getValueOptions(args) {
-    var _a;
-    const urlOptions = (_a = this.state.urlOptions) != null ? _a : [];
     if (this.state.defaultOptions) {
       return rxjs.of(
-        lodash.unionBy(this.state.defaultOptions, urlOptions, "value").map((o) => ({
+        this.state.defaultOptions.map((o) => ({
           label: o.text,
           value: String(o.value)
         }))
@@ -2999,7 +2950,7 @@ class GroupByVariable extends MultiValueVariable {
         return rxjs.from(this._getKeys(ds)).pipe(
           rxjs.take(1),
           rxjs.mergeMap((data) => {
-            const a = lodash.unionBy(data, urlOptions, "value").map((i) => {
+            const a = data.map((i) => {
               return {
                 label: i.text,
                 value: i.value ? String(i.value) : i.text
@@ -3017,24 +2968,14 @@ class GroupByVariable extends MultiValueVariable {
 }
 GroupByVariable.Component = GroupByVariableRenderer;
 function GroupByVariableRenderer({ model }) {
-  const { value, text, key, maxVisibleValues, noValueOnClear } = model.useState();
-  const values = React.useMemo(() => {
-    const arrayValue = lodash.isArray(value) ? value : [value];
-    const arrayText = lodash.isArray(text) ? text : [text];
-    return arrayValue.map((value2, idx) => {
-      var _a;
-      return {
-        value: value2,
-        label: String((_a = arrayText[idx]) != null ? _a : value2)
-      };
-    });
-  }, [value, text]);
+  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();
+  const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
   const [isFetchingOptions, setIsFetchingOptions] = React.useState(false);
   const [isOptionsOpen, setIsOptionsOpen] = React.useState(false);
-  const [uncommittedValue, setUncommittedValue] = React.useState(values);
+  const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
   React.useEffect(() => {
-    setUncommittedValue(values);
-  }, [values]);
+    setUncommittedValue(arrayValue);
+  }, [arrayValue]);
   const onInputChange = model.onSearchChange ? (value2, meta) => {
     if (meta.action === "input-change") {
       model.onSearchChange(value2);
@@ -3059,13 +3000,13 @@ function GroupByVariableRenderer({ model }) {
     isLoading: isFetchingOptions,
     onInputChange,
     onBlur: () => {
-      model.changeValueTo(uncommittedValue.map((x) => x.value));
+      model.changeValueTo(uncommittedValue);
     },
     onChange: (newValue, action) => {
       if (action.action === "clear" && noValueOnClear) {
         model.changeValueTo([]);
       }
-      setUncommittedValue(newValue);
+      setUncommittedValue(newValue.map((x) => x.value));
     },
     onOpenMenu: async () => {
       setIsFetchingOptions(true);
@@ -3388,7 +3329,7 @@ class AdHocFiltersVariableUrlSyncHandler {
     if (filters.length === 0) {
       return { [this.getKey()]: [""] };
     }
-    const value = filters.map((filter) => toArray(filter).map(escapeUrlPipeDelimiters).join("|"));
+    const value = filters.map((filter) => toArray(filter).map(escapePipeDelimiters).join("|"));
     return { [this.getKey()]: value };
   }
   updateFromUrl(values) {
@@ -3408,13 +3349,39 @@ function deserializeUrlToFilters(value) {
   const filter = toFilter(value);
   return filter === null ? [] : [filter];
 }
+function escapePipeDelimiters(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  return value = /\|/g[Symbol.replace](value, "__gfp__");
+}
+function escapeCommaDelimiters(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  return /,/g[Symbol.replace](value, "__gfc__");
+}
+function unescapeDelimiters(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  value = /__gfp__/g[Symbol.replace](value, "|");
+  value = /__gfc__/g[Symbol.replace](value, ",");
+  return value;
+}
 function toArray(filter) {
   return [
-    toUrlCommaDelimitedString(filter.key, filter.keyLabel),
+    toCommaDelimitedString(filter.key, filter.keyLabel),
     filter.operator,
-    toUrlCommaDelimitedString(filter.value, filter.valueLabel)
+    toCommaDelimitedString(filter.value, filter.valueLabel)
   ];
 }
+function toCommaDelimitedString(key, label) {
+  if (!label || key === label) {
+    return escapeCommaDelimiters(key);
+  }
+  return [key, label].map(escapeCommaDelimiters).join(",");
+}
 function toFilter(urlValue) {
   if (typeof urlValue !== "string" || urlValue.length === 0) {
     return null;
@@ -3423,7 +3390,7 @@ function toFilter(urlValue) {
     const [key2, label] = v.split(",");
     acc.push(key2, label != null ? label : key2);
     return acc;
-  }, []).map(unescapeUrlDelimiters);
+  }, []).map(unescapeDelimiters);
   return {
     key,
     keyLabel,
@@ -3757,11 +3724,7 @@ class SceneQueryRunner extends SceneObjectBase {
         })
       );
     }
-    this._subs.add(
-      timeRange.subscribeToState(() => {
-        this.runWithTimeRange(timeRange);
-      })
-    );
+    this.subscribeToTimeRangeChanges(timeRange);
     if (this.shouldRunQueriesOnActivate()) {
       this.runQueries();
     }
@@ -3865,6 +3828,7 @@ class SceneQueryRunner extends SceneObjectBase {
     return true;
   }
   _onDeactivate() {
+    var _a;
     if (this._querySub) {
       this._querySub.unsubscribe();
       this._querySub = void 0;
@@ -3873,6 +3837,9 @@ class SceneQueryRunner extends SceneObjectBase {
       this._dataLayersSub.unsubscribe();
       this._dataLayersSub = void 0;
     }
+    (_a = this._timeSub) == null ? void 0 : _a.unsubscribe();
+    this._timeSub = void 0;
+    this._timeSubRange = void 0;
     this._adhocFiltersVar = void 0;
     this._groupByVar = void 0;
     this._variableValueRecorder.recordCurrentDependencyValuesForSceneObject(this);
@@ -3896,8 +3863,21 @@ class SceneQueryRunner extends SceneObjectBase {
   isDataReadyToDisplay() {
     return Boolean(this.state._hasFetchedData);
   }
+  subscribeToTimeRangeChanges(timeRange) {
+    if (this._timeSubRange === timeRange) {
+      return;
+    }
+    if (this._timeSub) {
+      this._timeSub.unsubscribe();
+    }
+    this._timeSubRange = timeRange;
+    this._timeSub = timeRange.subscribeToState(() => {
+      this.runWithTimeRange(timeRange);
+    });
+  }
   runQueries() {
     const timeRange = sceneGraph.getTimeRange(this);
+    this.subscribeToTimeRangeChanges(timeRange);
     this.runWithTimeRange(timeRange);
   }
   getMaxDataPoints() {
@@ -4120,32 +4100,6 @@ function filterOutInactiveRunnerDuplicates(runners) {
     return activeItems;
   });
 }
-function escapeUrlPipeDelimiters(value) {
-  if (value === null || value === void 0) {
-    return "";
-  }
-  return value = /\|/g[Symbol.replace](value, "__gfp__");
-}
-function escapeUrlCommaDelimiters(value) {
-  if (value === null || value === void 0) {
-    return "";
-  }
-  return /,/g[Symbol.replace](value, "__gfc__");
-}
-function unescapeUrlDelimiters(value) {
-  if (value === null || value === void 0) {
-    return "";
-  }
-  value = /__gfp__/g[Symbol.replace](value, "|");
-  value = /__gfc__/g[Symbol.replace](value, ",");
-  return value;
-}
-function toUrlCommaDelimitedString(key, label) {
-  if (!label || key === label) {
-    return escapeUrlCommaDelimiters(key);
-  }
-  return [key, label].map(escapeUrlCommaDelimiters).join(",");
-}
 
 function isAdHocVariable(variable) {
   return variable.state.type === "adhoc";
@@ -6078,7 +6032,8 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
   }
   if (layout === "vertical") {
     return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: verticalContainer
+      className: verticalContainer,
+      "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
     }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
       variable,
       layout
@@ -6087,7 +6042,8 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
     }));
   }
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: containerStyle
+    className: containerStyle,
+    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
   }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
     variable
   }), /* @__PURE__ */ React__default["default"].createElement(variable.Component, {
@@ -6422,6 +6378,7 @@ function VariableValueSelect({ model }) {
     tabSelectsValue: false,
     onInputChange,
     options: model.getOptionsForSelect(),
+    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
     onChange: (newValue) => {
       model.changeValueTo(newValue.value, newValue.label);
     }
@@ -6458,6 +6415,7 @@ function VariableValueSelectMulti({ model }) {
     onBlur: () => {
       model.changeValueTo(uncommittedValue);
     },
+    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
     onChange: (newValue, action) => {
       if (action.action === "clear" && noValueOnClear) {
         model.changeValueTo([]);
@@ -7655,31 +7613,30 @@ function VizPanelMenuRenderer({ model }) {
     }
   }, []);
   const renderItems = (items2) => {
-    return items2.map(
-      (item) => {
-        switch (item.type) {
-          case "divider":
-            return /* @__PURE__ */ React__default["default"].createElement(ui.Menu.Divider, {
-              key: item.text
-            });
-          case "group":
-            return /* @__PURE__ */ React__default["default"].createElement(ui.Menu.Group, {
-              key: item.text,
-              label: item.text
-            }, item.subMenu ? renderItems(item.subMenu) : void 0);
-          default:
-            return /* @__PURE__ */ React__default["default"].createElement(ui.Menu.Item, {
-              key: item.text,
-              label: item.text,
-              icon: item.iconClassName,
-              childItems: item.subMenu ? renderItems(item.subMenu) : void 0,
-              url: item.href,
-              onClick: item.onClick,
-              shortcut: item.shortcut
-            });
-        }
+    return items2.map((item) => {
+      switch (item.type) {
+        case "divider":
+          return /* @__PURE__ */ React__default["default"].createElement(ui.Menu.Divider, {
+            key: item.text
+          });
+        case "group":
+          return /* @__PURE__ */ React__default["default"].createElement(ui.Menu.Group, {
+            key: item.text,
+            label: item.text
+          }, item.subMenu ? renderItems(item.subMenu) : void 0);
+        default:
+          return /* @__PURE__ */ React__default["default"].createElement(ui.Menu.Item, {
+            key: item.text,
+            label: item.text,
+            icon: item.iconClassName,
+            childItems: item.subMenu ? renderItems(item.subMenu) : void 0,
+            url: item.href,
+            onClick: item.onClick,
+            shortcut: item.shortcut,
+            testId: e2eSelectors.selectors.components.Panels.Panel.menuItems(item.text)
+          });
       }
-    );
+    });
   };
   return /* @__PURE__ */ React__default["default"].createElement(ui.Menu, {
     ref
@@ -8303,7 +8260,8 @@ function SceneGridRowRenderer({ model }) {
   }, /* @__PURE__ */ React__default["default"].createElement("button", {
     onClick: model.onCollapseToggle,
     className: styles.rowTitleButton,
-    "aria-label": isCollapsed ? "Expand row" : "Collapse row"
+    "aria-label": isCollapsed ? "Expand row" : "Collapse row",
+    "data-testid": e2eSelectors.selectors.components.DashboardRow.title(sceneGraph.interpolate(model, title, void 0, "text"))
   }, isCollapsible && /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
     name: isCollapsed ? "angle-right" : "angle-down"
   }), /* @__PURE__ */ React__default["default"].createElement("span", {