Wait for config API to avoid NaN passed to offset. (apache#44989)

* Fix NaNs when end_date is not defined. Fix NaN passed to limit param in API by waiting for config API. Fix recent task instances sort order. * Fix NaN offset in XCom page. * Add getDuration util function.
eladkal · Dec 19, 2024 · ac0501d · ac0501d
1 parent 06b7d57
commit ac0501d
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 54 deletions.
diff --git a/airflow/ui/src/pages/Dag/Runs/Runs.tsx b/airflow/ui/src/pages/Dag/Runs/Runs.tsx
@@ -26,7 +26,6 @@ import {
   Text,
 } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
-import dayjs from "dayjs";
 import { useCallback } from "react";
 import {
   useParams,
@@ -43,7 +42,7 @@ import { ErrorAlert } from "src/components/ErrorAlert";
 import { RunTypeIcon } from "src/components/RunTypeIcon";
 import Time from "src/components/Time";
 import { Select, Status } from "src/components/ui";
-import { capitalize } from "src/utils";
+import { capitalize, getDuration } from "src/utils";
 
 const columns: Array<ColumnDef<DAGRunResponse>> = [
   {
@@ -90,7 +89,7 @@ const columns: Array<ColumnDef<DAGRunResponse>> = [
   },
   {
     cell: ({ row: { original } }) =>
-      `${dayjs.duration(dayjs(original.end_date).diff(original.start_date)).asSeconds().toFixed(2)}s`,
+      getDuration(original.start_date, original.end_date),
     header: "Duration",
   },
   {
@@ -133,13 +132,17 @@ export const Runs = () => {
 
   const filteredState = searchParams.get(STATE_PARAM);
 
-  const { data, error, isFetching, isLoading } = useDagRunServiceGetDagRuns({
-    dagId: dagId ?? "~",
-    limit: pagination.pageSize,
-    offset: pagination.pageIndex * pagination.pageSize,
-    orderBy,
-    state: filteredState === null ? undefined : [filteredState],
-  });
+  const { data, error, isFetching, isLoading } = useDagRunServiceGetDagRuns(
+    {
+      dagId: dagId ?? "~",
+      limit: pagination.pageSize,
+      offset: pagination.pageIndex * pagination.pageSize,
+      orderBy,
+      state: filteredState === null ? undefined : [filteredState],
+    },
+    undefined,
+    { enabled: !isNaN(pagination.pageSize) },
+  );
 
   const handleStateChange = useCallback(
     ({ value }: SelectValueChangeDetails<string>) => {

diff --git a/airflow/ui/src/pages/Dag/Tasks/TaskRecentRuns.tsx b/airflow/ui/src/pages/Dag/Tasks/TaskRecentRuns.tsx
@@ -42,7 +42,9 @@ export const TaskRecentRuns = ({
     ...taskInstance,
     duration:
       dayjs
-        .duration(dayjs(taskInstance.end_date).diff(taskInstance.start_date))
+        .duration(
+          dayjs(taskInstance.end_date ?? dayjs()).diff(taskInstance.start_date),
+        )
         .asSeconds() || 0,
   }));
 

diff --git a/airflow/ui/src/pages/Dag/Tasks/Tasks.tsx b/airflow/ui/src/pages/Dag/Tasks/Tasks.tsx
@@ -89,6 +89,7 @@ export const Tasks = () => {
         dagId,
         dagRunId: "~",
         logicalDateGte: runs.at(-1)?.logical_date ?? "",
+        orderBy: "-start_date",
       },
       undefined,
       { enabled: Boolean(runs[0]?.dag_run_id) },
@@ -101,10 +102,7 @@ export const Tasks = () => {
         {pluralize("Task", data ? data.total_entries : 0)}
       </Heading>
       <DataTable
-        cardDef={cardDef(
-          dagId,
-          taskInstancesResponse?.task_instances.reverse(),
-        )}
+        cardDef={cardDef(dagId, taskInstancesResponse?.task_instances)}
         columns={[]}
         data={data ? data.tasks : []}
         displayMode="card"

diff --git a/airflow/ui/src/pages/Events/Events.tsx b/airflow/ui/src/pages/Events/Events.tsx
@@ -124,14 +124,18 @@ export const Events = () => {
     error: EventsError,
     isFetching,
     isLoading,
-  } = useEventLogServiceGetEventLogs({
-    dagId,
-    limit: pagination.pageSize,
-    offset: pagination.pageIndex * pagination.pageSize,
-    orderBy,
-    runId,
-    taskId,
-  });
+  } = useEventLogServiceGetEventLogs(
+    {
+      dagId,
+      limit: pagination.pageSize,
+      offset: pagination.pageIndex * pagination.pageSize,
+      orderBy,
+      runId,
+      taskId,
+    },
+    undefined,
+    { enabled: !isNaN(pagination.pageSize) },
+  );
 
   return (
     <Box>

diff --git a/airflow/ui/src/pages/Run/Header.tsx b/airflow/ui/src/pages/Run/Header.tsx
@@ -17,7 +17,6 @@
  * under the License.
  */
 import { Box, Flex, Heading, HStack, SimpleGrid, Text } from "@chakra-ui/react";
-import dayjs from "dayjs";
 import { FiBarChart } from "react-icons/fi";
 import { MdOutlineModeComment } from "react-icons/md";
 
@@ -27,6 +26,7 @@ import { RunTypeIcon } from "src/components/RunTypeIcon";
 import { Stat } from "src/components/Stat";
 import Time from "src/components/Time";
 import { Status } from "src/components/ui";
+import { getDuration } from "src/utils";
 
 export const Header = ({ dagRun }: { readonly dagRun: DAGRunResponse }) => (
   <Box borderColor="border" borderRadius={8} borderWidth={1} p={2}>
@@ -68,11 +68,7 @@ export const Header = ({ dagRun }: { readonly dagRun: DAGRunResponse }) => (
         <Time datetime={dagRun.end_date} />
       </Stat>
       <Stat label="Duration">
-        {dayjs
-          .duration(dayjs(dagRun.end_date).diff(dagRun.start_date))
-          .asSeconds()
-          .toFixed(2)}
-        s
+        {getDuration(dagRun.start_date, dagRun.end_date)}s
       </Stat>
     </SimpleGrid>
   </Box>

diff --git a/airflow/ui/src/pages/Run/TaskInstances.tsx b/airflow/ui/src/pages/Run/TaskInstances.tsx
@@ -18,7 +18,6 @@
  */
 import { Box, Link } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
-import dayjs from "dayjs";
 import { Link as RouterLink, useParams } from "react-router-dom";
 
 import { useTaskInstanceServiceGetTaskInstances } from "openapi/queries";
@@ -28,6 +27,7 @@ import { useTableURLState } from "src/components/DataTable/useTableUrlState";
 import { ErrorAlert } from "src/components/ErrorAlert";
 import Time from "src/components/Time";
 import { Status } from "src/components/ui";
+import { getDuration } from "src/utils";
 
 const columns: Array<ColumnDef<TaskInstanceResponse>> = [
   {
@@ -82,7 +82,7 @@ const columns: Array<ColumnDef<TaskInstanceResponse>> = [
 
   {
     cell: ({ row: { original } }) =>
-      `${dayjs.duration(dayjs(original.end_date).diff(original.start_date)).asSeconds().toFixed(2)}s`,
+      `${getDuration(original.start_date, original.end_date)}s`,
     header: "Duration",
   },
 ];
@@ -95,13 +95,17 @@ export const TaskInstances = () => {
   const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : "-start_date";
 
   const { data, error, isFetching, isLoading } =
-    useTaskInstanceServiceGetTaskInstances({
-      dagId,
-      dagRunId: runId,
-      limit: pagination.pageSize,
-      offset: pagination.pageIndex * pagination.pageSize,
-      orderBy,
-    });
+    useTaskInstanceServiceGetTaskInstances(
+      {
+        dagId,
+        dagRunId: runId,
+        limit: pagination.pageSize,
+        offset: pagination.pageIndex * pagination.pageSize,
+        orderBy,
+      },
+      undefined,
+      { enabled: !isNaN(pagination.pageSize) },
+    );
 
   return (
     <Box>

diff --git a/airflow/ui/src/pages/TaskInstance/Header.tsx b/airflow/ui/src/pages/TaskInstance/Header.tsx
@@ -17,13 +17,13 @@
  * under the License.
  */
 import { Box, Flex, Heading, HStack, SimpleGrid, Text } from "@chakra-ui/react";
-import dayjs from "dayjs";
 import { MdOutlineModeComment, MdOutlineTask } from "react-icons/md";
 
 import type { TaskInstanceResponse } from "openapi/requests/types.gen";
 import { Stat } from "src/components/Stat";
 import Time from "src/components/Time";
 import { Status } from "src/components/ui";
+import { getDuration } from "src/utils";
 
 export const Header = ({
   taskInstance,
@@ -71,11 +71,7 @@ export const Header = ({
         <Time datetime={taskInstance.end_date} />
       </Stat>
       <Stat label="Duration">
-        {dayjs
-          .duration(dayjs(taskInstance.end_date).diff(taskInstance.start_date))
-          .asSeconds()
-          .toFixed(2)}
-        s
+        {getDuration(taskInstance.start_date, taskInstance.end_date)}s
       </Stat>
     </SimpleGrid>
   </Box>

diff --git a/airflow/ui/src/pages/XCom/XCom.tsx b/airflow/ui/src/pages/XCom/XCom.tsx
@@ -58,14 +58,18 @@ export const XCom = () => {
   const { setTableURLState, tableURLState } = useTableURLState();
   const { pagination } = tableURLState;
 
-  const { data, error, isFetching, isLoading } = useXcomServiceGetXcomEntries({
-    dagId,
-    dagRunId: runId,
-    limit: pagination.pageSize,
-    mapIndex,
-    offset: pagination.pageIndex * pagination.pageSize,
-    taskId,
-  });
+  const { data, error, isFetching, isLoading } = useXcomServiceGetXcomEntries(
+    {
+      dagId,
+      dagRunId: runId,
+      limit: pagination.pageSize,
+      mapIndex,
+      offset: pagination.pageIndex * pagination.pageSize,
+      taskId,
+    },
+    undefined,
+    { enabled: !isNaN(pagination.pageSize) },
+  );
 
   return (
     <Box>

diff --git a/airflow/ui/src/queries/useDags.tsx b/airflow/ui/src/queries/useDags.tsx
@@ -50,10 +50,12 @@ export const useDags = (
     tags?: Array<string>;
   } = {},
 ) => {
+  const offsetDefined =
+    searchParams.offset === undefined ? false : !isNaN(searchParams.offset);
   const { data, error, isFetching, isLoading } = useDagServiceGetDags(
     searchParams,
     undefined,
-    queryOptions,
+    { ...queryOptions, enabled: offsetDefined },
   );
 
   const { orderBy, ...runsParams } = searchParams;
@@ -68,7 +70,7 @@ export const useDags = (
       dagRunsLimit: 14,
     },
     undefined,
-    queryOptions,
+    { ...queryOptions, enabled: offsetDefined },
   );
 
   const dags = (data?.dags ?? []).map((dag) => {

diff --git a/airflow/ui/src/utils/datetime_utils.ts b/airflow/ui/src/utils/datetime_utils.ts
@@ -0,0 +1,25 @@
+/*!
+ * 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 dayjs from "dayjs";
+
+export const getDuration = (startDate: string | null, endDate: string | null) =>
+  dayjs
+    .duration(dayjs(endDate ?? undefined).diff(startDate ?? undefined))
+    .asSeconds()
+    .toFixed(2);
diff --git a/airflow/ui/src/utils/index.ts b/airflow/ui/src/utils/index.ts
@@ -19,3 +19,4 @@
 
 export { capitalize } from "./capitalize";
 export { pluralize } from "./pluralize";
+export { getDuration } from "./datetime_utils";
Original file line number	Diff line number	Diff line change
Expand Up		@@ -19,3 +19,4 @@

		export { capitalize } from "./capitalize";
		export { pluralize } from "./pluralize";
		export { getDuration } from "./datetime_utils";