From 410b93083bb2d9889d8acc495513328f81b49794 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent@astronomer.io>
Date: Wed, 11 Dec 2024 13:05:34 -0500
Subject: [PATCH] Add Task Details page (#44828)

* Add Task Details page

* Fix sorts and links
---
 airflow/ui/src/assets/TaskIcon.tsx          |  41 +++++++
 airflow/ui/src/pages/Dag/Tasks/TaskCard.tsx |  47 +++----
 airflow/ui/src/pages/Dag/Tasks/Tasks.tsx    |  15 ++-
 airflow/ui/src/pages/DagsList/DagCard.tsx   |  20 +--
 airflow/ui/src/pages/Run/TaskInstances.tsx  |  31 ++---
 airflow/ui/src/pages/Task/Header.tsx        |  53 ++++++++
 airflow/ui/src/pages/Task/Instances.tsx     | 129 ++++++++++++++++++++
 airflow/ui/src/pages/Task/Task.tsx          |  90 ++++++++++++++
 airflow/ui/src/pages/Task/index.ts          |  21 ++++
 airflow/ui/src/router.tsx                   |   9 ++
 10 files changed, 408 insertions(+), 48 deletions(-)
 create mode 100644 airflow/ui/src/assets/TaskIcon.tsx
 create mode 100644 airflow/ui/src/pages/Task/Header.tsx
 create mode 100644 airflow/ui/src/pages/Task/Instances.tsx
 create mode 100644 airflow/ui/src/pages/Task/Task.tsx
 create mode 100644 airflow/ui/src/pages/Task/index.ts

diff --git a/airflow/ui/src/assets/TaskIcon.tsx b/airflow/ui/src/assets/TaskIcon.tsx
new file mode 100644
index 0000000000000..cd8f4440f09d3
--- /dev/null
+++ b/airflow/ui/src/assets/TaskIcon.tsx
@@ -0,0 +1,41 @@
+/*!
+ * 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 { createIcon } from "@chakra-ui/react";
+
+export const TaskIcon = createIcon({
+  defaultProps: {
+    height: "1em",
+    width: "1em",
+  },
+  displayName: "Task Icon",
+  path: (
+    <g
+      clip-path="url(#a)"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+    >
+      <path d="m7.99967 10.6666c1.47276 0 2.66663-1.19392 2.66663-2.66668s-1.19387-2.66667-2.66663-2.66667c-1.47275 0-2.66666 1.19391-2.66666 2.66667s1.19391 2.66668 2.66666 2.66668z" />
+      <path d="m.700195 8h3.966665" />
+      <path d="m11.3398 8h3.9667" />
+    </g>
+  ),
+  viewBox: "0 0 16 16",
+});
diff --git a/airflow/ui/src/pages/Dag/Tasks/TaskCard.tsx b/airflow/ui/src/pages/Dag/Tasks/TaskCard.tsx
index 05726989a91d6..d8a2ffe158c24 100644
--- a/airflow/ui/src/pages/Dag/Tasks/TaskCard.tsx
+++ b/airflow/ui/src/pages/Dag/Tasks/TaskCard.tsx
@@ -16,14 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  Heading,
-  VStack,
-  HStack,
-  Box,
-  SimpleGrid,
-  Text,
-} from "@chakra-ui/react";
+import { Heading, VStack, Box, SimpleGrid, Text, Link } from "@chakra-ui/react";
+import { Link as RouterLink } from "react-router-dom";
 
 import type {
   TaskResponse,
@@ -36,22 +30,27 @@ import { Status } from "src/components/ui";
 import { TaskRecentRuns } from "./TaskRecentRuns.tsx";
 
 type Props = {
+  readonly dagId: string;
   readonly task: TaskResponse;
   readonly taskInstances: Array<TaskInstanceResponse>;
 };
 
-export const TaskCard = ({ task, taskInstances }: Props) => (
+export const TaskCard = ({ dagId, task, taskInstances }: Props) => (
   <Box
     borderColor="border.emphasized"
     borderRadius={8}
     borderWidth={1}
     overflow="hidden"
+    px={3}
+    py={2}
   >
-    <Text bg="bg.info" color="fg.info" fontWeight="bold" p={2}>
-      {task.task_display_name ?? task.task_id}
-      {task.is_mapped ? "[]" : undefined}
-    </Text>
-    <SimpleGrid columns={4} gap={4} height={20} px={3} py={2}>
+    <Link asChild color="fg.info" fontWeight="bold">
+      <RouterLink to={`/dags/${dagId}/tasks/${task.task_id}`}>
+        {task.task_display_name ?? task.task_id}
+        {task.is_mapped ? "[]" : undefined}
+      </RouterLink>
+    </Link>
+    <SimpleGrid columns={4} gap={4} height={20}>
       <VStack align="flex-start" gap={1}>
         <Heading color="fg.muted" fontSize="xs">
           Operator
@@ -70,14 +69,18 @@ export const TaskCard = ({ task, taskInstances }: Props) => (
         </Heading>
         {taskInstances[0] ? (
           <TaskInstanceTooltip taskInstance={taskInstances[0]}>
-            <HStack fontSize="sm">
-              <Time datetime={taskInstances[0].start_date} />
-              {taskInstances[0].state === null ? undefined : (
-                <Status state={taskInstances[0].state}>
-                  {taskInstances[0].state}
-                </Status>
-              )}
-            </HStack>
+            <Link asChild color="fg.info" fontSize="sm">
+              <RouterLink
+                to={`/dags/${dagId}/runs/${taskInstances[0].dag_run_id}/tasks/${task.task_id}`}
+              >
+                <Time datetime={taskInstances[0].start_date} />
+                {taskInstances[0].state === null ? undefined : (
+                  <Status state={taskInstances[0].state}>
+                    {taskInstances[0].state}
+                  </Status>
+                )}
+              </RouterLink>
+            </Link>
           </TaskInstanceTooltip>
         ) : undefined}
       </VStack>
diff --git a/airflow/ui/src/pages/Dag/Tasks/Tasks.tsx b/airflow/ui/src/pages/Dag/Tasks/Tasks.tsx
index 4b844ad2b64f9..4b76110099e15 100644
--- a/airflow/ui/src/pages/Dag/Tasks/Tasks.tsx
+++ b/airflow/ui/src/pages/Dag/Tasks/Tasks.tsx
@@ -36,10 +36,12 @@ import { pluralize } from "src/utils";
 import { TaskCard } from "./TaskCard";
 
 const cardDef = (
+  dagId: string,
   taskInstances?: Array<TaskInstanceResponse>,
 ): CardDef<TaskResponse> => ({
   card: ({ row }) => (
     <TaskCard
+      dagId={dagId}
       task={row}
       taskInstances={
         taskInstances
@@ -57,19 +59,19 @@ const cardDef = (
 });
 
 export const Tasks = () => {
-  const { dagId } = useParams();
+  const { dagId = "" } = useParams();
   const {
     data,
     error: tasksError,
     isFetching,
     isLoading,
   } = useTaskServiceGetTasks({
-    dagId: dagId ?? "",
+    dagId,
   });
 
   // TODO: Replace dagIdPattern with dagId once supported for better matching
   const { data: runsData } = useDagsServiceRecentDagRuns(
-    { dagIdPattern: dagId ?? "", dagRunsLimit: 14 },
+    { dagIdPattern: dagId, dagRunsLimit: 14 },
     undefined,
     {
       enabled: Boolean(dagId),
@@ -85,7 +87,7 @@ export const Tasks = () => {
   const { data: taskInstancesResponse } =
     useTaskInstanceServiceGetTaskInstances(
       {
-        dagId: dagId ?? "",
+        dagId,
         dagRunId: "~",
         logicalDateGte: runs.at(-1)?.logical_date ?? "",
       },
@@ -100,7 +102,10 @@ export const Tasks = () => {
         {pluralize("Task", data ? data.total_entries : 0)}
       </Heading>
       <DataTable
-        cardDef={cardDef(taskInstancesResponse?.task_instances.reverse())}
+        cardDef={cardDef(
+          dagId,
+          taskInstancesResponse?.task_instances.reverse(),
+        )}
         columns={[]}
         data={data ? data.tasks : []}
         displayMode="card"
diff --git a/airflow/ui/src/pages/DagsList/DagCard.tsx b/airflow/ui/src/pages/DagsList/DagCard.tsx
index 0896e0bacf695..8b45a15cddaa2 100644
--- a/airflow/ui/src/pages/DagsList/DagCard.tsx
+++ b/airflow/ui/src/pages/DagsList/DagCard.tsx
@@ -80,13 +80,19 @@ export const DagCard = ({ dag }: Props) => {
         </Stat>
         <Stat label="Latest Run">
           {latestRun ? (
-            <DagRunInfo
-              dataIntervalEnd={latestRun.data_interval_end}
-              dataIntervalStart={latestRun.data_interval_start}
-              endDate={latestRun.end_date}
-              startDate={latestRun.start_date}
-              state={latestRun.state}
-            />
+            <Link asChild color="fg.info" fontSize="sm">
+              <RouterLink
+                to={`/dags/${latestRun.dag_id}/runs/${latestRun.dag_run_id}`}
+              >
+                <DagRunInfo
+                  dataIntervalEnd={latestRun.data_interval_end}
+                  dataIntervalStart={latestRun.data_interval_start}
+                  endDate={latestRun.end_date}
+                  startDate={latestRun.start_date}
+                  state={latestRun.state}
+                />
+              </RouterLink>
+            </Link>
           ) : undefined}
         </Stat>
         <Stat label="Next Run">
diff --git a/airflow/ui/src/pages/Run/TaskInstances.tsx b/airflow/ui/src/pages/Run/TaskInstances.tsx
index 9503b2e20ad2e..95b1ebf3c92f7 100644
--- a/airflow/ui/src/pages/Run/TaskInstances.tsx
+++ b/airflow/ui/src/pages/Run/TaskInstances.tsx
@@ -41,16 +41,8 @@ const columns: Array<ColumnDef<TaskInstanceResponse>> = [
         </RouterLink>
       </Link>
     ),
-    header: "Task ID",
-  },
-  {
-    accessorKey: "map_index",
-    header: "Map Index",
-  },
-  {
-    accessorKey: "try_number",
     enableSorting: false,
-    header: "Try Number",
+    header: "Task ID",
   },
   {
     accessorKey: "state",
@@ -61,11 +53,6 @@ const columns: Array<ColumnDef<TaskInstanceResponse>> = [
     }) => <Status state={state}>{state}</Status>,
     header: () => "State",
   },
-  {
-    accessorKey: "operator",
-    enableSorting: false,
-    header: "Operator",
-  },
   {
     accessorKey: "start_date",
     cell: ({ row: { original } }) => <Time datetime={original.start_date} />,
@@ -76,6 +63,22 @@ const columns: Array<ColumnDef<TaskInstanceResponse>> = [
     cell: ({ row: { original } }) => <Time datetime={original.end_date} />,
     header: "End Date",
   },
+  {
+    accessorKey: "map_index",
+    header: "Map Index",
+  },
+
+  {
+    accessorKey: "try_number",
+    enableSorting: false,
+    header: "Try Number",
+  },
+  {
+    accessorKey: "operator",
+    enableSorting: false,
+    header: "Operator",
+  },
+
   {
     cell: ({ row: { original } }) =>
       `${dayjs.duration(dayjs(original.end_date).diff(original.start_date)).asSeconds().toFixed(2)}s`,
diff --git a/airflow/ui/src/pages/Task/Header.tsx b/airflow/ui/src/pages/Task/Header.tsx
new file mode 100644
index 0000000000000..3bfb10479f4a1
--- /dev/null
+++ b/airflow/ui/src/pages/Task/Header.tsx
@@ -0,0 +1,53 @@
+/*!
+ * 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 { Box, Flex, Heading, HStack, SimpleGrid, Text } from "@chakra-ui/react";
+
+import type { TaskResponse } from "openapi/requests/types.gen";
+import { TaskIcon } from "src/assets/TaskIcon";
+import DagDocumentation from "src/components/DagDocumentation";
+import { Stat } from "src/components/Stat";
+
+export const Header = ({ task }: { readonly task: TaskResponse }) => (
+  <Box borderColor="border" borderRadius={8} borderWidth={1} p={2}>
+    <Flex alignItems="center" justifyContent="space-between" mb={2}>
+      <HStack alignItems="center" gap={2}>
+        <TaskIcon height={8} width={8} />
+        <Heading size="lg">
+          <strong>Task: </strong>
+          {task.task_display_name}
+          {task.is_mapped ? "[ ]" : ""}
+        </Heading>
+        <Flex>
+          <div />
+        </Flex>
+      </HStack>
+      {task.doc_md === null ? undefined : (
+        <DagDocumentation docMd={task.doc_md} />
+      )}
+    </Flex>
+    <SimpleGrid columns={4} gap={4}>
+      <Stat label="Operator">
+        <Text>{task.operator_name}</Text>
+      </Stat>
+      <Stat label="Trigger Rule">
+        <Text>{task.trigger_rule}</Text>
+      </Stat>
+    </SimpleGrid>
+  </Box>
+);
diff --git a/airflow/ui/src/pages/Task/Instances.tsx b/airflow/ui/src/pages/Task/Instances.tsx
new file mode 100644
index 0000000000000..af72c865c8901
--- /dev/null
+++ b/airflow/ui/src/pages/Task/Instances.tsx
@@ -0,0 +1,129 @@
+/*!
+ * 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 { 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,
+  useTaskServiceGetTask,
+} from "openapi/queries";
+import type { TaskInstanceResponse } from "openapi/requests/types.gen";
+import { DataTable } from "src/components/DataTable";
+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";
+
+const columns = (
+  isMapped?: boolean,
+): Array<ColumnDef<TaskInstanceResponse>> => [
+  {
+    accessorKey: "dag_run_id",
+    cell: ({ row: { original } }) => (
+      <Link asChild color="fg.info" fontWeight="bold">
+        <RouterLink
+          to={`/dags/${original.dag_id}/runs/${original.dag_run_id}/tasks/${original.task_id}`}
+        >
+          {original.dag_run_id}
+        </RouterLink>
+      </Link>
+    ),
+    enableSorting: false,
+    header: "Dag Run ID",
+  },
+  {
+    accessorKey: "state",
+    cell: ({
+      row: {
+        original: { state },
+      },
+    }) => <Status state={state}>{state}</Status>,
+    header: () => "State",
+  },
+  {
+    accessorKey: "start_date",
+    cell: ({ row: { original } }) => <Time datetime={original.start_date} />,
+    header: "Start Date",
+  },
+  {
+    accessorKey: "end_date",
+    cell: ({ row: { original } }) => <Time datetime={original.end_date} />,
+    header: "End Date",
+  },
+  ...(isMapped
+    ? [
+        {
+          accessorKey: "map_index",
+          header: "Map Index",
+        },
+      ]
+    : []),
+  {
+    accessorKey: "try_number",
+    enableSorting: false,
+    header: "Try Number",
+  },
+  {
+    cell: ({ row: { original } }) =>
+      `${dayjs.duration(dayjs(original.end_date).diff(original.start_date)).asSeconds().toFixed(2)}s`,
+    header: "Duration",
+  },
+];
+
+export const Instances = () => {
+  const { dagId = "", taskId } = useParams();
+  const { setTableURLState, tableURLState } = useTableURLState();
+  const { pagination, sorting } = tableURLState;
+  const [sort] = sorting;
+  const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : undefined;
+
+  const {
+    data: task,
+    error: taskError,
+    isLoading: isTaskLoading,
+  } = useTaskServiceGetTask({ dagId, taskId });
+
+  const { data, error, isFetching, isLoading } =
+    useTaskInstanceServiceGetTaskInstances({
+      dagId,
+      dagRunId: "~",
+      limit: pagination.pageSize,
+      offset: pagination.pageIndex * pagination.pageSize,
+      orderBy,
+      taskId,
+    });
+
+  return (
+    <Box>
+      <DataTable
+        columns={columns(Boolean(task?.is_mapped))}
+        data={data?.task_instances ?? []}
+        errorMessage={<ErrorAlert error={error ?? taskError} />}
+        initialState={tableURLState}
+        isFetching={isFetching}
+        isLoading={isLoading || isTaskLoading}
+        modelName="Task Instance"
+        onStateChange={setTableURLState}
+        total={data?.total_entries}
+      />
+    </Box>
+  );
+};
diff --git a/airflow/ui/src/pages/Task/Task.tsx b/airflow/ui/src/pages/Task/Task.tsx
new file mode 100644
index 0000000000000..dde59584af7bf
--- /dev/null
+++ b/airflow/ui/src/pages/Task/Task.tsx
@@ -0,0 +1,90 @@
+/*!
+ * 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 { LiaSlashSolid } from "react-icons/lia";
+import { useParams, Link as RouterLink } from "react-router-dom";
+
+import {
+  useDagServiceGetDagDetails,
+  useTaskServiceGetTask,
+} from "openapi/queries";
+import { Breadcrumb } from "src/components/ui";
+import { DetailsLayout } from "src/layouts/Details/DetailsLayout";
+
+import { Header } from "./Header";
+
+const tabs = [
+  { label: "Task Instances", value: "" },
+  { label: "Events", value: "events" },
+];
+
+export const Task = () => {
+  const { dagId = "", taskId = "" } = useParams();
+
+  const {
+    data: task,
+    error,
+    isLoading,
+  } = useTaskServiceGetTask({ dagId, taskId });
+
+  const {
+    data: dag,
+    error: dagError,
+    isLoading: isDagLoading,
+  } = useDagServiceGetDagDetails({
+    dagId,
+  });
+
+  const links = [
+    { label: "Dags", value: "/dags" },
+    { label: dag?.dag_display_name ?? dagId, value: `/dags/${dagId}` },
+    { label: task?.task_display_name ?? taskId },
+  ];
+
+  return (
+    <DetailsLayout
+      dag={dag}
+      error={error ?? dagError}
+      isLoading={isLoading || isDagLoading}
+      tabs={tabs}
+    >
+      <Breadcrumb.Root mb={3} separator={<LiaSlashSolid />}>
+        {links.map((link, index) => {
+          if (index === links.length - 1) {
+            return (
+              <Breadcrumb.CurrentLink key={link.label}>
+                {link.label}
+              </Breadcrumb.CurrentLink>
+            );
+          }
+
+          return link.value === undefined ? (
+            <Breadcrumb.Link color="fg.info" key={link.label}>
+              {link.label}
+            </Breadcrumb.Link>
+          ) : (
+            <Breadcrumb.Link asChild color="fg.info" key={link.label}>
+              <RouterLink to={link.value}>{link.label}</RouterLink>
+            </Breadcrumb.Link>
+          );
+        })}
+      </Breadcrumb.Root>
+      {task === undefined ? undefined : <Header task={task} />}
+    </DetailsLayout>
+  );
+};
diff --git a/airflow/ui/src/pages/Task/index.ts b/airflow/ui/src/pages/Task/index.ts
new file mode 100644
index 0000000000000..99691b18e5261
--- /dev/null
+++ b/airflow/ui/src/pages/Task/index.ts
@@ -0,0 +1,21 @@
+/*!
+ * 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.
+ */
+
+export * from "./Task";
+export * from "./Instances";
diff --git a/airflow/ui/src/router.tsx b/airflow/ui/src/router.tsx
index 938bc91c8413a..cd8da392dbc6f 100644
--- a/airflow/ui/src/router.tsx
+++ b/airflow/ui/src/router.tsx
@@ -30,6 +30,7 @@ import { ErrorPage } from "src/pages/Error";
 import { Events } from "src/pages/Events";
 import { Run } from "src/pages/Run";
 import { TaskInstances } from "src/pages/Run/TaskInstances";
+import { Task, Instances } from "src/pages/Task";
 import { TaskInstance } from "src/pages/TaskInstance";
 
 import { Variables } from "./pages/Variables";
@@ -85,6 +86,14 @@ export const router = createBrowserRouter(
           element: <TaskInstance />,
           path: "dags/:dagId/runs/:runId/tasks/:taskId",
         },
+        {
+          children: [
+            { element: <Instances />, index: true },
+            { element: <Events />, path: "events" },
+          ],
+          element: <Task />,
+          path: "dags/:dagId/tasks/:taskId",
+        },
       ],
       element: <BaseLayout />,
       errorElement: (