Adjust gantt width based on task history dates (apache#41218)

* Fix Row type check * Readd gantt duration --------- Co-authored-by: Brent Bovenzi <[email protected]>
vchiapaikeo · Aug 2, 2024 · 82d817d · 82d817d
1 parent 8facce4
commit 82d817d
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 26 deletions.
diff --git a/airflow/www/static/js/dag/details/gantt/Row.tsx b/airflow/www/static/js/dag/details/gantt/Row.tsx
@@ -17,13 +17,15 @@
  * 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";
 import { getMetaValue } from "src/utils";
 import type { Task } from "src/types";
 import { useTIHistory } from "src/api";
+
 import InstanceBar from "./InstanceBar";
 
 interface Props {
@@ -32,6 +34,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 +49,7 @@ const Row = ({
   task,
   ganttStartDate,
   ganttEndDate,
+  setGanttDuration,
 }: Props) => {
   const {
     selected: { runId, taskId },
@@ -61,6 +69,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?.taskInstances?.forEach(
+      (tih) =>
+        setGanttDuration &&
+        setGanttDuration(tih.queuedWhen, tih.startDate, tih.endDate)
+    );
+  }, [tiHistory, setGanttDuration]);
+
   return (
     <div>
       <Box
@@ -85,7 +102,7 @@ const Row = ({
             ganttEndDate={ganttEndDate}
           />
         )}
-        {(tiHistory?.taskInstances || []).map((ti) => (
+        {tiHistory?.taskInstances?.map((ti) => (
           <InstanceBar
             key={`${taskId}-${ti.tryNumber}`}
             instance={ti}

diff --git 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}`}
               />
             ))}