feat(ui/logs)_#47619: add toggle for log grouping by davidfgcorreia · Pull Request #51146 · apache/airflow

davidfgcorreia · 2025-05-28T10:23:01Z

Add button in header to enable or disable log grouping
Allow logs to be shown linearly or grouped
Adjust group offset and display
https://www.youtube.com/watch?v=doCR4YM1Rek

^ 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

Looks good for me. Would propose to merge once the small nit is resolved.

airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx

bbovenzi · 2025-05-29T17:12:13Z

Closes #47619

Looks like we have a merge conflict too

bbovenzi · 2025-05-29T17:13:31Z

Functionality-wise. I am wondering if a "Expand/Collapse All" would be better than flattening the logs? I feel that if the logs have groups, we should respect that rather than possibly remove important information.

davidfgcorreia · 2025-05-31T15:52:05Z

I’d like to apologize for the incorrect merge I made earlier. I realize it may have caused confusion or disrupted the workflow.

pierrejeambrun

Nice PR thanks, just a few comments in addition to other things mentioned by Brent and Jens.

Looking good and working as expected.

airflow-core/src/airflow/ui/src/i18n/locales/de/common.json

airflow-core/src/airflow/ui/src/queries/useLogs.tsx

pierrejeambrun

Looking good, CI need fixing, one test needs to be adjusted because by default groups are collapsed.

guan404ming

LGTM, 2 nits.

airflow-core/src/airflow/ui/src/queries/useLogs.tsx

pierrejeambrun

beside @guan404ming small suggestions, It's almost ready, it would be great if you could also fix the last remaining test @davidfgcorreia so we can merge this :), thanks for your work.

davidfgcorreia · 2025-06-20T22:32:56Z

Hi, I'm having some trouble running the UI tests. I'm following the instructions in the runner and using pnpm test, but when I try to render a component like this:

I'm not getting the expected mocks. instead, I get a fetch error:

stderr | Fetch.onError (file:/root/documentos/PIC/airflow/airflow-core/src/airflow/ui/node_modules/.pnpm/happy-dom@17.4.6/node_modules/happy-dom/src/fetch/Fetch.ts:668:37)
Error: connect ECONNREFUSED 127.0.0.1:3000
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16) {
errno: -111,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '127.0.0.1',
port: 3000
}

It seems like the tests are trying to make a real network request instead of using mocks. Any idea what might be causing this or how I can properly mock the backend for this route?

Thanks in advance!

guan404ming · 2025-06-22T15:52:57Z

Hi, thanks for bringing this up.

This is actually expected behavior. During testing, a few unnecessary requests may still be triggered. However, they have already been bypassed in the setup and should not interfere with the tests. The bypass logic is handled in airflow-core/src/airflow/ui/testSetup.ts. If you're still seeing fetch errors that cause test failures, please let me know as there might be something else going on.

Feel free to ask more if there is anything need clarification.

davidfgcorreia · 2025-06-24T10:47:10Z

Hi, thanks for the clarification!

That makes sense good to know the unnecessary requests are already being bypassed in the setup.

However, I’m still running into an issue after rebasing. When I try to run the frontend tests, I get the following error:

Error: Failed to resolve import "i18next-http-backend" from "src/i18n/config.ts". Does the file exist?
Plugin: vite:import-analysis
File: /root/documentos/PIC/airflow/airflow-core/src/airflow/ui/src/i18n/config.ts:21:20
18 | */ import i18n from "i18next";
19 | import LanguageDetector from "i18next-browser-languagedetector";
20 | import Backend from "i18next-http-backend";
| ^
21 | import { initReactI18next } from "react-i18next";

Do you have any idea what might be causing this? It seems like the module isn't being resolved correctly after the rebase.

Thanks again!

pierrejeambrun · 2025-06-24T11:46:57Z

'i18next-http-backend' is likely missing in your node modules. How are you trying to run the UI. Did you refreshed the dependencies (yarn install).

- Add button in header to enable or disable log grouping - Allow logs to be shown linearly or grouped - Adjust group offset and display Co-authored-by: Francisco Núncio <francisco.nuncio@tecnico.ulisboa.pt>

- Add expand/collapse all functionality for log groups using the "expanded" prop - Ensure initial logs state is collapsed and button shows "Expand All" - Add keyboard shortcut (E) to toggle expand/collapse all log groups - Unify button styles with black background and consistent padding/hover

-Rebase - Refactor TaskLogHeader to use a ButtonGroup with IconButton for expand/collapse, matching the style and behavior of ToggleGroups in the grid view - Warnings on precomit but not on the file i changed

…, and rebase - Added "expand" section with tooltip, expand, and collapse strings to all locale JSON files - Fixed requested issues in the UI related to expand/collapse controls - Performed rebase to update branch with latest changes

davidfgcorreia · 2025-06-24T12:23:50Z

Thanks! You're right . I hadn't run yarn install after the rebase.

Just did it now and that fixed the issue. Appreciate the quick help!

davidfgcorreia · 2025-06-24T12:57:55Z

Now I’m hitting another problem when the pre-commit runs. It seems to fail during the TypeScript check with the following error:

src/pages/Error.tsx:45:29 - error TS2339: Property 'env' does not exist on type 'ImportMeta'.

45 const isDev = import.meta.env.DEV;
~~~
This happens even though I’m not touching that file. Looks like the internal ts_compile_lint_ui.py script compiles a temporary tsconfig.json, and it might not be picking up the proper Vite type declarations?

Let me know if this is something I should fix on my end or if the pre-commit script needs an adjustment.

pierrejeambrun · 2025-06-26T12:23:08Z

We need to add /// <reference types="vite/types/importMeta.d.ts" /> to airflow-core/src/airflow/ui/src/vite-env.d.ts to solve this.

I don't know why this is an issue suddenly

davidfgcorreia · 2025-06-26T14:06:46Z

Should I still go ahead and push the changes, even with this error.

pierrejeambrun · 2025-06-26T14:12:57Z

You can add the line to the file and push, it will silence the error. (I have updated my previous message, I didn't realize that markdown formatting was messing up what I wrote)

davidfgcorreia · 2025-06-26T14:41:01Z

Ok, I’ll take care of that and push the change.

…18n, and update environment typings Updated log header UI (TaskLogHeader.tsx) to use i18n for expand/collapse/fullscreen tooltips and aria-labels. Fixed and improved expand/collapse controls and tooltips in the UI for accessibility and localization. Updated vite-env.d.ts to ensure correct Vite and ImportMeta type references for the Airflow UI. Minor refactors and cleanup in log and query files to support new i18n keys and UI consistency.

Changes to the log grouping UI in useLogs.tsx, using <chakra.details> and <chakra.summary> for grouped log sections. Ensures log groups are rendered with correct expand/collapse behavior and accessibility. Updates the related test (Logs.test.tsx) to match the new log grouping and expand/collapse structure.

…buttons

davidfgcorreia · 2025-07-02T11:58:43Z

Everything that was requested has been addressed.
Is there anything else needed for this PR to be merged?
@pierrejeambrun

pierrejeambrun

LGTM

* feat(ui/logs)_#47619: add toggle for log grouping - Add button in header to enable or disable log grouping - Allow logs to be shown linearly or grouped - Adjust group offset and display Co-authored-by: Francisco Núncio <francisco.nuncio@tecnico.ulisboa.pt> * Fix Button distance * ajust gap betewn butons * feat(ui/logs): logs UX, keyboard accessibility, and code quality - Add expand/collapse all functionality for log groups using the "expanded" prop - Ensure initial logs state is collapsed and button shows "Expand All" - Add keyboard shortcut (E) to toggle expand/collapse all log groups - Unify button styles with black background and consistent padding/hover * feat(ui/logs): unify expand/collapse log controls with grid view style -Rebase - Refactor TaskLogHeader to use a ButtonGroup with IconButton for expand/collapse, matching the style and behavior of ToggleGroups in the grid view - Warnings on precomit but not on the file i changed * feat(i18n/ui): add expand/collapse translations, fix requested issues, and rebase - Added "expand" section with tooltip, expand, and collapse strings to all locale JSON files - Fixed requested issues in the UI related to expand/collapse controls - Performed rebase to update branch with latest changes * feat(i18n/ui): add expand/collapse translations, improve log header i18n, and update environment typings Updated log header UI (TaskLogHeader.tsx) to use i18n for expand/collapse/fullscreen tooltips and aria-labels. Fixed and improved expand/collapse controls and tooltips in the UI for accessibility and localization. Updated vite-env.d.ts to ensure correct Vite and ImportMeta type references for the Airflow UI. Minor refactors and cleanup in log and query files to support new i18n keys and UI consistency. * fix(ui/logs): restore log grouping UI and update related test Changes to the log grouping UI in useLogs.tsx, using <chakra.details> and <chakra.summary> for grouped log sections. Ensures log groups are rendered with correct expand/collapse behavior and accessibility. Updates the related test (Logs.test.tsx) to match the new log grouping and expand/collapse structure. * test(logs): adjust test selectors to handle multiple collapse/expand buttons --------- Co-authored-by: Francisco Núncio <francisco.nuncio@tecnico.ulisboa.pt>

davidfgcorreia requested review from bbovenzi, jscheffl, pierrejeambrun, ryanahamilton and shubhamraj-git as code owners May 28, 2025 10:23

boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label May 28, 2025

jscheffl reviewed May 28, 2025

View reviewed changes

airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx Outdated Show resolved Hide resolved

bbovenzi added this to the Airflow 3.1.0 milestone May 29, 2025

davidfgcorreia requested review from BasPH, Lee-W, XD-DENG, amoghrajesh, ashb, bugraoz93, eladkal, ephraimbuddy, gopidesupavan, hussein-awala, jason810496, jedcunningham, kaxil, mobuchowski, o-nikolas, potiuk and rawwar as code owners May 31, 2025 15:43

davidfgcorreia force-pushed the feature#47619 branch 2 times, most recently from 294263e to 65373d7 Compare May 31, 2025 16:27

pierrejeambrun reviewed Jun 13, 2025

View reviewed changes

airflow-core/src/airflow/ui/src/i18n/locales/de/common.json Outdated Show resolved Hide resolved

airflow-core/src/airflow/ui/src/queries/useLogs.tsx Outdated Show resolved Hide resolved

airflow-core/src/airflow/ui/src/queries/useLogs.tsx Outdated Show resolved Hide resolved

pierrejeambrun approved these changes Jun 17, 2025

View reviewed changes

guan404ming approved these changes Jun 19, 2025

View reviewed changes

airflow-core/src/airflow/ui/src/queries/useLogs.tsx Outdated Show resolved Hide resolved

airflow-core/src/airflow/ui/src/queries/useLogs.tsx Outdated Show resolved Hide resolved

pierrejeambrun reviewed Jun 20, 2025

View reviewed changes

Lee-W removed their request for review June 23, 2025 08:04

davidfgcorreia and others added 6 commits June 24, 2025 12:50

feat(ui/logs)_#47619: add toggle for log grouping

4d0c954

- Add button in header to enable or disable log grouping - Allow logs to be shown linearly or grouped - Adjust group offset and display Co-authored-by: Francisco Núncio <francisco.nuncio@tecnico.ulisboa.pt>

Fix Button distance

ab5ad36

ajust gap betewn butons

51a322b

feat(ui/logs): unify expand/collapse log controls with grid view style

35671ae

-Rebase - Refactor TaskLogHeader to use a ButtonGroup with IconButton for expand/collapse, matching the style and behavior of ToggleGroups in the grid view - Warnings on precomit but not on the file i changed

davidfgcorreia force-pushed the feature#47619 branch from 02d276c to 3020034 Compare June 26, 2025 17:44

davidfgcorreia added 2 commits June 26, 2025 19:01

test(logs): adjust test selectors to handle multiple collapse/expand …

820f724

…buttons

pierrejeambrun approved these changes Jul 4, 2025

View reviewed changes

pierrejeambrun merged commit 08f1749 into apache:main Jul 4, 2025
51 checks passed

pierrejeambrun mentioned this pull request Aug 21, 2025

Add support for nested log grouping in UI #47619

Closed

2 tasks

Conversation

davidfgcorreia commented May 28, 2025

Uh oh!

jscheffl left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bbovenzi commented May 29, 2025

Uh oh!

bbovenzi commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

davidfgcorreia commented May 31, 2025

Uh oh!

pierrejeambrun left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pierrejeambrun left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

guan404ming left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

pierrejeambrun left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

davidfgcorreia commented Jun 20, 2025

Uh oh!

guan404ming commented Jun 22, 2025

Uh oh!

davidfgcorreia commented Jun 24, 2025

Uh oh!

pierrejeambrun commented Jun 24, 2025

Uh oh!

davidfgcorreia commented Jun 24, 2025

Uh oh!

davidfgcorreia commented Jun 24, 2025

Uh oh!

pierrejeambrun commented Jun 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

davidfgcorreia commented Jun 26, 2025

Uh oh!

pierrejeambrun commented Jun 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

davidfgcorreia commented Jun 26, 2025

Uh oh!

davidfgcorreia commented Jul 2, 2025

Uh oh!

pierrejeambrun left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

bbovenzi commented May 29, 2025 •

edited

Loading

pierrejeambrun left a comment •

edited

Loading

pierrejeambrun left a comment •

edited

Loading

pierrejeambrun commented Jun 26, 2025 •

edited

Loading

pierrejeambrun commented Jun 26, 2025 •

edited

Loading