Fix poolbar counts (#53825)

Author: pierrejeambrun

airflow-core/src/airflow/ui/src/components/PoolBar.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Flex, Link } from "@chakra-ui/react";
+import { Flex, Link, Box } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { Link as RouterLink } from "react-router-dom";
 
@@ -54,13 +54,12 @@ export const PoolBar = ({
               alignItems="center"
               bg={`${color}.solid`}
               color="white"
-              flex={flexValue}
               gap={1}
               h="100%"
               justifyContent="center"
               px={1}
-              py={0.5}
               textAlign="center"
+              w="100%"
             >
               {icon}
               {slotValue}
@@ -69,11 +68,13 @@ export const PoolBar = ({
         );
 
         return color !== "success" && "name" in pool ? (
-          <Link asChild key={key}>
+          <Link asChild display="flex" flex={flexValue} key={key}>
             <RouterLink to={`/task_instances?state=${color}&pool=${pool.name}`}>{poolContent}</RouterLink>
           </Link>
         ) : (
-          poolContent
+          <Box display="flex" flex={flexValue} key={key}>
+            {poolContent}
+          </Box>
         );
       })}
     </>

airflow-core/src/airflow/ui/src/pages/Dashboard/PoolSummary/PoolSummary.tsx

@@ -37,7 +37,17 @@ export const PoolSummary = () => {
   const hasPoolsAccess = authLinks?.authorized_menu_items.includes("Pools");
 
   const pools = data?.pools;
-  const totalSlots = pools?.reduce((sum, pool) => sum + pool.slots, 0) ?? 0;
+  const totalSlots =
+    pools?.reduce(
+      (sum, pool) =>
+        sum +
+        pool.running_slots +
+        pool.queued_slots +
+        pool.deferred_slots +
+        pool.scheduled_slots +
+        pool.open_slots,
+      0,
+    ) ?? 0;
   const aggregatePool: Slots = {
     deferred_slots: 0,
     open_slots: 0,

airflow-core/src/airflow/ui/src/pages/Pools/PoolBarCard.tsx

@@ -64,7 +64,16 @@ const PoolBarCard = ({ pool }: PoolBarCardProps) => {
 
       <Box margin={4}>
         <Flex bg="gray.muted" borderRadius="md" h="20px" overflow="hidden" w="100%">
-          <PoolBar pool={pool} totalSlots={pool.slots} />
+          <PoolBar
+            pool={pool}
+            totalSlots={
+              pool.running_slots +
+              pool.queued_slots +
+              pool.deferred_slots +
+              pool.scheduled_slots +
+              pool.open_slots
+            }
+          />
         </Flex>
       </Box>
     </Box>