IPAM tree total count for each nodes (#3872)

* adds descendants count in ipam tree * update count for children and hide if 0 * add test to verify counters * update tree ui for loading state * rename * align counter to the right
opsmill · Jul 22, 2024 · 0e90b1c · 0e90b1c
1 parent 39a8d67
commit 0e90b1c
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 3 deletions.
diff --git a/frontend/app/src/components/ui/tree-sheleton.tsx b/frontend/app/src/components/ui/tree-sheleton.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from "@/components/skeleton";
 
 export const TreeSkeleton = () => {
   return (
-    <div className="space-y-2 border rounded p-1.5">
+    <div className="flex-grow space-y-2 border rounded p-1.5">
       <Skeleton className="h-4 w-11/12" />
       <Skeleton className="h-4 w-8/12" />
       <Skeleton className="h-4 w-4/5" />

diff --git a/frontend/app/src/graphql/queries/ipam/prefixes.ts b/frontend/app/src/graphql/queries/ipam/prefixes.ts
@@ -15,6 +15,9 @@ export const GET_PREFIXES_ONLY = gql`
           children {
             count
           }
+          descendants {
+            count
+          }
         }
       }
     }
@@ -186,6 +189,9 @@ export const GET_TOP_LEVEL_PREFIXES = gql`
           children {
             count
           }
+          descendants {
+            count
+          }
         }
       }
     }

diff --git a/frontend/app/src/screens/ipam/ipam-tree/ipam-tree.tsx b/frontend/app/src/screens/ipam/ipam-tree/ipam-tree.tsx
@@ -19,6 +19,7 @@ import {
   getTreeItemAncestors,
   updateTreeData,
 } from "./utils";
+import { Badge } from "@/components/ui/badge";
 
 export default function IpamTree() {
   const { prefix } = useParams();
@@ -89,10 +90,13 @@ const IpamTreeItem = ({ element }: TreeItemProps) => {
     <Link
       to={url}
       tabIndex={-1}
-      className="flex items-center gap-2 overflow-hidden"
+      className="flex flex-grow items-center gap-2 overflow-hidden"
       data-testid="ipam-tree-item">
       {schema?.icon ? <Icon icon={schema.icon as string} /> : <div className="w-4" />}
-      <span className="truncate">{element.name}</span>
+      <span className="truncate flex-1">{element.name}</span>
+      {!!element.metadata?.descendantsCount && (
+        <Badge className="self-end">{element.metadata?.descendantsCount}</Badge>
+      )}
     </Link>
   );
 };
diff --git a/frontend/app/src/screens/ipam/ipam-tree/utils.ts b/frontend/app/src/screens/ipam/ipam-tree/utils.ts
@@ -13,6 +13,9 @@ export type PrefixNode = {
   children: {
     count: number;
   };
+  descendants: {
+    count: number;
+  };
   __typename: string;
 };
 
@@ -52,6 +55,7 @@ export const formatIPPrefixResponseForTreeView = (data: PrefixData): TreeItemPro
     isBranch: node.children.count > 0,
     metadata: {
       kind: node.__typename,
+      descendantsCount: node.descendants.count,
     },
   }));
 

diff --git a/frontend/app/tests/e2e/ipam/ipam-tree.spec.ts b/frontend/app/tests/e2e/ipam/ipam-tree.spec.ts
@@ -49,4 +49,13 @@ test.describe("/ipam - Ipam Tree", () => {
     await expect(page.getByText("Prefix10.0.0.0/8")).toBeVisible();
     expect(page.url()).toContain("/ipam/prefixes/");
   });
+
+  test("verify tree count", async ({ page }) => {
+    await page.goto("/ipam/prefixes/");
+    await expect(page.getByRole("link", { name: "/8 19" })).toBeVisible();
+    await page.getByRole("treeitem", { name: "/8 19" }).getByTestId("tree-item-toggle").click();
+    await expect(page.getByRole("link", { name: "/16 16" })).toBeVisible();
+    await expect(page.getByRole("link", { name: "10.0.0.0/16" })).toBeVisible();
+    await expect(page.getByRole("link", { name: "10.2.0.0/" })).toBeVisible();
+  });
 });