@perses-dev/clickhouse-plugin 0.1.0 → 0.3.0

package/lib/cjs/queries/click-house-log-query/ClickHouseLogQueryEditor.js

@@ -23,18 +23,23 @@ Object.defineProperty(exports, "ClickHouseLogQueryEditor", {
 const _jsxruntime = require("react/jsx-runtime");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _react = require("react");
+const _immer = require("immer");
 const _constants = require("../constants");
 const _components = require("../../components");
 const _material = require("@mui/material");
 const _constants1 = require("../../components/constants");
+const _queryeditormodel = require("../query-editor-model");
 function ClickHouseLogQueryEditor(props) {
-    const { onChange, value } = props;
+    const { onChange, value, queryHandlerSettings } = props;
     const { datasource } = value;
     const selectedDatasource = datasource ?? _constants.DEFAULT_DATASOURCE;
-    const [localQuery, setLocalQuery] = (0, _react.useState)(value.query || '');
+    const { query, handleQueryChange, handleQueryBlur } = (0, _queryeditormodel.useQueryState)(props);
     const handleDatasourceChange = (newDatasourceSelection)=>{
         if (!(0, _pluginsystem.isVariableDatasource)(newDatasourceSelection) && newDatasourceSelection.kind === _constants.DATASOURCE_KIND) {
-            onChange({
+            onChange((0, _immer.produce)(value, (draft)=>{
+                draft.datasource = newDatasourceSelection;
+            }));
+            if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings.setWatchOtherSpecs({
                 ...value,
                 datasource: newDatasourceSelection
             });
@@ -42,22 +47,23 @@ function ClickHouseLogQueryEditor(props) {
         }
         throw new Error('Got unexpected non ClickHouse datasource selection');
     };
-    const handleQueryChange = (0, _react.useCallback)((newQuery)=>{
-        setLocalQuery(newQuery);
-    }, []);
-    const handleQueryExecute = (0, _react.useCallback)((query)=>{
-        onChange({
-            ...value,
-            query
-        });
-    }, [
-        onChange,
-        value
-    ]);
-    (0, _react.useEffect)(()=>{
-        setLocalQuery(value.query || '');
+    // Immediate query execution on Enter or blur
+    const handleQueryExecute = (query)=>{
+        if (queryHandlerSettings?.watchQueryChanges) {
+            queryHandlerSettings.watchQueryChanges(query);
+        }
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.query = query;
+        }));
+    };
+    const handleClickHouseQueryChange = (0, _react.useCallback)((e)=>{
+        handleQueryChange(e);
+        if (queryHandlerSettings?.watchQueryChanges) {
+            queryHandlerSettings.watchQueryChanges(e);
+        }
     }, [
-        value.query
+        handleQueryChange,
+        queryHandlerSettings
     ]);
     const examplesStyle = {
         fontSize: '11px',
@@ -80,13 +86,13 @@ function ClickHouseLogQueryEditor(props) {
                 notched: true
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ClickQLEditor, {
-                value: localQuery,
-                onChange: handleQueryChange,
-                onBlur: ()=>handleQueryExecute(localQuery),
+                value: query,
+                onChange: handleClickHouseQueryChange,
+                onBlur: queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined,
                 onKeyDown: (event)=>{
                     if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
                         event.preventDefault();
-                        handleQueryExecute(localQuery);
+                        handleQueryExecute(query);
                     }
                 },
                 placeholder: "Enter ClickHouse SQL query"

package/lib/cjs/queries/click-house-time-series-query/ClickHouseQueryEditor.js

@@ -23,18 +23,23 @@ Object.defineProperty(exports, "ClickHouseTimeSeriesQueryEditor", {
 const _jsxruntime = require("react/jsx-runtime");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _react = require("react");
+const _immer = require("immer");
 const _constants = require("../constants");
 const _components = require("../../components");
 const _material = require("@mui/material");
 const _constants1 = require("../../components/constants");
+const _queryeditormodel = require("../query-editor-model");
 function ClickHouseTimeSeriesQueryEditor(props) {
-    const { onChange, value } = props;
+    const { onChange, value, queryHandlerSettings } = props;
     const { datasource } = value;
     const selectedDatasource = datasource ?? _constants.DEFAULT_DATASOURCE;
-    const [localQuery, setLocalQuery] = (0, _react.useState)(value.query || '');
+    const { query, handleQueryChange, handleQueryBlur } = (0, _queryeditormodel.useQueryState)(props);
     const handleDatasourceChange = (newDatasourceSelection)=>{
         if (!(0, _pluginsystem.isVariableDatasource)(newDatasourceSelection) && newDatasourceSelection.kind === _constants.DATASOURCE_KIND) {
-            onChange({
+            onChange((0, _immer.produce)(value, (draft)=>{
+                draft.datasource = newDatasourceSelection;
+            }));
+            if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings.setWatchOtherSpecs({
                 ...value,
                 datasource: newDatasourceSelection
             });
@@ -42,22 +47,23 @@ function ClickHouseTimeSeriesQueryEditor(props) {
         }
         throw new Error('Got unexpected non ClickHouse datasource selection');
     };
-    const handleQueryChange = (0, _react.useCallback)((newQuery)=>{
-        setLocalQuery(newQuery);
-    }, []);
-    const handleQueryExecute = (0, _react.useCallback)((query)=>{
-        onChange({
-            ...value,
-            query
-        });
-    }, [
-        onChange,
-        value
-    ]);
-    (0, _react.useEffect)(()=>{
-        setLocalQuery(value.query || '');
+    // Immediate query execution on Enter or blur
+    const handleQueryExecute = (query)=>{
+        if (queryHandlerSettings?.watchQueryChanges) {
+            queryHandlerSettings.watchQueryChanges(query);
+        }
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.query = query;
+        }));
+    };
+    const handleClickHouseQueryChange = (0, _react.useCallback)((e)=>{
+        handleQueryChange(e);
+        if (queryHandlerSettings?.watchQueryChanges) {
+            queryHandlerSettings.watchQueryChanges(e);
+        }
     }, [
-        value.query
+        handleQueryChange,
+        queryHandlerSettings
     ]);
     const examplesStyle = {
         fontSize: '11px',
@@ -80,13 +86,13 @@ function ClickHouseTimeSeriesQueryEditor(props) {
                 notched: true
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ClickQLEditor, {
-                value: localQuery,
-                onChange: handleQueryChange,
-                onBlur: ()=>handleQueryExecute(localQuery),
+                value: query,
+                onChange: handleClickHouseQueryChange,
+                onBlur: queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined,
                 onKeyDown: (event)=>{
                     if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
                         event.preventDefault();
-                        handleQueryExecute(localQuery);
+                        handleQueryExecute(query);
                     }
                 },
                 placeholder: "Enter ClickHouse SQL query"

package/lib/cjs/queries/query-editor-model.js

@@ -0,0 +1,53 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useQueryState", {
+    enumerable: true,
+    get: function() {
+        return useQueryState;
+    }
+});
+const _react = require("react");
+const _immer = require("immer");
+function useQueryState(props) {
+    const { onChange, value } = props;
+    // Local copy of the query's value
+    const [query, setQuery] = (0, _react.useState)(value.query || '');
+    // This is basically "getDerivedStateFromProps" to make sure if spec's value changes external to this component,
+    // we render with the latest value
+    const [lastSyncedQuery, setLastSyncedQuery] = (0, _react.useState)(value.query);
+    if (value.query !== lastSyncedQuery) {
+        setQuery(value.query || '');
+        setLastSyncedQuery(value.query);
+    }
+    // Update our local state's copy as the user types
+    const handleQueryChange = (e)=>{
+        setQuery(e);
+    };
+    // Propagate changes to the query's value when the input is blurred to avoid constantly re-running queries in the
+    // PanelPreview
+    const handleQueryBlur = ()=>{
+        setLastSyncedQuery(query);
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.query = query;
+        }));
+    };
+    return {
+        query,
+        handleQueryChange,
+        handleQueryBlur
+    };
+}

package/lib/index.d.ts

@@ -1,5 +1,4 @@
 export { getPluginModule } from './getPluginModule';
-export * from './panels';
 export * from './queries';
 export * from './datasources';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC"}

package/lib/index.js

@@ -11,7 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export { getPluginModule } from './getPluginModule';
-export * from './panels';
 export * from './queries';
 export * from './datasources';
 

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport { getPluginModule } from './getPluginModule';\nexport * from './panels';\nexport * from './queries';\nexport * from './datasources';\n"],"names":["getPluginModule"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,eAAe,QAAQ,oBAAoB;AACpD,cAAc,WAAW;AACzB,cAAc,YAAY;AAC1B,cAAc,gBAAgB"}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport { getPluginModule } from './getPluginModule';\nexport * from './queries';\nexport * from './datasources';\n"],"names":["getPluginModule"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,eAAe,QAAQ,oBAAoB;AACpD,cAAc,YAAY;AAC1B,cAAc,gBAAgB"}

package/lib/model/click-house-data-types.d.ts

@@ -1,19 +1,6 @@
-import { TimeSeriesData } from '@perses-dev/core';
-export interface LogLabels {
-    [key: string]: any;
-}
-export interface LogEntry {
-    timestamp: number;
-    labels: LogLabels;
-    line?: string;
-}
-export interface LogsData {
-    entries: LogEntry[];
-    totalCount: number;
-    hasMore?: boolean;
-}
+import { LogData, TimeSeriesData } from '@perses-dev/core';
 export interface ClickHouseTimeSeriesData extends TimeSeriesData {
-    logs?: LogsData;
+    logs?: LogData;
 }
 export interface TimeSeriesEntry {
     time: string;

package/lib/model/click-house-data-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"click-house-data-types.d.ts","sourceRoot":"","sources":["../../../src/model/click-house-data-types.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,WAAW,SAAS;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC9D,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B"}
+{"version":3,"file":"click-house-data-types.d.ts","sourceRoot":"","sources":["../../../src/model/click-house-data-types.ts"],"names":[],"mappings":"AAaA,OAAO,EAAY,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAErE,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B"}

package/lib/model/click-house-data-types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/model/click-house-data-types.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TimeSeriesData } from '@perses-dev/core';\n\nexport interface LogLabels {\n  [key: string]: any;\n}\n\nexport interface LogEntry {\n  timestamp: number;\n  labels: LogLabels;\n  line?: string;\n}\n\nexport interface LogsData {\n  entries: LogEntry[];\n  totalCount: number;\n  hasMore?: boolean;\n}\n\nexport interface ClickHouseTimeSeriesData extends TimeSeriesData {\n  logs?: LogsData;\n}\n\nexport interface TimeSeriesEntry {\n  time: string;\n  log_count: number | string;\n}\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAwBjC,WAGC"}
+{"version":3,"sources":["../../../src/model/click-house-data-types.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { LogEntry, LogData, TimeSeriesData } from '@perses-dev/core';\n\nexport interface ClickHouseTimeSeriesData extends TimeSeriesData {\n  logs?: LogData;\n}\n\nexport interface TimeSeriesEntry {\n  time: string;\n  log_count: number | string;\n}\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAQjC,WAGC"}

package/lib/queries/click-house-log-query/ClickHouseLogQueryEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClickHouseLogQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/queries/click-house-log-query/ClickHouseLogQueryEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAIL,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAoC,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,KAAK,0BAA0B,GAAG,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;AAE7E,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,0BAA0B,GAAG,YAAY,CAsExF"}
+{"version":3,"file":"ClickHouseLogQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/queries/click-house-log-query/ClickHouseLogQueryEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAIL,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AAMlD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAGvE,KAAK,0BAA0B,GAAG,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;AAE7E,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,0BAA0B,GAAG,YAAY,CAoFxF"}

package/lib/queries/click-house-log-query/ClickHouseLogQueryEditor.js

@@ -12,19 +12,24 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DatasourceSelect, isVariableDatasource } from '@perses-dev/plugin-system';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback } from 'react';
+import { produce } from 'immer';
 import { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants';
 import { ClickQLEditor } from '../../components';
 import { Stack } from '@mui/material';
 import { queryExample } from '../../components/constants';
+import { useQueryState } from '../query-editor-model';
 export function ClickHouseLogQueryEditor(props) {
-    const { onChange, value } = props;
+    const { onChange, value, queryHandlerSettings } = props;
     const { datasource } = value;
     const selectedDatasource = datasource ?? DEFAULT_DATASOURCE;
-    const [localQuery, setLocalQuery] = useState(value.query || '');
+    const { query, handleQueryChange, handleQueryBlur } = useQueryState(props);
     const handleDatasourceChange = (newDatasourceSelection)=>{
         if (!isVariableDatasource(newDatasourceSelection) && newDatasourceSelection.kind === DATASOURCE_KIND) {
-            onChange({
+            onChange(produce(value, (draft)=>{
+                draft.datasource = newDatasourceSelection;
+            }));
+            if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings.setWatchOtherSpecs({
                 ...value,
                 datasource: newDatasourceSelection
             });
@@ -32,22 +37,23 @@ export function ClickHouseLogQueryEditor(props) {
         }
         throw new Error('Got unexpected non ClickHouse datasource selection');
     };
-    const handleQueryChange = useCallback((newQuery)=>{
-        setLocalQuery(newQuery);
-    }, []);
-    const handleQueryExecute = useCallback((query)=>{
-        onChange({
-            ...value,
-            query
-        });
-    }, [
-        onChange,
-        value
-    ]);
-    useEffect(()=>{
-        setLocalQuery(value.query || '');
+    // Immediate query execution on Enter or blur
+    const handleQueryExecute = (query)=>{
+        if (queryHandlerSettings?.watchQueryChanges) {
+            queryHandlerSettings.watchQueryChanges(query);
+        }
+        onChange(produce(value, (draft)=>{
+            draft.query = query;
+        }));
+    };
+    const handleClickHouseQueryChange = useCallback((e)=>{
+        handleQueryChange(e);
+        if (queryHandlerSettings?.watchQueryChanges) {
+            queryHandlerSettings.watchQueryChanges(e);
+        }
     }, [
-        value.query
+        handleQueryChange,
+        queryHandlerSettings
     ]);
     const examplesStyle = {
         fontSize: '11px',
@@ -70,13 +76,13 @@ export function ClickHouseLogQueryEditor(props) {
                 notched: true
             }),
             /*#__PURE__*/ _jsx(ClickQLEditor, {
-                value: localQuery,
-                onChange: handleQueryChange,
-                onBlur: ()=>handleQueryExecute(localQuery),
+                value: query,
+                onChange: handleClickHouseQueryChange,
+                onBlur: queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined,
                 onKeyDown: (event)=>{
                     if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
                         event.preventDefault();
-                        handleQueryExecute(localQuery);
+                        handleQueryExecute(query);
                     }
                 },
                 placeholder: "Enter ClickHouse SQL query"

package/lib/queries/click-house-log-query/ClickHouseLogQueryEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/queries/click-house-log-query/ClickHouseLogQueryEditor.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  DatasourceSelect,\n  DatasourceSelectProps,\n  isVariableDatasource,\n  OptionsEditorProps,\n} from '@perses-dev/plugin-system';\nimport { ReactElement, useCallback, useEffect, useState } from 'react';\nimport { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants';\nimport { ClickQLEditor } from '../../components';\nimport { Stack } from '@mui/material';\nimport { queryExample } from '../../components/constants';\nimport { ClickHouseLogQuerySpec } from './click-house-log-query-types';\n\ntype ClickHouseQueryEditorProps = OptionsEditorProps<ClickHouseLogQuerySpec>;\n\nexport function ClickHouseLogQueryEditor(props: ClickHouseQueryEditorProps): ReactElement {\n  const { onChange, value } = props;\n  const { datasource } = value;\n  const selectedDatasource = datasource ?? DEFAULT_DATASOURCE;\n  const [localQuery, setLocalQuery] = useState(value.query || '');\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (newDatasourceSelection) => {\n    if (!isVariableDatasource(newDatasourceSelection) && newDatasourceSelection.kind === DATASOURCE_KIND) {\n      onChange({ ...value, datasource: newDatasourceSelection });\n      return;\n    }\n    throw new Error('Got unexpected non ClickHouse datasource selection');\n  };\n\n  const handleQueryChange = useCallback((newQuery: string) => {\n    setLocalQuery(newQuery);\n  }, []);\n\n  const handleQueryExecute = useCallback(\n    (query: string) => {\n      onChange({ ...value, query });\n    },\n    [onChange, value]\n  );\n\n  useEffect(() => {\n    setLocalQuery(value.query || '');\n  }, [value.query]);\n\n  const examplesStyle: React.CSSProperties = {\n    fontSize: '11px',\n    color: '#777',\n    backgroundColor: '#f5f5f5',\n    padding: '8px',\n    borderRadius: '4px',\n    fontFamily: 'Monaco, Menlo, \"Ubuntu Mono\", monospace',\n    whiteSpace: 'pre-wrap',\n    lineHeight: '1.3',\n  };\n\n  return (\n    <Stack spacing={1.5}>\n      <DatasourceSelect\n        datasourcePluginKind={DATASOURCE_KIND}\n        value={selectedDatasource}\n        onChange={handleDatasourceChange}\n        label=\"ClickHouse Datasource\"\n        notched\n      />\n      <ClickQLEditor\n        value={localQuery}\n        onChange={handleQueryChange}\n        onBlur={() => handleQueryExecute(localQuery)}\n        onKeyDown={(event) => {\n          if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {\n            event.preventDefault();\n            handleQueryExecute(localQuery);\n          }\n        }}\n        placeholder=\"Enter ClickHouse SQL query\"\n      />\n\n      <details>\n        <summary style={{ cursor: 'pointer', fontSize: '12px', color: '#666', marginBottom: '8px' }}>\n          Query Examples\n        </summary>\n        <div style={examplesStyle}>{queryExample}</div>\n      </details>\n    </Stack>\n  );\n}\n"],"names":["DatasourceSelect","isVariableDatasource","useCallback","useEffect","useState","DATASOURCE_KIND","DEFAULT_DATASOURCE","ClickQLEditor","Stack","queryExample","ClickHouseLogQueryEditor","props","onChange","value","datasource","selectedDatasource","localQuery","setLocalQuery","query","handleDatasourceChange","newDatasourceSelection","kind","Error","handleQueryChange","newQuery","handleQueryExecute","examplesStyle","fontSize","color","backgroundColor","padding","borderRadius","fontFamily","whiteSpace","lineHeight","spacing","datasourcePluginKind","label","notched","onBlur","onKeyDown","event","key","ctrlKey","metaKey","preventDefault","placeholder","details","summary","style","cursor","marginBottom","div"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SACEA,gBAAgB,EAEhBC,oBAAoB,QAEf,4BAA4B;AACnC,SAAuBC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AACvE,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,eAAe;AACnE,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,KAAK,QAAQ,gBAAgB;AACtC,SAASC,YAAY,QAAQ,6BAA6B;AAK1D,OAAO,SAASC,yBAAyBC,KAAiC;IACxE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAC5B,MAAM,EAAEG,UAAU,EAAE,GAAGD;IACvB,MAAME,qBAAqBD,cAAcR;IACzC,MAAM,CAACU,YAAYC,cAAc,GAAGb,SAASS,MAAMK,KAAK,IAAI;IAE5D,MAAMC,yBAA4D,CAACC;QACjE,IAAI,CAACnB,qBAAqBmB,2BAA2BA,uBAAuBC,IAAI,KAAKhB,iBAAiB;YACpGO,SAAS;gBAAE,GAAGC,KAAK;gBAAEC,YAAYM;YAAuB;YACxD;QACF;QACA,MAAM,IAAIE,MAAM;IAClB;IAEA,MAAMC,oBAAoBrB,YAAY,CAACsB;QACrCP,cAAcO;IAChB,GAAG,EAAE;IAEL,MAAMC,qBAAqBvB,YACzB,CAACgB;QACCN,SAAS;YAAE,GAAGC,KAAK;YAAEK;QAAM;IAC7B,GACA;QAACN;QAAUC;KAAM;IAGnBV,UAAU;QACRc,cAAcJ,MAAMK,KAAK,IAAI;IAC/B,GAAG;QAACL,MAAMK,KAAK;KAAC;IAEhB,MAAMQ,gBAAqC;QACzCC,UAAU;QACVC,OAAO;QACPC,iBAAiB;QACjBC,SAAS;QACTC,cAAc;QACdC,YAAY;QACZC,YAAY;QACZC,YAAY;IACd;IAEA,qBACE,MAAC1B;QAAM2B,SAAS;;0BACd,KAACnC;gBACCoC,sBAAsB/B;gBACtBQ,OAAOE;gBACPH,UAAUO;gBACVkB,OAAM;gBACNC,OAAO;;0BAET,KAAC/B;gBACCM,OAAOG;gBACPJ,UAAUW;gBACVgB,QAAQ,IAAMd,mBAAmBT;gBACjCwB,WAAW,CAACC;oBACV,IAAIA,MAAMC,GAAG,KAAK,WAAYD,CAAAA,MAAME,OAAO,IAAIF,MAAMG,OAAO,AAAD,GAAI;wBAC7DH,MAAMI,cAAc;wBACpBpB,mBAAmBT;oBACrB;gBACF;gBACA8B,aAAY;;0BAGd,MAACC;;kCACC,KAACC;wBAAQC,OAAO;4BAAEC,QAAQ;4BAAWvB,UAAU;4BAAQC,OAAO;4BAAQuB,cAAc;wBAAM;kCAAG;;kCAG7F,KAACC;wBAAIH,OAAOvB;kCAAgBjB;;;;;;AAIpC"}
+{"version":3,"sources":["../../../../src/queries/click-house-log-query/ClickHouseLogQueryEditor.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  DatasourceSelect,\n  DatasourceSelectProps,\n  isVariableDatasource,\n  OptionsEditorProps,\n} from '@perses-dev/plugin-system';\nimport { ReactElement, useCallback } from 'react';\nimport { produce } from 'immer';\nimport { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants';\nimport { ClickQLEditor } from '../../components';\nimport { Stack } from '@mui/material';\nimport { queryExample } from '../../components/constants';\nimport { ClickHouseLogQuerySpec } from './click-house-log-query-types';\nimport { useQueryState } from '../query-editor-model';\n\ntype ClickHouseQueryEditorProps = OptionsEditorProps<ClickHouseLogQuerySpec>;\n\nexport function ClickHouseLogQueryEditor(props: ClickHouseQueryEditorProps): ReactElement {\n  const { onChange, value, queryHandlerSettings } = props;\n  const { datasource } = value;\n  const selectedDatasource = datasource ?? DEFAULT_DATASOURCE;\n  const { query, handleQueryChange, handleQueryBlur } = useQueryState(props);\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (newDatasourceSelection) => {\n    if (!isVariableDatasource(newDatasourceSelection) && newDatasourceSelection.kind === DATASOURCE_KIND) {\n      onChange(\n        produce(value, (draft) => {\n          draft.datasource = newDatasourceSelection;\n        })\n      );\n\n      if (queryHandlerSettings?.setWatchOtherSpecs)\n        queryHandlerSettings.setWatchOtherSpecs({ ...value, datasource: newDatasourceSelection });\n      return;\n    }\n    throw new Error('Got unexpected non ClickHouse datasource selection');\n  };\n\n  // Immediate query execution on Enter or blur\n  const handleQueryExecute = (query: string) => {\n    if (queryHandlerSettings?.watchQueryChanges) {\n      queryHandlerSettings.watchQueryChanges(query);\n    }\n    onChange(\n      produce(value, (draft) => {\n        draft.query = query;\n      })\n    );\n  };\n\n  const handleClickHouseQueryChange = useCallback(\n    (e: string) => {\n      handleQueryChange(e);\n      if (queryHandlerSettings?.watchQueryChanges) {\n        queryHandlerSettings.watchQueryChanges(e);\n      }\n    },\n    [handleQueryChange, queryHandlerSettings]\n  );\n\n  const examplesStyle: React.CSSProperties = {\n    fontSize: '11px',\n    color: '#777',\n    backgroundColor: '#f5f5f5',\n    padding: '8px',\n    borderRadius: '4px',\n    fontFamily: 'Monaco, Menlo, \"Ubuntu Mono\", monospace',\n    whiteSpace: 'pre-wrap',\n    lineHeight: '1.3',\n  };\n\n  return (\n    <Stack spacing={1.5}>\n      <DatasourceSelect\n        datasourcePluginKind={DATASOURCE_KIND}\n        value={selectedDatasource}\n        onChange={handleDatasourceChange}\n        label=\"ClickHouse Datasource\"\n        notched\n      />\n      <ClickQLEditor\n        value={query}\n        onChange={handleClickHouseQueryChange}\n        onBlur={queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined}\n        onKeyDown={(event) => {\n          if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {\n            event.preventDefault();\n            handleQueryExecute(query);\n          }\n        }}\n        placeholder=\"Enter ClickHouse SQL query\"\n      />\n\n      <details>\n        <summary style={{ cursor: 'pointer', fontSize: '12px', color: '#666', marginBottom: '8px' }}>\n          Query Examples\n        </summary>\n        <div style={examplesStyle}>{queryExample}</div>\n      </details>\n    </Stack>\n  );\n}\n"],"names":["DatasourceSelect","isVariableDatasource","useCallback","produce","DATASOURCE_KIND","DEFAULT_DATASOURCE","ClickQLEditor","Stack","queryExample","useQueryState","ClickHouseLogQueryEditor","props","onChange","value","queryHandlerSettings","datasource","selectedDatasource","query","handleQueryChange","handleQueryBlur","handleDatasourceChange","newDatasourceSelection","kind","draft","setWatchOtherSpecs","Error","handleQueryExecute","watchQueryChanges","handleClickHouseQueryChange","e","examplesStyle","fontSize","color","backgroundColor","padding","borderRadius","fontFamily","whiteSpace","lineHeight","spacing","datasourcePluginKind","label","notched","onBlur","runWithOnBlur","undefined","onKeyDown","event","key","ctrlKey","metaKey","preventDefault","placeholder","details","summary","style","cursor","marginBottom","div"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SACEA,gBAAgB,EAEhBC,oBAAoB,QAEf,4BAA4B;AACnC,SAAuBC,WAAW,QAAQ,QAAQ;AAClD,SAASC,OAAO,QAAQ,QAAQ;AAChC,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,eAAe;AACnE,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,KAAK,QAAQ,gBAAgB;AACtC,SAASC,YAAY,QAAQ,6BAA6B;AAE1D,SAASC,aAAa,QAAQ,wBAAwB;AAItD,OAAO,SAASC,yBAAyBC,KAAiC;IACxE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,oBAAoB,EAAE,GAAGH;IAClD,MAAM,EAAEI,UAAU,EAAE,GAAGF;IACvB,MAAMG,qBAAqBD,cAAcV;IACzC,MAAM,EAAEY,KAAK,EAAEC,iBAAiB,EAAEC,eAAe,EAAE,GAAGV,cAAcE;IAEpE,MAAMS,yBAA4D,CAACC;QACjE,IAAI,CAACpB,qBAAqBoB,2BAA2BA,uBAAuBC,IAAI,KAAKlB,iBAAiB;YACpGQ,SACET,QAAQU,OAAO,CAACU;gBACdA,MAAMR,UAAU,GAAGM;YACrB;YAGF,IAAIP,sBAAsBU,oBACxBV,qBAAqBU,kBAAkB,CAAC;gBAAE,GAAGX,KAAK;gBAAEE,YAAYM;YAAuB;YACzF;QACF;QACA,MAAM,IAAII,MAAM;IAClB;IAEA,6CAA6C;IAC7C,MAAMC,qBAAqB,CAACT;QAC1B,IAAIH,sBAAsBa,mBAAmB;YAC3Cb,qBAAqBa,iBAAiB,CAACV;QACzC;QACAL,SACET,QAAQU,OAAO,CAACU;YACdA,MAAMN,KAAK,GAAGA;QAChB;IAEJ;IAEA,MAAMW,8BAA8B1B,YAClC,CAAC2B;QACCX,kBAAkBW;QAClB,IAAIf,sBAAsBa,mBAAmB;YAC3Cb,qBAAqBa,iBAAiB,CAACE;QACzC;IACF,GACA;QAACX;QAAmBJ;KAAqB;IAG3C,MAAMgB,gBAAqC;QACzCC,UAAU;QACVC,OAAO;QACPC,iBAAiB;QACjBC,SAAS;QACTC,cAAc;QACdC,YAAY;QACZC,YAAY;QACZC,YAAY;IACd;IAEA,qBACE,MAAC/B;QAAMgC,SAAS;;0BACd,KAACvC;gBACCwC,sBAAsBpC;gBACtBS,OAAOG;gBACPJ,UAAUQ;gBACVqB,OAAM;gBACNC,OAAO;;0BAET,KAACpC;gBACCO,OAAOI;gBACPL,UAAUgB;gBACVe,QAAQ7B,sBAAsB8B,gBAAgBzB,kBAAkB0B;gBAChEC,WAAW,CAACC;oBACV,IAAIA,MAAMC,GAAG,KAAK,WAAYD,CAAAA,MAAME,OAAO,IAAIF,MAAMG,OAAO,AAAD,GAAI;wBAC7DH,MAAMI,cAAc;wBACpBzB,mBAAmBT;oBACrB;gBACF;gBACAmC,aAAY;;0BAGd,MAACC;;kCACC,KAACC;wBAAQC,OAAO;4BAAEC,QAAQ;4BAAWzB,UAAU;4BAAQC,OAAO;4BAAQyB,cAAc;wBAAM;kCAAG;;kCAG7F,KAACC;wBAAIH,OAAOzB;kCAAgBtB;;;;;;AAIpC"}

package/lib/queries/click-house-log-query/get-click-house-log-data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/queries/click-house-log-query/get-click-house-log-data.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { replaceVariables } from '@perses-dev/plugin-system';\nimport { LogEntry, LogsData } from '../../model/click-house-data-types';\nimport { ClickHouseClient, ClickHouseQueryResponse } from '../../model/click-house-client';\nimport { ClickHouseLogQuerySpec } from './click-house-log-query-types';\nimport { DEFAULT_DATASOURCE } from '../constants';\nimport { LogQueryPlugin } from './log-query-plugin-interface';\n\nfunction flattenObject(\n  obj: Record<string, any>,\n  parentKey = '',\n  result: Record<string, any> = {}\n): Record<string, any> {\n  for (const [key, value] of Object.entries(obj)) {\n    const newKey = parentKey ? `${parentKey}.${key}` : key;\n    if (value && typeof value === 'object' && !Array.isArray(value)) {\n      flattenObject(value, newKey, result);\n    } else {\n      result[newKey] = value;\n    }\n  }\n\n  return result;\n}\n\nfunction convertStreamsToLogs(streams: LogEntry[]): LogsData {\n  const entries: LogEntry[] = streams.map((entry) => {\n    const flattened = flattenObject(entry);\n\n    if (!flattened.Timestamp && flattened.log_time) {\n      flattened.Timestamp = flattened.log_time;\n    }\n\n    const sortedEntry: Record<string, any> = {};\n    Object.keys(flattened)\n      .sort((a, b) => a.localeCompare(b))\n      .forEach((key) => {\n        sortedEntry[key] = flattened[key];\n      });\n\n    const line = Object.entries(sortedEntry)\n      .filter(([key]) => key !== 'Timestamp')\n      .map(([key, value]) => `<${key}> ${value === '' || value === null || value === undefined ? '--' : value}`)\n      .join(' ');\n\n    return {\n      timestamp: sortedEntry?.Timestamp,\n      labels: sortedEntry,\n      line,\n    } as LogEntry;\n  });\n\n  return {\n    entries,\n    totalCount: entries.length,\n  };\n}\n\nexport const getClickHouseLogData: LogQueryPlugin<ClickHouseLogQuerySpec>['getLogData'] = async (spec, context) => {\n  if (spec.query === undefined || spec.query === null || spec.query === '') {\n    return {\n      logs: { entries: [], totalCount: 0 },\n      timeRange: { start: context.timeRange.start, end: context.timeRange.end },\n    };\n  }\n\n  const query = replaceVariables(spec.query, context.variableState);\n\n  const client = (await context.datasourceStore.getDatasourceClient(\n    spec.datasource ?? DEFAULT_DATASOURCE\n  )) as ClickHouseClient;\n\n  const { start, end } = context.timeRange;\n\n  const response: ClickHouseQueryResponse = await client.query({\n    start: start.getTime().toString(),\n    end: end.getTime().toString(),\n    query,\n  });\n\n  return {\n    timeRange: { start, end },\n    logs: convertStreamsToLogs(response.data),\n    metadata: {\n      executedQueryString: query,\n    },\n  };\n};\n"],"names":["replaceVariables","DEFAULT_DATASOURCE","flattenObject","obj","parentKey","result","key","value","Object","entries","newKey","Array","isArray","convertStreamsToLogs","streams","map","entry","flattened","Timestamp","log_time","sortedEntry","keys","sort","a","b","localeCompare","forEach","line","filter","undefined","join","timestamp","labels","totalCount","length","getClickHouseLogData","spec","context","query","logs","timeRange","start","end","variableState","client","datasourceStore","getDatasourceClient","datasource","response","getTime","toString","data","metadata","executedQueryString"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,gBAAgB,QAAQ,4BAA4B;AAI7D,SAASC,kBAAkB,QAAQ,eAAe;AAGlD,SAASC,cACPC,GAAwB,EACxBC,YAAY,EAAE,EACdC,SAA8B,CAAC,CAAC;IAEhC,KAAK,MAAM,CAACC,KAAKC,MAAM,IAAIC,OAAOC,OAAO,CAACN,KAAM;QAC9C,MAAMO,SAASN,YAAY,GAAGA,UAAU,CAAC,EAAEE,KAAK,GAAGA;QACnD,IAAIC,SAAS,OAAOA,UAAU,YAAY,CAACI,MAAMC,OAAO,CAACL,QAAQ;YAC/DL,cAAcK,OAAOG,QAAQL;QAC/B,OAAO;YACLA,MAAM,CAACK,OAAO,GAAGH;QACnB;IACF;IAEA,OAAOF;AACT;AAEA,SAASQ,qBAAqBC,OAAmB;IAC/C,MAAML,UAAsBK,QAAQC,GAAG,CAAC,CAACC;QACvC,MAAMC,YAAYf,cAAcc;QAEhC,IAAI,CAACC,UAAUC,SAAS,IAAID,UAAUE,QAAQ,EAAE;YAC9CF,UAAUC,SAAS,GAAGD,UAAUE,QAAQ;QAC1C;QAEA,MAAMC,cAAmC,CAAC;QAC1CZ,OAAOa,IAAI,CAACJ,WACTK,IAAI,CAAC,CAACC,GAAGC,IAAMD,EAAEE,aAAa,CAACD,IAC/BE,OAAO,CAAC,CAACpB;YACRc,WAAW,CAACd,IAAI,GAAGW,SAAS,CAACX,IAAI;QACnC;QAEF,MAAMqB,OAAOnB,OAAOC,OAAO,CAACW,aACzBQ,MAAM,CAAC,CAAC,CAACtB,IAAI,GAAKA,QAAQ,aAC1BS,GAAG,CAAC,CAAC,CAACT,KAAKC,MAAM,GAAK,CAAC,CAAC,EAAED,IAAI,EAAE,EAAEC,UAAU,MAAMA,UAAU,QAAQA,UAAUsB,YAAY,OAAOtB,OAAO,EACxGuB,IAAI,CAAC;QAER,OAAO;YACLC,WAAWX,aAAaF;YACxBc,QAAQZ;YACRO;QACF;IACF;IAEA,OAAO;QACLlB;QACAwB,YAAYxB,QAAQyB,MAAM;IAC5B;AACF;AAEA,OAAO,MAAMC,uBAA6E,OAAOC,MAAMC;IACrG,IAAID,KAAKE,KAAK,KAAKT,aAAaO,KAAKE,KAAK,KAAK,QAAQF,KAAKE,KAAK,KAAK,IAAI;QACxE,OAAO;YACLC,MAAM;gBAAE9B,SAAS,EAAE;gBAAEwB,YAAY;YAAE;YACnCO,WAAW;gBAAEC,OAAOJ,QAAQG,SAAS,CAACC,KAAK;gBAAEC,KAAKL,QAAQG,SAAS,CAACE,GAAG;YAAC;QAC1E;IACF;IAEA,MAAMJ,QAAQtC,iBAAiBoC,KAAKE,KAAK,EAAED,QAAQM,aAAa;IAEhE,MAAMC,SAAU,MAAMP,QAAQQ,eAAe,CAACC,mBAAmB,CAC/DV,KAAKW,UAAU,IAAI9C;IAGrB,MAAM,EAAEwC,KAAK,EAAEC,GAAG,EAAE,GAAGL,QAAQG,SAAS;IAExC,MAAMQ,WAAoC,MAAMJ,OAAON,KAAK,CAAC;QAC3DG,OAAOA,MAAMQ,OAAO,GAAGC,QAAQ;QAC/BR,KAAKA,IAAIO,OAAO,GAAGC,QAAQ;QAC3BZ;IACF;IAEA,OAAO;QACLE,WAAW;YAAEC;YAAOC;QAAI;QACxBH,MAAM1B,qBAAqBmC,SAASG,IAAI;QACxCC,UAAU;YACRC,qBAAqBf;QACvB;IACF;AACF,EAAE"}
+{"version":3,"sources":["../../../../src/queries/click-house-log-query/get-click-house-log-data.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { replaceVariables } from '@perses-dev/plugin-system';\nimport { LogEntry, LogData } from '@perses-dev/core';\nimport { ClickHouseClient, ClickHouseQueryResponse } from '../../model/click-house-client';\nimport { ClickHouseLogQuerySpec } from './click-house-log-query-types';\nimport { DEFAULT_DATASOURCE } from '../constants';\nimport { LogQueryPlugin } from './log-query-plugin-interface';\n\nfunction flattenObject(\n  obj: Record<string, any>,\n  parentKey = '',\n  result: Record<string, any> = {}\n): Record<string, any> {\n  for (const [key, value] of Object.entries(obj)) {\n    const newKey = parentKey ? `${parentKey}.${key}` : key;\n    if (value && typeof value === 'object' && !Array.isArray(value)) {\n      flattenObject(value, newKey, result);\n    } else {\n      result[newKey] = value;\n    }\n  }\n\n  return result;\n}\n\nfunction convertStreamsToLogs(streams: LogEntry[]): LogData {\n  const entries: LogEntry[] = streams.map((entry) => {\n    const flattened = flattenObject(entry);\n\n    if (!flattened.Timestamp && flattened.log_time) {\n      flattened.Timestamp = flattened.log_time;\n    }\n\n    const sortedEntry: Record<string, any> = {};\n    Object.keys(flattened)\n      .sort((a, b) => a.localeCompare(b))\n      .forEach((key) => {\n        sortedEntry[key] = flattened[key];\n      });\n\n    const line = Object.entries(sortedEntry)\n      .filter(([key]) => key !== 'Timestamp')\n      .map(([key, value]) => `<${key}> ${value === '' || value === null || value === undefined ? '--' : value}`)\n      .join(' ');\n\n    return {\n      timestamp: sortedEntry?.Timestamp,\n      labels: sortedEntry,\n      line,\n    } as LogEntry;\n  });\n\n  return {\n    entries,\n    totalCount: entries.length,\n  };\n}\n\nexport const getClickHouseLogData: LogQueryPlugin<ClickHouseLogQuerySpec>['getLogData'] = async (spec, context) => {\n  if (spec.query === undefined || spec.query === null || spec.query === '') {\n    return {\n      logs: { entries: [], totalCount: 0 },\n      timeRange: { start: context.timeRange.start, end: context.timeRange.end },\n    };\n  }\n\n  const query = replaceVariables(spec.query, context.variableState);\n\n  const client = (await context.datasourceStore.getDatasourceClient(\n    spec.datasource ?? DEFAULT_DATASOURCE\n  )) as ClickHouseClient;\n\n  const { start, end } = context.timeRange;\n\n  const response: ClickHouseQueryResponse = await client.query({\n    start: start.getTime().toString(),\n    end: end.getTime().toString(),\n    query,\n  });\n\n  return {\n    timeRange: { start, end },\n    logs: convertStreamsToLogs(response.data),\n    metadata: {\n      executedQueryString: query,\n    },\n  };\n};\n"],"names":["replaceVariables","DEFAULT_DATASOURCE","flattenObject","obj","parentKey","result","key","value","Object","entries","newKey","Array","isArray","convertStreamsToLogs","streams","map","entry","flattened","Timestamp","log_time","sortedEntry","keys","sort","a","b","localeCompare","forEach","line","filter","undefined","join","timestamp","labels","totalCount","length","getClickHouseLogData","spec","context","query","logs","timeRange","start","end","variableState","client","datasourceStore","getDatasourceClient","datasource","response","getTime","toString","data","metadata","executedQueryString"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,gBAAgB,QAAQ,4BAA4B;AAI7D,SAASC,kBAAkB,QAAQ,eAAe;AAGlD,SAASC,cACPC,GAAwB,EACxBC,YAAY,EAAE,EACdC,SAA8B,CAAC,CAAC;IAEhC,KAAK,MAAM,CAACC,KAAKC,MAAM,IAAIC,OAAOC,OAAO,CAACN,KAAM;QAC9C,MAAMO,SAASN,YAAY,GAAGA,UAAU,CAAC,EAAEE,KAAK,GAAGA;QACnD,IAAIC,SAAS,OAAOA,UAAU,YAAY,CAACI,MAAMC,OAAO,CAACL,QAAQ;YAC/DL,cAAcK,OAAOG,QAAQL;QAC/B,OAAO;YACLA,MAAM,CAACK,OAAO,GAAGH;QACnB;IACF;IAEA,OAAOF;AACT;AAEA,SAASQ,qBAAqBC,OAAmB;IAC/C,MAAML,UAAsBK,QAAQC,GAAG,CAAC,CAACC;QACvC,MAAMC,YAAYf,cAAcc;QAEhC,IAAI,CAACC,UAAUC,SAAS,IAAID,UAAUE,QAAQ,EAAE;YAC9CF,UAAUC,SAAS,GAAGD,UAAUE,QAAQ;QAC1C;QAEA,MAAMC,cAAmC,CAAC;QAC1CZ,OAAOa,IAAI,CAACJ,WACTK,IAAI,CAAC,CAACC,GAAGC,IAAMD,EAAEE,aAAa,CAACD,IAC/BE,OAAO,CAAC,CAACpB;YACRc,WAAW,CAACd,IAAI,GAAGW,SAAS,CAACX,IAAI;QACnC;QAEF,MAAMqB,OAAOnB,OAAOC,OAAO,CAACW,aACzBQ,MAAM,CAAC,CAAC,CAACtB,IAAI,GAAKA,QAAQ,aAC1BS,GAAG,CAAC,CAAC,CAACT,KAAKC,MAAM,GAAK,CAAC,CAAC,EAAED,IAAI,EAAE,EAAEC,UAAU,MAAMA,UAAU,QAAQA,UAAUsB,YAAY,OAAOtB,OAAO,EACxGuB,IAAI,CAAC;QAER,OAAO;YACLC,WAAWX,aAAaF;YACxBc,QAAQZ;YACRO;QACF;IACF;IAEA,OAAO;QACLlB;QACAwB,YAAYxB,QAAQyB,MAAM;IAC5B;AACF;AAEA,OAAO,MAAMC,uBAA6E,OAAOC,MAAMC;IACrG,IAAID,KAAKE,KAAK,KAAKT,aAAaO,KAAKE,KAAK,KAAK,QAAQF,KAAKE,KAAK,KAAK,IAAI;QACxE,OAAO;YACLC,MAAM;gBAAE9B,SAAS,EAAE;gBAAEwB,YAAY;YAAE;YACnCO,WAAW;gBAAEC,OAAOJ,QAAQG,SAAS,CAACC,KAAK;gBAAEC,KAAKL,QAAQG,SAAS,CAACE,GAAG;YAAC;QAC1E;IACF;IAEA,MAAMJ,QAAQtC,iBAAiBoC,KAAKE,KAAK,EAAED,QAAQM,aAAa;IAEhE,MAAMC,SAAU,MAAMP,QAAQQ,eAAe,CAACC,mBAAmB,CAC/DV,KAAKW,UAAU,IAAI9C;IAGrB,MAAM,EAAEwC,KAAK,EAAEC,GAAG,EAAE,GAAGL,QAAQG,SAAS;IAExC,MAAMQ,WAAoC,MAAMJ,OAAON,KAAK,CAAC;QAC3DG,OAAOA,MAAMQ,OAAO,GAAGC,QAAQ;QAC/BR,KAAKA,IAAIO,OAAO,GAAGC,QAAQ;QAC3BZ;IACF;IAEA,OAAO;QACLE,WAAW;YAAEC;YAAOC;QAAI;QACxBH,MAAM1B,qBAAqBmC,SAASG,IAAI;QACxCC,UAAU;YACRC,qBAAqBf;QACvB;IACF;AACF,EAAE"}

package/lib/queries/click-house-log-query/log-query-plugin-interface.d.ts

@@ -1,8 +1,8 @@
 import { AbsoluteTimeRange, UnknownSpec } from '@perses-dev/core';
 import { DatasourceStore, Plugin, VariableStateMap } from '@perses-dev/plugin-system';
-import { LogsData } from '../../model/click-house-data-types';
+import { LogData } from '@perses-dev/core';
 export interface LogQueryResult {
-    logs: LogsData;
+    logs: LogData;
     timeRange: AbsoluteTimeRange;
     metadata?: {
         executedQueryString: string;

package/lib/queries/click-house-log-query/log-query-plugin-interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"log-query-plugin-interface.d.ts","sourceRoot":"","sources":["../../../../src/queries/click-house-log-query/log-query-plugin-interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACtF,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE;QACT,mBAAmB,EAAE,MAAM,CAAC;KAC7B,CAAC;CACH;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,iBAAiB,CAAC;IAC7B,aAAa,EAAE,gBAAgB,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,0BAA0B,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,cAAc,CAAC,IAAI,GAAG,WAAW,CAAE,SAAQ,MAAM,CAAC,IAAI,CAAC;IACtE,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,sBAAsB,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IACjF,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,sBAAsB,KAAK,0BAA0B,CAAC;CACrF"}
+{"version":3,"file":"log-query-plugin-interface.d.ts","sourceRoot":"","sources":["../../../../src/queries/click-house-log-query/log-query-plugin-interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACtF,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE;QACT,mBAAmB,EAAE,MAAM,CAAC;KAC7B,CAAC;CACH;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,iBAAiB,CAAC;IAC7B,aAAa,EAAE,gBAAgB,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,0BAA0B,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,cAAc,CAAC,IAAI,GAAG,WAAW,CAAE,SAAQ,MAAM,CAAC,IAAI,CAAC;IACtE,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,sBAAsB,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IACjF,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,sBAAsB,KAAK,0BAA0B,CAAC;CACrF"}

package/lib/queries/click-house-log-query/log-query-plugin-interface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/queries/click-house-log-query/log-query-plugin-interface.ts"],"sourcesContent":["import { AbsoluteTimeRange, UnknownSpec } from '@perses-dev/core';\nimport { DatasourceStore, Plugin, VariableStateMap } from '@perses-dev/plugin-system';\nimport { LogsData } from '../../model/click-house-data-types';\n\nexport interface LogQueryResult {\n  logs: LogsData;\n  timeRange: AbsoluteTimeRange;\n  metadata?: {\n    executedQueryString: string;\n  };\n}\n\nexport interface ClickHouseQueryContext {\n  timeRange: AbsoluteTimeRange;\n  variableState: VariableStateMap;\n  datasourceStore: DatasourceStore;\n  refreshKey: string;\n}\n\ntype LogQueryPluginDependencies = {\n  variables?: string[];\n};\n\nexport interface LogQueryPlugin<Spec = UnknownSpec> extends Plugin<Spec> {\n  getLogData: (spec: Spec, ctx: ClickHouseQueryContext) => Promise<LogQueryResult>;\n  dependsOn?: (spec: Spec, ctx: ClickHouseQueryContext) => LogQueryPluginDependencies;\n}\n"],"names":[],"mappings":"AAuBA,WAGC"}
+{"version":3,"sources":["../../../../src/queries/click-house-log-query/log-query-plugin-interface.ts"],"sourcesContent":["import { AbsoluteTimeRange, UnknownSpec } from '@perses-dev/core';\nimport { DatasourceStore, Plugin, VariableStateMap } from '@perses-dev/plugin-system';\nimport { LogData } from '@perses-dev/core';\n\nexport interface LogQueryResult {\n  logs: LogData;\n  timeRange: AbsoluteTimeRange;\n  metadata?: {\n    executedQueryString: string;\n  };\n}\n\nexport interface ClickHouseQueryContext {\n  timeRange: AbsoluteTimeRange;\n  variableState: VariableStateMap;\n  datasourceStore: DatasourceStore;\n  refreshKey: string;\n}\n\ntype LogQueryPluginDependencies = {\n  variables?: string[];\n};\n\nexport interface LogQueryPlugin<Spec = UnknownSpec> extends Plugin<Spec> {\n  getLogData: (spec: Spec, ctx: ClickHouseQueryContext) => Promise<LogQueryResult>;\n  dependsOn?: (spec: Spec, ctx: ClickHouseQueryContext) => LogQueryPluginDependencies;\n}\n"],"names":[],"mappings":"AAuBA,WAGC"}

package/lib/queries/click-house-time-series-query/ClickHouseQueryEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClickHouseQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/queries/click-house-time-series-query/ClickHouseQueryEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAIL,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAoC,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,6BAA6B,EAAE,MAAM,2BAA2B,CAAC;AAM1E,KAAK,oCAAoC,GAAG,kBAAkB,CAAC,6BAA6B,CAAC,CAAC;AAE9F,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,oCAAoC,GAAG,YAAY,CAsEzG"}
+{"version":3,"file":"ClickHouseQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/queries/click-house-time-series-query/ClickHouseQueryEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAIL,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,6BAA6B,EAAE,MAAM,2BAA2B,CAAC;AAO1E,KAAK,oCAAoC,GAAG,kBAAkB,CAAC,6BAA6B,CAAC,CAAC;AAE9F,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,oCAAoC,GAAG,YAAY,CAoFzG"}

package/lib/queries/click-house-time-series-query/ClickHouseQueryEditor.js

@@ -12,19 +12,24 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DatasourceSelect, isVariableDatasource } from '@perses-dev/plugin-system';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback } from 'react';
+import { produce } from 'immer';
 import { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants';
 import { ClickQLEditor } from '../../components';
 import { Stack } from '@mui/material';
 import { queryExample } from '../../components/constants';
+import { useQueryState } from '../query-editor-model';
 export function ClickHouseTimeSeriesQueryEditor(props) {
-    const { onChange, value } = props;
+    const { onChange, value, queryHandlerSettings } = props;
     const { datasource } = value;
     const selectedDatasource = datasource ?? DEFAULT_DATASOURCE;
-    const [localQuery, setLocalQuery] = useState(value.query || '');
+    const { query, handleQueryChange, handleQueryBlur } = useQueryState(props);
     const handleDatasourceChange = (newDatasourceSelection)=>{
         if (!isVariableDatasource(newDatasourceSelection) && newDatasourceSelection.kind === DATASOURCE_KIND) {
-            onChange({
+            onChange(produce(value, (draft)=>{
+                draft.datasource = newDatasourceSelection;
+            }));
+            if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings.setWatchOtherSpecs({
                 ...value,
                 datasource: newDatasourceSelection
             });
@@ -32,22 +37,23 @@ export function ClickHouseTimeSeriesQueryEditor(props) {
         }
         throw new Error('Got unexpected non ClickHouse datasource selection');
     };
-    const handleQueryChange = useCallback((newQuery)=>{
-        setLocalQuery(newQuery);
-    }, []);
-    const handleQueryExecute = useCallback((query)=>{
-        onChange({
-            ...value,
-            query
-        });
-    }, [
-        onChange,
-        value
-    ]);
-    useEffect(()=>{
-        setLocalQuery(value.query || '');
+    // Immediate query execution on Enter or blur
+    const handleQueryExecute = (query)=>{
+        if (queryHandlerSettings?.watchQueryChanges) {
+            queryHandlerSettings.watchQueryChanges(query);
+        }
+        onChange(produce(value, (draft)=>{
+            draft.query = query;
+        }));
+    };
+    const handleClickHouseQueryChange = useCallback((e)=>{
+        handleQueryChange(e);
+        if (queryHandlerSettings?.watchQueryChanges) {
+            queryHandlerSettings.watchQueryChanges(e);
+        }
     }, [
-        value.query
+        handleQueryChange,
+        queryHandlerSettings
     ]);
     const examplesStyle = {
         fontSize: '11px',
@@ -70,13 +76,13 @@ export function ClickHouseTimeSeriesQueryEditor(props) {
                 notched: true
             }),
             /*#__PURE__*/ _jsx(ClickQLEditor, {
-                value: localQuery,
-                onChange: handleQueryChange,
-                onBlur: ()=>handleQueryExecute(localQuery),
+                value: query,
+                onChange: handleClickHouseQueryChange,
+                onBlur: queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined,
                 onKeyDown: (event)=>{
                     if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
                         event.preventDefault();
-                        handleQueryExecute(localQuery);
+                        handleQueryExecute(query);
                     }
                 },
                 placeholder: "Enter ClickHouse SQL query"