npm - @perses-dev/logs-table-plugin - Versions diffs - 0.2.1 → 0.3.0-beta.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (240) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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, { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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 (): 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 <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":"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"}
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 {\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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/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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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"
                                         ]
                                     }),