Skip to content

Add color to log lines in UI for error and warnings based on keywords #39006

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

Merged
merged 3 commits into from
May 2, 2024

Conversation

tirkarthi
Copy link
Contributor

closes: #37443
related: #37443

We have been using this feature in Airflow 2.3.4 in the legacy log page by applying regex against lines to apply color for them. It
received positive feedback from users since it's helpful in quickly identifying lines causing error while reading large log fies. This adds the feature to the new log tab in the grid. Users can set additional keywords besides common keywords like error and exception to highlight them since we found cases like "fail", "access denied", "missing" etc from trigger logs emitted by systems outside our Airflow that also were helpful in debugging but maybe not applicable to everyone. This also handles case where the log line already has an ansi code to wrap remaining part of the line with color to avoid conflict.

Error and exception lines in red color with bold style

image

Case where warn keyword is present but it has it's own ansi code to handle nested ansi codes

image

@boring-cyborg boring-cyborg bot added area:UI Related to UI/UX. For Frontend Developers. area:webserver Webserver related Issues labels Apr 14, 2024
@tirkarthi tirkarthi mentioned this pull request Apr 14, 2024
2 tasks
Copy link
Contributor

@dirrao dirrao left a comment

Choose a reason for hiding this comment

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

Nice feature. It will help to avoid the scanning the entire logs.
Does it work in case of bulky logs?

@tirkarthi
Copy link
Contributor Author

@dirrao This is to do string search and it has to process each line to apply color ansi codes. This is already done on whole log file to apply log level class based on info, error, warning etc and to build filters. I haven't benchmarked it but I don't see this adding much overhead.

@dirrao
Copy link
Contributor

dirrao commented Apr 16, 2024

@dirrao This is to do string search and it has to process each line to apply color ansi codes. This is already done on whole log file to apply log level class based on info, error, warning etc and to build filters. I haven't benchmarked it but I don't see this adding much overhead.

In case of data workloads the logs are too heavy on the client side. I believe test it once with bulky logs to see the obvious issues.

@bbovenzi
Copy link
Contributor

cc: @jscheffl

Copy link
Contributor

@jscheffl jscheffl left a comment

Choose a reason for hiding this comment

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

Thanks for the contribution. I really like this.

As I also contributed the ANSI coloring in 2.9 this is a good next logical extension.

Can you make a small performance check e.g. with 200k log lines, how long it rendern before and after this feature? Just to understand how performance is assumed to degrade?

Alongside some small considerations/comments for polishing. Small improvements but in general quite good already!

@tirkarthi
Copy link
Contributor Author

@dirrao @jscheffl Used below dag which generated around 30MB log file and the function call added around 15ms with total render time taking 9-10 seconds. I did it with dev builds using "yarn dev" since the function name was not searchable in production mode possibly due to no source mapping. Please let me know if I missed anything. Thanks


from datetime import datetime

from airflow import DAG
from airflow.decorators import task

with DAG(
    dag_id="perf_39006",
    start_date=datetime(2024, 1, 1),
    catchup=False,
    schedule_interval=None,
) as dag:

    @task
    def log_line_generator():
        import random

        lorem_ipsum_words = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor".split()

        for _ in range(200_000):
            random.shuffle(lorem_ipsum_words)
            line = " ".join(lorem_ipsum_words)
            rand = random.random()

            if rand > 0.9:
                print(f"{line} error")
            elif rand > 0.8:
                print(f"{line} warn")
            else:
                print(line)

    log_line_generator()

Without patch

before_color

With patch :

after_color

Copy link
Contributor

@jscheffl jscheffl left a comment

Choose a reason for hiding this comment

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

Thanks for the revision. Tested manually with a test DAG ad - looks good!

...except also double checked and on the legacy log UI the colors are not showing up. But the code changes assume it should?
image

Copy link
Contributor

@jscheffl jscheffl left a comment

Choose a reason for hiding this comment

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

Ah, anyway I assume in 80-90% probably the legacy log view will be gone in 2.10 (?) so if this is degrading might be acceptable.

@tirkarthi
Copy link
Contributor Author

The legacy log view doesn't have code changes to process every line. It just has the whole log as a single string so doing splitting and then adding ansi codes to join them back was more work that I left off since there is an issue to remove legacy log view especially with full-screen mode and other improvements being made to new UI.

Copy link
Contributor

@bbovenzi bbovenzi left a comment

Choose a reason for hiding this comment

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

Yeah, we'll remove the legacy task pages in 2.10 so this is good for me

@bbovenzi bbovenzi added this to the Airflow 2.10.0 milestone May 2, 2024
@bbovenzi bbovenzi merged commit 0b08abd into apache:main May 2, 2024
42 checks passed
@utkarsharma2 utkarsharma2 added the type:new-feature Changelog: New Features label Jun 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:UI Related to UI/UX. For Frontend Developers. area:webserver Webserver related Issues type:new-feature Changelog: New Features
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add colour to logs
5 participants
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy