Fix gantt chart queued duration when queued_dttm is greater than star…

…t_date for deferred tasks. (#35984) * Fix gantt chart queued duration when queued_dttm is greater than start_date for deferred tasks. * Merge hasQueuedDttm and validQueuedDttm.
apache · Dec 5, 2023 · 0376e93 · 0376e93
1 parent 1264316
commit 0376e93
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/airflow/www/static/js/dag/details/gantt/GanttTooltip.tsx b/airflow/www/static/js/dag/details/gantt/GanttTooltip.tsx
@@ -34,9 +34,11 @@ const GanttTooltip = ({ task, instance }: Props) => {
 
   // Calculate durations in ms
   const taskDuration = getDuration(instance?.startDate, instance?.endDate);
-  const queuedDuration = instance?.queuedDttm
-    ? getDuration(instance.queuedDttm, instance?.startDate)
-    : 0;
+  const queuedDuration =
+    instance?.queuedDttm &&
+    (instance?.startDate ? instance.queuedDttm < instance.startDate : true)
+      ? getDuration(instance.queuedDttm, instance?.startDate)
+      : 0;
   return (
     <Box>
       <Text>

diff --git a/airflow/www/static/js/dag/details/gantt/Row.tsx b/airflow/www/static/js/dag/details/gantt/Row.tsx
@@ -52,18 +52,21 @@ const Row = ({
 
   const instance = task.instances.find((ti) => ti.runId === runId);
   const isSelected = taskId === instance?.taskId;
-  const hasQueuedDttm = !!instance?.queuedDttm;
+  const hasValidQueuedDttm =
+    !!instance?.queuedDttm &&
+    (instance?.startDate && instance?.queuedDttm
+      ? instance.queuedDttm < instance.startDate
+      : true);
   const isOpen = openGroupIds.includes(task.id || "");
 
   // Calculate durations in ms
   const taskDuration = getDuration(instance?.startDate, instance?.endDate);
-  const queuedDuration = hasQueuedDttm
+  const queuedDuration = hasValidQueuedDttm
     ? getDuration(instance?.queuedDttm, instance?.startDate)
     : 0;
-  const taskStartOffset = getDuration(
-    ganttStartDate,
-    instance?.queuedDttm || instance?.startDate
-  );
+  const taskStartOffset = hasValidQueuedDttm
+    ? getDuration(ganttStartDate, instance?.queuedDttm || instance?.startDate)
+    : getDuration(ganttStartDate, instance?.startDate);
 
   // Percent of each duration vs the overall dag run
   const taskDurationPercent = taskDuration / runDuration;
@@ -74,8 +77,8 @@ const Row = ({
   // Min width should be 5px
   let width = ganttWidth * taskDurationPercent;
   if (width < 5) width = 5;
-  let queuedWidth = hasQueuedDttm ? ganttWidth * queuedDurationPercent : 0;
-  if (hasQueuedDttm && queuedWidth < 5) queuedWidth = 5;
+  let queuedWidth = hasValidQueuedDttm ? ganttWidth * queuedDurationPercent : 0;
+  if (hasValidQueuedDttm && queuedWidth < 5) queuedWidth = 5;
   const offsetMargin = taskStartOffsetPercent * ganttWidth;
 
   return (
@@ -106,7 +109,7 @@ const Row = ({
                 });
               }}
             >
-              {instance.state !== "queued" && hasQueuedDttm && (
+              {instance.state !== "queued" && hasValidQueuedDttm && (
                 <SimpleStatus
                   state="queued"
                   width={`${queuedWidth}px`}
@@ -119,7 +122,9 @@ const Row = ({
                 state={instance.state}
                 width={`${width}px`}
                 borderLeftRadius={
-                  instance.state !== "queued" && hasQueuedDttm ? 0 : undefined
+                  instance.state !== "queued" && hasValidQueuedDttm
+                    ? 0
+                    : undefined
                 }
               />
             </Flex>