[airflow] branch main updated: Gantt chart: Use earliest/oldest ti dates if different than dag run start/end (#33215)

[bb...@apache.org]

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

bbovenzi 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 1dcf05f1c6 Gantt chart: Use earliest/oldest ti dates if different than dag run start/end (#33215)
1dcf05f1c6 is described below

commit 1dcf05f1c69e52667064259308ba5950b594b268
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Wed Aug 9 09:37:54 2023 -0400

    Gantt chart: Use earliest/oldest ti dates if different than dag run start/end (#33215)
---
 .../static/js/dag/details/gantt/GanttTooltip.tsx   |  3 ++
 airflow/www/static/js/dag/details/gantt/Row.tsx    | 20 ++++++++++----
 airflow/www/static/js/dag/details/gantt/index.tsx  | 32 ++++++++++++++++++++--
 3 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/airflow/www/static/js/dag/details/gantt/GanttTooltip.tsx b/airflow/www/static/js/dag/details/gantt/GanttTooltip.tsx
index 2f7d617c8c..2f50120925 100644
--- a/airflow/www/static/js/dag/details/gantt/GanttTooltip.tsx
+++ b/airflow/www/static/js/dag/details/gantt/GanttTooltip.tsx
@@ -42,6 +42,9 @@ const GanttTooltip = ({ task, instance }: Props) => {
       <Text>
         Task{isGroup ? " Group" : ""}: {task.label}
       </Text>
+      {!!instance?.tryNumber && instance.tryNumber > 1 && (
+        <Text>Try Number: {instance.tryNumber}</Text>
+      )}
       <br />
       {instance?.queuedDttm && (
         <Text>
diff --git a/airflow/www/static/js/dag/details/gantt/Row.tsx b/airflow/www/static/js/dag/details/gantt/Row.tsx
index 96f079154e..304fb83e22 100644
--- a/airflow/www/static/js/dag/details/gantt/Row.tsx
+++ b/airflow/www/static/js/dag/details/gantt/Row.tsx
@@ -24,24 +24,31 @@ import { getDuration } from "src/datetime_utils";
 import { SimpleStatus } from "src/dag/StatusBox";
 import { useContainerRef } from "src/context/containerRef";
 import { hoverDelay } from "src/utils";
-import type { DagRun, Task } from "src/types";
+import type { Task } from "src/types";
 import GanttTooltip from "./GanttTooltip";
 
 interface Props {
   ganttWidth?: number;
   openGroupIds: string[];
-  dagRun: DagRun;
   task: Task;
+  ganttStartDate?: string | null;
+  ganttEndDate?: string | null;
 }
 
-const Row = ({ ganttWidth = 500, openGroupIds, task, dagRun }: Props) => {
+const Row = ({
+  ganttWidth = 500,
+  openGroupIds,
+  task,
+  ganttStartDate,
+  ganttEndDate,
+}: Props) => {
   const {
     selected: { runId, taskId },
     onSelect,
   } = useSelection();
   const containerRef = useContainerRef();
 
-  const runDuration = getDuration(dagRun?.startDate, dagRun?.endDate);
+  const runDuration = getDuration(ganttStartDate, ganttEndDate);
 
   const instance = task.instances.find((ti) => ti.runId === runId);
   const isSelected = taskId === instance?.taskId;
@@ -54,7 +61,7 @@ const Row = ({ ganttWidth = 500, openGroupIds, task, dagRun }: Props) => {
     ? getDuration(instance?.queuedDttm, instance?.startDate)
     : 0;
   const taskStartOffset = getDuration(
-    dagRun.startDate,
+    ganttStartDate,
     instance?.queuedDttm || instance?.startDate
   );
 
@@ -127,7 +134,8 @@ const Row = ({ ganttWidth = 500, openGroupIds, task, dagRun }: Props) => {
           <Row
             ganttWidth={ganttWidth}
             openGroupIds={openGroupIds}
-            dagRun={dagRun}
+            ganttStartDate={ganttStartDate}
+            ganttEndDate={ganttEndDate}
             task={c}
             key={`gantt-${c.id}`}
           />
diff --git a/airflow/www/static/js/dag/details/gantt/index.tsx b/airflow/www/static/js/dag/details/gantt/index.tsx
index 0e4b7adb84..83200ac2ff 100644
--- a/airflow/www/static/js/dag/details/gantt/index.tsx
+++ b/airflow/www/static/js/dag/details/gantt/index.tsx
@@ -106,10 +106,35 @@ const Gantt = ({ openGroupIds, gridScrollRef, ganttScrollRef }: Props) => {
 
   const dagRun = dagRuns.find((dr) => dr.runId === runId);
 
-  const startDate = dagRun?.startDate;
+  let startDate = dagRun?.queuedAt || dagRun?.startDate;
+  let endDate = dagRun?.endDate;
+
+  // Check if any task instance dates are outside the bounds of the dag run dates and update our min start and max end
+  groups.children?.forEach((task) => {
+    const taskInstance = task.instances.find((ti) => ti.runId === runId);
+    if (
+      taskInstance?.queuedDttm &&
+      (!startDate ||
+        Date.parse(taskInstance.queuedDttm) < Date.parse(startDate))
+    ) {
+      startDate = taskInstance.queuedDttm;
+    } else if (
+      taskInstance?.startDate &&
+      (!startDate || Date.parse(taskInstance.startDate) < Date.parse(startDate))
+    ) {
+      startDate = taskInstance.startDate;
+    }
+
+    if (
+      taskInstance?.endDate &&
+      (!endDate || Date.parse(taskInstance.endDate) > Date.parse(endDate))
+    ) {
+      endDate = taskInstance.endDate;
+    }
+  });
 
   const numBars = Math.round(width / 100);
-  const runDuration = getDuration(dagRun?.startDate, dagRun?.endDate);
+  const runDuration = getDuration(startDate, endDate);
   const intervals = runDuration / numBars;
 
   return (
@@ -166,8 +191,9 @@ const Gantt = ({ openGroupIds, gridScrollRef, ganttScrollRef }: Props) => {
               <Row
                 ganttWidth={width}
                 openGroupIds={openGroupIds}
-                dagRun={dagRun}
                 task={c}
+                ganttStartDate={startDate}
+                ganttEndDate={endDate}
                 key={`gantt-${c.id}`}
               />
             ))}