Improvements to the system logs UI

[jayantbh]

Currently system logs work fine, but certain UI/visual refinements can certainly be made to it.

We'd be happy to receive ideas on visual changes from the community.

[xyfer17]

@jayantbh could you please assign this issue to me, i would like to take this up.

[jayantbh]

Hey @xyfer17, you already have an issue or two assigned. :) I'd be happy to assign this to you once those are merged. But thank you so much for your interest. 🚀

[Ossedda]

Can I be assigned this issue?

[jayantbh]

Hey @Ossedda, sure. Do share what changes you might make as you begin.

[shelar1423]

Hey @jayantbh i would love to take up this issue but can u guide me how to navigate to the system logs I cant find it

[jayantbh]

@VipinDevelops could help with that.

[iam-vipin]

Hey @shelar1423 you can go to side navigation bar just Click on System Logs Or you can just go to /system-logs

[jayantbh]

Hey @xyfer17 @Ossedda and @shelar1423 (and anyone coming to this before it's closed [or assigned]) We're leaving this issue unassigned at the moment.

We're happy to see various approaches from whoever wants to take a shot at it.

If we like your direction and approach, we'll assign the issue to you.

[aadarsh-nagrath]

few suggestions for visual refinements @VipinDevelops @jayantbh :

1. Color Coding by Log Level INFO logs can be displayed in blue, ERROR in red, WARNING in yellow, and so on.

   [INFO] Booting worker with pid: 114 (blue)
   [ERROR] Failed to start server (red)
   [WARNING] High memory usage detected (yellow)
   

2.Structured Formatting

can have more structured formatting with clear sections for timestamp, log level, and message content:

[Timestamp: 2024-10-06 10:58:45] [Level: INFO] [Process: 112] [Message: Booting worker with pid: 114]

This makes it easier to scan the logs visually, its optional though seems organised but lot of logs don't have such formatting.

3.Highlight Key Actions GET, POST, PUT requests could be bolded or highlighted to stand out.

4. Log Collapsing for Repeated Events

• When the same event (like GET / HTTP/1.1) is repeated many times, group similar logs to avoid redundancy:

  127.0.0.1 - - [06/Oct/2024] "GET / HTTP/1.1" 200 26 repeated 10 times from 11:54:25 to 12:01:07
  

5. Interactive UI with Filtering

• If the logs are displayed in a UI, add interactive filters to show/hide specific log levels (e.g., only errors, warnings).
• Search Functionality: Allow searching by timestamp, HTTP status codes, or keywords.

Thoughts ?

[jayantbh]

Looks interesting. I'd be happy to see a PR with your approach. There is one PR for this already, so you could try to co-ordinate with other authors if you want.