Update with queued duration.

apache · Nov 27, 2023 · 4841239 · 4841239
1 parent 0ebea6b
commit 4841239
Showing 1 changed file with 59 additions and 15 deletions.
diff --git a/airflow/www/static/js/dag/details/taskDuration/index.tsx b/airflow/www/static/js/dag/details/taskDuration/index.tsx
@@ -34,41 +34,85 @@ const TaskDuration = () => {
   const {
     data: { groups },
   } = useGridData();
+  var maxDuration = 0;
+  var unit = "seconds";
+  var factor = 1;
 
   const taskInstances = groups.children.filter(
     (instance) => instance.id === taskId
   )[0].instances;
   taskInstances.forEach((instance) => {
-    instance.duration =
-      getDuration(instance?.startDate, instance?.endDate) / 1000;
+    const runDuration =
+      instance?.startDate && instance?.endDate
+        ? getDuration(instance?.startDate, instance?.endDate) / 1000
+        : 0;
+    const queuedDuration =
+      instance?.queuedDttm && instance?.startDate > instance.queuedDttm
+        ? getDuration(instance?.queuedDttm, instance?.startDate) / 1000
+        : 0;
+
+    if (runDuration > maxDuration) {
+      maxDuration = runDuration;
+    }
+
+    instance.runDuration = runDuration;
+    instance.queuedDuration = queuedDuration;
+  });
+
+  if (maxDuration <= 60 * 2) {
+    factor = 1;
+    unit = "seconds";
+  } else if (maxDuration <= 60 * 60 * 2) {
+    factor = 60;
+    unit = "minutes";
+  } else if (maxDuration <= 24 * 60 * 60 * 2) {
+    factor = 60 * 60 * 24;
+    unit = "days";
+  }
+
+  taskInstances.forEach((instance) => {
+    instance.runDuration = instance.runDuration / factor;
+    instance.queuedDuration = instance.queuedDuration / factor;
   });
 
   function tooltipCallback(args) {
     const { data } = args[0];
     const { runId } = data;
-    var { taskId } = data;
+    const { taskId } = data;
     onSelect({ taskId, runId });
 
     return `
-Run ID: ${data.runId} <br>
-Started: ${formatDateTime(data.startDate)} <br>
-Ended: ${formatDateTime(data.endDate)} <br>
-Duration: ${data.duration}
+Run ID : ${data.runId} <br>
+Queued : ${formatDateTime(data.queuedDttm)} <br>
+Started : ${formatDateTime(data.startDate)} <br>
+Ended : ${formatDateTime(data.endDate)} <br>
+Queued Duration : ${data.queuedDuration.toFixed(2)} ${unit}<br>
+Run Duration : ${data.runDuration.toFixed(2)} ${unit}<br>
+Total : ${(data.queuedDuration + data.runDuration).toFixed(2)} ${unit}<br>
 `;
   }
 
   const option: ReactEChartsProps["option"] = {
     series: [
+      {
+        type: "bar",
+        barMinHeight: 1,
+        itemStyle: {
+          color: (params) => stateColors["queued"],
+        },
+        stack: "x",
+      },
       {
         type: "bar",
         barMinHeight: 1,
         itemStyle: {
           color: (params) => stateColors[params.data.state],
         },
+        stack: "x",
       },
     ],
     dataset: {
-      dimensions: ["runId", "duration"],
+      dimensions: ["runId", "queuedDuration", "runDuration"],
       source: taskInstances,
     },
     tooltip: {
@@ -84,16 +128,16 @@ Duration: ${data.duration}
     },
     yAxis: {
       type: "value",
-      name: "duration (seconds)",
+      name: `duration (${unit})`,
     },
   };
 
-  return (
-    <Box height="50%">
-      <b>This tab is experimental.</b>
-      <ReactECharts option={option} />
-    </Box>
-  );
+  const events = {
+    click: (params) => console.log(params),
+  };
+
+  var chart = <ReactECharts option={option} events={events} />;
+  return <Box height="50%">{chart}</Box>;
 };
 
 export default TaskDuration;