Rearrange Dag details view

airflow/ui/package.json

@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@chakra-ui/anatomy": "^2.2.2",
-    "@chakra-ui/react": "^3.1.1",
+    "@chakra-ui/react": "^3.8.1",
     "@codemirror/lang-json": "^6.0.1",
     "@emotion/react": "^11.13.3",
     "@tanstack/react-query": "^5.52.1",
@@ -44,6 +44,7 @@
     "react-icons": "^5.4.0",
     "react-json-view": "^1.21.3",
     "react-markdown": "^9.0.1",
+    "react-resizable-panels": "^2.1.7",
     "react-router-dom": "^6.26.2",
     "react-syntax-highlighter": "^15.5.6",
     "remark-gfm": "^4.0.0",

airflow/ui/src/components/HeaderCard.tsx

@@ -0,0 +1,81 @@
+/*!
+ * 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, GridItem, Heading, HStack, SimpleGrid, Spinner } from "@chakra-ui/react";
+import { type ReactNode, useRef } from "react";
+
+import type { TaskInstanceState } from "openapi/requests/types.gen";
+import { Stat } from "src/components/Stat";
+import { StateBadge } from "src/components/StateBadge";
+import { useContainerWidth } from "src/utils";
+
+const getColumnCount = (width: number) => {
+  if (width < 400) {
+    return 2;
+  }
+  if (width < 800) {
+    return 4;
+  }
+  if (width < 1000) {
+    return 6;
+  }
+
+  return 8;
+};
+
+type Props = {
+  readonly actions?: ReactNode;
+  readonly icon: ReactNode;
+  readonly isRefreshing?: boolean;
+  readonly state?: TaskInstanceState | null;
+  readonly stats: Array<{ label: string; value: ReactNode | string }>;
+  readonly subTitle?: ReactNode | string;
+  readonly title: ReactNode | string;
+};
+
+export const HeaderCard = ({ actions, icon, isRefreshing, state, stats, subTitle, title }: Props) => {
+  const containerRef = useRef<HTMLDivElement>();
+  const containerWidth = useContainerWidth(containerRef);
+
+  return (
+    <Box borderColor="border" borderRadius={8} borderWidth={1} m={2} p={2} ref={containerRef}>
+      <Flex alignItems="center" flexWrap="wrap" justifyContent="space-between" mb={2}>
+        <Flex alignItems="center" flexWrap="wrap" gap={2}>
+          <Heading size="xl">{icon}</Heading>
+          <Heading size="lg">{title}</Heading>
+          <Heading size="lg">{subTitle}</Heading>
+          {state === undefined ? undefined : <StateBadge state={state}>{state}</StateBadge>}
+          {isRefreshing ? <Spinner /> : <div />}
+        </Flex>
+        <HStack gap={1}>{actions}</HStack>
+      </Flex>
+      <SimpleGrid
+        autoFlow="row dense"
+        gap={4}
+        my={2}
+        templateColumns={`repeat(${getColumnCount(containerWidth)}, 1fr)`}
+      >
+        {stats.map(({ label, value }) => (
+          <GridItem key={label}>
+            <Stat label={label}>{value}</Stat>
+          </GridItem>
+        ))}
+      </SimpleGrid>
+    </Box>
+  );
+};

airflow/ui/src/components/Stat.tsx

@@ -16,15 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Heading, VStack } from "@chakra-ui/react";
-import type { PropsWithChildren } from "react";
+import { Heading, type StackProps, VStack } from "@chakra-ui/react";
+import type { ReactNode } from "react";
 
 type Props = {
-  readonly label: string;
-} & PropsWithChildren;
+  readonly label: ReactNode | string;
+} & StackProps;
 
-export const Stat = ({ children, label }: Props) => (
-  <VStack align="flex-start" gap={1}>
+export const Stat = ({ children, label, ...rest }: Props) => (
+  <VStack align="flex-start" gap={1} {...rest}>
     <Heading color="fg.muted" fontSize="xs">
       {label}
     </Heading>

airflow/ui/src/components/TruncatedText.tsx

@@ -0,0 +1,33 @@
+/*!
+ * 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 { Text, type TextProps } from "@chakra-ui/react";
+
+type Props = {
+  readonly text: string;
+} & TextProps;
+
+export const TruncatedText = ({ text, ...rest }: Props) => {
+  const truncatedText = text.length <= 25 ? text : `…${text.slice(-22)}`;
+
+  return (
+    <Text title={text} {...rest}>
+      {truncatedText}
+    </Text>
+  );
+};

airflow/ui/src/layouts/BaseLayout.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Flex } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 import { useEffect, type PropsWithChildren } from "react";
 import { Outlet, useSearchParams } from "react-router-dom";
 import { useLocalStorage } from "usehooks-ts";
@@ -56,9 +56,9 @@ export const BaseLayout = ({ children }: PropsWithChildren) => {
   return (
     <>
       <Nav />
-      <Flex flexFlow="column" height="100%" ml={20} p={3}>
+      <Box display="flex" flexDirection="column" h="100vh" ml={20} p={3}>
         {children ?? <Outlet />}
-      </Flex>
+      </Box>
     </>
   );
 };

airflow/ui/src/layouts/Details/DagBreadcrumb.tsx

@@ -0,0 +1,143 @@
+/*!
+ * 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 { HStack, Stat } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+import { LiaSlashSolid } from "react-icons/lia";
+import { Link as RouterLink, useParams, useSearchParams } from "react-router-dom";
+
+import {
+  useDagRunServiceGetDagRun,
+  useDagServiceGetDagDetails,
+  useTaskInstanceServiceGetMappedTaskInstance,
+  useTaskServiceGetTask,
+} from "openapi/queries";
+import { StateBadge } from "src/components/StateBadge";
+import Time from "src/components/Time";
+import { TogglePause } from "src/components/TogglePause";
+import { Breadcrumb } from "src/components/ui";
+
+export const DagBreadcrumb = () => {
+  const { dagId = "", runId, taskId } = useParams();
+
+  const [searchParams] = useSearchParams();
+  const mapIndexParam = searchParams.get("map_index");
+  const mapIndex = parseInt(mapIndexParam ?? "-1", 10);
+
+  const { data: dag } = useDagServiceGetDagDetails({
+    dagId,
+  });
+
+  const { data: dagRun } = useDagRunServiceGetDagRun(
+    {
+      dagId,
+      dagRunId: runId ?? "",
+    },
+    undefined,
+    {
+      enabled: Boolean(runId),
+    },
+  );
+
+  const { data: task } = useTaskServiceGetTask({ dagId, taskId }, undefined, { enabled: Boolean(taskId) });
+
+  const { data: taskInstance } = useTaskInstanceServiceGetMappedTaskInstance(
+    {
+      dagId,
+      dagRunId: runId ?? "",
+      mapIndex,
+      taskId: taskId ?? "",
+    },
+    undefined,
+    {
+      enabled: Boolean(runId) && Boolean(taskId),
+    },
+  );
+
+  const links: Array<{ label: ReactNode | string; title?: string; value?: string }> = [
+    { label: "Dags", value: "/dags" },
+    {
+      label: (
+        <HStack>
+          <TogglePause
+            dagDisplayName={dag?.dag_display_name}
+            dagId={dagId}
+            isPaused={Boolean(dag?.is_paused)}
+            skipConfirm
+          />
+          {dag?.dag_display_name ?? dagId}
+        </HStack>
+      ),
+      title: "Dag",
+      value: `/dags/${dagId}`,
+    },
+  ];
+
+  // Add dag run breadcrumb
+  if (runId !== undefined) {
+    links.push({
+      label:
+        dagRun === undefined ? (
+          runId
+        ) : (
+          <HStack>
+            <StateBadge fontSize="xs" state={dagRun.state} />
+            <Time datetime={dagRun.run_after} />
+          </HStack>
+        ),
+      title: "Dag Run",
+      value: `/dags/${dagId}/runs/${runId}`,
+    });
+  }
+
+  // Add task breadcrumb
+  if (runId !== undefined && taskId !== undefined) {
+    links.push({ label: taskInstance?.task_display_name ?? taskId, title: "Task" });
+  }
+
+  if (runId === undefined && taskId !== undefined) {
+    links.push({ label: "All Runs", title: "Dag Run", value: `/dags/${dagId}/runs/` });
+    links.push({ label: task?.task_display_name ?? taskId, title: "Task" });
+  }
+
+  if (mapIndexParam !== null) {
+    links.push({ label: mapIndexParam, title: "Map Index" });
+  }
+
+  return (
+    <Breadcrumb.Root mb={1} separator={<LiaSlashSolid />}>
+      {links.map((link, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <Stat.Root gap={0} key={`${link.title}-${index}`}>
+          <Stat.Label fontSize="xs" fontWeight="bold">
+            {link.title}
+          </Stat.Label>
+          <Stat.ValueText fontSize="sm" fontWeight="normal">
+            {index === links.length - 1 ? (
+              <Breadcrumb.CurrentLink>{link.label}</Breadcrumb.CurrentLink>
+            ) : (
+              <Breadcrumb.Link asChild color="fg.info">
+                <RouterLink to={link.value ?? ""}>{link.label}</RouterLink>
+              </Breadcrumb.Link>
+            )}
+          </Stat.ValueText>
+        </Stat.Root>
+      ))}
+    </Breadcrumb.Root>
+  );
+};