(airflow) branch main updated: Refactor `structuredLog` structure and layout (#51567)

[pierrejeambrun]

This is an automated email from the ASF dual-hosted git repository.

pierrejeambrun pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new b6db7a757b4 Refactor `structuredLog` structure and layout (#51567)
b6db7a757b4 is described below

commit b6db7a757b44b36bce821195bf4a5123aa62723f
Author: Guan Ming(Wesley) Chiu <105915352+guan404m...@users.noreply.github.com>
AuthorDate: Thu Jun 12 01:51:10 2025 +0800

    Refactor `structuredLog` structure and layout (#51567)
---
 .../ui/src/components/renderStructuredLog.tsx      | 54 +++++++++++-----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/components/renderStructuredLog.tsx 
b/airflow-core/src/airflow/ui/src/components/renderStructuredLog.tsx
index bbef27b9e1b..6abae7a0a08 100644
--- a/airflow-core/src/airflow/ui/src/components/renderStructuredLog.tsx
+++ b/airflow-core/src/airflow/ui/src/components/renderStructuredLog.tsx
@@ -127,25 +127,6 @@ export const renderStructuredLog = ({
     return "";
   }
 
-  elements.push(
-    <RouterLink
-      id={index.toString()}
-      key={`line_${index}`}
-      style={{
-        display: "inline-block",
-        marginRight: "10px",
-        paddingRight: "5px",
-        textAlign: "right",
-        userSelect: "none",
-        WebkitUserSelect: "none",
-        width: "3em",
-      }}
-      to={`${logLink}#${index}`}
-    >
-      {index}
-    </RouterLink>,
-  );
-
   if (Boolean(timestamp)) {
     elements.push("[", <Time datetime={timestamp} key={0} />, "] ");
   }
@@ -179,20 +160,20 @@ export const renderStructuredLog = ({
       ));
 
       return (
-        <details key={error.exc_type} open={true} style={{ marginLeft: "20em" 
}}>
-          <summary data-testid={`summary-${error.exc_type}`}>
+        <chakra.details key={error.exc_type} ml="20em" open={true}>
+          <chakra.summary data-testid={`summary-${error.exc_type}`}>
             <chakra.span color="fg.info" cursor="pointer">
               {error.exc_type}: {error.exc_value}
             </chakra.span>
-          </summary>
+          </chakra.summary>
           {errorLines}
-        </details>
+        </chakra.details>
       );
     });
   }
 
   elements.push(
-    <chakra.span className="event" key={2} style={{ whiteSpace: "pre-wrap" }}>
+    <chakra.span className="event" key={2} whiteSpace="pre-wrap">
       {addLinks(event)}
     </chakra.span>,
   );
@@ -209,14 +190,33 @@ export const renderStructuredLog = ({
   }
 
   elements.push(
-    <chakra.span className="event" key={3} style={{ whiteSpace: "pre-wrap" }}>
+    <chakra.span className="event" key={3} whiteSpace="pre-wrap">
       {details}
     </chakra.span>,
   );
 
   return (
-    <chakra.div key={index} lineHeight={1.5}>
-      {elements}
+    <chakra.div display="flex" key={index} lineHeight={1.5}>
+      <RouterLink
+        id={index.toString()}
+        key={`line_${index}`}
+        style={{
+          display: "inline-block",
+          flexShrink: 0,
+          marginRight: "10px",
+          paddingRight: "5px",
+          textAlign: "right",
+          userSelect: "none",
+          WebkitUserSelect: "none",
+          width: "3em",
+        }}
+        to={`${logLink}#${index}`}
+      >
+        {index}
+      </RouterLink>
+      <chakra.span overflow="auto" whiteSpace="pre-wrap" width="100%">
+        {elements}
+      </chakra.span>
     </chakra.div>
   );
 };