@perses-dev/loki-plugin 0.1.0 → 0.1.1

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

@@ -0,0 +1,63 @@
+// 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, spec, 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, {
+            isExpandable: spec.enableDetails,
+            log: log,
+            index: index,
+            isExpanded: expandedRows.has(index),
+            onToggle: onToggleExpand,
+            wrap: spec.wrap,
+            time: spec.time
+        });
+    };
+    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/logstable/components/index.js

@@ -0,0 +1,23 @@
+// 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.LogsList;
+    }
+});
+const _LogsList = require("./LogsList");

package/lib/cjs/panels/logstable/components/utils.js

@@ -0,0 +1,39 @@
+// 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, "getSeverity", {
+    enumerable: true,
+    get: function() {
+        return getSeverity;
+    }
+});
+const getSeverity = (log)=>{
+    const message = log.line.toLowerCase();
+    const level = log.labels.level?.toLowerCase();
+    if (level) {
+        if (level.includes('error') || level.includes('err')) return 'error';
+        if (level.includes('warn')) return 'warn';
+        if (level.includes('info')) return 'info';
+        if (level.includes('debug')) return 'debug';
+    }
+    if (message.includes('error') || message.includes('exception') || message.includes('fail')) {
+        return 'error';
+    }
+    if (message.includes('warn')) return 'warn';
+    if (message.includes('info')) return 'info';
+    if (message.includes('debug')) return 'debug';
+    return 'unknown';
+};

package/lib/cjs/panels/logstable/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/logstable/hooks/useSeverity.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, "useSeverityColor", {
+    enumerable: true,
+    get: function() {
+        return useSeverityColor;
+    }
+});
+const _material = require("@mui/material");
+const _utils = require("../components/utils");
+const useSeverityColor = (log)=>{
+    const theme = (0, _material.useTheme)();
+    if (!log) {
+        return theme.palette.text.secondary;
+    }
+    const severity = (0, _utils.getSeverity)(log);
+    switch(severity){
+        case 'error':
+            return theme.palette.error.main;
+        case 'warn':
+            return theme.palette.warning.main;
+        case 'info':
+            return theme.palette.info.main;
+        case 'debug':
+            return theme.palette.primary.main;
+        default:
+            return theme.palette.text.secondary;
+    }
+};

package/lib/cjs/panels/logstable/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("./LogsTable"), exports);
+_export_star(require("./LogsTableComponent"), exports);
+_export_star(require("./LogsTableSettingsEditor"), 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/logstable/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/constants.js

@@ -0,0 +1,22 @@
+"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 = 'LokiDatasource';
+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("./loki-time-series-query"), exports);
+_export_star(require("./loki-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/queries/loki-log-query/LokiLogQuery.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LokiLogQuery", {
+    enumerable: true,
+    get: function() {
+        return LokiLogQuery;
+    }
+});
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _getlokilogdata = require("./get-loki-log-data");
+const _LokiLogQueryEditor = require("./LokiLogQueryEditor");
+const LokiLogQuery = {
+    getLogData: _getlokilogdata.getLokiLogData,
+    OptionsEditorComponent: _LokiLogQueryEditor.LokiLogQueryEditor,
+    createInitialOptions: ()=>({
+            query: ''
+        }),
+    dependsOn: (spec)=>{
+        const queryVariables = (0, _pluginsystem.parseVariables)(spec.query);
+        const allVariables = [
+            ...new Set([
+                ...queryVariables
+            ])
+        ];
+        return {
+            variables: allVariables
+        };
+    }
+};

package/lib/cjs/queries/loki-log-query/LokiLogQueryEditor.js

@@ -0,0 +1,157 @@
+// 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, "LokiLogQueryEditor", {
+    enumerable: true,
+    get: function() {
+        return LokiLogQueryEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _material = require("@mui/material");
+const _react = require("react");
+const _immer = require("immer");
+const _components = require("@perses-dev/components");
+const _logqleditor = require("../../components/logql-editor");
+const _model = require("../../model");
+const _constants = require("../constants");
+function LokiLogQueryEditor(props) {
+    const { onChange, value } = props;
+    const { datasource } = value;
+    const datasourceSelectValue = datasource ?? _constants.DEFAULT_DATASOURCE;
+    const selectedDatasource = (0, _pluginsystem.useDatasourceSelectValueToSelector)(datasourceSelectValue, _model.LOKI_DATASOURCE_KIND);
+    // const { data: client } = useDatasourceClient<LokiClient>(selectedDatasource);
+    // const lokiURL = client?.options.datasourceUrl;
+    // Local state for editor value to prevent query_range calls on every keystroke
+    const [localQuery, setLocalQuery] = (0, _react.useState)(value.query);
+    // Update local state when prop changes
+    (0, _react.useEffect)(()=>{
+        setLocalQuery(value.query);
+    }, [
+        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 LokiQuery datasource selection');
+    };
+    // Debounced query change handler to prevent excessive query_range calls
+    const handleQueryChange = (0, _react.useCallback)((newQuery)=>{
+        setLocalQuery(newQuery);
+    }, []);
+    const handleLogsDirection = (_, v)=>onChange((0, _immer.produce)(value, (draft)=>{
+            draft.direction = v;
+        }));
+    // Immediate query execution on Enter or blur
+    const handleQueryExecute = (0, _react.useCallback)((query)=>{
+        onChange({
+            ...value,
+            query
+        });
+    }, [
+        onChange,
+        value
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        spacing: 1.5,
+        paddingBottom: 1,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
+                        sx: {
+                            display: 'block',
+                            marginBottom: '4px',
+                            fontWeight: 500
+                        },
+                        children: "Datasource"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
+                        datasourcePluginKind: _constants.DATASOURCE_KIND,
+                        value: selectedDatasource,
+                        onChange: handleDatasourceChange,
+                        label: "Loki Datasource",
+                        notched: true
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
+                        sx: {
+                            display: 'block',
+                            marginBottom: '4px',
+                            fontWeight: 500
+                        },
+                        children: "LogQL Query"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_logqleditor.LogQLEditor, {
+                        value: localQuery,
+                        onChange: handleQueryChange,
+                        onBlur: ()=>handleQueryExecute(localQuery),
+                        onKeyDown: (event)=>{
+                            if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+                                event.preventDefault();
+                                handleQueryExecute(localQuery);
+                            }
+                        },
+                        placeholder: 'Enter LogQL query (e.g. {job="mysql"} |= "error")'
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+                    label: "Order",
+                    // description="Percentage means thresholds relative to min & max"
+                    control: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ToggleButtonGroup, {
+                        exclusive: true,
+                        value: value?.direction ?? 'backward',
+                        onChange: handleLogsDirection,
+                        sx: {
+                            height: '36px',
+                            marginLeft: '10px',
+                            width: 'max-content'
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
+                                "aria-label": "backward",
+                                value: "backward",
+                                sx: {
+                                    fontWeight: 500
+                                },
+                                children: "Newest first"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
+                                "aria-label": "forward",
+                                value: "forward",
+                                sx: {
+                                    fontWeight: 500
+                                },
+                                children: "Oldest first"
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getLokiLogData", {
+    enumerable: true,
+    get: function() {
+        return getLokiLogData;
+    }
+});
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _constants = require("../constants");
+function convertStreamsToLogs(streams) {
+    const entries = [];
+    streams.forEach((stream)=>{
+        stream.values.forEach(([timestamp, logLine])=>{
+            entries.push({
+                timestamp: Number(timestamp) / 1000000000,
+                line: logLine,
+                labels: stream.stream
+            });
+        });
+    });
+    return {
+        entries,
+        totalCount: entries.length
+    };
+}
+const getLokiLogData = async (spec, context)=>{
+    if (!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.queryRange({
+        query,
+        start: start.getTime().toString(),
+        end: end.getTime().toString(),
+        direction: spec.direction
+    });
+    if (response.data.resultType === 'streams') {
+        const logs = convertStreamsToLogs(response.data.result);
+        return {
+            logs,
+            timeRange: {
+                start,
+                end
+            },
+            metadata: {
+                executedQueryString: query
+            }
+        };
+    }
+    return {
+        logs: {
+            entries: [],
+            totalCount: 0
+        },
+        timeRange: {
+            start,
+            end
+        }
+    };
+};

package/lib/cjs/queries/loki-log-query/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./get-loki-log-data"), exports);
+_export_star(require("./LokiLogQuery"), exports);
+_export_star(require("./LokiLogQueryEditor"), exports);
+_export_star(require("./loki-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/loki-log-query/log-query-plugin-interface.js

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

package/lib/cjs/queries/loki-log-query/loki-log-query-types.js

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

package/lib/cjs/queries/loki-time-series-query/LokiTimeSeriesQuery.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, "LokiTimeSeriesQuery", {
+    enumerable: true,
+    get: function() {
+        return LokiTimeSeriesQuery;
+    }
+});
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _getlokitimeseriesdata = require("./get-loki-time-series-data");
+const _LokiTimeSeriesQueryEditor = require("./LokiTimeSeriesQueryEditor");
+const LokiTimeSeriesQuery = {
+    getTimeSeriesData: _getlokitimeseriesdata.getLokiTimeSeriesData,
+    OptionsEditorComponent: _LokiTimeSeriesQueryEditor.LokiQueryEditor,
+    createInitialOptions: ()=>({
+            query: ''
+        }),
+    dependsOn: (spec)=>{
+        const queryVariables = (0, _pluginsystem.parseVariables)(spec.query);
+        const allVariables = [
+            ...new Set([
+                ...queryVariables
+            ])
+        ];
+        return {
+            variables: allVariables
+        };
+    }
+};