@grafana/scenes 6.31.0--canary.1208.17233161250.0 → 6.32.0--canary.1192.17234567041.0

package/dist/index.js

@@ -3311,7 +3311,7 @@ function wrapInSafeSerializableSceneObject(sceneObject) {
 function DefaultGroupByCustomIndicatorContainer(props) {
   const { model } = props;
   const theme = ui.useTheme2();
-  const styles = getStyles$h(theme);
+  const styles = getStyles$i(theme);
   const inputStyles = ui.getInputStyles({ theme, invalid: false });
   const value = lodash.isArray(model.state.value) ? model.state.value : model.state.value ? [model.state.value] : [];
   let buttons = [];
@@ -3393,7 +3393,7 @@ function DefaultGroupByCustomIndicatorContainer(props) {
     buttons
   );
 }
-const getStyles$h = (theme) => ({
+const getStyles$i = (theme) => ({
   clearIcon: css.css({
     color: theme.colors.action.disabledText,
     cursor: "pointer",
@@ -3406,6 +3406,37 @@ const getStyles$h = (theme) => ({
   })
 });
 
+const GroupByValueContainer = ({
+  keysApplicability,
+  children
+}) => {
+  var _a, _b;
+  const theme = ui.useTheme2();
+  const styles = ui.getSelectStyles(theme);
+  const { nonApplicablePill } = getStyles$h(theme);
+  const firstChild = React__default.default.Children.toArray(children)[0];
+  let isApplicable = true;
+  if (React__default.default.isValidElement(firstChild) && ((_b = (_a = firstChild.props) == null ? void 0 : _a.data) == null ? void 0 : _b.value)) {
+    const value = firstChild.props.data.value;
+    const applicability = keysApplicability == null ? void 0 : keysApplicability.find((item) => item.key === value);
+    if (applicability && !applicability.applicable) {
+      isApplicable = false;
+    }
+  }
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: css.cx(styles.multiValueContainer, !isApplicable && nonApplicablePill) }, children);
+};
+const getStyles$h = (theme) => ({
+  nonApplicablePill: css.css({
+    background: theme.colors.action.selected,
+    color: theme.colors.text.disabled,
+    border: 0,
+    "&:hover": {
+      background: theme.colors.action.selected
+    },
+    textDecoration: "line-through"
+  })
+});
+
 class GroupByVariable extends MultiValueVariable {
   constructor(initialState) {
     super({
@@ -3425,6 +3456,7 @@ class GroupByVariable extends MultiValueVariable {
     this.isLazy = true;
     this._urlSync = new GroupByVariableUrlSyncHandler(this);
     this._activationHandler = () => {
+      this._verifyApplicability();
       if (this.state.defaultValue) {
         if (this.checkIfRestorable(this.state.value)) {
           this.setState({ restorable: true });
@@ -3542,6 +3574,40 @@ class GroupByVariable extends MultiValueVariable {
       })
     );
   }
+  getApplicableKeys() {
+    const { value, keysApplicability } = this.state;
+    const valueArray = lodash.isArray(value) ? value : value ? [value] : [];
+    if (!keysApplicability || keysApplicability.length === 0) {
+      return valueArray;
+    }
+    const applicableValues = valueArray.filter((val) => {
+      const applicability = keysApplicability.find((item) => item.key === val);
+      return !applicability || applicability.applicable !== false;
+    });
+    return applicableValues;
+  }
+  async _verifyApplicability() {
+    const ds = await getDataSource(this.state.datasource, {
+      __sceneObject: wrapInSafeSerializableSceneObject(this)
+    });
+    if (!ds.getFiltersApplicability) {
+      return;
+    }
+    const queries = getQueriesForVariables(this);
+    const timeRange = sceneGraph.getTimeRange(this).state.value;
+    const value = this.state.value;
+    const response = await ds.getFiltersApplicability({
+      groupByKeys: Array.isArray(value) ? value.map((v) => String(v)) : value ? [String(value)] : [],
+      queries,
+      timeRange,
+      scopes: sceneGraph.getScopes(this),
+      ...getEnrichedFiltersRequest(this)
+    });
+    if (!lodash.isEqual(response, this.state.keysApplicability)) {
+      this.setState({ keysApplicability: response });
+      this.publishEvent(new SceneVariableValueChangedEvent(this), true);
+    }
+  }
   // This method is related to the defaultValue property. We check if the current value
   // is different from the default value. If it is, the groupBy will show a button
   // allowing the user to restore the default values.
@@ -3580,7 +3646,8 @@ function GroupByVariableRenderer({ model }) {
     options,
     includeAll,
     allowCustomValue = true,
-    defaultValue
+    defaultValue,
+    keysApplicability
   } = model.useState();
   const values = React.useMemo(() => {
     const arrayValue = lodash.isArray(value) ? value : [value];
@@ -3652,7 +3719,8 @@ function GroupByVariableRenderer({ model }) {
         Option: OptionWithCheckbox,
         ...hasDefaultValue ? {
           IndicatorsContainer: () => /* @__PURE__ */ React__default.default.createElement(DefaultGroupByCustomIndicatorContainer, { model })
-        } : {}
+        } : {},
+        MultiValueContainer: ({ innerProps, children }) => /* @__PURE__ */ React__default.default.createElement(GroupByValueContainer, { innerProps, keysApplicability }, children)
       },
       onInputChange,
       onBlur: () => {
@@ -3669,6 +3737,8 @@ function GroupByVariableRenderer({ model }) {
       onChange: (newValue, action) => {
         if (action.action === "clear" && noValueOnClear) {
           model.changeValueTo([], void 0, true);
+        } else {
+          model._verifyApplicability();
         }
         setUncommittedValue(newValue);
       },
@@ -6708,7 +6778,7 @@ class SceneQueryRunner extends SceneObjectBase {
       ].filter((f) => isFilterComplete(f) && isFilterApplicable(f));
     }
     if (this._groupByVar) {
-      request.groupByKeys = this._groupByVar.state.value;
+      request.groupByKeys = this._groupByVar.getApplicableKeys();
     }
     request.targets = request.targets.map((query) => {
       var _a2;