Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Sep 16, 2024

Conversation

junhaoliao
Copy link
Member

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 Add support for loading files, decoding them as JSONL, and formatting them using a Logback-like format string. #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.

@junhaoliao junhaoliao changed the title Add custom themes and language support to Monaco editor. new-log-viewer: Add custom themes and language support to Monaco editor. Sep 12, 2024
Copy link
Collaborator

@Henry8192 Henry8192 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please address the suggestions on theme.ts and utils.ts. The rest looks good to me.

Henry8192
Henry8192 previously approved these changes Sep 12, 2024
@@ -7,6 +7,17 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
import {ACTION_NAME} from "../../../utils/actions";


enum TOKEN_NAMES {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
enum TOKEN_NAMES {
enum TOKEN_NAME {

Plural naming is reserved for arrays.

* Resets the cached page size in case it causes a client OOM. If it doesn't, the saved value
* will be restored when {@link restoreCachedPageSize} is called.
*/
const resetCachedPageSize = () => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was pulled out from Editor to avoid max lines lint violation.

Copy link
Member

@kirkrodrigues kirkrodrigues left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few minor things.

/**
* Sets up custom themes for the Monaco editor.
*/
const setupThemes = () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor nit: Grammatically, this should be setUpThemes since setup is a noun, not a verb. Feel free to ignore if you think it's more confusing.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about initThemes?

On the other hand, for consistency we should rename the other functions as well. Any objection if we do the renaming in the same PR?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mm, that might touch a lot of places. We could leave it as setupXxx for now and do the refactoring in another PR.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure

@junhaoliao junhaoliao requested review from kirkrodrigues and removed request for kirkrodrigues September 16, 2024 19:57
Copy link
Member

@kirkrodrigues kirkrodrigues left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the PR title, how about:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants