Show resources count in group settings

netbirdio · Jan 15, 2025 · d7268cb · d7268cb
1 parent a1c3e45
commit d7268cb
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/src/modules/settings/GroupsTable.tsx b/src/modules/settings/GroupsTable.tsx
@@ -4,7 +4,7 @@ import DataTableHeader from "@components/table/DataTableHeader";
 import { DataTableRowsPerPage } from "@components/table/DataTableRowsPerPage";
 import NoResults from "@components/ui/NoResults";
 import { ColumnDef, SortingState } from "@tanstack/react-table";
-import { FolderGit2Icon } from "lucide-react";
+import { FolderGit2Icon, Layers3Icon } from "lucide-react";
 import { usePathname } from "next/navigation";
 import React from "react";
 import AccessControlIcon from "@/assets/icons/AccessControlIcon";
@@ -138,6 +138,29 @@ export const GroupsTableColumns: ColumnDef<GroupUsage>[] = [
       />
     ),
   },
+  {
+    accessorKey: "resources_count",
+    header: ({ column }) => {
+      return (
+        <DataTableHeader
+          column={column}
+          tooltip={
+            <div className={"text-sm normal-case"}>Network Resources</div>
+          }
+        >
+          <Layers3Icon size={12} />
+        </DataTableHeader>
+      );
+    },
+    cell: ({ row }) => (
+      <GroupsCountCell
+        icon={<Layers3Icon size={10} />}
+        groupName={row.original.name}
+        text={"Network Resource(s)"}
+        count={row.original.resources_count}
+      />
+    ),
+  },
   {
     accessorKey: "users_count",
     header: ({ column }) => {
@@ -172,7 +195,8 @@ export const GroupsTableColumns: ColumnDef<GroupUsage>[] = [
         row.policies_count > 0 ||
         row.routes_count > 0 ||
         row.setup_keys_count > 0 ||
-        row.users_count > 0
+        row.users_count > 0 ||
+        row.resources_count > 0
       );
     },
   },
@@ -189,7 +213,7 @@ type Props = {
   headingTarget?: HTMLHeadingElement | null;
 };
 
-export default function GroupsTable({ headingTarget }: Props) {
+export default function GroupsTable({ headingTarget }: Readonly<Props>) {
   const groups = useGroupsUsage();
   const path = usePathname();
 

diff --git a/src/modules/settings/useGroupsUsage.tsx b/src/modules/settings/useGroupsUsage.tsx
@@ -16,6 +16,7 @@ export interface GroupUsage {
   routes_count: number;
   setup_keys_count: number;
   users_count: number;
+  resources_count: number;
 }
 
 export default function useGroupsUsage() {
@@ -126,6 +127,7 @@ export default function useGroupsUsage() {
         id: group.id,
         name: group.name,
         peers_count: group.peers_count,
+        resources_count: group.resources_count,
         policies_count: policyCount,
         nameservers_count: nameserverCount,
         routes_count: routeCount,