Feature/edge maintenance plugin beautification

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

@@ -21,6 +21,7 @@ import { QueryClientProvider } from "@tanstack/react-query";
 import axios, { type AxiosError } from "axios";
 import { StrictMode } from "react";
 import React from "react";
+import * as ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
 import { I18nextProvider } from "react-i18next";
 import { RouterProvider } from "react-router-dom";
@@ -37,10 +38,11 @@ import { client } from "./queryClient";
 import { system } from "./theme";
 import { clearToken, tokenHandler } from "./utils/tokenHandler";
 
-// Set React and ReactJSXRuntime on globalThis to share them with the dynamically imported React plugins.
+// Set React, ReactDOM, and ReactJSXRuntime on globalThis to share them with the dynamically imported React plugins.
 // Only one instance of React should be used.
 // Reflect will avoid type checking.
 Reflect.set(globalThis, "React", React);
+Reflect.set(globalThis, "ReactDOM", ReactDOM);
 Reflect.set(globalThis, "ReactJSXRuntime", ReactJSXRuntime);
 
 // redirect to login page if the API responds with unauthorized or forbidden errors

providers/edge3/src/airflow/providers/edge3/plugins/www/src/components/MaintenanceEnterButton.tsx

@@ -0,0 +1,101 @@
+/*!
+ * 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 { Button, CloseButton, Dialog, IconButton, Portal, Textarea, useDisclosure } from "@chakra-ui/react";
+import { useUiServiceRequestWorkerMaintenance } from "openapi/queries";
+import { useState } from "react";
+import { HiOutlineWrenchScrewdriver } from "react-icons/hi2";
+
+interface MaintenanceEnterButtonProps {
+  onEnterMaintenance: (toast: Record<string, string>) => void;
+  workerName: string;
+}
+
+export const MaintenanceEnterButton = ({ onEnterMaintenance, workerName }: MaintenanceEnterButtonProps) => {
+  const { onClose, onOpen, open } = useDisclosure();
+  const [comment, setComment] = useState("");
+
+  const enterMaintenanceMutation = useUiServiceRequestWorkerMaintenance({
+    onError: (error) => {
+      onEnterMaintenance({
+        description: `Unable to set worker ${workerName} to maintenance mode: ${error}`,
+        title: "Setting Maintenance Mode failed",
+        type: "error",
+      });
+    },
+    onSuccess: () => {
+      onEnterMaintenance({
+        description: `Worker ${workerName} was requested to be in maintenance mode.`,
+        title: "Maintenance Mode activated",
+        type: "success",
+      });
+    },
+  });
+
+  const enterMaintenance = () => {
+    enterMaintenanceMutation.mutate({ requestBody: { maintenance_comment: comment }, workerName });
+  };
+
+  return (
+    <>
+      <IconButton
+        size="sm"
+        variant="ghost"
+        aria-label="Enter Maintenance"
+        title="Enter Maintenance"
+        onClick={onOpen}
+      >
+        <HiOutlineWrenchScrewdriver />
+      </IconButton>
+
+      <Dialog.Root onOpenChange={onClose} open={open} size="md">
+        <Portal>
+          <Dialog.Backdrop />
+          <Dialog.Positioner>
+            <Dialog.Content>
+              <Dialog.Header>
+                <Dialog.Title>Set maintenance for worker {workerName}</Dialog.Title>
+              </Dialog.Header>
+              <Dialog.Body>
+                <Textarea
+                  placeholder="Enter maintenance comment (required)"
+                  value={comment}
+                  onChange={(e) => setComment(e.target.value)}
+                  required
+                  maxLength={1024}
+                  size="sm"
+                />
+              </Dialog.Body>
+              <Dialog.Footer>
+                <Dialog.ActionTrigger asChild>
+                  <Button variant="outline">Cancel</Button>
+                </Dialog.ActionTrigger>
+                <Button onClick={enterMaintenance} disabled={!comment.trim()}>
+                  Confirm Maintenance
+                </Button>
+              </Dialog.Footer>
+              <Dialog.CloseTrigger asChild>
+                <CloseButton size="sm" />
+              </Dialog.CloseTrigger>
+            </Dialog.Content>
+          </Dialog.Positioner>
+        </Portal>
+      </Dialog.Root>
+    </>
+  );
+};

providers/edge3/src/airflow/providers/edge3/plugins/www/src/components/MaintenanceExitButton.tsx

@@ -0,0 +1,61 @@
+/*!
+ * 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 { IconButton } from "@chakra-ui/react";
+import { useUiServiceExitWorkerMaintenance } from "openapi/queries";
+import { IoMdExit } from "react-icons/io";
+
+interface MaintenanceExitButtonProps {
+  onExitMaintenance: (toast: Record<string, string>) => void;
+  workerName: string;
+}
+
+export const MaintenanceExitButton = ({ onExitMaintenance, workerName }: MaintenanceExitButtonProps) => {
+  const exitMaintenanceMutation = useUiServiceExitWorkerMaintenance({
+    onError: (error) => {
+      onExitMaintenance({
+        description: `Unable to exit ${workerName} from maintenance mode: ${error}`,
+        title: "Exit Maintenance Mode failed",
+        type: "error",
+      });
+    },
+    onSuccess: () => {
+      onExitMaintenance({
+        description: `Worker ${workerName} was requested to exit maintenance mode.`,
+        title: "Maintenance Mode deactivated",
+        type: "success",
+      });
+    },
+  });
+
+  const exitMaintenance = () => {
+    exitMaintenanceMutation.mutate({ workerName });
+  };
+
+  return (
+    <IconButton
+      size="sm"
+      variant="ghost"
+      onClick={() => exitMaintenance()}
+      aria-label="Exit Maintenance"
+      title="Exit Maintenance"
+    >
+      <IoMdExit />
+    </IconButton>
+  );
+};

providers/edge3/src/airflow/providers/edge3/plugins/www/src/components/WorkerOperations.tsx

@@ -0,0 +1,65 @@
+/*!
+ * 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 { Box, Flex, VStack } from "@chakra-ui/react";
+import type { Worker } from "openapi/requests/types.gen";
+
+import { toaster } from "src/components/ui";
+
+import { MaintenanceEnterButton } from "./MaintenanceEnterButton";
+import { MaintenanceExitButton } from "./MaintenanceExitButton";
+
+interface WorkerOperationsProps {
+  onOperations: () => void;
+  worker: Worker;
+}
+
+export const WorkerOperations = ({ onOperations, worker }: WorkerOperationsProps) => {
+  const workerName = worker.worker_name;
+  const state = worker.state;
+
+  const onWorkerChange = (toast: Record<string, string>) => {
+    toaster.create(toast);
+    onOperations();
+  };
+
+  if (state === "idle" || state === "running") {
+    return (
+      <Flex justifyContent="end">
+        <MaintenanceEnterButton onEnterMaintenance={onWorkerChange} workerName={workerName} />
+      </Flex>
+    );
+  } else if (
+    state === "maintenance pending" ||
+    state === "maintenance mode" ||
+    state === "maintenance request" ||
+    state === "offline maintenance"
+  ) {
+    return (
+      <VStack gap={2} align="stretch">
+        <Box fontSize="sm" whiteSpace="pre-wrap">
+          {worker.maintenance_comments || "No comment"}
+        </Box>
+        <Flex justifyContent="end">
+          <MaintenanceExitButton onExitMaintenance={onWorkerChange} workerName={workerName} />
+        </Flex>
+      </VStack>
+    );
+  }
+  return null;
+};