Fix Link to Dag in Plugin

dev/breeze/src/airflow_breeze/global_constants.py

@@ -800,7 +800,7 @@ def generate_provider_dependencies_if_needed():
     {
         "python-version": "3.10",
         "airflow-version": "3.1.0",
-        "remove-providers": "",
+        "remove-providers": "edge3",  # Need to remove edge3 from tests until we have 3.1.1 used here.
         "run-unit-tests": "true",
     },
 ]

providers/edge3/pyproject.toml

@@ -57,7 +57,7 @@ requires-python = ">=3.10"
 # Make sure to run ``prek update-providers-dependencies --all-files``
 # After you modify the dependencies, and rebuild your Breeze CI image with ``breeze ci-image build``
 dependencies = [
-    "apache-airflow>=2.10.0",
+    "apache-airflow>=2.10.0,!=3.1.0",
     "apache-airflow-providers-common-compat>=1.8.0",
     "pydantic>=2.11.0",
     "retryhttp>=1.2.0,!=1.3.0",

providers/edge3/src/airflow/providers/edge3/plugins/edge_executor_plugin.py

@@ -252,18 +252,10 @@ class EdgeExecutorPlugin(AirflowPlugin):
             fastapi_apps = [_get_api_endpoint()]
             react_apps = [
                 {
-                    "name": "Edge Worker",
+                    "name": "Edge Executor",
                     "bundle_url": _get_base_url_path("/edge_worker/static/main.umd.cjs"),
                     "destination": "nav",
-                    "url_route": "edge_worker",
-                    "category": "admin",
-                    "icon": _get_base_url_path("/edge_worker/res/cloud-computer.svg"),
-                    "icon_dark_mode": _get_base_url_path("/edge_worker/res/cloud-computer-dark.svg"),
-                },
-                {
-                    "name": "Edge Worker Jobs",
-                    "bundle_url": _get_base_url_path("/edge_worker/static/main.umd.cjs"),
-                    "url_route": "edge_jobs",
+                    "url_route": "edge_executor",
                     "category": "admin",
                     "icon": _get_base_url_path("/edge_worker/res/cloud-computer.svg"),
                     "icon_dark_mode": _get_base_url_path("/edge_worker/res/cloud-computer-dark.svg"),

providers/edge3/src/airflow/providers/edge3/plugins/www/src/layouts/EdgeLayout.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { Box } from "@chakra-ui/react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { Navigate, Route, Routes } from "react-router-dom";
 
 import { JobsPage } from "src/pages/JobsPage";
 import { WorkerPage } from "src/pages/WorkerPage";
@@ -26,23 +26,18 @@ import { NavTabs } from "./NavTabs";
 
 export const EdgeLayout = () => {
   const tabs = [
-    { label: "Edge Worker", value: "plugin/edge_worker" },
-    { label: "Edge Jobs", value: "plugin/edge_jobs" },
+    { label: "Edge Worker", value: "worker" },
+    { label: "Edge Jobs", value: "jobs" },
   ];
 
-  // Extract base URL from HTML base element to handle webserver.base_url configuration
-  const baseUrl = document.querySelector("base")?.href ?? "http://localhost:8080/";
-  const basename = new URL(baseUrl).pathname;
-
   return (
     <Box p={2} /* Compensate for parent padding from ExternalView */>
-      <BrowserRouter basename={basename}>
-        <NavTabs tabs={tabs} />
-        <Routes>
-          <Route path="plugin/edge_worker" element={<WorkerPage />} />
-          <Route path="plugin/edge_jobs" element={<JobsPage />} />
-        </Routes>
-      </BrowserRouter>
+      <NavTabs tabs={tabs} />
+      <Routes>
+        <Route index element={<Navigate to="worker" replace />} />
+        <Route path="worker" element={<WorkerPage />} />
+        <Route path="jobs" element={<JobsPage />} />
+      </Routes>
     </Box>
   );
 };

providers/edge3/src/airflow/providers/edge3/plugins/www/src/layouts/NavTabs.tsx

@@ -33,14 +33,7 @@ export const NavTabs = ({ tabs }: Props) => {
   return (
     <Flex alignItems="center" borderBottomWidth={1} mb={2} ref={containerRef}>
       {tabs.map(({ icon, label, value }) => (
-        <NavLink
-          end
-          key={value}
-          title={label}
-          to={{
-            pathname: value,
-          }}
-        >
+        <NavLink end key={value} title={label} to={value}>
           {({ isActive }) => (
             <Center
               borderBottomColor="border.info"

providers/edge3/src/airflow/providers/edge3/plugins/www/src/pages/JobsPage.tsx

@@ -16,9 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Link, Table, Text } from "@chakra-ui/react";
+import { Box, Table, Text } from "@chakra-ui/react";
 import { useUiServiceJobs } from "openapi/queries";
-import { Link as RouterLink } from "react-router-dom";
+import { Link } from "react-router-dom";
 import TimeAgo from "react-timeago";
 
 import { ErrorAlert } from "src/components/ErrorAlert";
@@ -60,22 +60,21 @@ export const JobsPage = () => {
                 key={`${job.dag_id}.${job.run_id}.${job.task_id}.${job.map_index}.${job.try_number}`}
               >
                 <Table.Cell>
-                  {/* TODO Check why <Link to={`/dags/${job.dag_id}`}> is not working via react-router-dom! */}
-                  <Link href={`../dags/${job.dag_id}`}>{job.dag_id}</Link>
+                  <Link to={`/dags/${job.dag_id}`}>{job.dag_id}</Link>
                 </Table.Cell>
                 <Table.Cell>
-                  <Link href={`../dags/${job.dag_id}/runs/${job.run_id}`}>{job.run_id}</Link>
+                  <Link to={`/dags/${job.dag_id}/runs/${job.run_id}`}>{job.run_id}</Link>
                 </Table.Cell>
                 <Table.Cell>
                   {job.map_index >= 0 ? (
                     <Link
-                      href={`../dags/${job.dag_id}/runs/${job.run_id}/tasks/${job.task_id}/mapped/${job.map_index}?try_number=${job.try_number}`}
+                      to={`/dags/${job.dag_id}/runs/${job.run_id}/tasks/${job.task_id}/mapped/${job.map_index}?try_number=${job.try_number}`}
                     >
                       {job.task_id}
                     </Link>
                   ) : (
                     <Link
-                      href={`../dags/${job.dag_id}/runs/${job.run_id}/tasks/${job.task_id}?try_number=${job.try_number}`}
+                      to={`/dags/${job.dag_id}/runs/${job.run_id}/tasks/${job.task_id}?try_number=${job.try_number}`}
                     >
                       {job.task_id}
                     </Link>
@@ -91,7 +90,7 @@ export const JobsPage = () => {
                   {job.queued_dttm ? <TimeAgo date={job.queued_dttm} live={false} /> : undefined}
                 </Table.Cell>
                 <Table.Cell>
-                  <RouterLink to={`/plugin/edge_worker#${job.edge_worker}`}>{job.edge_worker}</RouterLink>
+                  <Link to={`../worker#${job.edge_worker}`}>{job.edge_worker}</Link>
                 </Table.Cell>
                 <Table.Cell>
                   {job.last_update ? <TimeAgo date={job.last_update} live={false} /> : undefined}

providers/edge3/src/airflow/providers/edge3/plugins/www/vite.config.ts

@@ -38,11 +38,12 @@ export default defineConfig(({ command }) => {
             name: "AirflowPlugin",
           },
           rollupOptions: {
-            external: ["react", "react-dom"],
+            external: ["react", "react-dom", "react-router-dom", "react/jsx-runtime"],
             output: {
               globals: {
                 react: "React",
                 "react-dom": "ReactDOM",
+                "react-router-dom": "ReactRouterDOM",
                 "react/jsx-runtime": "ReactJSXRuntime",
               },
             },

providers/edge3/www-hash.txt

@@ -1 +1 @@
-9420cb2d590f0795485e2b95d349dd51ba3bdb494759d7f6e43ae6148fd45951
+706abca5f56c558c9de3f69606ec013e0615063ba2545af1e9d0906405e850b4