Add Asset Details page with events and graph (#47162)

* Initialize Asset Details page with events and graph

* Fix AssetNode icon

* Load backup info when Dag Details are still loading

Author: bbovenzi

airflow/ui/src/components/BreadcrumbStats.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 { HStack, Stat } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+import { LiaSlashSolid } from "react-icons/lia";
+import { Link as RouterLink } from "react-router-dom";
+
+import { Breadcrumb } from "src/components/ui";
+
+type Links = Array<{ label: ReactNode | string; labelExtra?: ReactNode; title?: string; value?: string }>;
+
+export const BreadcrumbStats = ({ links }: { readonly links: Links }) => (
+  <Breadcrumb.Root 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>
+              <HStack>{link.label}</HStack>
+            </Breadcrumb.CurrentLink>
+          ) : (
+            <Breadcrumb.Link asChild color="fg.info">
+              <HStack>
+                {link.labelExtra}
+                <RouterLink to={link.value ?? ""}>{link.label}</RouterLink>
+              </HStack>
+            </Breadcrumb.Link>
+          )}
+        </Stat.ValueText>
+      </Stat.Root>
+    ))}
+  </Breadcrumb.Root>
+);

airflow/ui/src/components/Graph/AssetNode.tsx

@@ -0,0 +1,50 @@
+/*!
+ * 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 { Flex, Heading, HStack } from "@chakra-ui/react";
+import type { NodeProps, Node as NodeType } from "@xyflow/react";
+import { FiDatabase } from "react-icons/fi";
+
+import { NodeWrapper } from "./NodeWrapper";
+import type { CustomNodeProps } from "./reactflowUtils";
+
+export const AssetNode = ({
+  data: { height, isSelected, label, width },
+}: NodeProps<NodeType<CustomNodeProps, "asset">>) => (
+  <NodeWrapper>
+    <Flex
+      bg="bg"
+      borderColor={isSelected ? "border.inverted" : "border"}
+      borderRadius={5}
+      borderWidth={isSelected ? 6 : 2}
+      cursor="default"
+      flexDirection="column"
+      height={`${height}px`}
+      px={3}
+      py={isSelected ? 0 : 1}
+      width={`${width}px`}
+    >
+      <HStack>
+        <Heading ml={-2} size="sm">
+          <FiDatabase />
+        </Heading>
+        {label}
+      </HStack>
+    </Flex>
+  </NodeWrapper>
+);

airflow/ui/src/components/Graph/DagNode.tsx

@@ -0,0 +1,62 @@
+/*!
+ * 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 { Flex, HStack, Link } from "@chakra-ui/react";
+import type { NodeProps, Node as NodeType } from "@xyflow/react";
+import { Link as RouterLink } from "react-router-dom";
+
+import { useDagServiceGetDag } from "openapi/queries";
+import { DagIcon } from "src/assets/DagIcon";
+import { TogglePause } from "src/components/TogglePause";
+
+import { NodeWrapper } from "./NodeWrapper";
+import type { CustomNodeProps } from "./reactflowUtils";
+
+export const DagNode = ({
+  data: { height, isSelected, label, width },
+}: NodeProps<NodeType<CustomNodeProps, "dag">>) => {
+  const { data: dag } = useDagServiceGetDag({ dagId: label });
+
+  return (
+    <NodeWrapper>
+      <Flex
+        bg="bg"
+        borderRadius={5}
+        borderWidth={isSelected ? 6 : 2}
+        cursor="default"
+        flexDirection="column"
+        height={`${height}px`}
+        px={3}
+        py={isSelected ? 0 : 1}
+        width={`${width}px`}
+      >
+        <HStack alignItems="center" gap={1}>
+          <DagIcon />
+          <Link asChild color="fg.info" mb={2}>
+            <RouterLink to={`/dags/${dag?.dag_id}`}>{dag?.dag_display_name ?? label}</RouterLink>
+          </Link>
+        </HStack>
+        <TogglePause
+          dagId={dag?.dag_id ?? label}
+          disabled={!Boolean(dag)}
+          isPaused={dag?.is_paused ?? false}
+        />
+      </Flex>
+    </NodeWrapper>
+  );
+};