Add React plugin support to Dag and task overviews

airflow-core/src/airflow/api_fastapi/core_api/datamodels/plugins.py

@@ -100,7 +100,7 @@ class ReactAppResponse(BaseUIResponse):
     model_config = ConfigDict(extra="allow")
 
     bundle_url: str
-    destination: Literal[BaseDestinationLiteral, "dashboard"] = "nav"
+    destination: Literal[BaseDestinationLiteral, "dashboard", "dag_overview", "task_overview"] = "nav"
 
 
 class PluginResponse(BaseModel):

airflow-core/src/airflow/api_fastapi/core_api/openapi/v2-rest-api-generated.yaml

@@ -15909,6 +15909,8 @@ components:
           - asset
           - base
           - dashboard
+          - dag_overview
+          - task_overview
           title: Destination
           default: nav
       additionalProperties: true

airflow-core/src/airflow/ui/openapi-gen/requests/schemas.gen.ts

@@ -6383,7 +6383,7 @@ export const $ReactAppResponse = {
         },
         destination: {
             type: 'string',
-            enum: ['nav', 'dag', 'dag_run', 'task', 'task_instance', 'asset', 'base', 'dashboard'],
+            enum: ['nav', 'dag', 'dag_run', 'task', 'task_instance', 'asset', 'base', 'dashboard', 'dag_overview', 'task_overview'],
             title: 'Destination',
             default: 'nav'
         }

airflow-core/src/airflow/ui/openapi-gen/requests/types.gen.ts

@@ -1679,11 +1679,11 @@ export type ReactAppResponse = {
     category?: string | null;
     nav_top_level?: boolean | null;
     bundle_url: string;
-    destination?: 'nav' | 'dag' | 'dag_run' | 'task' | 'task_instance' | 'asset' | 'base' | 'dashboard';
+    destination?: 'nav' | 'dag' | 'dag_run' | 'task' | 'task_instance' | 'asset' | 'base' | 'dashboard' | 'dag_overview' | 'task_overview';
     [key: string]: unknown | string;
 };
 
-export type destination2 = 'nav' | 'dag' | 'dag_run' | 'task' | 'task_instance' | 'asset' | 'base' | 'dashboard';
+export type destination2 = 'nav' | 'dag' | 'dag_run' | 'task' | 'task_instance' | 'asset' | 'base' | 'dashboard' | 'dag_overview' | 'task_overview';
 
 /**
  * Internal enum for setting reprocess behavior in a backfill.

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

@@ -0,0 +1,68 @@
+/*!
+ * 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 "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import type { ReactAppResponse } from "openapi/requests/types.gen";
+import { Wrapper } from "src/utils/Wrapper";
+
+import { Overview } from "./Overview";
+
+vi.mock("openapi/queries", () => ({
+  useAssetServiceGetAssetEvents: () => ({ data: undefined, isLoading: false }),
+  useDagRunServiceGetDagRuns: () => ({ data: { dag_runs: [], total_entries: 0 }, isLoading: false }),
+  usePluginServiceGetPlugins: () => ({
+    data: {
+      plugins: [
+        {
+          react_apps: [
+            { bundle_url: "/dag.js", destination: "dag_overview", name: "Dag overview plugin" },
+            { bundle_url: "/task.js", destination: "task_overview", name: "Task overview plugin" },
+          ],
+        },
+      ],
+    },
+  }),
+  useTaskInstanceServiceGetTaskInstances: () => ({
+    data: { task_instances: [], total_entries: 0 },
+    isLoading: false,
+  }),
+}));
+
+vi.mock("src/components/Assets/AssetEvents", () => ({ AssetEvents: () => null }));
+vi.mock("src/components/DurationChart", () => ({ DurationChart: () => null }));
+vi.mock("src/components/TimeRangeSelector", () => ({ default: () => null }));
+vi.mock("src/components/TrendCountButton", () => ({ TrendCountButton: () => null }));
+vi.mock("src/pages/ReactPlugin", () => ({
+  ReactPlugin: ({ reactApp }: { readonly reactApp: ReactAppResponse }) => <div>{reactApp.name}</div>,
+}));
+vi.mock("src/queries/useGridRuns.ts", () => ({ useGridRuns: () => ({ data: [], isLoading: false }) }));
+vi.mock("src/utils", () => ({ isStatePending: () => false, useAutoRefresh: () => false }));
+vi.mock("./DagDeadlines", () => ({ DagDeadlines: () => null }));
+vi.mock("./FailedLogs", () => ({ default: () => null }));
+
+describe("Dag overview plugins", () => {
+  it("renders only React plugins registered for the Dag overview", () => {
+    render(<Overview />, { wrapper: Wrapper });
+
+    expect(screen.getByText("Dag overview plugin")).toBeInTheDocument();
+    expect(screen.queryByText("Task overview plugin")).not.toBeInTheDocument();
+  });
+});

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, HStack, Skeleton } from "@chakra-ui/react";
+import { Box, HStack, Skeleton, VStack } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import { lazy, useState, Suspense } from "react";
 import { useTranslation } from "react-i18next";
@@ -26,14 +26,17 @@ import { useLocalStorage } from "usehooks-ts";
 import {
   useAssetServiceGetAssetEvents,
   useDagRunServiceGetDagRuns,
+  usePluginServiceGetPlugins,
   useTaskInstanceServiceGetTaskInstances,
 } from "openapi/queries";
+import type { ReactAppResponse } from "openapi/requests/types.gen";
 import { AssetEvents } from "src/components/Assets/AssetEvents";
 import { DurationChart } from "src/components/DurationChart";
 import TimeRangeSelector from "src/components/TimeRangeSelector";
 import { TrendCountButton } from "src/components/TrendCountButton";
 import { dagRunsLimitKey } from "src/constants/localStorage";
 import { SearchParamsKeys } from "src/constants/searchParams";
+import { ReactPlugin } from "src/pages/ReactPlugin";
 import { useGridRuns } from "src/queries/useGridRuns.ts";
 import { isStatePending, useAutoRefresh } from "src/utils";
 
@@ -83,10 +86,15 @@ export const Overview = () => {
     timestampGte: startDate,
     timestampLte: endDate,
   });
+  const { data: pluginData } = usePluginServiceGetPlugins();
+  const dagOverviewReactPlugins =
+    pluginData?.plugins
+      .flatMap((plugin) => plugin.react_apps)
+      .filter((plugin: ReactAppResponse) => plugin.destination === "dag_overview") ?? [];
 
   return (
-    <Box m={4} spaceY={4}>
-      <Box my={2}>
+    <VStack alignItems="stretch" gap={4} m={4}>
+      <Box my={2} order={1}>
         <TimeRangeSelector
           defaultValue={defaultHour}
           endDate={endDate}
@@ -95,7 +103,7 @@ export const Overview = () => {
           startDate={startDate}
         />
       </Box>
-      <HStack flexWrap="wrap">
+      <HStack flexWrap="wrap" order={2}>
         <TrendCountButton
           colorPalette={failedTaskCount === 0 ? "green" : "failed"}
           count={failedTaskCount}
@@ -127,7 +135,7 @@ export const Overview = () => {
           startDate={startDate}
         />
       </HStack>
-      <HStack alignItems="flex-start" flexWrap="wrap">
+      <HStack alignItems="flex-start" flexWrap="wrap" order={3}>
         <Box
           borderRadius={4}
           borderStyle="solid"
@@ -157,10 +165,19 @@ export const Overview = () => {
           />
         ) : undefined}
       </HStack>
-      {dagId === undefined ? undefined : <DagDeadlines dagId={dagId} />}
-      <Suspense fallback={<Skeleton height="100px" width="full" />}>
-        <FailedLogs failedTasks={failedTasks} />
-      </Suspense>
-    </Box>
+      {dagId === undefined ? undefined : (
+        <Box css={{ "&:empty": { display: "none" } }} order={4}>
+          <DagDeadlines dagId={dagId} />
+        </Box>
+      )}
+      <Box css={{ "&:empty": { display: "none" } }} order={5}>
+        <Suspense fallback={<Skeleton height="100px" width="full" />}>
+          <FailedLogs failedTasks={failedTasks} />
+        </Suspense>
+      </Box>
+      {dagOverviewReactPlugins.map((plugin) => (
+        <ReactPlugin key={plugin.name} reactApp={plugin} />
+      ))}
+    </VStack>
   );
 };

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

@@ -0,0 +1,63 @@
+/*!
+ * 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 "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import type { ReactAppResponse } from "openapi/requests/types.gen";
+import { Wrapper } from "src/utils/Wrapper";
+
+import { Overview } from "./Overview";
+
+vi.mock("openapi/queries", () => ({
+  usePluginServiceGetPlugins: () => ({
+    data: {
+      plugins: [
+        {
+          react_apps: [
+            { bundle_url: "/dag.js", destination: "dag_overview", name: "Dag overview plugin" },
+            { bundle_url: "/task.js", destination: "task_overview", name: "Task overview plugin" },
+          ],
+        },
+      ],
+    },
+  }),
+  useTaskInstanceServiceGetTaskInstances: () => ({
+    data: { task_instances: [], total_entries: 0 },
+    isLoading: false,
+  }),
+}));
+
+vi.mock("src/components/DurationChart", () => ({ DurationChart: () => null }));
+vi.mock("src/components/NeedsReviewButton", () => ({ NeedsReviewButton: () => null }));
+vi.mock("src/components/TimeRangeSelector", () => ({ default: () => null }));
+vi.mock("src/components/TrendCountButton", () => ({ TrendCountButton: () => null }));
+vi.mock("src/pages/ReactPlugin", () => ({
+  ReactPlugin: ({ reactApp }: { readonly reactApp: ReactAppResponse }) => <div>{reactApp.name}</div>,
+}));
+vi.mock("src/utils", () => ({ isStatePending: () => false, useAutoRefresh: () => false }));
+
+describe("Task overview plugins", () => {
+  it("renders only React plugins registered for the task overview", () => {
+    render(<Overview />, { wrapper: Wrapper });
+
+    expect(screen.getByText("Task overview plugin")).toBeInTheDocument();
+    expect(screen.queryByText("Dag overview plugin")).not.toBeInTheDocument();
+  });
+});

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

@@ -16,18 +16,20 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, HStack, Skeleton } from "@chakra-ui/react";
+import { Box, HStack, Skeleton, VStack } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
 
-import { useTaskInstanceServiceGetTaskInstances } from "openapi/queries";
+import { usePluginServiceGetPlugins, useTaskInstanceServiceGetTaskInstances } from "openapi/queries";
+import type { ReactAppResponse } from "openapi/requests/types.gen";
 import { DurationChart } from "src/components/DurationChart";
 import { NeedsReviewButton } from "src/components/NeedsReviewButton";
 import TimeRangeSelector from "src/components/TimeRangeSelector";
 import { TrendCountButton } from "src/components/TrendCountButton";
 import { SearchParamsKeys } from "src/constants/searchParams";
+import { ReactPlugin } from "src/pages/ReactPlugin";
 import { isStatePending, useAutoRefresh } from "src/utils";
 
 const defaultHour = "24";
@@ -71,11 +73,18 @@ export const Overview = () => {
         query.state.data?.task_instances.some((ti) => isStatePending(ti.state)) ? refetchInterval : false,
     },
   );
+  const { data: pluginData } = usePluginServiceGetPlugins();
+  const taskOverviewReactPlugins =
+    pluginData?.plugins
+      .flatMap((plugin) => plugin.react_apps)
+      .filter((plugin: ReactAppResponse) => plugin.destination === "task_overview") ?? [];
 
   return (
-    <Box m={4} spaceY={4}>
-      <NeedsReviewButton taskId={taskId} />
-      <Box my={2}>
+    <VStack alignItems="stretch" gap={4} m={4}>
+      <Box css={{ "&:empty": { display: "none" } }} order={1}>
+        <NeedsReviewButton taskId={taskId} />
+      </Box>
+      <Box my={2} order={2}>
         <TimeRangeSelector
           defaultValue={defaultHour}
           endDate={endDate}
@@ -84,7 +93,7 @@ export const Overview = () => {
           startDate={startDate}
         />
       </Box>
-      <HStack flexWrap="wrap">
+      <HStack flexWrap="wrap" order={3}>
         <TrendCountButton
           colorPalette={failedTaskCount === 0 ? "green" : "red"}
           count={failedTaskCount}
@@ -103,7 +112,7 @@ export const Overview = () => {
           startDate={startDate}
         />
       </HStack>
-      <HStack alignItems="flex-start" flexWrap="wrap" gap={5} my={5}>
+      <HStack alignItems="flex-start" flexWrap="wrap" gap={5} my={5} order={4}>
         <Box
           borderRadius={4}
           borderStyle="solid"
@@ -120,6 +129,9 @@ export const Overview = () => {
           )}
         </Box>
       </HStack>
-    </Box>
+      {taskOverviewReactPlugins.map((plugin) => (
+        <ReactPlugin key={plugin.name} reactApp={plugin} />
+      ))}
+    </VStack>
   );
 };

airflow-core/tests/unit/api_fastapi/core_api/datamodels/test_plugins.py

@@ -0,0 +1,32 @@
+# 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.
+from __future__ import annotations
+
+from typing import Literal
+
+import pytest
+
+from airflow.api_fastapi.core_api.datamodels.plugins import ReactAppResponse
+
+
+@pytest.mark.parametrize("destination", ["dag_overview", "task_overview"])
+def test_react_app_accepts_overview_destination(
+    destination: Literal["dag_overview", "task_overview"],
+) -> None:
+    react_app = ReactAppResponse(name="overview", bundle_url="/overview.js", destination=destination)
+
+    assert react_app.destination == destination

airflow-ctl/src/airflowctl/api/datamodels/generated.py

@@ -935,6 +935,8 @@ class Destination1(str, Enum):
     ASSET = "asset"
     BASE = "base"
     DASHBOARD = "dashboard"
+    DAG_OVERVIEW = "dag_overview"
+    TASK_OVERVIEW = "task_overview"
 
 
 class ReactAppResponse(BaseModel):