pierrejeambrun commented on code in PR #59270:
URL: https://github.com/apache/airflow/pull/59270#discussion_r2623754124
##########
airflow-core/src/airflow/ui/src/components/PoolBar.tsx:
##########
@@ -35,53 +36,101 @@ export const PoolBar = ({
readonly totalSlots: number;
}) => {
const { t: translate } = useTranslation("common");
+ const activeSlots = ["running", "queued", "open"];
+
+ if ("include_deferred" in pool && pool.include_deferred) {
+ activeSlots.push("deferred");
+ }
return (
- <>
- {slotConfigs.map(({ color, icon, key }) => {
- const slotValue = pool[key];
- const flexValue = slotValue / totalSlots || 0;
+ <Tooltip
+ content={
+ <VStack align="start" gap={1} p={1}>
+ {slotConfigs.map(({ key }) => {
+ const slotValue = pool[key];
+ const slotType = key.replace("_slots", "");
+
+ if (slotValue === 0) {
+ return undefined;
+ }
+
+ return (
+ <Flex align="center" gap={2} key={key}>
+ <StateIcon size={12} state={slotType as TaskInstanceState} />
+ <Text fontSize="xs">
+ {translate(`common:state.${slotType}`)}: {slotValue}
+ </Text>
+ </Flex>
+ );
+ })}
+ {"include_deferred" in pool && (
+ <Text color="fg.muted" fontSize="xs" mt={1}>
+ {translate("pools.includeDeferred")}: {pool.include_deferred ?
"True" : "False"}
+ </Text>
+ )}
+ {poolsWithSlotType ? (
+ <Text color="fg.muted" fontSize="xs" mt={1}>
+ {translate("pools.totalPools")}:{" "}
+ {Object.values(poolsWithSlotType).reduce((total, count) => total
+ count, 0)}
+ </Text>
+ ) : undefined}
+ </VStack>
+ }
+ >
+ <Flex bg="bg.muted" borderRadius="md" h="100%" overflow="hidden"
w="100%">
+ {slotConfigs
+ .filter((config) => {
+ const slotType = config.key.replace("_slots", "");
+
+ return activeSlots.includes(slotType);
+ })
+ .map(({ color, icon, key }) => {
+ const slotValue = pool[key];
+ const flexValue = totalSlots > 0 ? (slotValue / totalSlots) * 100
: 0;
Review Comment:
Why did we change how we compute the flex value? It doesn't seem related to
this PR. (*100, total slots check etc.)
##########
airflow-core/src/airflow/ui/src/components/PoolBar.tsx:
##########
@@ -35,53 +36,101 @@ export const PoolBar = ({
readonly totalSlots: number;
}) => {
const { t: translate } = useTranslation("common");
+ const activeSlots = ["running", "queued", "open"];
+
+ if ("include_deferred" in pool && pool.include_deferred) {
+ activeSlots.push("deferred");
+ }
return (
- <>
- {slotConfigs.map(({ color, icon, key }) => {
- const slotValue = pool[key];
- const flexValue = slotValue / totalSlots || 0;
+ <Tooltip
+ content={
+ <VStack align="start" gap={1} p={1}>
+ {slotConfigs.map(({ key }) => {
+ const slotValue = pool[key];
+ const slotType = key.replace("_slots", "");
+
+ if (slotValue === 0) {
+ return undefined;
+ }
+
+ return (
+ <Flex align="center" gap={2} key={key}>
+ <StateIcon size={12} state={slotType as TaskInstanceState} />
+ <Text fontSize="xs">
+ {translate(`common:state.${slotType}`)}: {slotValue}
+ </Text>
+ </Flex>
+ );
+ })}
+ {"include_deferred" in pool && (
+ <Text color="fg.muted" fontSize="xs" mt={1}>
+ {translate("pools.includeDeferred")}: {pool.include_deferred ?
"True" : "False"}
+ </Text>
+ )}
+ {poolsWithSlotType ? (
+ <Text color="fg.muted" fontSize="xs" mt={1}>
+ {translate("pools.totalPools")}:{" "}
+ {Object.values(poolsWithSlotType).reduce((total, count) => total
+ count, 0)}
+ </Text>
+ ) : undefined}
+ </VStack>
+ }
+ >
+ <Flex bg="bg.muted" borderRadius="md" h="100%" overflow="hidden"
w="100%">
+ {slotConfigs
+ .filter((config) => {
+ const slotType = config.key.replace("_slots", "");
+
+ return activeSlots.includes(slotType);
+ })
+ .map(({ color, icon, key }) => {
+ const slotValue = pool[key];
+ const flexValue = totalSlots > 0 ? (slotValue / totalSlots) * 100
: 0;
+
+ if (flexValue === 0) {
+ return undefined;
+ }
- if (flexValue === 0) {
- return undefined;
- }
+ const slotType = key.replace("_slots", "");
- 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>
- );
+ const poolContent = (
+ <Flex
+ alignItems="center"
+ bg={`${color}.solid`}
+ color={`${color}.contrast`}
+ gap={1}
+ h="100%"
+ justifyContent="center"
+ px={1}
+ textAlign="center"
+ title={`${slotType}: ${slotValue}`}
+ w="100%"
+ >
+ {icon}
+ {flexValue > 5 && (
+ <Text fontSize="xs" fontWeight="bold">
+ {slotValue}
+ </Text>
Review Comment:
Now we can have really 'thin' segment, and we have no icon etc... I think we
shouldn't change that part. (or at least not in this PR).
<img width="1381" height="194" alt="Image"
src="https://github.com/user-attachments/assets/b5bbb848-fbe3-42e0-a703-351834460074";
/>
##########
airflow-core/src/airflow/ui/src/components/PoolBar.tsx:
##########
@@ -35,53 +36,101 @@ export const PoolBar = ({
readonly totalSlots: number;
}) => {
const { t: translate } = useTranslation("common");
+ const activeSlots = ["running", "queued", "open"];
+
+ if ("include_deferred" in pool && pool.include_deferred) {
Review Comment:
The computation for PoolBar summary won't be accurate I think. Because
`influce_deferred` is not in `pool` and it won't be counted for pools with
'include_deferred=True'
--
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]
