Fix some autorefresh

airflow/www/static/js/api/useTaskFails.ts

@@ -21,6 +21,7 @@ import { useQuery } from "react-query";
 import axios, { AxiosResponse } from "axios";
 
 import { getMetaValue } from "src/utils";
+import { useAutoRefresh } from "src/context/autorefresh";
 
 const DAG_ID_PARAM = "dag_id";
 const RUN_ID_PARAM = "run_id";
@@ -43,8 +44,10 @@ interface Props {
   enabled?: boolean;
 }
 
-const useTaskFails = ({ runId, taskId, enabled = true }: Props) =>
-  useQuery(
+const useTaskFails = ({ runId, taskId, enabled = true }: Props) => {
+  const { isRefreshOn } = useAutoRefresh();
+
+  return useQuery(
     ["taskFails", runId, taskId],
     async () => {
       const params = {
@@ -54,7 +57,11 @@ const useTaskFails = ({ runId, taskId, enabled = true }: Props) =>
       };
       return axios.get<AxiosResponse, TaskFail[]>(taskFailsUrl, { params });
     },
-    { enabled }
+    {
+      enabled,
+      refetchInterval: isRefreshOn && (autoRefreshInterval || 1) * 1000,
+    }
   );
+};
 
 export default useTaskFails;

airflow/www/static/js/dag/details/gantt/Row.tsx

@@ -18,7 +18,7 @@
  */
 
 import React from "react";
-import { Box, Tooltip, Flex, Text } from "@chakra-ui/react";
+import { Box, Tooltip, Flex } from "@chakra-ui/react";
 
 import useSelection from "src/dag/useSelection";
 import { getDuration } from "src/datetime_utils";
@@ -27,9 +27,9 @@ import { useContainerRef } from "src/context/containerRef";
 import { hoverDelay } from "src/utils";
 import type { Task } from "src/types";
 import { useTaskFails } from "src/api";
-import Time from "src/components/Time";
 
 import GanttTooltip from "./GanttTooltip";
+import TaskFail from "./TaskFail";
 
 interface Props {
   ganttWidth?: number;
@@ -69,11 +69,6 @@ const Row = ({
     enabled: !!(instance?.tryNumber && instance?.tryNumber > 1) && !!task.id, // Only try to look up task fails if it even has a try number > 1
   });
 
-  const pastFails = (taskFails || []).filter(
-    (tf) =>
-      instance?.startDate && tf?.startDate && tf.startDate < instance?.startDate
-  );
-
   // Calculate durations in ms
   const taskDuration = getDuration(instance?.startDate, instance?.endDate);
   const queuedDuration = hasValidQueuedDttm
@@ -106,7 +101,7 @@ const Row = ({
         width={ganttWidth}
         height={`${boxSize + 9}px`}
       >
-        {instance ? (
+        {instance && (
           <Tooltip
             label={<GanttTooltip task={task} instance={instance} />}
             hasArrow
@@ -148,52 +143,24 @@ const Row = ({
               />
             </Flex>
           </Tooltip>
-        ) : (
-          <Box height="10px" />
         )}
-        {pastFails.map((tf) => {
-          const duration = getDuration(tf?.startDate, tf?.endDate);
-          const percent = duration / runDuration;
-          const failWidth = ganttWidth * percent;
-
-          const startOffset = getDuration(ganttStartDate, tf?.startDate);
-          const offsetLeft = (startOffset / runDuration) * ganttWidth;
-
-          return (
-            <Tooltip
-              label={
-                <Box>
-                  <Text>Task Fail</Text>
-                  {tf?.startDate && (
-                    <Text>
-                      Start: <Time dateTime={tf?.startDate} />
-                    </Text>
-                  )}
-                  {instance?.endDate && (
-                    <Text>
-                      End: <Time dateTime={tf?.endDate} />
-                    </Text>
-                  )}
-                </Box>
-              }
-              hasArrow
-              portalProps={{ containerRef }}
-              placement="top"
-              openDelay={hoverDelay}
-              key={`${tf.taskId}-${tf.startDate}`}
-              top="4px"
-            >
-              <Box
-                position="absolute"
-                left={`${offsetLeft}px`}
-                cursor="pointer"
-                top="4px"
-              >
-                <SimpleStatus state="failed" width={`${failWidth}px`} />
-              </Box>
-            </Tooltip>
-          );
-        })}
+        {/* Only show fails before the most recent task instance */}
+        {(taskFails || [])
+          .filter(
+            (tf) =>
+              tf.startDate !== instance?.startDate &&
+              // @ts-ignore
+              moment(tf.startDate).isAfter(ganttStartDate)
+          )
+          .map((taskFail) => (
+            <TaskFail
+              key={`${taskFail.taskId}-${taskFail.startDate}`}
+              taskFail={taskFail}
+              ganttStartDate={ganttStartDate}
+              ganttWidth={ganttWidth}
+              runDuration={runDuration}
+            />
+          ))}
       </Box>
       {isOpen &&
         !!task.children &&

airflow/www/static/js/dag/details/gantt/TaskFail.tsx

@@ -0,0 +1,91 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from "react";
+import { Box, Tooltip, Text } from "@chakra-ui/react";
+
+import { getDuration } from "src/datetime_utils";
+import { SimpleStatus } from "src/dag/StatusBox";
+import { useContainerRef } from "src/context/containerRef";
+import { hoverDelay } from "src/utils";
+import Time from "src/components/Time";
+
+import type { TaskFail as TaskFailType } from "src/api/useTaskFails";
+
+interface Props {
+  taskFail: TaskFailType;
+  runDuration: number;
+  ganttWidth: number;
+  ganttStartDate?: string | null;
+}
+
+const TaskFail = ({
+  taskFail,
+  runDuration,
+  ganttWidth,
+  ganttStartDate,
+}: Props) => {
+  const containerRef = useContainerRef();
+
+  const duration = getDuration(taskFail?.startDate, taskFail?.endDate);
+  const percent = duration / runDuration;
+  const failWidth = ganttWidth * percent;
+
+  const startOffset = getDuration(ganttStartDate, taskFail?.startDate);
+  const offsetLeft = (startOffset / runDuration) * ganttWidth;
+
+  return (
+    <Tooltip
+      label={
+        <Box>
+          <Text mb={2}>Task Fail</Text>
+          {taskFail?.startDate && (
+            <Text>
+              Start: <Time dateTime={taskFail?.startDate} />
+            </Text>
+          )}
+          {taskFail?.endDate && (
+            <Text>
+              End: <Time dateTime={taskFail?.endDate} />
+            </Text>
+          )}
+          <Text mt={2} fontSize="sm">
+            Can only show previous Task Fails, other tries are not yet saved.
+          </Text>
+        </Box>
+      }
+      hasArrow
+      portalProps={{ containerRef }}
+      placement="top"
+      openDelay={hoverDelay}
+      top="4px"
+    >
+      <Box
+        position="absolute"
+        left={`${offsetLeft}px`}
+        cursor="pointer"
+        top="4px"
+      >
+        <SimpleStatus state="failed" width={`${failWidth}px`} />
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default TaskFail;