@grafana/plugin-ui 0.9.5 → 0.10.0

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

@@ -0,0 +1,136 @@
+import { css } from '@emotion/css';
+import React from 'react';
+import { toOption } from '@grafana/data';
+import { AutoSizeInput, Checkbox, useStyles2, Button, Select } from '@grafana/ui';
+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 'uuid';
+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 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;
+  }
+}
+function SimpleInputParamEditor(props) {
+  var _a;
+  return /* @__PURE__ */ React.createElement(
+    AutoSizeInput,
+    {
+      id: getOperationParamId(props.operationId, props.index),
+      defaultValue: (_a = props.value) == null ? undefined : _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 /* @__PURE__ */ React.createElement(
+    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 = useStyles2(getStyles);
+  let selectOptions = paramDef.options;
+  if (!((_a = selectOptions[0]) == null ? undefined : _a.label)) {
+    selectOptions = paramDef.options.map((option) => ({
+      label: option.toString(),
+      value: option
+    }));
+  }
+  let valueOption = (_b = selectOptions.find((x) => x.value === value)) != null ? _b : toOption(value);
+  if (!value && paramDef.optional) {
+    return /* @__PURE__ */ React.createElement("div", { className: styles.optionalParam }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        size: "sm",
+        variant: "secondary",
+        title: `Add ${paramDef.name}`,
+        icon: "plus",
+        onClick: () => onChange(index, selectOptions[0].value)
+      },
+      paramDef.name
+    ));
+  }
+  return /* @__PURE__ */ React.createElement(EditorStack, { gap: 0.5, direction: "row", alignItems: "center" }, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      id: getOperationParamId(operationId, index),
+      value: valueOption,
+      options: selectOptions,
+      placeholder: paramDef.placeholder,
+      allowCustomValue: true,
+      onChange: (value2) => onChange(index, value2.value),
+      width: paramDef.minWidth || "auto"
+    }
+  ), paramDef.optional && /* @__PURE__ */ React.createElement(
+    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: css({
+      marginTop: theme.spacing(1)
+    })
+  };
+};
+function getOperationParamId(operationId, paramIndex) {
+  return `operations.${operationId}.param.${paramIndex}`;
+}
+
+export { getOperationParamEditor, getOperationParamId };
+//# sourceMappingURL=OperationParamEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OperationParamEditor.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationParamEditor.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { type FunctionComponent } from 'react';\n\nimport { type GrafanaTheme2, type SelectableValue, toOption } from '@grafana/data';\nimport { AutoSizeInput, Button, Checkbox, Select, useStyles2 } from '@grafana/ui';\n\nimport { type QueryBuilderOperationParamDef, type QueryBuilderOperationParamEditorProps } from '../types';\n\nimport { EditorStack } from '../../QueryEditor';\n\nexport function getOperationParamEditor(\n  paramDef: QueryBuilderOperationParamDef\n): FunctionComponent<QueryBuilderOperationParamEditorProps> {\n  if (paramDef.editor) {\n    return paramDef.editor;\n  }\n\n  if (paramDef.options) {\n    return SelectInputParamEditor;\n  }\n\n  switch (paramDef.type) {\n    case 'boolean':\n      return BoolInputParamEditor;\n    case 'number':\n    case 'string':\n    default:\n      return SimpleInputParamEditor;\n  }\n}\n\nfunction SimpleInputParamEditor(props: QueryBuilderOperationParamEditorProps) {\n  return (\n    <AutoSizeInput\n      id={getOperationParamId(props.operationId, props.index)}\n      defaultValue={props.value?.toString()}\n      minWidth={props.paramDef.minWidth}\n      placeholder={props.paramDef.placeholder}\n      title={props.paramDef.description}\n      maxWidth={(props.paramDef.minWidth || 20) * 3}\n      onCommitChange={(evt) => {\n        props.onChange(props.index, evt.currentTarget.value);\n        if (props.paramDef.runQueryOnEnter && evt.type === 'keydown') {\n          props.onRunQuery();\n        }\n      }}\n    />\n  );\n}\n\nfunction BoolInputParamEditor(props: QueryBuilderOperationParamEditorProps) {\n  return (\n    <Checkbox\n      id={getOperationParamId(props.operationId, props.index)}\n      value={Boolean(props.value)}\n      onChange={(evt) => props.onChange(props.index, evt.currentTarget.checked)}\n    />\n  );\n}\n\nfunction SelectInputParamEditor({\n  paramDef,\n  value,\n  index,\n  operationId,\n  onChange,\n}: QueryBuilderOperationParamEditorProps) {\n  const styles = useStyles2(getStyles);\n  let selectOptions = paramDef.options as SelectableValue[];\n\n  if (!selectOptions[0]?.label) {\n    selectOptions = paramDef.options!.map((option) => ({\n      label: option.toString(),\n      value: option,\n    }));\n  }\n\n  let valueOption = selectOptions.find((x) => x.value === value) ?? toOption(value as string);\n\n  // If we have optional options param and don't have value, we want to render button with which we add optional options.\n  // This makes it easier to understand what needs to be selected and what is optional.\n  if (!value && paramDef.optional) {\n    return (\n      <div className={styles.optionalParam}>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          title={`Add ${paramDef.name}`}\n          icon=\"plus\"\n          onClick={() => onChange(index, selectOptions[0].value)}\n        >\n          {paramDef.name}\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <EditorStack gap={0.5} direction=\"row\" alignItems=\"center\">\n      <Select\n        id={getOperationParamId(operationId, index)}\n        value={valueOption}\n        options={selectOptions}\n        placeholder={paramDef.placeholder}\n        allowCustomValue={true}\n        onChange={(value) => onChange(index, value.value!)}\n        width={paramDef.minWidth || 'auto'}\n      />\n      {paramDef.optional && (\n        <Button\n          data-testid={`operations.${index}.remove-param`}\n          size=\"sm\"\n          fill=\"text\"\n          icon=\"times\"\n          variant=\"secondary\"\n          title={`Remove ${paramDef.name}`}\n          onClick={() => onChange(index, '')}\n        />\n      )}\n    </EditorStack>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    optionalParam: css({\n      marginTop: theme.spacing(1),\n    }),\n  };\n};\n\nexport function getOperationParamId(operationId: string, paramIndex: number) {\n  return `operations.${operationId}.param.${paramIndex}`;\n}\n"],"names":["value"],"mappings":"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"}

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

@@ -0,0 +1,39 @@
+import { css } from '@emotion/css';
+import React from 'react';
+import '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+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 'uuid';
+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 OperationsEditorRow({ children }) {
+  const styles = useStyles2(getStyles);
+  return /* @__PURE__ */ React.createElement("div", { className: styles.root }, /* @__PURE__ */ React.createElement(EditorStack, { gap: 1 }, children));
+}
+const getStyles = (theme) => {
+  return {
+    root: css({
+      padding: theme.spacing(1, 1, 0, 1),
+      backgroundColor: theme.colors.background.secondary,
+      borderRadius: theme.shape.radius.default
+    })
+  };
+};
+
+export { OperationsEditorRow };
+//# sourceMappingURL=OperationsEditorRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OperationsEditorRow.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationsEditorRow.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\nimport { EditorStack } from '../../QueryEditor';\n\nexport function OperationsEditorRow({ children }: React.PropsWithChildren<{}>) {\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.root}>\n      <EditorStack gap={1}>{children}</EditorStack>\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    root: css({\n      padding: theme.spacing(1, 1, 0, 1),\n      backgroundColor: theme.colors.background.secondary,\n      borderRadius: theme.shape.radius.default,\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAQgB,SAAA,mBAAA,CAAoB,EAAE,QAAA,EAAyC,EAAA;AAC7E,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAA,sCACpB,WAAY,EAAA,EAAA,GAAA,EAAK,CAAI,EAAA,EAAA,QAAS,CACjC,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,MAAM,GAAI,CAAA;AAAA,MACR,SAAS,KAAM,CAAA,OAAA,CAAQ,CAAG,EAAA,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,MACjC,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,SAAA;AAAA,MACzC,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA;AAAA,KAClC;AAAA,GACH;AACF,CAAA;;;;"}

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

@@ -0,0 +1,73 @@
+import { css } from '@emotion/css';
+import React, { useState, useEffect } from 'react';
+import '@grafana/data';
+import { reportInteraction } from '@grafana/runtime';
+import { useStyles2, Tooltip, Button } from '@grafana/ui';
+
+const QueryBuilderHints = ({
+  datasource,
+  query: visualQuery,
+  onChange,
+  data,
+  queryModeller,
+  buildVisualQueryFromString,
+  buildDataQueryFromQueryString,
+  buildQueryStringFromDataQuery
+}) => {
+  const [hints, setHints] = useState([]);
+  const styles = useStyles2(getStyles);
+  useEffect(() => {
+    var _a;
+    const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));
+    const hints2 = (_a = datasource.getQueryHints) == null ? undefined : _a.call(datasource, dataQuery, (data == null ? undefined : data.series) || []).filter((hint) => {
+      var _a2;
+      return (_a2 = hint.fix) == null ? undefined : _a2.action;
+    });
+    setHints(hints2 != null ? hints2 : []);
+  }, [datasource, visualQuery, data, queryModeller, buildDataQueryFromQueryString]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, hints.length > 0 && /* @__PURE__ */ React.createElement("div", { className: styles.container }, hints.map((hint) => {
+    var _a, _b, _c, _d;
+    return /* @__PURE__ */ React.createElement(Tooltip, { content: `${hint.label} ${(_a = hint.fix) == null ? undefined : _a.label}`, key: hint.type }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: () => {
+          var _a2, _b2, _c2;
+          reportInteraction("grafana_query_builder_hints_clicked", {
+            hint: hint.type,
+            datasourceType: datasource.type
+          });
+          if ((_a2 = hint == null ? undefined : hint.fix) == null ? undefined : _a2.action) {
+            const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));
+            const newQuery = (_b2 = datasource.modifyQuery) == null ? undefined : _b2.call(datasource, dataQuery, hint.fix.action);
+            if (newQuery) {
+              const newVisualQuery = buildVisualQueryFromString(
+                (_c2 = buildQueryStringFromDataQuery(newQuery)) != null ? _c2 : ""
+              );
+              return onChange(newVisualQuery.query);
+            }
+          }
+        },
+        fill: "outline",
+        size: "sm",
+        className: styles.hint
+      },
+      "hint: ",
+      ((_b = hint.fix) == null ? undefined : _b.title) || ((_d = (_c = hint.fix) == null ? undefined : _c.action) == null ? undefined : _d.type.toLowerCase().replace("_", " "))
+    ));
+  })));
+};
+QueryBuilderHints.displayName = "QueryBuilderHints";
+const getStyles = (theme) => {
+  return {
+    container: css`
+      display: flex;
+      align-items: start;
+    `,
+    hint: css`
+      margin-right: ${theme.spacing(1)};
+    `
+  };
+};
+
+export { QueryBuilderHints };
+//# sourceMappingURL=QueryBuilderHints.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QueryBuilderHints.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryBuilderHints.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useState, useEffect } from 'react';\n\nimport { type DataSourceApi, type GrafanaTheme2, type PanelData, type QueryHint, type DataQuery } from '@grafana/data';\nimport { reportInteraction } from '@grafana/runtime';\nimport { Button, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { type VisualQuery, type VisualQueryModeller } from '../types';\n\ninterface Props<TVisualQuery extends VisualQuery, TDataQuery extends DataQuery> {\n  query: TVisualQuery;\n  datasource: DataSourceApi<TDataQuery>;\n  queryModeller: VisualQueryModeller;\n  buildVisualQueryFromString: (queryString: string) => { query: TVisualQuery };\n  buildDataQueryFromQueryString: (queryString: string) => TDataQuery;\n  buildQueryStringFromDataQuery: (dataQuery: TDataQuery) => string;\n  onChange: (update: TVisualQuery) => void;\n  data?: PanelData;\n}\n\nexport const QueryBuilderHints = <TVisualQuery extends VisualQuery, TDataQuery extends DataQuery>({\n  datasource,\n  query: visualQuery,\n  onChange,\n  data,\n  queryModeller,\n  buildVisualQueryFromString,\n  buildDataQueryFromQueryString,\n  buildQueryStringFromDataQuery,\n}: Props<TVisualQuery, TDataQuery>) => {\n  const [hints, setHints] = useState<QueryHint[]>([]);\n  const styles = useStyles2(getStyles);\n\n  useEffect(() => {\n    const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));\n    // For now show only actionable hints\n    const hints = datasource.getQueryHints?.(dataQuery, data?.series || []).filter((hint) => hint.fix?.action);\n    setHints(hints ?? []);\n  }, [datasource, visualQuery, data, queryModeller, buildDataQueryFromQueryString]);\n\n  return (\n    <>\n      {hints.length > 0 && (\n        <div className={styles.container}>\n          {hints.map((hint) => {\n            return (\n              <Tooltip content={`${hint.label} ${hint.fix?.label}`} key={hint.type}>\n                <Button\n                  onClick={() => {\n                    reportInteraction('grafana_query_builder_hints_clicked', {\n                      hint: hint.type,\n                      datasourceType: datasource.type,\n                    });\n\n                    if (hint?.fix?.action) {\n                      const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));\n                      const newQuery = datasource.modifyQuery?.(dataQuery, hint.fix.action);\n                      if (newQuery) {\n                        const newVisualQuery = buildVisualQueryFromString(\n                          buildQueryStringFromDataQuery(newQuery) ?? ''\n                        );\n                        return onChange(newVisualQuery.query);\n                      }\n                    }\n                  }}\n                  fill=\"outline\"\n                  size=\"sm\"\n                  className={styles.hint}\n                >\n                  hint: {hint.fix?.title || hint.fix?.action?.type.toLowerCase().replace('_', ' ')}\n                </Button>\n              </Tooltip>\n            );\n          })}\n        </div>\n      )}\n    </>\n  );\n};\n\nQueryBuilderHints.displayName = 'QueryBuilderHints';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    container: css`\n      display: flex;\n      align-items: start;\n    `,\n    hint: css`\n      margin-right: ${theme.spacing(1)};\n    `,\n  };\n};\n"],"names":["hints","_a","_b","_c"],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { RadioButtonGroup } from '@grafana/ui';
+import { QueryEditorMode } from '../types.js';
+
+const editorModes = [
+  { label: "Builder", value: QueryEditorMode.Builder },
+  { label: "Code", value: QueryEditorMode.Code }
+];
+function QueryEditorModeToggle({ mode, onChange }) {
+  return /* @__PURE__ */ React.createElement("div", { "data-testid": "QueryEditorModeToggle" }, /* @__PURE__ */ React.createElement(RadioButtonGroup, { options: editorModes, size: "sm", value: mode, onChange }));
+}
+
+export { QueryEditorModeToggle };
+//# sourceMappingURL=QueryEditorModeToggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QueryEditorModeToggle.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryEditorModeToggle.tsx"],"sourcesContent":["import React from 'react';\n\nimport { RadioButtonGroup } from '@grafana/ui';\n\nimport { QueryEditorMode } from '../types';\n\ninterface Props {\n  mode: QueryEditorMode;\n  onChange: (mode: QueryEditorMode) => void;\n}\n\nconst editorModes = [\n  { label: 'Builder', value: QueryEditorMode.Builder },\n  { label: 'Code', value: QueryEditorMode.Code },\n];\n\nexport function QueryEditorModeToggle({ mode, onChange }: Props) {\n  return (\n    <div data-testid={'QueryEditorModeToggle'}>\n      <RadioButtonGroup options={editorModes} size=\"sm\" value={mode} onChange={onChange} />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAWA,MAAM,WAAc,GAAA;AAAA,EAClB,EAAE,KAAA,EAAO,SAAW,EAAA,KAAA,EAAO,gBAAgB,OAAQ,EAAA;AAAA,EACnD,EAAE,KAAA,EAAO,MAAQ,EAAA,KAAA,EAAO,gBAAgB,IAAK;AAC/C,CAAA;AAEO,SAAS,qBAAsB,CAAA,EAAE,IAAM,EAAA,QAAA,EAAmB,EAAA;AAC/D,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,aAAa,EAAA,uBAAA,EAAA,kBACf,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAiB,OAAS,EAAA,WAAA,EAAa,IAAK,EAAA,IAAA,EAAK,KAAO,EAAA,IAAA,EAAM,UAAoB,CACrF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,44 @@
+import { css } from '@emotion/css';
+import { uniqueId } from 'lodash';
+import React, { useRef } from 'react';
+import '@grafana/data';
+import { useStyles2, Switch } from '@grafana/ui';
+import '../../QueryEditor/types.js';
+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 'uuid';
+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 QueryHeaderSwitch({ label, ...inputProps }) {
+  const dashedLabel = label.replace(" ", "-");
+  const switchIdRef = useRef(uniqueId(`switch-${dashedLabel}`));
+  const styles = useStyles2(getStyles);
+  return /* @__PURE__ */ React.createElement(EditorStack, { gap: 1 }, /* @__PURE__ */ React.createElement("label", { htmlFor: switchIdRef.current, className: styles.switchLabel }, label), /* @__PURE__ */ React.createElement(Switch, { ...inputProps, id: switchIdRef.current }));
+}
+const getStyles = (theme) => {
+  return {
+    switchLabel: css({
+      color: theme.colors.text.secondary,
+      cursor: "pointer",
+      fontSize: theme.typography.bodySmall.fontSize,
+      "&:hover": {
+        color: theme.colors.text.primary
+      }
+    })
+  };
+};
+
+export { QueryHeaderSwitch };
+//# sourceMappingURL=QueryHeaderSwitch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QueryHeaderSwitch.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryHeaderSwitch.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport React, { type HTMLProps, useRef } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Switch, useStyles2 } from '@grafana/ui';\n\nimport { EditorStack } from '../../QueryEditor';\n\ninterface Props extends Omit<HTMLProps<HTMLInputElement>, 'value' | 'ref'> {\n  value?: boolean;\n  label: string;\n}\n\nexport function QueryHeaderSwitch({ label, ...inputProps }: Props) {\n  const dashedLabel = label.replace(' ', '-');\n  const switchIdRef = useRef(uniqueId(`switch-${dashedLabel}`));\n  const styles = useStyles2(getStyles);\n\n  return (\n    <EditorStack gap={1}>\n      <label htmlFor={switchIdRef.current} className={styles.switchLabel}>\n        {label}\n      </label>\n      <Switch {...inputProps} id={switchIdRef.current} />\n    </EditorStack>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    switchLabel: css({\n      color: theme.colors.text.secondary,\n      cursor: 'pointer',\n      fontSize: theme.typography.bodySmall.fontSize,\n      '&:hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAcO,SAAS,iBAAkB,CAAA,EAAE,KAAO,EAAA,GAAG,YAAqB,EAAA;AACjE,EAAA,MAAM,WAAc,GAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,EAAK,GAAG,CAAA;AAC1C,EAAA,MAAM,cAAc,MAAO,CAAA,QAAA,CAAS,CAAU,OAAA,EAAA,WAAW,EAAE,CAAC,CAAA;AAC5D,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,eAAY,GAAK,EAAA,CAAA,EAAA,sCACf,OAAM,EAAA,EAAA,OAAA,EAAS,YAAY,OAAS,EAAA,SAAA,EAAW,OAAO,WACpD,EAAA,EAAA,KACH,mBACC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAQ,GAAG,UAAY,EAAA,EAAA,EAAI,WAAY,CAAA,OAAA,EAAS,CACnD,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,aAAa,GAAI,CAAA;AAAA,MACf,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,MAAQ,EAAA,SAAA;AAAA,MACR,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,QAAA;AAAA,MACrC,SAAW,EAAA;AAAA,QACT,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD;AAAA,GACH;AACF,CAAA;;;;"}

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

@@ -0,0 +1,97 @@
+import { css } from '@emotion/css';
+import React from 'react';
+import { useToggle } from 'react-use';
+import { getValueFormat } from '@grafana/data';
+import { config } from '@grafana/runtime';
+import { useStyles2, Collapse, Tooltip, Icon } from '@grafana/ui';
+import '../../QueryEditor/types.js';
+import 'lodash';
+import '../../QueryEditor/EditorList.js';
+import { EditorStack } from '../../QueryEditor/EditorStack.js';
+import '../../QueryEditor/Space.js';
+import '../../QueryEditor/QueryHeader.js';
+import 'react-virtualized-auto-sizer';
+import 'sql-formatter-plus';
+import 'uuid';
+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 QueryOptionGroup({ title, children, collapsedInfo, queryStats }) {
+  const [isOpen, toggleOpen] = useToggle(false);
+  const styles = useStyles2(getStyles);
+  return /* @__PURE__ */ React.createElement("div", { className: styles.wrapper }, /* @__PURE__ */ React.createElement(
+    Collapse,
+    {
+      className: styles.collapse,
+      collapsible: true,
+      isOpen,
+      onToggle: toggleOpen,
+      label: /* @__PURE__ */ React.createElement(EditorStack, { gap: 0 }, /* @__PURE__ */ React.createElement("h6", { className: styles.title }, title), !isOpen && /* @__PURE__ */ React.createElement("div", { className: styles.description }, collapsedInfo.map((x, i) => /* @__PURE__ */ React.createElement("span", { key: i }, x))))
+    },
+    /* @__PURE__ */ React.createElement("div", { className: styles.body }, children)
+  ), queryStats && config.featureToggles.lokiQuerySplitting && /* @__PURE__ */ React.createElement(Tooltip, { content: "Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part." }, /* @__PURE__ */ React.createElement(Icon, { tabIndex: 0, name: "info-circle", className: styles.tooltip, size: "sm" })), queryStats && /* @__PURE__ */ React.createElement("p", { className: styles.stats }, generateQueryStats(queryStats)));
+}
+const getStyles = (theme) => {
+  return {
+    collapse: css({
+      backgroundColor: "unset",
+      border: "unset",
+      marginBottom: 0,
+      ["> button"]: {
+        padding: theme.spacing(0, 1)
+      }
+    }),
+    wrapper: css({
+      width: "100%",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "baseline"
+    }),
+    title: css({
+      flexGrow: 1,
+      overflow: "hidden",
+      fontSize: theme.typography.bodySmall.fontSize,
+      fontWeight: theme.typography.fontWeightMedium,
+      margin: 0
+    }),
+    description: 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: css({
+      display: "flex",
+      gap: theme.spacing(2),
+      flexWrap: "wrap"
+    }),
+    stats: css({
+      margin: "0px",
+      color: theme.colors.text.secondary,
+      fontSize: theme.typography.bodySmall.fontSize
+    }),
+    tooltip: 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 } = getValueFormat("bytes")(queryStats.bytes, 1);
+  return text + suffix;
+};
+
+export { QueryOptionGroup };
+//# sourceMappingURL=QueryOptionGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QueryOptionGroup.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryOptionGroup.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React from 'react';\nimport { useToggle } from 'react-use';\n\nimport { getValueFormat, type GrafanaTheme2 } from '@grafana/data';\nimport { config } from '@grafana/runtime';\nimport { Collapse, Icon, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { type QueryStats } from '../types';\nimport { EditorStack } from '../../QueryEditor';\n\ninterface Props {\n  title: string;\n  collapsedInfo: string[];\n  queryStats?: QueryStats | null;\n}\n\nexport function QueryOptionGroup({ title, children, collapsedInfo, queryStats }: React.PropsWithChildren<Props>) {\n  const [isOpen, toggleOpen] = useToggle(false);\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.wrapper}>\n      <Collapse\n        className={styles.collapse}\n        collapsible\n        isOpen={isOpen}\n        onToggle={toggleOpen}\n        label={\n          <EditorStack gap={0}>\n            <h6 className={styles.title}>{title}</h6>\n            {!isOpen && (\n              <div className={styles.description}>\n                {collapsedInfo.map((x, i) => (\n                  <span key={i}>{x}</span>\n                ))}\n              </div>\n            )}\n          </EditorStack>\n        }\n      >\n        <div className={styles.body}>{children}</div>\n      </Collapse>\n      {/**TODO: This is Loki logic that should eventually be moved to Loki */}\n      {queryStats && config.featureToggles.lokiQuerySplitting && (\n        <Tooltip content=\"Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part.\">\n          <Icon tabIndex={0} name=\"info-circle\" className={styles.tooltip} size=\"sm\" />\n        </Tooltip>\n      )}\n\n      {queryStats && <p className={styles.stats}>{generateQueryStats(queryStats)}</p>}\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    collapse: css({\n      backgroundColor: 'unset',\n      border: 'unset',\n      marginBottom: 0,\n\n      ['> button']: {\n        padding: theme.spacing(0, 1),\n      },\n    }),\n    wrapper: css({\n      width: '100%',\n      display: 'flex',\n      justifyContent: 'space-between',\n      alignItems: 'baseline',\n    }),\n    title: css({\n      flexGrow: 1,\n      overflow: 'hidden',\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n      margin: 0,\n    }),\n    description: css({\n      color: theme.colors.text.secondary,\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.bodySmall.fontWeight,\n      paddingLeft: theme.spacing(2),\n      gap: theme.spacing(2),\n      display: 'flex',\n    }),\n    body: css({\n      display: 'flex',\n      gap: theme.spacing(2),\n      flexWrap: 'wrap',\n    }),\n    stats: css({\n      margin: '0px',\n      color: theme.colors.text.secondary,\n      fontSize: theme.typography.bodySmall.fontSize,\n    }),\n    tooltip: css({\n      marginRight: theme.spacing(0.25),\n    }),\n  };\n};\n\nconst generateQueryStats = (queryStats: QueryStats) => {\n  if (queryStats.message) {\n    return queryStats.message;\n  }\n\n  return `This query will process approximately ${convertUnits(queryStats)}.`;\n};\n\nconst convertUnits = (queryStats: QueryStats): string => {\n  const { text, suffix } = getValueFormat('bytes')(queryStats.bytes, 1);\n  return text + suffix;\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,30 @@
+import { cx, css } from '@emotion/css';
+import Prism from 'prismjs';
+import React from 'react';
+import { textUtil } from '@grafana/data';
+import { useTheme2 } from '@grafana/ui';
+
+function RawQuery({ query, language, className }) {
+  const theme = useTheme2();
+  const styles = getStyles(theme);
+  const highlighted = Prism.highlight(query, language.grammar, language.name);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cx(styles.editorField, "prism-syntax-highlight", className),
+      "aria-label": "selector",
+      dangerouslySetInnerHTML: { __html: textUtil.sanitize(highlighted) }
+    }
+  );
+}
+const getStyles = (theme) => {
+  return {
+    editorField: css({
+      fontFamily: theme.typography.fontFamilyMonospace,
+      fontSize: theme.typography.bodySmall.fontSize
+    })
+  };
+};
+
+export { RawQuery };
+//# sourceMappingURL=RawQuery.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RawQuery.js","sources":["../../../../../src/components/VisualQueryBuilder/components/RawQuery.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport Prism, { type Grammar } from 'prismjs';\nimport React from 'react';\n\nimport { type GrafanaTheme2, textUtil } from '@grafana/data';\nimport { useTheme2 } from '@grafana/ui';\n\ninterface Props {\n  query: string;\n  language: {\n    grammar: Grammar;\n    name: string;\n  };\n  className?: string;\n}\nexport function RawQuery({ query, language, className }: Props) {\n  const theme = useTheme2();\n  const styles = getStyles(theme);\n  const highlighted = Prism.highlight(query, language.grammar, language.name);\n\n  return (\n    <div\n      className={cx(styles.editorField, 'prism-syntax-highlight', className)}\n      aria-label=\"selector\"\n      dangerouslySetInnerHTML={{ __html: textUtil.sanitize(highlighted) }}\n    />\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    editorField: css({\n      fontFamily: theme.typography.fontFamilyMonospace,\n      fontSize: theme.typography.bodySmall.fontSize,\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;AAeO,SAAS,QAAS,CAAA,EAAE,KAAO,EAAA,QAAA,EAAU,WAAoB,EAAA;AAC9D,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,UAAU,KAAK,CAAA;AAC9B,EAAA,MAAM,cAAc,KAAM,CAAA,SAAA,CAAU,OAAO,QAAS,CAAA,OAAA,EAAS,SAAS,IAAI,CAAA;AAE1E,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA,CAAG,MAAO,CAAA,WAAA,EAAa,0BAA0B,SAAS,CAAA;AAAA,MACrE,YAAW,EAAA,UAAA;AAAA,MACX,yBAAyB,EAAE,MAAA,EAAQ,QAAS,CAAA,QAAA,CAAS,WAAW,CAAE;AAAA;AAAA,GACpE;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,aAAa,GAAI,CAAA;AAAA,MACf,UAAA,EAAY,MAAM,UAAW,CAAA,mBAAA;AAAA,MAC7B,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA;AAAA,KACtC;AAAA,GACH;AACF,CAAA;;;;"}

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

@@ -0,0 +1,12 @@
+import 'react';
+import '@grafana/data';
+
+var QueryEditorMode = /* @__PURE__ */ ((QueryEditorMode2) => {
+  QueryEditorMode2["Code"] = "code";
+  QueryEditorMode2["Builder"] = "builder";
+  return QueryEditorMode2;
+})(QueryEditorMode || {});
+const BINARY_OPERATIONS_KEY = "Binary operations";
+
+export { BINARY_OPERATIONS_KEY, QueryEditorMode };
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../src/components/VisualQueryBuilder/types.ts"],"sourcesContent":["import { type FunctionComponent } from 'react';\n\nimport { type DataSourceApi, type RegistryItem, type SelectableValue, type TimeRange } from '@grafana/data';\n\nexport interface QueryBuilderLabelFilter {\n  label: string;\n  op: string;\n  value: string;\n}\n\nexport interface QueryBuilderOperation {\n  id: string;\n  params: QueryBuilderOperationParamValue[];\n  disabled?: boolean;\n}\n\nexport interface QueryBuilderOperationDefinition<T = any> extends RegistryItem {\n  documentation?: string;\n  params: QueryBuilderOperationParamDef[];\n  defaultParams: QueryBuilderOperationParamValue[];\n  category: string;\n  hideFromList?: boolean;\n  alternativesKey?: string;\n  /** Can be used to control operation placement when adding a new operations, lower are placed first */\n  orderRank?: number;\n  renderer: QueryBuilderOperationRenderer;\n  addOperationHandler: QueryBuilderAddOperationHandler<T>;\n  paramChangedHandler?: QueryBuilderOnParamChangedHandler;\n  explainHandler?: QueryBuilderExplainOperationHandler;\n  changeTypeHandler?: (op: QueryBuilderOperation, newDef: QueryBuilderOperationDefinition<T>) => QueryBuilderOperation;\n  toggleable?: boolean;\n}\n\ntype QueryBuilderAddOperationHandler<T> = (\n  def: QueryBuilderOperationDefinition,\n  query: T,\n  modeller: VisualQueryModeller\n) => T;\n\ntype QueryBuilderExplainOperationHandler = (op: QueryBuilderOperation, def?: QueryBuilderOperationDefinition) => string;\n\ntype QueryBuilderOnParamChangedHandler = (\n  index: number,\n  operation: QueryBuilderOperation,\n  operationDef: QueryBuilderOperationDefinition\n) => QueryBuilderOperation;\n\ntype QueryBuilderOperationRenderer = (\n  model: QueryBuilderOperation,\n  def: QueryBuilderOperationDefinition,\n  innerQuery: string\n) => string;\n\nexport type QueryBuilderOperationParamValue = string | number | boolean;\n\nexport interface QueryBuilderOperationParamDef {\n  name: string;\n  type: 'string' | 'number' | 'boolean';\n  options?: string[] | number[] | Array<SelectableValue<string>>;\n  hideName?: boolean;\n  restParam?: boolean;\n  optional?: boolean;\n  placeholder?: string;\n  description?: string;\n  minWidth?: number;\n  editor?: FunctionComponent<QueryBuilderOperationParamEditorProps>;\n  runQueryOnEnter?: boolean;\n}\n\nexport interface QueryBuilderOperationParamEditorProps {\n  value?: QueryBuilderOperationParamValue;\n  paramDef: QueryBuilderOperationParamDef;\n  /** Parameter index */\n  index: number;\n  operation: QueryBuilderOperation;\n  operationId: string;\n  query: any;\n  datasource: DataSourceApi;\n  timeRange?: TimeRange;\n  onChange: (index: number, value: QueryBuilderOperationParamValue) => void;\n  onRunQuery: () => void;\n  queryModeller: VisualQueryModeller;\n}\n\nexport enum QueryEditorMode {\n  Code = 'code',\n  Builder = 'builder',\n}\n\nexport type QueryStats = {\n  bytes: number;\n  // The error message displayed in the UI when we cant estimate the size of the query.\n  message?: string;\n};\n\nexport interface VisualQueryModeller {\n  getOperationsForCategory(category: string): QueryBuilderOperationDefinition[];\n  getAlternativeOperations(key: string): QueryBuilderOperationDefinition[];\n  getCategories(): string[];\n  getOperationDefinition(id: string): QueryBuilderOperationDefinition | undefined;\n  renderQuery(query: VisualQuery, nested?: boolean): string;\n  renderLabels(labels: QueryBuilderLabelFilter[]): string;\n  innerQueryPlaceholder: string;\n}\n\nexport interface VisualQueryBinary<T> {\n  operator: string;\n  vectorMatchesType?: 'on' | 'ignoring';\n  vectorMatches?: string;\n  query: T;\n}\n\nexport const BINARY_OPERATIONS_KEY = 'Binary operations';\n\nexport interface VisualQuery {\n  metric?: string;\n  labels: QueryBuilderLabelFilter[];\n  operations: QueryBuilderOperation[];\n  binaryQueries?: Array<VisualQueryBinary<VisualQuery>>;\n}\n"],"names":["QueryEditorMode"],"mappings":";;;AAoFY,IAAA,eAAA,qBAAAA,gBAAL,KAAA;AACL,EAAAA,iBAAA,MAAO,CAAA,GAAA,MAAA;AACP,EAAAA,iBAAA,SAAU,CAAA,GAAA,SAAA;AAFA,EAAAA,OAAAA,gBAAAA;AAAA,CAAA,EAAA,eAAA,IAAA,EAAA;AA4BL,MAAM,qBAAwB,GAAA;;;;"}