coryHawkvelt/gatehouse-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: display human-readable user and device names in network management

Browse Source
This commit is contained in:
cory
2026-05-28 11:11:48 +00:00
parent dc4e9fe366
commit a13e298d8a
4 changed files with 116 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/org/NetworkManagementPage.tsx
+13 -4
View File
@@ -621,7 +621,10 @@ export default function NetworkManagementPage() {
<Users className="w-4 h-4 text-primary" />
</div>
<div className="flex-1 min-w-0">
<p className="font-medium truncate font-mono text-sm">{userId}</p>
<p className="font-medium truncate text-sm">{userMemberships[0]?.user_name || userId}</p>
{userMemberships[0]?.user_email && (
<p className="text-xs text-muted-foreground">{userMemberships[0].user_email}</p>
)}
<p className="text-xs text-muted-foreground">
{userMemberships.length} device{userMemberships.length !== 1 ? "s" : ""}
{activeCount > 0 && <span className="text-green-600 ml-2">{activeCount} active</span>}
@@ -652,7 +655,10 @@ export default function NetworkManagementPage() {
<div key={m.id} className="flex items-start gap-3 p-3 pl-11">
<Monitor className="w-4 h-4 text-muted-foreground flex-shrink-0 mt-0.5" />
<div className="flex-1 min-w-0 space-y-1">
<p className="text-sm font-medium truncate">{m.device_id}</p>
<p className="text-sm font-medium truncate">{m.device_name || m.device_id}</p>
{m.device_node_id && (
<p className="text-xs text-muted-foreground font-mono">{m.device_node_id}</p>
)}
<div className="flex items-center gap-1 flex-wrap">
<ActiveBadge active={m.active} />
<Badge variant="outline" className="text-xs text-muted-foreground">
@@ -782,10 +788,13 @@ export default function NetworkManagementPage() {
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<p className="font-medium font-mono text-sm">{r.user_id}</p>
<p className="font-medium text-sm">{r.user_name || r.user_id}</p>
<ApprovalStateBadge state={r.state} />
<Badge variant="outline" className="text-xs capitalize">{r.grant_type}</Badge>
</div>
{r.user_email && (
<p className="text-xs text-muted-foreground">{r.user_email}</p>
)}
{r.justification && (
<p className="text-xs text-muted-foreground mt-1">"{r.justification}"</p>
)}
@@ -1021,7 +1030,7 @@ export default function NetworkManagementPage() {
<AlertDialogHeader>
<AlertDialogTitle>Remove all devices for this user?</AlertDialogTitle>
<AlertDialogDescription>
This will remove all memberships for user <span className="font-mono font-medium">{confirmRemoveUser}</span>. All of their devices will lose access to this network.
This will remove all memberships for user <span className="font-medium">{members.find(m => m.user_id === confirmRemoveUser)?.user_name || confirmRemoveUser}</span>. All of their devices will lose access to this network.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>