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

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

@@ -21,13 +21,66 @@ Object.defineProperty(exports, "LogDetailsTable", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _material = require("@mui/material");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
+require("./ansiColors.css");
+const _ansi = require("../../utils/ansi");
+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 AnsiValue = ({ value })=>{
+    const ansiHtml = (0, _react.useMemo)(()=>(0, _ansi.ansiToSanitizedHtml)(value), [
+        value
+    ]);
+    if (ansiHtml) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+            dangerouslySetInnerHTML: {
+                __html: ansiHtml
+            }
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: value
+    });
+};
 const LogDetailsTable = ({ log })=>{
     const theme = (0, _material.useTheme)();
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Table, {
@@ -62,7 +115,9 @@ const LogDetailsTable = ({ log })=>{
                                 wordBreak: 'break-word',
                                 width: '67%'
                             },
-                            children: value !== undefined && value !== null && value !== '' ? value : '--'
+                            children: value !== undefined && value !== null && value !== '' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(AnsiValue, {
+                                value: value
+                            }) : '--'
                         })
                     ]
                 }, key))

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

@@ -21,19 +21,21 @@ Object.defineProperty(exports, "LogRow", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _material = require("@mui/material");
+const _Check = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Check"));
+const _ChevronDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronDown"));
 const _ChevronRight = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronRight"));
+const _CodeJson = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/CodeJson"));
 const _ContentCopy = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ContentCopy"));
-const _ChevronDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronDown"));
 const _FormatQuoteClose = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/FormatQuoteClose"));
-const _CodeJson = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/CodeJson"));
-const _Check = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Check"));
-const _useSeverity = require("../hooks/useSeverity");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _ansi = require("../../utils/ansi");
 const _copyHelpers = require("../../utils/copyHelpers");
+const _useSeverity = require("../hooks/useSeverity");
+const _LogDetailsTable = require("./LogDetailsTable");
 const _LogTimestamp = require("./LogTimestamp");
 const _LogsStyles = require("./LogsStyles");
-const _LogDetailsTable = require("./LogDetailsTable");
+require("./ansiColors.css");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -84,6 +86,9 @@ const COPY_SUCCESS_DURATION_MS = 1500;
 const DefaultLogRow = ({ log, isExpanded, index, onToggle, isExpandable = true, showTime = false, allowWrap = false, isSelected = false, onSelect, itemActionButtons })=>{
     const theme = (0, _material.useTheme)();
     const severityColor = (0, _useSeverity.useSeverityColor)(log);
+    const ansiHtml = (0, _react.useMemo)(()=>log ? (0, _ansi.ansiToSanitizedHtml)(log.line) : null, [
+        log
+    ]);
     const [isHovered, setIsHovered] = (0, _react.useState)(false);
     const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
     const [copySuccess, setCopySuccess] = (0, _react.useState)(false);
@@ -203,7 +208,13 @@ const DefaultLogRow = ({ log, isExpanded, index, onToggle, isExpandable = true,
                             alignItems: 'center'
                         },
                         children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_LogsStyles.LogText, {
+                            ansiHtml ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_LogsStyles.LogText, {
+                                variant: "body2",
+                                allowWrap: allowWrap,
+                                dangerouslySetInnerHTML: {
+                                    __html: ansiHtml
+                                }
+                            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_LogsStyles.LogText, {
                                 variant: "body2",
                                 allowWrap: allowWrap,
                                 children: log.line

package/lib/cjs/components/VirtualizedLogsList.js

@@ -78,8 +78,8 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const PERSES_LOGSTABLE_HINTS_DISMISSED = 'PERSES_LOGSTABLE_HINTS_DISMISSED';
 const COPY_TOAST_DURATION_MS = 5000;
-// Detect Mac for keyboard shortcuts display
-const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent);
+// Platform-aware modifier key display using TanStack's formatForDisplay
+const modKeyDisplay = (0, _dashboards.formatForDisplay)('Mod');
 const VirtualizedLogsList = ({ logs, spec, expandedRows, onToggleExpand })=>{
     const theme = (0, _material.useTheme)();
     const [selectedRows, setSelectedRows] = (0, _react.useState)(new Set());
@@ -351,7 +351,7 @@ const VirtualizedLogsList = ({ logs, spec, expandedRows, onToggleExpand })=>{
                                             opacity: 0.8
                                         },
                                         children: [
-                                            isMac ? '⌘' : 'Ctrl',
+                                            modKeyDisplay,
                                             "+Click to select"
                                         ]
                                     }),
@@ -382,7 +382,7 @@ const VirtualizedLogsList = ({ logs, spec, expandedRows, onToggleExpand })=>{
                                             opacity: 0.8
                                         },
                                         children: [
-                                            isMac ? '⌘' : 'Ctrl',
+                                            modKeyDisplay,
                                             "+C to copy"
                                         ]
                                     }),

package/lib/cjs/utils/ansi.js

@@ -0,0 +1,60 @@
+// 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 ansiToSanitizedHtml () {
+        return ansiToSanitizedHtml;
+    },
+    get stripAnsi () {
+        return stripAnsi;
+    }
+});
+const _ansi_up = require("ansi_up");
+const _dompurify = /*#__PURE__*/ _interop_require_default(require("dompurify"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const ansiUp = new _ansi_up.AnsiUp();
+ansiUp.use_classes = true;
+const ESC = String.fromCharCode(27);
+const ANSI_REGEX = new RegExp(ESC + '\\[[0-9;]*m');
+function ansiToSanitizedHtml(text) {
+    if (!ANSI_REGEX.test(text)) {
+        return null;
+    }
+    const html = ansiUp.ansi_to_html(text);
+    return _dompurify.default.sanitize(html, {
+        ALLOWED_TAGS: [
+            'span'
+        ],
+        ALLOWED_ATTR: [
+            'class',
+            'style'
+        ]
+    });
+}
+const ANSI_STRIP_REGEX = new RegExp(ESC + '\\[[0-9;]*m', 'g');
+function stripAnsi(text) {
+    return text.replace(ANSI_STRIP_REGEX, '');
+}

package/lib/cjs/utils/copyHelpers.js

@@ -40,6 +40,7 @@ _export(exports, {
         return formatTimestamp;
     }
 });
+const _ansi = require("./ansi");
 function formatTimestamp(timestamp) {
     const date = typeof timestamp === 'number' ? new Date(timestamp * 1000) : parseTimestamp(timestamp);
     return date.toISOString();
@@ -57,10 +58,11 @@ function formatLabels(labels) {
 function formatLogEntry(log) {
     const timestamp = formatTimestamp(log.timestamp);
     const labels = formatLabels(log.labels || {});
-    return labels ? `${timestamp} ${labels} ${log.line}` : `${timestamp} ${log.line}`;
+    const cleanLine = (0, _ansi.stripAnsi)(log.line);
+    return labels ? `${timestamp} ${labels} ${cleanLine}` : `${timestamp} ${cleanLine}`;
 }
 function formatLogMessage(log) {
-    return log.line;
+    return (0, _ansi.stripAnsi)(log.line);
 }
 function formatLogAsJson(log) {
     return JSON.stringify(log, null, 2);

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Labels } from '@perses-dev/core';
+import './ansiColors.css';
+import { Labels } from '@perses-dev/spec';
 interface LogDetailsTableProps {
     log: Labels;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"LogDetailsTable.d.ts","sourceRoot":"","sources":["../../../../src/components/LogRow/LogDetailsTable.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,UAAU,oBAAoB;IAC5B,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgD1D,CAAC"}
+{"version":3,"file":"LogDetailsTable.d.ts","sourceRoot":"","sources":["../../../../src/components/LogRow/LogDetailsTable.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAW1C,UAAU,oBAAoB;IAC5B,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgD1D,CAAC"}

package/lib/components/LogRow/LogDetailsTable.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // 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.
@@ -11,8 +11,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 from 'react';
+import React, { useMemo } from 'react';
 import { Table, TableBody, TableRow, TableCell, useTheme, alpha } from '@mui/material';
+import './ansiColors.css';
+import { ansiToSanitizedHtml } from '../../utils/ansi';
+const AnsiValue = ({ value })=>{
+    const ansiHtml = useMemo(()=>ansiToSanitizedHtml(value), [
+        value
+    ]);
+    if (ansiHtml) {
+        return /*#__PURE__*/ _jsx("span", {
+            dangerouslySetInnerHTML: {
+                __html: ansiHtml
+            }
+        });
+    }
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: value
+    });
+};
 export const LogDetailsTable = ({ log })=>{
     const theme = useTheme();
     return /*#__PURE__*/ _jsx(Table, {
@@ -47,7 +64,9 @@ export const LogDetailsTable = ({ log })=>{
                                 wordBreak: 'break-word',
                                 width: '67%'
                             },
-                            children: value !== undefined && value !== null && value !== '' ? value : '--'
+                            children: value !== undefined && value !== null && value !== '' ? /*#__PURE__*/ _jsx(AnsiValue, {
+                                value: value
+                            }) : '--'
                         })
                     ]
                 }, key))

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

@@ -1 +1 @@
-{"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"}
+{"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, { useMemo } from 'react';\nimport { Table, TableBody, TableRow, TableCell, useTheme, alpha } from '@mui/material';\nimport './ansiColors.css';\nimport { Labels } from '@perses-dev/spec';\nimport { ansiToSanitizedHtml } from '../../utils/ansi';\n\nconst AnsiValue: React.FC<{ value: string }> = ({ value }) => {\n  const ansiHtml = useMemo(() => ansiToSanitizedHtml(value), [value]);\n  if (ansiHtml) {\n    return <span dangerouslySetInnerHTML={{ __html: ansiHtml }} />;\n  }\n  return <>{value}</>;\n};\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 !== '' ? <AnsiValue value={value} /> : '--'}\n            </TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n};\n"],"names":["React","useMemo","Table","TableBody","TableRow","TableCell","useTheme","alpha","ansiToSanitizedHtml","AnsiValue","value","ansiHtml","span","dangerouslySetInnerHTML","__html","LogDetailsTable","log","theme","size","sx","border","palette","divider","padding","fontSize","Object","entries","map","key","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,SAASC,OAAO,QAAQ,QAAQ;AACvC,SAASC,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,KAAK,QAAQ,gBAAgB;AACvF,OAAO,mBAAmB;AAE1B,SAASC,mBAAmB,QAAQ,mBAAmB;AAEvD,MAAMC,YAAyC,CAAC,EAAEC,KAAK,EAAE;IACvD,MAAMC,WAAWV,QAAQ,IAAMO,oBAAoBE,QAAQ;QAACA;KAAM;IAClE,IAAIC,UAAU;QACZ,qBAAO,KAACC;YAAKC,yBAAyB;gBAAEC,QAAQH;YAAS;;IAC3D;IACA,qBAAO;kBAAGD;;AACZ;AAMA,OAAO,MAAMK,kBAAkD,CAAC,EAAEC,GAAG,EAAE;IACrE,MAAMC,QAAQX;IAEd,qBACE,KAACJ;QACCgB,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,KAACrB;sBACEsB,OAAOC,OAAO,CAACV,KAAKW,GAAG,CAAC,CAAC,CAACC,KAAKlB,MAAM,iBACpC,MAACN;oBAECe,IAAI;wBACF,WAAW;4BACTU,iBAAiBtB,MAAMU,MAAMI,OAAO,CAACS,MAAM,CAACC,KAAK,EAAE;wBACrD;oBACF;;sCAEA,KAAC1B;4BACCc,IAAI;gCACFa,OAAOf,MAAMI,OAAO,CAACY,IAAI,CAACC,SAAS;gCACnCC,YAAY;gCACZC,OAAO;4BACT;sCAECR;;sCAEH,KAACvB;4BACCc,IAAI;gCACFa,OAAOf,MAAMI,OAAO,CAACY,IAAI,CAACI,OAAO;gCACjCC,WAAW;gCACXF,OAAO;4BACT;sCAEC1B,UAAU6B,aAAa7B,UAAU,QAAQA,UAAU,mBAAK,KAACD;gCAAUC,OAAOA;iCAAY;;;mBAvBpFkB;;;AA8BjB,EAAE"}

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

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
-import { LogEntry } from '@perses-dev/core';
+import { LogEntry } from '@perses-dev/spec';
+import './ansiColors.css';
 interface LogRowProps {
     log?: LogEntry;
     index: number;

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,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"}
+{"version":3,"file":"LogRow.d.ts","sourceRoot":"","sources":["../../../../src/components/LogRow/LogRow.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,EAAQ,SAAS,EAAqD,MAAM,OAAO,CAAC;AAClG,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAO5C,OAAO,kBAAkB,CAAC;AAI1B,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;AA0TD,eAAO,MAAM,MAAM,yCAAsB,CAAC"}

package/lib/components/LogRow/LogRow.js

@@ -11,23 +11,28 @@ 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, useState, useRef, useEffect } from 'react';
-import { Box, Collapse, useTheme, IconButton, Tooltip, Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material';
+import { Box, Collapse, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Tooltip, useTheme } from '@mui/material';
+import Check from 'mdi-material-ui/Check';
+import ChevronDown from 'mdi-material-ui/ChevronDown';
 import ChevronRight from 'mdi-material-ui/ChevronRight';
+import CodeJson from 'mdi-material-ui/CodeJson';
 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 React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ansiToSanitizedHtml } from '../../utils/ansi';
+import { formatLogAsJson, formatLogEntry, formatLogMessage } from '../../utils/copyHelpers';
 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';
+import { LogTimestamp } from './LogTimestamp';
+import { ExpandButton, LogRowContainer, LogRowContent, LogText } from './LogsStyles';
+import './ansiColors.css';
 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 = useSeverityColor(log);
+    const ansiHtml = useMemo(()=>log ? ansiToSanitizedHtml(log.line) : null, [
+        log
+    ]);
     const [isHovered, setIsHovered] = useState(false);
     const [anchorEl, setAnchorEl] = useState(null);
     const [copySuccess, setCopySuccess] = useState(false);
@@ -147,7 +152,13 @@ const DefaultLogRow = ({ log, isExpanded, index, onToggle, isExpandable = true,
                             alignItems: 'center'
                         },
                         children: [
-                            /*#__PURE__*/ _jsx(LogText, {
+                            ansiHtml ? /*#__PURE__*/ _jsx(LogText, {
+                                variant: "body2",
+                                allowWrap: allowWrap,
+                                dangerouslySetInnerHTML: {
+                                    __html: ansiHtml
+                                }
+                            }) : /*#__PURE__*/ _jsx(LogText, {
                                 variant: "body2",
                                 allowWrap: allowWrap,
                                 children: log.line

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/LogRow/LogRow.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, { memo, useCallback, useState, useRef, useEffect, ReactNode } from 'react';\nimport {\n  Box,\n  Collapse,\n  useTheme,\n  IconButton,\n  Tooltip,\n  Menu,\n  MenuItem,\n  ListItemIcon,\n  ListItemText,\n} from '@mui/material';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport ContentCopy from 'mdi-material-ui/ContentCopy';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport FormatQuoteClose from 'mdi-material-ui/FormatQuoteClose';\nimport CodeJson from 'mdi-material-ui/CodeJson';\nimport Check from 'mdi-material-ui/Check';\nimport { LogEntry } from '@perses-dev/core';\nimport { useSeverityColor } from '../hooks/useSeverity';\nimport { formatLogEntry, formatLogMessage, formatLogAsJson } from '../../utils/copyHelpers';\nimport { LogTimestamp } from './LogTimestamp';\nimport { LogRowContainer, LogRowContent, ExpandButton, LogText } from './LogsStyles';\nimport { LogDetailsTable } from './LogDetailsTable';\n\nconst COPY_SUCCESS_DURATION_MS = 1500;\n\ninterface LogRowProps {\n  log?: LogEntry;\n  index: number;\n  isExpanded: boolean;\n  onToggle: (index: number) => void;\n  isExpandable?: boolean;\n  showTime?: boolean;\n  allowWrap?: boolean;\n  isSelected?: boolean;\n  onSelect?: (index: number, event: React.MouseEvent) => void;\n  itemActionButtons?: ReactNode[];\n}\n\nconst DefaultLogRow: React.FC<LogRowProps> = ({\n  log,\n  isExpanded,\n  index,\n  onToggle,\n  isExpandable = true,\n  showTime = false,\n  allowWrap = false,\n  isSelected = false,\n  onSelect,\n  itemActionButtons,\n}) => {\n  const theme = useTheme();\n  const severityColor = useSeverityColor(log);\n  const [isHovered, setIsHovered] = useState(false);\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const [copySuccess, setCopySuccess] = useState(false);\n  const rowRef = useRef<HTMLDivElement>(null);\n  const copyTimeoutRef = useRef<number | null>(null);\n\n  // Cleanup timeout on unmount\n  useEffect(() => {\n    return () => {\n      if (copyTimeoutRef.current) {\n        window.clearTimeout(copyTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  const handleToggle = useCallback(\n    (e: React.MouseEvent) => {\n      if (isExpandable) {\n        e.stopPropagation();\n        onToggle(index);\n      }\n    },\n    [isExpandable, onToggle, index]\n  );\n\n  const handleRowMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      if (onSelect) {\n        onSelect(index, e);\n      }\n    },\n    [onSelect, index]\n  );\n\n  const handleOpenMenu = useCallback((e: React.MouseEvent<HTMLElement>) => {\n    e.stopPropagation();\n    setAnchorEl(e.currentTarget);\n  }, []);\n\n  const handleCloseMenu = useCallback(() => {\n    setAnchorEl(null);\n    setIsHovered(false);\n  }, []);\n\n  const handleCopy = useCallback(\n    async (format: 'full' | 'message' | 'json') => {\n      if (!log) return;\n\n      let text: string;\n      switch (format) {\n        case 'message':\n          text = formatLogMessage(log);\n          break;\n        case 'json':\n          text = formatLogAsJson(log);\n          break;\n        case 'full':\n        default:\n          text = formatLogEntry(log);\n      }\n\n      await navigator.clipboard.writeText(text);\n      setCopySuccess(true);\n      handleCloseMenu();\n\n      // Clear existing timeout\n      if (copyTimeoutRef.current) {\n        window.clearTimeout(copyTimeoutRef.current);\n      }\n\n      // Reset success state after configured duration\n      copyTimeoutRef.current = window.setTimeout(() => {\n        setCopySuccess(false);\n      }, COPY_SUCCESS_DURATION_MS);\n    },\n    [log, handleCloseMenu]\n  );\n\n  if (!log) return null;\n\n  const hasRowActions = itemActionButtons && itemActionButtons.length > 0;\n\n  return (\n    <LogRowContainer\n      severityColor={severityColor}\n      ref={rowRef}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => {\n        if (!anchorEl) {\n          setIsHovered(false);\n        }\n      }}\n      data-log-index={index}\n      data-testid={`log-row-container-${index}`}\n    >\n      <LogRowContent\n        onMouseDown={handleRowMouseDown}\n        isExpandable={isExpandable}\n        isHighlighted={Boolean(anchorEl)}\n        hasRowActions={hasRowActions}\n        isSelected={isSelected}\n      >\n        {isExpandable && (\n          <Box\n            onClick={handleToggle}\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              width: '16px',\n              justifyContent: 'center',\n              cursor: 'pointer',\n            }}\n          >\n            <ExpandButton size=\"small\" isExpanded={isExpanded}>\n              <ChevronRight sx={{ fontSize: '12px' }} />\n            </ExpandButton>\n          </Box>\n        )}\n\n        <LogTimestamp timestamp={log.timestamp} />\n\n        <Box\n          sx={{\n            display: 'flex',\n            gap: '10px',\n            marginLeft: '36px',\n            alignItems: 'center',\n          }}\n        >\n          <LogText variant=\"body2\" allowWrap={allowWrap}>\n            {log.line}\n          </LogText>\n          <Tooltip title={copySuccess ? 'Copied!' : 'Copy options'}>\n            <IconButton\n              size=\"small\"\n              onClick={handleOpenMenu}\n              aria-label=\"Copy log options\"\n              sx={{\n                padding: '4px',\n                marginLeft: 'auto',\n                color: copySuccess ? theme.palette.success.main : theme.palette.text.secondary,\n                opacity: isHovered || Boolean(anchorEl) || copySuccess ? 1 : 0,\n                pointerEvents: isHovered || Boolean(anchorEl) || copySuccess ? 'auto' : 'none',\n                transition: 'opacity 0.08s ease, color 0.2s ease',\n                '&:hover': {\n                  color: copySuccess ? theme.palette.success.main : theme.palette.primary.main,\n                  backgroundColor: theme.palette.action.hover,\n                },\n                borderRadius: '4px',\n                display: 'flex',\n                gap: '2px',\n              }}\n            >\n              {copySuccess ? (\n                <Check sx={{ fontSize: '14px' }} />\n              ) : (\n                <>\n                  <ContentCopy sx={{ fontSize: '14px' }} />\n                  <ChevronDown sx={{ fontSize: '12px' }} />\n                </>\n              )}\n            </IconButton>\n          </Tooltip>\n          {hasRowActions && (\n            <Box\n              sx={{\n                display: 'flex',\n                gap: '4px',\n                alignItems: 'center',\n                opacity: isHovered || Boolean(anchorEl) ? 1 : 0,\n                pointerEvents: isHovered || Boolean(anchorEl) ? 'auto' : 'none',\n                transition: 'opacity 0.08s ease',\n              }}\n            >\n              {itemActionButtons}\n            </Box>\n          )}\n          <Menu\n            anchorEl={anchorEl}\n            open={Boolean(anchorEl)}\n            onClose={handleCloseMenu}\n            onClick={(e) => e.stopPropagation()}\n            aria-label=\"Copy format options\"\n            anchorOrigin={{\n              vertical: 'bottom',\n              horizontal: 'right',\n            }}\n            transformOrigin={{\n              vertical: 'top',\n              horizontal: 'right',\n            }}\n            slotProps={{\n              paper: {\n                sx: {\n                  mt: 0.5,\n                  minWidth: 180,\n                  boxShadow: theme.shadows[3],\n                },\n              },\n            }}\n          >\n            <MenuItem\n              onClick={() => handleCopy('full')}\n              sx={{\n                py: 1,\n                '&:hover': {\n                  backgroundColor: theme.palette.action.hover,\n                },\n              }}\n            >\n              <ListItemIcon>\n                <ContentCopy fontSize=\"small\" />\n              </ListItemIcon>\n              <ListItemText\n                primary=\"Copy log\"\n                secondary=\"Timestamp + labels + message\"\n                slotProps={{\n                  primary: { fontSize: '14px' },\n                  secondary: { fontSize: '11px' },\n                }}\n              />\n            </MenuItem>\n            <MenuItem\n              onClick={() => handleCopy('message')}\n              sx={{\n                py: 1,\n                '&:hover': {\n                  backgroundColor: theme.palette.action.hover,\n                },\n              }}\n            >\n              <ListItemIcon>\n                <FormatQuoteClose fontSize=\"small\" />\n              </ListItemIcon>\n              <ListItemText\n                primary=\"Copy message\"\n                secondary=\"Message text only\"\n                slotProps={{\n                  primary: { fontSize: '14px' },\n                  secondary: { fontSize: '11px' },\n                }}\n              />\n            </MenuItem>\n            <MenuItem\n              onClick={() => handleCopy('json')}\n              sx={{\n                py: 1,\n                '&:hover': {\n                  backgroundColor: theme.palette.action.hover,\n                },\n              }}\n            >\n              <ListItemIcon>\n                <CodeJson fontSize=\"small\" />\n              </ListItemIcon>\n              <ListItemText\n                primary=\"Copy as JSON\"\n                secondary=\"Full log entry\"\n                slotProps={{\n                  primary: { fontSize: '14px' },\n                  secondary: { fontSize: '11px' },\n                }}\n              />\n            </MenuItem>\n          </Menu>\n        </Box>\n      </LogRowContent>\n\n      <Collapse in={isExpanded} timeout={200}>\n        <Box sx={{ padding: '8px' }}>\n          <Box\n            sx={{\n              display: 'grid',\n              gridTemplateColumns: !showTime ? '1fr' : '8px minmax(160px, max-content) 1fr',\n              gap: '12px',\n            }}\n          >\n            {showTime && (\n              <>\n                <Box />\n                <Box />\n              </>\n            )}\n            <Box>\n              <LogDetailsTable log={log.labels} />\n            </Box>\n          </Box>\n        </Box>\n      </Collapse>\n    </LogRowContainer>\n  );\n};\n\nexport const LogRow = memo(DefaultLogRow);\nLogRow.displayName = 'LogRow';\n"],"names":["React","memo","useCallback","useState","useRef","useEffect","Box","Collapse","useTheme","IconButton","Tooltip","Menu","MenuItem","ListItemIcon","ListItemText","ChevronRight","ContentCopy","ChevronDown","FormatQuoteClose","CodeJson","Check","useSeverityColor","formatLogEntry","formatLogMessage","formatLogAsJson","LogTimestamp","LogRowContainer","LogRowContent","ExpandButton","LogText","LogDetailsTable","COPY_SUCCESS_DURATION_MS","DefaultLogRow","log","isExpanded","index","onToggle","isExpandable","showTime","allowWrap","isSelected","onSelect","itemActionButtons","theme","severityColor","isHovered","setIsHovered","anchorEl","setAnchorEl","copySuccess","setCopySuccess","rowRef","copyTimeoutRef","current","window","clearTimeout","handleToggle","e","stopPropagation","handleRowMouseDown","handleOpenMenu","currentTarget","handleCloseMenu","handleCopy","format","text","navigator","clipboard","writeText","setTimeout","hasRowActions","length","ref","onMouseEnter","onMouseLeave","data-log-index","data-testid","onMouseDown","isHighlighted","Boolean","onClick","sx","display","alignItems","width","justifyContent","cursor","size","fontSize","timestamp","gap","marginLeft","variant","line","title","aria-label","padding","color","palette","success","main","secondary","opacity","pointerEvents","transition","primary","backgroundColor","action","hover","borderRadius","open","onClose","anchorOrigin","vertical","horizontal","transformOrigin","slotProps","paper","mt","minWidth","boxShadow","shadows","py","in","timeout","gridTemplateColumns","labels","LogRow","displayName"],"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,SAASC,IAAI,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,SAAS,QAAmB,QAAQ;AACzF,SACEC,GAAG,EACHC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACVC,OAAO,EACPC,IAAI,EACJC,QAAQ,EACRC,YAAY,EACZC,YAAY,QACP,gBAAgB;AACvB,OAAOC,kBAAkB,+BAA+B;AACxD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,sBAAsB,mCAAmC;AAChE,OAAOC,cAAc,2BAA2B;AAChD,OAAOC,WAAW,wBAAwB;AAE1C,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,cAAc,EAAEC,gBAAgB,EAAEC,eAAe,QAAQ,0BAA0B;AAC5F,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,eAAe,EAAEC,aAAa,EAAEC,YAAY,EAAEC,OAAO,QAAQ,eAAe;AACrF,SAASC,eAAe,QAAQ,oBAAoB;AAEpD,MAAMC,2BAA2B;AAejC,MAAMC,gBAAuC,CAAC,EAC5CC,GAAG,EACHC,UAAU,EACVC,KAAK,EACLC,QAAQ,EACRC,eAAe,IAAI,EACnBC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,QAAQ,EACRC,iBAAiB,EAClB;IACC,MAAMC,QAAQnC;IACd,MAAMoC,gBAAgBvB,iBAAiBY;IACvC,MAAM,CAACY,WAAWC,aAAa,GAAG3C,SAAS;IAC3C,MAAM,CAAC4C,UAAUC,YAAY,GAAG7C,SAA6B;IAC7D,MAAM,CAAC8C,aAAaC,eAAe,GAAG/C,SAAS;IAC/C,MAAMgD,SAAS/C,OAAuB;IACtC,MAAMgD,iBAAiBhD,OAAsB;IAE7C,6BAA6B;IAC7BC,UAAU;QACR,OAAO;YACL,IAAI+C,eAAeC,OAAO,EAAE;gBAC1BC,OAAOC,YAAY,CAACH,eAAeC,OAAO;YAC5C;QACF;IACF,GAAG,EAAE;IAEL,MAAMG,eAAetD,YACnB,CAACuD;QACC,IAAIpB,cAAc;YAChBoB,EAAEC,eAAe;YACjBtB,SAASD;QACX;IACF,GACA;QAACE;QAAcD;QAAUD;KAAM;IAGjC,MAAMwB,qBAAqBzD,YACzB,CAACuD;QACC,IAAIhB,UAAU;YACZA,SAASN,OAAOsB;QAClB;IACF,GACA;QAAChB;QAAUN;KAAM;IAGnB,MAAMyB,iBAAiB1D,YAAY,CAACuD;QAClCA,EAAEC,eAAe;QACjBV,YAAYS,EAAEI,aAAa;IAC7B,GAAG,EAAE;IAEL,MAAMC,kBAAkB5D,YAAY;QAClC8C,YAAY;QACZF,aAAa;IACf,GAAG,EAAE;IAEL,MAAMiB,aAAa7D,YACjB,OAAO8D;QACL,IAAI,CAAC/B,KAAK;QAEV,IAAIgC;QACJ,OAAQD;YACN,KAAK;gBACHC,OAAO1C,iBAAiBU;gBACxB;YACF,KAAK;gBACHgC,OAAOzC,gBAAgBS;gBACvB;YACF,KAAK;YACL;gBACEgC,OAAO3C,eAAeW;QAC1B;QAEA,MAAMiC,UAAUC,SAAS,CAACC,SAAS,CAACH;QACpCf,eAAe;QACfY;QAEA,yBAAyB;QACzB,IAAIV,eAAeC,OAAO,EAAE;YAC1BC,OAAOC,YAAY,CAACH,eAAeC,OAAO;QAC5C;QAEA,gDAAgD;QAChDD,eAAeC,OAAO,GAAGC,OAAOe,UAAU,CAAC;YACzCnB,eAAe;QACjB,GAAGnB;IACL,GACA;QAACE;QAAK6B;KAAgB;IAGxB,IAAI,CAAC7B,KAAK,OAAO;IAEjB,MAAMqC,gBAAgB5B,qBAAqBA,kBAAkB6B,MAAM,GAAG;IAEtE,qBACE,MAAC7C;QACCkB,eAAeA;QACf4B,KAAKrB;QACLsB,cAAc,IAAM3B,aAAa;QACjC4B,cAAc;YACZ,IAAI,CAAC3B,UAAU;gBACbD,aAAa;YACf;QACF;QACA6B,kBAAgBxC;QAChByC,eAAa,CAAC,kBAAkB,EAAEzC,OAAO;;0BAEzC,MAACR;gBACCkD,aAAalB;gBACbtB,cAAcA;gBACdyC,eAAeC,QAAQhC;gBACvBuB,eAAeA;gBACf9B,YAAYA;;oBAEXH,8BACC,KAAC/B;wBACC0E,SAASxB;wBACTyB,IAAI;4BACFC,SAAS;4BACTC,YAAY;4BACZC,OAAO;4BACPC,gBAAgB;4BAChBC,QAAQ;wBACV;kCAEA,cAAA,KAAC1D;4BAAa2D,MAAK;4BAAQrD,YAAYA;sCACrC,cAAA,KAACnB;gCAAakE,IAAI;oCAAEO,UAAU;gCAAO;;;;kCAK3C,KAAC/D;wBAAagE,WAAWxD,IAAIwD,SAAS;;kCAEtC,MAACnF;wBACC2E,IAAI;4BACFC,SAAS;4BACTQ,KAAK;4BACLC,YAAY;4BACZR,YAAY;wBACd;;0CAEA,KAACtD;gCAAQ+D,SAAQ;gCAAQrD,WAAWA;0CACjCN,IAAI4D,IAAI;;0CAEX,KAACnF;gCAAQoF,OAAO7C,cAAc,YAAY;0CACxC,cAAA,KAACxC;oCACC8E,MAAK;oCACLP,SAASpB;oCACTmC,cAAW;oCACXd,IAAI;wCACFe,SAAS;wCACTL,YAAY;wCACZM,OAAOhD,cAAcN,MAAMuD,OAAO,CAACC,OAAO,CAACC,IAAI,GAAGzD,MAAMuD,OAAO,CAACjC,IAAI,CAACoC,SAAS;wCAC9EC,SAASzD,aAAakC,QAAQhC,aAAaE,cAAc,IAAI;wCAC7DsD,eAAe1D,aAAakC,QAAQhC,aAAaE,cAAc,SAAS;wCACxEuD,YAAY;wCACZ,WAAW;4CACTP,OAAOhD,cAAcN,MAAMuD,OAAO,CAACC,OAAO,CAACC,IAAI,GAAGzD,MAAMuD,OAAO,CAACO,OAAO,CAACL,IAAI;4CAC5EM,iBAAiB/D,MAAMuD,OAAO,CAACS,MAAM,CAACC,KAAK;wCAC7C;wCACAC,cAAc;wCACd3B,SAAS;wCACTQ,KAAK;oCACP;8CAECzC,4BACC,KAAC7B;wCAAM6D,IAAI;4CAAEO,UAAU;wCAAO;uDAE9B;;0DACE,KAACxE;gDAAYiE,IAAI;oDAAEO,UAAU;gDAAO;;0DACpC,KAACvE;gDAAYgE,IAAI;oDAAEO,UAAU;gDAAO;;;;;;4BAK3ClB,+BACC,KAAChE;gCACC2E,IAAI;oCACFC,SAAS;oCACTQ,KAAK;oCACLP,YAAY;oCACZmB,SAASzD,aAAakC,QAAQhC,YAAY,IAAI;oCAC9CwD,eAAe1D,aAAakC,QAAQhC,YAAY,SAAS;oCACzDyD,YAAY;gCACd;0CAEC9D;;0CAGL,MAAC/B;gCACCoC,UAAUA;gCACV+D,MAAM/B,QAAQhC;gCACdgE,SAASjD;gCACTkB,SAAS,CAACvB,IAAMA,EAAEC,eAAe;gCACjCqC,cAAW;gCACXiB,cAAc;oCACZC,UAAU;oCACVC,YAAY;gCACd;gCACAC,iBAAiB;oCACfF,UAAU;oCACVC,YAAY;gCACd;gCACAE,WAAW;oCACTC,OAAO;wCACLpC,IAAI;4CACFqC,IAAI;4CACJC,UAAU;4CACVC,WAAW7E,MAAM8E,OAAO,CAAC,EAAE;wCAC7B;oCACF;gCACF;;kDAEA,MAAC7G;wCACCoE,SAAS,IAAMjB,WAAW;wCAC1BkB,IAAI;4CACFyC,IAAI;4CACJ,WAAW;gDACThB,iBAAiB/D,MAAMuD,OAAO,CAACS,MAAM,CAACC,KAAK;4CAC7C;wCACF;;0DAEA,KAAC/F;0DACC,cAAA,KAACG;oDAAYwE,UAAS;;;0DAExB,KAAC1E;gDACC2F,SAAQ;gDACRJ,WAAU;gDACVe,WAAW;oDACTX,SAAS;wDAAEjB,UAAU;oDAAO;oDAC5Ba,WAAW;wDAAEb,UAAU;oDAAO;gDAChC;;;;kDAGJ,MAAC5E;wCACCoE,SAAS,IAAMjB,WAAW;wCAC1BkB,IAAI;4CACFyC,IAAI;4CACJ,WAAW;gDACThB,iBAAiB/D,MAAMuD,OAAO,CAACS,MAAM,CAACC,KAAK;4CAC7C;wCACF;;0DAEA,KAAC/F;0DACC,cAAA,KAACK;oDAAiBsE,UAAS;;;0DAE7B,KAAC1E;gDACC2F,SAAQ;gDACRJ,WAAU;gDACVe,WAAW;oDACTX,SAAS;wDAAEjB,UAAU;oDAAO;oDAC5Ba,WAAW;wDAAEb,UAAU;oDAAO;gDAChC;;;;kDAGJ,MAAC5E;wCACCoE,SAAS,IAAMjB,WAAW;wCAC1BkB,IAAI;4CACFyC,IAAI;4CACJ,WAAW;gDACThB,iBAAiB/D,MAAMuD,OAAO,CAACS,MAAM,CAACC,KAAK;4CAC7C;wCACF;;0DAEA,KAAC/F;0DACC,cAAA,KAACM;oDAASqE,UAAS;;;0DAErB,KAAC1E;gDACC2F,SAAQ;gDACRJ,WAAU;gDACVe,WAAW;oDACTX,SAAS;wDAAEjB,UAAU;oDAAO;oDAC5Ba,WAAW;wDAAEb,UAAU;oDAAO;gDAChC;;;;;;;;;;0BAOV,KAACjF;gBAASoH,IAAIzF;gBAAY0F,SAAS;0BACjC,cAAA,KAACtH;oBAAI2E,IAAI;wBAAEe,SAAS;oBAAM;8BACxB,cAAA,MAAC1F;wBACC2E,IAAI;4BACFC,SAAS;4BACT2C,qBAAqB,CAACvF,WAAW,QAAQ;4BACzCoD,KAAK;wBACP;;4BAECpD,0BACC;;kDACE,KAAChC;kDACD,KAACA;;;0CAGL,KAACA;0CACC,cAAA,KAACwB;oCAAgBG,KAAKA,IAAI6F,MAAM;;;;;;;;;AAO9C;AAEA,OAAO,MAAMC,uBAAS9H,KAAK+B,eAAe;AAC1C+F,OAAOC,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/LogRow/LogRow.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 {\n  Box,\n  Collapse,\n  IconButton,\n  ListItemIcon,\n  ListItemText,\n  Menu,\n  MenuItem,\n  Tooltip,\n  useTheme,\n} from '@mui/material';\nimport Check from 'mdi-material-ui/Check';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport CodeJson from 'mdi-material-ui/CodeJson';\nimport ContentCopy from 'mdi-material-ui/ContentCopy';\nimport FormatQuoteClose from 'mdi-material-ui/FormatQuoteClose';\nimport React, { memo, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { LogEntry } from '@perses-dev/spec';\nimport { ansiToSanitizedHtml } from '../../utils/ansi';\nimport { formatLogAsJson, formatLogEntry, formatLogMessage } from '../../utils/copyHelpers';\nimport { useSeverityColor } from '../hooks/useSeverity';\nimport { LogDetailsTable } from './LogDetailsTable';\nimport { LogTimestamp } from './LogTimestamp';\nimport { ExpandButton, LogRowContainer, LogRowContent, LogText } from './LogsStyles';\nimport './ansiColors.css';\n\nconst COPY_SUCCESS_DURATION_MS = 1500;\n\ninterface LogRowProps {\n  log?: LogEntry;\n  index: number;\n  isExpanded: boolean;\n  onToggle: (index: number) => void;\n  isExpandable?: boolean;\n  showTime?: boolean;\n  allowWrap?: boolean;\n  isSelected?: boolean;\n  onSelect?: (index: number, event: React.MouseEvent) => void;\n  itemActionButtons?: ReactNode[];\n}\n\nconst DefaultLogRow: React.FC<LogRowProps> = ({\n  log,\n  isExpanded,\n  index,\n  onToggle,\n  isExpandable = true,\n  showTime = false,\n  allowWrap = false,\n  isSelected = false,\n  onSelect,\n  itemActionButtons,\n}) => {\n  const theme = useTheme();\n  const severityColor = useSeverityColor(log);\n  const ansiHtml = useMemo(() => (log ? ansiToSanitizedHtml(log.line) : null), [log]);\n  const [isHovered, setIsHovered] = useState(false);\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const [copySuccess, setCopySuccess] = useState(false);\n  const rowRef = useRef<HTMLDivElement>(null);\n  const copyTimeoutRef = useRef<number | null>(null);\n\n  // Cleanup timeout on unmount\n  useEffect(() => {\n    return (): void => {\n      if (copyTimeoutRef.current) {\n        window.clearTimeout(copyTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  const handleToggle = useCallback(\n    (e: React.MouseEvent) => {\n      if (isExpandable) {\n        e.stopPropagation();\n        onToggle(index);\n      }\n    },\n    [isExpandable, onToggle, index]\n  );\n\n  const handleRowMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      if (onSelect) {\n        onSelect(index, e);\n      }\n    },\n    [onSelect, index]\n  );\n\n  const handleOpenMenu = useCallback((e: React.MouseEvent<HTMLElement>) => {\n    e.stopPropagation();\n    setAnchorEl(e.currentTarget);\n  }, []);\n\n  const handleCloseMenu = useCallback(() => {\n    setAnchorEl(null);\n    setIsHovered(false);\n  }, []);\n\n  const handleCopy = useCallback(\n    async (format: 'full' | 'message' | 'json') => {\n      if (!log) return;\n\n      let text: string;\n      switch (format) {\n        case 'message':\n          text = formatLogMessage(log);\n          break;\n        case 'json':\n          text = formatLogAsJson(log);\n          break;\n        case 'full':\n        default:\n          text = formatLogEntry(log);\n      }\n\n      await navigator.clipboard.writeText(text);\n      setCopySuccess(true);\n      handleCloseMenu();\n\n      // Clear existing timeout\n      if (copyTimeoutRef.current) {\n        window.clearTimeout(copyTimeoutRef.current);\n      }\n\n      // Reset success state after configured duration\n      copyTimeoutRef.current = window.setTimeout(() => {\n        setCopySuccess(false);\n      }, COPY_SUCCESS_DURATION_MS);\n    },\n    [log, handleCloseMenu]\n  );\n\n  if (!log) return null;\n\n  const hasRowActions = itemActionButtons && itemActionButtons.length > 0;\n\n  return (\n    <LogRowContainer\n      severityColor={severityColor}\n      ref={rowRef}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => {\n        if (!anchorEl) {\n          setIsHovered(false);\n        }\n      }}\n      data-log-index={index}\n      data-testid={`log-row-container-${index}`}\n    >\n      <LogRowContent\n        onMouseDown={handleRowMouseDown}\n        isExpandable={isExpandable}\n        isHighlighted={Boolean(anchorEl)}\n        hasRowActions={hasRowActions}\n        isSelected={isSelected}\n      >\n        {isExpandable && (\n          <Box\n            onClick={handleToggle}\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              width: '16px',\n              justifyContent: 'center',\n              cursor: 'pointer',\n            }}\n          >\n            <ExpandButton size=\"small\" isExpanded={isExpanded}>\n              <ChevronRight sx={{ fontSize: '12px' }} />\n            </ExpandButton>\n          </Box>\n        )}\n\n        <LogTimestamp timestamp={log.timestamp} />\n\n        <Box\n          sx={{\n            display: 'flex',\n            gap: '10px',\n            marginLeft: '36px',\n            alignItems: 'center',\n          }}\n        >\n          {ansiHtml ? (\n            <LogText variant=\"body2\" allowWrap={allowWrap} dangerouslySetInnerHTML={{ __html: ansiHtml }} />\n          ) : (\n            <LogText variant=\"body2\" allowWrap={allowWrap}>\n              {log.line}\n            </LogText>\n          )}\n          <Tooltip title={copySuccess ? 'Copied!' : 'Copy options'}>\n            <IconButton\n              size=\"small\"\n              onClick={handleOpenMenu}\n              aria-label=\"Copy log options\"\n              sx={{\n                padding: '4px',\n                marginLeft: 'auto',\n                color: copySuccess ? theme.palette.success.main : theme.palette.text.secondary,\n                opacity: isHovered || Boolean(anchorEl) || copySuccess ? 1 : 0,\n                pointerEvents: isHovered || Boolean(anchorEl) || copySuccess ? 'auto' : 'none',\n                transition: 'opacity 0.08s ease, color 0.2s ease',\n                '&:hover': {\n                  color: copySuccess ? theme.palette.success.main : theme.palette.primary.main,\n                  backgroundColor: theme.palette.action.hover,\n                },\n                borderRadius: '4px',\n                display: 'flex',\n                gap: '2px',\n              }}\n            >\n              {copySuccess ? (\n                <Check sx={{ fontSize: '14px' }} />\n              ) : (\n                <>\n                  <ContentCopy sx={{ fontSize: '14px' }} />\n                  <ChevronDown sx={{ fontSize: '12px' }} />\n                </>\n              )}\n            </IconButton>\n          </Tooltip>\n          {hasRowActions && (\n            <Box\n              sx={{\n                display: 'flex',\n                gap: '4px',\n                alignItems: 'center',\n                opacity: isHovered || Boolean(anchorEl) ? 1 : 0,\n                pointerEvents: isHovered || Boolean(anchorEl) ? 'auto' : 'none',\n                transition: 'opacity 0.08s ease',\n              }}\n            >\n              {itemActionButtons}\n            </Box>\n          )}\n          <Menu\n            anchorEl={anchorEl}\n            open={Boolean(anchorEl)}\n            onClose={handleCloseMenu}\n            onClick={(e) => e.stopPropagation()}\n            aria-label=\"Copy format options\"\n            anchorOrigin={{\n              vertical: 'bottom',\n              horizontal: 'right',\n            }}\n            transformOrigin={{\n              vertical: 'top',\n              horizontal: 'right',\n            }}\n            slotProps={{\n              paper: {\n                sx: {\n                  mt: 0.5,\n                  minWidth: 180,\n                  boxShadow: theme.shadows[3],\n                },\n              },\n            }}\n          >\n            <MenuItem\n              onClick={() => handleCopy('full')}\n              sx={{\n                py: 1,\n                '&:hover': {\n                  backgroundColor: theme.palette.action.hover,\n                },\n              }}\n            >\n              <ListItemIcon>\n                <ContentCopy fontSize=\"small\" />\n              </ListItemIcon>\n              <ListItemText\n                primary=\"Copy log\"\n                secondary=\"Timestamp + labels + message\"\n                slotProps={{\n                  primary: { fontSize: '14px' },\n                  secondary: { fontSize: '11px' },\n                }}\n              />\n            </MenuItem>\n            <MenuItem\n              onClick={() => handleCopy('message')}\n              sx={{\n                py: 1,\n                '&:hover': {\n                  backgroundColor: theme.palette.action.hover,\n                },\n              }}\n            >\n              <ListItemIcon>\n                <FormatQuoteClose fontSize=\"small\" />\n              </ListItemIcon>\n              <ListItemText\n                primary=\"Copy message\"\n                secondary=\"Message text only\"\n                slotProps={{\n                  primary: { fontSize: '14px' },\n                  secondary: { fontSize: '11px' },\n                }}\n              />\n            </MenuItem>\n            <MenuItem\n              onClick={() => handleCopy('json')}\n              sx={{\n                py: 1,\n                '&:hover': {\n                  backgroundColor: theme.palette.action.hover,\n                },\n              }}\n            >\n              <ListItemIcon>\n                <CodeJson fontSize=\"small\" />\n              </ListItemIcon>\n              <ListItemText\n                primary=\"Copy as JSON\"\n                secondary=\"Full log entry\"\n                slotProps={{\n                  primary: { fontSize: '14px' },\n                  secondary: { fontSize: '11px' },\n                }}\n              />\n            </MenuItem>\n          </Menu>\n        </Box>\n      </LogRowContent>\n\n      <Collapse in={isExpanded} timeout={200}>\n        <Box sx={{ padding: '8px' }}>\n          <Box\n            sx={{\n              display: 'grid',\n              gridTemplateColumns: !showTime ? '1fr' : '8px minmax(160px, max-content) 1fr',\n              gap: '12px',\n            }}\n          >\n            {showTime && (\n              <>\n                <Box />\n                <Box />\n              </>\n            )}\n            <Box>\n              <LogDetailsTable log={log.labels} />\n            </Box>\n          </Box>\n        </Box>\n      </Collapse>\n    </LogRowContainer>\n  );\n};\n\nexport const LogRow = memo(DefaultLogRow);\nLogRow.displayName = 'LogRow';\n"],"names":["Box","Collapse","IconButton","ListItemIcon","ListItemText","Menu","MenuItem","Tooltip","useTheme","Check","ChevronDown","ChevronRight","CodeJson","ContentCopy","FormatQuoteClose","React","memo","useCallback","useEffect","useMemo","useRef","useState","ansiToSanitizedHtml","formatLogAsJson","formatLogEntry","formatLogMessage","useSeverityColor","LogDetailsTable","LogTimestamp","ExpandButton","LogRowContainer","LogRowContent","LogText","COPY_SUCCESS_DURATION_MS","DefaultLogRow","log","isExpanded","index","onToggle","isExpandable","showTime","allowWrap","isSelected","onSelect","itemActionButtons","theme","severityColor","ansiHtml","line","isHovered","setIsHovered","anchorEl","setAnchorEl","copySuccess","setCopySuccess","rowRef","copyTimeoutRef","current","window","clearTimeout","handleToggle","e","stopPropagation","handleRowMouseDown","handleOpenMenu","currentTarget","handleCloseMenu","handleCopy","format","text","navigator","clipboard","writeText","setTimeout","hasRowActions","length","ref","onMouseEnter","onMouseLeave","data-log-index","data-testid","onMouseDown","isHighlighted","Boolean","onClick","sx","display","alignItems","width","justifyContent","cursor","size","fontSize","timestamp","gap","marginLeft","variant","dangerouslySetInnerHTML","__html","title","aria-label","padding","color","palette","success","main","secondary","opacity","pointerEvents","transition","primary","backgroundColor","action","hover","borderRadius","open","onClose","anchorOrigin","vertical","horizontal","transformOrigin","slotProps","paper","mt","minWidth","boxShadow","shadows","py","in","timeout","gridTemplateColumns","labels","LogRow","displayName"],"mappings":"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"}

package/lib/components/LogsList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LogEntry } from '@perses-dev/core';
+import { LogEntry } from '@perses-dev/spec';
 import { LogsTableOptions } from '../model';
 interface LogsListProps {
     logs: LogEntry[];

package/lib/components/LogsList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/LogsList.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 { LogEntry } from '@perses-dev/core';\nimport { LogsTableOptions } from '../model';\nimport { EmptyLogsState } from './EmptyLogsState';\nimport { useExpandedRows } from './hooks/useExpandedRows';\nimport { VirtualizedLogsList } from './VirtualizedLogsList';\n\ninterface LogsListProps {\n  logs: LogEntry[];\n  spec: LogsTableOptions;\n}\n\nexport const LogsList: React.FC<LogsListProps> = ({ logs, spec }) => {\n  const { expandedRows, toggleExpand } = useExpandedRows();\n\n  if (!logs.length) {\n    return <EmptyLogsState />;\n  }\n\n  return <VirtualizedLogsList logs={logs} spec={spec} expandedRows={expandedRows} onToggleExpand={toggleExpand} />;\n};\n"],"names":["React","EmptyLogsState","useExpandedRows","VirtualizedLogsList","LogsList","logs","spec","expandedRows","toggleExpand","length","onToggleExpand"],"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;AAG1B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,mBAAmB,QAAQ,wBAAwB;AAO5D,OAAO,MAAMC,WAAoC,CAAC,EAAEC,IAAI,EAAEC,IAAI,EAAE;IAC9D,MAAM,EAAEC,YAAY,EAAEC,YAAY,EAAE,GAAGN;IAEvC,IAAI,CAACG,KAAKI,MAAM,EAAE;QAChB,qBAAO,KAACR;IACV;IAEA,qBAAO,KAACE;QAAoBE,MAAMA;QAAMC,MAAMA;QAAMC,cAAcA;QAAcG,gBAAgBF;;AAClG,EAAE"}
+{"version":3,"sources":["../../../src/components/LogsList.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 { LogEntry } from '@perses-dev/spec';\nimport { LogsTableOptions } from '../model';\nimport { EmptyLogsState } from './EmptyLogsState';\nimport { useExpandedRows } from './hooks/useExpandedRows';\nimport { VirtualizedLogsList } from './VirtualizedLogsList';\n\ninterface LogsListProps {\n  logs: LogEntry[];\n  spec: LogsTableOptions;\n}\n\nexport const LogsList: React.FC<LogsListProps> = ({ logs, spec }) => {\n  const { expandedRows, toggleExpand } = useExpandedRows();\n\n  if (!logs.length) {\n    return <EmptyLogsState />;\n  }\n\n  return <VirtualizedLogsList logs={logs} spec={spec} expandedRows={expandedRows} onToggleExpand={toggleExpand} />;\n};\n"],"names":["React","EmptyLogsState","useExpandedRows","VirtualizedLogsList","LogsList","logs","spec","expandedRows","toggleExpand","length","onToggleExpand"],"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;AAG1B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,mBAAmB,QAAQ,wBAAwB;AAO5D,OAAO,MAAMC,WAAoC,CAAC,EAAEC,IAAI,EAAEC,IAAI,EAAE;IAC9D,MAAM,EAAEC,YAAY,EAAEC,YAAY,EAAE,GAAGN;IAEvC,IAAI,CAACG,KAAKI,MAAM,EAAE;QAChB,qBAAO,KAACR;IACV;IAEA,qBAAO,KAACE;QAAoBE,MAAMA;QAAMC,MAAMA;QAAMC,cAAcA;QAAcG,gBAAgBF;;AAClG,EAAE"}

package/lib/components/VirtualizedLogsList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LogEntry } from '@perses-dev/core';
+import { LogEntry } from '@perses-dev/spec';
 import { LogsTableOptions } from '../model';
 interface VirtualizedLogsListProps {
     logs: LogEntry[];

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

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedLogsList.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualizedLogsList.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA8D,MAAM,OAAO,CAAC;AAInF,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAK5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAS5C,UAAU,wBAAwB;IAChC,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,gBAAgB,CAAC;IACvB,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAualE,CAAC"}
+{"version":3,"file":"VirtualizedLogsList.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualizedLogsList.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA8D,MAAM,OAAO,CAAC;AAOnF,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAS5C,UAAU,wBAAwB;IAChC,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,gBAAgB,CAAC;IACvB,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAualE,CAAC"}

package/lib/components/VirtualizedLogsList.js

@@ -16,14 +16,14 @@ import { Box, useTheme, Popover, Button, ButtonGroup, IconButton } from '@mui/ma
 import CloseIcon from 'mdi-material-ui/Close';
 import { Virtuoso } from 'react-virtuoso';
 import { useSelection } from '@perses-dev/components';
-import { useSelectionItemActions } from '@perses-dev/dashboards';
+import { formatForDisplay, useSelectionItemActions } from '@perses-dev/dashboards';
 import { useAllVariableValues } from '@perses-dev/plugin-system';
 import { formatLogEntries, formatLogMessage } from '../utils/copyHelpers';
 import { LogRow } from './LogRow';
 const PERSES_LOGSTABLE_HINTS_DISMISSED = 'PERSES_LOGSTABLE_HINTS_DISMISSED';
 const COPY_TOAST_DURATION_MS = 5000;
-// Detect Mac for keyboard shortcuts display
-const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent);
+// Platform-aware modifier key display using TanStack's formatForDisplay
+const modKeyDisplay = formatForDisplay('Mod');
 export const VirtualizedLogsList = ({ logs, spec, expandedRows, onToggleExpand })=>{
     const theme = useTheme();
     const [selectedRows, setSelectedRows] = useState(new Set());
@@ -295,7 +295,7 @@ export const VirtualizedLogsList = ({ logs, spec, expandedRows, onToggleExpand }
                                             opacity: 0.8
                                         },
                                         children: [
-                                            isMac ? '⌘' : 'Ctrl',
+                                            modKeyDisplay,
                                             "+Click to select"
                                         ]
                                     }),
@@ -326,7 +326,7 @@ export const VirtualizedLogsList = ({ logs, spec, expandedRows, onToggleExpand }
                                             opacity: 0.8
                                         },
                                         children: [
-                                            isMac ? '⌘' : 'Ctrl',
+                                            modKeyDisplay,
                                             "+C to copy"
                                         ]
                                     }),