search

y-scope / yscope-log-viewer

A tool that can be used to view logs compressed in CLP's IR Stream format.
Apache License 2.0
9 stars 12 forks source link

new-log-viewer: Integrate Monaco Editor for enhanced log viewing. #54

Closed junhaoliao closed 3 weeks ago

junhaoliao commented 1 month ago

References

new-log-viewer series: #45 #46 #48 #51 #52 #53

Description

This PR introduces the MonacoInstance component, integrating the Monaco Editor into the log viewer application. The editor provides a more interactive and feature-rich environment for viewing log files, including custom actions and mobile support.

  1. MonacoInstance Component:
    • monaco-editor Wrapper (named <MonacoEdior/>): A React component that wraps the official monaco-editor with configurable properties and event handlers.
    • <MonacoEdior/> Wrapper (named <MonacoInstance/>; see index.tsx): A React component that wraps the <MonacoEditor/> with logging viewing specific context and states.
  2. Monaco Editor Integration into Layout: Now the logs messages are replaced by the newly added <MonacoInstance/>.
  3. Utility Enhancements:
    • Added a new data structure utility function getMapKeyByValue to find the key associated with a specific value in a map.
    • Added math utilities getLastItemNumInPrevChunk and getNextItemNumInNextChunk.
  4. CSS Refactor: Consolidated CSS selectors for full-screen layout configuration.

Validation performed

  1. Referred to the validation steps in #46 . Loaded example.jsonl.
  2. Observed the logs being presented in the newly added MonacoInstance which takes the full width and rest of height of the viewport.
  3. Clicked debug button "Clear localStorage" to ensure the format string and page size (default: 10000) settings are restored to default.
  4. On Page 1, clicked on the 3rd line (the 3rd log message) and observed the logEventNum being updated in both the debug header and the URL parameter as 3.
  5. Updated the logEventNum as 1 in the debug header input and observed the cursor moved to the first event; updated the logEventNum in the URL hash parameter and observed the cursor moved to the 3rd event.
  6. Pressed Ctrl + ] (shortcut for "Next Page" action) and observed the 2nd page getting loaded. The cursor position was at the first event on the page (logEventNum=10001).
  7. Now on Page 2, clicked on the 3rd line (the 10003rd log message) and observed the logEventNum being updated in both the debug header and the URL parameter as 10003.
  8. Pressed Ctrl + [ (shortcut for "Previous Page" action) and observed the 1st page getting loaded. The cursor position was at the last event on the page (logEventNum=10000).
  9. Now on Page 1, pressed Ctrl + [ again and the cursor moved to the very first message.
  10. Pressed Ctrl + I (shortcut for "Go to Bottom") and observed the cursor moved to the last line and the last line got revealed in the editor.
  11. Pressed Ctrl + U (shortcut for "Go to Top") and observed the cursor moved to the first line and the first line got revealed in the editor.
  12. Pressed Ctrl + Shift + ] (shortcut for "Last Page") and observed the last page got loaded and the cursor moved to the last line.
  13. Pressed Ctrl + Shift + [ (shortcut for "First Page") and observed the first page got loaded and the cursor moved to the first line.
  14. Selected LogEventNum debug input box so that the editor was no longer focused. Pressed ` and observed the editor regained focus.