@grafana/scenes 6.24.1--canary.1166.15878540264.0 → 6.26.0

package/dist/index.js

@@ -5157,7 +5157,7 @@ const getStyles$c = (theme) => ({
     color: theme.colors.text.primary,
     boxShadow: theme.shadows.z2,
     overflowY: "auto",
-    zIndex: theme.zIndex.portal
+    zIndex: theme.zIndex.dropdown
   }),
   inputStyle: css.css({
     paddingBlock: 0,
@@ -5250,14 +5250,14 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
   };
   if (viewMode) {
     const pillTextContent = `${keyLabel} ${filter.operator} ${valueLabel}`;
-    const pillText = /* @__PURE__ */ React__default.default.createElement("span", { className: styles.pillText }, pillTextContent);
+    const pillText = /* @__PURE__ */ React__default.default.createElement("span", { className: css.cx(styles.pillText, filter.nonApplicable && styles.strikethrough) }, pillTextContent);
     return /* @__PURE__ */ React__default.default.createElement(
       "div",
       {
         className: css.cx(
           styles.combinedFilterPill,
           readOnly && styles.readOnlyCombinedFilter,
-          isMatchAllFilter(filter) && styles.matchAllPill,
+          (isMatchAllFilter(filter) || filter.nonApplicable) && styles.disabledPill,
           filter.readOnly && styles.filterReadOnly
         ),
         onClick: (e) => {
@@ -5309,7 +5309,7 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
           },
           name: "times",
           size: "md",
-          className: styles.pillIcon,
+          className: css.cx(styles.pillIcon, filter.nonApplicable && styles.disabledPillIcon),
           tooltip: i18n.t(
             "grafana-scenes.components.adhoc-filter-pill.remove-filter-with-key",
             "Remove filter with key {{keyLabel}}",
@@ -5424,13 +5424,24 @@ const getStyles$b = (theme) => ({
     cursor: "pointer",
     color: theme.colors.text.disabled
   }),
-  matchAllPill: css.css({
+  disabledPillIcon: css.css({
+    marginInline: theme.spacing(0.5),
+    cursor: "pointer",
+    color: theme.colors.text.disabled,
+    "&:hover": {
+      color: theme.colors.text.disabled
+    }
+  }),
+  disabledPill: css.css({
     background: theme.colors.action.selected,
     color: theme.colors.text.disabled,
     border: 0,
     "&:hover": {
       background: theme.colors.action.selected
     }
+  }),
+  strikethrough: css.css({
+    textDecoration: "line-through"
   })
 });
 
@@ -5648,6 +5659,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
     });
     this._urlSync = new AdHocFiltersVariableUrlSyncHandler(this);
     this._activationHandler = () => {
+      this._verifyNonApplicableFilters();
       return () => {
         var _a;
         (_a = this.state.originFilters) == null ? void 0 : _a.forEach((filter) => {
@@ -5766,6 +5778,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
       original.values = originalFilter == null ? void 0 : originalFilter.value;
       original.valueLabels = originalFilter == null ? void 0 : originalFilter.value;
       original.operator = originalFilter == null ? void 0 : originalFilter.operator;
+      original.nonApplicable = originalFilter == null ? void 0 : originalFilter.nonApplicable;
       this._updateFilter(filter, original);
     }
   }
@@ -5809,6 +5822,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
       values: [".*"],
       valueLabels: ["All"],
       matchAllFilter: true,
+      nonApplicable: false,
       restorable: true
     });
   }
@@ -5873,11 +5887,52 @@ class AdHocFiltersVariable extends SceneObjectBase {
       });
     }
   }
+  async _verifyNonApplicableFilters() {
+    var _a, _b, _c;
+    const filters = [...this.state.filters, ...(_a = this.state.originFilters) != null ? _a : []];
+    const ds = await this._dataSourceSrv.get(this.state.datasource, this._scopedVars);
+    if (!ds || !ds.getApplicableFilters) {
+      return [];
+    }
+    const timeRange = sceneGraph.getTimeRange(this).state.value;
+    const queries = this.state.useQueriesAsFilterForOptions ? getQueriesForVariables(this) : void 0;
+    const response = await ds.getApplicableFilters({
+      filters,
+      queries,
+      timeRange,
+      scopes: sceneGraph.getScopes(this),
+      ...getEnrichedFiltersRequest(this)
+    });
+    const update = {
+      filters: [...this.state.filters],
+      originFilters: [...(_b = this.state.originFilters) != null ? _b : []]
+    };
+    update.filters.forEach((f) => {
+      const isApplicable = response.includes(f.key);
+      if (!isApplicable) {
+        f.nonApplicable = true;
+      }
+    });
+    (_c = update.originFilters) == null ? void 0 : _c.forEach((f) => {
+      const isApplicable = response.includes(f.key);
+      if (!isApplicable) {
+        if (!f.matchAllFilter) {
+          f.nonApplicable = true;
+        }
+        const originalValue = this._originalValues.get(f.key);
+        if (originalValue) {
+          originalValue.nonApplicable = true;
+        }
+      }
+    });
+    this.setState(update);
+    return;
+  }
   /**
    * Get possible keys given current filters. Do not call from plugins directly
    */
   async _getKeys(currentKey) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const override = await ((_b = (_a = this.state).getTagKeysProvider) == null ? void 0 : _b.call(_a, this, currentKey));
     if (override && override.replace) {
       return dataFromResponse(override.values).map(toSelectableValue);
@@ -5889,7 +5944,8 @@ class AdHocFiltersVariable extends SceneObjectBase {
     if (!ds || !ds.getTagKeys) {
       return [];
     }
-    const otherFilters = this.state.filters.filter((f) => f.key !== currentKey).concat((_c = this.state.baseFilters) != null ? _c : []);
+    const applicableOriginFilters = (_d = (_c = this.state.originFilters) == null ? void 0 : _c.filter((f) => !f.nonApplicable)) != null ? _d : [];
+    const otherFilters = this.state.filters.filter((f) => f.key !== currentKey && !f.nonApplicable).concat((_e = this.state.baseFilters) != null ? _e : []).concat(applicableOriginFilters);
     const timeRange = sceneGraph.getTimeRange(this).state.value;
     const queries = this.state.useQueriesAsFilterForOptions ? getQueriesForVariables(this) : void 0;
     const response = await ds.getTagKeys({
@@ -5982,7 +6038,8 @@ class AdHocFiltersVariable extends SceneObjectBase {
 }
 AdHocFiltersVariable.Component = AdHocFiltersVariableRenderer;
 function renderExpression(builder, filters) {
-  return (builder != null ? builder : renderPrometheusLabelFilters)(filters != null ? filters : []);
+  var _a;
+  return (builder != null ? builder : renderPrometheusLabelFilters)((_a = filters == null ? void 0 : filters.filter((f) => isFilterApplicable(f))) != null ? _a : []);
 }
 function AdHocFiltersVariableRenderer({ model }) {
   const { filters, readOnly, addFilterButtonText } = model.useState();
@@ -6023,6 +6080,9 @@ function isMatchAllFilter(filter) {
 function isFilterComplete(filter) {
   return filter.key !== "" && filter.operator !== "" && filter.value !== "";
 }
+function isFilterApplicable(filter) {
+  return !filter.nonApplicable;
+}
 function isMultiValueOperator(operatorValue) {
   const operator = OPERATORS.find((o) => o.value === operatorValue);
   if (!operator) {
@@ -6413,7 +6473,7 @@ class SceneQueryRunner extends SceneObjectBase {
       request.filters = [
         ...(_a = this._adhocFiltersVar.state.originFilters) != null ? _a : [],
         ...this._adhocFiltersVar.state.filters
-      ].filter(isFilterComplete);
+      ].filter((f) => isFilterComplete(f) && isFilterApplicable(f));
     }
     if (this._groupByVar) {
       request.groupByKeys = this._groupByVar.state.value;
@@ -12033,7 +12093,7 @@ const PREVIOUS_PERIOD_COMPARE_OPTION = {
   value: PREVIOUS_PERIOD_VALUE
 };
 const NO_COMPARE_OPTION = {
-  label: "No comparison",
+  label: "None",
   value: NO_PERIOD_VALUE
 };
 const DEFAULT_COMPARE_OPTIONS = [
@@ -12188,7 +12248,7 @@ const timeShiftAlignmentProcessor = (primary, secondary) => {
 function SceneTimeRangeCompareRenderer({ model }) {
   var _a;
   const styles = ui.useStyles2(getStyles$4);
-  const { compareWith, compareOptions } = model.useState();
+  const { compareWith, compareOptions, hideCheckbox } = model.useState();
   const [previousCompare, setPreviousCompare] = React__default.default.useState(compareWith);
   const previousValue = (_a = compareOptions.find(({ value: value2 }) => value2 === previousCompare)) != null ? _a : PREVIOUS_PERIOD_COMPARE_OPTION;
   const value = compareOptions.find(({ value: value2 }) => value2 === compareWith);
@@ -12201,7 +12261,13 @@ function SceneTimeRangeCompareRenderer({ model }) {
       model.onCompareWithChanged(previousValue.value);
     }
   };
-  return /* @__PURE__ */ React__default.default.createElement(ui.ButtonGroup, null, /* @__PURE__ */ React__default.default.createElement(
+  const selectValue = hideCheckbox && !compareWith ? NO_COMPARE_OPTION : value;
+  const showSelect = hideCheckbox || enabled;
+  const displayValue = hideCheckbox && selectValue ? {
+    ...selectValue,
+    label: `Comparison: ${selectValue.label}`
+  } : selectValue;
+  return /* @__PURE__ */ React__default.default.createElement(ui.ButtonGroup, null, !hideCheckbox && /* @__PURE__ */ React__default.default.createElement(
     ui.ToolbarButton,
     {
       variant: "canvas",
@@ -12217,11 +12283,11 @@ function SceneTimeRangeCompareRenderer({ model }) {
     },
     /* @__PURE__ */ React__default.default.createElement(ui.Checkbox, { label: " ", value: enabled, onClick }),
     /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "grafana-scenes.components.scene-time-range-compare-renderer.button-label" }, "Comparison")
-  ), enabled ? /* @__PURE__ */ React__default.default.createElement(
+  ), showSelect ? /* @__PURE__ */ React__default.default.createElement(
     ui.ButtonSelect,
     {
       variant: "canvas",
-      value,
+      value: displayValue,
       options: compareOptions,
       onChange: (v) => {
         model.onCompareWithChanged(v.value);