diff --git a/ui/src/pages/LogsTab/LogEntry.module.css b/ui/src/pages/LogsTab/LogEntry.module.css index 0d1d4708..21929e92 100644 --- a/ui/src/pages/LogsTab/LogEntry.module.css +++ b/ui/src/pages/LogsTab/LogEntry.module.css @@ -175,6 +175,13 @@ color: var(--text-primary); } +.highlight { + background: var(--amber); + color: var(--bg-deep); + border-radius: 2px; + padding: 0 1px; +} + .linkBtn { background: none; border: none; diff --git a/ui/src/pages/LogsTab/LogEntry.tsx b/ui/src/pages/LogsTab/LogEntry.tsx index e61cde44..e7232066 100644 --- a/ui/src/pages/LogsTab/LogEntry.tsx +++ b/ui/src/pages/LogsTab/LogEntry.tsx @@ -36,11 +36,25 @@ function truncate(text: string, max: number): string { return text.length > max ? text.slice(0, max) + '\u2026' : text; } -interface LogEntryProps { - entry: LogEntryResponse; +function highlightText(text: string, query: string | undefined): React.ReactNode { + if (!query || !text) return text; + const idx = text.toLowerCase().indexOf(query.toLowerCase()); + if (idx === -1) return text; + return ( + <> + {text.slice(0, idx)} + {text.slice(idx, idx + query.length)} + {highlightText(text.slice(idx + query.length), query)} + + ); } -export function LogEntry({ entry }: LogEntryProps) { +interface LogEntryProps { + entry: LogEntryResponse; + query?: string; +} + +export function LogEntry({ entry, query }: LogEntryProps) { const [expanded, setExpanded] = useState(false); const navigate = useNavigate(); @@ -68,7 +82,7 @@ export function LogEntry({ entry }: LogEntryProps) { {abbreviateLogger(entry.loggerName)} - {truncate(entry.message, 200)} + {highlightText(truncate(entry.message, 200), query)} {hasStack && Stack} {hasExchange && ( @@ -98,10 +112,10 @@ export function LogEntry({ entry }: LogEntryProps) { )} -
{entry.message}
+
{highlightText(entry.message, query)}
{hasStack && ( -
{entry.stackTrace}
+
{highlightText(entry.stackTrace!, query)}
)} {entry.mdc && Object.keys(entry.mdc).length > 0 && ( diff --git a/ui/src/pages/LogsTab/LogSearch.tsx b/ui/src/pages/LogsTab/LogSearch.tsx index 2c932b21..50b6cc4e 100644 --- a/ui/src/pages/LogsTab/LogSearch.tsx +++ b/ui/src/pages/LogsTab/LogSearch.tsx @@ -187,7 +187,7 @@ export function LogSearch({ defaultApplication, defaultRouteId }: LogSearchProps ) : ( <> {entries.map((entry, i) => ( - + ))} {!liveTail && hasMore && (