Fix Gantt view "Error invalid date" on running DagRun (#64752)

alamashir · web-flow · commit 0b2efb99e6ff · 2026-04-07T12:22:02.000-04:00
* Fix Gantt view "Error invalid date" on running DagRun (#64599) The Gantt chart scale calculation used new Date() to parse date strings, which fails for non-UTC timezone abbreviations, returning NaN and crashing Chart.js's time scale. Changes: - Replace new Date().getTime() with dayjs().valueOf() for reliable date parsing in the x-axis scale min/max calculations. - Add unit tests for Gantt chart scale calculations and data transformation covering completed tasks, running tasks with null end dates, groups with null dates, and ISO date string validity. * Address review feedback: fix static checks and consistency - Fix object property ordering in test data (alphabetical) - Import vi as type-only from vitest - Fix duration field position in selectedRun objects - Make dayjs null handling consistent between max and min scale calculations (remove unnecessary ?? undefined) * Fix ESLint no-empty-function error in Gantt utils test * Fix TypeScript type errors in Gantt utils tests Update test fixtures to match current generated types: - Add has_missed_deadline to GridRunsResponse objects - Remove dag_id and map_index from GanttTaskInstance objects - Add depth to GridTask objects - Add task_display_name to LightGridTaskInstanceSummary objects * Fix translate type to use TFunction in Gantt utils tests
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/utils.test.ts b/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/utils.test.ts
@@ -0,0 +1,261 @@
+/*!
+ * 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 type { ChartEvent, ActiveElement } from "chart.js";
+import dayjs from "dayjs";
+import type { TFunction } from "i18next";
+import { describe, it, expect } from "vitest";
+
+import type { GanttDataItem } from "./utils";
+import { createChartOptions, transformGanttData } from "./utils";
+
+// eslint-disable-next-line no-empty-function, @typescript-eslint/no-empty-function
+const noop = () => {};
+
+const defaultChartParams = {
+  gridColor: "#ccc",
+  handleBarClick: noop as (event: ChartEvent, elements: Array<ActiveElement>) => void,
+  handleBarHover: noop as (event: ChartEvent, elements: Array<ActiveElement>) => void,
+  hoveredId: undefined,
+  hoveredItemColor: "#eee",
+  labels: ["task_1", "task_2"],
+  selectedId: undefined,
+  selectedItemColor: "#ddd",
+  selectedTimezone: "UTC",
+  translate: ((key: string) => key) as unknown as TFunction,
+};
+
+describe("createChartOptions", () => {
+  describe("x-axis scale min/max with ISO date strings", () => {
+    it("should compute valid min/max for completed tasks with ISO dates", () => {
+      const data: Array<GanttDataItem> = [
+        {
+          state: "success",
+          taskId: "task_1",
+          x: ["2024-03-14T10:00:00.000Z", "2024-03-14T10:05:00.000Z"],
+          y: "task_1",
+        },
+        {
+          state: "success",
+          taskId: "task_2",
+          x: ["2024-03-14T10:03:00.000Z", "2024-03-14T10:10:00.000Z"],
+          y: "task_2",
+        },
+      ];
+
+      const options = createChartOptions({
+        ...defaultChartParams,
+        data,
+        selectedRun: {
+          dag_id: "test_dag",
+          duration: 600,
+          end_date: "2024-03-14T10:10:00+00:00",
+          has_missed_deadline: false,
+          queued_at: "2024-03-14T09:59:00+00:00",
+          run_after: "2024-03-14T10:00:00+00:00",
+          run_id: "run_1",
+          run_type: "manual",
+          start_date: "2024-03-14T10:00:00+00:00",
+          state: "success",
+        },
+      });
+
+      const xScale = options.scales.x;
+
+      expect(xScale.min).toBeTypeOf("number");
+      expect(xScale.max).toBeTypeOf("number");
+      expect(Number.isNaN(xScale.min)).toBe(false);
+      expect(Number.isNaN(xScale.max)).toBe(false);
+      // max should be slightly beyond the latest end date (5% padding)
+      expect(xScale.max).toBeGreaterThan(new Date("2024-03-14T10:10:00.000Z").getTime());
+    });
+
+    it("should compute valid min/max for running tasks", () => {
+      const now = dayjs().toISOString();
+      const data: Array<GanttDataItem> = [
+        {
+          state: "success",
+          taskId: "task_1",
+          x: ["2024-03-14T10:00:00.000Z", "2024-03-14T10:05:00.000Z"],
+          y: "task_1",
+        },
+        {
+          state: "running",
+          taskId: "task_2",
+          x: ["2024-03-14T10:05:00.000Z", now],
+          y: "task_2",
+        },
+      ];
+
+      const options = createChartOptions({
+        ...defaultChartParams,
+        data,
+        selectedRun: {
+          dag_id: "test_dag",
+          duration: 0,
+          // eslint-disable-next-line unicorn/no-null
+          end_date: null,
+          has_missed_deadline: false,
+          queued_at: "2024-03-14T09:59:00+00:00",
+          run_after: "2024-03-14T10:00:00+00:00",
+          run_id: "run_1",
+          run_type: "manual",
+          start_date: "2024-03-14T10:00:00+00:00",
+          state: "running",
+        },
+      });
+
+      const xScale = options.scales.x;
+
+      expect(xScale.min).toBeTypeOf("number");
+      expect(xScale.max).toBeTypeOf("number");
+      expect(Number.isNaN(xScale.min)).toBe(false);
+      expect(Number.isNaN(xScale.max)).toBe(false);
+    });
+
+    it("should handle empty data with running DagRun (fallback to formatted dates)", () => {
+      const options = createChartOptions({
+        ...defaultChartParams,
+        data: [],
+        labels: [],
+        selectedRun: {
+          dag_id: "test_dag",
+          duration: 0,
+          // eslint-disable-next-line unicorn/no-null
+          end_date: null,
+          has_missed_deadline: false,
+          queued_at: "2024-03-14T09:59:00+00:00",
+          run_after: "2024-03-14T10:00:00+00:00",
+          run_id: "run_1",
+          run_type: "manual",
+          start_date: "2024-03-14T10:00:00+00:00",
+          state: "running",
+        },
+      });
+
+      const xScale = options.scales.x;
+
+      // With empty data, min/max are formatted date strings (fallback branch)
+      expect(xScale.min).toBeTypeOf("string");
+      expect(xScale.max).toBeTypeOf("string");
+    });
+  });
+});
+
+describe("transformGanttData", () => {
+  it("should skip tasks with null start_date", () => {
+    const result = transformGanttData({
+      allTries: [
+        {
+          // eslint-disable-next-line unicorn/no-null
+          end_date: null,
+          is_mapped: false,
+          // eslint-disable-next-line unicorn/no-null
+          start_date: null,
+          // eslint-disable-next-line unicorn/no-null
+          state: null,
+          task_display_name: "task_1",
+          task_id: "task_1",
+          try_number: 1,
+        },
+      ],
+      flatNodes: [{ depth: 0, id: "task_1", is_mapped: false, label: "task_1" }],
+      gridSummaries: [],
+    });
+
+    expect(result).toHaveLength(0);
+  });
+
+  it("should include running tasks with valid start_date and use current time as end", () => {
+    const before = dayjs();
+    const result = transformGanttData({
+      allTries: [
+        {
+          // eslint-disable-next-line unicorn/no-null
+          end_date: null,
+          is_mapped: false,
+          start_date: "2024-03-14T10:00:00+00:00",
+          state: "running",
+          task_display_name: "task_1",
+          task_id: "task_1",
+          try_number: 1,
+        },
+      ],
+      flatNodes: [{ depth: 0, id: "task_1", is_mapped: false, label: "task_1" }],
+      gridSummaries: [],
+    });
+
+    expect(result).toHaveLength(1);
+    expect(result[0]?.state).toBe("running");
+    // End time should be approximately now (ISO string)
+    const endTime = dayjs(result[0]?.x[1]);
+
+    expect(endTime.valueOf()).toBeGreaterThanOrEqual(before.valueOf());
+  });
+
+  it("should skip groups with null min_start_date or max_end_date", () => {
+    const result = transformGanttData({
+      allTries: [],
+      flatNodes: [{ depth: 0, id: "group_1", is_mapped: false, isGroup: true, label: "group_1" }],
+      gridSummaries: [
+        {
+          // eslint-disable-next-line unicorn/no-null
+          child_states: null,
+          // eslint-disable-next-line unicorn/no-null
+          max_end_date: null,
+          // eslint-disable-next-line unicorn/no-null
+          min_start_date: null,
+          // eslint-disable-next-line unicorn/no-null
+          state: null,
+          task_display_name: "group_1",
+          task_id: "group_1",
+        },
+      ],
+    });
+
+    expect(result).toHaveLength(0);
+  });
+
+  it("should produce ISO date strings parseable by dayjs", () => {
+    const result = transformGanttData({
+      allTries: [
+        {
+          end_date: "2024-03-14T10:05:00+00:00",
+          is_mapped: false,
+          start_date: "2024-03-14T10:00:00+00:00",
+          state: "success",
+          task_display_name: "task_1",
+          task_id: "task_1",
+          try_number: 1,
+        },
+      ],
+      flatNodes: [{ depth: 0, id: "task_1", is_mapped: false, label: "task_1" }],
+      gridSummaries: [],
+    });
+
+    expect(result).toHaveLength(1);
+    // x values should be valid ISO strings that dayjs can parse without NaN
+    const start = dayjs(result[0]?.x[0]);
+    const end = dayjs(result[0]?.x[1]);
+
+    expect(start.isValid()).toBe(true);
+    expect(end.isValid()).toBe(true);
+    expect(Number.isNaN(start.valueOf())).toBe(false);
+    expect(Number.isNaN(end.valueOf())).toBe(false);
+  });
+});
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/utils.ts b/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/utils.ts
@@ -347,8 +347,8 @@ export const createChartOptions = ({
         max:
           data.length > 0
             ? (() => {
-                const maxTime = Math.max(...data.map((item) => new Date(item.x[1] ?? "").getTime()));
-                const minTime = Math.min(...data.map((item) => new Date(item.x[0] ?? "").getTime()));
+                const maxTime = Math.max(...data.map((item) => dayjs(item.x[1]).valueOf()));
+                const minTime = Math.min(...data.map((item) => dayjs(item.x[0]).valueOf()));
                 const totalDuration = maxTime - minTime;
 
                 // add 5% to the max time to avoid the last tick being cut off
@@ -358,8 +358,8 @@ export const createChartOptions = ({
         min:
           data.length > 0
             ? (() => {
-                const maxTime = Math.max(...data.map((item) => new Date(item.x[1] ?? "").getTime()));
-                const minTime = Math.min(...data.map((item) => new Date(item.x[0] ?? "").getTime()));
+                const maxTime = Math.max(...data.map((item) => dayjs(item.x[1]).valueOf()));
+                const minTime = Math.min(...data.map((item) => dayjs(item.x[0]).valueOf()));
                 const totalDuration = maxTime - minTime;
 
                 // subtract 2% from min time so background color shows before data
