@perses-dev/clickhouse-plugin 0.1.0

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

@@ -0,0 +1,113 @@
+// 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, "ClickHouseLogQueryEditor", {
+    enumerable: true,
+    get: function() {
+        return ClickHouseLogQueryEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _react = require("react");
+const _constants = require("../constants");
+const _components = require("../../components");
+const _material = require("@mui/material");
+const _constants1 = require("../../components/constants");
+function ClickHouseLogQueryEditor(props) {
+    const { onChange, value } = props;
+    const { datasource } = value;
+    const selectedDatasource = datasource ?? _constants.DEFAULT_DATASOURCE;
+    const [localQuery, setLocalQuery] = (0, _react.useState)(value.query || '');
+    const handleDatasourceChange = (newDatasourceSelection)=>{
+        if (!(0, _pluginsystem.isVariableDatasource)(newDatasourceSelection) && newDatasourceSelection.kind === _constants.DATASOURCE_KIND) {
+            onChange({
+                ...value,
+                datasource: newDatasourceSelection
+            });
+            return;
+        }
+        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 || '');
+    }, [
+        value.query
+    ]);
+    const examplesStyle = {
+        fontSize: '11px',
+        color: '#777',
+        backgroundColor: '#f5f5f5',
+        padding: '8px',
+        borderRadius: '4px',
+        fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+        whiteSpace: 'pre-wrap',
+        lineHeight: '1.3'
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        spacing: 1.5,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
+                datasourcePluginKind: _constants.DATASOURCE_KIND,
+                value: selectedDatasource,
+                onChange: handleDatasourceChange,
+                label: "ClickHouse Datasource",
+                notched: true
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ClickQLEditor, {
+                value: localQuery,
+                onChange: handleQueryChange,
+                onBlur: ()=>handleQueryExecute(localQuery),
+                onKeyDown: (event)=>{
+                    if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+                        event.preventDefault();
+                        handleQueryExecute(localQuery);
+                    }
+                },
+                placeholder: "Enter ClickHouse SQL query"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("details", {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("summary", {
+                        style: {
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                            color: '#666',
+                            marginBottom: '8px'
+                        },
+                        children: "Query Examples"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        style: examplesStyle,
+                        children: _constants1.queryExample
+                    })
+                ]
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,16 @@
+// 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
+});

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

@@ -0,0 +1,89 @@
+// 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, "getClickHouseLogData", {
+    enumerable: true,
+    get: function() {
+        return getClickHouseLogData;
+    }
+});
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _constants = require("../constants");
+function flattenObject(obj, parentKey = '', result = {}) {
+    for (const [key, value] of Object.entries(obj)){
+        const newKey = parentKey ? `${parentKey}.${key}` : key;
+        if (value && typeof value === 'object' && !Array.isArray(value)) {
+            flattenObject(value, newKey, result);
+        } else {
+            result[newKey] = value;
+        }
+    }
+    return result;
+}
+function convertStreamsToLogs(streams) {
+    const entries = streams.map((entry)=>{
+        const flattened = flattenObject(entry);
+        if (!flattened.Timestamp && flattened.log_time) {
+            flattened.Timestamp = flattened.log_time;
+        }
+        const sortedEntry = {};
+        Object.keys(flattened).sort((a, b)=>a.localeCompare(b)).forEach((key)=>{
+            sortedEntry[key] = flattened[key];
+        });
+        const line = Object.entries(sortedEntry).filter(([key])=>key !== 'Timestamp').map(([key, value])=>`<${key}> ${value === '' || value === null || value === undefined ? '--' : value}`).join(' ');
+        return {
+            timestamp: sortedEntry?.Timestamp,
+            labels: sortedEntry,
+            line
+        };
+    });
+    return {
+        entries,
+        totalCount: entries.length
+    };
+}
+const getClickHouseLogData = async (spec, context)=>{
+    if (spec.query === undefined || spec.query === null || spec.query === '') {
+        return {
+            logs: {
+                entries: [],
+                totalCount: 0
+            },
+            timeRange: {
+                start: context.timeRange.start,
+                end: context.timeRange.end
+            }
+        };
+    }
+    const query = (0, _pluginsystem.replaceVariables)(spec.query, context.variableState);
+    const client = await context.datasourceStore.getDatasourceClient(spec.datasource ?? _constants.DEFAULT_DATASOURCE);
+    const { start, end } = context.timeRange;
+    const response = await client.query({
+        start: start.getTime().toString(),
+        end: end.getTime().toString(),
+        query
+    });
+    return {
+        timeRange: {
+            start,
+            end
+        },
+        logs: convertStreamsToLogs(response.data),
+        metadata: {
+            executedQueryString: query
+        }
+    };
+};

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

@@ -0,0 +1,33 @@
+// 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
+});
+_export_star(require("./ClickHouseLogQuery"), exports);
+_export_star(require("./ClickHouseLogQueryEditor"), exports);
+_export_star(require("./get-click-house-log-data"), exports);
+_export_star(require("./click-house-log-query-types"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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

@@ -0,0 +1,43 @@
+// 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, "ClickHouseTimeSeriesQuery", {
+    enumerable: true,
+    get: function() {
+        return ClickHouseTimeSeriesQuery;
+    }
+});
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _getclickhousedata = require("./get-click-house-data");
+const _ClickHouseQueryEditor = require("./ClickHouseQueryEditor");
+const ClickHouseTimeSeriesQuery = {
+    getTimeSeriesData: _getclickhousedata.getTimeSeriesData,
+    OptionsEditorComponent: _ClickHouseQueryEditor.ClickHouseTimeSeriesQueryEditor,
+    createInitialOptions: ()=>({
+            query: ''
+        }),
+    dependsOn: (spec)=>{
+        const queryVariables = (0, _pluginsystem.parseVariables)(spec.query);
+        const allVariables = [
+            ...new Set([
+                ...queryVariables
+            ])
+        ];
+        return {
+            variables: allVariables
+        };
+    }
+};

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

@@ -0,0 +1,113 @@
+// 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, "ClickHouseTimeSeriesQueryEditor", {
+    enumerable: true,
+    get: function() {
+        return ClickHouseTimeSeriesQueryEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _react = require("react");
+const _constants = require("../constants");
+const _components = require("../../components");
+const _material = require("@mui/material");
+const _constants1 = require("../../components/constants");
+function ClickHouseTimeSeriesQueryEditor(props) {
+    const { onChange, value } = props;
+    const { datasource } = value;
+    const selectedDatasource = datasource ?? _constants.DEFAULT_DATASOURCE;
+    const [localQuery, setLocalQuery] = (0, _react.useState)(value.query || '');
+    const handleDatasourceChange = (newDatasourceSelection)=>{
+        if (!(0, _pluginsystem.isVariableDatasource)(newDatasourceSelection) && newDatasourceSelection.kind === _constants.DATASOURCE_KIND) {
+            onChange({
+                ...value,
+                datasource: newDatasourceSelection
+            });
+            return;
+        }
+        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 || '');
+    }, [
+        value.query
+    ]);
+    const examplesStyle = {
+        fontSize: '11px',
+        color: '#777',
+        backgroundColor: '#f5f5f5',
+        padding: '8px',
+        borderRadius: '4px',
+        fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+        whiteSpace: 'pre-wrap',
+        lineHeight: '1.3'
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        spacing: 1.5,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
+                datasourcePluginKind: _constants.DATASOURCE_KIND,
+                value: selectedDatasource,
+                onChange: handleDatasourceChange,
+                label: "ClickHouse Datasource",
+                notched: true
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ClickQLEditor, {
+                value: localQuery,
+                onChange: handleQueryChange,
+                onBlur: ()=>handleQueryExecute(localQuery),
+                onKeyDown: (event)=>{
+                    if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+                        event.preventDefault();
+                        handleQueryExecute(localQuery);
+                    }
+                },
+                placeholder: "Enter ClickHouse SQL query"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("details", {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("summary", {
+                        style: {
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                            color: '#666',
+                            marginBottom: '8px'
+                        },
+                        children: "Query Examples"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        style: examplesStyle,
+                        children: _constants1.queryExample
+                    })
+                ]
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,16 @@
+// 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
+});

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

@@ -0,0 +1,69 @@
+// 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, "getTimeSeriesData", {
+    enumerable: true,
+    get: function() {
+        return getTimeSeriesData;
+    }
+});
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _constants = require("../constants");
+function buildTimeSeries(response) {
+    if (!response || !response.data || response.data.length === 0) {
+        return [];
+    }
+    const values = response.data.map((row)=>{
+        const timestamp = new Date(row.time).getTime();
+        const value = Number(row.log_count);
+        return [
+            timestamp,
+            value
+        ];
+    });
+    return [
+        {
+            name: 'log_count',
+            values
+        }
+    ];
+}
+const getTimeSeriesData = async (spec, context)=>{
+    if (spec.query === undefined || spec.query === null || spec.query === '') {
+        return {
+            series: []
+        };
+    }
+    const query = (0, _pluginsystem.replaceVariables)(spec.query, context.variableState);
+    const client = await context.datasourceStore.getDatasourceClient(spec.datasource ?? _constants.DEFAULT_DATASOURCE);
+    const { start, end } = context.timeRange;
+    const response = await client.query({
+        start: start.getTime().toString(),
+        end: end.getTime().toString(),
+        query
+    });
+    return {
+        series: buildTimeSeries(response),
+        timeRange: {
+            start,
+            end
+        },
+        stepMs: 30 * 1000,
+        metadata: {
+            executedQueryString: query
+        }
+    };
+};

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

@@ -0,0 +1,33 @@
+// 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
+});
+_export_star(require("./get-click-house-data"), exports);
+_export_star(require("./ClickHouseQuery"), exports);
+_export_star(require("./ClickHouseQueryEditor"), exports);
+_export_star(require("./click-house-query-types"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/lib/cjs/queries/constants.js

@@ -0,0 +1,34 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DATASOURCE_KIND: function() {
+        return DATASOURCE_KIND;
+    },
+    DEFAULT_DATASOURCE: function() {
+        return DEFAULT_DATASOURCE;
+    }
+});
+const DATASOURCE_KIND = 'ClickHouseDatasource';
+const DEFAULT_DATASOURCE = {
+    kind: DATASOURCE_KIND
+};

package/lib/cjs/queries/index.js

@@ -0,0 +1,31 @@
+// 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
+});
+_export_star(require("./click-house-time-series-query"), exports);
+_export_star(require("./click-house-log-query"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/lib/cjs/setup-tests.js

@@ -0,0 +1,19 @@
+// 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
+});
+require("@testing-library/jest-dom");
+// Always mock e-charts during tests since we don't have a proper canvas in jsdom
+jest.mock('echarts/core');

package/lib/components/ClickQLEditor.d.ts

@@ -0,0 +1,5 @@
+import { ReactCodeMirrorProps } from '@uiw/react-codemirror';
+import { ReactElement } from 'react';
+export type ClickQLEditorProps = Omit<ReactCodeMirrorProps, 'theme' | 'extensions'>;
+export declare function ClickQLEditor(props: ClickQLEditorProps): ReactElement;
+//# sourceMappingURL=ClickQLEditor.d.ts.map

package/lib/components/ClickQLEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClickQLEditor.d.ts","sourceRoot":"","sources":["../../../src/components/ClickQLEditor.tsx"],"names":[],"mappings":"AAaA,OAAmB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAGzE,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,YAAY,CAAC,CAAC;AAEpF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAuCrE"}