Feature/add state badge to edge react UI (#54993)

* Add colored status badge to Edge Worker react UI

* Remove outdated comment after eslint exception was removed

Author: jscheffl

providers/edge3/src/airflow/providers/edge3/plugins/www/dist/main.umd.cjs

@@ -0,0 +1,43 @@
+/*!
+ * 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 { Badge, type BadgeProps } from "@chakra-ui/react";
+import type { TaskInstanceState } from "openapi/requests/types.gen";
+import * as React from "react";
+
+import { StateIcon } from "./StateIcon";
+
+export type Props = {
+  readonly state?: TaskInstanceState | null;
+} & BadgeProps;
+
+export const StateBadge = React.forwardRef<HTMLDivElement, Props>(({ children, state, ...rest }, ref) => (
+  <Badge
+    borderRadius="full"
+    colorPalette={state === null ? "none" : state}
+    fontSize="sm"
+    px={children === undefined ? 1 : 2}
+    py={1}
+    ref={ref}
+    variant="solid"
+    {...rest}
+  >
+    {state === undefined ? undefined : <StateIcon state={state} />}
+    {children}
+  </Badge>
+));

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

@@ -0,0 +1,58 @@
+/*!
+ * 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 { TaskInstanceState } from "openapi/requests/types.gen";
+import type { IconBaseProps } from "react-icons";
+import { FiActivity, FiCalendar, FiRepeat, FiSkipForward, FiSlash, FiWatch, FiX } from "react-icons/fi";
+import { LuCalendarSync, LuCheck, LuCircleDashed, LuCircleFadingArrowUp, LuRedo2 } from "react-icons/lu";
+import { PiQueue } from "react-icons/pi";
+
+type Props = {
+  readonly state?: TaskInstanceState | null;
+} & IconBaseProps;
+
+export const StateIcon = ({ state, ...rest }: Props) => {
+  switch (state) {
+    case "deferred":
+      return <FiWatch {...rest} />;
+    case "failed":
+      return <FiX {...rest} />;
+    case "queued":
+      return <PiQueue {...rest} />;
+    case "removed":
+      return <FiSlash {...rest} />;
+    case "restarting":
+      return <FiRepeat {...rest} />;
+    case "running":
+      return <FiActivity {...rest} />;
+    case "scheduled":
+      return <FiCalendar {...rest} />;
+    case "skipped":
+      return <FiSkipForward {...rest} />;
+    case "success":
+      return <LuCheck {...rest} />;
+    case "up_for_reschedule":
+      return <LuCalendarSync {...rest} />;
+    case "up_for_retry":
+      return <LuRedo2 {...rest} />;
+    case "upstream_failed":
+      return <LuCircleFadingArrowUp {...rest} />;
+    default:
+      return <LuCircleDashed {...rest} />;
+  }
+};

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

@@ -0,0 +1,71 @@
+/*!
+ * 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 { Badge, type BadgeProps } from "@chakra-ui/react";
+import type { EdgeWorkerState } from "openapi/requests/types.gen";
+import * as React from "react";
+
+import { WorkerStateIcon } from "./WorkerStateIcon";
+
+const state2Color = (state: EdgeWorkerState | null | undefined) => {
+  switch (state) {
+    case "starting":
+    case "maintenance request":
+    case "maintenance exit":
+      return "yellow";
+    case "running":
+      return "green";
+    case "idle":
+      return "teal";
+    case "shutdown request":
+    case "terminating":
+      return "purple";
+    case "offline":
+    case "offline maintenance":
+      return "black";
+    case "unknown":
+      return "red";
+    case "maintenance mode":
+    case "maintenance pending":
+      return "orange";
+    default:
+      return "gray";
+  }
+};
+
+export type Props = {
+  readonly state?: EdgeWorkerState | null;
+} & BadgeProps;
+
+export const WorkerStateBadge = React.forwardRef<HTMLDivElement, Props>(
+  ({ children, state, ...rest }, ref) => (
+    <Badge
+      borderRadius="full"
+      colorPalette={state2Color(state)}
+      fontSize="sm"
+      px={children === undefined ? 1 : 2}
+      py={1}
+      ref={ref}
+      variant="solid"
+      {...rest}
+    >
+      {state === undefined ? undefined : <WorkerStateIcon state={state} />}
+      {children}
+    </Badge>
+  ),
+);

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

@@ -0,0 +1,57 @@
+/*!
+ * 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 { EdgeWorkerState } from "openapi/requests/types.gen";
+import type { IconBaseProps } from "react-icons";
+import { BiSolidLeaf } from "react-icons/bi";
+import { FiActivity, FiArrowDownRight, FiWatch } from "react-icons/fi";
+import { HiOutlineWrench, HiOutlineWrenchScrewdriver } from "react-icons/hi2";
+import { IoCloudOfflineOutline } from "react-icons/io5";
+import { LuCircleDashed } from "react-icons/lu";
+import { RiWifiOffLine } from "react-icons/ri";
+
+type Props = {
+  readonly state?: EdgeWorkerState | null;
+} & IconBaseProps;
+
+export const WorkerStateIcon = ({ state, ...rest }: Props) => {
+  switch (state) {
+    case "starting":
+      return <FiWatch {...rest} />;
+    case "running":
+      return <FiActivity {...rest} />;
+    case "idle":
+      return <BiSolidLeaf {...rest} />;
+    case "shutdown request":
+    case "terminating":
+      return <FiArrowDownRight {...rest} />;
+    case "offline":
+      return <IoCloudOfflineOutline {...rest} />;
+    case "unknown":
+      return <RiWifiOffLine {...rest} />;
+    case "maintenance request":
+    case "maintenance pending":
+    case "maintenance exit":
+      return <HiOutlineWrench {...rest} />;
+    case "maintenance mode":
+    case "offline maintenance":
+      return <HiOutlineWrenchScrewdriver {...rest} />;
+    default:
+      return <LuCircleDashed {...rest} />;
+  }
+};

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

@@ -20,6 +20,7 @@ import { Box, Table } from "@chakra-ui/react";
 import { useUiServiceJobs } from "openapi/queries";
 
 import { ErrorAlert } from "src/components/ErrorAlert";
+import { StateBadge } from "src/components/StateBadge";
 import { autoRefreshInterval } from "src/utils";
 
 export const JobsPage = () => {
@@ -29,7 +30,6 @@ export const JobsPage = () => {
   });
 
   // TODO to make it proper
-  // Beautification of state like in Airflow 2
   // Use DataTable as component from Airflow-Core UI
   // Add sorting
   // Add filtering
@@ -63,7 +63,9 @@ export const JobsPage = () => {
                 <Table.Cell>{job.task_id}</Table.Cell>
                 <Table.Cell>{job.map_index}</Table.Cell>
                 <Table.Cell>{job.try_number}</Table.Cell>
-                <Table.Cell>{job.state}</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>

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

@@ -20,6 +20,7 @@ import { Box, Table } from "@chakra-ui/react";
 import { useUiServiceWorker } from "openapi/queries";
 
 import { ErrorAlert } from "src/components/ErrorAlert";
+import { WorkerStateBadge } from "src/components/WorkerStateBadge";
 import { autoRefreshInterval } from "src/utils";
 
 export const WorkerPage = () => {
@@ -29,7 +30,6 @@ export const WorkerPage = () => {
   });
 
   // TODO to make it proper
-  // Beautification of state like in Airflow 2
   // Use DataTable as component from Airflow-Core UI
   // Add actions for maintenance / delete of orphan worker
   // Add sorting
@@ -56,8 +56,20 @@ export const WorkerPage = () => {
             {data.workers.map((worker) => (
               <Table.Row key={worker.worker_name}>
                 <Table.Cell>{worker.worker_name}</Table.Cell>
-                <Table.Cell>{worker.state}</Table.Cell>
-                <Table.Cell>{worker.queues}</Table.Cell>
+                <Table.Cell>
+                  <WorkerStateBadge state={worker.state}>{worker.state}</WorkerStateBadge>
+                </Table.Cell>
+                <Table.Cell>
+                  {worker.queues ? (
+                    <ul>
+                      {worker.queues.map((queue) => (
+                        <li key={queue}>{queue}</li>
+                      ))}
+                    </ul>
+                  ) : (
+                    "(default)"
+                  )}
+                </Table.Cell>
                 <Table.Cell>{worker.first_online}</Table.Cell>
                 <Table.Cell>{worker.last_heartbeat}</Table.Cell>
                 <Table.Cell>{worker.jobs_active}</Table.Cell>

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

@@ -1 +1 @@
-33ac5e99982b8cf9795aff82a9b08baf5a5c2d13d71d1be72a5ffd664f8e14c1
+d780858c70355a081b2486871c18d5f3c579f04129b3b15e7c6f691a1a3a2c12