Use JoyUI components for Button, Select, and Input. In App.js, CssVarsProvider is added as a root provider to provide styles for components described above.
Menu Bar
Four navigation buttons: used for jumping to first, previous, next and last page.
File open button: used for open a new file.
Settings button: used to set various options, like page size.
Theme toggle button: Toggle between light, dark and system.
Tips button: Show keyboard shortcuts. Currently is a no-op.
Status Bar
Display status message and a button displaying current log event number. onClick, the button will copy the permalink of the current line to clipboard.
Validation performed
Open log viewer.
Menu Bar Test
Settings Test
Click settings (gear) button, toggle theme from light, system and dark, observe the color change except the monaco editor. Set page size and verify using navigation buttons.
Navigation Test
Click the four navigation buttons. Observe the change showed in the monaco editor as well as logEventNum in browser's navigation bar. Make sure to set proper pageSize in settings.
Open File Test
Click file open button, open a jsonl file locally, observe that monaco editor opens the provided log file.
Status Bar Test
Copy Permalink To Clipboard Test
Click the blue button (Log Event [current log event num] of [total log events]), it will copy the current log event's permalink to the clipboard.
References
new-log-viewer series: #45 #46 #48 #51 #52 #53 #54 #55 #56 #57
Description
App Theme
Use JoyUI components for Button, Select, and Input. In
App.js,CssVarsProvideris added as a root provider to provide styles for components described above.Menu Bar
Status Bar
Display status message and a button displaying current log event number.
onClick, the button will copy the permalink of the current line to clipboard.Validation performed
Open log viewer.
Menu Bar Test
Settings Test
Click settings (gear) button, toggle theme from light, system and dark, observe the color change except the monaco editor. Set page size and verify using navigation buttons.
Navigation Test
Click the four navigation buttons. Observe the change showed in the monaco editor as well as logEventNum in browser's navigation bar. Make sure to set proper pageSize in settings.
Open File Test
Click file open button, open a jsonl file locally, observe that monaco editor opens the provided log file.
Status Bar Test
Copy Permalink To Clipboard Test
Click the blue button (Log Event [current log event num] of [total log events]), it will copy the current log event's permalink to the clipboard.