PR comments about variables and using moment to convert duration.

airflow/www/static/js/dag/details/index.tsx

@@ -39,7 +39,7 @@ import {
   MdReorder,
   MdCode,
   MdOutlineViewTimeline,
-  MdHourglassBottom
+  MdHourglassBottom,
 } from "react-icons/md";
 import { BiBracket } from "react-icons/bi";
 import URLSearchParamsWrapper from "src/utils/URLSearchParamWrapper";

airflow/www/static/js/dag/details/taskDuration/index.tsx

@@ -17,13 +17,38 @@
  * under the License.
  */
 
+/* global moment */
+
 import React from "react";
 import { Box } from "@chakra-ui/react";
 
 import useSelection from "src/dag/useSelection";
 import { useGridData } from "src/api";
 import { getDuration, formatDateTime } from "src/datetime_utils";
 import ReactECharts, { ReactEChartsProps } from "src/components/ReactECharts";
+import type { TaskInstance } from "src/types";
+
+class TaskInstanceDuration {
+  instance: TaskInstance;
+
+  runDuration: moment.Duration;
+
+  runDurationUnit: number = 0;
+
+  queuedDuration: moment.Duration;
+
+  queuedDurationUnit: number = 0;
+
+  constructor(
+    instance: TaskInstance,
+    runDuration: moment.Duration,
+    queuedDuration: moment.Duration
+  ) {
+    this.instance = instance;
+    this.runDuration = runDuration;
+    this.queuedDuration = queuedDuration;
+  }
+}
 
 const TaskDuration = () => {
   const {
@@ -34,61 +59,96 @@ const TaskDuration = () => {
   const {
     data: { groups },
   } = useGridData();
-  var maxDuration = 0;
-  var unit = "seconds";
-  var factor = 1;
+  let maxDuration = 0;
+  let unit = "seconds";
+  const durations: TaskInstanceDuration[] = [];
+
+  const hasTaskInstances =
+    groups.children &&
+    groups.children.find((instance) => instance.id === taskId);
+
+  if (!hasTaskInstances) return null;
+
+  const taskInstances = hasTaskInstances.instances;
 
-  const taskInstances = groups.children.filter(
-    (instance) => instance.id === taskId
-  )[0].instances;
   taskInstances.forEach((instance) => {
-    const runDuration =
+    // @ts-ignore
+    const runDuration = moment.duration(
       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;
+        ? getDuration(instance?.startDate, instance?.endDate)
+        : 0
+    );
+
+    // @ts-ignore
+    const queuedDuration = moment.duration(
+      instance?.queuedDttm &&
+        instance?.startDate &&
+        instance?.startDate > instance.queuedDttm
+        ? getDuration(instance?.queuedDttm, instance?.startDate)
+        : 0
+    );
+
+    if (runDuration.asSeconds() > maxDuration) {
+      maxDuration = runDuration.asSeconds();
     }
 
-    instance.runDuration = runDuration;
-    instance.queuedDuration = queuedDuration;
+    durations.push(
+      new TaskInstanceDuration(instance, runDuration, 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 = "hours";
+  } else {
     unit = "days";
   }
 
-  taskInstances.forEach((instance) => {
-    instance.runDuration = instance.runDuration / factor;
-    instance.queuedDuration = instance.queuedDuration / factor;
+  durations.forEach((instance) => {
+    if (unit === "seconds") {
+      // eslint-disable-next-line no-param-reassign
+      instance.runDurationUnit = instance.runDuration.asSeconds();
+      // eslint-disable-next-line no-param-reassign
+      instance.queuedDurationUnit = instance.queuedDuration.asSeconds();
+    } else if (unit === "minutes") {
+      // eslint-disable-next-line no-param-reassign
+      instance.runDurationUnit = instance.runDuration.asMinutes();
+      // eslint-disable-next-line no-param-reassign
+      instance.queuedDurationUnit = instance.queuedDuration.asMinutes();
+    } else if (unit === "hours") {
+      // eslint-disable-next-line no-param-reassign
+      instance.runDurationUnit = instance.runDuration.asHours();
+      // eslint-disable-next-line no-param-reassign
+      instance.queuedDurationUnit = instance.queuedDuration.asHours();
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      instance.runDurationUnit = instance.runDuration.asDays();
+      // eslint-disable-next-line no-param-reassign
+      instance.queuedDurationUnit = instance.queuedDuration.asDays();
+    }
   });
 
-  function tooltipCallback(args) {
+  // @ts-ignore
+  function formatTooltip(args) {
     const { data } = args[0];
-    const { runId } = data;
-    const { taskId } = data;
-    onSelect({ taskId, runId });
+    const {
+      instance: { runId, taskId: selectTaskId, queuedDttm, startDate, endDate },
+      queuedDurationUnit,
+      runDurationUnit,
+    } = data;
+    onSelect({ taskId: selectTaskId, runId });
 
     return `
-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>
+Run ID : ${runId} <br>
+Queued : ${formatDateTime(queuedDttm)} <br>
+Started : ${formatDateTime(startDate)} <br>
+Ended : ${formatDateTime(endDate)} <br>
+Queued Duration : ${queuedDurationUnit.toFixed(2)} ${unit}<br>
+Run Duration : ${runDurationUnit.toFixed(2)} ${unit}<br>
+Total : ${(queuedDurationUnit + runDurationUnit).toFixed(2)} ${unit}<br>
 `;
   }
 
@@ -98,26 +158,28 @@ Total : ${(data.queuedDuration + data.runDuration).toFixed(2)} ${unit}<br>
         type: "bar",
         barMinHeight: 1,
         itemStyle: {
-          color: (params) => stateColors["queued"],
+          color: stateColors.queued,
         },
         stack: "x",
       },
       {
         type: "bar",
         barMinHeight: 1,
         itemStyle: {
-          color: (params) => stateColors[params.data.state],
+          // @ts-ignore
+          color: (params) => stateColors[params.data.instance.state],
         },
         stack: "x",
       },
     ],
+    // @ts-ignore
     dataset: {
-      dimensions: ["runId", "queuedDuration", "runDuration"],
-      source: taskInstances,
+      dimensions: ["instance", "queuedDurationUnit", "runDurationUnit"],
+      source: durations,
     },
     tooltip: {
       trigger: "axis",
-      formatter: tooltipCallback,
+      formatter: formatTooltip,
       axisPointer: {
         type: "shadow",
       },
@@ -132,12 +194,11 @@ Total : ${(data.queuedDuration + data.runDuration).toFixed(2)} ${unit}<br>
     },
   };
 
-  const events = {
-    click: (params) => console.log(params),
-  };
-
-  var chart = <ReactECharts option={option} events={events} />;
-  return <Box height="50%">{chart}</Box>;
+  return (
+    <Box height="50%">
+      <ReactECharts option={option} />
+    </Box>
+  );
 };
 
 export default TaskDuration;