Move asset events to its own tab (#51625) (#51655)

* Move asset events to its own tab

* Address PR comments

(cherry picked from commit e8505aa)

Author: pierrejeambrun

airflow-core/src/airflow/ui/src/pages/Run/AssetEvents.tsx

@@ -0,0 +1,45 @@
+/*!
+ * 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 { useParams } from "react-router-dom";
+
+import { useDagRunServiceGetDagRun, useDagRunServiceGetUpstreamAssetEvents } from "openapi/queries";
+import { AssetEvents as AssetEventsTable } from "src/components/Assets/AssetEvents";
+import { isStatePending, useAutoRefresh } from "src/utils";
+
+export const AssetEvents = () => {
+  const { dagId = "", runId = "" } = useParams();
+
+  const refetchInterval = useAutoRefresh({ dagId });
+
+  const { data: dagRun } = useDagRunServiceGetDagRun(
+    {
+      dagId,
+      dagRunId: runId,
+    },
+    undefined,
+    { refetchInterval: (query) => (isStatePending(query.state.data?.state) ? refetchInterval : false) },
+  );
+
+  const { data, isLoading } = useDagRunServiceGetUpstreamAssetEvents({ dagId, dagRunId: runId }, undefined, {
+    enabled: dagRun?.run_type === "asset_triggered",
+    refetchInterval: () => (isStatePending(dagRun?.state) ? refetchInterval : false),
+  });
+
+  return <AssetEventsTable data={data} isLoading={isLoading} title="Source Asset Event" />;
+};

airflow-core/src/airflow/ui/src/pages/Run/Details.tsx

@@ -19,8 +19,7 @@
 import { Box, Flex, HStack, StackSeparator, Table, Text, VStack } from "@chakra-ui/react";
 import { useParams } from "react-router-dom";
 
-import { useDagRunServiceGetDagRun, useDagRunServiceGetUpstreamAssetEvents } from "openapi/queries";
-import { AssetEvents } from "src/components/Assets/AssetEvents";
+import { useDagRunServiceGetDagRun } from "openapi/queries";
 import { DagVersionDetails } from "src/components/DagVersionDetails";
 import RenderedJsonField from "src/components/RenderedJsonField";
 import { RunTypeIcon } from "src/components/RunTypeIcon";
@@ -43,17 +42,9 @@ export const Details = () => {
     { refetchInterval: (query) => (isStatePending(query.state.data?.state) ? refetchInterval : false) },
   );
 
-  const { data, isLoading } = useDagRunServiceGetUpstreamAssetEvents({ dagId, dagRunId: runId }, undefined, {
-    enabled: dagRun?.run_type === "asset_triggered",
-    refetchInterval: () => (isStatePending(dagRun?.state) ? refetchInterval : false),
-  });
-
   // TODO : Render DagRun configuration object
   return (
     <Box p={2}>
-      {data === undefined || dagRun?.run_type !== "asset_triggered" ? undefined : (
-        <AssetEvents data={data} isLoading={isLoading} title="Source Asset Event" />
-      )}
       {dagRun === undefined ? (
         <div />
       ) : (

airflow-core/src/airflow/ui/src/pages/Run/Run.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { ReactFlowProvider } from "@xyflow/react";
-import { FiCode } from "react-icons/fi";
+import { FiCode, FiDatabase } from "react-icons/fi";
 import { MdDetails, MdOutlineEventNote, MdOutlineTask } from "react-icons/md";
 import { useParams } from "react-router-dom";
 
@@ -29,9 +29,10 @@ import { Header } from "./Header";
 
 const tabs = [
   { icon: <MdOutlineTask />, label: "Task Instances", value: "" },
-  { icon: <MdOutlineEventNote />, label: "Events", value: "events" },
+  { icon: <MdOutlineEventNote />, label: "Audit Logs", value: "events" },
   { icon: <FiCode />, label: "Code", value: "code" },
   { icon: <MdDetails />, label: "Details", value: "details" },
+  { icon: <FiDatabase />, label: "Asset Events", value: "asset_events" },
 ];
 
 export const Run = () => {

airflow-core/src/airflow/ui/src/pages/Task/Task.tsx

@@ -29,7 +29,7 @@ import { Header } from "./Header";
 const tabs = [
   { icon: <LuChartColumn />, label: "Overview", value: "" },
   { icon: <MdOutlineTask />, label: "Task Instances", value: "task_instances" },
-  { icon: <MdOutlineEventNote />, label: "Events", value: "events" },
+  { icon: <MdOutlineEventNote />, label: "Audit Logs", value: "events" },
 ];
 
 export const Task = () => {

airflow-core/src/airflow/ui/src/pages/TaskInstance/AssetEvents.tsx

@@ -0,0 +1,51 @@
+/*!
+ * 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 { useParams } from "react-router-dom";
+
+import { useAssetServiceGetAssetEvents, useTaskInstanceServiceGetMappedTaskInstance } from "openapi/queries";
+import { AssetEvents as AssetEventsTable } from "src/components/Assets/AssetEvents";
+import { isStatePending, useAutoRefresh } from "src/utils";
+
+export const AssetEvents = () => {
+  const { dagId = "", mapIndex = "-1", runId = "", taskId = "" } = useParams();
+
+  const { data: taskInstance } = useTaskInstanceServiceGetMappedTaskInstance({
+    dagId,
+    dagRunId: runId,
+    mapIndex: parseInt(mapIndex, 10),
+    taskId,
+  });
+
+  const refetchInterval = useAutoRefresh({ dagId });
+
+  const { data: assetEventsData, isLoading } = useAssetServiceGetAssetEvents(
+    {
+      sourceDagId: dagId,
+      sourceMapIndex: parseInt(mapIndex, 10),
+      sourceRunId: runId,
+      sourceTaskId: taskId,
+    },
+    undefined,
+    {
+      refetchInterval: () => (isStatePending(taskInstance?.state) ? refetchInterval : false),
+    },
+  );
+
+  return <AssetEventsTable data={assetEventsData} isLoading={isLoading} title="Created Asset Event" />;
+};

airflow-core/src/airflow/ui/src/pages/TaskInstance/Details.tsx

@@ -20,11 +20,9 @@ import { Box, Flex, HStack, Table, Heading } from "@chakra-ui/react";
 import { useParams, useSearchParams } from "react-router-dom";
 
 import {
-  useAssetServiceGetAssetEvents,
   useTaskInstanceServiceGetMappedTaskInstance,
   useTaskInstanceServiceGetTaskInstanceTryDetails,
 } from "openapi/queries";
-import { AssetEvents } from "src/components/Assets/AssetEvents";
 import { DagVersionDetails } from "src/components/DagVersionDetails";
 import { StateBadge } from "src/components/StateBadge";
 import { TaskTrySelect } from "src/components/TaskTrySelect";
@@ -76,24 +74,8 @@ export const Details = () => {
     },
   );
 
-  const { data: assetEventsData, isLoading: isLoadingAssetEvents } = useAssetServiceGetAssetEvents(
-    {
-      sourceDagId: dagId,
-      sourceMapIndex: parseInt(mapIndex, 10),
-      sourceRunId: runId,
-      sourceTaskId: taskId,
-    },
-    undefined,
-    {
-      refetchInterval: () => (isStatePending(taskInstance?.state) ? refetchInterval : false),
-    },
-  );
-
   return (
     <Box p={2}>
-      {assetEventsData !== undefined && assetEventsData.asset_events.length > 0 ? (
-        <AssetEvents data={assetEventsData} isLoading={isLoadingAssetEvents} title="Created Asset Event" />
-      ) : undefined}
       {taskInstance === undefined || tryNumber === undefined || taskInstance.try_number <= 1 ? (
         <div />
       ) : (

airflow-core/src/airflow/ui/src/pages/TaskInstance/TaskInstance.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { ReactFlowProvider } from "@xyflow/react";
-import { FiCode } from "react-icons/fi";
+import { FiCode, FiDatabase } from "react-icons/fi";
 import { MdDetails, MdOutlineEventNote, MdOutlineTask, MdReorder, MdSyncAlt } from "react-icons/md";
 import { PiBracketsCurlyBold } from "react-icons/pi";
 import { useParams } from "react-router-dom";
@@ -36,9 +36,10 @@ const tabs = [
   { icon: <MdReorder />, label: "Logs", value: "" },
   { icon: <PiBracketsCurlyBold />, label: "Rendered Templates", value: "rendered_templates" },
   { icon: <MdSyncAlt />, label: "XCom", value: "xcom" },
-  { icon: <MdOutlineEventNote />, label: "Events", value: "events" },
+  { icon: <MdOutlineEventNote />, label: "Audit Logs", value: "events" },
   { icon: <FiCode />, label: "Code", value: "code" },
   { icon: <MdDetails />, label: "Details", value: "details" },
+  { icon: <FiDatabase />, label: "Asset Events", value: "asset_events" },
 ];
 
 export const TaskInstance = () => {

airflow-core/src/airflow/ui/src/router.tsx

@@ -53,7 +53,9 @@ import { Variables } from "src/pages/Variables";
 import { XCom } from "src/pages/XCom";
 
 import { Configs } from "./pages/Configs";
+import { AssetEvents as DagRunAssetEvents } from "./pages/Run/AssetEvents";
 import { Security } from "./pages/Security";
+import { AssetEvents as TaskInstanceAssetEvents } from "./pages/TaskInstance/AssetEvents";
 import { client } from "./queryClient";
 
 const taskInstanceRoutes = [
@@ -64,6 +66,7 @@ const taskInstanceRoutes = [
   { element: <TaskInstanceDetails />, path: "details" },
   { element: <RenderedTemplates />, path: "rendered_templates" },
   { element: <TaskInstances />, path: "task_instances" },
+  { element: <TaskInstanceAssetEvents />, path: "asset_events" },
 ];
 
 export const routerConfig = [
@@ -156,6 +159,7 @@ export const routerConfig = [
           { element: <Events />, path: "events" },
           { element: <Code />, path: "code" },
           { element: <DagRunDetails />, path: "details" },
+          { element: <DagRunAssetEvents />, path: "asset_events" },
         ],
         element: <Run />,
         path: "dags/:dagId/runs/:runId",