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
11 stars 12 forks source link

new-log-viewer: Add custom Monaco editor themes and a Monaco language for logs. #69

Closed junhaoliao closed 1 month ago

junhaoliao commented 1 month ago

References

new-log-viewer series: #45 #46 #48 #51 #52 #53 #54 #55 #56 #59 #60 #61 #62 #63 #66 #67 #68

59 added theming support via JoyUI.

Description

  1. Add custom log language to Monaco editor.
  2. Add custom themes to Monaco editor which specifies colors on the language tokens.
  3. Synchronize the Monaco editor's theme with JoyUI's "mode".

Validation performed

  1. On Windows, set system color mode to "light" in the settings app; cleared browser caches.
  2. Referred to #46, started dev server and loaded example file https://yscope.s3.us-east-2.amazonaws.com/sample-logs/yarn-ubuntu-resourcemanager-ip-172-31-17-135.log.1.clp.zst .
  3. Observed the app (menu bar, editor, and status bar) loaded in "light" theme, and the dates, log levels and numbers are correctly highlighted with a light editor background.
  4. Opened the settings modal, observed the color mode was "system".
  5. Changed the color mode to "dark" and observed the app loaded in "dark" theme, and the dates, log levels and numbers are correctly highlighted with a dark editor background.
  6. Changed the color mode to "light" and observed the app loaded in "light" theme, and the dates, log levels and numbers are correctly highlighted with a light editor background.