@grafana/plugin-ui 0.8.0 → 0.9.0

package/dist/components/VisualQueryBuilder/components/OperationInfoButton.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OperationInfoButton = void 0;
+const tslib_1 = require("tslib");
+const css_1 = require("@emotion/css");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_popper_tooltip_1 = require("react-popper-tooltip");
+const data_1 = require("@grafana/data");
+const ui_1 = require("@grafana/ui");
+const FlexItem_1 = require("../../QueryEditor/FlexItem");
+exports.OperationInfoButton = react_1.default.memo(({ definition, operation, innerQueryPlaceholder }) => {
+    const styles = (0, ui_1.useStyles2)(getStyles);
+    const [show, setShow] = (0, react_1.useState)(false);
+    const { getTooltipProps, setTooltipRef, setTriggerRef, visible } = (0, react_popper_tooltip_1.usePopperTooltip)({
+        placement: 'top',
+        visible: show,
+        offset: [0, 16],
+        onVisibleChange: setShow,
+        interactive: true,
+        trigger: ['click'],
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ui_1.Button, { title: "Click to show description", ref: setTriggerRef, icon: "info-circle", size: "sm", variant: "secondary", fill: "text" }),
+        visible && (react_1.default.createElement(ui_1.Portal, null,
+            react_1.default.createElement("div", Object.assign({ ref: setTooltipRef }, getTooltipProps(), { className: styles.docBox }),
+                react_1.default.createElement("div", { className: styles.docBoxHeader },
+                    react_1.default.createElement("span", null, definition.renderer(operation, definition, innerQueryPlaceholder)),
+                    react_1.default.createElement(FlexItem_1.FlexItem, { grow: 1 }),
+                    react_1.default.createElement(ui_1.Button, { icon: "times", onClick: () => setShow(false), fill: "text", variant: "secondary", title: "Remove operation" })),
+                react_1.default.createElement("div", { className: styles.docBoxBody, dangerouslySetInnerHTML: { __html: getOperationDocs(definition, operation) } }))))));
+});
+exports.OperationInfoButton.displayName = 'OperationDocs';
+const getStyles = (theme) => {
+    return {
+        docBox: (0, css_1.css)({
+            overflow: 'hidden',
+            background: theme.colors.background.primary,
+            border: `1px solid ${theme.colors.border.strong}`,
+            boxShadow: theme.shadows.z3,
+            maxWidth: '600px',
+            padding: theme.spacing(1),
+            borderRadius: theme.shape.radius.default,
+            zIndex: theme.zIndex.tooltip,
+        }),
+        docBoxHeader: (0, css_1.css)({
+            fontSize: theme.typography.h5.fontSize,
+            fontFamily: theme.typography.fontFamilyMonospace,
+            paddingBottom: theme.spacing(1),
+            display: 'flex',
+            alignItems: 'center',
+        }),
+        docBoxBody: (0, css_1.css)({
+            // The markdown paragraph has a marginBottom this removes it
+            marginBottom: theme.spacing(-1),
+            color: theme.colors.text.secondary,
+        }),
+        signature: (0, css_1.css)({
+            fontSize: theme.typography.bodySmall.fontSize,
+            fontFamily: theme.typography.fontFamilyMonospace,
+        }),
+        dropdown: (0, css_1.css)({
+            opacity: 0,
+            color: theme.colors.text.secondary,
+        }),
+    };
+};
+function getOperationDocs(def, op) {
+    var _a;
+    return (0, data_1.renderMarkdown)(def.explainHandler ? def.explainHandler(op, def) : (_a = def.documentation) !== null && _a !== void 0 ? _a : 'no docs');
+}
+//# sourceMappingURL=OperationInfoButton.js.map

package/dist/components/VisualQueryBuilder/components/OperationInfoButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationInfoButton.js","sourceRoot":"","sources":["../../../../src/components/VisualQueryBuilder/components/OperationInfoButton.tsx"],"names":[],"mappings":"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"}

package/dist/components/VisualQueryBuilder/components/OperationList.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OperationList = void 0;
+const tslib_1 = require("tslib");
+const css_1 = require("@emotion/css");
+const react_1 = tslib_1.__importStar(require("react"));
+const dnd_1 = require("@hello-pangea/dnd");
+const react_use_1 = require("react-use");
+const ui_1 = require("@grafana/ui");
+const OperationEditor_1 = require("./OperationEditor");
+const QueryEditor_1 = require("../../QueryEditor");
+function OperationList({ query, datasource, queryModeller, onChange, onRunQuery, highlightedOp, timeRange, isConflictingOperation, }) {
+    const styles = (0, ui_1.useStyles2)(getStyles);
+    const { operations } = query;
+    const opsToHighlight = useOperationsHighlight(operations);
+    const [cascaderOpen, setCascaderOpen] = (0, react_1.useState)(false);
+    const onOperationChange = (index, update) => {
+        const updatedList = [...operations];
+        updatedList.splice(index, 1, update);
+        onChange(Object.assign(Object.assign({}, query), { operations: updatedList }));
+    };
+    const onRemove = (index) => {
+        const updatedList = [...operations.slice(0, index), ...operations.slice(index + 1)];
+        onChange(Object.assign(Object.assign({}, query), { operations: updatedList }));
+    };
+    const addOptions = queryModeller.getCategories().map((category) => {
+        return {
+            value: category,
+            label: category,
+            items: queryModeller.getOperationsForCategory(category).map((operation) => ({
+                value: operation.id,
+                label: operation.name,
+                isLeaf: true,
+            })),
+        };
+    });
+    const onAddOperation = (value) => {
+        const operationDef = queryModeller.getOperationDefinition(value);
+        if (!operationDef) {
+            return;
+        }
+        onChange(operationDef.addOperationHandler(operationDef, query, queryModeller));
+        setCascaderOpen(false);
+    };
+    const onDragEnd = (result) => {
+        if (!result.destination) {
+            return;
+        }
+        const updatedList = [...operations];
+        const element = updatedList[result.source.index];
+        updatedList.splice(result.source.index, 1);
+        updatedList.splice(result.destination.index, 0, element);
+        onChange(Object.assign(Object.assign({}, query), { operations: updatedList }));
+    };
+    const onCascaderBlur = () => {
+        setCascaderOpen(false);
+    };
+    return (react_1.default.createElement(QueryEditor_1.EditorStack, { gap: 1, direction: "column" },
+        react_1.default.createElement(QueryEditor_1.EditorStack, { gap: 1 },
+            operations.length > 0 && (react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
+                react_1.default.createElement(dnd_1.Droppable, { droppableId: "sortable-field-mappings", direction: "horizontal" }, (provided) => (react_1.default.createElement("div", Object.assign({ className: styles.operationList, ref: provided.innerRef }, provided.droppableProps),
+                    operations.map((op, index) => {
+                        return (react_1.default.createElement(OperationEditor_1.OperationEditor, { key: op.id + JSON.stringify(op.params) + index, queryModeller: queryModeller, index: index, operation: op, query: query, datasource: datasource, onChange: onOperationChange, onRemove: onRemove, onRunQuery: onRunQuery, flash: opsToHighlight[index], highlight: highlightedOp === op, timeRange: timeRange, isConflictingOperation: isConflictingOperation }));
+                    }),
+                    provided.placeholder))))),
+            react_1.default.createElement("div", { className: styles.addButton }, cascaderOpen ? (react_1.default.createElement(ui_1.Cascader, { options: addOptions, onSelect: onAddOperation, onBlur: onCascaderBlur, autoFocus: true, alwaysOpen: true, hideActiveLevelLabel: true, placeholder: 'Search' })) : (react_1.default.createElement(ui_1.Button, { icon: 'plus', variant: 'secondary', onClick: () => setCascaderOpen(true), title: 'Add operation' }, "Operations"))))));
+}
+exports.OperationList = OperationList;
+/**
+ * Returns indexes of operations that should be highlighted. We check the diff of operations added but at the same time
+ * we want to highlight operations only after the initial render, so we check for mounted state and calculate the diff
+ * only after.
+ * @param operations
+ */
+function useOperationsHighlight(operations) {
+    const isMounted = (0, react_use_1.useMountedState)();
+    const prevOperations = (0, react_use_1.usePrevious)(operations);
+    if (!isMounted()) {
+        return operations.map(() => false);
+    }
+    if (!prevOperations) {
+        return operations.map(() => true);
+    }
+    let newOps = [];
+    if (prevOperations.length - 1 === operations.length && operations.every((op) => prevOperations.includes(op))) {
+        // In case we remove one op and does not change any ops then don't highlight anything.
+        return operations.map(() => false);
+    }
+    if (prevOperations.length + 1 === operations.length && prevOperations.every((op) => operations.includes(op))) {
+        // If we add a single op just find it and highlight just that.
+        const newOp = operations.find((op) => !prevOperations.includes(op));
+        newOps = operations.map((op) => {
+            return op === newOp;
+        });
+    }
+    else {
+        // Default diff of all ops.
+        newOps = operations.map((op, index) => {
+            var _a;
+            return !isSameOp(op.id, (_a = prevOperations[index]) === null || _a === void 0 ? void 0 : _a.id);
+        });
+    }
+    return newOps;
+}
+function isSameOp(op1, op2) {
+    return op1 === op2 || `__${op1}_by` === op2 || op1 === `__${op2}_by`;
+}
+const getStyles = (theme) => {
+    return {
+        heading: (0, css_1.css)({
+            label: 'heading',
+            fontSize: 12,
+            fontWeight: theme.typography.fontWeightMedium,
+            marginBottom: 0,
+        }),
+        operationList: (0, css_1.css)({
+            label: 'operationList',
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: theme.spacing(2),
+        }),
+        addButton: (0, css_1.css)({
+            label: 'addButton',
+            width: 126,
+            paddingBottom: theme.spacing(1),
+        }),
+    };
+};
+//# sourceMappingURL=OperationList.js.map

package/dist/components/VisualQueryBuilder/components/OperationList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationList.js","sourceRoot":"","sources":["../../../../src/components/VisualQueryBuilder/components/OperationList.tsx"],"names":[],"mappings":"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"}

package/dist/components/VisualQueryBuilder/components/OperationListExplained.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OperationListExplained = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const OperationExplainedBox_1 = require("./OperationExplainedBox");
+const RawQuery_1 = require("./RawQuery");
+function OperationListExplained({ query, queryModeller, stepNumber, language, onMouseEnter, onMouseLeave, }) {
+    return (react_1.default.createElement(react_1.default.Fragment, null, query.operations.map((op, index) => {
+        var _a;
+        const def = queryModeller.getOperationDefinition(op.id);
+        if (!def) {
+            return `Operation ${op.id} not found`;
+        }
+        const title = def.renderer(op, def, queryModeller.innerQueryPlaceholder);
+        const body = def.explainHandler ? def.explainHandler(op, def) : (_a = def.documentation) !== null && _a !== void 0 ? _a : 'no docs';
+        return (react_1.default.createElement("div", { key: index, onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(op, index), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(op, index) },
+            react_1.default.createElement(OperationExplainedBox_1.OperationExplainedBox, { stepNumber: index + stepNumber, title: react_1.default.createElement(RawQuery_1.RawQuery, { query: title, language: language }), markdown: body })));
+    })));
+}
+exports.OperationListExplained = OperationListExplained;
+//# sourceMappingURL=OperationListExplained.js.map

package/dist/components/VisualQueryBuilder/components/OperationListExplained.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationListExplained.js","sourceRoot":"","sources":["../../../../src/components/VisualQueryBuilder/components/OperationListExplained.tsx"],"names":[],"mappings":";;;;AACA,0DAA0B;AAE1B,mEAAgE;AAChE,yCAAsC;AAgBtC,SAAgB,sBAAsB,CAAwB,EAC5D,KAAK,EACL,aAAa,EACb,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,YAAY,GACH;IACT,OAAO,CACL,8DACG,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;;QAClC,MAAM,GAAG,GAAG,aAAa,CAAC,sBAAsB,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QACxD,IAAI,CAAC,GAAG,EAAE;YACR,OAAO,aAAa,EAAE,CAAC,EAAE,YAAY,CAAC;SACvC;QACD,MAAM,KAAK,GAAG,GAAG,CAAC,QAAQ,CAAC,EAAE,EAAE,GAAG,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;QACzE,MAAM,IAAI,GAAG,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,MAAA,GAAG,CAAC,aAAa,mCAAI,SAAS,CAAC;QAE/F,OAAO,CACL,uCACE,GAAG,EAAE,KAAK,EACV,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,EAAE,EAAE,KAAK,CAAC,EAC7C,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,EAAE,EAAE,KAAK,CAAC;YAE7C,8BAAC,6CAAqB,IACpB,UAAU,EAAE,KAAK,GAAG,UAAU,EAC9B,KAAK,EAAE,8BAAC,mBAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,EACrD,QAAQ,EAAE,IAAI,GACd,CACE,CACP,CAAC;IACJ,CAAC,CAAC,CACD,CACJ,CAAC;AACJ,CAAC;AAlCD,wDAkCC"}

package/dist/components/VisualQueryBuilder/components/OperationParamEditor.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOperationParamId = exports.getOperationParamEditor = void 0;
+const tslib_1 = require("tslib");
+const css_1 = require("@emotion/css");
+const react_1 = tslib_1.__importDefault(require("react"));
+const data_1 = require("@grafana/data");
+const ui_1 = require("@grafana/ui");
+const QueryEditor_1 = require("../../QueryEditor");
+function getOperationParamEditor(paramDef) {
+    if (paramDef.editor) {
+        return paramDef.editor;
+    }
+    if (paramDef.options) {
+        return SelectInputParamEditor;
+    }
+    switch (paramDef.type) {
+        case 'boolean':
+            return BoolInputParamEditor;
+        case 'number':
+        case 'string':
+        default:
+            return SimpleInputParamEditor;
+    }
+}
+exports.getOperationParamEditor = getOperationParamEditor;
+function SimpleInputParamEditor(props) {
+    var _a;
+    return (react_1.default.createElement(ui_1.AutoSizeInput, { id: getOperationParamId(props.operationId, props.index), defaultValue: (_a = props.value) === null || _a === void 0 ? void 0 : _a.toString(), minWidth: props.paramDef.minWidth, placeholder: props.paramDef.placeholder, title: props.paramDef.description, maxWidth: (props.paramDef.minWidth || 20) * 3, onCommitChange: (evt) => {
+            props.onChange(props.index, evt.currentTarget.value);
+            if (props.paramDef.runQueryOnEnter && evt.type === 'keydown') {
+                props.onRunQuery();
+            }
+        } }));
+}
+function BoolInputParamEditor(props) {
+    return (react_1.default.createElement(ui_1.Checkbox, { id: getOperationParamId(props.operationId, props.index), value: Boolean(props.value), onChange: (evt) => props.onChange(props.index, evt.currentTarget.checked) }));
+}
+function SelectInputParamEditor({ paramDef, value, index, operationId, onChange, }) {
+    var _a, _b;
+    const styles = (0, ui_1.useStyles2)(getStyles);
+    let selectOptions = paramDef.options;
+    if (!((_a = selectOptions[0]) === null || _a === void 0 ? void 0 : _a.label)) {
+        selectOptions = paramDef.options.map((option) => ({
+            label: option.toString(),
+            value: option,
+        }));
+    }
+    let valueOption = (_b = selectOptions.find((x) => x.value === value)) !== null && _b !== void 0 ? _b : (0, data_1.toOption)(value);
+    // If we have optional options param and don't have value, we want to render button with which we add optional options.
+    // This makes it easier to understand what needs to be selected and what is optional.
+    if (!value && paramDef.optional) {
+        return (react_1.default.createElement("div", { className: styles.optionalParam },
+            react_1.default.createElement(ui_1.Button, { size: "sm", variant: "secondary", title: `Add ${paramDef.name}`, icon: "plus", onClick: () => onChange(index, selectOptions[0].value) }, paramDef.name)));
+    }
+    return (react_1.default.createElement(QueryEditor_1.EditorStack, { gap: 0.5, direction: "row", alignItems: "center" },
+        react_1.default.createElement(ui_1.Select, { id: getOperationParamId(operationId, index), value: valueOption, options: selectOptions, placeholder: paramDef.placeholder, allowCustomValue: true, onChange: (value) => onChange(index, value.value), width: paramDef.minWidth || 'auto' }),
+        paramDef.optional && (react_1.default.createElement(ui_1.Button, { "data-testid": `operations.${index}.remove-param`, size: "sm", fill: "text", icon: "times", variant: "secondary", title: `Remove ${paramDef.name}`, onClick: () => onChange(index, '') }))));
+}
+const getStyles = (theme) => {
+    return {
+        optionalParam: (0, css_1.css)({
+            marginTop: theme.spacing(1),
+        }),
+    };
+};
+function getOperationParamId(operationId, paramIndex) {
+    return `operations.${operationId}.param.${paramIndex}`;
+}
+exports.getOperationParamId = getOperationParamId;
+//# sourceMappingURL=OperationParamEditor.js.map

package/dist/components/VisualQueryBuilder/components/OperationParamEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationParamEditor.js","sourceRoot":"","sources":["../../../../src/components/VisualQueryBuilder/components/OperationParamEditor.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AACnC,0DAAiD;AAEjD,wCAAyE;AACzE,oCAAkF;AAIlF,mDAAgD;AAEhD,SAAgB,uBAAuB,CACrC,QAAuC;IAEvC,IAAI,QAAQ,CAAC,MAAM,EAAE;QACnB,OAAO,QAAQ,CAAC,MAAM,CAAC;KACxB;IAED,IAAI,QAAQ,CAAC,OAAO,EAAE;QACpB,OAAO,sBAAsB,CAAC;KAC/B;IAED,QAAQ,QAAQ,CAAC,IAAI,EAAE;QACrB,KAAK,SAAS;YACZ,OAAO,oBAAoB,CAAC;QAC9B,KAAK,QAAQ,CAAC;QACd,KAAK,QAAQ,CAAC;QACd;YACE,OAAO,sBAAsB,CAAC;KACjC;AACH,CAAC;AAnBD,0DAmBC;AAED,SAAS,sBAAsB,CAAC,KAA4C;;IAC1E,OAAO,CACL,8BAAC,kBAAa,IACZ,EAAE,EAAE,mBAAmB,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,EACvD,YAAY,EAAE,MAAA,KAAK,CAAC,KAAK,0CAAE,QAAQ,EAAE,EACrC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,QAAQ,EACjC,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,WAAW,EACvC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,WAAW,EACjC,QAAQ,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,IAAI,EAAE,CAAC,GAAG,CAAC,EAC7C,cAAc,EAAE,CAAC,GAAG,EAAE,EAAE;YACtB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACrD,IAAI,KAAK,CAAC,QAAQ,CAAC,eAAe,IAAI,GAAG,CAAC,IAAI,KAAK,SAAS,EAAE;gBAC5D,KAAK,CAAC,UAAU,EAAE,CAAC;aACpB;QACH,CAAC,GACD,CACH,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAAC,KAA4C;IACxE,OAAO,CACL,8BAAC,aAAQ,IACP,EAAE,EAAE,mBAAmB,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,EACvD,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,EAC3B,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,GACzE,CACH,CAAC;AACJ,CAAC;AAED,SAAS,sBAAsB,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,GAC8B;;IACtC,MAAM,MAAM,GAAG,IAAA,eAAU,EAAC,SAAS,CAAC,CAAC;IACrC,IAAI,aAAa,GAAG,QAAQ,CAAC,OAA4B,CAAC;IAE1D,IAAI,CAAC,CAAA,MAAA,aAAa,CAAC,CAAC,CAAC,0CAAE,KAAK,CAAA,EAAE;QAC5B,aAAa,GAAG,QAAQ,CAAC,OAAQ,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YACjD,KAAK,EAAE,MAAM,CAAC,QAAQ,EAAE;YACxB,KAAK,EAAE,MAAM;SACd,CAAC,CAAC,CAAC;KACL;IAED,IAAI,WAAW,GAAG,MAAA,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,mCAAI,IAAA,eAAQ,EAAC,KAAe,CAAC,CAAC;IAE5F,uHAAuH;IACvH,qFAAqF;IACrF,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,QAAQ,EAAE;QAC/B,OAAO,CACL,uCAAK,SAAS,EAAE,MAAM,CAAC,aAAa;YAClC,8BAAC,WAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,OAAO,QAAQ,CAAC,IAAI,EAAE,EAC7B,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAErD,QAAQ,CAAC,IAAI,CACP,CACL,CACP,CAAC;KACH;IAED,OAAO,CACL,8BAAC,yBAAW,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,KAAK,EAAC,UAAU,EAAC,QAAQ;QACxD,8BAAC,WAAM,IACL,EAAE,EAAE,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,EAC3C,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,aAAa,EACtB,WAAW,EAAE,QAAQ,CAAC,WAAW,EACjC,gBAAgB,EAAE,IAAI,EACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,KAAM,CAAC,EAClD,KAAK,EAAE,QAAQ,CAAC,QAAQ,IAAI,MAAM,GAClC;QACD,QAAQ,CAAC,QAAQ,IAAI,CACpB,8BAAC,WAAM,mBACQ,cAAc,KAAK,eAAe,EAC/C,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,UAAU,QAAQ,CAAC,IAAI,EAAE,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,GAClC,CACH,CACW,CACf,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;IACzC,OAAO;QACL,aAAa,EAAE,IAAA,SAAG,EAAC;YACjB,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;SAC5B,CAAC;KACH,CAAC;AACJ,CAAC,CAAC;AAEF,SAAgB,mBAAmB,CAAC,WAAmB,EAAE,UAAkB;IACzE,OAAO,cAAc,WAAW,UAAU,UAAU,EAAE,CAAC;AACzD,CAAC;AAFD,kDAEC"}

package/dist/components/VisualQueryBuilder/components/OperationsEditorRow.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OperationsEditorRow = void 0;
+const tslib_1 = require("tslib");
+const css_1 = require("@emotion/css");
+const react_1 = tslib_1.__importDefault(require("react"));
+const ui_1 = require("@grafana/ui");
+const QueryEditor_1 = require("../../QueryEditor");
+function OperationsEditorRow({ children }) {
+    const styles = (0, ui_1.useStyles2)(getStyles);
+    return (react_1.default.createElement("div", { className: styles.root },
+        react_1.default.createElement(QueryEditor_1.EditorStack, { gap: 1 }, children)));
+}
+exports.OperationsEditorRow = OperationsEditorRow;
+const getStyles = (theme) => {
+    return {
+        root: (0, css_1.css)({
+            padding: theme.spacing(1, 1, 0, 1),
+            backgroundColor: theme.colors.background.secondary,
+            borderRadius: theme.shape.radius.default,
+        }),
+    };
+};
+//# sourceMappingURL=OperationsEditorRow.js.map

package/dist/components/VisualQueryBuilder/components/OperationsEditorRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationsEditorRow.js","sourceRoot":"","sources":["../../../../src/components/VisualQueryBuilder/components/OperationsEditorRow.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AACnC,0DAA0B;AAG1B,oCAAyC;AAEzC,mDAAgD;AAEhD,SAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAA+B;IAC3E,MAAM,MAAM,GAAG,IAAA,eAAU,EAAC,SAAS,CAAC,CAAC;IAErC,OAAO,CACL,uCAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QACzB,8BAAC,yBAAW,IAAC,GAAG,EAAE,CAAC,IAAG,QAAQ,CAAe,CACzC,CACP,CAAC;AACJ,CAAC;AARD,kDAQC;AAED,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;IACzC,OAAO;QACL,IAAI,EAAE,IAAA,SAAG,EAAC;YACR,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YAClC,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,SAAS;YAClD,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;SACzC,CAAC;KACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/VisualQueryBuilder/components/QueryBuilderHints.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueryBuilderHints = void 0;
+const tslib_1 = require("tslib");
+const css_1 = require("@emotion/css");
+const react_1 = tslib_1.__importStar(require("react"));
+const runtime_1 = require("@grafana/runtime");
+const ui_1 = require("@grafana/ui");
+const QueryBuilderHints = ({ datasource, query: visualQuery, onChange, data, queryModeller, buildVisualQueryFromString, buildDataQueryFromQueryString, buildQueryStringFromDataQuery, }) => {
+    const [hints, setHints] = (0, react_1.useState)([]);
+    const styles = (0, ui_1.useStyles2)(getStyles);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));
+        // For now show only actionable hints
+        const hints = (_a = datasource.getQueryHints) === null || _a === void 0 ? void 0 : _a.call(datasource, dataQuery, (data === null || data === void 0 ? void 0 : data.series) || []).filter((hint) => { var _a; return (_a = hint.fix) === null || _a === void 0 ? void 0 : _a.action; });
+        setHints(hints !== null && hints !== void 0 ? hints : []);
+    }, [datasource, visualQuery, data, queryModeller, buildDataQueryFromQueryString]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, hints.length > 0 && (react_1.default.createElement("div", { className: styles.container }, hints.map((hint) => {
+        var _a, _b, _c, _d;
+        return (react_1.default.createElement(ui_1.Tooltip, { content: `${hint.label} ${(_a = hint.fix) === null || _a === void 0 ? void 0 : _a.label}`, key: hint.type },
+            react_1.default.createElement(ui_1.Button, { onClick: () => {
+                    var _a, _b, _c;
+                    (0, runtime_1.reportInteraction)('grafana_query_builder_hints_clicked', {
+                        hint: hint.type,
+                        datasourceType: datasource.type,
+                    });
+                    if ((_a = hint === null || hint === void 0 ? void 0 : hint.fix) === null || _a === void 0 ? void 0 : _a.action) {
+                        const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));
+                        const newQuery = (_b = datasource.modifyQuery) === null || _b === void 0 ? void 0 : _b.call(datasource, dataQuery, hint.fix.action);
+                        if (newQuery) {
+                            const newVisualQuery = buildVisualQueryFromString((_c = buildQueryStringFromDataQuery(newQuery)) !== null && _c !== void 0 ? _c : '');
+                            return onChange(newVisualQuery.query);
+                        }
+                    }
+                }, fill: "outline", size: "sm", className: styles.hint },
+                "hint: ",
+                ((_b = hint.fix) === null || _b === void 0 ? void 0 : _b.title) || ((_d = (_c = hint.fix) === null || _c === void 0 ? void 0 : _c.action) === null || _d === void 0 ? void 0 : _d.type.toLowerCase().replace('_', ' ')))));
+    })))));
+};
+exports.QueryBuilderHints = QueryBuilderHints;
+exports.QueryBuilderHints.displayName = 'QueryBuilderHints';
+const getStyles = (theme) => {
+    return {
+        container: (0, css_1.css) `
+      display: flex;
+      align-items: start;
+    `,
+        hint: (0, css_1.css) `
+      margin-right: ${theme.spacing(1)};
+    `,
+    };
+};
+//# sourceMappingURL=QueryBuilderHints.js.map

package/dist/components/VisualQueryBuilder/components/QueryBuilderHints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryBuilderHints.js","sourceRoot":"","sources":["../../../../src/components/VisualQueryBuilder/components/QueryBuilderHints.tsx"],"names":[],"mappings":"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"}

package/dist/components/VisualQueryBuilder/components/QueryEditorModeToggle.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueryEditorModeToggle = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const ui_1 = require("@grafana/ui");
+const types_1 = require("../types");
+const editorModes = [
+    { label: 'Builder', value: types_1.QueryEditorMode.Builder },
+    { label: 'Code', value: types_1.QueryEditorMode.Code },
+];
+function QueryEditorModeToggle({ mode, onChange }) {
+    return (react_1.default.createElement("div", { "data-testid": 'QueryEditorModeToggle' },
+        react_1.default.createElement(ui_1.RadioButtonGroup, { options: editorModes, size: "sm", value: mode, onChange: onChange })));
+}
+exports.QueryEditorModeToggle = QueryEditorModeToggle;
+//# sourceMappingURL=QueryEditorModeToggle.js.map

package/dist/components/VisualQueryBuilder/components/QueryEditorModeToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryEditorModeToggle.js","sourceRoot":"","sources":["../../../../src/components/VisualQueryBuilder/components/QueryEditorModeToggle.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAE1B,oCAA+C;AAE/C,oCAA2C;AAO3C,MAAM,WAAW,GAAG;IAClB,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,uBAAe,CAAC,OAAO,EAAE;IACpD,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,uBAAe,CAAC,IAAI,EAAE;CAC/C,CAAC;AAEF,SAAgB,qBAAqB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAS;IAC7D,OAAO,CACL,sDAAkB,uBAAuB;QACvC,8BAAC,qBAAgB,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACjF,CACP,CAAC;AACJ,CAAC;AAND,sDAMC"}

package/dist/components/VisualQueryBuilder/components/QueryHeaderSwitch.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueryHeaderSwitch = void 0;
+const tslib_1 = require("tslib");
+const css_1 = require("@emotion/css");
+const lodash_1 = require("lodash");
+const react_1 = tslib_1.__importStar(require("react"));
+const ui_1 = require("@grafana/ui");
+const QueryEditor_1 = require("../../QueryEditor");
+function QueryHeaderSwitch(_a) {
+    var { label } = _a, inputProps = tslib_1.__rest(_a, ["label"]);
+    const dashedLabel = label.replace(' ', '-');
+    const switchIdRef = (0, react_1.useRef)((0, lodash_1.uniqueId)(`switch-${dashedLabel}`));
+    const styles = (0, ui_1.useStyles2)(getStyles);
+    return (react_1.default.createElement(QueryEditor_1.EditorStack, { gap: 1 },
+        react_1.default.createElement("label", { htmlFor: switchIdRef.current, className: styles.switchLabel }, label),
+        react_1.default.createElement(ui_1.Switch, Object.assign({}, inputProps, { id: switchIdRef.current }))));
+}
+exports.QueryHeaderSwitch = QueryHeaderSwitch;
+const getStyles = (theme) => {
+    return {
+        switchLabel: (0, css_1.css)({
+            color: theme.colors.text.secondary,
+            cursor: 'pointer',
+            fontSize: theme.typography.bodySmall.fontSize,
+            '&:hover': {
+                color: theme.colors.text.primary,
+            },
+        }),
+    };
+};
+//# sourceMappingURL=QueryHeaderSwitch.js.map

package/dist/components/VisualQueryBuilder/components/QueryHeaderSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryHeaderSwitch.js","sourceRoot":"","sources":["../../../../src/components/VisualQueryBuilder/components/QueryHeaderSwitch.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AACnC,mCAAkC;AAClC,uDAAiD;AAGjD,oCAAiD;AAEjD,mDAAgD;AAOhD,SAAgB,iBAAiB,CAAC,EAA+B;QAA/B,EAAE,KAAK,OAAwB,EAAnB,UAAU,sBAAtB,SAAwB,CAAF;IACtD,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,IAAA,cAAM,EAAC,IAAA,iBAAQ,EAAC,UAAU,WAAW,EAAE,CAAC,CAAC,CAAC;IAC9D,MAAM,MAAM,GAAG,IAAA,eAAU,EAAC,SAAS,CAAC,CAAC;IAErC,OAAO,CACL,8BAAC,yBAAW,IAAC,GAAG,EAAE,CAAC;QACjB,yCAAO,OAAO,EAAE,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,IAC/D,KAAK,CACA;QACR,8BAAC,WAAM,oBAAK,UAAU,IAAE,EAAE,EAAE,WAAW,CAAC,OAAO,IAAI,CACvC,CACf,CAAC;AACJ,CAAC;AAbD,8CAaC;AAED,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;IACzC,OAAO;QACL,WAAW,EAAE,IAAA,SAAG,EAAC;YACf,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;YAClC,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,QAAQ;YAC7C,SAAS,EAAE;gBACT,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO;aACjC;SACF,CAAC;KACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/VisualQueryBuilder/components/QueryOptionGroup.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueryOptionGroup = void 0;
+const tslib_1 = require("tslib");
+const css_1 = require("@emotion/css");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_use_1 = require("react-use");
+const data_1 = require("@grafana/data");
+const runtime_1 = require("@grafana/runtime");
+const ui_1 = require("@grafana/ui");
+const QueryEditor_1 = require("../../QueryEditor");
+function QueryOptionGroup({ title, children, collapsedInfo, queryStats }) {
+    const [isOpen, toggleOpen] = (0, react_use_1.useToggle)(false);
+    const styles = (0, ui_1.useStyles2)(getStyles);
+    return (react_1.default.createElement("div", { className: styles.wrapper },
+        react_1.default.createElement(ui_1.Collapse, { className: styles.collapse, collapsible: true, isOpen: isOpen, onToggle: toggleOpen, label: react_1.default.createElement(QueryEditor_1.EditorStack, { gap: 0 },
+                react_1.default.createElement("h6", { className: styles.title }, title),
+                !isOpen && (react_1.default.createElement("div", { className: styles.description }, collapsedInfo.map((x, i) => (react_1.default.createElement("span", { key: i }, x)))))) },
+            react_1.default.createElement("div", { className: styles.body }, children)),
+        queryStats && runtime_1.config.featureToggles.lokiQuerySplitting && (react_1.default.createElement(ui_1.Tooltip, { content: "Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part." },
+            react_1.default.createElement(ui_1.Icon, { tabIndex: 0, name: "info-circle", className: styles.tooltip, size: "sm" }))),
+        queryStats && react_1.default.createElement("p", { className: styles.stats }, generateQueryStats(queryStats))));
+}
+exports.QueryOptionGroup = QueryOptionGroup;
+const getStyles = (theme) => {
+    return {
+        collapse: (0, css_1.css)({
+            backgroundColor: 'unset',
+            border: 'unset',
+            marginBottom: 0,
+            ['> button']: {
+                padding: theme.spacing(0, 1),
+            },
+        }),
+        wrapper: (0, css_1.css)({
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'baseline',
+        }),
+        title: (0, css_1.css)({
+            flexGrow: 1,
+            overflow: 'hidden',
+            fontSize: theme.typography.bodySmall.fontSize,
+            fontWeight: theme.typography.fontWeightMedium,
+            margin: 0,
+        }),
+        description: (0, css_1.css)({
+            color: theme.colors.text.secondary,
+            fontSize: theme.typography.bodySmall.fontSize,
+            fontWeight: theme.typography.bodySmall.fontWeight,
+            paddingLeft: theme.spacing(2),
+            gap: theme.spacing(2),
+            display: 'flex',
+        }),
+        body: (0, css_1.css)({
+            display: 'flex',
+            gap: theme.spacing(2),
+            flexWrap: 'wrap',
+        }),
+        stats: (0, css_1.css)({
+            margin: '0px',
+            color: theme.colors.text.secondary,
+            fontSize: theme.typography.bodySmall.fontSize,
+        }),
+        tooltip: (0, css_1.css)({
+            marginRight: theme.spacing(0.25),
+        }),
+    };
+};
+const generateQueryStats = (queryStats) => {
+    if (queryStats.message) {
+        return queryStats.message;
+    }
+    return `This query will process approximately ${convertUnits(queryStats)}.`;
+};
+const convertUnits = (queryStats) => {
+    const { text, suffix } = (0, data_1.getValueFormat)('bytes')(queryStats.bytes, 1);
+    return text + suffix;
+};
+//# sourceMappingURL=QueryOptionGroup.js.map

package/dist/components/VisualQueryBuilder/components/QueryOptionGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryOptionGroup.js","sourceRoot":"","sources":["../../../../src/components/VisualQueryBuilder/components/QueryOptionGroup.tsx"],"names":[],"mappings":"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"}

package/dist/components/VisualQueryBuilder/components/RawQuery.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RawQuery = void 0;
+const tslib_1 = require("tslib");
+const css_1 = require("@emotion/css");
+const prismjs_1 = tslib_1.__importDefault(require("prismjs"));
+const react_1 = tslib_1.__importDefault(require("react"));
+const data_1 = require("@grafana/data");
+const ui_1 = require("@grafana/ui");
+function RawQuery({ query, language, className }) {
+    const theme = (0, ui_1.useTheme2)();
+    const styles = getStyles(theme);
+    const highlighted = prismjs_1.default.highlight(query, language.grammar, language.name);
+    return (react_1.default.createElement("div", { className: (0, css_1.cx)(styles.editorField, 'prism-syntax-highlight', className), "aria-label": "selector", dangerouslySetInnerHTML: { __html: data_1.textUtil.sanitize(highlighted) } }));
+}
+exports.RawQuery = RawQuery;
+const getStyles = (theme) => {
+    return {
+        editorField: (0, css_1.css)({
+            fontFamily: theme.typography.fontFamilyMonospace,
+            fontSize: theme.typography.bodySmall.fontSize,
+        }),
+    };
+};
+//# sourceMappingURL=RawQuery.js.map

package/dist/components/VisualQueryBuilder/components/RawQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RawQuery.js","sourceRoot":"","sources":["../../../../src/components/VisualQueryBuilder/components/RawQuery.tsx"],"names":[],"mappings":";;;;AAAA,sCAAuC;AACvC,8DAAyC;AACzC,0DAA0B;AAE1B,wCAAwD;AACxD,oCAAwC;AAUxC,SAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAS;IAC5D,MAAM,KAAK,GAAG,IAAA,cAAS,GAAE,CAAC;IAC1B,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAChC,MAAM,WAAW,GAAG,iBAAK,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE5E,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,QAAE,EAAC,MAAM,CAAC,WAAW,EAAE,wBAAwB,EAAE,SAAS,CAAC,gBAC3D,UAAU,EACrB,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,GACnE,CACH,CAAC;AACJ,CAAC;AAZD,4BAYC;AAED,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;IACzC,OAAO;QACL,WAAW,EAAE,IAAA,SAAG,EAAC;YACf,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB;YAChD,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,QAAQ;SAC9C,CAAC;KACH,CAAC;AACJ,CAAC,CAAC"}