feat: Implemented log search functionality with highlighted results

[harshit078]

Linked Issue(s)

#556

Acceptance Criteria fulfillment

• [x] Added Search in Logs
• [x] Improved Search UI and functionality

Proposed changes

• Added Search functionality in logs
• Added highlighted logs with ease to scroll through the list of selected logs

https://github.com/user-attachments/assets/f0550ea8-cf55-4f28-aae3-528f7baba6a2

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Added a search bar for system logs with dynamic text highlighting of matching terms in log entries.
  • Introduced navigation controls to cycle through search results, showing current and total matches.
  • Log entries now highlight all occurrences of the search query for better readability.

• Improvements

  • Improved scrolling behavior with smooth scroll-to-bottom functionality.
  • Enhanced highlight visuals for active search matches within logs.
  • Unified search state management and improved performance with memoized components and refined event handling.
  • Updated log components to support search query highlighting and current match indication.
  • Refined search input with debounced updates and clear functionality for better user experience.

[coderabbitai[bot]]

Walkthrough

The changes introduce a comprehensive search and navigation feature to the system logs interface. A new LogSearch component provides a search input with navigation controls, allowing users to find and cycle through matching log entries. Both PlainLog and FormattedLog components are updated to highlight text matching the search query. The main SystemLogs component is enhanced with state and logic to manage search queries, highlight matches, and handle smooth scrolling to matched entries. Scroll detection is refactored from using an IntersectionObserver to a scroll event listener and a smooth scroll-to-bottom function, simplifying the logic for displaying the scroll down button. Additionally, the useSystemLogs hook now requires a serviceName parameter.

Changes

File(s)	Change Summary
web-server/src/components/Service/SystemLog/FormattedLog.tsx web-server/src/components/Service/SystemLog/PlainLog.tsx	Added a SearchHighlightText helper component to highlight search matches; updated main components to accept optional searchQuery and isCurrentMatch props and render highlighted text accordingly.
web-server/src/components/Service/SystemLog/LogSearch.tsx	Introduced a new LogSearch component with search input, debounced query updates, navigation controls for previous/next matches, and callbacks for searching and navigating between results.
web-server/src/content/Service/SystemLogs.tsx	Enhanced the SystemLogs component with unified search state management via useReducer, integrated LogSearch, added debounced search matching and highlight tracking, replaced IntersectionObserver with scroll event listener and smooth scroll-to-bottom function, updated scroll button logic, and memoized log rendering with search highlighting and current match indication. Removed early return for missing serviceName and wrapped component with memo.
web-server/src/hooks/useSystemLogs.tsx	Updated useSystemLogs hook to require the serviceName parameter instead of making it optional.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant LogSearch
    participant SystemLogs
    participant LogEntry (PlainLog/FormattedLog)
    
    User->>LogSearch: Types search query / uses navigation controls
    LogSearch->>SystemLogs: onSearch(query) / onNavigate(direction)
    SystemLogs->>SystemLogs: Update search state, find matches, update highlights
    SystemLogs->>LogEntry: Pass searchQuery and isCurrentMatch props
    LogEntry->>LogEntry: Highlight matching text
    SystemLogs->>SystemLogs: Scroll to highlighted match (if navigating)

Possibly related PRs

• middlewarehq/middleware#630: Refactors and replaces the IntersectionObserver-based scroll detection and scroll down button logic in SystemLogs.tsx, directly modifying the same scrolling behavior and UI elements as this PR.

Poem

In the warren of logs where the data flows,
A bunny now searches, and every match glows.
With highlights of yellow, and scrolls oh-so-smooth,
Hopping through entries, each click on the move.
Search, skip, and find—what a clever new trick!
Logs now respond, and the answers come quick.
🐇✨

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[samad-yar-khan]

from the looks of it is just highlighting the logs, not actually searching through them or filtering the search results. Seems satisfactory from the issue. But can we make this more usable ?

[harshit078]

Improved pointer and key input interactions from 150 ms to 80ms

[samad-yar-khan]

@harshit078 one of the linter checks is failing.

[jayantbh]

Much better. But still has lint failures, and some feedback remaining.

[jayantbh]

This is pretty decent! One final question before I can approve it.

There can he hundreds, or thousands of lines of logs. What does the user experience and performance look like under those circumstances?

[harshit078]

We are using useEffect, useMemo and debounce to handle query changes and side effects and prevent re-render from taking place which helps us improve the performance. We could also potentially implement and use list virtualization technique which could greatly improve the performance and only rendering the logs which showcases on user's viewport.

[jayantbh]

That isn't really the answer to what I asked. 😅

I asked for what happens with thousands of lines of logs, in practice. You came back with theoreticals. 😄

[harshit078]

With thousands of logs in practise, it can search well versed within the logs. Optimized input query and navigation already which should give a smooth UI experience.

[jayantbh]

I think it's worth checking performance numbers. I'm hearing a lot of "can" and "should" instead of "is" and "does". :)

This is the kind of thing that can block the main thread if it's too processing intensive.

[harshit078]

• Improved debounce methods on Search
• Improved element selection for search highlighting
• Used requestAnimationFrame for smooth scrolling