(airflow) branch main updated: Update task log styling (#47466)

[jscheffl]

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

jscheffl 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 97d1645204f Update task log styling (#47466)
97d1645204f is described below

commit 97d1645204f260f771919250b0567c2987c459b9
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Thu Mar 6 15:32:50 2025 -0500

    Update task log styling (#47466)
    
    * Update log line styling to make highlighting easier
    
    * Change selection bg color
---
 .../src/pages/TaskInstance/Logs/TaskLogContent.tsx | 16 +++++++++++++--
 airflow/ui/src/queries/useLogs.tsx                 | 23 +++++++++++-----------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/airflow/ui/src/pages/TaskInstance/Logs/TaskLogContent.tsx 
b/airflow/ui/src/pages/TaskInstance/Logs/TaskLogContent.tsx
index 320f6267007..5a74b0af5f1 100644
--- a/airflow/ui/src/pages/TaskInstance/Logs/TaskLogContent.tsx
+++ b/airflow/ui/src/pages/TaskInstance/Logs/TaskLogContent.tsx
@@ -34,8 +34,20 @@ export const TaskLogContent = ({ error, isLoading, logError, 
parsedLogs, wrap }:
   <Box>
     <ErrorAlert error={error ?? logError} />
     <ProgressBar size="xs" visibility={isLoading ? "visible" : "hidden"} />
-    <Code overflow="auto" py={3} textWrap={wrap ? "pre" : "nowrap"} 
width="100%">
-      <VStack alignItems="flex-start">{parsedLogs}</VStack>
+    <Code
+      css={{
+        "& *::selection": {
+          bg: "blue.subtle",
+        },
+      }}
+      overflow="auto"
+      py={3}
+      textWrap={wrap ? "pre" : "nowrap"}
+      width="100%"
+    >
+      <VStack alignItems="flex-start" gap={0}>
+        {parsedLogs}
+      </VStack>
     </Code>
   </Box>
 );
diff --git a/airflow/ui/src/queries/useLogs.tsx 
b/airflow/ui/src/queries/useLogs.tsx
index bad75db519e..b2323d203a1 100644
--- a/airflow/ui/src/queries/useLogs.tsx
+++ b/airflow/ui/src/queries/useLogs.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Badge, Text } from "@chakra-ui/react";
+import { chakra, Code } from "@chakra-ui/react";
 import type { UseQueryOptions } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import innerText from "react-innertext";
@@ -50,9 +50,9 @@ const renderStructuredLog = (
 ) => {
   if (typeof logMessage === "string") {
     return (
-      <Text key={index} py={1}>
+      <chakra.span key={index} lineHeight={1.5}>
         {logMessage}
-      </Text>
+      </chakra.span>
     );
   }
 
@@ -74,14 +74,15 @@ const renderStructuredLog = (
 
   if (typeof level === "string") {
     elements.push(
-      <Badge
+      <Code
         colorPalette={level.toUpperCase() in LogLevel ? 
logLevelColorMapping[level as LogLevel] : undefined}
         key={1}
-        minH={3}
-        size="sm"
+        lineHeight={1.5}
+        minH={0}
+        px={0}
       >
         {level.toUpperCase()}
-      </Badge>,
+      </Code>,
       " - ",
     );
   }
@@ -104,9 +105,9 @@ const renderStructuredLog = (
   }
 
   return (
-    <Text key={index} py={1}>
+    <chakra.span key={index} lineHeight={1.5}>
       {elements}
-    </Text>
+    </chakra.span>
   );
 };
 
@@ -143,9 +144,9 @@ const parseLogs = ({ data, logLevelFilters }: 
ParseLogsProps) => {
       const group = (
         <details key={groupName} style={{ width: "100%" }}>
           <summary data-testid={`summary-${groupName}`}>
-            <Text as="span" color="fg.info" cursor="pointer">
+            <chakra.span color="fg.info" cursor="pointer">
               {groupName}
-            </Text>
+            </chakra.span>
           </summary>
           {groupLines}
         </details>