AIP-68 - Add iframe plugins as tabs on dag pages

airflow-core/src/airflow/ui/src/hooks/usePluginTabs.tsx

@@ -0,0 +1,64 @@
+/*!
+ * 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 type { ReactNode } from "react";
+import { LuPlug } from "react-icons/lu";
+
+import { usePluginServiceGetPlugins } from "openapi/queries";
+import type { ExternalViewResponse } from "openapi/requests/types.gen";
+import { useColorMode } from "src/context/colorMode";
+
+type TabPlugin = {
+  icon: ReactNode;
+  label: string;
+  value: string;
+};
+
+export const usePluginTabs = (destination: string): Array<TabPlugin> => {
+  const { colorMode } = useColorMode();
+  const { data: pluginData } = usePluginServiceGetPlugins();
+
+  // Get external views with the specified destination and ensure they have url_route
+  const externalViews =
+    pluginData?.plugins
+      .flatMap((plugin) => plugin.external_views)
+      .filter((view: ExternalViewResponse) => view.destination === destination && Boolean(view.url_route)) ??
+    [];
+
+  return externalViews.map((view) => {
+    // Choose icon based on theme - prefer dark mode icon if available and in dark mode
+    let iconSrc = view.icon;
+
+    if (colorMode === "dark" && view.icon_dark_mode !== undefined && view.icon_dark_mode !== null) {
+      iconSrc = view.icon_dark_mode;
+    }
+
+    const icon =
+      iconSrc !== undefined && iconSrc !== null ? (
+        <img alt={view.name} src={iconSrc} style={{ height: "1rem", width: "1rem" }} />
+      ) : (
+        <LuPlug />
+      );
+
+    return {
+      icon,
+      label: view.name,
+      value: `plugin/${view.url_route}`,
+    };
+  });
+};

airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx

@@ -180,7 +180,7 @@ export const DetailsLayout = ({ children, error, isLoading, tabs }: Props) => {
                 ) : undefined}
                 <ProgressBar size="xs" visibility={isLoading ? "visible" : "hidden"} />
                 <NavTabs tabs={tabs} />
-                <Box h="100%" overflow="auto" px={2}>
+                <Box flexGrow={1} overflow="auto" px={2}>
                   <Outlet />
                 </Box>
               </Box>

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

@@ -28,6 +28,7 @@ import { useParams } from "react-router-dom";
 import { useDagServiceGetDagDetails, useDagServiceGetDagsUi } from "openapi/queries";
 import type { DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
 import { TaskIcon } from "src/assets/TaskIcon";
+import { usePluginTabs } from "src/hooks/usePluginTabs";
 import { DetailsLayout } from "src/layouts/Details/DetailsLayout";
 import { useRefreshOnNewDagRuns } from "src/queries/useRefreshOnNewDagRuns";
 import { isStatePending, useAutoRefresh } from "src/utils";
@@ -38,6 +39,9 @@ export const Dag = () => {
   const { t: translate } = useTranslation("dag");
   const { dagId = "" } = useParams();
 
+  // Get external views with dag destination
+  const externalTabs = usePluginTabs("dag");
+
   const tabs = [
     { icon: <LuChartColumn />, label: translate("tabs.overview"), value: "" },
     { icon: <FiBarChart />, label: translate("tabs.runs"), value: "runs" },
@@ -46,6 +50,7 @@ export const Dag = () => {
     { icon: <MdOutlineEventNote />, label: translate("tabs.auditLog"), value: "events" },
     { icon: <FiCode />, label: translate("tabs.code"), value: "code" },
     { icon: <MdDetails />, label: translate("tabs.details"), value: "details" },
+    ...externalTabs,
   ];
 
   const {

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

@@ -27,7 +27,7 @@ import { ErrorPage } from "./Error";
 
 export const Iframe = ({ sandbox = "allow-same-origin allow-forms" }: { readonly sandbox: string }) => {
   const { t: translate } = useTranslation();
-  const { page } = useParams();
+  const { dagId, mapIndex, page, runId, taskId } = useParams();
   const { data: pluginData, isLoading } = usePluginServiceGetPlugins();
 
   const iframeView =
@@ -49,12 +49,41 @@ export const Iframe = ({ sandbox = "allow-same-origin allow-forms" }: { readonly
     return <ErrorPage />;
   }
 
+  // Build the href URL with context parameters if the view has a destination
+  let src = iframeView.href;
+
+  if (iframeView.destination !== undefined && iframeView.destination !== "nav") {
+    // Check if the href contains placeholders that need to be replaced
+    if (dagId !== undefined) {
+      src = src.replaceAll("{DAG_ID}", dagId);
+    }
+    if (runId !== undefined) {
+      src = src.replaceAll("{RUN_ID}", runId);
+    }
+    if (taskId !== undefined) {
+      src = src.replaceAll("{TASK_ID}", taskId);
+    }
+    if (mapIndex !== undefined) {
+      src = src.replaceAll("{MAP_INDEX}", mapIndex);
+    }
+  }
+
   return (
-    <Box flexGrow={1} m={-3}>
+    <Box
+      flexGrow={1}
+      height="100%"
+      m={-2} // Compensate for parent padding
+      minHeight={0}
+    >
       <iframe
         sandbox={sandbox}
-        src={iframeView.href}
-        style={{ height: "100%", width: "100%" }}
+        src={src}
+        style={{
+          border: "none",
+          display: "block",
+          height: "100%",
+          width: "100%",
+        }}
         title={iframeView.name}
       />
     </Box>

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

@@ -23,6 +23,7 @@ import { MdDetails, MdOutlineEventNote, MdOutlineTask } from "react-icons/md";
 import { useParams } from "react-router-dom";
 
 import { useDagRunServiceGetDagRun, useDagServiceGetDagDetails } from "openapi/queries";
+import { usePluginTabs } from "src/hooks/usePluginTabs";
 import { DetailsLayout } from "src/layouts/Details/DetailsLayout";
 import { isStatePending, useAutoRefresh } from "src/utils";
 
@@ -32,12 +33,16 @@ export const Run = () => {
   const { t: translate } = useTranslation("dag");
   const { dagId = "", runId = "" } = useParams();
 
+  // Get external views with dag_run destination
+  const externalTabs = usePluginTabs("dag_run");
+
   const tabs = [
     { icon: <MdOutlineTask />, label: translate("tabs.taskInstances"), value: "" },
     { icon: <FiDatabase />, label: translate("tabs.assetEvents"), value: "asset_events" },
     { icon: <MdOutlineEventNote />, label: translate("tabs.auditLog"), value: "events" },
     { icon: <FiCode />, label: translate("tabs.code"), value: "code" },
     { icon: <MdDetails />, label: translate("tabs.details"), value: "details" },
+    ...externalTabs,
   ];
 
   const refetchInterval = useAutoRefresh({ dagId });

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

@@ -23,6 +23,7 @@ import { MdOutlineEventNote, MdOutlineTask } from "react-icons/md";
 import { useParams } from "react-router-dom";
 
 import { useDagServiceGetDagDetails, useTaskServiceGetTask } from "openapi/queries";
+import { usePluginTabs } from "src/hooks/usePluginTabs";
 import { DetailsLayout } from "src/layouts/Details/DetailsLayout";
 import { useGridStructure } from "src/queries/useGridStructure.ts";
 import { getGroupTask } from "src/utils/groupTask";
@@ -34,10 +35,14 @@ export const Task = () => {
   const { t: translate } = useTranslation("dag");
   const { dagId = "", groupId, taskId } = useParams();
 
+  // Get external views with task destination
+  const externalTabs = usePluginTabs("task");
+
   const tabs = [
     { icon: <LuChartColumn />, label: translate("tabs.overview"), value: "" },
     { icon: <MdOutlineTask />, label: translate("tabs.taskInstances"), value: "task_instances" },
     { icon: <MdOutlineEventNote />, label: translate("tabs.auditLog"), value: "events" },
+    ...externalTabs,
   ];
 
   const displayTabs = groupId === undefined ? tabs : tabs.filter((tab) => tab.value !== "events");

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

@@ -28,6 +28,7 @@ import {
   useGridServiceGridData,
   useTaskInstanceServiceGetMappedTaskInstance,
 } from "openapi/queries";
+import { usePluginTabs } from "src/hooks/usePluginTabs";
 import { DetailsLayout } from "src/layouts/Details/DetailsLayout";
 import { isStatePending, useAutoRefresh } from "src/utils";
 
@@ -37,6 +38,9 @@ export const TaskInstance = () => {
   const { t: translate } = useTranslation("dag");
   const { dagId = "", mapIndex = "-1", runId = "", taskId = "" } = useParams();
 
+  // Get external views with task_instance destination
+  const externalTabs = usePluginTabs("task_instance");
+
   const tabs = [
     { icon: <MdReorder />, label: translate("tabs.logs"), value: "" },
     {
@@ -49,6 +53,7 @@ export const TaskInstance = () => {
     { icon: <MdOutlineEventNote />, label: translate("tabs.auditLog"), value: "events" },
     { icon: <FiCode />, label: translate("tabs.code"), value: "code" },
     { icon: <MdDetails />, label: translate("tabs.details"), value: "details" },
+    ...externalTabs,
   ];
 
   const refetchInterval = useAutoRefresh({ dagId });

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

@@ -60,6 +60,16 @@ import { XCom } from "src/pages/XCom";
 
 import { client } from "./queryClient";
 
+const iframeRoute = {
+  // The following iframe sandbox setting is intentionally less restrictive.
+  // This is considered safe because the framed content originates from the Plugins,
+  // which is part of the deployment of Airflow and trusted as per our security policy.
+  // https://airflow.apache.org/docs/apache-airflow/stable/security/security_model.html
+  // They are not user provided plugins.
+  element: <Iframe sandbox="allow-scripts allow-same-origin allow-forms" />,
+  path: "plugin/:page",
+};
+
 const taskInstanceRoutes = [
   { element: <Logs />, index: true },
   { element: <Events />, path: "events" },
@@ -69,6 +79,7 @@ const taskInstanceRoutes = [
   { element: <RenderedTemplates />, path: "rendered_templates" },
   { element: <TaskInstances />, path: "task_instances" },
   { element: <TaskInstanceAssetEvents />, path: "asset_events" },
+  iframeRoute,
 ];
 
 export const routerConfig = [
@@ -142,15 +153,7 @@ export const routerConfig = [
         element: <Connections />,
         path: "connections",
       },
-      {
-        // The following iframe sandbox setting is intentionally less restrictive.
-        // This is considered safe because the framed content originates from the Plugins,
-        // which is part of the deployment of Airflow and trusted as per our security policy.
-        // https://airflow.apache.org/docs/apache-airflow/stable/security/security_model.html
-        // They are not user provided plugins.
-        element: <Iframe sandbox="allow-scripts allow-same-origin allow-forms" />,
-        path: "plugin/:page",
-      },
+      iframeRoute,
       {
         children: [
           { element: <Overview />, index: true },
@@ -160,6 +163,7 @@ export const routerConfig = [
           { element: <Events />, path: "events" },
           { element: <Code />, path: "code" },
           { element: <DagDetails />, path: "details" },
+          iframeRoute,
         ],
         element: <Dag />,
         path: "dags/:dagId",
@@ -171,6 +175,7 @@ export const routerConfig = [
           { element: <Code />, path: "code" },
           { element: <DagRunDetails />, path: "details" },
           { element: <DagRunAssetEvents />, path: "asset_events" },
+          iframeRoute,
         ],
         element: <Run />,
         path: "dags/:dagId/runs/:runId",
@@ -194,6 +199,7 @@ export const routerConfig = [
         children: [
           { element: <TaskOverview />, index: true },
           { element: <TaskInstances />, path: "task_instances" },
+          iframeRoute,
         ],
         element: <Task />,
         path: "dags/:dagId/tasks/group/:groupId",
@@ -208,6 +214,7 @@ export const routerConfig = [
           { element: <TaskOverview />, index: true },
           { element: <TaskInstances />, path: "task_instances" },
           { element: <Events />, path: "events" },
+          iframeRoute,
         ],
         element: <Task />,
         path: "dags/:dagId/tasks/:taskId",