@perses-dev/logs-table-plugin 0.1.0

package/lib/cjs/LogsTablePanel.js

@@ -0,0 +1,42 @@
+// 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, "LogsTablePanel", {
+    enumerable: true,
+    get: function() {
+        return LogsTablePanel;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _LogsTableComponent = require("./LogsTableComponent");
+function LogsTablePanel(props) {
+    const { contentDimensions, queryResults, spec } = props;
+    const chartsTheme = (0, _components.useChartsTheme)();
+    const contentPadding = chartsTheme.container.padding.default;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        sx: {
+            height: contentDimensions?.height || 0,
+            padding: `${contentPadding}px`,
+            overflowY: 'scroll'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_LogsTableComponent.LogsTableComponent, {
+            queryResults: queryResults,
+            spec: spec
+        })
+    });
+}

package/lib/cjs/LogsTableSettingsEditor.js

@@ -0,0 +1,57 @@
+// 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, "LogsTableSettingsEditor", {
+    enumerable: true,
+    get: function() {
+        return LogsTableSettingsEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
+function LogsTableSettingsEditor(props) {
+    const { onChange, value } = props;
+    const handleLegendChange = (newLegend)=>{
+        onChange({
+            ...value,
+            legend: newLegend
+        });
+    };
+    const handleThresholdsChange = (thresholds)=>{
+        onChange({
+            ...value,
+            thresholds
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGrid, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorColumn, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.LegendOptionsEditor, {
+                    value: value.legend,
+                    onChange: handleLegendChange
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorColumn, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ThresholdsEditor, {
+                    hideDefault: true,
+                    thresholds: value.thresholds,
+                    onChange: handleThresholdsChange
+                })
+            })
+        ]
+    });
+}

package/lib/cjs/bootstrap.js

@@ -0,0 +1,26 @@
+// 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
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _client = /*#__PURE__*/ _interop_require_default(require("react-dom/client"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const root = _client.default.createRoot(document.getElementById('root'));
+root.render(/*#__PURE__*/ (0, _jsxruntime.jsx)(_react.default.StrictMode, {}));

package/lib/cjs/components/EmptyLogsState.js

@@ -0,0 +1,49 @@
+// 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, "EmptyLogsState", {
+    enumerable: true,
+    get: function() {
+        return EmptyLogsState;
+    }
+});
+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 EmptyLogsState = ({ message = 'No logs to display' })=>{
+    const theme = (0, _material.useTheme)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '200px'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+            variant: "body2",
+            sx: {
+                color: theme.palette.text.secondary,
+                fontSize: '14px'
+            },
+            children: message
+        })
+    });
+};

package/lib/cjs/components/LogRow/LogDetailsTable.js

@@ -0,0 +1,71 @@
+// 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, "LogDetailsTable", {
+    enumerable: true,
+    get: function() {
+        return LogDetailsTable;
+    }
+});
+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 LogDetailsTable = ({ log })=>{
+    const theme = (0, _material.useTheme)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Table, {
+        size: "small",
+        sx: {
+            border: `1px solid ${theme.palette.divider}`,
+            '& .MuiTableCell-root': {
+                border: 'none',
+                padding: '6px 8px',
+                fontSize: '12px'
+            }
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
+            children: Object.entries(log).map(([key, value])=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+                    sx: {
+                        '&:hover': {
+                            backgroundColor: (0, _material.alpha)(theme.palette.action.hover, 0.04)
+                        }
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                            sx: {
+                                color: theme.palette.text.secondary,
+                                fontWeight: 500,
+                                width: '33%'
+                            },
+                            children: key
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                            sx: {
+                                color: theme.palette.text.primary,
+                                wordBreak: 'break-word',
+                                width: '67%'
+                            },
+                            children: value !== undefined && value !== null && value !== '' ? value : '--'
+                        })
+                    ]
+                }, key))
+        })
+    });
+};

package/lib/cjs/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 DefaultLogRow = ({ log, isExpanded, index, onToggle, isExpandable = true, showTime = false, allowWrap = 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,
+                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",
+                            allowWrap: allowWrap,
+                            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: !showTime ? '1fr' : '8px minmax(160px, max-content) 1fr',
+                            gap: '12px'
+                        },
+                        children: [
+                            showTime && /*#__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
+                                })
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+};
+const LogRow = /*#__PURE__*/ (0, _react.memo)(DefaultLogRow);
+LogRow.displayName = 'LogRow';

package/lib/cjs/components/LogRow/LogTimestamp.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, "LogTimestamp", {
+    enumerable: true,
+    get: function() {
+        return LogTimestamp;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const dateFromStr = (timestamp)=>{
+    return /^\d+$/.test(timestamp) ? new Date(parseInt(timestamp) * 1000) : new Date(Date.parse(timestamp));
+};
+const LogTimestamp = ({ timestamp })=>{
+    const date = typeof timestamp === 'number' ? new Date(timestamp * 1000) : dateFromStr(timestamp);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("time", {
+        style: {
+            fontSize: '12px',
+            whiteSpace: 'nowrap',
+            minWidth: 'max-content'
+        },
+        dateTime: date.toISOString(),
+        children: date.toISOString()
+    });
+};

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

@@ -0,0 +1,85 @@
+// 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, {
+    shouldForwardProp: (prop)=>prop !== 'severityColor'
+})(({ severityColor })=>({
+        borderLeft: `4px solid ${severityColor}`,
+        transition: 'all 0.2s ease',
+        marginBottom: '4px',
+        fontFamily: '"DejaVu Sans Mono", monospace'
+    }));
+const LogRowContent = (0, _material.styled)(_material.Box, {
+    shouldForwardProp: (prop)=>prop !== 'isExpandable'
+})(({ 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, {
+    shouldForwardProp: (prop)=>prop !== 'isExpanded'
+})(({ 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, {
+    shouldForwardProp: (prop)=>prop !== 'allowWrap'
+})(({ allowWrap })=>({
+        fontSize: '12px',
+        flex: 1,
+        lineHeight: 1.4,
+        textAlign: 'left',
+        ...allowWrap ? {
+            wordBreak: 'break-word',
+            whiteSpace: 'pre-wrap',
+            overflow: 'visible',
+            textOverflow: 'unset'
+        } : {
+            wordBreak: 'normal',
+            whiteSpace: 'nowrap'
+        }
+    }));

package/lib/cjs/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/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, "LogsList", {
+    enumerable: true,
+    get: function() {
+        return LogsList;
+    }
+});
+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, spec })=>{
+    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,
+        spec: spec,
+        expandedRows: expandedRows,
+        onToggleExpand: toggleExpand
+    });
+};