@perses-dev/logs-table-plugin 0.2.0-beta.0 → 0.2.0

package/lib/cjs/env.d.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright 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

package/lib/cjs/getPluginModule.js

@@ -1,3 +1,15 @@
+// Copyright 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/index-federation.js

@@ -40,7 +40,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-// Copyright 2025 The Perses Authors
+// Copyright 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

package/lib/cjs/index.js

@@ -1,3 +1,15 @@
+// Copyright 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/model.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright 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

package/lib/cjs/setup-tests.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright 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

package/lib/cjs/test/mock-query-results.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright 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
@@ -26,6 +26,9 @@ _export(exports, {
     },
     get MOCK_LOGS_QUERY_RESULT () {
         return MOCK_LOGS_QUERY_RESULT;
+    },
+    get MOCK_LOGS_QUERY_RESULTS () {
+        return MOCK_LOGS_QUERY_RESULTS;
     }
 });
 const MOCK_LOGS_QUERY_RESULT = {
@@ -37,7 +40,7 @@ const MOCK_LOGS_QUERY_RESULT = {
         },
         entries: [
             {
-                timestamp: 1666625490,
+                timestamp: 1666625491,
                 line: 'foo',
                 labels: {
                     device: '/dev/vda1',
@@ -49,7 +52,7 @@ const MOCK_LOGS_QUERY_RESULT = {
                 }
             },
             {
-                timestamp: 1666625491,
+                timestamp: 1666625490,
                 line: 'bar',
                 labels: {
                     device: '/dev/vda15',
@@ -63,6 +66,60 @@ const MOCK_LOGS_QUERY_RESULT = {
         ]
     }
 };
+const MOCK_LOGS_QUERY_RESULTS = [
+    {
+        logs: {
+            entries: [
+                {
+                    timestamp: 1769009811.4465687,
+                    line: '{"host":"120.180.160.121", "user-identifier":"-", "datetime":"21/Jan/2026:15:32:31 +0000", "method": "DELETE", "request": "/killer/pixy", "protocol":"HTTP/2.0", "status":200, "bytes":9821, "referer": "http://www.internationalend-to-end.com/e-business/web services"}',
+                    labels: {
+                        app: 'log-generator',
+                        bytes: '9821',
+                        datetime: '21/Jan/2026:15:32:31 +0000',
+                        detected_level: 'unknown',
+                        filename: '/var/log/fake/fake.log',
+                        host: '120.180.160.121',
+                        method: 'DELETE',
+                        protocol: 'HTTP/2.0',
+                        referer: 'http://www.internationalend-to-end.com/e-business/web services',
+                        request: '/killer/pixy',
+                        service_name: 'log-generator',
+                        status: '200',
+                        user_identifier: '-'
+                    }
+                }
+            ],
+            totalCount: 1
+        }
+    },
+    {
+        logs: {
+            entries: [
+                {
+                    timestamp: 1769009890.5294495,
+                    line: '{"host":"18.178.231.77", "user-identifier":"cormier2584", "datetime":"21/Jan/2026:15:33:49 +0000", "method": "POST", "request": "/facilitate/mesh/methodologies/deploy", "protocol":"HTTP/1.1", "status":503, "bytes":9892, "referer": "http://www.direct.com/holistic"}',
+                    labels: {
+                        app: 'log-generator',
+                        bytes: '9892',
+                        datetime: '21/Jan/2026:15:33:49 +0000',
+                        detected_level: 'unknown',
+                        filename: '/var/log/fake/fake.log',
+                        host: '18.178.231.77',
+                        method: 'POST',
+                        protocol: 'HTTP/1.1',
+                        referer: 'http://www.direct.com/holistic',
+                        request: '/facilitate/mesh/methodologies/deploy',
+                        service_name: 'log-generator',
+                        status: '503',
+                        user_identifier: 'cormier2584'
+                    }
+                }
+            ],
+            totalCount: 1
+        }
+    }
+];
 const MOCK_LOGS_QUERY_DEFINITION = {
     kind: 'LogsQuery',
     spec: {

package/lib/cjs/utils/copyHelpers.js

@@ -0,0 +1,70 @@
+// Copyright 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: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get formatLabels () {
+        return formatLabels;
+    },
+    get formatLogAsJson () {
+        return formatLogAsJson;
+    },
+    get formatLogEntries () {
+        return formatLogEntries;
+    },
+    get formatLogEntry () {
+        return formatLogEntry;
+    },
+    get formatLogMessage () {
+        return formatLogMessage;
+    },
+    get formatTimestamp () {
+        return formatTimestamp;
+    }
+});
+function formatTimestamp(timestamp) {
+    const date = typeof timestamp === 'number' ? new Date(timestamp * 1000) : parseTimestamp(timestamp);
+    return date.toISOString();
+}
+/**
+ * Parses a timestamp string to a Date object
+ */ function parseTimestamp(timestamp) {
+    return /^\d+$/.test(timestamp) ? new Date(parseInt(timestamp) * 1000) : new Date(Date.parse(timestamp));
+}
+function formatLabels(labels) {
+    const entries = Object.entries(labels);
+    if (entries.length === 0) return '';
+    return entries.map(([key, value])=>`${key}="${value}"`).join(' ');
+}
+function formatLogEntry(log) {
+    const timestamp = formatTimestamp(log.timestamp);
+    const labels = formatLabels(log.labels || {});
+    return labels ? `${timestamp} ${labels} ${log.line}` : `${timestamp} ${log.line}`;
+}
+function formatLogMessage(log) {
+    return log.line;
+}
+function formatLogAsJson(log) {
+    return JSON.stringify(log, null, 2);
+}
+function formatLogEntries(logs) {
+    return logs.map(formatLogEntry).join('\n');
+}

package/lib/components/EmptyLogsState.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// Copyright 2025 The Perses Authors
+// Copyright 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

package/lib/components/EmptyLogsState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EmptyLogsState.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport { Box, Typography, useTheme } from '@mui/material';\n\ninterface EmptyLogsStateProps {\n  message?: string;\n}\n\nexport const EmptyLogsState: React.FC<EmptyLogsStateProps> = ({ message = 'No logs to display' }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: '200px',\n      }}\n    >\n      <Typography\n        variant=\"body2\"\n        sx={{\n          color: theme.palette.text.secondary,\n          fontSize: '14px',\n        }}\n      >\n        {message}\n      </Typography>\n    </Box>\n  );\n};\n"],"names":["React","Box","Typography","useTheme","EmptyLogsState","message","theme","sx","display","alignItems","justifyContent","height","variant","color","palette","text","secondary","fontSize"],"mappings":";AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,SAASC,GAAG,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,gBAAgB;AAM1D,OAAO,MAAMC,iBAAgD,CAAC,EAAEC,UAAU,oBAAoB,EAAE;IAC9F,MAAMC,QAAQH;IAEd,qBACE,KAACF;QACCM,IAAI;YACFC,SAAS;YACTC,YAAY;YACZC,gBAAgB;YAChBC,QAAQ;QACV;kBAEA,cAAA,KAACT;YACCU,SAAQ;YACRL,IAAI;gBACFM,OAAOP,MAAMQ,OAAO,CAACC,IAAI,CAACC,SAAS;gBACnCC,UAAU;YACZ;sBAECZ;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../src/components/EmptyLogsState.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport { Box, Typography, useTheme } from '@mui/material';\n\ninterface EmptyLogsStateProps {\n  message?: string;\n}\n\nexport const EmptyLogsState: React.FC<EmptyLogsStateProps> = ({ message = 'No logs to display' }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: '200px',\n      }}\n    >\n      <Typography\n        variant=\"body2\"\n        sx={{\n          color: theme.palette.text.secondary,\n          fontSize: '14px',\n        }}\n      >\n        {message}\n      </Typography>\n    </Box>\n  );\n};\n"],"names":["React","Box","Typography","useTheme","EmptyLogsState","message","theme","sx","display","alignItems","justifyContent","height","variant","color","palette","text","secondary","fontSize"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,SAASC,GAAG,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,gBAAgB;AAM1D,OAAO,MAAMC,iBAAgD,CAAC,EAAEC,UAAU,oBAAoB,EAAE;IAC9F,MAAMC,QAAQH;IAEd,qBACE,KAACF;QACCM,IAAI;YACFC,SAAS;YACTC,YAAY;YACZC,gBAAgB;YAChBC,QAAQ;QACV;kBAEA,cAAA,KAACT;YACCU,SAAQ;YACRL,IAAI;gBACFM,OAAOP,MAAMQ,OAAO,CAACC,IAAI,CAACC,SAAS;gBACnCC,UAAU;YACZ;sBAECZ;;;AAIT,EAAE"}

package/lib/components/LogRow/LogDetailsTable.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Copyright 2025 The Perses Authors
+// Copyright 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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/LogRow/LogDetailsTable.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport { Table, TableBody, TableRow, TableCell, useTheme, alpha } from '@mui/material';\nimport { Labels } from '@perses-dev/core';\n\ninterface LogDetailsTableProps {\n  log: Labels;\n}\n\nexport const LogDetailsTable: React.FC<LogDetailsTableProps> = ({ log }) => {\n  const theme = useTheme();\n\n  return (\n    <Table\n      size=\"small\"\n      sx={{\n        border: `1px solid ${theme.palette.divider}`,\n        '& .MuiTableCell-root': {\n          border: 'none',\n          padding: '6px 8px',\n          fontSize: '12px',\n        },\n      }}\n    >\n      <TableBody>\n        {Object.entries(log).map(([key, value]) => (\n          <TableRow\n            key={key}\n            sx={{\n              '&:hover': {\n                backgroundColor: alpha(theme.palette.action.hover, 0.04),\n              },\n            }}\n          >\n            <TableCell\n              sx={{\n                color: theme.palette.text.secondary,\n                fontWeight: 500,\n                width: '33%',\n              }}\n            >\n              {key}\n            </TableCell>\n            <TableCell\n              sx={{\n                color: theme.palette.text.primary,\n                wordBreak: 'break-word',\n                width: '67%',\n              }}\n            >\n              {value !== undefined && value !== null && value !== '' ? value : '--'}\n            </TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n};\n"],"names":["React","Table","TableBody","TableRow","TableCell","useTheme","alpha","LogDetailsTable","log","theme","size","sx","border","palette","divider","padding","fontSize","Object","entries","map","key","value","backgroundColor","action","hover","color","text","secondary","fontWeight","width","primary","wordBreak","undefined"],"mappings":";AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,SAASC,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,KAAK,QAAQ,gBAAgB;AAOvF,OAAO,MAAMC,kBAAkD,CAAC,EAAEC,GAAG,EAAE;IACrE,MAAMC,QAAQJ;IAEd,qBACE,KAACJ;QACCS,MAAK;QACLC,IAAI;YACFC,QAAQ,CAAC,UAAU,EAAEH,MAAMI,OAAO,CAACC,OAAO,EAAE;YAC5C,wBAAwB;gBACtBF,QAAQ;gBACRG,SAAS;gBACTC,UAAU;YACZ;QACF;kBAEA,cAAA,KAACd;sBACEe,OAAOC,OAAO,CAACV,KAAKW,GAAG,CAAC,CAAC,CAACC,KAAKC,MAAM,iBACpC,MAAClB;oBAECQ,IAAI;wBACF,WAAW;4BACTW,iBAAiBhB,MAAMG,MAAMI,OAAO,CAACU,MAAM,CAACC,KAAK,EAAE;wBACrD;oBACF;;sCAEA,KAACpB;4BACCO,IAAI;gCACFc,OAAOhB,MAAMI,OAAO,CAACa,IAAI,CAACC,SAAS;gCACnCC,YAAY;gCACZC,OAAO;4BACT;sCAECT;;sCAEH,KAAChB;4BACCO,IAAI;gCACFc,OAAOhB,MAAMI,OAAO,CAACa,IAAI,CAACI,OAAO;gCACjCC,WAAW;gCACXF,OAAO;4BACT;sCAECR,UAAUW,aAAaX,UAAU,QAAQA,UAAU,KAAKA,QAAQ;;;mBAvB9DD;;;AA8BjB,EAAE"}
+{"version":3,"sources":["../../../../src/components/LogRow/LogDetailsTable.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport { Table, TableBody, TableRow, TableCell, useTheme, alpha } from '@mui/material';\nimport { Labels } from '@perses-dev/core';\n\ninterface LogDetailsTableProps {\n  log: Labels;\n}\n\nexport const LogDetailsTable: React.FC<LogDetailsTableProps> = ({ log }) => {\n  const theme = useTheme();\n\n  return (\n    <Table\n      size=\"small\"\n      sx={{\n        border: `1px solid ${theme.palette.divider}`,\n        '& .MuiTableCell-root': {\n          border: 'none',\n          padding: '6px 8px',\n          fontSize: '12px',\n        },\n      }}\n    >\n      <TableBody>\n        {Object.entries(log).map(([key, value]) => (\n          <TableRow\n            key={key}\n            sx={{\n              '&:hover': {\n                backgroundColor: alpha(theme.palette.action.hover, 0.04),\n              },\n            }}\n          >\n            <TableCell\n              sx={{\n                color: theme.palette.text.secondary,\n                fontWeight: 500,\n                width: '33%',\n              }}\n            >\n              {key}\n            </TableCell>\n            <TableCell\n              sx={{\n                color: theme.palette.text.primary,\n                wordBreak: 'break-word',\n                width: '67%',\n              }}\n            >\n              {value !== undefined && value !== null && value !== '' ? value : '--'}\n            </TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n};\n"],"names":["React","Table","TableBody","TableRow","TableCell","useTheme","alpha","LogDetailsTable","log","theme","size","sx","border","palette","divider","padding","fontSize","Object","entries","map","key","value","backgroundColor","action","hover","color","text","secondary","fontWeight","width","primary","wordBreak","undefined"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,SAASC,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,KAAK,QAAQ,gBAAgB;AAOvF,OAAO,MAAMC,kBAAkD,CAAC,EAAEC,GAAG,EAAE;IACrE,MAAMC,QAAQJ;IAEd,qBACE,KAACJ;QACCS,MAAK;QACLC,IAAI;YACFC,QAAQ,CAAC,UAAU,EAAEH,MAAMI,OAAO,CAACC,OAAO,EAAE;YAC5C,wBAAwB;gBACtBF,QAAQ;gBACRG,SAAS;gBACTC,UAAU;YACZ;QACF;kBAEA,cAAA,KAACd;sBACEe,OAAOC,OAAO,CAACV,KAAKW,GAAG,CAAC,CAAC,CAACC,KAAKC,MAAM,iBACpC,MAAClB;oBAECQ,IAAI;wBACF,WAAW;4BACTW,iBAAiBhB,MAAMG,MAAMI,OAAO,CAACU,MAAM,CAACC,KAAK,EAAE;wBACrD;oBACF;;sCAEA,KAACpB;4BACCO,IAAI;gCACFc,OAAOhB,MAAMI,OAAO,CAACa,IAAI,CAACC,SAAS;gCACnCC,YAAY;gCACZC,OAAO;4BACT;sCAECT;;sCAEH,KAAChB;4BACCO,IAAI;gCACFc,OAAOhB,MAAMI,OAAO,CAACa,IAAI,CAACI,OAAO;gCACjCC,WAAW;gCACXF,OAAO;4BACT;sCAECR,UAAUW,aAAaX,UAAU,QAAQA,UAAU,KAAKA,QAAQ;;;mBAvB9DD;;;AA8BjB,EAAE"}

package/lib/components/LogRow/LogRow.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { LogEntry } from '@perses-dev/core';
 interface LogRowProps {
     log?: LogEntry;
@@ -8,6 +8,9 @@ interface LogRowProps {
     isExpandable?: boolean;
     showTime?: boolean;
     allowWrap?: boolean;
+    isSelected?: boolean;
+    onSelect?: (index: number, event: React.MouseEvent) => void;
+    itemActionButtons?: ReactNode[];
 }
 export declare const LogRow: React.NamedExoticComponent<LogRowProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"LogRow.d.ts","sourceRoot":"","sources":["../../../../src/components/LogRow/LogRow.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAK5C,UAAU,WAAW;IACnB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAgFD,eAAO,MAAM,MAAM,yCAAsB,CAAC"}
+{"version":3,"file":"LogRow.d.ts","sourceRoot":"","sources":["../../../../src/components/LogRow/LogRow.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,EAAkD,SAAS,EAAE,MAAM,OAAO,CAAC;AAkBzF,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAS5C,UAAU,WAAW;IACnB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5D,iBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC;CACjC;AAqTD,eAAO,MAAM,MAAM,yCAAsB,CAAC"}

package/lib/components/LogRow/LogRow.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// Copyright 2025 The Perses Authors
+// Copyright 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
@@ -11,17 +11,39 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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.
-import React, { memo, useCallback } from 'react';
-import { Box, Collapse, useTheme } from '@mui/material';
+import React, { memo, useCallback, useState, useRef, useEffect } from 'react';
+import { Box, Collapse, useTheme, IconButton, Tooltip, Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material';
 import ChevronRight from 'mdi-material-ui/ChevronRight';
+import ContentCopy from 'mdi-material-ui/ContentCopy';
+import ChevronDown from 'mdi-material-ui/ChevronDown';
+import FormatQuoteClose from 'mdi-material-ui/FormatQuoteClose';
+import CodeJson from 'mdi-material-ui/CodeJson';
+import Check from 'mdi-material-ui/Check';
+import { useSeverityColor } from '../hooks/useSeverity';
+import { formatLogEntry, formatLogMessage, formatLogAsJson } from '../../utils/copyHelpers';
 import { LogTimestamp } from './LogTimestamp';
 import { LogRowContainer, LogRowContent, ExpandButton, LogText } from './LogsStyles';
 import { LogDetailsTable } from './LogDetailsTable';
-const DefaultLogRow = ({ log, isExpanded, index, onToggle, isExpandable = true, showTime = false, allowWrap = false })=>{
+const COPY_SUCCESS_DURATION_MS = 1500;
+const DefaultLogRow = ({ log, isExpanded, index, onToggle, isExpandable = true, showTime = false, allowWrap = false, isSelected = false, onSelect, itemActionButtons })=>{
     const theme = useTheme();
-    const severityColor = theme.palette.text.secondary;
-    const handleToggle = useCallback(()=>{
+    const severityColor = useSeverityColor(log);
+    const [isHovered, setIsHovered] = useState(false);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [copySuccess, setCopySuccess] = useState(false);
+    const rowRef = useRef(null);
+    const copyTimeoutRef = useRef(null);
+    // Cleanup timeout on unmount
+    useEffect(()=>{
+        return ()=>{
+            if (copyTimeoutRef.current) {
+                window.clearTimeout(copyTimeoutRef.current);
+            }
+        };
+    }, []);
+    const handleToggle = useCallback((e)=>{
         if (isExpandable) {
+            e.stopPropagation();
             onToggle(index);
         }
     }, [
@@ -29,20 +51,80 @@ const DefaultLogRow = ({ log, isExpanded, index, onToggle, isExpandable = true,
         onToggle,
         index
     ]);
+    const handleRowMouseDown = useCallback((e)=>{
+        if (onSelect) {
+            onSelect(index, e);
+        }
+    }, [
+        onSelect,
+        index
+    ]);
+    const handleOpenMenu = useCallback((e)=>{
+        e.stopPropagation();
+        setAnchorEl(e.currentTarget);
+    }, []);
+    const handleCloseMenu = useCallback(()=>{
+        setAnchorEl(null);
+        setIsHovered(false);
+    }, []);
+    const handleCopy = useCallback(async (format)=>{
+        if (!log) return;
+        let text;
+        switch(format){
+            case 'message':
+                text = formatLogMessage(log);
+                break;
+            case 'json':
+                text = formatLogAsJson(log);
+                break;
+            case 'full':
+            default:
+                text = formatLogEntry(log);
+        }
+        await navigator.clipboard.writeText(text);
+        setCopySuccess(true);
+        handleCloseMenu();
+        // Clear existing timeout
+        if (copyTimeoutRef.current) {
+            window.clearTimeout(copyTimeoutRef.current);
+        }
+        // Reset success state after configured duration
+        copyTimeoutRef.current = window.setTimeout(()=>{
+            setCopySuccess(false);
+        }, COPY_SUCCESS_DURATION_MS);
+    }, [
+        log,
+        handleCloseMenu
+    ]);
     if (!log) return null;
+    const hasRowActions = itemActionButtons && itemActionButtons.length > 0;
     return /*#__PURE__*/ _jsxs(LogRowContainer, {
         severityColor: severityColor,
+        ref: rowRef,
+        onMouseEnter: ()=>setIsHovered(true),
+        onMouseLeave: ()=>{
+            if (!anchorEl) {
+                setIsHovered(false);
+            }
+        },
+        "data-log-index": index,
+        "data-testid": `log-row-container-${index}`,
         children: [
             /*#__PURE__*/ _jsxs(LogRowContent, {
-                onClick: handleToggle,
+                onMouseDown: handleRowMouseDown,
                 isExpandable: isExpandable,
+                isHighlighted: Boolean(anchorEl),
+                hasRowActions: hasRowActions,
+                isSelected: isSelected,
                 children: [
                     isExpandable && /*#__PURE__*/ _jsx(Box, {
+                        onClick: handleToggle,
                         sx: {
                             display: 'flex',
                             alignItems: 'center',
                             width: '16px',
-                            justifyContent: 'center'
+                            justifyContent: 'center',
+                            cursor: 'pointer'
                         },
                         children: /*#__PURE__*/ _jsx(ExpandButton, {
                             size: "small",
@@ -57,17 +139,182 @@ const DefaultLogRow = ({ log, isExpanded, index, onToggle, isExpandable = true,
                     /*#__PURE__*/ _jsx(LogTimestamp, {
                         timestamp: log.timestamp
                     }),
-                    /*#__PURE__*/ _jsx(Box, {
+                    /*#__PURE__*/ _jsxs(Box, {
                         sx: {
                             display: 'flex',
                             gap: '10px',
-                            marginLeft: '36px'
+                            marginLeft: '36px',
+                            alignItems: 'center'
                         },
-                        children: /*#__PURE__*/ _jsx(LogText, {
-                            variant: "body2",
-                            allowWrap: allowWrap,
-                            children: log.line
-                        })
+                        children: [
+                            /*#__PURE__*/ _jsx(LogText, {
+                                variant: "body2",
+                                allowWrap: allowWrap,
+                                children: log.line
+                            }),
+                            /*#__PURE__*/ _jsx(Tooltip, {
+                                title: copySuccess ? 'Copied!' : 'Copy options',
+                                children: /*#__PURE__*/ _jsx(IconButton, {
+                                    size: "small",
+                                    onClick: handleOpenMenu,
+                                    "aria-label": "Copy log options",
+                                    sx: {
+                                        padding: '4px',
+                                        marginLeft: 'auto',
+                                        color: copySuccess ? theme.palette.success.main : theme.palette.text.secondary,
+                                        opacity: isHovered || Boolean(anchorEl) || copySuccess ? 1 : 0,
+                                        pointerEvents: isHovered || Boolean(anchorEl) || copySuccess ? 'auto' : 'none',
+                                        transition: 'opacity 0.08s ease, color 0.2s ease',
+                                        '&:hover': {
+                                            color: copySuccess ? theme.palette.success.main : theme.palette.primary.main,
+                                            backgroundColor: theme.palette.action.hover
+                                        },
+                                        borderRadius: '4px',
+                                        display: 'flex',
+                                        gap: '2px'
+                                    },
+                                    children: copySuccess ? /*#__PURE__*/ _jsx(Check, {
+                                        sx: {
+                                            fontSize: '14px'
+                                        }
+                                    }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(ContentCopy, {
+                                                sx: {
+                                                    fontSize: '14px'
+                                                }
+                                            }),
+                                            /*#__PURE__*/ _jsx(ChevronDown, {
+                                                sx: {
+                                                    fontSize: '12px'
+                                                }
+                                            })
+                                        ]
+                                    })
+                                })
+                            }),
+                            hasRowActions && /*#__PURE__*/ _jsx(Box, {
+                                sx: {
+                                    display: 'flex',
+                                    gap: '4px',
+                                    alignItems: 'center',
+                                    opacity: isHovered || Boolean(anchorEl) ? 1 : 0,
+                                    pointerEvents: isHovered || Boolean(anchorEl) ? 'auto' : 'none',
+                                    transition: 'opacity 0.08s ease'
+                                },
+                                children: itemActionButtons
+                            }),
+                            /*#__PURE__*/ _jsxs(Menu, {
+                                anchorEl: anchorEl,
+                                open: Boolean(anchorEl),
+                                onClose: handleCloseMenu,
+                                onClick: (e)=>e.stopPropagation(),
+                                "aria-label": "Copy format options",
+                                anchorOrigin: {
+                                    vertical: 'bottom',
+                                    horizontal: 'right'
+                                },
+                                transformOrigin: {
+                                    vertical: 'top',
+                                    horizontal: 'right'
+                                },
+                                slotProps: {
+                                    paper: {
+                                        sx: {
+                                            mt: 0.5,
+                                            minWidth: 180,
+                                            boxShadow: theme.shadows[3]
+                                        }
+                                    }
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsxs(MenuItem, {
+                                        onClick: ()=>handleCopy('full'),
+                                        sx: {
+                                            py: 1,
+                                            '&:hover': {
+                                                backgroundColor: theme.palette.action.hover
+                                            }
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(ListItemIcon, {
+                                                children: /*#__PURE__*/ _jsx(ContentCopy, {
+                                                    fontSize: "small"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(ListItemText, {
+                                                primary: "Copy log",
+                                                secondary: "Timestamp + labels + message",
+                                                slotProps: {
+                                                    primary: {
+                                                        fontSize: '14px'
+                                                    },
+                                                    secondary: {
+                                                        fontSize: '11px'
+                                                    }
+                                                }
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs(MenuItem, {
+                                        onClick: ()=>handleCopy('message'),
+                                        sx: {
+                                            py: 1,
+                                            '&:hover': {
+                                                backgroundColor: theme.palette.action.hover
+                                            }
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(ListItemIcon, {
+                                                children: /*#__PURE__*/ _jsx(FormatQuoteClose, {
+                                                    fontSize: "small"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(ListItemText, {
+                                                primary: "Copy message",
+                                                secondary: "Message text only",
+                                                slotProps: {
+                                                    primary: {
+                                                        fontSize: '14px'
+                                                    },
+                                                    secondary: {
+                                                        fontSize: '11px'
+                                                    }
+                                                }
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs(MenuItem, {
+                                        onClick: ()=>handleCopy('json'),
+                                        sx: {
+                                            py: 1,
+                                            '&:hover': {
+                                                backgroundColor: theme.palette.action.hover
+                                            }
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(ListItemIcon, {
+                                                children: /*#__PURE__*/ _jsx(CodeJson, {
+                                                    fontSize: "small"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(ListItemText, {
+                                                primary: "Copy as JSON",
+                                                secondary: "Full log entry",
+                                                slotProps: {
+                                                    primary: {
+                                                        fontSize: '14px'
+                                                    },
+                                                    secondary: {
+                                                        fontSize: '11px'
+                                                    }
+                                                }
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
                     })
                 ]
             }),