(airflow) branch main updated: Link pool state bar to filter taskinstances for the pool by state. (#51031)

[eladkal]

This is an automated email from the ASF dual-hosted git repository.

eladkal pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new 47e4fe6926f Link pool state bar to filter taskinstances for the pool 
by state. (#51031)
47e4fe6926f is described below

commit 47e4fe6926fda9ffbd595a0985f05c22e272a61f
Author: Karthikeyan Singaravelan <tir.kar...@gmail.com>
AuthorDate: Sun May 25 12:18:01 2025 +0530

    Link pool state bar to filter taskinstances for the pool by state. (#51031)
---
 airflow-core/src/airflow/ui/src/components/PoolBar.tsx  | 17 +++++++++++++----
 .../src/airflow/ui/src/constants/searchParams.ts        |  1 +
 .../ui/src/pages/TaskInstances/TaskInstances.tsx        |  4 ++++
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/components/PoolBar.tsx 
b/airflow-core/src/airflow/ui/src/components/PoolBar.tsx
index 560f2bcf4cc..81fc83c09df 100644
--- a/airflow-core/src/airflow/ui/src/components/PoolBar.tsx
+++ b/airflow-core/src/airflow/ui/src/components/PoolBar.tsx
@@ -16,9 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Flex } from "@chakra-ui/react";
+import { Flex, Link } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
+import { Link as RouterLink } from "react-router-dom";
 
+import type { PoolResponse } from "openapi/requests/types.gen";
 import { Tooltip } from "src/components/ui";
 import { type Slots, slotConfigs } from "src/utils/slots";
 
@@ -27,7 +29,7 @@ export const PoolBar = ({
   poolsWithSlotType,
   totalSlots,
 }: {
-  readonly pool: Slots;
+  readonly pool: PoolResponse | Slots;
   readonly poolsWithSlotType?: Slots;
   readonly totalSlots: number;
 }) => {
@@ -46,8 +48,7 @@ export const PoolBar = ({
         const slotType = key.replace("_slots", "");
         const poolCount = poolsWithSlotType ? poolsWithSlotType[key] : 0;
         const tooltipContent = `${translate(`pools.${slotType}`)}: 
${slotValue} (${poolCount} ${translate("pools.pools", { count: poolCount })})`;
-
-        return (
+        const poolContent = (
           <Tooltip content={tooltipContent} key={key}>
             <Flex
               alignItems="center"
@@ -66,6 +67,14 @@ export const PoolBar = ({
             </Flex>
           </Tooltip>
         );
+
+        return color !== "success" && "name" in pool ? (
+          <Link asChild key={key}>
+            <RouterLink 
to={`/task_instances?state=${color}&pool=${pool.name}`}>{poolContent}</RouterLink>
+          </Link>
+        ) : (
+          poolContent
+        );
       })}
     </>
   );
diff --git a/airflow-core/src/airflow/ui/src/constants/searchParams.ts 
b/airflow-core/src/airflow/ui/src/constants/searchParams.ts
index a8ec9b8dab2..7524490b7ed 100644
--- a/airflow-core/src/airflow/ui/src/constants/searchParams.ts
+++ b/airflow-core/src/airflow/ui/src/constants/searchParams.ts
@@ -25,6 +25,7 @@ export enum SearchParamsKeys {
   NAME_PATTERN = "name_pattern",
   OFFSET = "offset",
   PAUSED = "paused",
+  POOL = "pool",
   RUN_TYPE = "run_type",
   SORT = "sort",
   SOURCE = "log_source",
diff --git 
a/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx 
b/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx
index cf6e2987524..0c72f527890 100644
--- a/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx
@@ -44,6 +44,7 @@ type TaskInstanceRow = { row: { original: 
TaskInstanceResponse } };
 const {
   END_DATE: END_DATE_PARAM,
   NAME_PATTERN: NAME_PATTERN_PARAM,
+  POOL: POOL_PARAM,
   START_DATE: START_DATE_PARAM,
   STATE: STATE_PARAM,
 }: SearchParamsKeysType = SearchParamsKeys;
@@ -178,7 +179,9 @@ export const TaskInstances = () => {
   const filteredState = searchParams.getAll(STATE_PARAM);
   const startDate = searchParams.get(START_DATE_PARAM);
   const endDate = searchParams.get(END_DATE_PARAM);
+  const pool = searchParams.getAll(POOL_PARAM);
   const hasFilteredState = filteredState.length > 0;
+  const hasFilteredPool = pool.length > 0;
 
   const [taskDisplayNamePattern, setTaskDisplayNamePattern] = useState(
     searchParams.get(NAME_PATTERN_PARAM) ?? undefined,
@@ -194,6 +197,7 @@ export const TaskInstances = () => {
       limit: pagination.pageSize,
       offset: pagination.pageIndex * pagination.pageSize,
       orderBy,
+      pool: hasFilteredPool ? pool : undefined,
       startDateGte: startDate ?? undefined,
       state: hasFilteredState ? filteredState : undefined,
       taskDisplayNamePattern: groupId ?? taskDisplayNamePattern ?? undefined,