Improve AD site and subnet data display by adding query parameter handling and error states.

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/b062fde2-2444-45a7-806d-d418b9a80952.jpg

client/src/lib/queryClient.ts

@@ -29,7 +29,28 @@ export const getQueryFn: <T>(options: {
 }) => QueryFunction<T> =
   ({ on401: unauthorizedBehavior }) =>
   async ({ queryKey }) => {
-    const res = await fetch(queryKey[0] as string, {
+    let url = queryKey[0] as string;
+    
+    // Handle query parameters if they exist in the second element of queryKey
+    if (queryKey.length > 1 && typeof queryKey[1] === 'object') {
+      const params = new URLSearchParams();
+      const queryParams = queryKey[1] as Record<string, any>;
+      
+      Object.entries(queryParams).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+          params.append(key, value.toString());
+        }
+      });
+      
+      const queryString = params.toString();
+      if (queryString) {
+        url = `${url}${url.includes('?') ? '&' : '?'}${queryString}`;
+      }
+    }
+    
+    console.log('Fetching URL:', url);
+    
+    const res = await fetch(url, {
       credentials: "include",
     });
 

client/src/pages/sites-page.tsx

@@ -4,7 +4,7 @@ import { useQuery, useMutation } from "@tanstack/react-query";
 import { queryClient } from "@/lib/queryClient";
 import { useLocation } from "wouter";
 import { Button } from "@/components/ui/button";
-import { Plus, Edit, Trash2, RefreshCw, HardDrive, Network } from "lucide-react";
+import { Plus, Edit, Trash2, RefreshCw, HardDrive, Network, ChevronLeft } from "lucide-react";
 import {
   Dialog,
   DialogContent,
@@ -171,8 +171,9 @@ export default function SitesPage() {
     data: sitesData,
     isLoading: isLoadingSites,
     refetch: refetchSites,
+    error: sitesError
   } = useQuery<ApiResponse<AdSite>>({
-    queryKey: [`/api/connections/${selectedConnection}/ad-sites?top=${MAX_ITEMS_PER_PAGE}&skip=${(currentSitePage - 1) * MAX_ITEMS_PER_PAGE}`],
+    queryKey: selectedConnection ? [`/api/connections/${selectedConnection}/ad-sites`, { top: MAX_ITEMS_PER_PAGE, skip: (currentSitePage - 1) * MAX_ITEMS_PER_PAGE }] : [],
     enabled: !!selectedConnection,
   });
   
@@ -181,13 +182,20 @@ export default function SitesPage() {
     data: subnetsData,
     isLoading: isLoadingSubnets,
     refetch: refetchSubnets,
+    error: subnetsError
   } = useQuery<ApiResponse<AdSubnet>>({
-    queryKey: [`/api/connections/${selectedConnection}/ad-subnets?top=${MAX_ITEMS_PER_PAGE}&skip=${(currentSubnetPage - 1) * MAX_ITEMS_PER_PAGE}`],
+    queryKey: selectedConnection ? [`/api/connections/${selectedConnection}/ad-subnets`, { top: MAX_ITEMS_PER_PAGE, skip: (currentSubnetPage - 1) * MAX_ITEMS_PER_PAGE }] : [],
     enabled: !!selectedConnection,
   });
   
   // Update pagination information when data changes
   useEffect(() => {
+    // Debug logging
+    console.log("Sites Data:", sitesData);
+    console.log("Sites Error:", sitesError);
+    console.log("Subnets Data:", subnetsData);
+    console.log("Subnets Error:", subnetsError);
+    
     if (sitesData?.metadata) {
       setTotalSitePages(sitesData.metadata.totalPages || 1);
     }
@@ -195,7 +203,7 @@ export default function SitesPage() {
     if (subnetsData?.metadata) {
       setTotalSubnetPages(subnetsData.metadata.totalPages || 1);
     }
-  }, [sitesData, subnetsData]);
+  }, [sitesData, subnetsData, sitesError, subnetsError]);
   
   // Site form setup
   const siteForm = useForm<SiteFormValues>({
@@ -481,7 +489,18 @@ export default function SitesPage() {
   return (
     <div className="container mx-auto py-6">
       <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold">AD Sites and Subnets</h1>
+        <div className="flex items-center gap-4">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setLocation("/")}
+            className="flex items-center gap-2"
+          >
+            <ChevronLeft className="h-4 w-4" />
+            Back to Dashboard
+          </Button>
+          <h1 className="text-3xl font-bold">AD Sites and Subnets</h1>
+        </div>
         <div className="flex items-center gap-4">
           <Select
             value={selectedConnection?.toString() || ""}
@@ -568,6 +587,11 @@ export default function SitesPage() {
                     </div>
                   ))}
                 </div>
+              ) : sitesError ? (
+                <div className="text-center py-10">
+                  <p className="text-destructive font-medium">Error loading sites</p>
+                  <p className="text-muted-foreground">{sitesError.message || "Unknown error occurred"}</p>
+                </div>
               ) : sitesData?.data && sitesData.data.length > 0 ? (
                 <Table>
                   <TableHeader>
@@ -816,6 +840,11 @@ export default function SitesPage() {
                     </div>
                   ))}
                 </div>
+              ) : subnetsError ? (
+                <div className="text-center py-10">
+                  <p className="text-destructive font-medium">Error loading subnets</p>
+                  <p className="text-muted-foreground">{subnetsError.message || "Unknown error occurred"}</p>
+                </div>
               ) : subnetsData?.data && subnetsData.data.length > 0 ? (
                 <Table>
                   <TableHeader>