From 249d05a2cebde0080563daf7cfa453b2fc23f7a3 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Wed, 4 Dec 2024 14:01:00 -0500
Subject: [PATCH 1/2] Flesh out a basic task instance details page

---
 airflow/ui/src/pages/DagsList/Dag/Header.tsx  |  2 +-
 airflow/ui/src/pages/DagsList/Run/Header.tsx  |  2 +-
 .../pages/DagsList/TaskInstance/Header.tsx    | 86 +++++++++++++++++++
 .../src/pages/DagsList/TaskInstance/Tabs.tsx  | 72 ++++++++++++++++
 .../DagsList/TaskInstance/TaskInstance.tsx    | 56 +++++++++---
 airflow/ui/src/pages/Events/Events.tsx        | 29 ++++---
 airflow/ui/src/router.tsx                     |  7 ++
 7 files changed, 226 insertions(+), 28 deletions(-)
 create mode 100644 airflow/ui/src/pages/DagsList/TaskInstance/Header.tsx
 create mode 100644 airflow/ui/src/pages/DagsList/TaskInstance/Tabs.tsx

diff --git a/airflow/ui/src/pages/DagsList/Dag/Header.tsx b/airflow/ui/src/pages/DagsList/Dag/Header.tsx
index bc67142bd0317..3e118e97fde48 100644
--- a/airflow/ui/src/pages/DagsList/Dag/Header.tsx
+++ b/airflow/ui/src/pages/DagsList/Dag/Header.tsx
@@ -38,7 +38,7 @@ export const Header = ({
   readonly dagId?: string;
   readonly latestRun?: DAGRunResponse;
 }) => (
-  <Box borderColor="border" borderRadius={8} borderWidth={1} overflow="hidden">
+  <Box borderColor="border" borderRadius={8} borderWidth={1}>
     <Box p={2}>
       <Flex alignItems="center" justifyContent="space-between">
         <HStack alignItems="center" gap={2}>
diff --git a/airflow/ui/src/pages/DagsList/Run/Header.tsx b/airflow/ui/src/pages/DagsList/Run/Header.tsx
index 6d5a5368e17f6..7b1c8798c4960 100644
--- a/airflow/ui/src/pages/DagsList/Run/Header.tsx
+++ b/airflow/ui/src/pages/DagsList/Run/Header.tsx
@@ -28,7 +28,7 @@ import Time from "src/components/Time";
 import { Status } from "src/components/ui";
 
 export const Header = ({ dagRun }: { readonly dagRun: DAGRunResponse }) => (
-  <Box borderColor="border" borderRadius={8} borderWidth={1} overflow="hidden">
+  <Box borderColor="border" borderRadius={8} borderWidth={1}>
     <Box p={2}>
       <Flex alignItems="center" justifyContent="space-between" mb={2}>
         <HStack alignItems="center" gap={2}>
diff --git a/airflow/ui/src/pages/DagsList/TaskInstance/Header.tsx b/airflow/ui/src/pages/DagsList/TaskInstance/Header.tsx
new file mode 100644
index 0000000000000..2d578f19c9c88
--- /dev/null
+++ b/airflow/ui/src/pages/DagsList/TaskInstance/Header.tsx
@@ -0,0 +1,86 @@
+/*!
+ * 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 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";
+
+export const Header = ({
+  taskInstance,
+}: {
+  readonly taskInstance: TaskInstanceResponse;
+}) => (
+  <Box borderColor="border" borderRadius={8} borderWidth={1}>
+    <Box p={2}>
+      <Flex alignItems="center" justifyContent="space-between" mb={2}>
+        <HStack alignItems="center" gap={2}>
+          <MdOutlineTask size="1.75rem" />
+          <Heading size="lg">
+            <strong>Task Instance: </strong>
+            {taskInstance.task_display_name}{" "}
+            <Time datetime={taskInstance.start_date} />
+          </Heading>
+          <Status state={taskInstance.state ?? undefined}>
+            {taskInstance.state}
+          </Status>
+          <Flex>
+            <div />
+          </Flex>
+        </HStack>
+      </Flex>
+      {taskInstance.note === null ||
+      taskInstance.note.length === 0 ? undefined : (
+        <Flex alignItems="flex-start" justifyContent="space-between" mr={16}>
+          <MdOutlineModeComment size="3rem" />
+          <Text fontSize="sm" ml={3}>
+            {taskInstance.note}
+          </Text>
+        </Flex>
+      )}
+      <SimpleGrid columns={4} gap={4} my={2}>
+        <Stat label="Operator">{taskInstance.operator}</Stat>
+        {taskInstance.map_index > -1 ? (
+          <Stat label="Map Index">{taskInstance.map_index}</Stat>
+        ) : undefined}
+        {taskInstance.try_number > 1 ? (
+          <Stat label="Try Number">{taskInstance.try_number}</Stat>
+        ) : undefined}
+        <Stat label="Start">
+          <Time datetime={taskInstance.start_date} />
+        </Stat>
+        <Stat label="End">
+          <Time datetime={taskInstance.end_date} />
+        </Stat>
+        <Stat label="Duration">
+          {dayjs
+            .duration(
+              dayjs(taskInstance.end_date).diff(taskInstance.start_date),
+            )
+            .asSeconds()
+            .toFixed(2)}
+          s
+        </Stat>
+      </SimpleGrid>
+    </Box>
+  </Box>
+);
diff --git a/airflow/ui/src/pages/DagsList/TaskInstance/Tabs.tsx b/airflow/ui/src/pages/DagsList/TaskInstance/Tabs.tsx
new file mode 100644
index 0000000000000..226214d722a60
--- /dev/null
+++ b/airflow/ui/src/pages/DagsList/TaskInstance/Tabs.tsx
@@ -0,0 +1,72 @@
+/*!
+ * 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 { Button } from "@chakra-ui/react";
+import { useSearchParams } from "react-router-dom";
+
+import type { DAGResponse } from "openapi/requests/types.gen";
+import { DagIcon } from "src/assets/DagIcon";
+import { DagVizModal } from "src/components/DagVizModal";
+import { NavTabs } from "src/components/NavTabs";
+
+const tabs = [
+  { label: "Logs", value: "" },
+  { label: "Events", value: "events" },
+  { label: "XCom", value: "xcom" },
+  { label: "Code", value: "code" },
+  { label: "Details", value: "details" },
+];
+
+const MODAL = "modal";
+
+export const TaskInstanceTabs = ({ dag }: { readonly dag?: DAGResponse }) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const modal = searchParams.get(MODAL);
+
+  const isGraphOpen = modal === "graph";
+  const onClose = () => {
+    searchParams.delete(MODAL);
+    setSearchParams(searchParams);
+  };
+
+  const onOpen = () => {
+    searchParams.set(MODAL, "graph");
+    setSearchParams(searchParams);
+  };
+
+  return (
+    <>
+      <NavTabs
+        rightButtons={
+          <Button colorPalette="blue" onClick={onOpen} variant="ghost">
+            <DagIcon height={5} width={5} />
+            Graph
+          </Button>
+        }
+        tabs={tabs}
+      />
+      <DagVizModal
+        dagDisplayName={dag?.dag_display_name}
+        dagId={dag?.dag_id}
+        onClose={onClose}
+        open={isGraphOpen}
+      />
+    </>
+  );
+};
diff --git a/airflow/ui/src/pages/DagsList/TaskInstance/TaskInstance.tsx b/airflow/ui/src/pages/DagsList/TaskInstance/TaskInstance.tsx
index eb45f9c48c0b9..f105d969c075e 100644
--- a/airflow/ui/src/pages/DagsList/TaskInstance/TaskInstance.tsx
+++ b/airflow/ui/src/pages/DagsList/TaskInstance/TaskInstance.tsx
@@ -16,26 +16,54 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { Box } from "@chakra-ui/react";
 import { LiaSlashSolid } from "react-icons/lia";
-import { useParams, Link as RouterLink } from "react-router-dom";
+import { useParams, Link as RouterLink, Outlet } from "react-router-dom";
 
+import {
+  useDagServiceGetDagDetails,
+  useTaskInstanceServiceGetTaskInstance,
+} from "openapi/queries";
 import { Breadcrumb } from "src/components/ui";
+import { OpenGroupsProvider } from "src/context/openGroups";
+
+import { Header } from "./Header";
+import { TaskInstanceTabs } from "./Tabs";
 
 export const TaskInstance = () => {
-  const { dagId, runId, taskId } = useParams();
+  const { dagId = "", runId = "", taskId = "" } = useParams();
+
+  const { data: dag } = useDagServiceGetDagDetails({
+    dagId,
+  });
+
+  const { data: taskInstance } = useTaskInstanceServiceGetTaskInstance({
+    dagId,
+    dagRunId: runId,
+    taskId,
+  });
 
   return (
-    <Breadcrumb.Root mb={3} separator={<LiaSlashSolid />}>
-      <Breadcrumb.Link asChild color="fg.info">
-        <RouterLink to="/dags">Dags</RouterLink>
-      </Breadcrumb.Link>
-      <Breadcrumb.Link asChild color="fg.info">
-        <RouterLink to={`/dags/${dagId}`}>{dagId}</RouterLink>
-      </Breadcrumb.Link>
-      <Breadcrumb.Link asChild color="fg.info">
-        <RouterLink to={`/dags/${dagId}/runs/${runId}`}>{runId}</RouterLink>
-      </Breadcrumb.Link>
-      <Breadcrumb.CurrentLink>{taskId}</Breadcrumb.CurrentLink>
-    </Breadcrumb.Root>
+    <OpenGroupsProvider dagId={dagId}>
+      <Breadcrumb.Root mb={3} separator={<LiaSlashSolid />}>
+        <Breadcrumb.Link asChild color="fg.info">
+          <RouterLink to="/dags">Dags</RouterLink>
+        </Breadcrumb.Link>
+        <Breadcrumb.Link asChild color="fg.info">
+          <RouterLink to={`/dags/${dagId}`}>{dagId}</RouterLink>
+        </Breadcrumb.Link>
+        <Breadcrumb.Link asChild color="fg.info">
+          <RouterLink to={`/dags/${dagId}/runs/${runId}`}>{runId}</RouterLink>
+        </Breadcrumb.Link>
+        <Breadcrumb.CurrentLink>{taskId}</Breadcrumb.CurrentLink>
+      </Breadcrumb.Root>
+      {taskInstance === undefined ? undefined : (
+        <Header taskInstance={taskInstance} />
+      )}
+      <TaskInstanceTabs dag={dag} />
+      <Box overflow="auto">
+        <Outlet />
+      </Box>
+    </OpenGroupsProvider>
   );
 };
diff --git a/airflow/ui/src/pages/Events/Events.tsx b/airflow/ui/src/pages/Events/Events.tsx
index 050ab9c7cd6bb..60663aefec7d1 100644
--- a/airflow/ui/src/pages/Events/Events.tsx
+++ b/airflow/ui/src/pages/Events/Events.tsx
@@ -28,8 +28,9 @@ import { ErrorAlert } from "src/components/ErrorAlert";
 import Time from "src/components/Time";
 
 const eventsColumn = (
-  dagId: string | undefined,
-  runId: string | undefined,
+  dagId?: string,
+  runId?: string,
+  taskId?: string,
 ): Array<ColumnDef<EventLogResponse>> => [
   {
     accessorKey: "when",
@@ -64,14 +65,18 @@ const eventsColumn = (
           },
         },
       ]),
-  {
-    accessorKey: "task_id",
-    enableSorting: true,
-    header: "Task ID",
-    meta: {
-      skeletonWidth: 10,
-    },
-  },
+  ...(Boolean(taskId)
+    ? []
+    : [
+        {
+          accessorKey: "task_id",
+          enableSorting: true,
+          header: "Task ID",
+          meta: {
+            skeletonWidth: 10,
+          },
+        },
+      ]),
   {
     accessorKey: "map_index",
     enableSorting: false,
@@ -107,7 +112,7 @@ const eventsColumn = (
 ];
 
 export const Events = () => {
-  const { dagId, runId } = useParams();
+  const { dagId, runId, taskId } = useParams();
   const { setTableURLState, tableURLState } = useTableURLState({
     sorting: [{ desc: true, id: "when" }],
   });
@@ -133,7 +138,7 @@ export const Events = () => {
     <Box>
       <ErrorAlert error={EventsError} />
       <DataTable
-        columns={eventsColumn(dagId, runId)}
+        columns={eventsColumn(dagId, runId, taskId)}
         data={data ? data.event_logs : []}
         displayMode="table"
         initialState={tableURLState}
diff --git a/airflow/ui/src/router.tsx b/airflow/ui/src/router.tsx
index c1aa330604653..f5c1fcf64c361 100644
--- a/airflow/ui/src/router.tsx
+++ b/airflow/ui/src/router.tsx
@@ -68,6 +68,13 @@ export const router = createBrowserRouter(
           path: "dags/:dagId/runs/:runId",
         },
         {
+          children: [
+            { element: <div>Logs</div>, index: true },
+            { element: <Events />, path: "events" },
+            { element: <div>Xcom</div>, path: "xcom" },
+            { element: <Code />, path: "code" },
+            { element: <div>Details</div>, path: "details" },
+          ],
           element: <TaskInstance />,
           path: "dags/:dagId/runs/:runId/tasks/:taskId",
         },

From f350786026905c994ec7a076f8990ce9bb7c5eea Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Wed, 4 Dec 2024 15:46:10 -0500
Subject: [PATCH 2/2] Add grid/gantt buttons and make detaisl layout component

---
 airflow/ui/package.json                       |  2 +-
 airflow/ui/pnpm-lock.yaml                     | 10 +-
 airflow/ui/src/components/DagVizModal.tsx     | 52 ----------
 .../ui/src/layouts/Details/DagVizModal.tsx    | 92 +++++++++++++++++
 .../ui/src/layouts/Details/DetailsLayout.tsx  | 87 ++++++++++++++++
 .../Details}/NavTabs.tsx                      | 33 +++++--
 airflow/ui/src/pages/DagsList/Dag/Dag.tsx     | 51 ++++------
 .../ui/src/pages/DagsList/Dag/Grid/Grid.tsx   | 25 +++++
 .../ui/src/pages/DagsList/Dag/Grid/index.ts   | 20 ++++
 airflow/ui/src/pages/DagsList/Dag/Tabs.tsx    | 72 --------------
 airflow/ui/src/pages/DagsList/Run/Header.tsx  | 86 ++++++++--------
 airflow/ui/src/pages/DagsList/Run/Run.tsx     | 71 +++++++-------
 airflow/ui/src/pages/DagsList/Run/Tabs.tsx    | 70 -------------
 .../pages/DagsList/TaskInstance/Header.tsx    | 98 +++++++++----------
 .../src/pages/DagsList/TaskInstance/Tabs.tsx  | 72 --------------
 .../DagsList/TaskInstance/TaskInstance.tsx    | 43 +++++---
 16 files changed, 430 insertions(+), 454 deletions(-)
 delete mode 100644 airflow/ui/src/components/DagVizModal.tsx
 create mode 100644 airflow/ui/src/layouts/Details/DagVizModal.tsx
 create mode 100644 airflow/ui/src/layouts/Details/DetailsLayout.tsx
 rename airflow/ui/src/{components => layouts/Details}/NavTabs.tsx (62%)
 create mode 100644 airflow/ui/src/pages/DagsList/Dag/Grid/Grid.tsx
 create mode 100644 airflow/ui/src/pages/DagsList/Dag/Grid/index.ts
 delete mode 100644 airflow/ui/src/pages/DagsList/Dag/Tabs.tsx
 delete mode 100644 airflow/ui/src/pages/DagsList/Run/Tabs.tsx
 delete mode 100644 airflow/ui/src/pages/DagsList/TaskInstance/Tabs.tsx

diff --git a/airflow/ui/package.json b/airflow/ui/package.json
index e2aeada97dd57..c2d28f6425e1b 100644
--- a/airflow/ui/package.json
+++ b/airflow/ui/package.json
@@ -37,7 +37,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.20.0",
-    "react-icons": "^5.3.0",
+    "react-icons": "^5.4.0",
     "react-router-dom": "^6.26.2",
     "react-syntax-highlighter": "^15.5.6",
     "use-debounce": "^10.0.3",
diff --git a/airflow/ui/pnpm-lock.yaml b/airflow/ui/pnpm-lock.yaml
index 425192db8879e..b30275d9e41c4 100644
--- a/airflow/ui/pnpm-lock.yaml
+++ b/airflow/ui/pnpm-lock.yaml
@@ -72,8 +72,8 @@ importers:
         specifier: ^7.20.0
         version: 7.53.1(react@18.3.1)
       react-icons:
-        specifier: ^5.3.0
-        version: 5.3.0(react@18.3.1)
+        specifier: ^5.4.0
+        version: 5.4.0(react@18.3.1)
       react-router-dom:
         specifier: ^6.26.2
         version: 6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -3014,8 +3014,8 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
 
-  react-icons@5.3.0:
-    resolution: {integrity: sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==}
+  react-icons@5.4.0:
+    resolution: {integrity: sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==}
     peerDependencies:
       react: '*'
 
@@ -7208,7 +7208,7 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  react-icons@5.3.0(react@18.3.1):
+  react-icons@5.4.0(react@18.3.1):
     dependencies:
       react: 18.3.1
 
diff --git a/airflow/ui/src/components/DagVizModal.tsx b/airflow/ui/src/components/DagVizModal.tsx
deleted file mode 100644
index 846200eca330e..0000000000000
--- a/airflow/ui/src/components/DagVizModal.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/*!
- * 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 { Heading } from "@chakra-ui/react";
-
-import type { DAGResponse } from "openapi/requests/types.gen";
-import { Dialog } from "src/components/ui";
-
-import { Graph } from "../pages/DagsList/Dag/Graph";
-
-type TriggerDAGModalProps = {
-  dagDisplayName?: DAGResponse["dag_display_name"];
-  dagId?: DAGResponse["dag_id"];
-  onClose: () => void;
-  open: boolean;
-};
-
-export const DagVizModal: React.FC<TriggerDAGModalProps> = ({
-  dagDisplayName,
-  dagId,
-  onClose,
-  open,
-}) => (
-  <Dialog.Root onOpenChange={onClose} open={open} size="full">
-    <Dialog.Content backdrop>
-      <Dialog.Header bg="blue.muted">
-        <Heading size="xl">
-          {Boolean(dagDisplayName) ? dagDisplayName : "Dag Undefined"}
-        </Heading>
-        <Dialog.CloseTrigger closeButtonProps={{ size: "xl" }} />
-      </Dialog.Header>
-      <Dialog.Body display="flex">
-        {dagId === undefined ? undefined : <Graph dagId={dagId} />}
-      </Dialog.Body>
-    </Dialog.Content>
-  </Dialog.Root>
-);
diff --git a/airflow/ui/src/layouts/Details/DagVizModal.tsx b/airflow/ui/src/layouts/Details/DagVizModal.tsx
new file mode 100644
index 0000000000000..86d5d94906eaf
--- /dev/null
+++ b/airflow/ui/src/layouts/Details/DagVizModal.tsx
@@ -0,0 +1,92 @@
+/*!
+ * 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 { Button, Heading, HStack } from "@chakra-ui/react";
+import { FaChartGantt } from "react-icons/fa6";
+import { FiGrid } from "react-icons/fi";
+import { Link as RouterLink, useSearchParams } from "react-router-dom";
+
+import type { DAGResponse } from "openapi/requests/types.gen";
+import { DagIcon } from "src/assets/DagIcon";
+import { Dialog } from "src/components/ui";
+import { Graph } from "src/pages/DagsList/Dag/Graph";
+import { Grid } from "src/pages/DagsList/Dag/Grid";
+import { capitalize } from "src/utils";
+
+type TriggerDAGModalProps = {
+  dagDisplayName?: DAGResponse["dag_display_name"];
+  dagId?: DAGResponse["dag_id"];
+  onClose: () => void;
+  open: boolean;
+};
+
+const visualizationOptions = [
+  { icon: <FaChartGantt height={5} width={5} />, value: "gantt" },
+  { icon: <DagIcon height={5} width={5} />, value: "graph" },
+  { icon: <FiGrid height={5} width={5} />, value: "grid" },
+];
+
+export const DagVizModal: React.FC<TriggerDAGModalProps> = ({
+  dagDisplayName,
+  dagId,
+  onClose,
+  open,
+}) => {
+  const [searchParams] = useSearchParams();
+
+  const activeViz = searchParams.get("modal") ?? "graph";
+
+  return (
+    <Dialog.Root onOpenChange={onClose} open={open} size="full">
+      <Dialog.Content backdrop>
+        <Dialog.Header bg="blue.muted">
+          <HStack>
+            <Heading mr={3} size="xl">
+              {Boolean(dagDisplayName) ? dagDisplayName : "Dag Undefined"}
+            </Heading>
+            {visualizationOptions.map(({ icon, value }) => (
+              <RouterLink
+                key={value}
+                to={{
+                  search: `modal=${value}`,
+                }}
+              >
+                <Button
+                  borderColor="colorPalette.fg"
+                  borderRadius={20}
+                  colorPalette="blue"
+                  variant={activeViz === value ? "solid" : "outline"}
+                >
+                  {icon}
+                  {capitalize(value)}
+                </Button>
+              </RouterLink>
+            ))}
+          </HStack>
+          <Dialog.CloseTrigger closeButtonProps={{ size: "xl" }} />
+        </Dialog.Header>
+        <Dialog.Body display="flex">
+          {activeViz === "graph" && dagId !== undefined ? (
+            <Graph dagId={dagId} />
+          ) : undefined}
+          {activeViz === "grid" && dagId !== undefined ? <Grid /> : undefined}
+        </Dialog.Body>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+};
diff --git a/airflow/ui/src/layouts/Details/DetailsLayout.tsx b/airflow/ui/src/layouts/Details/DetailsLayout.tsx
new file mode 100644
index 0000000000000..e1aa96190168e
--- /dev/null
+++ b/airflow/ui/src/layouts/Details/DetailsLayout.tsx
@@ -0,0 +1,87 @@
+/*!
+ * 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, Button } from "@chakra-ui/react";
+import type { PropsWithChildren } from "react";
+import { FiChevronsLeft } from "react-icons/fi";
+import {
+  Outlet,
+  Link as RouterLink,
+  useParams,
+  useSearchParams,
+} from "react-router-dom";
+
+import type { DAGResponse } from "openapi/requests/types.gen";
+import { ErrorAlert } from "src/components/ErrorAlert";
+import { ProgressBar } from "src/components/ui";
+import { OpenGroupsProvider } from "src/context/openGroups";
+import { DagVizModal } from "src/layouts/Details/DagVizModal";
+import { NavTabs } from "src/layouts/Details/NavTabs";
+
+type Props = {
+  readonly dag?: DAGResponse;
+  readonly error?: unknown;
+  readonly isLoading?: boolean;
+  readonly tabs: Array<{ label: string; value: string }>;
+} & PropsWithChildren;
+
+export const DetailsLayout = ({
+  children,
+  dag,
+  error,
+  isLoading,
+  tabs,
+}: Props) => {
+  const { dagId = "" } = useParams();
+
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const modal = searchParams.get("modal");
+
+  const isModalOpen = modal !== null;
+  const onClose = () => {
+    searchParams.delete("modal");
+    setSearchParams(searchParams);
+  };
+
+  return (
+    <OpenGroupsProvider dagId={dagId}>
+      <Box>
+        <Button asChild colorPalette="blue" variant="ghost">
+          <RouterLink to="/dags">
+            <FiChevronsLeft />
+            Back to all dags
+          </RouterLink>
+        </Button>
+        {children}
+        <ErrorAlert error={error} />
+        <ProgressBar size="xs" visibility={isLoading ? "visible" : "hidden"} />
+        <NavTabs tabs={tabs} />
+        <DagVizModal
+          dagDisplayName={dag?.dag_display_name}
+          dagId={dag?.dag_id}
+          onClose={onClose}
+          open={isModalOpen}
+        />
+      </Box>
+      <Box overflow="auto">
+        <Outlet />
+      </Box>
+    </OpenGroupsProvider>
+  );
+};
diff --git a/airflow/ui/src/components/NavTabs.tsx b/airflow/ui/src/layouts/Details/NavTabs.tsx
similarity index 62%
rename from airflow/ui/src/components/NavTabs.tsx
rename to airflow/ui/src/layouts/Details/NavTabs.tsx
index 915b5c5d7feb4..093413e7a1aff 100644
--- a/airflow/ui/src/components/NavTabs.tsx
+++ b/airflow/ui/src/layouts/Details/NavTabs.tsx
@@ -16,16 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Center, Flex } from "@chakra-ui/react";
-import type { ReactNode } from "react";
-import { NavLink } from "react-router-dom";
+import { Button, Center, Flex } from "@chakra-ui/react";
+import { FaChartGantt } from "react-icons/fa6";
+import { FiGrid } from "react-icons/fi";
+import { NavLink, Link as RouterLink } from "react-router-dom";
+
+import { DagIcon } from "src/assets/DagIcon";
 
 type Props = {
-  readonly rightButtons?: ReactNode;
   readonly tabs: Array<{ label: string; value: string }>;
 };
 
-export const NavTabs = ({ rightButtons, tabs }: Props) => (
+export const NavTabs = ({ tabs }: Props) => (
   <Flex
     alignItems="center"
     borderBottomWidth={1}
@@ -52,6 +54,25 @@ export const NavTabs = ({ rightButtons, tabs }: Props) => (
         </NavLink>
       ))}
     </Flex>
-    <Flex alignSelf="flex-end">{rightButtons}</Flex>
+    <Flex alignSelf="flex-end">
+      <Button asChild colorPalette="blue" variant="ghost">
+        <RouterLink to={{ search: "modal=gantt" }}>
+          <FaChartGantt height={5} width={5} />
+          Gantt
+        </RouterLink>
+      </Button>
+      <Button asChild colorPalette="blue" variant="ghost">
+        <RouterLink to={{ search: "modal=grid" }}>
+          <FiGrid height={5} width={5} />
+          Grid
+        </RouterLink>
+      </Button>
+      <Button asChild colorPalette="blue" variant="ghost">
+        <RouterLink to={{ search: "modal=graph" }}>
+          <DagIcon height={5} width={5} />
+          Graph
+        </RouterLink>
+      </Button>
+    </Flex>
   </Flex>
 );
diff --git a/airflow/ui/src/pages/DagsList/Dag/Dag.tsx b/airflow/ui/src/pages/DagsList/Dag/Dag.tsx
index ac149d10b46e2..87283b077d1e6 100644
--- a/airflow/ui/src/pages/DagsList/Dag/Dag.tsx
+++ b/airflow/ui/src/pages/DagsList/Dag/Dag.tsx
@@ -16,30 +16,33 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Button } from "@chakra-ui/react";
-import { FiChevronsLeft } from "react-icons/fi";
-import { Outlet, Link as RouterLink, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 
 import {
   useDagServiceGetDagDetails,
   useDagsServiceRecentDagRuns,
 } from "openapi/queries";
-import { ErrorAlert } from "src/components/ErrorAlert";
-import { ProgressBar } from "src/components/ui";
-import { OpenGroupsProvider } from "src/context/openGroups";
+import { DetailsLayout } from "src/layouts/Details/DetailsLayout";
 
 import { Header } from "./Header";
-import { DagTabs } from "./Tabs";
+
+const tabs = [
+  { label: "Overview", value: "" },
+  { label: "Runs", value: "runs" },
+  { label: "Tasks", value: "tasks" },
+  { label: "Events", value: "events" },
+  { label: "Code", value: "code" },
+];
 
 export const Dag = () => {
-  const { dagId } = useParams();
+  const { dagId = "" } = useParams();
 
   const {
     data: dag,
     error,
     isLoading,
   } = useDagServiceGetDagDetails({
-    dagId: dagId ?? "",
+    dagId,
   });
 
   // TODO: replace with with a list dag runs by dag id request
@@ -47,7 +50,7 @@ export const Dag = () => {
     data: runsData,
     error: runsError,
     isLoading: isLoadingRuns,
-  } = useDagsServiceRecentDagRuns({ dagIdPattern: dagId ?? "" }, undefined, {
+  } = useDagsServiceRecentDagRuns({ dagIdPattern: dagId }, undefined, {
     enabled: Boolean(dagId),
   });
 
@@ -56,25 +59,13 @@ export const Dag = () => {
       ?.latest_dag_runs ?? [];
 
   return (
-    <OpenGroupsProvider dagId={dagId ?? ""}>
-      <Box>
-        <Button asChild colorPalette="blue" variant="ghost">
-          <RouterLink to="/dags">
-            <FiChevronsLeft />
-            Back to all dags
-          </RouterLink>
-        </Button>
-        <Header dag={dag} dagId={dagId} latestRun={runs[0]} />
-        <ErrorAlert error={error ?? runsError} />
-        <ProgressBar
-          size="xs"
-          visibility={isLoading || isLoadingRuns ? "visible" : "hidden"}
-        />
-        <DagTabs dag={dag} />
-      </Box>
-      <Box overflow="auto">
-        <Outlet />
-      </Box>
-    </OpenGroupsProvider>
+    <DetailsLayout
+      dag={dag}
+      error={error ?? runsError}
+      isLoading={isLoading || isLoadingRuns}
+      tabs={tabs}
+    >
+      <Header dag={dag} dagId={dagId} latestRun={runs[0]} />
+    </DetailsLayout>
   );
 };
diff --git a/airflow/ui/src/pages/DagsList/Dag/Grid/Grid.tsx b/airflow/ui/src/pages/DagsList/Dag/Grid/Grid.tsx
new file mode 100644
index 0000000000000..9d4b4bb9402fb
--- /dev/null
+++ b/airflow/ui/src/pages/DagsList/Dag/Grid/Grid.tsx
@@ -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 { Box } from "@chakra-ui/react";
+
+export const Grid = () => {
+  console.log("grid");
+
+  return <Box>grid</Box>;
+};
diff --git a/airflow/ui/src/pages/DagsList/Dag/Grid/index.ts b/airflow/ui/src/pages/DagsList/Dag/Grid/index.ts
new file mode 100644
index 0000000000000..dccae200d1c23
--- /dev/null
+++ b/airflow/ui/src/pages/DagsList/Dag/Grid/index.ts
@@ -0,0 +1,20 @@
+/*!
+ * 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 "./Grid";
diff --git a/airflow/ui/src/pages/DagsList/Dag/Tabs.tsx b/airflow/ui/src/pages/DagsList/Dag/Tabs.tsx
deleted file mode 100644
index 9473b210e991a..0000000000000
--- a/airflow/ui/src/pages/DagsList/Dag/Tabs.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/*!
- * 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 { Button } from "@chakra-ui/react";
-import { useSearchParams } from "react-router-dom";
-
-import type { DAGResponse } from "openapi/requests/types.gen";
-import { DagIcon } from "src/assets/DagIcon";
-import { DagVizModal } from "src/components/DagVizModal";
-import { NavTabs } from "src/components/NavTabs";
-
-const tabs = [
-  { label: "Overview", value: "" },
-  { label: "Runs", value: "runs" },
-  { label: "Tasks", value: "tasks" },
-  { label: "Events", value: "events" },
-  { label: "Code", value: "code" },
-];
-
-const MODAL = "modal";
-
-export const DagTabs = ({ dag }: { readonly dag?: DAGResponse }) => {
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const modal = searchParams.get(MODAL);
-
-  const isGraphOpen = modal === "graph";
-  const onClose = () => {
-    searchParams.delete(MODAL);
-    setSearchParams(searchParams);
-  };
-
-  const onOpen = () => {
-    searchParams.set(MODAL, "graph");
-    setSearchParams(searchParams);
-  };
-
-  return (
-    <>
-      <NavTabs
-        rightButtons={
-          <Button colorPalette="blue" onClick={onOpen} variant="ghost">
-            <DagIcon height={5} width={5} />
-            Graph
-          </Button>
-        }
-        tabs={tabs}
-      />
-      <DagVizModal
-        dagDisplayName={dag?.dag_display_name}
-        dagId={dag?.dag_id}
-        onClose={onClose}
-        open={isGraphOpen}
-      />
-    </>
-  );
-};
diff --git a/airflow/ui/src/pages/DagsList/Run/Header.tsx b/airflow/ui/src/pages/DagsList/Run/Header.tsx
index 7b1c8798c4960..eeab7e73efa3f 100644
--- a/airflow/ui/src/pages/DagsList/Run/Header.tsx
+++ b/airflow/ui/src/pages/DagsList/Run/Header.tsx
@@ -28,50 +28,48 @@ import Time from "src/components/Time";
 import { Status } from "src/components/ui";
 
 export const Header = ({ dagRun }: { readonly dagRun: DAGRunResponse }) => (
-  <Box borderColor="border" borderRadius={8} borderWidth={1}>
-    <Box p={2}>
-      <Flex alignItems="center" justifyContent="space-between" mb={2}>
-        <HStack alignItems="center" gap={2}>
-          <FiBarChart size="1.75rem" />
-          <Heading size="lg">
-            <strong>Run: </strong>
-            {dagRun.dag_run_id}
-          </Heading>
-          <Status state={dagRun.state}>{dagRun.state}</Status>
-          <Flex>
-            <div />
-          </Flex>
-        </HStack>
-      </Flex>
-      {dagRun.note === null || dagRun.note.length === 0 ? undefined : (
-        <Flex alignItems="flex-start" justifyContent="space-between" mr={16}>
-          <MdOutlineModeComment size="3rem" />
-          <Text fontSize="sm" ml={3}>
-            {dagRun.note}
-          </Text>
+  <Box borderColor="border" borderRadius={8} borderWidth={1} p={2}>
+    <Flex alignItems="center" justifyContent="space-between" mb={2}>
+      <HStack alignItems="center" gap={2}>
+        <FiBarChart size="1.75rem" />
+        <Heading size="lg">
+          <strong>Run: </strong>
+          {dagRun.dag_run_id}
+        </Heading>
+        <Status state={dagRun.state}>{dagRun.state}</Status>
+        <Flex>
+          <div />
         </Flex>
-      )}
-      <SimpleGrid columns={4} gap={4}>
-        <Stat label="Run Type">
-          <HStack>
-            <RunTypeIcon runType={dagRun.run_type} />
-            <Text>{dagRun.run_type}</Text>
-          </HStack>
-        </Stat>
-        <Stat label="Start">
-          <Time datetime={dagRun.start_date} />
-        </Stat>
-        <Stat label="End">
-          <Time datetime={dagRun.end_date} />
-        </Stat>
-        <Stat label="Duration">
-          {dayjs
-            .duration(dayjs(dagRun.end_date).diff(dagRun.start_date))
-            .asSeconds()
-            .toFixed(2)}
-          s
-        </Stat>
-      </SimpleGrid>
-    </Box>
+      </HStack>
+    </Flex>
+    {dagRun.note === null || dagRun.note.length === 0 ? undefined : (
+      <Flex alignItems="flex-start" justifyContent="space-between" mr={16}>
+        <MdOutlineModeComment size="3rem" />
+        <Text fontSize="sm" ml={3}>
+          {dagRun.note}
+        </Text>
+      </Flex>
+    )}
+    <SimpleGrid columns={4} gap={4}>
+      <Stat label="Run Type">
+        <HStack>
+          <RunTypeIcon runType={dagRun.run_type} />
+          <Text>{dagRun.run_type}</Text>
+        </HStack>
+      </Stat>
+      <Stat label="Start">
+        <Time datetime={dagRun.start_date} />
+      </Stat>
+      <Stat label="End">
+        <Time datetime={dagRun.end_date} />
+      </Stat>
+      <Stat label="Duration">
+        {dayjs
+          .duration(dayjs(dagRun.end_date).diff(dagRun.start_date))
+          .asSeconds()
+          .toFixed(2)}
+        s
+      </Stat>
+    </SimpleGrid>
   </Box>
 );
diff --git a/airflow/ui/src/pages/DagsList/Run/Run.tsx b/airflow/ui/src/pages/DagsList/Run/Run.tsx
index 5eb4034b4afad..cdc6b494a9bd8 100644
--- a/airflow/ui/src/pages/DagsList/Run/Run.tsx
+++ b/airflow/ui/src/pages/DagsList/Run/Run.tsx
@@ -16,32 +16,27 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box } from "@chakra-ui/react";
 import { LiaSlashSolid } from "react-icons/lia";
-import { useParams, Link as RouterLink, Outlet } from "react-router-dom";
+import { useParams, Link as RouterLink } from "react-router-dom";
 
 import {
   useDagRunServiceGetDagRun,
   useDagServiceGetDagDetails,
 } from "openapi/queries";
-import { ErrorAlert } from "src/components/ErrorAlert";
-import { Breadcrumb, ProgressBar } from "src/components/ui";
-import { OpenGroupsProvider } from "src/context/openGroups";
+import { Breadcrumb } from "src/components/ui";
+import { DetailsLayout } from "src/layouts/Details/DetailsLayout";
 
 import { Header } from "./Header";
-import { RunTabs } from "./Tabs";
+
+const tabs = [
+  { label: "Task Instances", value: "" },
+  { label: "Events", value: "events" },
+  { label: "Code", value: "code" },
+];
 
 export const Run = () => {
   const { dagId = "", runId = "" } = useParams();
 
-  const {
-    data: dag,
-    error: dagError,
-    isLoading: isLoadingDag,
-  } = useDagServiceGetDagDetails({
-    dagId,
-  });
-
   const {
     data: dagRun,
     error,
@@ -51,29 +46,31 @@ export const Run = () => {
     dagRunId: runId,
   });
 
+  const {
+    data: dag,
+    error: dagError,
+    isLoading: isLoadinDag,
+  } = useDagServiceGetDagDetails({
+    dagId,
+  });
+
   return (
-    <OpenGroupsProvider dagId={dagId}>
-      <Box>
-        <Breadcrumb.Root mb={3} separator={<LiaSlashSolid />}>
-          <Breadcrumb.Link asChild color="fg.info">
-            <RouterLink to="/dags">Dags</RouterLink>
-          </Breadcrumb.Link>
-          <Breadcrumb.Link asChild color="fg.info">
-            <RouterLink to={`/dags/${dagId}`}>{dagId}</RouterLink>
-          </Breadcrumb.Link>
-          <Breadcrumb.CurrentLink>{runId}</Breadcrumb.CurrentLink>
-        </Breadcrumb.Root>
-        {dagRun === undefined ? undefined : <Header dagRun={dagRun} />}
-        <ErrorAlert error={error ?? dagError} />
-        <ProgressBar
-          size="xs"
-          visibility={isLoading || isLoadingDag ? "visible" : "hidden"}
-        />
-        <RunTabs dag={dag} />
-      </Box>
-      <Box overflow="auto">
-        <Outlet />
-      </Box>
-    </OpenGroupsProvider>
+    <DetailsLayout
+      dag={dag}
+      error={error ?? dagError}
+      isLoading={isLoading || isLoadinDag}
+      tabs={tabs}
+    >
+      <Breadcrumb.Root mb={3} separator={<LiaSlashSolid />}>
+        <Breadcrumb.Link asChild color="fg.info">
+          <RouterLink to="/dags">Dags</RouterLink>
+        </Breadcrumb.Link>
+        <Breadcrumb.Link asChild color="fg.info">
+          <RouterLink to={`/dags/${dagId}`}>{dagId}</RouterLink>
+        </Breadcrumb.Link>
+        <Breadcrumb.CurrentLink>{runId}</Breadcrumb.CurrentLink>
+      </Breadcrumb.Root>
+      {dagRun === undefined ? undefined : <Header dagRun={dagRun} />}
+    </DetailsLayout>
   );
 };
diff --git a/airflow/ui/src/pages/DagsList/Run/Tabs.tsx b/airflow/ui/src/pages/DagsList/Run/Tabs.tsx
deleted file mode 100644
index d636a45190fd2..0000000000000
--- a/airflow/ui/src/pages/DagsList/Run/Tabs.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-/*!
- * 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 { Button } from "@chakra-ui/react";
-import { useSearchParams } from "react-router-dom";
-
-import type { DAGResponse } from "openapi/requests/types.gen";
-import { DagIcon } from "src/assets/DagIcon";
-import { DagVizModal } from "src/components/DagVizModal";
-import { NavTabs } from "src/components/NavTabs";
-
-const tabs = [
-  { label: "Task Instances", value: "" },
-  { label: "Events", value: "events" },
-  { label: "Code", value: "code" },
-];
-
-const MODAL = "modal";
-
-export const RunTabs = ({ dag }: { readonly dag?: DAGResponse }) => {
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const modal = searchParams.get(MODAL);
-
-  const isGraphOpen = modal === "graph";
-  const onClose = () => {
-    searchParams.delete(MODAL);
-    setSearchParams(searchParams);
-  };
-
-  const onOpen = () => {
-    searchParams.set(MODAL, "graph");
-    setSearchParams(searchParams);
-  };
-
-  return (
-    <>
-      <NavTabs
-        rightButtons={
-          <Button colorPalette="blue" onClick={onOpen} variant="ghost">
-            <DagIcon height={5} width={5} />
-            Graph
-          </Button>
-        }
-        tabs={tabs}
-      />
-      <DagVizModal
-        dagDisplayName={dag?.dag_display_name}
-        dagId={dag?.dag_id}
-        onClose={onClose}
-        open={isGraphOpen}
-      />
-    </>
-  );
-};
diff --git a/airflow/ui/src/pages/DagsList/TaskInstance/Header.tsx b/airflow/ui/src/pages/DagsList/TaskInstance/Header.tsx
index 2d578f19c9c88..ada029a85a9d6 100644
--- a/airflow/ui/src/pages/DagsList/TaskInstance/Header.tsx
+++ b/airflow/ui/src/pages/DagsList/TaskInstance/Header.tsx
@@ -30,57 +30,53 @@ export const Header = ({
 }: {
   readonly taskInstance: TaskInstanceResponse;
 }) => (
-  <Box borderColor="border" borderRadius={8} borderWidth={1}>
-    <Box p={2}>
-      <Flex alignItems="center" justifyContent="space-between" mb={2}>
-        <HStack alignItems="center" gap={2}>
-          <MdOutlineTask size="1.75rem" />
-          <Heading size="lg">
-            <strong>Task Instance: </strong>
-            {taskInstance.task_display_name}{" "}
-            <Time datetime={taskInstance.start_date} />
-          </Heading>
-          <Status state={taskInstance.state ?? undefined}>
-            {taskInstance.state}
-          </Status>
-          <Flex>
-            <div />
-          </Flex>
-        </HStack>
-      </Flex>
-      {taskInstance.note === null ||
-      taskInstance.note.length === 0 ? undefined : (
-        <Flex alignItems="flex-start" justifyContent="space-between" mr={16}>
-          <MdOutlineModeComment size="3rem" />
-          <Text fontSize="sm" ml={3}>
-            {taskInstance.note}
-          </Text>
-        </Flex>
-      )}
-      <SimpleGrid columns={4} gap={4} my={2}>
-        <Stat label="Operator">{taskInstance.operator}</Stat>
-        {taskInstance.map_index > -1 ? (
-          <Stat label="Map Index">{taskInstance.map_index}</Stat>
-        ) : undefined}
-        {taskInstance.try_number > 1 ? (
-          <Stat label="Try Number">{taskInstance.try_number}</Stat>
-        ) : undefined}
-        <Stat label="Start">
+  <Box borderColor="border" borderRadius={8} borderWidth={1} p={2}>
+    <Flex alignItems="center" justifyContent="space-between" mb={2}>
+      <HStack alignItems="center" gap={2}>
+        <MdOutlineTask size="1.75rem" />
+        <Heading size="lg">
+          <strong>Task Instance: </strong>
+          {taskInstance.task_display_name}{" "}
           <Time datetime={taskInstance.start_date} />
-        </Stat>
-        <Stat label="End">
-          <Time datetime={taskInstance.end_date} />
-        </Stat>
-        <Stat label="Duration">
-          {dayjs
-            .duration(
-              dayjs(taskInstance.end_date).diff(taskInstance.start_date),
-            )
-            .asSeconds()
-            .toFixed(2)}
-          s
-        </Stat>
-      </SimpleGrid>
-    </Box>
+        </Heading>
+        <Status state={taskInstance.state ?? undefined}>
+          {taskInstance.state}
+        </Status>
+        <Flex>
+          <div />
+        </Flex>
+      </HStack>
+    </Flex>
+    {taskInstance.note === null ||
+    taskInstance.note.length === 0 ? undefined : (
+      <Flex alignItems="flex-start" justifyContent="space-between" mr={16}>
+        <MdOutlineModeComment size="3rem" />
+        <Text fontSize="sm" ml={3}>
+          {taskInstance.note}
+        </Text>
+      </Flex>
+    )}
+    <SimpleGrid columns={4} gap={4} my={2}>
+      <Stat label="Operator">{taskInstance.operator}</Stat>
+      {taskInstance.map_index > -1 ? (
+        <Stat label="Map Index">{taskInstance.map_index}</Stat>
+      ) : undefined}
+      {taskInstance.try_number > 1 ? (
+        <Stat label="Try Number">{taskInstance.try_number}</Stat>
+      ) : undefined}
+      <Stat label="Start">
+        <Time datetime={taskInstance.start_date} />
+      </Stat>
+      <Stat label="End">
+        <Time datetime={taskInstance.end_date} />
+      </Stat>
+      <Stat label="Duration">
+        {dayjs
+          .duration(dayjs(taskInstance.end_date).diff(taskInstance.start_date))
+          .asSeconds()
+          .toFixed(2)}
+        s
+      </Stat>
+    </SimpleGrid>
   </Box>
 );
diff --git a/airflow/ui/src/pages/DagsList/TaskInstance/Tabs.tsx b/airflow/ui/src/pages/DagsList/TaskInstance/Tabs.tsx
deleted file mode 100644
index 226214d722a60..0000000000000
--- a/airflow/ui/src/pages/DagsList/TaskInstance/Tabs.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/*!
- * 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 { Button } from "@chakra-ui/react";
-import { useSearchParams } from "react-router-dom";
-
-import type { DAGResponse } from "openapi/requests/types.gen";
-import { DagIcon } from "src/assets/DagIcon";
-import { DagVizModal } from "src/components/DagVizModal";
-import { NavTabs } from "src/components/NavTabs";
-
-const tabs = [
-  { label: "Logs", value: "" },
-  { label: "Events", value: "events" },
-  { label: "XCom", value: "xcom" },
-  { label: "Code", value: "code" },
-  { label: "Details", value: "details" },
-];
-
-const MODAL = "modal";
-
-export const TaskInstanceTabs = ({ dag }: { readonly dag?: DAGResponse }) => {
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const modal = searchParams.get(MODAL);
-
-  const isGraphOpen = modal === "graph";
-  const onClose = () => {
-    searchParams.delete(MODAL);
-    setSearchParams(searchParams);
-  };
-
-  const onOpen = () => {
-    searchParams.set(MODAL, "graph");
-    setSearchParams(searchParams);
-  };
-
-  return (
-    <>
-      <NavTabs
-        rightButtons={
-          <Button colorPalette="blue" onClick={onOpen} variant="ghost">
-            <DagIcon height={5} width={5} />
-            Graph
-          </Button>
-        }
-        tabs={tabs}
-      />
-      <DagVizModal
-        dagDisplayName={dag?.dag_display_name}
-        dagId={dag?.dag_id}
-        onClose={onClose}
-        open={isGraphOpen}
-      />
-    </>
-  );
-};
diff --git a/airflow/ui/src/pages/DagsList/TaskInstance/TaskInstance.tsx b/airflow/ui/src/pages/DagsList/TaskInstance/TaskInstance.tsx
index f105d969c075e..bdaa4a4d95e7c 100644
--- a/airflow/ui/src/pages/DagsList/TaskInstance/TaskInstance.tsx
+++ b/airflow/ui/src/pages/DagsList/TaskInstance/TaskInstance.tsx
@@ -16,35 +16,54 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box } from "@chakra-ui/react";
 import { LiaSlashSolid } from "react-icons/lia";
-import { useParams, Link as RouterLink, Outlet } from "react-router-dom";
+import { useParams, Link as RouterLink } from "react-router-dom";
 
 import {
   useDagServiceGetDagDetails,
   useTaskInstanceServiceGetTaskInstance,
 } from "openapi/queries";
 import { Breadcrumb } from "src/components/ui";
-import { OpenGroupsProvider } from "src/context/openGroups";
+import { DetailsLayout } from "src/layouts/Details/DetailsLayout";
 
 import { Header } from "./Header";
-import { TaskInstanceTabs } from "./Tabs";
+
+const tabs = [
+  { label: "Logs", value: "" },
+  { label: "Events", value: "events" },
+  { label: "XCom", value: "xcom" },
+  { label: "Code", value: "code" },
+  { label: "Details", value: "details" },
+];
 
 export const TaskInstance = () => {
   const { dagId = "", runId = "", taskId = "" } = useParams();
 
-  const { data: dag } = useDagServiceGetDagDetails({
+  const {
+    data: taskInstance,
+    error,
+    isLoading,
+  } = useTaskInstanceServiceGetTaskInstance({
     dagId,
+    dagRunId: runId,
+    taskId,
   });
 
-  const { data: taskInstance } = useTaskInstanceServiceGetTaskInstance({
+  const {
+    data: dag,
+    error: dagError,
+    isLoading: isDagLoading,
+  } = useDagServiceGetDagDetails({
     dagId,
-    dagRunId: runId,
-    taskId,
   });
 
   return (
-    <OpenGroupsProvider dagId={dagId}>
+    <DetailsLayout
+      dag={dag}
+      error={error ?? dagError}
+      isLoading={isLoading || isDagLoading}
+      tabs={tabs}
+    >
       <Breadcrumb.Root mb={3} separator={<LiaSlashSolid />}>
         <Breadcrumb.Link asChild color="fg.info">
           <RouterLink to="/dags">Dags</RouterLink>
@@ -60,10 +79,6 @@ export const TaskInstance = () => {
       {taskInstance === undefined ? undefined : (
         <Header taskInstance={taskInstance} />
       )}
-      <TaskInstanceTabs dag={dag} />
-      <Box overflow="auto">
-        <Outlet />
-      </Box>
-    </OpenGroupsProvider>
+    </DetailsLayout>
   );
 };