Sort as per DagRun order in grid and add logical date as x-axis label.

apache · Dec 6, 2023 · 199cb10 · 199cb10
1 parent 5b4ae05
commit 199cb10
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 12 deletions.
diff --git a/airflow/www/static/js/components/ReactECharts.tsx b/airflow/www/static/js/components/ReactECharts.tsx
@@ -28,6 +28,7 @@ export interface ReactEChartsProps {
   settings?: SetOptionOpts;
   style?: CSSProperties;
   theme?: "light" | "dark";
+  events?: { [key: string]: (params: any) => void };
 }
 
 const ReactECharts = ({
@@ -36,6 +37,7 @@ const ReactECharts = ({
   settings,
   style,
   theme,
+  events,
 }: ReactEChartsProps) => {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -78,9 +80,15 @@ const ReactECharts = ({
       const chartInstance = getInstanceByDom(ref.current);
       if (chartInstance) {
         chartInstance.setOption(option, settings);
+
+        if (events) {
+          Object.keys(events).forEach((key) => {
+            chartInstance.on(key, events[key]);
+          });
+        }
       }
     }
-  }, [option, settings, theme]);
+  }, [option, settings, theme, events]);
 
   return (
     <div

diff --git a/airflow/www/static/js/dag/details/taskDuration/index.tsx b/airflow/www/static/js/dag/details/taskDuration/index.tsx
@@ -30,6 +30,12 @@ import type { TaskInstance } from "src/types";
 class TaskInstanceDuration {
   instance: TaskInstance;
 
+  dataIntervalStart: string;
+
+  dataIntervalEnd: string;
+
+  executionDate: string;
+
   runDuration: moment.Duration;
 
   runDurationUnit: number = 0;
@@ -41,35 +47,47 @@ class TaskInstanceDuration {
   constructor(
     instance: TaskInstance,
     runDuration: moment.Duration,
-    queuedDuration: moment.Duration
+    queuedDuration: moment.Duration,
+    dataIntervalStart: string,
+    dataIntervalEnd: string,
+    executionDate: string
   ) {
     this.instance = instance;
     this.runDuration = runDuration;
     this.queuedDuration = queuedDuration;
+    this.dataIntervalStart = dataIntervalStart;
+    this.dataIntervalEnd = dataIntervalEnd;
+    this.executionDate = executionDate;
   }
 }
 
 const TaskDuration = () => {
   const {
     selected: { taskId },
+    onSelect,
   } = useSelection();
 
   const {
-    data: { groups },
+    data: { dagRuns, groups },
   } = useGridData();
   let maxDuration = 0;
   let unit = "seconds";
   const durations: TaskInstanceDuration[] = [];
 
   const hasTaskInstances =
     groups.children &&
-    groups.children.find((instance) => instance.id === taskId);
+    groups.children &&
+    groups.children.find((child) => child.id === taskId);
 
   if (!hasTaskInstances) return null;
 
-  const taskInstances = hasTaskInstances.instances;
+  dagRuns.forEach((dagRun) => {
+    const instance = hasTaskInstances.instances.find(
+      (_instance) =>
+        _instance.taskId === taskId && _instance.runId === dagRun.runId
+    );
 
-  taskInstances.forEach((instance) => {
+    if (!instance) return null;
     // @ts-ignore
     const runDuration = moment.duration(
       instance?.startDate && instance?.endDate
@@ -91,8 +109,17 @@ const TaskDuration = () => {
     }
 
     durations.push(
-      new TaskInstanceDuration(instance, runDuration, queuedDuration)
+      new TaskInstanceDuration(
+        instance,
+        runDuration,
+        queuedDuration,
+        dagRun.dataIntervalStart,
+        dagRun.dataIntervalEnd,
+        dagRun.executionDate
+      )
     );
+
+    return null;
   });
 
   if (maxDuration <= 60 * 2) {
@@ -126,13 +153,14 @@ const TaskDuration = () => {
   function formatTooltip(args) {
     const { data } = args[0];
     const {
-      instance: { runId, queuedDttm, startDate, endDate },
+      instance: { runId, queuedDttm, startDate, endDate, tryNumber },
       queuedDurationUnit,
       runDurationUnit,
     } = data;
 
     return `
 Run ID : ${runId} <br>
+Try Number : ${tryNumber} <br>
 Queued : ${queuedDttm && formatDateTime(queuedDttm)} <br>
 Started : ${startDate && formatDateTime(startDate)} <br>
 Ended : ${endDate && formatDateTime(endDate)} <br>
@@ -142,13 +170,18 @@ Total : ${(queuedDurationUnit + runDurationUnit).toFixed(2)} ${unit}<br>
 `;
   }
 
+  function formatXAxis(value: string) {
+    return value;
+  }
+
   const option: ReactEChartsProps["option"] = {
     series: [
       {
         type: "bar",
         barMinHeight: 1,
         itemStyle: {
           color: stateColors.queued,
+          opacity: 0.6,
         },
         stack: "x",
       },
@@ -164,7 +197,7 @@ Total : ${(queuedDurationUnit + runDurationUnit).toFixed(2)} ${unit}<br>
     ],
     // @ts-ignore
     dataset: {
-      dimensions: ["instance", "queuedDurationUnit", "runDurationUnit"],
+      dimensions: ["executionDate", "queuedDurationUnit", "runDurationUnit"],
       source: durations,
     },
     tooltip: {
@@ -176,15 +209,36 @@ Total : ${(queuedDurationUnit + runDurationUnit).toFixed(2)} ${unit}<br>
     },
     xAxis: {
       type: "category",
-      show: false,
+      show: true,
+      axisLabel: {
+        formatter: (value: string) => formatXAxis(value),
+      },
+      name: "Logical Date",
+      nameLocation: "end",
+      nameGap: 0,
+      nameTextStyle: {
+        align: "right",
+        verticalAlign: "top",
+        padding: [30, 0, 0, 0],
+      },
     },
     yAxis: {
       type: "value",
-      name: `duration (${unit})`,
+      name: `Duration (${unit})`,
+    },
+  };
+
+  const events = {
+    // @ts-ignore
+    click(params) {
+      onSelect({
+        taskId: params.data.instance.taskId,
+        runId: params.data.instance.runId,
+      });
     },
   };
 
-  return <ReactECharts option={option} />;
+  return <ReactECharts option={option} events={events} />;
 };
 
 export default TaskDuration;