diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/en/common.json b/airflow-core/src/airflow/ui/public/i18n/locales/en/common.json index 6da5b7cba6468..7821e6babf7c0 100644 --- a/airflow-core/src/airflow/ui/public/i18n/locales/en/common.json +++ b/airflow-core/src/airflow/ui/public/i18n/locales/en/common.json @@ -159,15 +159,6 @@ "placeholder": "Add a note...", "taskInstance": "Task Instance Note" }, - "pools": { - "deferred": "Deferred", - "open": "Open", - "pools_one": "pool", - "pools_other": "pools", - "queued": "Queued", - "running": "Running", - "scheduled": "Scheduled" - }, "reset": "Reset", "runId": "Run ID", "runTypes": { @@ -207,6 +198,7 @@ "failed": "Failed", "no_status": "No Status", "none": "No Status", + "open": "Open", "planned": "Planned", "queued": "Queued", "removed": "Removed", diff --git a/airflow-core/src/airflow/ui/src/components/PoolBar.tsx b/airflow-core/src/airflow/ui/src/components/PoolBar.tsx index d7b68b6b5600c..e19cce8ecdd00 100644 --- a/airflow-core/src/airflow/ui/src/components/PoolBar.tsx +++ b/airflow-core/src/airflow/ui/src/components/PoolBar.tsx @@ -16,11 +16,12 @@ * specific language governing permissions and limitations * under the License. */ -import { Flex, Link, Box } from "@chakra-ui/react"; +import { Box, Flex, Text, VStack, Link, HStack } 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 type { PoolResponse, TaskInstanceState } from "openapi/requests/types.gen"; +import { StateIcon } from "src/components/StateIcon"; import { Tooltip } from "src/components/ui"; import { SearchParamsKeys } from "src/constants/searchParams"; import { type Slots, slotConfigs } from "src/utils/slots"; @@ -36,52 +37,87 @@ export const PoolBar = ({ }) => { const { t: translate } = useTranslation("common"); + const isDashboard = Boolean(poolsWithSlotType); + const includeDeferredInBar = "include_deferred" in pool && pool.include_deferred; + const barSlots = ["running", "queued", "open"]; + + if (isDashboard || includeDeferredInBar) { + barSlots.push("deferred"); + } + const infoSlots = ["scheduled"]; + + if (!isDashboard && !includeDeferredInBar) { + infoSlots.push("deferred"); + } + + const preparedSlots = slotConfigs.map((config) => { + const slotType = config.key.replace("_slots", "") as TaskInstanceState; + + return { + ...config, + label: translate(`common:states.${slotType}`), + slotType, + slotValue: (pool[config.key] as number | undefined) ?? 0, + }; + }); + return ( - <> - {slotConfigs.map(({ color, icon, key }) => { - const slotValue = pool[key]; - const flexValue = slotValue / totalSlots || 0; + + + {preparedSlots + .filter((slot) => barSlots.includes(slot.slotType) && slot.slotValue > 0) + .map((slot) => { + const flexValue = slot.slotValue / totalSlots || 0; - if (flexValue === 0) { - return undefined; - } + const poolContent = ( + + + {slot.icon} + + {slot.slotValue} + + + + ); - const slotType = key.replace("_slots", ""); - const poolCount = poolsWithSlotType ? poolsWithSlotType[key] : 0; - const tooltipContent = `${translate(`pools.${slotType}`)}: ${slotValue} (${poolCount} ${translate("pools.pools", { count: poolCount })})`; - const poolContent = ( - - - {icon} - {slotValue} - - - ); + return slot.color !== "success" && "name" in pool ? ( + + + {poolContent} + + + ) : ( + + {poolContent} + + ); + })} + - return color !== "success" && "name" in pool ? ( - - - {poolContent} - - - ) : ( - - {poolContent} - - ); - })} - + + {preparedSlots + .filter((slot) => infoSlots.includes(slot.slotType) && slot.slotValue > 0) + .map((slot) => ( + + + + {slot.label}: {slot.slotValue} + + + ))} + + ); }; diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/PoolSummary/PoolSummary.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/PoolSummary/PoolSummary.tsx index 444b4424fe12c..65f4ba790958c 100644 --- a/airflow-core/src/airflow/ui/src/pages/Dashboard/PoolSummary/PoolSummary.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Dashboard/PoolSummary/PoolSummary.tsx @@ -99,9 +99,7 @@ export const PoolSummary = () => { {isLoading ? ( ) : ( - - - + )} ); diff --git a/airflow-core/src/airflow/ui/src/pages/Pools/PoolBarCard.tsx b/airflow-core/src/airflow/ui/src/pages/Pools/PoolBarCard.tsx index d1d416e9c7e12..218eb24a6b3c1 100644 --- a/airflow-core/src/airflow/ui/src/pages/Pools/PoolBarCard.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Pools/PoolBarCard.tsx @@ -61,11 +61,8 @@ const PoolBarCard = ({ pool }: PoolBarCardProps) => { )} - - - - + );