@grafana/ui
Version:
Grafana Components Library
99 lines (96 loc) • 3.75 kB
JavaScript
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useMemo, useCallback } from 'react';
import { ReducerID, fieldReducers, FieldMatcherID, fieldMatchers } from '@grafana/data';
import { t } from '@grafana/i18n';
import { ComparisonOperation } from '@grafana/schema';
import { Combobox } from '../Combobox/Combobox.mjs';
import { Input } from '../Input/Input.mjs';
import { Stack } from '../Layout/Stack/Stack.mjs';
;
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: ComparisonOperation.EQ },
{ label: "!=", value: ComparisonOperation.NEQ },
{ label: ">", value: ComparisonOperation.GT },
{ label: ">=", value: ComparisonOperation.GTE },
{ label: "<", value: ComparisonOperation.LT },
{ label: "<=", value: ComparisonOperation.LTE }
];
function isBooleanReducer(r) {
return r === ReducerID.allIsNull || r === ReducerID.allIsZero;
}
const FieldValueMatcherEditor = ({ id, options, onChange }) => {
const reducer = useMemo(() => fieldReducers.selectOptions([options == null ? void 0 : options.reducer]), [options == null ? void 0 : options.reducer]);
const onSetReducer = useCallback(
(selection) => {
return onChange({ ...options, reducer: selection.value });
},
[options, onChange]
);
const onChangeOp = useCallback(
(v) => {
return onChange({ ...options, op: v.value });
},
[options, onChange]
);
const onChangeValue = 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__ */ jsx(Stack, { direction: "column", gap: 1, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 0.5, children: [
/* @__PURE__ */ jsx(
Combobox,
{
id,
value: toComboboxOption(reducer.current[0]),
options: reducer.options.map((o) => toComboboxOption(o)),
onChange: onSetReducer,
placeholder: t("grafana-ui.field-value-matcher.select-field-placeholder", "Select field reducer")
}
),
opts.reducer && !isBool && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
Combobox,
{
value: comparisonOperationOptions.find((v) => v.value === opts.op),
options: comparisonOperationOptions,
onChange: onChangeOp,
"aria-label": t("grafana-ui.field-value-matcher.operator-label", "Comparison operator"),
width: 19
}
),
/* @__PURE__ */ jsx(
Input,
{
type: "number",
value: opts.value,
onChange: onChangeValue,
"aria-label": t("grafana-ui.field-value-matcher.reducer-value-label", "Reducer value")
}
)
] })
] }) });
};
const getFieldValueMatcherItem = () => ({
id: FieldMatcherID.byValue,
component: FieldValueMatcherEditor,
matcher: fieldMatchers.get(FieldMatcherID.byValue),
name: t("grafana-ui.matchers-ui.name-fields-with-value", "Fields with values"),
description: 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}`
});
export { FieldValueMatcherEditor, comparisonOperationOptions, getFieldValueMatcherItem };
//# sourceMappingURL=FieldValueMatcher.mjs.map