From 6f24a81f16aa9a9314c62d409e7c72590bd2e905 Mon Sep 17 00:00:00 2001 From: Brent Bovenzi Date: Fri, 21 Jun 2024 11:33:00 -0400 Subject: [PATCH] Render all ti history fields, improve ux for tries of mapped instances --- .../js/dag/details/taskInstance/Details.tsx | 93 ++++++++++--------- .../taskInstance/Logs/LogLink.test.tsx | 2 +- .../dag/details/taskInstance/Logs/LogLink.tsx | 12 +-- .../dag/details/taskInstance/Logs/index.tsx | 35 +++---- 4 files changed, 75 insertions(+), 67 deletions(-) diff --git a/airflow/www/static/js/dag/details/taskInstance/Details.tsx b/airflow/www/static/js/dag/details/taskInstance/Details.tsx index 12073bedd4d9e..7432db840494b 100644 --- a/airflow/www/static/js/dag/details/taskInstance/Details.tsx +++ b/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 || ""; + const executor = instance?.executor || ""; - 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 ( - {isTaskInstance && !!taskInstance && ( + {!!taskInstance && ( { )} - {mapIndex !== undefined && ( + {instance?.mapIndex !== undefined && ( Map Index - {mapIndex} + {instance.mapIndex} )} - {taskInstance?.renderedMapIndex !== undefined && - taskInstance?.renderedMapIndex !== null && ( + {instance?.renderedMapIndex !== undefined && + instance?.renderedMapIndex !== null && ( Rendered Map Index - {taskInstance.renderedMapIndex} + {instance.renderedMapIndex} )} {operator && ( @@ -239,32 +246,32 @@ const Details = ({ gridInstance, taskInstance, group }: Props) => { )} - {!!taskInstance?.pid && ( + {!!instance?.pid && ( Process ID (PID) - + )} - {!!taskInstance?.hostname && ( + {!!instance?.hostname && ( Hostname - + )} - {!!taskInstance?.pool && ( + {!!instance?.pool && ( Pool - {taskInstance.pool} + {instance.pool} )} - {!!taskInstance?.poolSlots && ( + {!!instance?.poolSlots && ( Pool Slots - {taskInstance.poolSlots} + {instance.poolSlots} )} {executor && ( @@ -273,49 +280,49 @@ const Details = ({ gridInstance, taskInstance, group }: Props) => { {executor} )} - {!!taskInstance?.executorConfig && ( + {!!instance?.executorConfig && ( Executor Config - {taskInstance.executorConfig} + {instance.executorConfig.toString()} )} - {!!taskInstance?.unixname && ( + {!!instance?.unixname && ( Unix Name - {taskInstance.unixname} + {instance.unixname} )} - {!!taskInstance?.maxTries && ( + {!!instance?.maxTries && ( Max Tries - {taskInstance.maxTries} + {instance.maxTries} )} - {!!taskInstance?.queue && ( + {!!instance?.queue && ( Queue - {taskInstance.queue} + {instance.queue} )} - {!!taskInstance?.priorityWeight && ( + {!!instance?.priorityWeight && ( Priority Weight - {taskInstance.priorityWeight} + {instance.priorityWeight} )} - {taskInstance?.renderedFields && ( + {instance?.renderedFields && ( Rendered Templates - {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 >; diff --git a/airflow/www/static/js/dag/details/taskInstance/Logs/LogLink.test.tsx b/airflow/www/static/js/dag/details/taskInstance/Logs/LogLink.test.tsx index 32c1eb3b0236a..c5e43af26ce05 100644 --- a/airflow/www/static/js/dag/details/taskInstance/Logs/LogLink.test.tsx +++ b/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(); }); diff --git a/airflow/www/static/js/dag/details/taskInstance/Logs/LogLink.tsx b/airflow/www/static/js/dag/details/taskInstance/Logs/LogLink.tsx index 4aa02f10f3225..72a203c7bf841 100644 --- a/airflow/www/static/js/dag/details/taskInstance/Logs/LogLink.tsx +++ b/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 ( { - const [selectedTryNumber, setSelectedTryNumber] = useState(tryNumber || 1); + const [selectedTryNumber, setSelectedTryNumber] = useState( + finalTryNumber || 1 + ); const [wrap, setWrap] = useState(getMetaValue("default_wrap") === "True"); const [logLevelFilters, setLogLevelFilters] = useState>( [] @@ -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,7 +150,7 @@ const Logs = ({ ) { setFileSourceFilters([]); } - }, [data, fileSourceFilters, fileSources, selectedTryNumber, tryNumber]); + }, [data, fileSourceFilters, fileSources, selectedTryNumber, finalTryNumber]); return ( <> @@ -156,16 +158,17 @@ const Logs = ({ View Logs in {externalLogName} (by attempts): - {[...Array(tryNumber || 1)].map((_, index) => ( - - ))} + {Array.from({ length: finalTryNumber || 1 }, (_, i) => i + 1).map( + (tryNumber) => ( + + ) + )} )} @@ -229,7 +232,7 @@ const Logs = ({ taskId={taskId} executionDate={executionDate} isInternal - tryNumber={tryNumber} + tryNumber={selectedTryNumber} mapIndex={mapIndex} />