Add multi-select state filter to worker page

providers/edge3/src/airflow/providers/edge3/openapi/v2-edge-generated.yaml

@@ -573,6 +573,16 @@ paths:
           - type: string
           - type: 'null'
           title: Queue Name Pattern
+      - name: state
+        in: query
+        required: false
+        schema:
+          anyOf:
+          - type: array
+            items:
+              $ref: '#/components/schemas/EdgeWorkerState'
+          - type: 'null'
+          title: State
       responses:
         '200':
           description: Successful Response

providers/edge3/src/airflow/providers/edge3/plugins/www/openapi-gen/queries/common.ts

@@ -2,6 +2,7 @@
 
 import { UseQueryResult } from "@tanstack/react-query";
 import { JobsService, LogsService, MonitorService, UiService, WorkerService } from "../requests/services.gen";
+import { EdgeWorkerState } from "../requests/types.gen";
 export type LogsServiceLogfilePathDefaultResponse = Awaited<ReturnType<typeof LogsService.logfilePath>>;
 export type LogsServiceLogfilePathQueryResult<TData = LogsServiceLogfilePathDefaultResponse, TError = unknown> = UseQueryResult<TData, TError>;
 export const useLogsServiceLogfilePathKey = "LogsServiceLogfilePath";
@@ -20,10 +21,11 @@ export const UseMonitorServiceHealthKeyFn = (queryKey?: Array<unknown>) => [useM
 export type UiServiceWorkerDefaultResponse = Awaited<ReturnType<typeof UiService.worker>>;
 export type UiServiceWorkerQueryResult<TData = UiServiceWorkerDefaultResponse, TError = unknown> = UseQueryResult<TData, TError>;
 export const useUiServiceWorkerKey = "UiServiceWorker";
-export const UseUiServiceWorkerKeyFn = ({ queueNamePattern, workerNamePattern }: {
+export const UseUiServiceWorkerKeyFn = ({ queueNamePattern, state, workerNamePattern }: {
   queueNamePattern?: string;
+  state?: EdgeWorkerState[];
   workerNamePattern?: string;
-} = {}, queryKey?: Array<unknown>) => [useUiServiceWorkerKey, ...(queryKey ?? [{ queueNamePattern, workerNamePattern }])];
+} = {}, queryKey?: Array<unknown>) => [useUiServiceWorkerKey, ...(queryKey ?? [{ queueNamePattern, state, workerNamePattern }])];
 export type UiServiceJobsDefaultResponse = Awaited<ReturnType<typeof UiService.jobs>>;
 export type UiServiceJobsQueryResult<TData = UiServiceJobsDefaultResponse, TError = unknown> = UseQueryResult<TData, TError>;
 export const useUiServiceJobsKey = "UiServiceJobs";

providers/edge3/src/airflow/providers/edge3/plugins/www/openapi-gen/queries/ensureQueryData.ts

@@ -2,6 +2,7 @@
 
 import { type QueryClient } from "@tanstack/react-query";
 import { LogsService, MonitorService, UiService } from "../requests/services.gen";
+import { EdgeWorkerState } from "../requests/types.gen";
 import * as Common from "./common";
 export const ensureUseLogsServiceLogfilePathData = (queryClient: QueryClient, { authorization, dagId, mapIndex, runId, taskId, tryNumber }: {
   authorization: string;
@@ -12,8 +13,9 @@ export const ensureUseLogsServiceLogfilePathData = (queryClient: QueryClient, {
   tryNumber: number;
 }) => queryClient.ensureQueryData({ queryKey: Common.UseLogsServiceLogfilePathKeyFn({ authorization, dagId, mapIndex, runId, taskId, tryNumber }), queryFn: () => LogsService.logfilePath({ authorization, dagId, mapIndex, runId, taskId, tryNumber }) });
 export const ensureUseMonitorServiceHealthData = (queryClient: QueryClient) => queryClient.ensureQueryData({ queryKey: Common.UseMonitorServiceHealthKeyFn(), queryFn: () => MonitorService.health() });
-export const ensureUseUiServiceWorkerData = (queryClient: QueryClient, { queueNamePattern, workerNamePattern }: {
+export const ensureUseUiServiceWorkerData = (queryClient: QueryClient, { queueNamePattern, state, workerNamePattern }: {
   queueNamePattern?: string;
+  state?: EdgeWorkerState[];
   workerNamePattern?: string;
-} = {}) => queryClient.ensureQueryData({ queryKey: Common.UseUiServiceWorkerKeyFn({ queueNamePattern, workerNamePattern }), queryFn: () => UiService.worker({ queueNamePattern, workerNamePattern }) });
+} = {}) => queryClient.ensureQueryData({ queryKey: Common.UseUiServiceWorkerKeyFn({ queueNamePattern, state, workerNamePattern }), queryFn: () => UiService.worker({ queueNamePattern, state, workerNamePattern }) });
 export const ensureUseUiServiceJobsData = (queryClient: QueryClient) => queryClient.ensureQueryData({ queryKey: Common.UseUiServiceJobsKeyFn(), queryFn: () => UiService.jobs() });

providers/edge3/src/airflow/providers/edge3/plugins/www/openapi-gen/queries/prefetch.ts

@@ -2,6 +2,7 @@
 
 import { type QueryClient } from "@tanstack/react-query";
 import { LogsService, MonitorService, UiService } from "../requests/services.gen";
+import { EdgeWorkerState } from "../requests/types.gen";
 import * as Common from "./common";
 export const prefetchUseLogsServiceLogfilePath = (queryClient: QueryClient, { authorization, dagId, mapIndex, runId, taskId, tryNumber }: {
   authorization: string;
@@ -12,8 +13,9 @@ export const prefetchUseLogsServiceLogfilePath = (queryClient: QueryClient, { au
   tryNumber: number;
 }) => queryClient.prefetchQuery({ queryKey: Common.UseLogsServiceLogfilePathKeyFn({ authorization, dagId, mapIndex, runId, taskId, tryNumber }), queryFn: () => LogsService.logfilePath({ authorization, dagId, mapIndex, runId, taskId, tryNumber }) });
 export const prefetchUseMonitorServiceHealth = (queryClient: QueryClient) => queryClient.prefetchQuery({ queryKey: Common.UseMonitorServiceHealthKeyFn(), queryFn: () => MonitorService.health() });
-export const prefetchUseUiServiceWorker = (queryClient: QueryClient, { queueNamePattern, workerNamePattern }: {
+export const prefetchUseUiServiceWorker = (queryClient: QueryClient, { queueNamePattern, state, workerNamePattern }: {
   queueNamePattern?: string;
+  state?: EdgeWorkerState[];
   workerNamePattern?: string;
-} = {}) => queryClient.prefetchQuery({ queryKey: Common.UseUiServiceWorkerKeyFn({ queueNamePattern, workerNamePattern }), queryFn: () => UiService.worker({ queueNamePattern, workerNamePattern }) });
+} = {}) => queryClient.prefetchQuery({ queryKey: Common.UseUiServiceWorkerKeyFn({ queueNamePattern, state, workerNamePattern }), queryFn: () => UiService.worker({ queueNamePattern, state, workerNamePattern }) });
 export const prefetchUseUiServiceJobs = (queryClient: QueryClient) => queryClient.prefetchQuery({ queryKey: Common.UseUiServiceJobsKeyFn(), queryFn: () => UiService.jobs() });

providers/edge3/src/airflow/providers/edge3/plugins/www/openapi-gen/queries/queries.ts

@@ -2,7 +2,7 @@
 
 import { UseMutationOptions, UseQueryOptions, useMutation, useQuery } from "@tanstack/react-query";
 import { JobsService, LogsService, MonitorService, UiService, WorkerService } from "../requests/services.gen";
-import { MaintenanceRequest, PushLogsBody, TaskInstanceState, WorkerQueueUpdateBody, WorkerQueuesBody, WorkerStateBody } from "../requests/types.gen";
+import { EdgeWorkerState, MaintenanceRequest, PushLogsBody, TaskInstanceState, WorkerQueueUpdateBody, WorkerQueuesBody, WorkerStateBody } from "../requests/types.gen";
 import * as Common from "./common";
 export const useLogsServiceLogfilePath = <TData = Common.LogsServiceLogfilePathDefaultResponse, TError = unknown, TQueryKey extends Array<unknown> = unknown[]>({ authorization, dagId, mapIndex, runId, taskId, tryNumber }: {
   authorization: string;
@@ -13,10 +13,11 @@ export const useLogsServiceLogfilePath = <TData = Common.LogsServiceLogfilePathD
   tryNumber: number;
 }, queryKey?: TQueryKey, options?: Omit<UseQueryOptions<TData, TError>, "queryKey" | "queryFn">) => useQuery<TData, TError>({ queryKey: Common.UseLogsServiceLogfilePathKeyFn({ authorization, dagId, mapIndex, runId, taskId, tryNumber }, queryKey), queryFn: () => LogsService.logfilePath({ authorization, dagId, mapIndex, runId, taskId, tryNumber }) as TData, ...options });
 export const useMonitorServiceHealth = <TData = Common.MonitorServiceHealthDefaultResponse, TError = unknown, TQueryKey extends Array<unknown> = unknown[]>(queryKey?: TQueryKey, options?: Omit<UseQueryOptions<TData, TError>, "queryKey" | "queryFn">) => useQuery<TData, TError>({ queryKey: Common.UseMonitorServiceHealthKeyFn(queryKey), queryFn: () => MonitorService.health() as TData, ...options });
-export const useUiServiceWorker = <TData = Common.UiServiceWorkerDefaultResponse, TError = unknown, TQueryKey extends Array<unknown> = unknown[]>({ queueNamePattern, workerNamePattern }: {
+export const useUiServiceWorker = <TData = Common.UiServiceWorkerDefaultResponse, TError = unknown, TQueryKey extends Array<unknown> = unknown[]>({ queueNamePattern, state, workerNamePattern }: {
   queueNamePattern?: string;
+  state?: EdgeWorkerState[];
   workerNamePattern?: string;
-} = {}, queryKey?: TQueryKey, options?: Omit<UseQueryOptions<TData, TError>, "queryKey" | "queryFn">) => useQuery<TData, TError>({ queryKey: Common.UseUiServiceWorkerKeyFn({ queueNamePattern, workerNamePattern }, queryKey), queryFn: () => UiService.worker({ queueNamePattern, workerNamePattern }) as TData, ...options });
+} = {}, queryKey?: TQueryKey, options?: Omit<UseQueryOptions<TData, TError>, "queryKey" | "queryFn">) => useQuery<TData, TError>({ queryKey: Common.UseUiServiceWorkerKeyFn({ queueNamePattern, state, workerNamePattern }, queryKey), queryFn: () => UiService.worker({ queueNamePattern, state, workerNamePattern }) as TData, ...options });
 export const useUiServiceJobs = <TData = Common.UiServiceJobsDefaultResponse, TError = unknown, TQueryKey extends Array<unknown> = unknown[]>(queryKey?: TQueryKey, options?: Omit<UseQueryOptions<TData, TError>, "queryKey" | "queryFn">) => useQuery<TData, TError>({ queryKey: Common.UseUiServiceJobsKeyFn(queryKey), queryFn: () => UiService.jobs() as TData, ...options });
 export const useJobsServiceFetch = <TData = Common.JobsServiceFetchMutationResult, TError = unknown, TContext = unknown>(options?: Omit<UseMutationOptions<TData, TError, {
   authorization: string;

providers/edge3/src/airflow/providers/edge3/plugins/www/openapi-gen/queries/suspense.ts

@@ -2,6 +2,7 @@
 
 import { UseQueryOptions, useSuspenseQuery } from "@tanstack/react-query";
 import { LogsService, MonitorService, UiService } from "../requests/services.gen";
+import { EdgeWorkerState } from "../requests/types.gen";
 import * as Common from "./common";
 export const useLogsServiceLogfilePathSuspense = <TData = Common.LogsServiceLogfilePathDefaultResponse, TError = unknown, TQueryKey extends Array<unknown> = unknown[]>({ authorization, dagId, mapIndex, runId, taskId, tryNumber }: {
   authorization: string;
@@ -12,8 +13,9 @@ export const useLogsServiceLogfilePathSuspense = <TData = Common.LogsServiceLogf
   tryNumber: number;
 }, queryKey?: TQueryKey, options?: Omit<UseQueryOptions<TData, TError>, "queryKey" | "queryFn">) => useSuspenseQuery<TData, TError>({ queryKey: Common.UseLogsServiceLogfilePathKeyFn({ authorization, dagId, mapIndex, runId, taskId, tryNumber }, queryKey), queryFn: () => LogsService.logfilePath({ authorization, dagId, mapIndex, runId, taskId, tryNumber }) as TData, ...options });
 export const useMonitorServiceHealthSuspense = <TData = Common.MonitorServiceHealthDefaultResponse, TError = unknown, TQueryKey extends Array<unknown> = unknown[]>(queryKey?: TQueryKey, options?: Omit<UseQueryOptions<TData, TError>, "queryKey" | "queryFn">) => useSuspenseQuery<TData, TError>({ queryKey: Common.UseMonitorServiceHealthKeyFn(queryKey), queryFn: () => MonitorService.health() as TData, ...options });
-export const useUiServiceWorkerSuspense = <TData = Common.UiServiceWorkerDefaultResponse, TError = unknown, TQueryKey extends Array<unknown> = unknown[]>({ queueNamePattern, workerNamePattern }: {
+export const useUiServiceWorkerSuspense = <TData = Common.UiServiceWorkerDefaultResponse, TError = unknown, TQueryKey extends Array<unknown> = unknown[]>({ queueNamePattern, state, workerNamePattern }: {
   queueNamePattern?: string;
+  state?: EdgeWorkerState[];
   workerNamePattern?: string;
-} = {}, queryKey?: TQueryKey, options?: Omit<UseQueryOptions<TData, TError>, "queryKey" | "queryFn">) => useSuspenseQuery<TData, TError>({ queryKey: Common.UseUiServiceWorkerKeyFn({ queueNamePattern, workerNamePattern }, queryKey), queryFn: () => UiService.worker({ queueNamePattern, workerNamePattern }) as TData, ...options });
+} = {}, queryKey?: TQueryKey, options?: Omit<UseQueryOptions<TData, TError>, "queryKey" | "queryFn">) => useSuspenseQuery<TData, TError>({ queryKey: Common.UseUiServiceWorkerKeyFn({ queueNamePattern, state, workerNamePattern }, queryKey), queryFn: () => UiService.worker({ queueNamePattern, state, workerNamePattern }) as TData, ...options });
 export const useUiServiceJobsSuspense = <TData = Common.UiServiceJobsDefaultResponse, TError = unknown, TQueryKey extends Array<unknown> = unknown[]>(queryKey?: TQueryKey, options?: Omit<UseQueryOptions<TData, TError>, "queryKey" | "queryFn">) => useSuspenseQuery<TData, TError>({ queryKey: Common.UseUiServiceJobsKeyFn(queryKey), queryFn: () => UiService.jobs() as TData, ...options });

providers/edge3/src/airflow/providers/edge3/plugins/www/openapi-gen/requests/services.gen.ts

@@ -266,6 +266,7 @@ export class UiService {
      * @param data The data for the request.
      * @param data.workerNamePattern
      * @param data.queueNamePattern
+     * @param data.state
      * @returns WorkerCollectionResponse Successful Response
      * @throws ApiError
      */
@@ -275,7 +276,8 @@ export class UiService {
             url: '/edge_worker/ui/worker',
             query: {
                 worker_name_pattern: data.workerNamePattern,
-                queue_name_pattern: data.queueNamePattern
+                queue_name_pattern: data.queueNamePattern,
+                state: data.state
             },
             errors: {
                 422: 'Validation Error'

providers/edge3/src/airflow/providers/edge3/plugins/www/openapi-gen/requests/types.gen.ts

@@ -468,6 +468,7 @@ export type HealthResponse = {
 
 export type WorkerData = {
     queueNamePattern?: string | null;
+    state?: Array<EdgeWorkerState> | null;
     workerNamePattern?: string | null;
 };
 

providers/edge3/src/airflow/providers/edge3/plugins/www/src/components/ui/Select/Content.tsx

@@ -0,0 +1,37 @@
+/*!
+ * 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 { Select as ChakraSelect, Portal } from "@chakra-ui/react";
+import { forwardRef } from "react";
+
+type ContentProps = {
+  readonly portalled?: boolean;
+  readonly portalRef?: React.RefObject<HTMLElement>;
+} & ChakraSelect.ContentProps;
+
+export const Content = forwardRef<HTMLDivElement, ContentProps>((props, ref) => {
+  const { portalled = true, portalRef, ...rest } = props;
+
+  return (
+    <Portal container={portalRef} disabled={!portalled}>
+      <ChakraSelect.Positioner>
+        <ChakraSelect.Content {...rest} ref={ref} />
+      </ChakraSelect.Positioner>
+    </Portal>
+  );
+});

providers/edge3/src/airflow/providers/edge3/plugins/www/src/components/ui/Select/Item.tsx

@@ -0,0 +1,34 @@
+/*!
+ * 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.
+ */
+
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { Select as ChakraSelect } from "@chakra-ui/react";
+import { forwardRef } from "react";
+
+export const Item = forwardRef<HTMLDivElement, ChakraSelect.ItemProps>((props, ref) => {
+  const { children, item, ...rest } = props;
+
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    <ChakraSelect.Item item={item} key={item.value} {...rest} ref={ref}>
+      {children}
+      <ChakraSelect.ItemIndicator />
+    </ChakraSelect.Item>
+  );
+});

providers/edge3/src/airflow/providers/edge3/plugins/www/src/components/ui/Select/Root.tsx

@@ -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 { Select as ChakraSelect } from "@chakra-ui/react";
+import { forwardRef } from "react";
+
+export const Root = forwardRef<HTMLDivElement, ChakraSelect.RootProps>((props, ref) => (
+  <ChakraSelect.Root {...props} positioning={{ sameWidth: true, ...props.positioning }} ref={ref} />
+));

providers/edge3/src/airflow/providers/edge3/plugins/www/src/components/ui/Select/Trigger.tsx

@@ -0,0 +1,54 @@
+/*!
+ * 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 { Select as ChakraSelect } from "@chakra-ui/react";
+import { forwardRef } from "react";
+
+import { CloseButton } from "../CloseButton";
+
+type Props = {
+  readonly clearable?: boolean;
+  readonly isActive?: boolean;
+  readonly triggerProps?: ChakraSelect.TriggerProps;
+} & ChakraSelect.ControlProps;
+
+export const Trigger = forwardRef<HTMLButtonElement, Props>((props, ref) => {
+  const { children, clearable, isActive, triggerProps, ...rest } = props;
+
+  return (
+    <ChakraSelect.Control {...rest}>
+      <ChakraSelect.Trigger ref={ref} {...triggerProps}>
+        {children}
+      </ChakraSelect.Trigger>
+      <ChakraSelect.IndicatorGroup _rtl={{ bottom: 0, left: 0, right: "auto", top: 0 }}>
+        {clearable ? (
+          <ChakraSelect.ClearTrigger asChild>
+            <CloseButton
+              focusRingWidth="2px"
+              focusVisibleRing="inside"
+              pointerEvents="auto"
+              size="xs"
+              variant="plain"
+            />
+          </ChakraSelect.ClearTrigger>
+        ) : undefined}
+        <ChakraSelect.Indicator />
+      </ChakraSelect.IndicatorGroup>
+    </ChakraSelect.Control>
+  );
+});