Fix: Improved sites and subnets display for better user experience. No longer shows continual loading, instead displays default headers and "no results" message when appropriate.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 705f2157-ef97-4fbd-89e4-8c7f2ecaea90
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7ed01c5f-a82d-405a-b728-b2e3d127c60c/5e8d7bb0-ab4a-4d9f-a7d5-5f2fd4e43809.jpg
This commit is contained in:
alphaeusmote
2025-04-09 23:53:29 +00:00
parent 323771e2b1
commit 4434642f44
+139 -123
View File
@@ -579,7 +579,11 @@ export default function SitesPage() {
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{isLoadingSites || !selectedConnection ? ( {!selectedConnection ? (
<div className="text-center py-10">
<p className="text-muted-foreground">Please select a connection to view sites.</p>
</div>
) : isLoadingSites ? (
<div className="space-y-3"> <div className="space-y-3">
{[...Array(5)].map((_, i) => ( {[...Array(5)].map((_, i) => (
<div key={i} className="flex items-center space-x-4"> <div key={i} className="flex items-center space-x-4">
@@ -592,7 +596,7 @@ export default function SitesPage() {
<p className="text-destructive font-medium">Error loading sites</p> <p className="text-destructive font-medium">Error loading sites</p>
<p className="text-muted-foreground">{sitesError.message || "Unknown error occurred"}</p> <p className="text-muted-foreground">{sitesError.message || "Unknown error occurred"}</p>
</div> </div>
) : sitesData?.data && sitesData.data.length > 0 ? ( ) : (
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
@@ -604,70 +608,74 @@ export default function SitesPage() {
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{sitesData?.data?.map((site: AdSite) => ( {sitesData?.data && sitesData.data.length > 0 ? (
<TableRow key={site.objectGUID}> sitesData.data.map((site: AdSite) => (
<TableCell className="font-medium">{site.name}</TableCell> <TableRow key={site.objectGUID}>
<TableCell>{site.description || '—'}</TableCell> <TableCell className="font-medium">{site.name}</TableCell>
<TableCell>{site.location || '—'}</TableCell> <TableCell>{site.description || '—'}</TableCell>
<TableCell> <TableCell>{site.location || '—'}</TableCell>
{site.subnets && site.subnets.length > 0 <TableCell>
? site.subnets.map((subnet, idx) => ( {site.subnets && site.subnets.length > 0
<Badge key={idx} variant="outline" className="mr-1"> ? site.subnets.map((subnet, idx) => (
{subnet.split(',')[0].replace('CN=', '')} <Badge key={idx} variant="outline" className="mr-1">
</Badge> {subnet.split(',')[0].replace('CN=', '')}
)) </Badge>
: '—'} ))
</TableCell> : '—'}
<TableCell> </TableCell>
<div className="flex space-x-2"> <TableCell>
<Button <div className="flex space-x-2">
variant="outline" <Button
size="sm" variant="outline"
onClick={() => setEditingSite(site)} size="sm"
> onClick={() => setEditingSite(site)}
<Edit className="h-4 w-4" /> >
</Button> <Edit className="h-4 w-4" />
<AlertDialog> </Button>
<AlertDialogTrigger asChild> <AlertDialog>
<Button <AlertDialogTrigger asChild>
variant="outline" <Button
size="sm" variant="outline"
className="text-destructive" size="sm"
> className="text-destructive"
<Trash2 className="h-4 w-4" />
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
Are you sure you want to delete this site?
</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete the
site "{site.name}" and all of its data from the server.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={() => deleteSiteMutation.mutate(site.objectGUID)}
className="bg-destructive text-destructive-foreground"
> >
Delete <Trash2 className="h-4 w-4" />
</AlertDialogAction> </Button>
</AlertDialogFooter> </AlertDialogTrigger>
</AlertDialogContent> <AlertDialogContent>
</AlertDialog> <AlertDialogHeader>
</div> <AlertDialogTitle>
Are you sure you want to delete this site?
</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete the
site "{site.name}" and all of its data from the server.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={() => deleteSiteMutation.mutate(site.objectGUID)}
className="bg-destructive text-destructive-foreground"
>
Delete
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</TableCell>
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={5} className="text-center py-6">
<p className="text-muted-foreground">No sites found for this connection.</p>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} )}
</TableBody> </TableBody>
</Table> </Table>
) : (
<div className="text-center py-10">
<p className="text-muted-foreground">No sites found for this connection.</p>
</div>
)} )}
{/* Pagination for sites */} {/* Pagination for sites */}
@@ -832,7 +840,11 @@ export default function SitesPage() {
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{isLoadingSubnets || !selectedConnection ? ( {!selectedConnection ? (
<div className="text-center py-10">
<p className="text-muted-foreground">Please select a connection to view subnets.</p>
</div>
) : isLoadingSubnets ? (
<div className="space-y-3"> <div className="space-y-3">
{[...Array(5)].map((_, i) => ( {[...Array(5)].map((_, i) => (
<div key={i} className="flex items-center space-x-4"> <div key={i} className="flex items-center space-x-4">
@@ -845,7 +857,7 @@ export default function SitesPage() {
<p className="text-destructive font-medium">Error loading subnets</p> <p className="text-destructive font-medium">Error loading subnets</p>
<p className="text-muted-foreground">{subnetsError.message || "Unknown error occurred"}</p> <p className="text-muted-foreground">{subnetsError.message || "Unknown error occurred"}</p>
</div> </div>
) : subnetsData?.data && subnetsData.data.length > 0 ? ( ) : (
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
@@ -858,71 +870,75 @@ export default function SitesPage() {
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{subnetsData?.data?.map((subnet: AdSubnet) => ( {subnetsData?.data && subnetsData.data.length > 0 ? (
<TableRow key={subnet.objectGUID}> subnetsData.data.map((subnet: AdSubnet) => (
<TableCell className="font-medium">{subnet.name}</TableCell> <TableRow key={subnet.objectGUID}>
<TableCell>{subnet.cidr || '—'}</TableCell> <TableCell className="font-medium">{subnet.name}</TableCell>
<TableCell>{subnet.description || '—'}</TableCell> <TableCell>{subnet.cidr || '—'}</TableCell>
<TableCell>{subnet.location || '—'}</TableCell> <TableCell>{subnet.description || '—'}</TableCell>
<TableCell> <TableCell>{subnet.location || '—'}</TableCell>
{subnet.siteObject ? ( <TableCell>
<Badge variant="outline"> {subnet.siteObject ? (
{subnet.siteObject.split(',')[0].replace('CN=', '')} <Badge variant="outline">
</Badge> {subnet.siteObject.split(',')[0].replace('CN=', '')}
) : ( </Badge>
'—' ) : (
)} '—'
</TableCell> )}
<TableCell> </TableCell>
<div className="flex space-x-2"> <TableCell>
<Button <div className="flex space-x-2">
variant="outline" <Button
size="sm" variant="outline"
onClick={() => setEditingSubnet(subnet)} size="sm"
> onClick={() => setEditingSubnet(subnet)}
<Edit className="h-4 w-4" /> >
</Button> <Edit className="h-4 w-4" />
<AlertDialog> </Button>
<AlertDialogTrigger asChild> <AlertDialog>
<Button <AlertDialogTrigger asChild>
variant="outline" <Button
size="sm" variant="outline"
className="text-destructive" size="sm"
> className="text-destructive"
<Trash2 className="h-4 w-4" />
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
Are you sure you want to delete this subnet?
</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete the
subnet "{subnet.name}" and all of its data from the server.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={() => deleteSubnetMutation.mutate(subnet.objectGUID)}
className="bg-destructive text-destructive-foreground"
> >
Delete <Trash2 className="h-4 w-4" />
</AlertDialogAction> </Button>
</AlertDialogFooter> </AlertDialogTrigger>
</AlertDialogContent> <AlertDialogContent>
</AlertDialog> <AlertDialogHeader>
</div> <AlertDialogTitle>
Are you sure you want to delete this subnet?
</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete the
subnet "{subnet.name}" and all of its data from the server.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={() => deleteSubnetMutation.mutate(subnet.objectGUID)}
className="bg-destructive text-destructive-foreground"
>
Delete
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</TableCell>
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={6} className="text-center py-6">
<p className="text-muted-foreground">No subnets found for this connection.</p>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} )}
</TableBody> </TableBody>
</Table> </Table>
) : (
<div className="text-center py-10">
<p className="text-muted-foreground">No subnets found for this connection.</p>
</div>
)} )}
{/* Pagination for subnets */} {/* Pagination for subnets */}