(airflow) branch main updated: Adjust gantt width based on task history dates (#41192)

[weilee]

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

weilee 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 a9baf71304 Adjust gantt width based on task history dates (#41192)
a9baf71304 is described below

commit a9baf71304650bf3ed45187ac65ff7647bdedf74
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Fri Aug 2 00:40:01 2024 -0400

    Adjust gantt width based on task history dates (#41192)
---
 airflow/www/static/js/dag/details/gantt/Row.tsx   | 17 +++++-
 airflow/www/static/js/dag/details/gantt/index.tsx | 67 +++++++++++++++--------
 2 files changed, 59 insertions(+), 25 deletions(-)

diff --git a/airflow/www/static/js/dag/details/gantt/Row.tsx 
b/airflow/www/static/js/dag/details/gantt/Row.tsx
index c93d1d7fde..15df6da5c7 100644
--- a/airflow/www/static/js/dag/details/gantt/Row.tsx
+++ b/airflow/www/static/js/dag/details/gantt/Row.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React from "react";
+import React, { useEffect } from "react";
 import { Box } from "@chakra-ui/react";
 import useSelection from "src/dag/useSelection";
 import { boxSize } from "src/dag/StatusBox";
@@ -32,6 +32,11 @@ interface Props {
   task: Task;
   ganttStartDate?: string | null;
   ganttEndDate?: string | null;
+  setGanttDuration?: (
+    queued: string | null | undefined,
+    start: string | null | undefined,
+    end: string | null | undefined
+  ) => void;
 }
 
 const dagId = getMetaValue("dag_id");
@@ -42,6 +47,7 @@ const Row = ({
   task,
   ganttStartDate,
   ganttEndDate,
+  setGanttDuration,
 }: Props) => {
   const {
     selected: { runId, taskId },
@@ -61,6 +67,15 @@ const Row = ({
   const isSelected = taskId === instance?.taskId;
   const isOpen = openGroupIds.includes(task.id || "");
 
+  // Adjust gantt start/end if the ti history dates are out of bounds
+  useEffect(() => {
+    tiHistory?.forEach(
+      (tih) =>
+        setGanttDuration &&
+        setGanttDuration(tih.queuedWhen, tih.startDate, tih.endDate)
+    );
+  }, [tiHistory, setGanttDuration]);
+
   return (
     <div>
       <Box
diff --git a/airflow/www/static/js/dag/details/gantt/index.tsx 
b/airflow/www/static/js/dag/details/gantt/index.tsx
index 606dbf90aa..cb17d369cc 100644
--- a/airflow/www/static/js/dag/details/gantt/index.tsx
+++ b/airflow/www/static/js/dag/details/gantt/index.tsx
@@ -106,33 +106,51 @@ const Gantt = ({ openGroupIds, gridScrollRef, 
ganttScrollRef }: Props) => {
 
   const dagRun = dagRuns.find((dr) => dr.runId === runId);
 
-  let startDate = dagRun?.queuedAt || dagRun?.startDate;
-  // @ts-ignore
-  let endDate = dagRun?.endDate ?? moment().add(1, "s").toString();
+  const [startDate, setStartDate] = useState(
+    dagRun?.queuedAt || dagRun?.startDate
+  );
+
+  const [endDate, setEndDate] = useState(
+    // @ts-ignore
+    dagRun?.endDate ?? moment().add(1, "s").toString()
+  );
 
   // 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;
-    }
+  const setGanttDuration = useCallback(
+    (
+      queued: string | null | undefined,
+      start: string | null | undefined,
+      end: string | null | undefined
+    ) => {
+      if (
+        queued &&
+        (!startDate || Date.parse(queued) < Date.parse(startDate))
+      ) {
+        setStartDate(queued);
+      } else if (
+        start &&
+        (!startDate || Date.parse(start) < Date.parse(startDate))
+      ) {
+        setStartDate(start);
+      }
+
+      if (end && (!endDate || Date.parse(end) > Date.parse(endDate))) {
+        setEndDate(end);
+      }
+    },
+    [startDate, endDate, setStartDate, setEndDate]
+  );
 
-    if (
-      taskInstance?.endDate &&
-      (!endDate || Date.parse(taskInstance.endDate) > Date.parse(endDate))
-    ) {
-      endDate = taskInstance.endDate;
-    }
-  });
+  useEffect(() => {
+    groups.children?.forEach((task) => {
+      const taskInstance = task.instances.find((ti) => ti.runId === runId);
+      setGanttDuration(
+        taskInstance?.queuedDttm,
+        taskInstance?.startDate,
+        taskInstance?.endDate
+      );
+    });
+  }, [groups.children, runId, setGanttDuration]);
 
   const numBars = Math.round(width / 100);
   const runDuration = getDuration(startDate, endDate);
@@ -195,6 +213,7 @@ const Gantt = ({ openGroupIds, gridScrollRef, 
ganttScrollRef }: Props) => {
                 task={c}
                 ganttStartDate={startDate}
                 ganttEndDate={endDate}
+                setGanttDuration={setGanttDuration}
                 key={`gantt-${c.id}`}
               />
             ))}