Show TI history for log links, more ti details and mapped tasks

airflow/www/static/js/dag/details/taskInstance/Details.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Text, Flex, Table, Tbody, Tr, Td, Code, Box } from "@chakra-ui/react";
 import { snakeCase } from "lodash";
 
@@ -47,38 +47,47 @@ const Details = ({ gridInstance, taskInstance, group }: Props) => {
   const isGroup = !!group?.children;
   const summary: React.ReactNode[] = [];
 
-  const {
-    mapIndex,
-    runId,
-    taskId,
-    tryNumber: finalTryNumber,
-  } = gridInstance || {};
+  const { runId, taskId } = gridInstance || {};
+
+  const finalTryNumber = gridInstance?.tryNumber || taskInstance?.tryNumber;
 
   const { data: tiHistory } = useTIHistory({
     dagId,
     taskId: taskId || "",
     runId: runId || "",
-    mapIndex,
+    mapIndex: taskInstance?.mapIndex || -1,
     enabled: !!(finalTryNumber && finalTryNumber > 1) && !!taskId, // Only try to look up task tries if try number > 1
   });
 
-  const [selectedTryNumber, setSelectedTryNumber] = useState(0);
+  const [selectedTryNumber, setSelectedTryNumber] = useState(
+    finalTryNumber || 1
+  );
+
+  // update state if the final try number changes
+  useEffect(() => {
+    if (finalTryNumber) setSelectedTryNumber(finalTryNumber);
+  }, [finalTryNumber]);
+
+  const tryInstance = tiHistory?.find(
+    (ti) => ti.tryNumber === selectedTryNumber
+  );
 
   const instance =
-    selectedTryNumber !== finalTryNumber
-      ? tiHistory?.find((ti) => ti.tryNumber === selectedTryNumber)
-      : gridInstance || taskInstance;
+    selectedTryNumber !== finalTryNumber && finalTryNumber && finalTryNumber > 1
+      ? tryInstance
+      : taskInstance;
 
   const state =
     instance?.state ||
     (instance?.state === "none" ? null : instance?.state) ||
+    gridInstance?.state ||
     null;
   const isMapped = group?.isMapped;
   const startDate = instance?.startDate;
   const endDate = instance?.endDate;
-  const executor = taskInstance?.executor || "<default>";
+  const executor = instance?.executor || "<default>";
 
-  const operator = taskInstance?.operator || group?.operator;
+  const operator = instance?.operator || group?.operator;
 
   const mappedStates = !taskInstance ? gridInstance?.mappedStates : undefined;
 
@@ -115,8 +124,6 @@ const Details = ({ gridInstance, taskInstance, group }: Props) => {
     });
   }
 
-  const isTaskInstance = !isGroup && !(isMapped && mapIndex === undefined);
-
   const taskIdTitle = isGroup ? "Task Group ID" : "Task ID";
   const isStateFinal =
     state &&
@@ -125,7 +132,7 @@ const Details = ({ gridInstance, taskInstance, group }: Props) => {
 
   return (
     <Box mt={3} flexGrow={1}>
-      {isTaskInstance && !!taskInstance && (
+      {!!taskInstance && (
         <TrySelector
           taskInstance={taskInstance}
           selectedTryNumber={selectedTryNumber || finalTryNumber}
@@ -189,17 +196,17 @@ const Details = ({ gridInstance, taskInstance, group }: Props) => {
               </Td>
             </Tr>
           )}
-          {mapIndex !== undefined && (
+          {instance?.mapIndex !== undefined && (
             <Tr>
               <Td>Map Index</Td>
-              <Td>{mapIndex}</Td>
+              <Td>{instance.mapIndex}</Td>
             </Tr>
           )}
-          {taskInstance?.renderedMapIndex !== undefined &&
-            taskInstance?.renderedMapIndex !== null && (
+          {instance?.renderedMapIndex !== undefined &&
+            instance?.renderedMapIndex !== null && (
               <Tr>
                 <Td>Rendered Map Index</Td>
-                <Td>{taskInstance.renderedMapIndex}</Td>
+                <Td>{instance.renderedMapIndex}</Td>
               </Tr>
             )}
           {operator && (
@@ -239,32 +246,32 @@ const Details = ({ gridInstance, taskInstance, group }: Props) => {
               </Td>
             </Tr>
           )}
-          {!!taskInstance?.pid && (
+          {!!instance?.pid && (
             <Tr>
               <Td>Process ID (PID)</Td>
               <Td>
-                <ClipboardText value={taskInstance.pid.toString()} />
+                <ClipboardText value={instance.pid.toString()} />
               </Td>
             </Tr>
           )}
-          {!!taskInstance?.hostname && (
+          {!!instance?.hostname && (
             <Tr>
               <Td>Hostname</Td>
               <Td>
-                <ClipboardText value={taskInstance.hostname} />
+                <ClipboardText value={instance.hostname} />
               </Td>
             </Tr>
           )}
-          {!!taskInstance?.pool && (
+          {!!instance?.pool && (
             <Tr>
               <Td>Pool</Td>
-              <Td>{taskInstance.pool}</Td>
+              <Td>{instance.pool}</Td>
             </Tr>
           )}
-          {!!taskInstance?.poolSlots && (
+          {!!instance?.poolSlots && (
             <Tr>
               <Td>Pool Slots</Td>
-              <Td>{taskInstance.poolSlots}</Td>
+              <Td>{instance.poolSlots}</Td>
             </Tr>
           )}
           {executor && (
@@ -273,49 +280,49 @@ const Details = ({ gridInstance, taskInstance, group }: Props) => {
               <Td>{executor}</Td>
             </Tr>
           )}
-          {!!taskInstance?.executorConfig && (
+          {!!instance?.executorConfig && (
             <Tr>
               <Td>Executor Config</Td>
               <Td>
-                <Code fontSize="md">{taskInstance.executorConfig}</Code>
+                <Code fontSize="md">{instance.executorConfig.toString()}</Code>
               </Td>
             </Tr>
           )}
-          {!!taskInstance?.unixname && (
+          {!!instance?.unixname && (
             <Tr>
               <Td>Unix Name</Td>
-              <Td>{taskInstance.unixname}</Td>
+              <Td>{instance.unixname}</Td>
             </Tr>
           )}
-          {!!taskInstance?.maxTries && (
+          {!!instance?.maxTries && (
             <Tr>
               <Td>Max Tries</Td>
-              <Td>{taskInstance.maxTries}</Td>
+              <Td>{instance.maxTries}</Td>
             </Tr>
           )}
-          {!!taskInstance?.queue && (
+          {!!instance?.queue && (
             <Tr>
               <Td>Queue</Td>
-              <Td>{taskInstance.queue}</Td>
+              <Td>{instance.queue}</Td>
             </Tr>
           )}
-          {!!taskInstance?.priorityWeight && (
+          {!!instance?.priorityWeight && (
             <Tr>
               <Td>Priority Weight</Td>
-              <Td>{taskInstance.priorityWeight}</Td>
+              <Td>{instance.priorityWeight}</Td>
             </Tr>
           )}
         </Tbody>
       </Table>
-      {taskInstance?.renderedFields && (
+      {instance?.renderedFields && (
         <Box mt={3}>
           <Text as="strong" mb={3}>
             Rendered Templates
           </Text>
           <Table>
             <Tbody>
-              {Object.keys(taskInstance.renderedFields).map((key) => {
-                const renderedFields = taskInstance.renderedFields as Record<
+              {Object.keys(instance.renderedFields).map((key) => {
+                const renderedFields = instance.renderedFields as Record<
                   string,
                   unknown
                 >;

airflow/www/static/js/dag/details/taskInstance/Logs/LogLink.test.tsx

@@ -42,7 +42,7 @@ describe("Test LogLink Component.", () => {
     expect(linkElement).not.toHaveAttribute("target");
     expect(
       linkElement?.href.includes(
-        `?dag_id=dummyDagId&task_id=dummyTaskId&execution_date=2020%3A01%3A01T01%3A00%2B00%3A00&map_index=-1&format=file&try_number=${tryNumber}`
+        `?dag_id=dummyDagId&task_id=dummyTaskId&execution_date=2020%3A01%3A01T01%3A00%2B00%3A00&map_index=-1&try_number=${tryNumber}&format=file`
       )
     ).toBeTruthy();
   });

airflow/www/static/js/dag/details/taskInstance/Logs/LogLink.tsx

@@ -49,14 +49,12 @@ const LogLink = ({
     taskId
   )}&execution_date=${encodeURIComponent(
     executionDate
-  )}&map_index=${encodeURIComponent(mapIndex?.toString() ?? "-1")}`;
+  )}&map_index=${encodeURIComponent(
+    mapIndex?.toString() ?? "-1"
+  )}&try_number=${tryNumber}`;
 
-  if (isInternal && tryNumber) {
-    fullMetadataUrl += `&format=file${
-      tryNumber > 0 && `&try_number=${tryNumber}`
-    }`;
-  } else {
-    fullMetadataUrl += `&try_number=${tryNumber}`;
+  if (isInternal) {
+    fullMetadataUrl += "&format=file";
   }
   return (
     <LinkButton

airflow/www/static/js/dag/details/taskInstance/Logs/index.tsx

@@ -75,10 +75,12 @@ const Logs = ({
   taskId,
   mapIndex,
   executionDate,
-  tryNumber,
+  tryNumber: finalTryNumber,
   state,
 }: Props) => {
-  const [selectedTryNumber, setSelectedTryNumber] = useState(tryNumber || 1);
+  const [selectedTryNumber, setSelectedTryNumber] = useState(
+    finalTryNumber || 1
+  );
   const [wrap, setWrap] = useState(getMetaValue("default_wrap") === "True");
   const [logLevelFilters, setLogLevelFilters] = useState<Array<LogLevelOption>>(
     []
@@ -133,8 +135,8 @@ const Logs = ({
   useEffect(() => {
     // Reset fileSourceFilters and selected attempt when changing to
     // a task that do not have those filters anymore.
-    if (selectedTryNumber > (tryNumber || 1)) {
-      setSelectedTryNumber(tryNumber || 1);
+    if (selectedTryNumber > (finalTryNumber || 1)) {
+      setSelectedTryNumber(finalTryNumber || 1);
     }
 
     if (
@@ -148,24 +150,25 @@ const Logs = ({
     ) {
       setFileSourceFilters([]);
     }
-  }, [data, fileSourceFilters, fileSources, selectedTryNumber, tryNumber]);
+  }, [data, fileSourceFilters, fileSources, selectedTryNumber, finalTryNumber]);
 
   return (
     <>
       {showExternalLogRedirect && externalLogName && (
         <Box my={1}>
           <Text>View Logs in {externalLogName} (by attempts):</Text>
           <Flex flexWrap="wrap">
-            {[...Array(tryNumber || 1)].map((_, index) => (
-              <LogLink
-                // eslint-disable-next-line react/no-array-index-key
-                key={index}
-                dagId={dagId}
-                taskId={taskId}
-                executionDate={executionDate}
-                tryNumber={index}
-              />
-            ))}
+            {Array.from({ length: finalTryNumber || 1 }, (_, i) => i + 1).map(
+              (tryNumber) => (
+                <LogLink
+                  key={tryNumber}
+                  dagId={dagId}
+                  taskId={taskId}
+                  executionDate={executionDate}
+                  tryNumber={tryNumber}
+                />
+              )
+            )}
           </Flex>
         </Box>
       )}
@@ -229,7 +232,7 @@ const Logs = ({
               taskId={taskId}
               executionDate={executionDate}
               isInternal
-              tryNumber={tryNumber}
+              tryNumber={selectedTryNumber}
               mapIndex={mapIndex}
             />
             <LinkButton href={`${logUrl}&${params.toString()}`}>