pierrejeambrun commented on code in PR #59270:
URL: https://github.com/apache/airflow/pull/59270#discussion_r2691199350
##########
airflow-core/src/airflow/ui/src/components/PoolBar.tsx:
##########
@@ -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;
+ <VStack align="stretch" gap={1} w="100%">
+ <Flex bg="bg.muted" borderRadius="md" h="20px" overflow="hidden"
w="100%">
+ {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 = (
+ <Tooltip content={slot.label} key={slot.key} showArrow={true}>
+ <Flex
+ alignItems="center"
+ bg={`${slot.color}.solid`}
+ color={`${slot.color}.contrast`}
+ gap={1}
+ h="100%"
+ justifyContent="center"
+ overflow="hidden"
+ px={1}
+ w="100%"
+ >
+ {slot.icon}
+ <Text fontSize="xs" fontWeight="bold" truncate>
+ {slot.slotValue}
+ </Text>
+ </Flex>
+ </Tooltip>
+ );
- 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 = (
- <Tooltip content={tooltipContent} key={key}>
- <Flex
- alignItems="center"
- bg={`${color}.solid`}
- color={`${color}.contrast`}
- gap={1}
- h="100%"
- justifyContent="center"
- px={1}
- textAlign="center"
- w="100%"
- >
- {icon}
- {slotValue}
- </Flex>
- </Tooltip>
- );
+ return slot.color !== "success" && "name" in pool ? (
+ <Link asChild flex={flexValue} key={slot.key}>
+ <RouterLink
+
to={`/task_instances?${SearchParamsKeys.STATE}=${slot.color}&${SearchParamsKeys.POOL}=${pool.name}`}
+ >
+ {poolContent}
+ </RouterLink>
+ </Link>
+ ) : (
+ <Box flex={flexValue} key={slot.key}>
+ {poolContent}
+ </Box>
+ );
+ })}
+ </Flex>
- return color !== "success" && "name" in pool ? (
- <Link asChild display="flex" flex={flexValue} key={key}>
- <RouterLink
-
to={`/task_instances?${SearchParamsKeys.STATE}=${color}&${SearchParamsKeys.POOL}=${pool.name}`}
- >
- {poolContent}
- </RouterLink>
- </Link>
- ) : (
- <Box display="flex" flex={flexValue} key={key}>
- {poolContent}
- </Box>
- );
- })}
- </>
+ <HStack gap={4} wrap="wrap">
+ {preparedSlots
+ .filter((slot) => infoSlots.includes(slot.slotType) &&
slot.slotValue > 0)
+ .map((slot) => (
+ <HStack gap={1} key={slot.key}>
+ <StateIcon size={12} state={slot.slotType} />
+ <Text color="fg.muted" fontSize="xs" fontWeight="medium">
Review Comment:
We should probably have a link here too. Similarly to above non 'success'
state. But that can be a follow up item.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
