@grafana/scenes 4.11.2--canary.648.8738574184.0 → 4.11.3--canary.690.8783271240.0

package/dist/index.js

@@ -2840,81 +2840,6 @@ class CustomAllValue {
   }
 }
 
-function VariableValueSelect({ model }) {
-  const { value, key } = model.useState();
-  const onInputChange = model.onSearchChange ? (value2, meta) => {
-    if (meta.action === "input-change") {
-      model.onSearchChange(value2);
-    }
-  } : void 0;
-  return /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
-    id: key,
-    placeholder: "Select value",
-    width: "auto",
-    value,
-    allowCustomValue: true,
-    virtualized: true,
-    tabSelectsValue: false,
-    onInputChange,
-    options: model.getOptionsForSelect(),
-    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
-    onChange: (newValue) => {
-      model.changeValueTo(newValue.value, newValue.label);
-    }
-  });
-}
-function VariableValueSelectMulti({ model }) {
-  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();
-  const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
-  const options = model.getOptionsForSelect();
-  const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
-  React.useEffect(() => {
-    setUncommittedValue(arrayValue);
-  }, [arrayValue]);
-  const onInputChange = model.onSearchChange ? (value2, meta) => {
-    if (meta.action === "input-change") {
-      model.onSearchChange(value2);
-    }
-  } : void 0;
-  const placeholder = options.length > 0 ? "Select value" : "";
-  return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
-    id: key,
-    placeholder,
-    width: "auto",
-    value: uncommittedValue,
-    noMultiValueWrap: true,
-    maxVisibleValues: maxVisibleValues != null ? maxVisibleValues : 5,
-    tabSelectsValue: false,
-    virtualized: true,
-    allowCustomValue: true,
-    options: model.getOptionsForSelect(),
-    closeMenuOnSelect: false,
-    isClearable: true,
-    onInputChange,
-    onBlur: () => {
-      model.changeValueTo(uncommittedValue);
-    },
-    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
-    onChange: (newValue, action) => {
-      if (action.action === "clear" && noValueOnClear) {
-        model.changeValueTo([]);
-      }
-      setUncommittedValue(newValue.map((x) => x.value));
-    }
-  });
-}
-function renderSelectForVariable(model) {
-  if (model.state.isMulti) {
-    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelectMulti, {
-      model
-    });
-  } else {
-    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelect, {
-      model
-    });
-  }
-}
-
 var __defProp$z = Object.defineProperty;
 var __defProps$n = Object.defineProperties;
 var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
@@ -2950,6 +2875,7 @@ class GroupByVariable extends MultiValueVariable {
     }, initialState), {
       noValueOnClear: true
     }));
+    this.isLazy = true;
     this._getKeys = async (ds) => {
       var _a, _b, _c;
       const override = await ((_b = (_a = this.state).getTagKeysProvider) == null ? void 0 : _b.call(_a, this, null));
@@ -3035,7 +2961,56 @@ class GroupByVariable extends MultiValueVariable {
 }
 GroupByVariable.Component = GroupByVariableRenderer;
 function GroupByVariableRenderer({ model }) {
-  return renderSelectForVariable(model);
+  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(arrayValue);
+  React.useEffect(() => {
+    setUncommittedValue(arrayValue);
+  }, [arrayValue]);
+  const onInputChange = model.onSearchChange ? (value2, meta) => {
+    if (meta.action === "input-change") {
+      model.onSearchChange(value2);
+    }
+  } : void 0;
+  const placeholder = "Select value";
+  return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
+    "data-testid": `GroupBySelect-${key}`,
+    id: key,
+    placeholder,
+    width: "auto",
+    value: uncommittedValue,
+    noMultiValueWrap: true,
+    maxVisibleValues: maxVisibleValues != null ? maxVisibleValues : 5,
+    tabSelectsValue: false,
+    virtualized: true,
+    allowCustomValue: true,
+    options: model.getOptionsForSelect(),
+    closeMenuOnSelect: false,
+    isOpen: isOptionsOpen,
+    isClearable: true,
+    isLoading: isFetchingOptions,
+    onInputChange,
+    onBlur: () => {
+      model.changeValueTo(uncommittedValue);
+    },
+    onChange: (newValue, action) => {
+      if (action.action === "clear" && noValueOnClear) {
+        model.changeValueTo([]);
+      }
+      setUncommittedValue(newValue.map((x) => x.value));
+    },
+    onOpenMenu: async () => {
+      setIsFetchingOptions(true);
+      await rxjs.lastValueFrom(model.validateAndUpdate());
+      setIsFetchingOptions(false);
+      setIsOptionsOpen(true);
+    },
+    onCloseMenu: () => {
+      setIsOptionsOpen(false);
+    }
+  });
 }
 
 function LoadingIndicator(props) {
@@ -3170,24 +3145,18 @@ var __spreadValues$y = (a, b) => {
   return a;
 };
 var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
+function keyLabelToOption(key, label) {
+  return key !== "" ? {
+    value: key,
+    label: label || key
+  } : null;
+}
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b;
   const styles = ui.useStyles2(getStyles$7);
   const [state, setState] = React.useState({});
-  const keyValue = React.useMemo(() => {
-    if (filter.key !== "") {
-      if (model.state.defaultKeys) {
-        const matchingDefaultKey = model.state.defaultKeys.find((option) => option.value === filter.key);
-        if (matchingDefaultKey) {
-          return toSelectableValue(matchingDefaultKey);
-        }
-      } else {
-        return data.toOption(filter.key);
-      }
-    }
-    return null;
-  }, [filter.key, model.state.defaultKeys]);
-  const valueValue = filter.value !== "" ? data.toOption(filter.value) : null;
+  const keyValue = keyLabelToOption(filter.key, filter.keyLabel);
+  const valueValue = keyLabelToOption(filter.value, filter.valueLabel);
   const valueSelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
     allowCustomValue: true,
     formatCreateLabel: (inputValue) => `Use custom value: ${inputValue}`,
@@ -3197,7 +3166,7 @@ function AdHocFilterRenderer({ filter, model }) {
     value: valueValue,
     placeholder: "Select value",
     options: state.values,
-    onChange: (v) => model._updateFilter(filter, "value", v.value),
+    onChange: (v) => model._updateFilter(filter, "value", v),
     isOpen: state.isValuesOpen,
     isLoading: state.isValuesLoading,
     autoFocus: filter.key !== "" && filter.value === "",
@@ -3219,7 +3188,7 @@ function AdHocFilterRenderer({ filter, model }) {
     value: keyValue,
     placeholder: "Select label",
     options: state.keys,
-    onChange: (v) => model._updateFilter(filter, "key", v.value),
+    onChange: (v) => model._updateFilter(filter, "key", v),
     autoFocus: filter.key === "",
     isOpen: state.isKeysOpen,
     isLoading: state.isKeysLoading,
@@ -3266,7 +3235,7 @@ function AdHocFilterRenderer({ filter, model }) {
     disabled: model.state.readOnly,
     options: model._getOperators(),
     width: "auto",
-    onChange: (v) => model._updateFilter(filter, "operator", v.value)
+    onChange: (v) => model._updateFilter(filter, "operator", v)
   }), valueSelect, /* @__PURE__ */ React__default["default"].createElement(ui.Button, {
     variant: "secondary",
     "aria-label": "Remove filter",
@@ -3353,7 +3322,7 @@ class AdHocFiltersVariableUrlSyncHandler {
     if (filters.length === 0) {
       return { [this.getKey()]: [""] };
     }
-    const value = filters.map((filter) => toArray(filter).map(escapeDelimiter).join("|"));
+    const value = filters.map((filter) => toArray(filter).map(escapePipeDelimiters).join("|"));
     return { [this.getKey()]: value };
   }
   updateFromUrl(values) {
@@ -3373,30 +3342,54 @@ function deserializeUrlToFilters(value) {
   const filter = toFilter(value);
   return filter === null ? [] : [filter];
 }
-function escapeDelimiter(value) {
+function escapePipeDelimiters(value) {
   if (value === null || value === void 0) {
     return "";
   }
-  return /\|/g[Symbol.replace](value, "__gfp__");
+  return value = /\|/g[Symbol.replace](value, "__gfp__");
 }
-function unescapeDelimiter(value) {
+function escapeCommaDelimiters(value) {
   if (value === null || value === void 0) {
     return "";
   }
-  return /__gfp__/g[Symbol.replace](value, "|");
+  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 [filter.key, filter.operator, filter.value];
+  return [
+    toCommaDelimitedString(filter.key, filter.keyLabel),
+    filter.operator,
+    toCommaDelimitedString(filter.value, filter.valueLabel)
+  ];
+}
+function toCommaDelimitedString(key, label) {
+  if (!label || key === label) {
+    return escapeCommaDelimiters(key);
+  }
+  return [key, label].map(escapeCommaDelimiters).join(",");
 }
-function toFilter(value) {
-  if (typeof value !== "string" || value.length === 0) {
+function toFilter(urlValue) {
+  if (typeof urlValue !== "string" || urlValue.length === 0) {
     return null;
   }
-  const parts = value.split("|").map(unescapeDelimiter);
+  const [key, keyLabel, operator, _operatorLabel, value, valueLabel] = urlValue.split("|").reduce((acc, v) => {
+    const [key2, label] = v.split(",");
+    acc.push(key2, label != null ? label : key2);
+    return acc;
+  }, []).map(unescapeDelimiters);
   return {
-    key: parts[0],
-    operator: parts[1],
-    value: parts[2],
+    key,
+    keyLabel,
+    operator,
+    value,
+    valueLabel,
     condition: ""
   };
 }
@@ -3455,22 +3448,23 @@ class AdHocFiltersVariable extends SceneObjectBase {
   getValue() {
     return this.state.filterExpression;
   }
-  _updateFilter(filter, prop, value) {
+  _updateFilter(filter, prop, { value, label }) {
     if (value == null) {
       return;
     }
     const { filters, _wip } = this.state;
+    const propLabelKey = `${prop}Label`;
     if (filter === _wip) {
       if (prop === "value") {
-        this.setState({ filters: [...filters, __spreadProps$l(__spreadValues$x({}, _wip), { [prop]: value })], _wip: void 0 });
+        this.setState({ filters: [...filters, __spreadProps$l(__spreadValues$x({}, _wip), { [prop]: value, [propLabelKey]: label })], _wip: void 0 });
       } else {
-        this.setState({ _wip: __spreadProps$l(__spreadValues$x({}, filter), { [prop]: value }) });
+        this.setState({ _wip: __spreadProps$l(__spreadValues$x({}, filter), { [prop]: value, [propLabelKey]: label }) });
       }
       return;
     }
     const updatedFilters = this.state.filters.map((f) => {
       if (f === filter) {
-        return __spreadProps$l(__spreadValues$x({}, f), { [prop]: value });
+        return __spreadProps$l(__spreadValues$x({}, f), { [prop]: value, [propLabelKey]: label });
       }
       return f;
     });
@@ -3529,7 +3523,9 @@ class AdHocFiltersVariable extends SceneObjectBase {
     return values.map(toSelectableValue);
   }
   _addWip() {
-    this.setState({ _wip: { key: "", value: "", operator: "=", condition: "" } });
+    this.setState({
+      _wip: { key: "", keyLabel: "", value: "", valueLabel: "", operator: "=", condition: "" }
+    });
   }
   _getOperators() {
     return ["=", "!=", "<", ">", "=~", "!~"].map((value) => ({
@@ -4051,9 +4047,9 @@ function escapeLokiRegexp(value) {
 function getQueriesForVariables(sourceObject) {
   const runners = sceneGraph.findAllObjects(
     sourceObject.getRoot(),
-    (o) => o instanceof SceneQueryRunner && o.isActive
+    (o) => o instanceof SceneQueryRunner
   );
-  const applicableRunners = runners.filter((r) => {
+  const applicableRunners = filterOutInactiveRunnerDuplicates(runners).filter((r) => {
     var _a, _b;
     return ((_a = r.state.datasource) == null ? void 0 : _a.uid) === ((_b = sourceObject.state.datasource) == null ? void 0 : _b.uid);
   });
@@ -4066,6 +4062,24 @@ function getQueriesForVariables(sourceObject) {
   });
   return result;
 }
+function filterOutInactiveRunnerDuplicates(runners) {
+  const groupedItems = {};
+  for (const item of runners) {
+    if (item.state.key) {
+      if (!(item.state.key in groupedItems)) {
+        groupedItems[item.state.key] = [];
+      }
+      groupedItems[item.state.key].push(item);
+    }
+  }
+  return Object.values(groupedItems).flatMap((group) => {
+    const activeItems = group.filter((item) => item.isActive);
+    if (activeItems.length === 0 && group.length === 1) {
+      return group;
+    }
+    return activeItems;
+  });
+}
 
 function isAdHocVariable(variable) {
   return variable.state.type === "adhoc";
@@ -5990,8 +6004,7 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
   }
   if (layout === "vertical") {
     return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: verticalContainer,
-      "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
+      className: verticalContainer
     }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
       variable,
       layout
@@ -6000,8 +6013,7 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
     }));
   }
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: containerStyle,
-    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
+    className: containerStyle
   }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
     variable
   }), /* @__PURE__ */ React__default["default"].createElement(variable.Component, {
@@ -6139,6 +6151,9 @@ class SceneVariableSet extends SceneObjectBase {
     }
   }
   _variableNeedsUpdate(variable) {
+    if (variable.isLazy) {
+      return false;
+    }
     if (!variable.validateAndUpdate) {
       return false;
     }
@@ -6316,6 +6331,79 @@ class ConstantVariable extends SceneObjectBase {
   }
 }
 
+function VariableValueSelect({ model }) {
+  const { value, key } = model.useState();
+  const onInputChange = model.onSearchChange ? (value2, meta) => {
+    if (meta.action === "input-change") {
+      model.onSearchChange(value2);
+    }
+  } : void 0;
+  return /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
+    id: key,
+    placeholder: "Select value",
+    width: "auto",
+    value,
+    allowCustomValue: true,
+    virtualized: true,
+    tabSelectsValue: false,
+    onInputChange,
+    options: model.getOptionsForSelect(),
+    onChange: (newValue) => {
+      model.changeValueTo(newValue.value, newValue.label);
+    }
+  });
+}
+function VariableValueSelectMulti({ model }) {
+  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();
+  const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
+  const options = model.getOptionsForSelect();
+  const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
+  React.useEffect(() => {
+    setUncommittedValue(arrayValue);
+  }, [arrayValue]);
+  const onInputChange = model.onSearchChange ? (value2, meta) => {
+    if (meta.action === "input-change") {
+      model.onSearchChange(value2);
+    }
+  } : void 0;
+  const placeholder = options.length > 0 ? "Select value" : "";
+  return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
+    id: key,
+    placeholder,
+    width: "auto",
+    value: uncommittedValue,
+    noMultiValueWrap: true,
+    maxVisibleValues: maxVisibleValues != null ? maxVisibleValues : 5,
+    tabSelectsValue: false,
+    virtualized: true,
+    allowCustomValue: true,
+    options: model.getOptionsForSelect(),
+    closeMenuOnSelect: false,
+    isClearable: true,
+    onInputChange,
+    onBlur: () => {
+      model.changeValueTo(uncommittedValue);
+    },
+    onChange: (newValue, action) => {
+      if (action.action === "clear" && noValueOnClear) {
+        model.changeValueTo([]);
+      }
+      setUncommittedValue(newValue.map((x) => x.value));
+    }
+  });
+}
+function renderSelectForVariable(model) {
+  if (model.state.isMulti) {
+    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelectMulti, {
+      model
+    });
+  } else {
+    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelect, {
+      model
+    });
+  }
+}
+
 var __defProp$i = Object.defineProperty;
 var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
 var __hasOwnProp$i = Object.prototype.hasOwnProperty;
@@ -6990,7 +7078,7 @@ var __spreadValues$e = (a, b) => {
   return a;
 };
 class TestVariable extends MultiValueVariable {
-  constructor(initialState) {
+  constructor(initialState, isLazy = false) {
     super(__spreadValues$e({
       type: "custom",
       name: "Test",
@@ -7003,9 +7091,11 @@ class TestVariable extends MultiValueVariable {
     this.completeUpdate = new rxjs.Subject();
     this.isGettingValues = true;
     this.getValueOptionsCount = 0;
+    this.isLazy = false;
     this._variableDependency = new VariableDependencyConfig(this, {
       statePaths: ["query"]
     });
+    this.isLazy = isLazy;
   }
   getValueOptions(args) {
     const { delayMs } = this.state;
@@ -7501,8 +7591,7 @@ function VizPanelMenuRenderer({ model }) {
         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)
+        shortcut: item.shortcut
       })
     );
   };
@@ -8128,8 +8217,7 @@ function SceneGridRowRenderer({ model }) {
   }, /* @__PURE__ */ React__default["default"].createElement("button", {
     onClick: model.onCollapseToggle,
     className: styles.rowTitleButton,
-    "aria-label": isCollapsed ? "Expand row" : "Collapse row",
-    "data-testid": e2eSelectors.selectors.components.DashboardRow.title(sceneGraph.interpolate(model, title, void 0, "text"))
+    "aria-label": isCollapsed ? "Expand row" : "Collapse row"
   }, isCollapsible && /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
     name: isCollapsed ? "angle-right" : "angle-down"
   }), /* @__PURE__ */ React__default["default"].createElement("span", {