@perses-dev/clickhouse-plugin 0.1.0

package/lib/cjs/panels/logs/components/LogRow/LogRow.js

@@ -0,0 +1,163 @@
+// 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, "LogRow", {
+    enumerable: true,
+    get: function() {
+        return LogRow;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _material = require("@mui/material");
+const _ChevronRight = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronRight"));
+const _LogTimestamp = require("./LogTimestamp");
+const _LogsStyles = require("./LogsStyles");
+const _LogDetailsTable = require("./LogDetailsTable");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const LogRow = /*#__PURE__*/ (0, _react.memo)(({ log, isExpanded, index, onToggle, isExpandable = true, time = false, wrap = false })=>{
+    const theme = (0, _material.useTheme)();
+    const severityColor = theme.palette.text.secondary;
+    const handleToggle = (0, _react.useCallback)(()=>{
+        if (isExpandable) {
+            onToggle(index);
+        }
+    }, [
+        isExpandable,
+        onToggle,
+        index
+    ]);
+    if (!log) return null;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_LogsStyles.LogRowContainer, {
+        severityColor: severityColor,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_LogsStyles.LogRowContent, {
+                onClick: handleToggle,
+                isExpandable: isExpandable,
+                time: time,
+                children: [
+                    isExpandable && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            width: '16px',
+                            justifyContent: 'center'
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_LogsStyles.ExpandButton, {
+                            size: "small",
+                            isExpanded: isExpanded,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronRight.default, {
+                                sx: {
+                                    fontSize: '12px'
+                                }
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_LogTimestamp.LogTimestamp, {
+                        timestamp: log?.timestamp
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        sx: {
+                            display: 'flex',
+                            gap: '10px',
+                            marginLeft: '36px'
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_LogsStyles.LogText, {
+                            variant: "body2",
+                            wrap: wrap,
+                            children: log?.line
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Collapse, {
+                in: isExpanded,
+                timeout: 200,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    sx: {
+                        padding: '8px'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                        sx: {
+                            display: 'grid',
+                            gridTemplateColumns: !time ? '1fr' : '8px minmax(160px, max-content) 1fr',
+                            gap: '12px'
+                        },
+                        children: [
+                            time && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {}),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {})
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_LogDetailsTable.LogDetailsTable, {
+                                    log: log.labels
+                                })
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+});
+LogRow.displayName = 'LogRow';

package/lib/cjs/panels/logs/components/LogRow/LogTimestamp.js

@@ -0,0 +1,45 @@
+// 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, "LogTimestamp", {
+    enumerable: true,
+    get: function() {
+        return LogTimestamp;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _material = require("@mui/material");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const LogTimestamp = ({ timestamp })=>{
+    const theme = (0, _material.useTheme)();
+    const isDarkMode = theme.palette.mode === 'dark';
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+        variant: "caption",
+        sx: {
+            color: isDarkMode ? '#000000' : theme.palette.text.secondary,
+            fontSize: '12px',
+            whiteSpace: 'nowrap',
+            minWidth: 'max-content',
+            backgroundColor: '#FFF3E0'
+        },
+        children: timestamp
+    });
+};

package/lib/cjs/panels/logs/components/LogRow/LogsStyles.js

@@ -0,0 +1,77 @@
+// 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, {
+    ExpandButton: function() {
+        return ExpandButton;
+    },
+    LogRowContainer: function() {
+        return LogRowContainer;
+    },
+    LogRowContent: function() {
+        return LogRowContent;
+    },
+    LogText: function() {
+        return LogText;
+    }
+});
+const _material = require("@mui/material");
+const LogRowContainer = (0, _material.styled)(_material.Box)(({ severityColor })=>({
+        borderLeft: `4px solid ${severityColor}`,
+        transition: 'all 0.2s ease',
+        marginBottom: '4px',
+        fontFamily: '"DejaVu Sans Mono", monospace'
+    }));
+const LogRowContent = (0, _material.styled)(_material.Box)(({ theme, isExpandable })=>({
+        display: 'grid',
+        gridTemplateColumns: isExpandable ? '16px minmax(160px, max-content) 1fr' : 'minmax(160px, max-content) 1fr',
+        alignItems: 'flex-start',
+        padding: '4px 8px',
+        cursor: isExpandable ? 'pointer' : 'default',
+        gap: '12px',
+        '&:hover': {
+            backgroundColor: theme.palette.action.hover
+        }
+    }));
+const ExpandButton = (0, _material.styled)(_material.IconButton)(({ theme, isExpanded })=>({
+        padding: 0,
+        width: '16px',
+        height: '16px',
+        color: theme.palette.text.secondary,
+        transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+        transition: 'transform 0.2s ease'
+    }));
+const LogText = (0, _material.styled)(_material.Typography)(({ wrap })=>({
+        fontSize: '12px',
+        flex: 1,
+        lineHeight: 1.4,
+        textAlign: 'left',
+        ...wrap ? {
+            wordBreak: 'break-word',
+            whiteSpace: 'pre-wrap',
+            overflow: 'visible',
+            textOverflow: 'unset'
+        } : {
+            wordBreak: 'normal',
+            whiteSpace: 'nowrap'
+        }
+    }));

package/lib/cjs/panels/logs/components/LogRow/index.js

@@ -0,0 +1,37 @@
+// 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, "LogRow", {
+    enumerable: true,
+    get: function() {
+        return _LogRow.LogRow;
+    }
+});
+const _LogRow = require("./LogRow");
+_export_star(require("./LogsStyles"), 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/panels/logs/components/LogsList.js

@@ -0,0 +1,44 @@
+// 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, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _EmptyLogsState = require("./EmptyLogsState");
+const _useExpandedRows = require("./hooks/useExpandedRows");
+const _VirtualizedLogsList = require("./VirtualizedLogsList");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const LogsList = ({ logs })=>{
+    const { expandedRows, toggleExpand } = (0, _useExpandedRows.useExpandedRows)();
+    if (!logs.length) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_EmptyLogsState.EmptyLogsState, {});
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_VirtualizedLogsList.VirtualizedLogsList, {
+        logs: logs,
+        expandedRows: expandedRows,
+        onToggleExpand: toggleExpand
+    });
+};
+const _default = LogsList;

package/lib/cjs/panels/logs/components/VirtualizedLogsList.js

@@ -0,0 +1,60 @@
+// 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, "VirtualizedLogsList", {
+    enumerable: true,
+    get: function() {
+        return VirtualizedLogsList;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _material = require("@mui/material");
+const _reactvirtuoso = require("react-virtuoso");
+const _LogRow = require("./LogRow/LogRow");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const VirtualizedLogsList = ({ logs, expandedRows, onToggleExpand })=>{
+    const theme = (0, _material.useTheme)();
+    const renderLogRow = (index)=>{
+        const log = logs[index];
+        if (!log) return null;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_LogRow.LogRow, {
+            log: log,
+            index: index,
+            isExpanded: expandedRows.has(index),
+            onToggle: onToggleExpand
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        sx: {
+            height: '100%',
+            backgroundColor: theme.palette.background.default,
+            overflow: 'hidden',
+            boxShadow: theme.shadows[1]
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactvirtuoso.Virtuoso, {
+            style: {
+                height: '100%'
+            },
+            totalCount: logs.length,
+            itemContent: renderLogRow
+        })
+    });
+};

package/lib/cjs/panels/logs/components/hooks/useExpandedRows.js

@@ -0,0 +1,45 @@
+// 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, "useExpandedRows", {
+    enumerable: true,
+    get: function() {
+        return useExpandedRows;
+    }
+});
+const _react = require("react");
+const useExpandedRows = ()=>{
+    const [expandedRows, setExpandedRows] = (0, _react.useState)(new Set());
+    const toggleExpand = (0, _react.useCallback)((index)=>{
+        setExpandedRows((prev)=>{
+            const newSet = new Set(prev);
+            if (newSet.has(index)) {
+                newSet.delete(index);
+            } else {
+                newSet.add(index);
+            }
+            return newSet;
+        });
+    }, []);
+    const clearExpanded = (0, _react.useCallback)(()=>{
+        setExpandedRows(new Set());
+    }, []);
+    return {
+        expandedRows,
+        toggleExpand,
+        clearExpanded
+    };
+};

package/lib/cjs/panels/logs/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("./Logs"), exports);
+_export_star(require("./LogsComponent"), exports);
+_export_star(require("./LogsSettingsEditor"), exports);
+_export_star(require("./logs-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/panels/logs/logs-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/ClickHouseLogQuery.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, "ClickHouseLogQuery", {
+    enumerable: true,
+    get: function() {
+        return ClickHouseLogQuery;
+    }
+});
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _getclickhouselogdata = require("./get-click-house-log-data");
+const _ClickHouseLogQueryEditor = require("./ClickHouseLogQueryEditor");
+const ClickHouseLogQuery = {
+    getLogData: _getclickhouselogdata.getClickHouseLogData,
+    OptionsEditorComponent: _ClickHouseLogQueryEditor.ClickHouseLogQueryEditor,
+    createInitialOptions: ()=>({
+            query: ''
+        }),
+    dependsOn: (spec)=>{
+        const queryVariables = (0, _pluginsystem.parseVariables)(spec.query);
+        const allVariables = [
+            ...new Set([
+                ...queryVariables
+            ])
+        ];
+        return {
+            variables: allVariables
+        };
+    }
+};