apache-airflow-providers-edge3 1.2.0__py3-none-any.whl → 1.3.0__py3-none-any.whl

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

@@ -0,0 +1,85 @@
+/*!
+ * 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 { AddQueueButton } from "./AddQueueButton";
+import { MaintenanceEditCommentButton } from "./MaintenanceEditCommentButton";
+import { MaintenanceEnterButton } from "./MaintenanceEnterButton";
+import { MaintenanceExitButton } from "./MaintenanceExitButton";
+import { RemoveQueueButton } from "./RemoveQueueButton";
+import { WorkerDeleteButton } from "./WorkerDeleteButton";
+import { WorkerShutdownButton } from "./WorkerShutdownButton";
+
+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" gap={2}>
+        <AddQueueButton onQueueUpdate={onWorkerChange} workerName={workerName} />
+        <RemoveQueueButton onQueueUpdate={onWorkerChange} worker={worker} />
+        <MaintenanceEnterButton onEnterMaintenance={onWorkerChange} workerName={workerName} />
+        <WorkerShutdownButton onShutdown={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" gap={2}>
+          <MaintenanceEditCommentButton onEditComment={onWorkerChange} workerName={workerName} />
+          <MaintenanceExitButton onExitMaintenance={onWorkerChange} workerName={workerName} />
+          {state === "offline maintenance" ? (
+            <WorkerDeleteButton onDelete={onWorkerChange} workerName={workerName} />
+          ) : (
+            <WorkerShutdownButton onShutdown={onWorkerChange} workerName={workerName} />
+          )}
+        </Flex>
+      </VStack>
+    );
+  } else if (state === "offline" || state === "unknown") {
+    return (
+      <Flex justifyContent="end">
+        <WorkerDeleteButton onDelete={onWorkerChange} workerName={workerName} />
+      </Flex>
+    );
+  }
+  return null;
+};

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

@@ -0,0 +1,104 @@
+/*!
+ * 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, Text, useDisclosure } from "@chakra-ui/react";
+import { useUiServiceRequestWorkerShutdown } from "openapi/queries";
+import { FaPowerOff } from "react-icons/fa";
+
+interface WorkerShutdownButtonProps {
+  onShutdown: (toast: Record<string, string>) => void;
+  workerName: string;
+}
+
+export const WorkerShutdownButton = ({ onShutdown, workerName }: WorkerShutdownButtonProps) => {
+  const { onClose, onOpen, open } = useDisclosure();
+
+  const shutdownMutation = useUiServiceRequestWorkerShutdown({
+    onError: (error) => {
+      onShutdown({
+        description: `Unable to request shutdown for worker ${workerName}: ${error}`,
+        title: "Shutdown Request Failed",
+        type: "error",
+      });
+    },
+    onSuccess: () => {
+      onShutdown({
+        description: `Worker ${workerName} was requested to shutdown.`,
+        title: "Shutdown Request Sent",
+        type: "success",
+      });
+      onClose();
+    },
+  });
+
+  const handleShutdown = () => {
+    shutdownMutation.mutate({ workerName });
+  };
+
+  return (
+    <>
+      <IconButton
+        size="sm"
+        variant="ghost"
+        onClick={onOpen}
+        aria-label="Shutdown Worker"
+        title="Shutdown Worker"
+        colorPalette="danger"
+      >
+        <FaPowerOff />
+      </IconButton>
+
+      <Dialog.Root onOpenChange={onClose} open={open} size="md">
+        <Portal>
+          <Dialog.Backdrop />
+          <Dialog.Positioner>
+            <Dialog.Content>
+              <Dialog.Header>
+                <Dialog.Title>Shutdown worker {workerName}</Dialog.Title>
+              </Dialog.Header>
+              <Dialog.Body>
+                <Text>Are you sure you want to request shutdown for worker {workerName}?</Text>
+                <Text fontSize="sm" color="red.500" mt={2}>
+                  This stops the worker on the remote edge. You can't restart it from the UI — you need to
+                  start it remotely instead.
+                </Text>
+              </Dialog.Body>
+              <Dialog.Footer>
+                <Dialog.ActionTrigger asChild>
+                  <Button variant="outline">Cancel</Button>
+                </Dialog.ActionTrigger>
+                <Button
+                  onClick={handleShutdown}
+                  colorPalette="danger"
+                  loading={shutdownMutation.isPending}
+                  loadingText="Shutting down..."
+                >
+                  <FaPowerOff style={{ marginRight: "8px" }} />
+                  Shutdown Worker
+                </Button>
+              </Dialog.Footer>
+              <Dialog.CloseTrigger asChild>
+                <CloseButton size="sm" />
+              </Dialog.CloseTrigger>
+            </Dialog.Content>
+          </Dialog.Positioner>
+        </Portal>
+      </Dialog.Root>
+    </>
+  );
+};

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

@@ -48,6 +48,38 @@ const state2Color = (state: EdgeWorkerState | null | undefined) => {
   }
 };
 
+const state2TooltipText = (state: EdgeWorkerState | null | undefined) => {
+  switch (state) {
+    // see enum mapping from providers/edge3/src/airflow/providers/edge3/models/edge_worker.py:EdgeWorkerState
+    case "starting":
+      return "Edge Worker is in initialization.";
+    case "running":
+      return "Edge Worker is actively running a task.";
+    case "idle":
+      return "Edge Worker is active and waiting for a task.";
+    case "shutdown request":
+      return "Request to shutdown Edge Worker is issued. It will be picked-up on the next heartbeat, tasks will drain and then worker will terminate.";
+    case "terminating":
+      return "Edge Worker is completing work (draining running tasks) and stopping.";
+    case "offline":
+      return "Edge Worker was shut down.";
+    case "unknown":
+      return "No heartbeat signal from worker for some time, Edge Worker probably down or got disconnected.";
+    case "maintenance request":
+      return "Worker was requested to enter maintenance mode. Once worker receives this message it will pause fetching tasks and drain tasks.";
+    case "maintenance pending":
+      return "Edge Worker received the request for maintenance, waiting for tasks to finish. Once tasks are finished will move to 'maintenance mode'.";
+    case "maintenance mode":
+      return "Edge Worker is in maintenance mode. It is online but pauses fetching tasks.";
+    case "maintenance exit":
+      return "Request Worker is requested to exit maintenance mode. Once the worker receives this state it will un-pause and fetch new tasks.";
+    case "offline maintenance":
+      return "Worker was shut down in maintenance mode. It will be in maintenance mode when restarted.";
+    default:
+      return undefined;
+  }
+};
+
 export type Props = {
   readonly state?: EdgeWorkerState | null;
 } & BadgeProps;
@@ -61,6 +93,7 @@ export const WorkerStateBadge = React.forwardRef<HTMLDivElement, Props>(
       px={children === undefined ? 1 : 2}
       py={1}
       ref={ref}
+      title={state2TooltipText(state)}
       variant="solid"
       {...rest}
     >

airflow/providers/edge3/plugins/www/src/components/ui/ScrollToAnchor.tsx

@@ -0,0 +1,49 @@
+/*!
+ * 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 { useEffect, useState } from "react";
+
+interface ScrollToAnchorProps {
+  inline?: ScrollLogicalPosition;
+  block?: ScrollLogicalPosition;
+}
+
+export const ScrollToAnchor = ({ block = "start", inline = "nearest" }: ScrollToAnchorProps): null => {
+  const [hash, setHash] = useState(() => window.location.hash);
+
+  useEffect(() => {
+    const onHashChange = () => setHash(window.location.hash);
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, []);
+
+  useEffect(() => {
+    if (hash) {
+      const element = document.getElementById(hash.slice(1));
+      if (element) {
+        element.scrollIntoView({
+          behavior: "auto",
+          block: block,
+          inline: inline,
+        });
+      }
+    }
+  }, [hash, block, inline]);
+
+  return null;
+};

airflow/providers/edge3/plugins/www/src/components/ui/createToaster.ts

@@ -0,0 +1,24 @@
+/*!
+ * 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 { createToaster } from "@chakra-ui/react";
+
+export const toaster = createToaster({
+  pauseOnPageIdle: true,
+  placement: "bottom-end",
+});

airflow/providers/edge3/plugins/www/src/components/ui/index.ts

@@ -18,3 +18,5 @@
  */
 
 export * from "./Alert";
+export * from "./createToaster";
+export * from "./ScrollToAnchor";

airflow/providers/edge3/plugins/www/src/context/colorMode/ColorModeProvider.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ThemeProvider } from "next-themes";
-import type { ThemeProviderProps } from "next-themes/dist/types";
+import { ThemeProvider, type ThemeProviderProps } from "next-themes";
 
 export const ColorModeProvider = (props: ThemeProviderProps) => (
   <ThemeProvider attribute="class" disableTransitionOnChange {...props} />

airflow/providers/edge3/plugins/www/src/context/colorMode/useColorMode.tsx

@@ -19,14 +19,11 @@
 import { useTheme } from "next-themes";
 
 export const useColorMode = () => {
-  const { resolvedTheme, setTheme } = useTheme();
-  const toggleColorMode = () => {
-    setTheme(resolvedTheme === "light" ? "dark" : "light");
-  };
+  const { resolvedTheme, setTheme, theme } = useTheme();
 
   return {
     colorMode: resolvedTheme as "dark" | "light" | undefined,
+    selectedTheme: theme as "dark" | "light" | "system" | undefined,
     setColorMode: setTheme,
-    toggleColorMode,
   };
 };

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

@@ -16,8 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Table } from "@chakra-ui/react";
+import { Box, Link, Table, Text } from "@chakra-ui/react";
 import { useUiServiceJobs } from "openapi/queries";
+import { Link as RouterLink } from "react-router-dom";
+import TimeAgo from "react-timeago";
 
 import { ErrorAlert } from "src/components/ErrorAlert";
 import { StateBadge } from "src/components/StateBadge";
@@ -33,9 +35,8 @@ export const JobsPage = () => {
   // Use DataTable as component from Airflow-Core UI
   // Add sorting
   // Add filtering
-  // Add links to see job details / jobs list
-  // Translation
-  if (data)
+  // Translation?
+  if (data?.jobs && data.jobs.length > 0)
     return (
       <Box p={2}>
         <Table.Root size="sm" interactive stickyHeader striped>
@@ -58,31 +59,67 @@ export const JobsPage = () => {
               <Table.Row
                 key={`${job.dag_id}.${job.run_id}.${job.task_id}.${job.map_index}.${job.try_number}`}
               >
-                <Table.Cell>{job.dag_id}</Table.Cell>
-                <Table.Cell>{job.run_id}</Table.Cell>
-                <Table.Cell>{job.task_id}</Table.Cell>
-                <Table.Cell>{job.map_index}</Table.Cell>
+                <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>
+                </Table.Cell>
+                <Table.Cell>
+                  <Link href={`../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}`}
+                    >
+                      {job.task_id}
+                    </Link>
+                  ) : (
+                    <Link
+                      href={`../dags/${job.dag_id}/runs/${job.run_id}/tasks/${job.task_id}?try_number=${job.try_number}`}
+                    >
+                      {job.task_id}
+                    </Link>
+                  )}
+                </Table.Cell>
+                <Table.Cell>{job.map_index >= 0 ? job.map_index : "-"}</Table.Cell>
                 <Table.Cell>{job.try_number}</Table.Cell>
                 <Table.Cell>
                   <StateBadge state={job.state}>{job.state}</StateBadge>
                 </Table.Cell>
                 <Table.Cell>{job.queue}</Table.Cell>
-                <Table.Cell>{job.queued_dttm}</Table.Cell>
-                <Table.Cell>{job.edge_worker}</Table.Cell>
-                <Table.Cell>{job.last_update}</Table.Cell>
+                <Table.Cell>
+                  {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>
+                </Table.Cell>
+                <Table.Cell>
+                  {job.last_update ? <TimeAgo date={job.last_update} live={false} /> : undefined}
+                </Table.Cell>
               </Table.Row>
             ))}
           </Table.Body>
         </Table.Root>
       </Box>
     );
+  if (data) {
+    return (
+      <Text as="div" pl={4} pt={1}>
+        Currently no jobs running. Start a Dag and then all active jobs should show up here. Note that after
+        some (configurable) time, jobs are purged from the list.
+      </Text>
+    );
+  }
   if (error) {
     return (
-      <Box p={2}>
-        <p>Unable to load data:</p>
+      <Text as="div" pl={4} pt={1}>
         <ErrorAlert error={error} />
-      </Box>
+      </Text>
     );
   }
-  return <Box p={2}>Loading...</Box>;
+  return (
+    <Text as="div" pl={4} pt={1}>
+      Loading...
+    </Text>
+  );
 };

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

@@ -16,27 +16,31 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Table } from "@chakra-ui/react";
+import { Box, Code, Link, List, Table, Text } from "@chakra-ui/react";
 import { useUiServiceWorker } from "openapi/queries";
+import { LuExternalLink } from "react-icons/lu";
+import TimeAgo from "react-timeago";
 
 import { ErrorAlert } from "src/components/ErrorAlert";
+import { WorkerOperations } from "src/components/WorkerOperations";
 import { WorkerStateBadge } from "src/components/WorkerStateBadge";
+import { ScrollToAnchor } from "src/components/ui";
 import { autoRefreshInterval } from "src/utils";
 
 export const WorkerPage = () => {
-  const { data, error } = useUiServiceWorker(undefined, {
+  const { data, error, refetch } = useUiServiceWorker(undefined, {
     enabled: true,
     refetchInterval: autoRefreshInterval,
   });
 
   // TODO to make it proper
   // Use DataTable as component from Airflow-Core UI
-  // Add actions for maintenance / delete of orphan worker
   // Add sorting
   // Add filtering
-  // Add links to see jobs on worker
-  // Translation
-  if (data)
+  // Add links with filter to see jobs on worker
+  // Add time zone support for time display
+  // Translation?
+  if (data?.workers && data.workers.length > 0)
     return (
       <Box p={2}>
         <Table.Root size="sm" interactive stickyHeader striped>
@@ -54,52 +58,78 @@ export const WorkerPage = () => {
           </Table.Header>
           <Table.Body>
             {data.workers.map((worker) => (
-              <Table.Row key={worker.worker_name}>
+              <Table.Row key={worker.worker_name} id={worker.worker_name}>
                 <Table.Cell>{worker.worker_name}</Table.Cell>
                 <Table.Cell>
                   <WorkerStateBadge state={worker.state}>{worker.state}</WorkerStateBadge>
                 </Table.Cell>
                 <Table.Cell>
                   {worker.queues ? (
-                    <ul>
+                    <List.Root>
                       {worker.queues.map((queue) => (
-                        <li key={queue}>{queue}</li>
+                        <List.Item key={queue}>{queue}</List.Item>
                       ))}
-                    </ul>
+                    </List.Root>
                   ) : (
-                    "(default)"
+                    "(all queues)"
                   )}
                 </Table.Cell>
-                <Table.Cell>{worker.first_online}</Table.Cell>
-                <Table.Cell>{worker.last_heartbeat}</Table.Cell>
+                <Table.Cell>
+                  {worker.first_online ? <TimeAgo date={worker.first_online} live={false} /> : undefined}
+                </Table.Cell>
+                <Table.Cell>
+                  {worker.last_heartbeat ? <TimeAgo date={worker.last_heartbeat} live={false} /> : undefined}
+                </Table.Cell>
                 <Table.Cell>{worker.jobs_active}</Table.Cell>
                 <Table.Cell>
                   {worker.sysinfo ? (
-                    <ul>
+                    <List.Root>
                       {Object.entries(worker.sysinfo).map(([key, value]) => (
-                        <li key={key}>
+                        <List.Item key={key}>
                           {key}: {value}
-                        </li>
+                        </List.Item>
                       ))}
-                    </ul>
+                    </List.Root>
                   ) : (
                     "N/A"
                   )}
                 </Table.Cell>
-                <Table.Cell>{worker.maintenance_comments}</Table.Cell>
+                <Table.Cell>
+                  <WorkerOperations worker={worker} onOperations={refetch} />
+                </Table.Cell>
               </Table.Row>
             ))}
           </Table.Body>
         </Table.Root>
+        <ScrollToAnchor />
       </Box>
     );
+  if (data) {
+    return (
+      <Text as="div" pl={4} pt={1}>
+        No known workers. Start one via <Code>airflow edge worker [...]</Code>. See{" "}
+        <Link
+          target="_blank"
+          variant="underline"
+          color="fg.info"
+          href="https://airflow.apache.org/docs/apache-airflow-providers-edge3/stable/deployment.html"
+        >
+          Edge Worker Deployment docs <LuExternalLink />
+        </Link>{" "}
+        how to deploy a new worker.
+      </Text>
+    );
+  }
   if (error) {
     return (
-      <Box p={2}>
-        <p>Unable to load data:</p>
+      <Text as="div" pl={4} pt={1}>
         <ErrorAlert error={error} />
-      </Box>
+      </Text>
     );
   }
-  return <Box p={2}>Loading...</Box>;
+  return (
+    <Text as="div" pl={4} pt={1}>
+      Loading...
+    </Text>
+  );
 };