Update TaskLogContent to support virtualized rendering

[guan404ming]

Related Issue

#50333
cc @bbovenzi@pierrejeambrun

Why

The log rendering would be quite slow or even crash browser when rendering large logs on the frontend

How

By using @tanstack/react-virtual to support virtualized rendering, I mostly follow this official example to implement. I choose to use dynamic rendering instead of specifying fixed height since our log would have different height.

--> about 7x speed up (for 10000 logs on my local machine and tested 10 times)
Calculated from the moment the browser logs the parsed logs to the console until it’s finally rendered on the screen. Although this isn’t perfectly precise, it still gives a simple metric to confirm that our speed-up trend is positive.

before -> avg 7s

Screen.Recording.2025-05-18.at.3.38.53.PM.mov

after -> avg 1s

Screen.Recording.2025-05-18.at.3.37.58.PM.mov

Minor change: add accept field for useLog, which make us to support ndjson easily by changing the field value and adding parse func for it after it is fully supported in the future.

---

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

[jscheffl]

Cool! I feel not confident to review but very great improvement!
Test needs to be fixed though.

[guan404ming]

Thanks! I'm still trying to figure out how to test virtualized list.

[aritra24]

Nice change! Good job!

[guan404ming]

Currently the list is worked in large monitor as in the small screen

Here are screenshots on 27 inch monitor

[bbovenzi]

Looks good overall. Just one nit.

And then, I wonder if we want this in 3.0.2 instead of 3.1.0? Its an enhancement, not a new feature.

[guan404ming]

And then, I wonder if we want this in 3.0.2 instead of 3.1.0? Its an enhancement, not a new feature.

I think it should go into 3.0.2 since it doesn’t affect how users interact with the component. I’d consider it more of an enhancement for ux. Imo the new feature would be the upcoming ndjson-related changes after #49470

[github-actions]

Backport successfully created: v3-0-test

Status	Branch	Result
✅	v3-0-test

[guan404ming]

Thanks!

[jason810496]

Big thanks @guan404ming 🙌 That's a fantastic improvement, really appreciate your work on this!

[guan404ming]

Related Issue

#50333
cc @bbovenzi@pierrejeambrun

Why

The log rendering would be quite slow or even crash browser when rendering large logs on the frontend

How

By using @tanstack/react-virtual to support virtualized rendering, I mostly follow this official example to implement. I choose to use dynamic rendering instead of specifying fixed height since our log would have different height.

--> about 7x speed up (for 10000 logs on my local machine and tested 10 times)
Calculated from the moment the browser logs the parsed logs to the console until it’s finally rendered on the screen. Although this isn’t perfectly precise, it still gives a simple metric to confirm that our speed-up trend is positive.

before -> avg 7s

Screen.Recording.2025-05-18.at.3.38.53.PM.mov

after -> avg 1s

Screen.Recording.2025-05-18.at.3.37.58.PM.mov

Minor change: add accept field for useLog, which make us to support ndjson easily by changing the field value and adding parse func for it after it is fully supported in the future.

---

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

[jscheffl]

Cool! I feel not confident to review but very great improvement!
Test needs to be fixed though.

[guan404ming]

Thanks! I'm still trying to figure out how to test virtualized list.

[aritra24]

Nice change! Good job!

[guan404ming]

Currently the list is worked in large monitor as in the small screen

Here are screenshots on 27 inch monitor

[bbovenzi]

Looks good overall. Just one nit.

And then, I wonder if we want this in 3.0.2 instead of 3.1.0? Its an enhancement, not a new feature.

[guan404ming]

And then, I wonder if we want this in 3.0.2 instead of 3.1.0? Its an enhancement, not a new feature.

I think it should go into 3.0.2 since it doesn’t affect how users interact with the component. I’d consider it more of an enhancement for ux. Imo the new feature would be the upcoming ndjson-related changes after #49470

[github-actions]

Backport successfully created: v3-0-test

Status	Branch	Result
✅	v3-0-test

[guan404ming]

Thanks!

[jason810496]

Big thanks @guan404ming 🙌 That's a fantastic improvement, really appreciate your work on this!

[guan404ming]

Related Issue

#50333
cc @bbovenzi@pierrejeambrun

Why

The log rendering would be quite slow or even crash browser when rendering large logs on the frontend

How

By using @tanstack/react-virtual to support virtualized rendering, I mostly follow this official example to implement. I choose to use dynamic rendering instead of specifying fixed height since our log would have different height.

--> about 7x speed up (for 10000 logs on my local machine and tested 10 times)
Calculated from the moment the browser logs the parsed logs to the console until it’s finally rendered on the screen. Although this isn’t perfectly precise, it still gives a simple metric to confirm that our speed-up trend is positive.

before -> avg 7s

Screen.Recording.2025-05-18.at.3.38.53.PM.mov

after -> avg 1s

Screen.Recording.2025-05-18.at.3.37.58.PM.mov

Minor change: add accept field for useLog, which make us to support ndjson easily by changing the field value and adding parse func for it after it is fully supported in the future.

---

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

[jscheffl]

Cool! I feel not confident to review but very great improvement!
Test needs to be fixed though.

[guan404ming]

Thanks! I'm still trying to figure out how to test virtualized list.

[aritra24]

Nice change! Good job!

[guan404ming]

Currently the list is worked in large monitor as in the small screen

Here are screenshots on 27 inch monitor

[bbovenzi]

Looks good overall. Just one nit.

And then, I wonder if we want this in 3.0.2 instead of 3.1.0? Its an enhancement, not a new feature.

[guan404ming]

And then, I wonder if we want this in 3.0.2 instead of 3.1.0? Its an enhancement, not a new feature.

I think it should go into 3.0.2 since it doesn’t affect how users interact with the component. I’d consider it more of an enhancement for ux. Imo the new feature would be the upcoming ndjson-related changes after #49470

[github-actions]

Backport successfully created: v3-0-test

Status	Branch	Result
✅	v3-0-test

[guan404ming]

Thanks!

[jason810496]

Big thanks @guan404ming 🙌 That's a fantastic improvement, really appreciate your work on this!

[guan404ming]

Related Issue

#50333
cc @bbovenzi@pierrejeambrun

Why

The log rendering would be quite slow or even crash browser when rendering large logs on the frontend

How

By using @tanstack/react-virtual to support virtualized rendering, I mostly follow this official example to implement. I choose to use dynamic rendering instead of specifying fixed height since our log would have different height.

--> about 7x speed up (for 10000 logs on my local machine and tested 10 times)
Calculated from the moment the browser logs the parsed logs to the console until it’s finally rendered on the screen. Although this isn’t perfectly precise, it still gives a simple metric to confirm that our speed-up trend is positive.

before -> avg 7s

Screen.Recording.2025-05-18.at.3.38.53.PM.mov

after -> avg 1s

Screen.Recording.2025-05-18.at.3.37.58.PM.mov

Minor change: add accept field for useLog, which make us to support ndjson easily by changing the field value and adding parse func for it after it is fully supported in the future.

---

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

[jscheffl]

Cool! I feel not confident to review but very great improvement!
Test needs to be fixed though.

[guan404ming]

Thanks! I'm still trying to figure out how to test virtualized list.

[aritra24]

Nice change! Good job!

[guan404ming]

Currently the list is worked in large monitor as in the small screen

Here are screenshots on 27 inch monitor

[bbovenzi]

Looks good overall. Just one nit.

And then, I wonder if we want this in 3.0.2 instead of 3.1.0? Its an enhancement, not a new feature.

[guan404ming]

And then, I wonder if we want this in 3.0.2 instead of 3.1.0? Its an enhancement, not a new feature.

I think it should go into 3.0.2 since it doesn’t affect how users interact with the component. I’d consider it more of an enhancement for ux. Imo the new feature would be the upcoming ndjson-related changes after #49470

[github-actions]

Backport successfully created: v3-0-test

Status	Branch	Result
✅	v3-0-test

[guan404ming]

Thanks!

[jason810496]

Big thanks @guan404ming 🙌 That's a fantastic improvement, really appreciate your work on this!

[guan404ming]

Related Issue

#50333
cc @bbovenzi@pierrejeambrun

Why

The log rendering would be quite slow or even crash browser when rendering large logs on the frontend

How

By using @tanstack/react-virtual to support virtualized rendering, I mostly follow this official example to implement. I choose to use dynamic rendering instead of specifying fixed height since our log would have different height.

--> about 7x speed up (for 10000 logs on my local machine and tested 10 times)
Calculated from the moment the browser logs the parsed logs to the console until it’s finally rendered on the screen. Although this isn’t perfectly precise, it still gives a simple metric to confirm that our speed-up trend is positive.

before -> avg 7s

Screen.Recording.2025-05-18.at.3.38.53.PM.mov

after -> avg 1s

Screen.Recording.2025-05-18.at.3.37.58.PM.mov

Minor change: add accept field for useLog, which make us to support ndjson easily by changing the field value and adding parse func for it after it is fully supported in the future.

---

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

[jscheffl]

Cool! I feel not confident to review but very great improvement!
Test needs to be fixed though.

[guan404ming]

Thanks! I'm still trying to figure out how to test virtualized list.

[aritra24]

Nice change! Good job!

[guan404ming]

Currently the list is worked in large monitor as in the small screen

Here are screenshots on 27 inch monitor

[bbovenzi]

Looks good overall. Just one nit.

And then, I wonder if we want this in 3.0.2 instead of 3.1.0? Its an enhancement, not a new feature.

[guan404ming]

And then, I wonder if we want this in 3.0.2 instead of 3.1.0? Its an enhancement, not a new feature.

I think it should go into 3.0.2 since it doesn’t affect how users interact with the component. I’d consider it more of an enhancement for ux. Imo the new feature would be the upcoming ndjson-related changes after #49470

[github-actions]

Backport successfully created: v3-0-test

Status	Branch	Result
✅	v3-0-test

[guan404ming]

Thanks!

[jason810496]

Big thanks @guan404ming 🙌 That's a fantastic improvement, really appreciate your work on this!

[guan404ming]

Related Issue

#50333
cc @bbovenzi@pierrejeambrun

Why

The log rendering would be quite slow or even crash browser when rendering large logs on the frontend

How

By using @tanstack/react-virtual to support virtualized rendering, I mostly follow this official example to implement. I choose to use dynamic rendering instead of specifying fixed height since our log would have different height.

--> about 7x speed up (for 10000 logs on my local machine and tested 10 times)
Calculated from the moment the browser logs the parsed logs to the console until it’s finally rendered on the screen. Although this isn’t perfectly precise, it still gives a simple metric to confirm that our speed-up trend is positive.

before -> avg 7s

Screen.Recording.2025-05-18.at.3.38.53.PM.mov

after -> avg 1s

Screen.Recording.2025-05-18.at.3.37.58.PM.mov

Minor change: add accept field for useLog, which make us to support ndjson easily by changing the field value and adding parse func for it after it is fully supported in the future.

---

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

[jscheffl]

Cool! I feel not confident to review but very great improvement!
Test needs to be fixed though.

[guan404ming]

Thanks! I'm still trying to figure out how to test virtualized list.

[aritra24]

Nice change! Good job!

[guan404ming]

Currently the list is worked in large monitor as in the small screen

Here are screenshots on 27 inch monitor

[bbovenzi]

Looks good overall. Just one nit.

And then, I wonder if we want this in 3.0.2 instead of 3.1.0? Its an enhancement, not a new feature.

[guan404ming]

And then, I wonder if we want this in 3.0.2 instead of 3.1.0? Its an enhancement, not a new feature.

I think it should go into 3.0.2 since it doesn’t affect how users interact with the component. I’d consider it more of an enhancement for ux. Imo the new feature would be the upcoming ndjson-related changes after #49470

[github-actions]

Backport successfully created: v3-0-test

Status	Branch	Result
✅	v3-0-test

[guan404ming]

Thanks!

[jason810496]

Big thanks @guan404ming 🙌 That's a fantastic improvement, really appreciate your work on this!

[guan404ming]

Related Issue

#50333
cc @bbovenzi@pierrejeambrun

Why

The log rendering would be quite slow or even crash browser when rendering large logs on the frontend

How

By using @tanstack/react-virtual to support virtualized rendering, I mostly follow this official example to implement. I choose to use dynamic rendering instead of specifying fixed height since our log would have different height.

--> about 7x speed up (for 10000 logs on my local machine and tested 10 times)
Calculated from the moment the browser logs the parsed logs to the console until it’s finally rendered on the screen. Although this isn’t perfectly precise, it still gives a simple metric to confirm that our speed-up trend is positive.

before -> avg 7s

Screen.Recording.2025-05-18.at.3.38.53.PM.mov

after -> avg 1s

Screen.Recording.2025-05-18.at.3.37.58.PM.mov

Minor change: add accept field for useLog, which make us to support ndjson easily by changing the field value and adding parse func for it after it is fully supported in the future.

---

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

[jscheffl]

Cool! I feel not confident to review but very great improvement!
Test needs to be fixed though.

[guan404ming]

Thanks! I'm still trying to figure out how to test virtualized list.

[aritra24]

Nice change! Good job!

[guan404ming]

Currently the list is worked in large monitor as in the small screen

Here are screenshots on 27 inch monitor

[bbovenzi]

Looks good overall. Just one nit.

And then, I wonder if we want this in 3.0.2 instead of 3.1.0? Its an enhancement, not a new feature.

[guan404ming]

And then, I wonder if we want this in 3.0.2 instead of 3.1.0? Its an enhancement, not a new feature.

I think it should go into 3.0.2 since it doesn’t affect how users interact with the component. I’d consider it more of an enhancement for ux. Imo the new feature would be the upcoming ndjson-related changes after #49470

[github-actions]

Backport successfully created: v3-0-test

Status	Branch	Result
✅	v3-0-test

[guan404ming]

Thanks!

[jason810496]

Big thanks @guan404ming 🙌 That's a fantastic improvement, really appreciate your work on this!

[guan404ming]

Related Issue

#50333
cc @bbovenzi@pierrejeambrun

Why

The log rendering would be quite slow or even crash browser when rendering large logs on the frontend

How

By using @tanstack/react-virtual to support virtualized rendering, I mostly follow this official example to implement. I choose to use dynamic rendering instead of specifying fixed height since our log would have different height.

--> about 7x speed up (for 10000 logs on my local machine and tested 10 times)
Calculated from the moment the browser logs the parsed logs to the console until it’s finally rendered on the screen. Although this isn’t perfectly precise, it still gives a simple metric to confirm that our speed-up trend is positive.

before -> avg 7s

Screen.Recording.2025-05-18.at.3.38.53.PM.mov

after -> avg 1s

Screen.Recording.2025-05-18.at.3.37.58.PM.mov

Minor change: add accept field for useLog, which make us to support ndjson easily by changing the field value and adding parse func for it after it is fully supported in the future.

---

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

[jscheffl]

Cool! I feel not confident to review but very great improvement!
Test needs to be fixed though.

[guan404ming]

Thanks! I'm still trying to figure out how to test virtualized list.

[aritra24]

Nice change! Good job!

[guan404ming]

Currently the list is worked in large monitor as in the small screen

Here are screenshots on 27 inch monitor

[bbovenzi]

Looks good overall. Just one nit.

And then, I wonder if we want this in 3.0.2 instead of 3.1.0? Its an enhancement, not a new feature.

[guan404ming]

And then, I wonder if we want this in 3.0.2 instead of 3.1.0? Its an enhancement, not a new feature.

I think it should go into 3.0.2 since it doesn’t affect how users interact with the component. I’d consider it more of an enhancement for ux. Imo the new feature would be the upcoming ndjson-related changes after #49470

[github-actions]

Backport successfully created: v3-0-test

Status	Branch	Result
✅	v3-0-test

[guan404ming]

Thanks!

[jason810496]

Big thanks @guan404ming 🙌 That's a fantastic improvement, really appreciate your work on this!