@grafana/plugin-ui 0.9.5 → 0.10.0

package/dist/esm/components/VisualQueryBuilder/components/LabelFilterItem.js

@@ -0,0 +1,178 @@
+import { uniqBy } from 'lodash';
+import React, { useState, useRef } from 'react';
+import { v4 } from 'uuid';
+import { toOption } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { InlineField, Select } from '@grafana/ui';
+import { InputGroup } from '../../QueryEditor/InputGroup.js';
+import { AccessoryButton } from '../../QueryEditor/AccessoryButton.js';
+
+const CONFLICTING_LABEL_FILTER_ERROR_MESSAGE = "You have conflicting label filters";
+function LabelFilterItem({
+  item,
+  items,
+  defaultOp,
+  onChange,
+  onDelete,
+  onGetLabelNames,
+  onGetLabelValues,
+  invalidLabel,
+  invalidValue,
+  multiValueSeparator = "|"
+}) {
+  var _a;
+  const [state, setState] = useState({});
+  const [labelNamesMenuOpen, setLabelNamesMenuOpen] = useState(false);
+  const [labelValuesMenuOpen, setLabelValuesMenuOpen] = useState(false);
+  const isMultiSelect = (operator = item.op) => {
+    var _a2;
+    return (_a2 = operators.find((op) => op.label === operator)) == null ? undefined : _a2.isMultiValue;
+  };
+  const getSelectOptionsFromString = (item2) => {
+    if (item2) {
+      if (item2.indexOf(multiValueSeparator) > 0) {
+        return item2.split(multiValueSeparator);
+      }
+      return [item2];
+    }
+    return [];
+  };
+  const getOptions = () => {
+    const labelValues = state.labelValues ? [...state.labelValues] : [];
+    const selectedOptions = getSelectOptionsFromString(item == null ? undefined : item.value).map(toOption);
+    return uniqBy([...selectedOptions, ...labelValues], "value");
+  };
+  const isConflicting = isConflictingLabelFilter(item, items);
+  const { current: id } = useRef(v4());
+  return /* @__PURE__ */ React.createElement("div", { "data-testid": "visual-query-builder-dimensions-filter-item" }, /* @__PURE__ */ React.createElement(InlineField, { error: CONFLICTING_LABEL_FILTER_ERROR_MESSAGE, invalid: isConflicting ? true : undefined }, /* @__PURE__ */ React.createElement(InputGroup, null, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      placeholder: "Select label",
+      "data-testid": selectors.components.QueryBuilder.labelSelect,
+      inputId: `visual-query-builder-dimensions-filter-item-key-${id}`,
+      width: "auto",
+      value: item.label ? toOption(item.label) : null,
+      allowCustomValue: true,
+      onOpenMenu: async () => {
+        setState({ isLoadingLabelNames: true });
+        const labelNames = await onGetLabelNames(item);
+        setLabelNamesMenuOpen(true);
+        setState({ labelNames, isLoadingLabelNames: undefined });
+      },
+      onCloseMenu: () => {
+        setLabelNamesMenuOpen(false);
+      },
+      isOpen: labelNamesMenuOpen,
+      isLoading: state.isLoadingLabelNames,
+      options: state.labelNames,
+      onChange: (change) => {
+        var _a2;
+        if (change.value) {
+          onChange({
+            ...item,
+            op: (_a2 = item.op) != null ? _a2 : defaultOp,
+            label: change.value
+          });
+        }
+      },
+      invalid: isConflicting || invalidLabel
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      "data-testid": selectors.components.QueryBuilder.matchOperatorSelect,
+      value: toOption((_a = item.op) != null ? _a : defaultOp),
+      options: operators,
+      width: "auto",
+      onChange: (change) => {
+        if (change.value) {
+          onChange({
+            ...item,
+            op: change.value,
+            value: isMultiSelect(change.value) ? item.value : getSelectOptionsFromString(item == null ? undefined : item.value)[0]
+          });
+        }
+      },
+      invalid: isConflicting
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      placeholder: "Select value",
+      "data-testid": selectors.components.QueryBuilder.valueSelect,
+      inputId: `visual-query-builder-dimensions-filter-item-value-${id}`,
+      width: "auto",
+      value: isMultiSelect() ? getSelectOptionsFromString(item == null ? undefined : item.value).map(toOption) : getSelectOptionsFromString(item == null ? undefined : item.value).map(toOption)[0],
+      allowCustomValue: true,
+      onOpenMenu: async () => {
+        setState({ isLoadingLabelValues: true });
+        const labelValues = await onGetLabelValues(item);
+        setState({
+          ...state,
+          labelValues,
+          isLoadingLabelValues: undefined
+        });
+        setLabelValuesMenuOpen(true);
+      },
+      onCloseMenu: () => {
+        setLabelValuesMenuOpen(false);
+      },
+      isOpen: labelValuesMenuOpen,
+      isMulti: isMultiSelect(),
+      isLoading: state.isLoadingLabelValues,
+      options: getOptions(),
+      onChange: (change) => {
+        var _a2, _b;
+        if (change.value) {
+          onChange({
+            ...item,
+            value: change.value,
+            op: (_a2 = item.op) != null ? _a2 : defaultOp
+          });
+        } else {
+          const changes = change.map((change2) => {
+            if (change2.value) {
+              return change2.value;
+            } else {
+              return undefined;
+            }
+          }).filter((val) => val !== undefined).join(multiValueSeparator);
+          onChange({ ...item, value: changes, op: (_b = item.op) != null ? _b : defaultOp });
+        }
+      },
+      invalid: isConflicting || invalidValue
+    }
+  ), /* @__PURE__ */ React.createElement(AccessoryButton, { "aria-label": "remove", icon: "times", variant: "secondary", onClick: onDelete }))));
+}
+const operators = [
+  { label: "=", value: "=", description: "Equals", isMultiValue: false },
+  { label: "!=", value: "!=", description: "Does not equal", isMultiValue: false },
+  { label: "=~", value: "=~", description: "Matches regex", isMultiValue: true },
+  { label: "!~", value: "!~", description: "Does not match regex", isMultiValue: true }
+];
+function isConflictingLabelFilter(newLabel, labels) {
+  if (!newLabel.label || !newLabel.op || !newLabel.value) {
+    return false;
+  }
+  if (labels.length < 2) {
+    return false;
+  }
+  const operationIsNegative = newLabel.op.toString().startsWith("!");
+  const candidates = labels.filter(
+    (label) => label.label === newLabel.label && label.value === newLabel.value && label.op !== newLabel.op
+  );
+  const conflict = candidates.some((candidate) => {
+    var _a, _b;
+    if (operationIsNegative && ((_a = candidate == null ? undefined : candidate.op) == null ? undefined : _a.toString().startsWith("!")) === false) {
+      return true;
+    }
+    if (operationIsNegative === false && ((_b = candidate == null ? undefined : candidate.op) == null ? undefined : _b.toString().startsWith("!"))) {
+      return true;
+    }
+    return false;
+  });
+  return conflict;
+}
+
+export { LabelFilterItem, isConflictingLabelFilter };
+//# sourceMappingURL=LabelFilterItem.js.map

package/dist/esm/components/VisualQueryBuilder/components/LabelFilterItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelFilterItem.js","sources":["../../../../../src/components/VisualQueryBuilder/components/LabelFilterItem.tsx"],"sourcesContent":["import { uniqBy } from 'lodash';\nimport React, { useRef, useState } from 'react';\nimport { v4 } from 'uuid';\n\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { InlineField, Select } from '@grafana/ui';\n\nimport { type QueryBuilderLabelFilter } from '../types';\nimport { InputGroup } from '../../QueryEditor/InputGroup';\nimport { AccessoryButton } from '../../QueryEditor/AccessoryButton';\n\nconst CONFLICTING_LABEL_FILTER_ERROR_MESSAGE = 'You have conflicting label filters';\ninterface Props {\n  defaultOp: string;\n  item: Partial<QueryBuilderLabelFilter>;\n  items: Array<Partial<QueryBuilderLabelFilter>>;\n  onChange: (value: Partial<QueryBuilderLabelFilter>) => void;\n  onGetLabelNames: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<Array<SelectableValue<string>>>;\n  onGetLabelValues: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<Array<SelectableValue<string>>>;\n  onDelete: () => void;\n  invalidLabel?: boolean;\n  invalidValue?: boolean;\n  multiValueSeparator?: string;\n}\n\nexport function LabelFilterItem({\n  item,\n  items,\n  defaultOp,\n  onChange,\n  onDelete,\n  onGetLabelNames,\n  onGetLabelValues,\n  invalidLabel,\n  invalidValue,\n  multiValueSeparator = '|',\n}: Props) {\n  const [state, setState] = useState<{\n    labelNames?: Array<SelectableValue<string>>;\n    labelValues?: Array<SelectableValue<string>>;\n    isLoadingLabelNames?: boolean;\n    isLoadingLabelValues?: boolean;\n  }>({});\n  // there's a bug in react-select where the menu doesn't recalculate its position when the options are loaded asynchronously\n  // see https://github.com/grafana/grafana/issues/63558\n  // instead, we explicitly control the menu visibility and prevent showing it until the options have fully loaded\n  const [labelNamesMenuOpen, setLabelNamesMenuOpen] = useState(false);\n  const [labelValuesMenuOpen, setLabelValuesMenuOpen] = useState(false);\n\n  const isMultiSelect = (operator = item.op) => {\n    return operators.find((op) => op.label === operator)?.isMultiValue;\n  };\n\n  const getSelectOptionsFromString = (item?: string): string[] => {\n    if (item) {\n      if (item.indexOf(multiValueSeparator) > 0) {\n        return item.split(multiValueSeparator);\n      }\n      return [item];\n    }\n    return [];\n  };\n\n  const getOptions = (): Array<SelectableValue<string>> => {\n    const labelValues = state.labelValues ? [...state.labelValues] : [];\n    const selectedOptions = getSelectOptionsFromString(item?.value).map(toOption);\n\n    // Remove possible duplicated values\n    return uniqBy([...selectedOptions, ...labelValues], 'value');\n  };\n\n  const isConflicting = isConflictingLabelFilter(item, items);\n  const { current: id } = useRef(v4());\n\n  return (\n    <div data-testid=\"visual-query-builder-dimensions-filter-item\">\n      <InlineField error={CONFLICTING_LABEL_FILTER_ERROR_MESSAGE} invalid={isConflicting ? true : undefined}>\n        <InputGroup>\n          <Select<string>\n            placeholder=\"Select label\"\n            data-testid={selectors.components.QueryBuilder.labelSelect}\n            inputId={`visual-query-builder-dimensions-filter-item-key-${id}`}\n            width=\"auto\"\n            value={item.label ? toOption(item.label) : null}\n            allowCustomValue\n            onOpenMenu={async () => {\n              setState({ isLoadingLabelNames: true });\n              const labelNames = await onGetLabelNames(item);\n              setLabelNamesMenuOpen(true);\n              setState({ labelNames, isLoadingLabelNames: undefined });\n            }}\n            onCloseMenu={() => {\n              setLabelNamesMenuOpen(false);\n            }}\n            isOpen={labelNamesMenuOpen}\n            isLoading={state.isLoadingLabelNames}\n            options={state.labelNames}\n            onChange={(change) => {\n              if (change.value) {\n                onChange({\n                  ...item,\n                  op: item.op ?? defaultOp,\n                  label: change.value,\n                });\n              }\n            }}\n            invalid={isConflicting || invalidLabel}\n          />\n\n          <Select<string>\n            data-testid={selectors.components.QueryBuilder.matchOperatorSelect}\n            value={toOption(item.op ?? defaultOp)}\n            options={operators}\n            width=\"auto\"\n            onChange={(change) => {\n              if (change.value) {\n                onChange({\n                  ...item,\n                  op: change.value,\n                  value: isMultiSelect(change.value) ? item.value : getSelectOptionsFromString(item?.value)[0],\n                });\n              }\n            }}\n            invalid={isConflicting}\n          />\n\n          <Select<string>\n            placeholder=\"Select value\"\n            data-testid={selectors.components.QueryBuilder.valueSelect}\n            inputId={`visual-query-builder-dimensions-filter-item-value-${id}`}\n            width=\"auto\"\n            value={\n              isMultiSelect()\n                ? getSelectOptionsFromString(item?.value).map(toOption)\n                : getSelectOptionsFromString(item?.value).map(toOption)[0]\n            }\n            allowCustomValue\n            onOpenMenu={async () => {\n              setState({ isLoadingLabelValues: true });\n              const labelValues = await onGetLabelValues(item);\n              setState({\n                ...state,\n                labelValues,\n                isLoadingLabelValues: undefined,\n              });\n              setLabelValuesMenuOpen(true);\n            }}\n            onCloseMenu={() => {\n              setLabelValuesMenuOpen(false);\n            }}\n            isOpen={labelValuesMenuOpen}\n            isMulti={isMultiSelect()}\n            isLoading={state.isLoadingLabelValues}\n            options={getOptions()}\n            onChange={(change) => {\n              if (change.value) {\n                onChange({\n                  ...item,\n                  value: change.value,\n                  op: item.op ?? defaultOp,\n                });\n              } else {\n                // otherwise, we're dealing with a multi-value select which is array of options\n                const changes = change\n                  .map((change: SelectableValue<string>) => {\n                    if (change.value) {\n                      return change.value;\n                    } else {\n                      return undefined;\n                    }\n                  })\n                  .filter((val: string | undefined) => val !== undefined)\n                  .join(multiValueSeparator);\n                onChange({ ...item, value: changes, op: item.op ?? defaultOp });\n              }\n            }}\n            invalid={isConflicting || invalidValue}\n          />\n          <AccessoryButton aria-label=\"remove\" icon=\"times\" variant=\"secondary\" onClick={onDelete} />\n        </InputGroup>\n      </InlineField>\n    </div>\n  );\n}\n\nconst operators = [\n  { label: '=', value: '=', description: 'Equals', isMultiValue: false },\n  { label: '!=', value: '!=', description: 'Does not equal', isMultiValue: false },\n  { label: '=~', value: '=~', description: 'Matches regex', isMultiValue: true },\n  { label: '!~', value: '!~', description: 'Does not match regex', isMultiValue: true },\n];\n\nexport function isConflictingLabelFilter(\n  newLabel: Partial<QueryBuilderLabelFilter>,\n  labels: Array<Partial<QueryBuilderLabelFilter>>\n): boolean {\n  if (!newLabel.label || !newLabel.op || !newLabel.value) {\n    return false;\n  }\n\n  if (labels.length < 2) {\n    return false;\n  }\n\n  const operationIsNegative = newLabel.op.toString().startsWith('!');\n\n  const candidates = labels.filter(\n    (label) => label.label === newLabel.label && label.value === newLabel.value && label.op !== newLabel.op\n  );\n\n  const conflict = candidates.some((candidate) => {\n    if (operationIsNegative && candidate?.op?.toString().startsWith('!') === false) {\n      return true;\n    }\n    if (operationIsNegative === false && candidate?.op?.toString().startsWith('!')) {\n      return true;\n    }\n    return false;\n  });\n\n  return conflict;\n}\n"],"names":["_a","item","change"],"mappings":"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"}

package/dist/esm/components/VisualQueryBuilder/components/LabelFilters.js

@@ -0,0 +1,70 @@
+import { isEqual } from 'lodash';
+import React, { useState, useEffect } from 'react';
+import '@grafana/data';
+import { EditorField } from '../../QueryEditor/EditorField.js';
+import { EditorFieldGroup } from '../../QueryEditor/EditorFieldGroup.js';
+import { EditorList } from '../../QueryEditor/EditorList.js';
+import { LabelFilterItem } from './LabelFilterItem.js';
+
+const MISSING_LABEL_FILTER_ERROR_MESSAGE = "Select at least 1 label filter (label and value)";
+function LabelFilters({
+  labelsFilters,
+  onChange,
+  onGetLabelNames,
+  onGetLabelValues,
+  labelFilterRequired,
+  multiValueSeparator
+}) {
+  const defaultOp = "=";
+  const [items, setItems] = useState([{ op: defaultOp }]);
+  useEffect(() => {
+    if (labelsFilters.length > 0) {
+      setItems(labelsFilters);
+    } else {
+      setItems([{ op: defaultOp }]);
+    }
+  }, [labelsFilters]);
+  const onLabelsChange = (newItems) => {
+    setItems(newItems);
+    const newLabels = newItems.filter(
+      (item) => item.label !== undefined && item.value !== undefined
+    );
+    if (!isEqual(newLabels, labelsFilters)) {
+      onChange(newLabels);
+    }
+  };
+  const hasLabelFilter = items.some((item) => item.label && item.value);
+  return /* @__PURE__ */ React.createElement(EditorFieldGroup, null, /* @__PURE__ */ React.createElement(
+    EditorField,
+    {
+      label: "Label filters",
+      error: MISSING_LABEL_FILTER_ERROR_MESSAGE,
+      invalid: labelFilterRequired && !hasLabelFilter
+    },
+    /* @__PURE__ */ React.createElement(
+      EditorList,
+      {
+        items,
+        onChange: onLabelsChange,
+        renderItem: (item, onChangeItem, onDelete) => /* @__PURE__ */ React.createElement(
+          LabelFilterItem,
+          {
+            item,
+            items,
+            defaultOp,
+            onChange: onChangeItem,
+            onDelete,
+            onGetLabelNames,
+            onGetLabelValues,
+            invalidLabel: labelFilterRequired && !item.label,
+            invalidValue: labelFilterRequired && !item.value,
+            multiValueSeparator
+          }
+        )
+      }
+    )
+  ));
+}
+
+export { LabelFilters, MISSING_LABEL_FILTER_ERROR_MESSAGE };
+//# sourceMappingURL=LabelFilters.js.map

package/dist/esm/components/VisualQueryBuilder/components/LabelFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelFilters.js","sources":["../../../../../src/components/VisualQueryBuilder/components/LabelFilters.tsx"],"sourcesContent":["import { isEqual } from 'lodash';\nimport React, { useEffect, useState } from 'react';\n\nimport { type SelectableValue } from '@grafana/data';\n\nimport { type QueryBuilderLabelFilter } from '../types';\n\nimport { EditorField } from '../../QueryEditor/EditorField';\nimport { EditorFieldGroup } from '../../QueryEditor/EditorFieldGroup';\nimport { EditorList } from '../../QueryEditor/EditorList';\nimport { LabelFilterItem } from './LabelFilterItem';\n\nexport const MISSING_LABEL_FILTER_ERROR_MESSAGE = 'Select at least 1 label filter (label and value)';\n\nexport interface Props {\n  labelsFilters: QueryBuilderLabelFilter[];\n  onChange: (labelFilters: QueryBuilderLabelFilter[]) => void;\n  onGetLabelNames: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<SelectableValue[]>;\n  onGetLabelValues: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<SelectableValue[]>;\n  /** If set to true, component will show error message until at least 1 filter is selected */\n  labelFilterRequired?: boolean;\n  multiValueSeparator?: string;\n}\n\nexport function LabelFilters({\n  labelsFilters,\n  onChange,\n  onGetLabelNames,\n  onGetLabelValues,\n  labelFilterRequired,\n  multiValueSeparator,\n}: Props) {\n  const defaultOp = '=';\n  const [items, setItems] = useState<Array<Partial<QueryBuilderLabelFilter>>>([{ op: defaultOp }]);\n\n  useEffect(() => {\n    if (labelsFilters.length > 0) {\n      setItems(labelsFilters);\n    } else {\n      setItems([{ op: defaultOp }]);\n    }\n  }, [labelsFilters]);\n\n  const onLabelsChange = (newItems: Array<Partial<QueryBuilderLabelFilter>>) => {\n    setItems(newItems);\n\n    // Extract full label filters with both label & value\n    const newLabels = newItems.filter(\n      (item): item is QueryBuilderLabelFilter => item.label !== undefined && item.value !== undefined\n    );\n    if (!isEqual(newLabels, labelsFilters)) {\n      onChange(newLabels);\n    }\n  };\n\n  const hasLabelFilter = items.some((item) => item.label && item.value);\n\n  return (\n    <EditorFieldGroup>\n      <EditorField\n        label=\"Label filters\"\n        error={MISSING_LABEL_FILTER_ERROR_MESSAGE}\n        invalid={labelFilterRequired && !hasLabelFilter}\n      >\n        <EditorList\n          items={items}\n          onChange={onLabelsChange}\n          renderItem={(item: Partial<QueryBuilderLabelFilter>, onChangeItem, onDelete) => (\n            <LabelFilterItem\n              item={item}\n              items={items}\n              defaultOp={defaultOp}\n              onChange={onChangeItem}\n              onDelete={onDelete}\n              onGetLabelNames={onGetLabelNames}\n              onGetLabelValues={onGetLabelValues}\n              invalidLabel={labelFilterRequired && !item.label}\n              invalidValue={labelFilterRequired && !item.value}\n              multiValueSeparator={multiValueSeparator}\n            />\n          )}\n        />\n      </EditorField>\n    </EditorFieldGroup>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAYO,MAAM,kCAAqC,GAAA;AAY3C,SAAS,YAAa,CAAA;AAAA,EAC3B,aAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAU,EAAA;AACR,EAAA,MAAM,SAAY,GAAA,GAAA;AAClB,EAAM,MAAA,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA,CAAkD,CAAC,EAAE,EAAA,EAAI,SAAU,EAAC,CAAC,CAAA;AAE/F,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,aAAA,CAAc,SAAS,CAAG,EAAA;AAC5B,MAAA,QAAA,CAAS,aAAa,CAAA;AAAA,KACjB,MAAA;AACL,MAAA,QAAA,CAAS,CAAC,EAAE,EAAI,EAAA,SAAA,EAAW,CAAC,CAAA;AAAA;AAC9B,GACF,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,EAAM,MAAA,cAAA,GAAiB,CAAC,QAAsD,KAAA;AAC5E,IAAA,QAAA,CAAS,QAAQ,CAAA;AAGjB,IAAA,MAAM,YAAY,QAAS,CAAA,MAAA;AAAA,MACzB,CAAC,IAA0C,KAAA,IAAA,CAAK,KAAU,KAAA,SAAA,IAAa,KAAK,KAAU,KAAA;AAAA,KACxF;AACA,IAAA,IAAI,CAAC,OAAA,CAAQ,SAAW,EAAA,aAAa,CAAG,EAAA;AACtC,MAAA,QAAA,CAAS,SAAS,CAAA;AAAA;AACpB,GACF;AAEA,EAAM,MAAA,cAAA,GAAiB,MAAM,IAAK,CAAA,CAAC,SAAS,IAAK,CAAA,KAAA,IAAS,KAAK,KAAK,CAAA;AAEpE,EAAA,2CACG,gBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,eAAA;AAAA,MACN,KAAO,EAAA,kCAAA;AAAA,MACP,OAAA,EAAS,uBAAuB,CAAC;AAAA,KAAA;AAAA,oBAEjC,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAA;AAAA,QACA,QAAU,EAAA,cAAA;AAAA,QACV,UAAY,EAAA,CAAC,IAAwC,EAAA,YAAA,EAAc,QACjE,qBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,KAAA;AAAA,YACA,SAAA;AAAA,YACA,QAAU,EAAA,YAAA;AAAA,YACV,QAAA;AAAA,YACA,eAAA;AAAA,YACA,gBAAA;AAAA,YACA,YAAA,EAAc,mBAAuB,IAAA,CAAC,IAAK,CAAA,KAAA;AAAA,YAC3C,YAAA,EAAc,mBAAuB,IAAA,CAAC,IAAK,CAAA,KAAA;AAAA,YAC3C;AAAA;AAAA;AACF;AAAA;AAEJ,GAEJ,CAAA;AAEJ;;;;"}

package/dist/esm/components/VisualQueryBuilder/components/OperationEditor.js

@@ -0,0 +1,77 @@
+import { cx, css } from '@emotion/css';
+import React from 'react';
+import { Draggable } from '@hello-pangea/dnd';
+import '@grafana/data';
+import { useTheme2, InlineField } from '@grafana/ui';
+import { OperationEditorBody } from './OperationEditorBody.js';
+
+function OperationEditor({
+  operation,
+  index,
+  onRemove,
+  onToggle,
+  onChange,
+  onRunQuery,
+  queryModeller,
+  query,
+  datasource,
+  flash,
+  highlight,
+  timeRange,
+  isConflictingOperation
+}) {
+  const def = queryModeller.getOperationDefinition(operation.id);
+  const theme = useTheme2();
+  const isConflicting = isConflictingOperation ? isConflictingOperation(operation, query.operations) : false;
+  const styles = getStyles(theme);
+  if (!def) {
+    return /* @__PURE__ */ React.createElement("span", null, "Operation ", operation.id, " not found");
+  }
+  const isInvalid = (isDragging) => {
+    if (isDragging) {
+      return undefined;
+    }
+    return isConflicting ? true : undefined;
+  };
+  return /* @__PURE__ */ React.createElement(Draggable, { draggableId: `operation-${index}`, index }, (provided, snapshot) => /* @__PURE__ */ React.createElement(
+    InlineField,
+    {
+      error: "You have conflicting label filters",
+      invalid: isInvalid(snapshot.isDragging),
+      className: cx(styles.error, styles.cardWrapper)
+    },
+    /* @__PURE__ */ React.createElement(
+      OperationEditorBody,
+      {
+        provided,
+        flash,
+        highlight,
+        isConflicting,
+        index,
+        operation,
+        definition: def,
+        onChange,
+        onRemove,
+        onToggle,
+        queryModeller,
+        query,
+        timeRange,
+        onRunQuery,
+        datasource
+      }
+    )
+  ));
+}
+const getStyles = (theme, isConflicting) => {
+  return {
+    cardWrapper: css({
+      alignItems: "stretch"
+    }),
+    error: css({
+      marginBottom: theme.spacing(1)
+    })
+  };
+};
+
+export { OperationEditor };
+//# sourceMappingURL=OperationEditor.js.map

package/dist/esm/components/VisualQueryBuilder/components/OperationEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationEditor.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationEditor.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\nimport { Draggable } from '@hello-pangea/dnd';\n\nimport { type DataSourceApi, type GrafanaTheme2, type TimeRange } from '@grafana/data';\nimport { InlineField, useTheme2 } from '@grafana/ui';\n\nimport { type QueryBuilderOperation, type VisualQuery, type VisualQueryModeller } from '../types';\nimport { OperationEditorBody } from './OperationEditorBody';\n\ninterface Props<T extends VisualQuery> {\n  operation: QueryBuilderOperation;\n  index: number;\n  query: T;\n  datasource: DataSourceApi;\n  queryModeller: VisualQueryModeller;\n  onChange: (index: number, update: QueryBuilderOperation) => void;\n  onRemove: (index: number) => void;\n  onToggle: (index: number) => void;\n  onRunQuery: () => void;\n  flash?: boolean;\n  highlight?: boolean;\n  timeRange?: TimeRange;\n  isConflictingOperation?: (operation: QueryBuilderOperation, otherOperations: QueryBuilderOperation[]) => boolean;\n}\n\nexport function OperationEditor<T extends VisualQuery>({\n  operation,\n  index,\n  onRemove,\n  onToggle,\n  onChange,\n  onRunQuery,\n  queryModeller,\n  query,\n  datasource,\n  flash,\n  highlight,\n  timeRange,\n  isConflictingOperation,\n}: Props<T>) {\n  const def = queryModeller.getOperationDefinition(operation.id);\n\n  const theme = useTheme2();\n  const isConflicting = isConflictingOperation ? isConflictingOperation(operation, query.operations) : false;\n  const styles = getStyles(theme, isConflicting);\n\n  if (!def) {\n    return <span>Operation {operation.id} not found</span>;\n  }\n\n  const isInvalid = (isDragging: boolean) => {\n    if (isDragging) {\n      return undefined;\n    }\n\n    return isConflicting ? true : undefined;\n  };\n\n  return (\n    <Draggable draggableId={`operation-${index}`} index={index}>\n      {(provided, snapshot) => (\n        <InlineField\n          error={'You have conflicting label filters'}\n          invalid={isInvalid(snapshot.isDragging)}\n          className={cx(styles.error, styles.cardWrapper)}\n        >\n          <OperationEditorBody\n            provided={provided}\n            flash={flash}\n            highlight={highlight}\n            isConflicting={isConflicting}\n            index={index}\n            operation={operation}\n            definition={def}\n            onChange={onChange}\n            onRemove={onRemove}\n            onToggle={onToggle}\n            queryModeller={queryModeller}\n            query={query}\n            timeRange={timeRange}\n            onRunQuery={onRunQuery}\n            datasource={datasource}\n          />\n        </InlineField>\n      )}\n    </Draggable>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2, isConflicting: boolean) => {\n  return {\n    cardWrapper: css({\n      alignItems: 'stretch',\n    }),\n    error: css({\n      marginBottom: theme.spacing(1),\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;AA0BO,SAAS,eAAuC,CAAA;AAAA,EACrD,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAa,EAAA;AACX,EAAA,MAAM,GAAM,GAAA,aAAA,CAAc,sBAAuB,CAAA,SAAA,CAAU,EAAE,CAAA;AAE7D,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAA,MAAM,gBAAgB,sBAAyB,GAAA,sBAAA,CAAuB,SAAW,EAAA,KAAA,CAAM,UAAU,CAAI,GAAA,KAAA;AACrG,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,KAAoB,CAAA;AAE7C,EAAA,IAAI,CAAC,GAAK,EAAA;AACR,IAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAK,YAAW,EAAA,SAAA,CAAU,IAAG,YAAU,CAAA;AAAA;AAGjD,EAAM,MAAA,SAAA,GAAY,CAAC,UAAwB,KAAA;AACzC,IAAA,IAAI,UAAY,EAAA;AACd,MAAO,OAAA,SAAA;AAAA;AAGT,IAAA,OAAO,gBAAgB,IAAO,GAAA,SAAA;AAAA,GAChC;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,aAAU,WAAa,EAAA,CAAA,UAAA,EAAa,KAAK,CAAI,CAAA,EAAA,KAAA,EAAA,EAC3C,CAAC,QAAA,EAAU,QACV,qBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,oCAAA;AAAA,MACP,OAAA,EAAS,SAAU,CAAA,QAAA,CAAS,UAAU,CAAA;AAAA,MACtC,SAAW,EAAA,EAAA,CAAG,MAAO,CAAA,KAAA,EAAO,OAAO,WAAW;AAAA,KAAA;AAAA,oBAE9C,KAAA,CAAA,aAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,UAAY,EAAA,GAAA;AAAA,QACZ,QAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,UAAA;AAAA,QACA;AAAA;AAAA;AACF,GAGN,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,EAAsB,aAA2B,KAAA;AAClE,EAAO,OAAA;AAAA,IACL,aAAa,GAAI,CAAA;AAAA,MACf,UAAY,EAAA;AAAA,KACb,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KAC9B;AAAA,GACH;AACF,CAAA;;;;"}

package/dist/esm/components/VisualQueryBuilder/components/OperationEditorBody.js

@@ -0,0 +1,254 @@
+import React, { useRef, useState, useEffect } from 'react';
+import '@hello-pangea/dnd';
+import { useTheme2, Tooltip, Icon, Button } from '@grafana/ui';
+import { cx, css } from '@emotion/css';
+import '@grafana/data';
+import { OperationHeader } from './OperationHeader.js';
+import { getOperationParamEditor, getOperationParamId } from './OperationParamEditor.js';
+import { v4 } from 'uuid';
+import '../../QueryEditor/types.js';
+import 'lodash';
+import '../../QueryEditor/EditorList.js';
+import { EditorStack } from '../../QueryEditor/EditorStack.js';
+import '../../QueryEditor/Space.js';
+import 'react-use';
+import '../../QueryEditor/QueryHeader.js';
+import 'react-virtualized-auto-sizer';
+import 'sql-formatter-plus';
+import '@grafana/runtime';
+import '../../SQLEditor/utils/debugger.js';
+import '../../SQLEditor/standardSql/macros.js';
+import '../../QueryEditor/visual-query-builder/AwesomeQueryBuilder.js';
+import '../../QueryEditor/visual-query-builder/WhereRow.js';
+import '../../QueryEditor/visual-query-builder/EditorField.js';
+import 'rxjs';
+import 'rxjs/operators';
+
+function OperationEditorBody({
+  provided,
+  flash,
+  isConflicting,
+  highlight,
+  index,
+  queryModeller,
+  onChange,
+  onRemove,
+  onToggle,
+  operation,
+  definition,
+  query,
+  timeRange,
+  onRunQuery,
+  datasource
+}) {
+  const theme = useTheme2();
+  const styles = getStyles(theme, isConflicting);
+  const shouldFlash = useFlash(flash);
+  const { current: id } = useRef(v4());
+  const onParamValueChanged = (paramIdx, value) => {
+    const update = { ...operation, params: [...operation.params] };
+    update.params[paramIdx] = value;
+    callParamChangedThenOnChange(definition, update, index, paramIdx, onChange);
+  };
+  const onAddRestParam = () => {
+    const update = { ...operation, params: [...operation.params, ""] };
+    callParamChangedThenOnChange(definition, update, index, operation.params.length, onChange);
+  };
+  const onRemoveRestParam = (paramIdx) => {
+    const update = {
+      ...operation,
+      params: [...operation.params.slice(0, paramIdx), ...operation.params.slice(paramIdx + 1)]
+    };
+    callParamChangedThenOnChange(definition, update, index, paramIdx, onChange);
+  };
+  let restParam;
+  if (definition.params.length > 0) {
+    const lastParamDef = definition.params[definition.params.length - 1];
+    if (lastParamDef.restParam) {
+      restParam = renderAddRestParamButton(lastParamDef, onAddRestParam, index, operation.params.length, styles);
+    }
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cx(styles.card, {
+        [styles.cardHighlight]: shouldFlash || highlight,
+        [styles.cardError]: isConflicting,
+        [styles.disabled]: operation.disabled
+      }),
+      ref: provided.innerRef,
+      ...provided.draggableProps,
+      "data-testid": `operations.${index}.wrapper`
+    },
+    /* @__PURE__ */ React.createElement(
+      OperationHeader,
+      {
+        operation,
+        dragHandleProps: provided.dragHandleProps,
+        definition,
+        index,
+        onChange,
+        onRemove,
+        onToggle,
+        queryModeller
+      }
+    ),
+    /* @__PURE__ */ React.createElement("div", { className: styles.body }, operation.params.map((param, paramIndex) => {
+      const paramDef = definition.params[Math.min(definition.params.length - 1, paramIndex)];
+      const Editor = getOperationParamEditor(paramDef);
+      return /* @__PURE__ */ React.createElement("div", { className: styles.paramRow, key: `${paramIndex}-1` }, !paramDef.hideName && /* @__PURE__ */ React.createElement("div", { className: styles.paramName }, /* @__PURE__ */ React.createElement("label", { htmlFor: getOperationParamId(id, paramIndex) }, paramDef.name), paramDef.description && /* @__PURE__ */ React.createElement(Tooltip, { placement: "top", content: paramDef.description, theme: "info" }, /* @__PURE__ */ React.createElement(Icon, { name: "info-circle", size: "sm", className: styles.infoIcon }))), /* @__PURE__ */ React.createElement("div", { className: styles.paramValue }, /* @__PURE__ */ React.createElement(EditorStack, { gap: 0.5, direction: "row", alignItems: "center", wrap: false }, /* @__PURE__ */ React.createElement(
+        Editor,
+        {
+          index: paramIndex,
+          paramDef,
+          value: operation.params[paramIndex],
+          operation,
+          operationId: id,
+          onChange: onParamValueChanged,
+          onRunQuery,
+          query,
+          datasource,
+          timeRange,
+          queryModeller
+        }
+      ), paramDef.restParam && (operation.params.length > definition.params.length || paramDef.optional) && /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          "data-testid": `operations.${index}.remove-rest-param`,
+          size: "sm",
+          fill: "text",
+          icon: "times",
+          variant: "secondary",
+          title: `Remove ${paramDef.name}`,
+          onClick: () => onRemoveRestParam(paramIndex)
+        }
+      ))));
+    })),
+    restParam,
+    index < query.operations.length - 1 && /* @__PURE__ */ React.createElement("div", { className: styles.arrow }, /* @__PURE__ */ React.createElement("div", { className: styles.arrowLine }), /* @__PURE__ */ React.createElement("div", { className: styles.arrowArrow }))
+  );
+}
+const getStyles = (theme, isConflicting) => {
+  return {
+    cardWrapper: css({
+      alignItems: "stretch"
+    }),
+    error: css({
+      marginBottom: theme.spacing(1)
+    }),
+    card: css({
+      background: theme.colors.background.primary,
+      border: `1px solid ${theme.colors.border.medium}`,
+      cursor: "grab",
+      borderRadius: theme.shape.radius.default,
+      position: "relative",
+      transition: "all 0.5s ease-in 0s",
+      height: isConflicting ? "auto" : "100%"
+    }),
+    disabled: css({
+      opacity: 0.5,
+      transition: "none"
+    }),
+    cardError: css({
+      boxShadow: `0px 0px 4px 0px ${theme.colors.warning.main}`,
+      border: `1px solid ${theme.colors.warning.main}`
+    }),
+    cardHighlight: css({
+      boxShadow: `0px 0px 4px 0px ${theme.colors.primary.border}`,
+      border: `1px solid ${theme.colors.primary.border}`
+    }),
+    infoIcon: css({
+      marginLeft: theme.spacing(0.5),
+      color: theme.colors.text.secondary,
+      ":hover": {
+        color: theme.colors.text.primary
+      }
+    }),
+    body: css({
+      margin: theme.spacing(1, 1, 0.5, 1),
+      display: "table"
+    }),
+    paramRow: css({
+      label: "paramRow",
+      display: "table-row",
+      verticalAlign: "middle"
+    }),
+    paramName: css({
+      display: "table-cell",
+      padding: theme.spacing(0, 1, 0, 0),
+      fontSize: theme.typography.bodySmall.fontSize,
+      fontWeight: theme.typography.fontWeightMedium,
+      verticalAlign: "middle",
+      height: "32px"
+    }),
+    paramValue: css({
+      label: "paramValue",
+      display: "table-cell",
+      verticalAlign: "middle"
+    }),
+    restParam: css({
+      padding: theme.spacing(0, 1, 1, 1)
+    }),
+    arrow: css({
+      position: "absolute",
+      top: "0",
+      right: "-18px",
+      display: "flex"
+    }),
+    arrowLine: css({
+      height: "2px",
+      width: "8px",
+      backgroundColor: theme.colors.border.strong,
+      position: "relative",
+      top: "14px"
+    }),
+    arrowArrow: css({
+      width: 0,
+      height: 0,
+      borderTop: `5px solid transparent`,
+      borderBottom: `5px solid transparent`,
+      borderLeft: `7px solid ${theme.colors.border.strong}`,
+      position: "relative",
+      top: "10px"
+    })
+  };
+};
+function useFlash(flash) {
+  const [keepFlash, setKeepFlash] = useState(true);
+  useEffect(() => {
+    let t;
+    if (flash) {
+      t = setTimeout(() => {
+        setKeepFlash(false);
+      }, 1e3);
+    } else {
+      setKeepFlash(true);
+    }
+    return () => clearTimeout(t);
+  }, [flash]);
+  return keepFlash && flash;
+}
+function callParamChangedThenOnChange(def, operation, operationIndex, paramIndex, onChange) {
+  if (def.paramChangedHandler) {
+    onChange(operationIndex, def.paramChangedHandler(paramIndex, operation, def));
+  } else {
+    onChange(operationIndex, operation);
+  }
+}
+function renderAddRestParamButton(paramDef, onAddRestParam, operationIndex, paramIndex, styles) {
+  return /* @__PURE__ */ React.createElement("div", { className: styles.restParam, key: `${paramIndex}-2` }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      size: "sm",
+      icon: "plus",
+      title: `Add ${paramDef.name}`.trimEnd(),
+      variant: "secondary",
+      onClick: onAddRestParam,
+      "data-testid": `operations.${operationIndex}.add-rest-param`
+    },
+    paramDef.name
+  ));
+}
+
+export { OperationEditorBody };
+//# sourceMappingURL=OperationEditorBody.js.map