feat(logs): highlight filtering keywords in logger and message

hawtio · Sep 4, 2023 · 7fdfddf · 7fdfddf
1 parent 366f568
commit 7fdfddf
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 28 deletions.
diff --git a/packages/hawtio/src/plugins/logs/Logs.tsx b/packages/hawtio/src/plugins/logs/Logs.tsx
@@ -34,8 +34,8 @@ import { SearchIcon } from '@patternfly/react-icons'
 import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'
 import React, { useEffect, useRef, useState } from 'react'
 import { log } from './globals'
-import { LogEntry } from './log-entry'
-import { LOGS_UPDATE_INTERVAL, LogFilter, logsService } from './logs-service'
+import { LogEntry, LogFilter } from './log-entry'
+import { LOGS_UPDATE_INTERVAL, logsService } from './logs-service'
 
 export const Logs: React.FunctionComponent = () => {
   return (
@@ -245,6 +245,17 @@ const LogsTable: React.FunctionComponent = () => {
     setIsModalOpen(!isModalOpen)
   }
 
+  const highlightSearch = (text: string, search: string) => {
+    if (search === '') {
+      return text
+    }
+    const lowerCaseSearch = search.toLowerCase()
+    const res = text
+      .split(new RegExp(`(${search})`, 'gi'))
+      .map((s, i) => (s.toLowerCase() === lowerCaseSearch ? <mark key={i}>{s}</mark> : s))
+    return res
+  }
+
   return (
     <Card>
       {tableToolbar}
@@ -264,8 +275,8 @@ const LogsTable: React.FunctionComponent = () => {
               <Td dataLabel='level'>
                 <LogLevel level={log.event.level} />
               </Td>
-              <Td dataLabel='logger'>{log.event.logger}</Td>
-              <Td dataLabel='message'>{log.event.message}</Td>
+              <Td dataLabel='logger'>{highlightSearch(log.event.logger, filters.logger)}</Td>
+              <Td dataLabel='message'>{highlightSearch(log.event.message, filters.message)}</Td>
             </Tr>
           ))}
           {filteredLogs.length === 0 && (

diff --git a/packages/hawtio/src/plugins/logs/log-entry.ts b/packages/hawtio/src/plugins/logs/log-entry.ts
@@ -20,6 +20,13 @@ export type LogEvent = {
   thread: string | null
 }
 
+export type LogFilter = {
+  level: string[]
+  logger: string
+  message: string
+  properties: string
+}
+
 export class LogEntry {
   hasOSGiProperties: boolean
   hasMDCProperties: boolean
@@ -69,6 +76,28 @@ export class LogEntry {
     }
   }
 
+  match(filter: LogFilter): boolean {
+    const { level, logger, message, properties } = filter
+    if (level.length > 0 && !level.some(l => this.event.level === l)) {
+      return false
+    }
+    if (logger !== '' && !this.matchLogger(logger)) {
+      return false
+    }
+    if (message !== '' && !this.matchMessage(message)) {
+      return false
+    }
+    if (properties !== '' && !this.matchProperties(properties)) {
+      return false
+    }
+    return true
+  }
+
+  matchLogger(keyword: string): boolean {
+    const { logger } = this.event
+    return logger.toLowerCase().includes(keyword.toLowerCase())
+  }
+
   matchMessage(keyword: string): boolean {
     const { message } = this.event
     return message.toLowerCase().includes(keyword.toLowerCase())

diff --git a/packages/hawtio/src/plugins/logs/logs-service.ts b/packages/hawtio/src/plugins/logs/logs-service.ts
@@ -1,6 +1,6 @@
 import { MBeanNode, jolokiaService, workspace } from '@hawtiosrc/plugins/shared'
 import { log } from './globals'
-import { LogEntry, LogEvent } from './log-entry'
+import { LogEntry, LogEvent, LogFilter } from './log-entry'
 
 export const STORAGE_KEY_PREFERENCES = 'logs.preferences'
 
@@ -35,13 +35,6 @@ export type LogQueryResult = {
   timestamp: number
 }
 
-export type LogFilter = {
-  level: string[]
-  logger: string
-  message: string
-  properties: string
-}
-
 export const LOG_QUERY_OPERATIONS = {
   getLogResults: 'getLogResults(int)',
   jsonQueryLogResults: 'jsonQueryLogResults(java.lang.String)',
@@ -108,22 +101,7 @@ class LogsService implements ILogsService {
   }
 
   filter(logs: LogEntry[], filter: LogFilter): LogEntry[] {
-    let filteredLogs = [...logs]
-
-    const { level, logger, message, properties } = filter
-    if (level.length > 0) {
-      filteredLogs = filteredLogs.filter(log => level.some(lv => log.event.level === lv))
-    }
-    if (logger !== '') {
-      const regexp = new RegExp(logger, 'i')
-      filteredLogs = filteredLogs.filter(log => regexp.test(log.event.logger))
-    }
-    if (message !== '') {
-      filteredLogs = filteredLogs.filter(log => log.matchMessage(message))
-    }
-    if (properties !== '') {
-      filteredLogs = filteredLogs.filter(log => log.matchProperties(properties))
-    }
+    let filteredLogs = logs.filter(log => log.match(filter))
 
     const { sortAscending } = this.loadOptions()
     if (!sortAscending) {