@grafana/plugin-ui 0.9.5 → 0.10.0

package/dist/esm/components/QueryEditor/QueryHeader.js

@@ -0,0 +1,172 @@
+import React, { useState, useCallback } from 'react';
+import { useCopyToClipboard } from 'react-use';
+import '@grafana/data';
+import { ConfirmModal } from './ConfirmModal.js';
+import { DatasetSelector } from './DatasetSelector.js';
+import { TableSelector } from './TableSelector.js';
+import { InlineSwitch, RadioButtonGroup } from '@grafana/ui';
+import { EditorMode, QUERY_FORMAT_OPTIONS, QueryFormat } from './types.js';
+import { getRawSqlFn } from './utils/sql.utils.js';
+import { EditorField } from './EditorField.js';
+import { EditorHeader } from './EditorHeader.js';
+import { EditorRow } from './EditorRow.js';
+import { FlexItem } from './FlexItem.js';
+import { InlineSelect } from './InlineSelect.js';
+import { Space } from './Space.js';
+import { RunQueryButton } from './RunQueryButton.js';
+
+const editorModes = [
+  { label: "Builder", value: EditorMode.Builder },
+  { label: "Code", value: EditorMode.Code }
+];
+function QueryHeader({
+  db,
+  defaultDataset,
+  enableDatasets,
+  query,
+  queryRowFilter,
+  onChange,
+  onRunQuery,
+  onQueryRowChange,
+  isQueryRunnable,
+  labels = /* @__PURE__ */ new Map([["dataset", "Dataset"]])
+}) {
+  const { editorMode } = query;
+  const [_, copyToClipboard] = useCopyToClipboard();
+  const [showConfirm, setShowConfirm] = useState(false);
+  const toRawSql = getRawSqlFn(db);
+  const onEditorModeChange = useCallback(
+    (newEditorMode) => {
+      if (editorMode === EditorMode.Code) {
+        setShowConfirm(true);
+        return;
+      }
+      onChange({ ...query, editorMode: newEditorMode });
+    },
+    [editorMode, onChange, query]
+  );
+  const onFormatChange = (e) => {
+    const next = { ...query, format: e.value !== undefined ? e.value : QueryFormat.Table };
+    onChange(next);
+  };
+  const onDatasetChange = (e) => {
+    if (e.value === query.dataset) {
+      return;
+    }
+    const next = {
+      ...query,
+      dataset: e.value,
+      table: undefined,
+      sql: undefined,
+      rawSql: ""
+    };
+    onChange(next);
+  };
+  const onTableChange = (e) => {
+    if (e.value === query.table) {
+      return;
+    }
+    const next = {
+      ...query,
+      table: e.value,
+      sql: undefined,
+      rawSql: ""
+    };
+    onChange(next);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(EditorHeader, null, /* @__PURE__ */ React.createElement(
+    InlineSelect,
+    {
+      label: "Format",
+      value: query.format,
+      placeholder: "Select format",
+      menuShouldPortal: true,
+      onChange: onFormatChange,
+      options: QUERY_FORMAT_OPTIONS
+    }
+  ), editorMode === EditorMode.Builder && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    InlineSwitch,
+    {
+      id: "sql-filter",
+      label: "Filter",
+      transparent: true,
+      showLabel: true,
+      value: queryRowFilter.filter,
+      onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, filter: ev.target.checked })
+    }
+  ), /* @__PURE__ */ React.createElement(
+    InlineSwitch,
+    {
+      id: "sql-group",
+      label: "Group",
+      transparent: true,
+      showLabel: true,
+      value: queryRowFilter.group,
+      onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, group: ev.target.checked })
+    }
+  ), /* @__PURE__ */ React.createElement(
+    InlineSwitch,
+    {
+      id: "sql-order",
+      label: "Order",
+      transparent: true,
+      showLabel: true,
+      value: queryRowFilter.order,
+      onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, order: ev.target.checked })
+    }
+  ), /* @__PURE__ */ React.createElement(
+    InlineSwitch,
+    {
+      id: "sql-preview",
+      label: "Preview",
+      transparent: true,
+      showLabel: true,
+      value: queryRowFilter.preview,
+      onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, preview: ev.target.checked })
+    }
+  )), /* @__PURE__ */ React.createElement(FlexItem, { grow: 1 }), /* @__PURE__ */ React.createElement(RunQueryButton, { queryInvalid: !isQueryRunnable, onClick: () => onRunQuery() }), /* @__PURE__ */ React.createElement(RadioButtonGroup, { options: editorModes, size: "sm", value: editorMode, onChange: onEditorModeChange }), /* @__PURE__ */ React.createElement(
+    ConfirmModal,
+    {
+      isOpen: showConfirm,
+      onCopy: () => {
+        setShowConfirm(false);
+        copyToClipboard(query.rawSql);
+        onChange({
+          ...query,
+          rawSql: toRawSql(query),
+          editorMode: EditorMode.Builder
+        });
+      },
+      onDiscard: () => {
+        setShowConfirm(false);
+        onChange({
+          ...query,
+          rawSql: toRawSql(query),
+          editorMode: EditorMode.Builder
+        });
+      },
+      onCancel: () => setShowConfirm(false)
+    }
+  )), editorMode === EditorMode.Builder && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Space, { v: 0.5 }), /* @__PURE__ */ React.createElement(EditorRow, null, enableDatasets === true && /* @__PURE__ */ React.createElement(EditorField, { label: labels.get("dataset") || "Dataset", width: 25 }, /* @__PURE__ */ React.createElement(
+    DatasetSelector,
+    {
+      db,
+      dataset: defaultDataset,
+      value: query.dataset === undefined ? null : query.dataset,
+      onChange: onDatasetChange
+    }
+  )), /* @__PURE__ */ React.createElement(EditorField, { label: "Table", width: 25 }, /* @__PURE__ */ React.createElement(
+    TableSelector,
+    {
+      db,
+      dataset: query.dataset || defaultDataset,
+      query,
+      value: query.table === undefined ? null : query.table,
+      onChange: onTableChange,
+      applyDefault: true
+    }
+  )))));
+}
+
+export { QueryHeader };
+//# sourceMappingURL=QueryHeader.js.map

package/dist/esm/components/QueryEditor/QueryHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryHeader.js","sources":["../../../../src/components/QueryEditor/QueryHeader.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { useCopyToClipboard } from 'react-use';\n\nimport { type SelectableValue } from '@grafana/data';\n\nimport { ConfirmModal } from './ConfirmModal';\nimport { DatasetSelector } from './DatasetSelector';\nimport { TableSelector } from './TableSelector';\nimport { InlineSwitch, RadioButtonGroup } from '@grafana/ui';\nimport { type QueryWithDefaults } from './defaults';\nimport { EditorField } from './EditorField';\nimport { EditorHeader } from './EditorHeader';\nimport { EditorRow } from './EditorRow';\nimport { FlexItem } from './FlexItem';\nimport { InlineSelect } from './InlineSelect';\nimport { Space } from './Space';\nimport { RunQueryButton } from './RunQueryButton';\nimport { type DB, type SQLQuery, type QueryRowFilter, EditorMode, QueryFormat, QUERY_FORMAT_OPTIONS } from './types';\nimport { getRawSqlFn } from './utils/sql.utils';\n\ninterface QueryHeaderProps {\n  db: DB;\n  defaultDataset: string;\n  enableDatasets: boolean;\n  query: QueryWithDefaults;\n  onChange: (query: SQLQuery) => void;\n  onRunQuery: () => void;\n  onQueryRowChange: (queryRowFilter: QueryRowFilter) => void;\n  queryRowFilter: QueryRowFilter;\n  isQueryRunnable: boolean;\n  labels?: Map<string, string>;\n}\n\nconst editorModes = [\n  { label: 'Builder', value: EditorMode.Builder },\n  { label: 'Code', value: EditorMode.Code },\n];\n\nexport function QueryHeader({\n  db,\n  defaultDataset,\n  enableDatasets,\n  query,\n  queryRowFilter,\n  onChange,\n  onRunQuery,\n  onQueryRowChange,\n  isQueryRunnable,\n  labels = new Map([['dataset', 'Dataset']]),\n}: QueryHeaderProps) {\n  const { editorMode } = query;\n  const [_, copyToClipboard] = useCopyToClipboard();\n  const [showConfirm, setShowConfirm] = useState(false);\n  const toRawSql = getRawSqlFn(db);\n\n  const onEditorModeChange = useCallback(\n    (newEditorMode: EditorMode) => {\n      if (editorMode === EditorMode.Code) {\n        setShowConfirm(true);\n        return;\n      }\n      onChange({ ...query, editorMode: newEditorMode });\n    },\n    [editorMode, onChange, query]\n  );\n\n  const onFormatChange = (e: SelectableValue) => {\n    const next = { ...query, format: e.value !== undefined ? e.value : QueryFormat.Table };\n    onChange(next);\n  };\n\n  const onDatasetChange = (e: SelectableValue) => {\n    if (e.value === query.dataset) {\n      return;\n    }\n\n    const next = {\n      ...query,\n      dataset: e.value,\n      table: undefined,\n      sql: undefined,\n      rawSql: '',\n    };\n\n    onChange(next);\n  };\n\n  const onTableChange = (e: SelectableValue) => {\n    if (e.value === query.table) {\n      return;\n    }\n\n    const next: SQLQuery = {\n      ...query,\n      table: e.value,\n      sql: undefined,\n      rawSql: '',\n    };\n    onChange(next);\n  };\n\n  return (\n    <>\n      <EditorHeader>\n        <InlineSelect\n          label=\"Format\"\n          value={query.format}\n          placeholder=\"Select format\"\n          menuShouldPortal\n          onChange={onFormatChange}\n          options={QUERY_FORMAT_OPTIONS}\n        />\n        {editorMode === EditorMode.Builder && (\n          <>\n            <InlineSwitch\n              id=\"sql-filter\"\n              label=\"Filter\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.filter}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, filter: ev.target.checked })\n              }\n            />\n\n            <InlineSwitch\n              id=\"sql-group\"\n              label=\"Group\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.group}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, group: ev.target.checked })\n              }\n            />\n\n            <InlineSwitch\n              id=\"sql-order\"\n              label=\"Order\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.order}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, order: ev.target.checked })\n              }\n            />\n\n            <InlineSwitch\n              id=\"sql-preview\"\n              label=\"Preview\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.preview}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, preview: ev.target.checked })\n              }\n            />\n          </>\n        )}\n\n        <FlexItem grow={1} />\n\n        <RunQueryButton queryInvalid={!isQueryRunnable} onClick={() => onRunQuery()} />\n\n        <RadioButtonGroup options={editorModes} size=\"sm\" value={editorMode} onChange={onEditorModeChange} />\n\n        <ConfirmModal\n          isOpen={showConfirm}\n          onCopy={() => {\n            setShowConfirm(false);\n            copyToClipboard(query.rawSql!);\n            onChange({\n              ...query,\n              rawSql: toRawSql(query),\n              editorMode: EditorMode.Builder,\n            });\n          }}\n          onDiscard={() => {\n            setShowConfirm(false);\n            onChange({\n              ...query,\n              rawSql: toRawSql(query),\n              editorMode: EditorMode.Builder,\n            });\n          }}\n          onCancel={() => setShowConfirm(false)}\n        />\n      </EditorHeader>\n\n      {editorMode === EditorMode.Builder && (\n        <>\n          <Space v={0.5} />\n\n          <EditorRow>\n            {enableDatasets === true && (\n              <EditorField label={labels.get('dataset') || 'Dataset'} width={25}>\n                <DatasetSelector\n                  db={db}\n                  dataset={defaultDataset}\n                  value={query.dataset === undefined ? null : query.dataset}\n                  onChange={onDatasetChange}\n                />\n              </EditorField>\n            )}\n\n            <EditorField label=\"Table\" width={25}>\n              <TableSelector\n                db={db}\n                dataset={query.dataset || defaultDataset}\n                query={query}\n                value={query.table === undefined ? null : query.table}\n                onChange={onTableChange}\n                applyDefault\n              />\n            </EditorField>\n          </EditorRow>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/QueryEditor/RunQueryButton.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Tooltip, Button } from '@grafana/ui';
+
+const RunQueryButton = ({
+  ariaLabel = "Query editor Run button",
+  queryRunning = false,
+  queryInvalid = false,
+  invalidQueryTooltip,
+  disabled = false,
+  onClick,
+  dataTestId
+}) => {
+  let icon = queryInvalid ? "exclamation-triangle" : undefined;
+  if (queryRunning) {
+    icon = "fa fa-spinner";
+  }
+  const RunButton = /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      "aria-label": ariaLabel,
+      size: "sm",
+      variant: "secondary",
+      icon,
+      disabled: disabled || queryRunning,
+      onClick,
+      "data-testid": dataTestId
+    },
+    "Run query"
+  );
+  return queryInvalid ? /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      theme: "error",
+      placement: "top",
+      content: invalidQueryTooltip != null ? invalidQueryTooltip : /* @__PURE__ */ React.createElement(React.Fragment, null, "Your query is invalid. Check below for details. ", /* @__PURE__ */ React.createElement("br", null), "However, you can still run this query.")
+    },
+    RunButton
+  ) : RunButton;
+};
+
+export { RunQueryButton };
+//# sourceMappingURL=RunQueryButton.js.map

package/dist/esm/components/QueryEditor/RunQueryButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunQueryButton.js","sources":["../../../../src/components/QueryEditor/RunQueryButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, type IconName, type PopoverContent, Tooltip } from '@grafana/ui';\n\ntype RunQueryButtonProps = {\n  ariaLabel?: string;\n  queryInvalid?: boolean;\n  invalidQueryTooltip?: PopoverContent;\n  disabled?: boolean;\n  queryRunning?: boolean;\n  onClick: () => void;\n  dataTestId?: string;\n};\n\nexport const RunQueryButton = ({\n  ariaLabel = 'Query editor Run button',\n  queryRunning = false,\n  queryInvalid = false,\n  invalidQueryTooltip,\n  disabled = false,\n  onClick,\n  dataTestId,\n}: RunQueryButtonProps) => {\n  let icon: IconName | undefined = queryInvalid ? 'exclamation-triangle' : undefined;\n  if (queryRunning) {\n    icon = 'fa fa-spinner';\n  }\n\n  const RunButton = (\n    <Button\n      aria-label={ariaLabel}\n      size=\"sm\"\n      variant=\"secondary\"\n      icon={icon}\n      disabled={disabled || queryRunning}\n      onClick={onClick}\n      data-testid={dataTestId}\n    >\n      Run query\n    </Button>\n  );\n\n  return queryInvalid ? (\n    <Tooltip\n      theme=\"error\"\n      placement=\"top\"\n      content={\n        invalidQueryTooltip ?? (\n          <>\n            Your query is invalid. Check below for details. <br />\n            However, you can still run this query.\n          </>\n        )\n      }\n    >\n      {RunButton}\n    </Tooltip>\n  ) : (\n    RunButton\n  );\n};\n"],"names":[],"mappings":";;;AAaO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAY,GAAA,yBAAA;AAAA,EACZ,YAAe,GAAA,KAAA;AAAA,EACf,YAAe,GAAA,KAAA;AAAA,EACf,mBAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,OAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EAAI,IAAA,IAAA,GAA6B,eAAe,sBAAyB,GAAA,SAAA;AACzE,EAAA,IAAI,YAAc,EAAA;AAChB,IAAO,IAAA,GAAA,eAAA;AAAA;AAGT,EAAA,MAAM,SACJ,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,YAAY,EAAA,SAAA;AAAA,MACZ,IAAK,EAAA,IAAA;AAAA,MACL,OAAQ,EAAA,WAAA;AAAA,MACR,IAAA;AAAA,MACA,UAAU,QAAY,IAAA,YAAA;AAAA,MACtB,OAAA;AAAA,MACA,aAAa,EAAA;AAAA,KAAA;AAAA,IACd;AAAA,GAED;AAGF,EAAA,OAAO,YACL,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,OAAA;AAAA,MACN,SAAU,EAAA,KAAA;AAAA,MACV,SACE,mBACE,IAAA,IAAA,GAAA,mBAAA,mBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAE,oEACiD,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAG,GAAE,wCAExD;AAAA,KAAA;AAAA,IAIH;AAAA,GAGH,GAAA,SAAA;AAEJ;;;;"}

package/dist/esm/components/QueryEditor/Space.js

@@ -0,0 +1,35 @@
+import { css, cx } from '@emotion/css';
+import React from 'react';
+import '@grafana/data';
+import { stylesFactory, useTheme2 } from '@grafana/ui';
+
+const Space = (props) => {
+  const theme = useTheme2();
+  const styles = getStyles(theme, props);
+  return /* @__PURE__ */ React.createElement("span", { className: cx(styles.wrapper) });
+};
+Space.defaultProps = {
+  v: 0,
+  h: 0,
+  layout: "block"
+};
+const getStyles = stylesFactory((theme, props) => {
+  var _a, _b;
+  return {
+    wrapper: css([
+      {
+        paddingRight: theme.spacing((_a = props.h) != null ? _a : 0),
+        paddingBottom: theme.spacing((_b = props.v) != null ? _b : 0)
+      },
+      props.layout === "inline" && {
+        display: "inline-block"
+      },
+      props.layout === "block" && {
+        display: "block"
+      }
+    ])
+  };
+});
+
+export { Space };
+//# sourceMappingURL=Space.js.map

package/dist/esm/components/QueryEditor/Space.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Space.js","sources":["../../../../src/components/QueryEditor/Space.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { useTheme2, stylesFactory } from '@grafana/ui';\n\nexport interface SpaceProps {\n  v?: number;\n  h?: number;\n  layout?: 'block' | 'inline';\n}\n\nexport const Space = (props: SpaceProps) => {\n  const theme = useTheme2();\n  const styles = getStyles(theme, props);\n\n  return <span className={cx(styles.wrapper)} />;\n};\n\nSpace.defaultProps = {\n  v: 0,\n  h: 0,\n  layout: 'block',\n};\n\nconst getStyles = stylesFactory((theme: GrafanaTheme2, props: SpaceProps) => ({\n  wrapper: css([\n    {\n      paddingRight: theme.spacing(props.h ?? 0),\n      paddingBottom: theme.spacing(props.v ?? 0),\n    },\n    props.layout === 'inline' && {\n      display: 'inline-block',\n    },\n    props.layout === 'block' && {\n      display: 'block',\n    },\n  ]),\n}));\n"],"names":[],"mappings":";;;;;AAYa,MAAA,KAAA,GAAQ,CAAC,KAAsB,KAAA;AAC1C,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,KAAA,EAAO,KAAK,CAAA;AAErC,EAAA,2CAAQ,MAAK,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,OAAO,CAAG,EAAA,CAAA;AAC9C;AAEA,KAAA,CAAM,YAAe,GAAA;AAAA,EACnB,CAAG,EAAA,CAAA;AAAA,EACH,CAAG,EAAA,CAAA;AAAA,EACH,MAAQ,EAAA;AACV,CAAA;AAEA,MAAM,SAAY,GAAA,aAAA,CAAc,CAAC,KAAA,EAAsB,KAAmB,KAAA;AAzB1E,EAAA,IAAA,EAAA,EAAA,EAAA;AAyB8E,EAAA,OAAA;AAAA,IAC5E,SAAS,GAAI,CAAA;AAAA,MACX;AAAA,QACE,cAAc,KAAM,CAAA,OAAA,CAAA,CAAQ,EAAM,GAAA,KAAA,CAAA,CAAA,KAAN,YAAW,CAAC,CAAA;AAAA,QACxC,eAAe,KAAM,CAAA,OAAA,CAAA,CAAQ,EAAM,GAAA,KAAA,CAAA,CAAA,KAAN,YAAW,CAAC;AAAA,OAC3C;AAAA,MACA,KAAA,CAAM,WAAW,QAAY,IAAA;AAAA,QAC3B,OAAS,EAAA;AAAA,OACX;AAAA,MACA,KAAA,CAAM,WAAW,OAAW,IAAA;AAAA,QAC1B,OAAS,EAAA;AAAA;AACX,KACD;AAAA,GACH;AAAA,CAAE,CAAA;;;;"}

package/dist/esm/components/QueryEditor/TableSelector.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useAsync } from 'react-use';
+import { toOption } from '@grafana/data';
+import { Select } from '@grafana/ui';
+import './types.js';
+import 'lodash';
+
+const TableSelector = ({ db, dataset, value, className, onChange }) => {
+  const state = useAsync(async () => {
+    if (!dataset) {
+      return [];
+    }
+    const tables = await db.tables(dataset);
+    return tables.map(toOption);
+  }, [dataset]);
+  return /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      className,
+      disabled: state.loading,
+      "aria-label": "Table selector",
+      value,
+      options: state.value,
+      onChange,
+      isLoading: state.loading,
+      menuShouldPortal: true,
+      placeholder: state.loading ? "Loading tables" : "Select table"
+    }
+  );
+};
+
+export { TableSelector };
+//# sourceMappingURL=TableSelector.js.map

package/dist/esm/components/QueryEditor/TableSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSelector.js","sources":["../../../../src/components/QueryEditor/TableSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\n\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { Select } from '@grafana/ui';\nimport { type DB, type ResourceSelectorProps } from './types';\nimport { type QueryWithDefaults } from './defaults';\n\ninterface TableSelectorProps extends ResourceSelectorProps {\n  db: DB;\n  dataset: string;\n  value: string | null;\n  query: QueryWithDefaults;\n  onChange: (v: SelectableValue) => void;\n}\n\nexport const TableSelector = ({ db, dataset, value, className, onChange }: TableSelectorProps) => {\n  const state = useAsync(async () => {\n    if (!dataset) {\n      return [];\n    }\n\n    const tables = await db.tables(dataset);\n    return tables.map(toOption);\n  }, [dataset]);\n\n  return (\n    <Select\n      className={className}\n      disabled={state.loading}\n      aria-label=\"Table selector\"\n      value={value}\n      options={state.value}\n      onChange={onChange}\n      isLoading={state.loading}\n      menuShouldPortal={true}\n      placeholder={state.loading ? 'Loading tables' : 'Select table'}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAgBa,MAAA,aAAA,GAAgB,CAAC,EAAE,EAAA,EAAI,SAAS,KAAO,EAAA,SAAA,EAAW,UAAmC,KAAA;AAChG,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAO,EAAC;AAAA;AAGV,IAAA,MAAM,MAAS,GAAA,MAAM,EAAG,CAAA,MAAA,CAAO,OAAO,CAAA;AACtC,IAAO,OAAA,MAAA,CAAO,IAAI,QAAQ,CAAA;AAAA,GAC5B,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,UAAU,KAAM,CAAA,OAAA;AAAA,MAChB,YAAW,EAAA,gBAAA;AAAA,MACX,KAAA;AAAA,MACA,SAAS,KAAM,CAAA,KAAA;AAAA,MACf,QAAA;AAAA,MACA,WAAW,KAAM,CAAA,OAAA;AAAA,MACjB,gBAAkB,EAAA,IAAA;AAAA,MAClB,WAAA,EAAa,KAAM,CAAA,OAAA,GAAU,gBAAmB,GAAA;AAAA;AAAA,GAClD;AAEJ;;;;"}

package/dist/esm/components/QueryEditor/defaults.js

@@ -0,0 +1,25 @@
+import { EditorMode, QueryFormat } from './types.js';
+import { createFunctionField, setGroupByField } from './utils/sql.utils.js';
+
+function applyQueryDefaults(q) {
+  let editorMode = (q == null ? undefined : q.editorMode) || EditorMode.Builder;
+  if ((q == null ? undefined : q.editorMode) === undefined && (q == null ? undefined : q.rawSql) !== undefined) {
+    editorMode = EditorMode.Code;
+  }
+  const result = {
+    ...q,
+    refId: (q == null ? undefined : q.refId) || "A",
+    format: (q == null ? undefined : q.format) !== undefined ? q.format : QueryFormat.Table,
+    rawSql: (q == null ? undefined : q.rawSql) || "",
+    editorMode,
+    sql: (q == null ? undefined : q.sql) || {
+      columns: [createFunctionField()],
+      groupBy: [setGroupByField()],
+      limit: 50
+    }
+  };
+  return result;
+}
+
+export { applyQueryDefaults };
+//# sourceMappingURL=defaults.js.map

package/dist/esm/components/QueryEditor/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sources":["../../../../src/components/QueryEditor/defaults.ts"],"sourcesContent":["import { EditorMode, QueryFormat, type SQLQuery } from './types';\nimport { createFunctionField, setGroupByField } from './utils/sql.utils';\n\nexport function applyQueryDefaults(q?: SQLQuery): SQLQuery {\n  let editorMode = q?.editorMode || EditorMode.Builder;\n\n  // Switching to code editor if the query was created before visual query builder was introduced.\n  if (q?.editorMode === undefined && q?.rawSql !== undefined) {\n    editorMode = EditorMode.Code;\n  }\n\n  const result: SQLQuery = {\n    ...q,\n    refId: q?.refId || 'A',\n    format: q?.format !== undefined ? q.format : QueryFormat.Table,\n    rawSql: q?.rawSql || '',\n    editorMode,\n    sql: q?.sql || {\n      columns: [createFunctionField()],\n      groupBy: [setGroupByField()],\n      limit: 50,\n    },\n  };\n\n  return result;\n}\n\nexport type QueryWithDefaults = ReturnType<typeof applyQueryDefaults>;\n"],"names":[],"mappings":";;;AAGO,SAAS,mBAAmB,CAAwB,EAAA;AACzD,EAAI,IAAA,UAAA,GAAA,CAAa,CAAG,IAAA,IAAA,GAAA,SAAA,GAAA,CAAA,CAAA,UAAA,KAAc,UAAW,CAAA,OAAA;AAG7C,EAAA,IAAA,CAAI,CAAG,IAAA,IAAA,GAAA,SAAA,GAAA,CAAA,CAAA,UAAA,MAAe,SAAa,IAAA,CAAA,CAAA,IAAA,IAAA,GAAA,SAAA,GAAA,CAAA,CAAG,YAAW,SAAW,EAAA;AAC1D,IAAA,UAAA,GAAa,UAAW,CAAA,IAAA;AAAA;AAG1B,EAAA,MAAM,MAAmB,GAAA;AAAA,IACvB,GAAG,CAAA;AAAA,IACH,KAAA,EAAA,CAAO,0BAAG,KAAS,KAAA,GAAA;AAAA,IACnB,SAAQ,CAAG,IAAA,IAAA,GAAA,SAAA,GAAA,CAAA,CAAA,MAAA,MAAW,SAAY,GAAA,CAAA,CAAE,SAAS,WAAY,CAAA,KAAA;AAAA,IACzD,MAAA,EAAA,CAAQ,0BAAG,MAAU,KAAA,EAAA;AAAA,IACrB,UAAA;AAAA,IACA,GAAA,EAAA,CAAK,0BAAG,GAAO,KAAA;AAAA,MACb,OAAA,EAAS,CAAC,mBAAA,EAAqB,CAAA;AAAA,MAC/B,OAAA,EAAS,CAAC,eAAA,EAAiB,CAAA;AAAA,MAC3B,KAAO,EAAA;AAAA;AACT,GACF;AAEA,EAAO,OAAA,MAAA;AACT;;;;"}

package/dist/esm/components/QueryEditor/expressions.js

@@ -0,0 +1,17 @@
+var QueryEditorPropertyType = /* @__PURE__ */ ((QueryEditorPropertyType2) => {
+  QueryEditorPropertyType2["String"] = "string";
+  return QueryEditorPropertyType2;
+})(QueryEditorPropertyType || {});
+var QueryEditorExpressionType = /* @__PURE__ */ ((QueryEditorExpressionType2) => {
+  QueryEditorExpressionType2["Property"] = "property";
+  QueryEditorExpressionType2["Operator"] = "operator";
+  QueryEditorExpressionType2["Or"] = "or";
+  QueryEditorExpressionType2["And"] = "and";
+  QueryEditorExpressionType2["GroupBy"] = "groupBy";
+  QueryEditorExpressionType2["Function"] = "function";
+  QueryEditorExpressionType2["FunctionParameter"] = "functionParameter";
+  return QueryEditorExpressionType2;
+})(QueryEditorExpressionType || {});
+
+export { QueryEditorExpressionType, QueryEditorPropertyType };
+//# sourceMappingURL=expressions.js.map

package/dist/esm/components/QueryEditor/expressions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expressions.js","sources":["../../../../src/components/QueryEditor/expressions.ts"],"sourcesContent":["export enum QueryEditorPropertyType {\n  String = 'string',\n}\n\nexport interface QueryEditorProperty {\n  type: QueryEditorPropertyType;\n  name?: string;\n}\n\nexport type QueryEditorOperatorType = string | boolean | number;\ntype QueryEditorOperatorValueType = QueryEditorOperatorType | QueryEditorOperatorType[];\n\nexport interface QueryEditorOperator<T extends QueryEditorOperatorValueType> {\n  name?: string;\n  value?: T;\n}\n\nexport interface QueryEditorOperatorExpression {\n  type: QueryEditorExpressionType.Operator;\n  property: QueryEditorProperty;\n  operator: QueryEditorOperator<QueryEditorOperatorValueType>;\n}\n\nexport interface QueryEditorArrayExpression {\n  type: QueryEditorExpressionType.And | QueryEditorExpressionType.Or;\n  expressions: QueryEditorExpression[] | QueryEditorArrayExpression[];\n}\n\nexport interface QueryEditorPropertyExpression {\n  type: QueryEditorExpressionType.Property;\n  property: QueryEditorProperty;\n}\n\nexport enum QueryEditorExpressionType {\n  Property = 'property',\n  Operator = 'operator',\n  Or = 'or',\n  And = 'and',\n  GroupBy = 'groupBy',\n  Function = 'function',\n  FunctionParameter = 'functionParameter',\n}\n\nexport type QueryEditorExpression =\n  | QueryEditorArrayExpression\n  | QueryEditorPropertyExpression\n  | QueryEditorGroupByExpression\n  | QueryEditorFunctionExpression\n  | QueryEditorFunctionParameterExpression\n  | QueryEditorOperatorExpression;\n\nexport interface QueryEditorGroupByExpression {\n  type: QueryEditorExpressionType.GroupBy;\n  property: QueryEditorProperty;\n}\n\nexport interface QueryEditorFunctionExpression {\n  type: QueryEditorExpressionType.Function;\n  name?: string;\n  parameters?: QueryEditorFunctionParameterExpression[];\n}\n\nexport interface QueryEditorFunctionParameterExpression {\n  type: QueryEditorExpressionType.FunctionParameter;\n  name?: string;\n}\n"],"names":["QueryEditorPropertyType","QueryEditorExpressionType"],"mappings":"AAAY,IAAA,uBAAA,qBAAAA,wBAAL,KAAA;AACL,EAAAA,yBAAA,QAAS,CAAA,GAAA,QAAA;AADC,EAAAA,OAAAA,wBAAAA;AAAA,CAAA,EAAA,uBAAA,IAAA,EAAA;AAiCA,IAAA,yBAAA,qBAAAC,0BAAL,KAAA;AACL,EAAAA,2BAAA,UAAW,CAAA,GAAA,UAAA;AACX,EAAAA,2BAAA,UAAW,CAAA,GAAA,UAAA;AACX,EAAAA,2BAAA,IAAK,CAAA,GAAA,IAAA;AACL,EAAAA,2BAAA,KAAM,CAAA,GAAA,KAAA;AACN,EAAAA,2BAAA,SAAU,CAAA,GAAA,SAAA;AACV,EAAAA,2BAAA,UAAW,CAAA,GAAA,UAAA;AACX,EAAAA,2BAAA,mBAAoB,CAAA,GAAA,mBAAA;AAPV,EAAAA,OAAAA,0BAAAA;AAAA,CAAA,EAAA,yBAAA,IAAA,EAAA;;;;"}

package/dist/esm/components/QueryEditor/query-editor-raw/QueryEditorRaw.js

@@ -0,0 +1,39 @@
+import React, { useRef, useEffect, useCallback } from 'react';
+import '../types.js';
+import { formatSQL } from '../utils/formatSQL.js';
+import { SQLEditor } from '../../SQLEditor/components/SQLEditor.js';
+import '@grafana/ui';
+import '@grafana/data';
+import '../../SQLEditor/standardSql/macros.js';
+
+function QueryEditorRaw({ children, onChange, query, width, height, completionProvider }) {
+  const queryRef = useRef(query);
+  useEffect(() => {
+    queryRef.current = query;
+  }, [query]);
+  const onRawQueryChange = useCallback(
+    (rawSql, processQuery) => {
+      const newQuery = {
+        ...queryRef.current,
+        rawQuery: true,
+        rawSql
+      };
+      onChange(newQuery, processQuery);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ React.createElement(
+    SQLEditor,
+    {
+      width,
+      height,
+      query: query.rawSql,
+      onChange: onRawQueryChange,
+      language: { id: "sql", completionProvider, formatter: formatSQL }
+    },
+    children
+  );
+}
+
+export { QueryEditorRaw };
+//# sourceMappingURL=QueryEditorRaw.js.map

package/dist/esm/components/QueryEditor/query-editor-raw/QueryEditorRaw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryEditorRaw.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryEditorRaw.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\n\nimport { type SQLQuery } from '../types';\n\nimport { formatSQL } from '../utils/formatSQL';\nimport { type LanguageCompletionProvider, SQLEditor } from '../../SQLEditor';\n\ntype Props = {\n  query: SQLQuery;\n  onChange: (value: SQLQuery, processQuery: boolean) => void;\n  children?: (props: { formatQuery: () => void }) => React.ReactNode;\n  width?: number;\n  height?: number;\n  completionProvider: LanguageCompletionProvider;\n};\n\nexport function QueryEditorRaw({ children, onChange, query, width, height, completionProvider }: Props) {\n  // We need to pass query via ref to SQLEditor as onChange is executed via monacoEditor.onDidChangeModelContent callback, not onChange property\n  const queryRef = useRef<SQLQuery>(query);\n  useEffect(() => {\n    queryRef.current = query;\n  }, [query]);\n\n  const onRawQueryChange = useCallback(\n    (rawSql: string, processQuery: boolean) => {\n      const newQuery = {\n        ...queryRef.current,\n        rawQuery: true,\n        rawSql,\n      };\n      onChange(newQuery, processQuery);\n    },\n    [onChange]\n  );\n\n  return (\n    <SQLEditor\n      width={width}\n      height={height}\n      query={query.rawSql!}\n      onChange={onRawQueryChange}\n      language={{ id: 'sql', completionProvider, formatter: formatSQL }}\n    >\n      {children}\n    </SQLEditor>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAgBgB,SAAA,cAAA,CAAe,EAAE,QAAU,EAAA,QAAA,EAAU,OAAO,KAAO,EAAA,MAAA,EAAQ,oBAA6B,EAAA;AAEtG,EAAM,MAAA,QAAA,GAAW,OAAiB,KAAK,CAAA;AACvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,OAAU,GAAA,KAAA;AAAA,GACrB,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,QAAgB,YAA0B,KAAA;AACzC,MAAA,MAAM,QAAW,GAAA;AAAA,QACf,GAAG,QAAS,CAAA,OAAA;AAAA,QACZ,QAAU,EAAA,IAAA;AAAA,QACV;AAAA,OACF;AACA,MAAA,QAAA,CAAS,UAAU,YAAY,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAO,KAAM,CAAA,MAAA;AAAA,MACb,QAAU,EAAA,gBAAA;AAAA,MACV,UAAU,EAAE,EAAA,EAAI,KAAO,EAAA,kBAAA,EAAoB,WAAW,SAAU;AAAA,KAAA;AAAA,IAE/D;AAAA,GACH;AAEJ;;;;"}

package/dist/esm/components/QueryEditor/query-editor-raw/QueryToolbox.js

@@ -0,0 +1,63 @@
+import { css } from '@emotion/css';
+import React, { useState, useMemo } from 'react';
+import { useTheme2, HorizontalGroup, IconButton, Tooltip, Icon } from '@grafana/ui';
+import { QueryValidator } from './QueryValidator.js';
+
+function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...validatorProps }) {
+  const theme = useTheme2();
+  const [validationResult, setValidationResult] = useState();
+  const styles = useMemo(() => {
+    return {
+      container: css`
+        border: 1px solid ${theme.colors.border.medium};
+        border-top: none;
+        padding: ${theme.spacing(0.5, 0.5, 0.5, 0.5)};
+        display: flex;
+        flex-grow: 1;
+        justify-content: space-between;
+        font-size: ${theme.typography.bodySmall.fontSize};
+      `,
+      error: css`
+        color: ${theme.colors.error.text};
+        font-size: ${theme.typography.bodySmall.fontSize};
+        font-family: ${theme.typography.fontFamilyMonospace};
+      `,
+      valid: css`
+        color: ${theme.colors.success.text};
+      `,
+      info: css`
+        color: ${theme.colors.text.secondary};
+      `,
+      hint: css`
+        color: ${theme.colors.text.disabled};
+        white-space: nowrap;
+        cursor: help;
+      `
+    };
+  }, [theme]);
+  let style = {};
+  if (!showTools && validationResult === undefined) {
+    style = { height: 0, padding: 0, visibility: "hidden" };
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: styles.container, style }, /* @__PURE__ */ React.createElement("div", null, validatorProps.onValidate && /* @__PURE__ */ React.createElement(
+    QueryValidator,
+    {
+      ...validatorProps,
+      onValidate: (result) => {
+        setValidationResult(result);
+        validatorProps.onValidate(result);
+      }
+    }
+  )), showTools && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(HorizontalGroup, { spacing: "sm" }, onFormatCode && /* @__PURE__ */ React.createElement(IconButton, { onClick: onFormatCode, name: "brackets-curly", size: "xs", tooltip: "Format query" }), onExpand && /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      onClick: () => onExpand(!isExpanded),
+      name: isExpanded ? "angle-up" : "angle-down",
+      size: "xs",
+      tooltip: isExpanded ? "Collapse editor" : "Expand editor"
+    }
+  ), /* @__PURE__ */ React.createElement(Tooltip, { content: "Hit CTRL/CMD+Return to run query" }, /* @__PURE__ */ React.createElement(Icon, { className: styles.hint, name: "keyboard" })))));
+}
+
+export { QueryToolbox };
+//# sourceMappingURL=QueryToolbox.js.map

package/dist/esm/components/QueryEditor/query-editor-raw/QueryToolbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryToolbox.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryToolbox.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useMemo, useState } from 'react';\n\nimport { HorizontalGroup, Icon, IconButton, Tooltip, useTheme2 } from '@grafana/ui';\n\nimport { QueryValidator, type QueryValidatorProps } from './QueryValidator';\n\ninterface QueryToolboxProps extends Omit<QueryValidatorProps, 'onValidate'> {\n  showTools?: boolean;\n  isExpanded?: boolean;\n  onFormatCode?: () => void;\n  onExpand?: (expand: boolean) => void;\n  onValidate?: (isValid: boolean) => void;\n}\n\nexport function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...validatorProps }: QueryToolboxProps) {\n  const theme = useTheme2();\n  const [validationResult, setValidationResult] = useState<boolean>();\n\n  const styles = useMemo(() => {\n    return {\n      container: css`\n        border: 1px solid ${theme.colors.border.medium};\n        border-top: none;\n        padding: ${theme.spacing(0.5, 0.5, 0.5, 0.5)};\n        display: flex;\n        flex-grow: 1;\n        justify-content: space-between;\n        font-size: ${theme.typography.bodySmall.fontSize};\n      `,\n      error: css`\n        color: ${theme.colors.error.text};\n        font-size: ${theme.typography.bodySmall.fontSize};\n        font-family: ${theme.typography.fontFamilyMonospace};\n      `,\n      valid: css`\n        color: ${theme.colors.success.text};\n      `,\n      info: css`\n        color: ${theme.colors.text.secondary};\n      `,\n      hint: css`\n        color: ${theme.colors.text.disabled};\n        white-space: nowrap;\n        cursor: help;\n      `,\n    };\n  }, [theme]);\n\n  let style = {};\n\n  if (!showTools && validationResult === undefined) {\n    style = { height: 0, padding: 0, visibility: 'hidden' };\n  }\n\n  return (\n    <div className={styles.container} style={style}>\n      <div>\n        {validatorProps.onValidate && (\n          <QueryValidator\n            {...validatorProps}\n            onValidate={(result: boolean) => {\n              setValidationResult(result);\n              validatorProps.onValidate!(result);\n            }}\n          />\n        )}\n      </div>\n      {showTools && (\n        <div>\n          <HorizontalGroup spacing=\"sm\">\n            {onFormatCode && (\n              <IconButton onClick={onFormatCode} name=\"brackets-curly\" size=\"xs\" tooltip=\"Format query\" />\n            )}\n            {onExpand && (\n              <IconButton\n                onClick={() => onExpand(!isExpanded)}\n                name={isExpanded ? 'angle-up' : 'angle-down'}\n                size=\"xs\"\n                tooltip={isExpanded ? 'Collapse editor' : 'Expand editor'}\n              />\n            )}\n            <Tooltip content=\"Hit CTRL/CMD+Return to run query\">\n              <Icon className={styles.hint} name=\"keyboard\" />\n            </Tooltip>\n          </HorizontalGroup>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/QueryEditor/query-editor-raw/QueryValidator.js

@@ -0,0 +1,72 @@
+import { css } from '@emotion/css';
+import React, { useState, useMemo, useEffect } from 'react';
+import { useAsyncFn, useDebounce } from 'react-use';
+import { getValueFormat, formattedValueToString } from '@grafana/data';
+import { useTheme2, Spinner, Icon } from '@grafana/ui';
+import '../types.js';
+
+function QueryValidator({ db, query, onValidate, range }) {
+  var _a;
+  const [validationResult, setValidationResult] = useState();
+  const theme = useTheme2();
+  const valueFormatter = useMemo(() => getValueFormat("bytes"), []);
+  const styles = useMemo(() => {
+    return {
+      error: css`
+        color: ${theme.colors.error.text};
+        font-size: ${theme.typography.bodySmall.fontSize};
+        font-family: ${theme.typography.fontFamilyMonospace};
+      `,
+      valid: css`
+        color: ${theme.colors.success.text};
+      `,
+      info: css`
+        color: ${theme.colors.text.secondary};
+      `
+    };
+  }, [theme]);
+  const [state, validateQuery] = useAsyncFn(
+    async (q) => {
+      var _a2;
+      if (((_a2 = q.rawSql) == null ? undefined : _a2.trim()) === "") {
+        return null;
+      }
+      return await db.validateQuery(q, range);
+    },
+    [db]
+  );
+  useDebounce(
+    async () => {
+      const result = await validateQuery(query);
+      if (result) {
+        setValidationResult(result);
+      }
+      return null;
+    },
+    1e3,
+    [query, validateQuery]
+  );
+  useEffect(() => {
+    if (validationResult == null ? undefined : validationResult.isError) {
+      onValidate(false);
+    }
+    if (validationResult == null ? undefined : validationResult.isValid) {
+      onValidate(true);
+    }
+  }, [validationResult, onValidate]);
+  if (!state.value && !state.loading) {
+    return null;
+  }
+  const error = ((_a = state.value) == null ? undefined : _a.error) ? processErrorMessage(state.value.error) : "";
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, state.loading && /* @__PURE__ */ React.createElement("div", { className: styles.info }, /* @__PURE__ */ React.createElement(Spinner, { inline: true, size: 12 }), " Validating query..."), !state.loading && state.value && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(React.Fragment, null, state.value.isValid && state.value.statistics && /* @__PURE__ */ React.createElement("div", { className: styles.valid }, /* @__PURE__ */ React.createElement(Icon, { name: "check" }), " This query will process", " ", /* @__PURE__ */ React.createElement("strong", null, formattedValueToString(valueFormatter(state.value.statistics.TotalBytesProcessed))), " ", "when run.")), /* @__PURE__ */ React.createElement(React.Fragment, null, state.value.isError && /* @__PURE__ */ React.createElement("div", { className: styles.error }, error))));
+}
+function processErrorMessage(error) {
+  const splat = error.split(":");
+  if (splat.length > 2) {
+    return splat.slice(2).join(":");
+  }
+  return error;
+}
+
+export { QueryValidator };
+//# sourceMappingURL=QueryValidator.js.map

package/dist/esm/components/QueryEditor/query-editor-raw/QueryValidator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryValidator.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryValidator.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useState, useMemo, useEffect } from 'react';\nimport { useAsyncFn, useDebounce } from 'react-use';\nimport { formattedValueToString, getValueFormat, type TimeRange } from '@grafana/data';\nimport { Icon, Spinner, useTheme2 } from '@grafana/ui';\nimport { type DB, type SQLQuery, type ValidationResults } from '../types';\n\nexport interface QueryValidatorProps {\n  db: DB;\n  query: SQLQuery;\n  range?: TimeRange;\n  onValidate: (isValid: boolean) => void;\n}\n\nexport function QueryValidator({ db, query, onValidate, range }: QueryValidatorProps) {\n  const [validationResult, setValidationResult] = useState<ValidationResults | null>();\n  const theme = useTheme2();\n  const valueFormatter = useMemo(() => getValueFormat('bytes'), []);\n\n  const styles = useMemo(() => {\n    return {\n      error: css`\n        color: ${theme.colors.error.text};\n        font-size: ${theme.typography.bodySmall.fontSize};\n        font-family: ${theme.typography.fontFamilyMonospace};\n      `,\n      valid: css`\n        color: ${theme.colors.success.text};\n      `,\n      info: css`\n        color: ${theme.colors.text.secondary};\n      `,\n    };\n  }, [theme]);\n\n  const [state, validateQuery] = useAsyncFn(\n    async (q: SQLQuery) => {\n      if (q.rawSql?.trim() === '') {\n        return null;\n      }\n\n      return await db.validateQuery(q, range);\n    },\n    [db]\n  );\n\n  const [,] = useDebounce(\n    async () => {\n      const result = await validateQuery(query);\n      if (result) {\n        setValidationResult(result);\n      }\n\n      return null;\n    },\n    1000,\n    [query, validateQuery]\n  );\n\n  useEffect(() => {\n    if (validationResult?.isError) {\n      onValidate(false);\n    }\n    if (validationResult?.isValid) {\n      onValidate(true);\n    }\n  }, [validationResult, onValidate]);\n\n  if (!state.value && !state.loading) {\n    return null;\n  }\n\n  const error = state.value?.error ? processErrorMessage(state.value.error) : '';\n\n  return (\n    <>\n      {state.loading && (\n        <div className={styles.info}>\n          <Spinner inline={true} size={12} /> Validating query...\n        </div>\n      )}\n      {!state.loading && state.value && (\n        <>\n          <>\n            {state.value.isValid && state.value.statistics && (\n              <div className={styles.valid}>\n                <Icon name=\"check\" /> This query will process{' '}\n                <strong>{formattedValueToString(valueFormatter(state.value.statistics.TotalBytesProcessed))}</strong>{' '}\n                when run.\n              </div>\n            )}\n          </>\n\n          <>{state.value.isError && <div className={styles.error}>{error}</div>}</>\n        </>\n      )}\n    </>\n  );\n}\n\nfunction processErrorMessage(error: string) {\n  const splat = error.split(':');\n  if (splat.length > 2) {\n    return splat.slice(2).join(':');\n  }\n  return error;\n}\n"],"names":["_a"],"mappings":";;;;;;;AAcO,SAAS,eAAe,EAAE,EAAA,EAAI,KAAO,EAAA,UAAA,EAAY,OAA8B,EAAA;AAdtF,EAAA,IAAA,EAAA;AAeE,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,QAAmC,EAAA;AACnF,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAA,MAAM,iBAAiB,OAAQ,CAAA,MAAM,eAAe,OAAO,CAAA,EAAG,EAAE,CAAA;AAEhE,EAAM,MAAA,MAAA,GAAS,QAAQ,MAAM;AAC3B,IAAO,OAAA;AAAA,MACL,KAAO,EAAA,GAAA;AAAA,eACI,EAAA,KAAA,CAAM,MAAO,CAAA,KAAA,CAAM,IAAI,CAAA;AAAA,mBACnB,EAAA,KAAA,CAAM,UAAW,CAAA,SAAA,CAAU,QAAQ,CAAA;AAAA,qBACjC,EAAA,KAAA,CAAM,WAAW,mBAAmB,CAAA;AAAA,MAAA,CAAA;AAAA,MAErD,KAAO,EAAA,GAAA;AAAA,eACI,EAAA,KAAA,CAAM,MAAO,CAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,MAAA,CAAA;AAAA,MAEpC,IAAM,EAAA,GAAA;AAAA,eACK,EAAA,KAAA,CAAM,MAAO,CAAA,IAAA,CAAK,SAAS,CAAA;AAAA,MAAA;AAAA,KAExC;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAM,MAAA,CAAC,KAAO,EAAA,aAAa,CAAI,GAAA,UAAA;AAAA,IAC7B,OAAO,CAAgB,KAAA;AApC3B,MAAAA,IAAAA,GAAAA;AAqCM,MAAA,IAAA,CAAA,CAAIA,MAAA,CAAE,CAAA,MAAA,KAAF,IAAAA,GAAAA,SAAAA,GAAAA,GAAAA,CAAU,YAAW,EAAI,EAAA;AAC3B,QAAO,OAAA,IAAA;AAAA;AAGT,MAAA,OAAO,MAAM,EAAA,CAAG,aAAc,CAAA,CAAA,EAAG,KAAK,CAAA;AAAA,KACxC;AAAA,IACA,CAAC,EAAE;AAAA,GACL;AAEA,EAAY,WAAA;AAAA,IACV,YAAY;AACV,MAAM,MAAA,MAAA,GAAS,MAAM,aAAA,CAAc,KAAK,CAAA;AACxC,MAAA,IAAI,MAAQ,EAAA;AACV,QAAA,mBAAA,CAAoB,MAAM,CAAA;AAAA;AAG5B,MAAO,OAAA,IAAA;AAAA,KACT;AAAA,IACA,GAAA;AAAA,IACA,CAAC,OAAO,aAAa;AAAA;AAGvB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,wDAAkB,OAAS,EAAA;AAC7B,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA;AAElB,IAAA,IAAI,wDAAkB,OAAS,EAAA;AAC7B,MAAA,UAAA,CAAW,IAAI,CAAA;AAAA;AACjB,GACC,EAAA,CAAC,gBAAkB,EAAA,UAAU,CAAC,CAAA;AAEjC,EAAA,IAAI,CAAC,KAAA,CAAM,KAAS,IAAA,CAAC,MAAM,OAAS,EAAA;AAClC,IAAO,OAAA,IAAA;AAAA;AAGT,EAAM,MAAA,KAAA,GAAA,CAAA,CAAQ,WAAM,KAAN,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAa,SAAQ,mBAAoB,CAAA,KAAA,CAAM,KAAM,CAAA,KAAK,CAAI,GAAA,EAAA;AAE5E,EAAA,uBAEK,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,KAAA,CAAM,OACL,oBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,IACrB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,MAAA,EAAQ,IAAM,EAAA,IAAA,EAAM,IAAI,CAAE,EAAA,sBACrC,CAED,EAAA,CAAC,KAAM,CAAA,OAAA,IAAW,KAAM,CAAA,KAAA,8EAGlB,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,KAAA,CAAM,KAAM,CAAA,OAAA,IAAW,KAAM,CAAA,KAAA,CAAM,UAClC,oBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,KACrB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,CAAA,EAAE,4BAAyB,GAC9C,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA,EAAA,sBAAA,CAAuB,cAAe,CAAA,KAAA,CAAM,KAAM,CAAA,UAAA,CAAW,mBAAmB,CAAC,CAAE,CAAU,EAAA,GAAA,EAAI,WAE5G,CAEJ,CAEA,kBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAG,MAAM,KAAM,CAAA,OAAA,oBAAY,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,WAAW,MAAO,CAAA,KAAA,EAAA,EAAQ,KAAM,CAAO,CACxE,CAEJ,CAAA;AAEJ;AAEA,SAAS,oBAAoB,KAAe,EAAA;AAC1C,EAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,KAAA,CAAM,GAAG,CAAA;AAC7B,EAAI,IAAA,KAAA,CAAM,SAAS,CAAG,EAAA;AACpB,IAAA,OAAO,KAAM,CAAA,KAAA,CAAM,CAAC,CAAA,CAAE,KAAK,GAAG,CAAA;AAAA;AAEhC,EAAO,OAAA,KAAA;AACT;;;;"}