@grafana/ui/dist/cjs/components/MatchersUI/FieldValueMatcher.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var data = require('@grafana/data');
var i18n = require('@grafana/i18n');
var schema = require('@grafana/schema');
var Combobox = require('../Combobox/Combobox.cjs');
var Input = require('../Input/Input.cjs');
var Stack = require('../Layout/Stack/Stack.cjs');

"use strict";
const toComboboxOption = (value) => ({
  label: value.label,
  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
  value: value.value,
  description: value.description
});
const comparisonOperationOptions = [
  { label: "==", value: schema.ComparisonOperation.EQ },
  { label: "!=", value: schema.ComparisonOperation.NEQ },
  { label: ">", value: schema.ComparisonOperation.GT },
  { label: ">=", value: schema.ComparisonOperation.GTE },
  { label: "<", value: schema.ComparisonOperation.LT },
  { label: "<=", value: schema.ComparisonOperation.LTE }
];
function isBooleanReducer(r) {
  return r === data.ReducerID.allIsNull || r === data.ReducerID.allIsZero;
}
const FieldValueMatcherEditor = ({ id, options, onChange }) => {
  const reducer = React.useMemo(() => data.fieldReducers.selectOptions([options == null ? void 0 : options.reducer]), [options == null ? void 0 : options.reducer]);
  const onSetReducer = React.useCallback(
    (selection) => {
      return onChange({ ...options, reducer: selection.value });
    },
    [options, onChange]
  );
  const onChangeOp = React.useCallback(
    (v) => {
      return onChange({ ...options, op: v.value });
    },
    [options, onChange]
  );
  const onChangeValue = React.useCallback(
    (e) => {
      const value = e.currentTarget.valueAsNumber;
      return onChange({ ...options, value });
    },
    [options, onChange]
  );
  const opts = options != null ? options : {};
  const isBool = isBooleanReducer(opts.reducer);
  return /* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { direction: "column", gap: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { direction: "row", gap: 0.5, children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      Combobox.Combobox,
      {
        id,
        value: toComboboxOption(reducer.current[0]),
        options: reducer.options.map((o) => toComboboxOption(o)),
        onChange: onSetReducer,
        placeholder: i18n.t("grafana-ui.field-value-matcher.select-field-placeholder", "Select field reducer")
      }
    ),
    opts.reducer && !isBool && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        Combobox.Combobox,
        {
          value: comparisonOperationOptions.find((v) => v.value === opts.op),
          options: comparisonOperationOptions,
          onChange: onChangeOp,
          "aria-label": i18n.t("grafana-ui.field-value-matcher.operator-label", "Comparison operator"),
          width: 19
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx(
        Input.Input,
        {
          type: "number",
          value: opts.value,
          onChange: onChangeValue,
          "aria-label": i18n.t("grafana-ui.field-value-matcher.reducer-value-label", "Reducer value")
        }
      )
    ] })
  ] }) });
};
const getFieldValueMatcherItem = () => ({
  id: data.FieldMatcherID.byValue,
  component: FieldValueMatcherEditor,
  matcher: data.fieldMatchers.get(data.FieldMatcherID.byValue),
  name: i18n.t("grafana-ui.matchers-ui.name-fields-with-value", "Fields with values"),
  description: i18n.t(
    "grafana-ui.matchers-ui.description-fields-with-value",
    "Set properties for fields with reducer condition"
  ),
  optionsToLabel: (options) => `${options == null ? void 0 : options.reducer} ${options == null ? void 0 : options.op} ${options == null ? void 0 : options.value}`
});

exports.FieldValueMatcherEditor = FieldValueMatcherEditor;
exports.comparisonOperationOptions = comparisonOperationOptions;
exports.getFieldValueMatcherItem = getFieldValueMatcherItem;
//# sourceMappingURL=FieldValueMatcher.cjs.map