Fix: Pass serviceType to ServiceUptimeHistory and

Refactor service detail page data fetching

application/src/components/services/ServiceDetailContainer/hooks/useServiceData.tsx

@@ -42,7 +42,12 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
 
   const fetchUptimeData = async (serviceId: string, start: Date, end: Date, selectedRange?: DateRangeOption | string) => {
     try {
-      console.log(`Fetching uptime data: ${start.toISOString()} to ${end.toISOString()} for range: ${selectedRange}`);
+      if (!service) {
+        console.log('No service data available for uptime fetch');
+        return [];
+      }
+
+      console.log(`Fetching uptime data: ${start.toISOString()} to ${end.toISOString()} for range: ${selectedRange}, service type: ${service.type}`);
       
       let limit = 500; // Default limit
       
@@ -54,8 +59,9 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
       
       console.log(`Using limit ${limit} for range ${selectedRange}`);
       
-      const history = await uptimeService.getUptimeHistory(serviceId, limit, start, end);
-      console.log(`Retrieved ${history.length} uptime records`);
+      // Use the service type to fetch from the correct collection
+      const history = await uptimeService.getUptimeHistory(serviceId, limit, start, end, service.type);
+      console.log(`Retrieved ${history.length} uptime records from collection for ${service.type} service`);
       
       // Sort by timestamp (newest first)
       const filteredHistory = [...history].sort((a, b) => 
@@ -97,6 +103,9 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
           id: serviceData.id,
           name: serviceData.name,
           url: serviceData.url || "",
+          host: serviceData.host || "",
+          port: serviceData.port || undefined,
+          domain: serviceData.domain || "",
           type: serviceData.service_type || serviceData.type || "HTTP",
           status: serviceData.status || "paused",
           responseTime: serviceData.response_time || serviceData.responseTime || 0,
@@ -109,10 +118,11 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
           alerts: serviceData.alerts || "unmuted"
         };
         
+        console.log(`Loaded service: ${formattedService.name} (${formattedService.type})`);
         setService(formattedService);
         
-        // Fetch initial uptime history with 24h default
-        await fetchUptimeData(serviceId, startDate, endDate, '24h');
+        // Fetch initial uptime history with 24h default - wait for service to be set
+        await new Promise(resolve => setTimeout(resolve, 100)); // Small delay to ensure state is updated
       } catch (error) {
         console.error("Error fetching service:", error);
         toast({
@@ -129,11 +139,11 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
     fetchServiceData();
   }, [serviceId, navigate, toast]);
 
-  // Update data when date range changes
+  // Update data when date range changes or when service is loaded
   useEffect(() => {
     if (serviceId && !isLoading && service) {
-      console.log(`Date range changed, refetching data for ${serviceId}: ${startDate.toISOString()} to ${endDate.toISOString()}`);
-      fetchUptimeData(serviceId, startDate, endDate);
+      console.log(`Date range changed or service loaded, refetching data for ${serviceId}: ${startDate.toISOString()} to ${endDate.toISOString()}`);
+      fetchUptimeData(serviceId, startDate, endDate, '24h');
     }
   }, [startDate, endDate, serviceId, isLoading, service]);
 

application/src/components/services/ServiceDetailContent.tsx

@@ -33,10 +33,17 @@ export const ServiceDetailContent = ({
       
       <div className="mb-4 md:mb-6 mt-6 md:mt-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 md:gap-0">
         <h2 className="text-lg md:text-xl font-medium">Response Time History</h2>
-        <DateRangeFilter 
-          onRangeChange={onDateRangeChange} 
-          selectedOption={selectedDateOption} 
-        />
+        <div className="flex flex-col md:flex-row items-start md:items-center gap-2">
+          <span className="text-sm text-muted-foreground">
+            Collection: {service.type.toLowerCase() === 'ping' || service.type.toLowerCase() === 'icmp' ? 'ping_data' : 
+                        service.type.toLowerCase() === 'dns' ? 'dns_data' : 
+                        service.type.toLowerCase() === 'tcp' ? 'tcp_data' : 'uptime_data'}
+          </span>
+          <DateRangeFilter 
+            onRangeChange={onDateRangeChange} 
+            selectedOption={selectedDateOption} 
+          />
+        </div>
       </div>
       
       {!hasUptimeData && (
@@ -61,4 +68,4 @@ export const ServiceDetailContent = ({
       </div>
     </div>
   );
-};
+};

application/src/components/services/ServiceUptimeHistory.tsx

@@ -1,6 +1,6 @@
 
 import { useQuery } from "@tanstack/react-query";
-import { UptimeData } from "@/types/service.types"; 
+import { UptimeData, Service } from "@/types/service.types"; 
 import { uptimeService } from "@/services/uptimeService";
 import { format, parseISO } from "date-fns";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
@@ -10,20 +10,25 @@ import { Check, X, AlertTriangle, Pause } from "lucide-react";
 
 interface ServiceUptimeHistoryProps {
   serviceId: string;
+  serviceType: string; // Add service type to determine collection
   startDate?: Date;
   endDate?: Date;
 }
 
 export function ServiceUptimeHistory({ 
   serviceId, 
+  serviceType,
   startDate = new Date(Date.now() - 24 * 60 * 60 * 1000), 
   endDate = new Date() 
 }: ServiceUptimeHistoryProps) {
   const { theme } = useTheme();
   const { data: uptimeHistory, isLoading, error } = useQuery({
-    queryKey: ['uptimeHistory', serviceId, startDate?.toISOString(), endDate?.toISOString()],
-    queryFn: () => uptimeService.getUptimeHistory(serviceId, 200, startDate, endDate),
-    enabled: !!serviceId,
+    queryKey: ['uptimeHistory', serviceId, serviceType, startDate?.toISOString(), endDate?.toISOString()],
+    queryFn: () => {
+      console.log(`ServiceUptimeHistory: Fetching for service ${serviceId} of type ${serviceType}`);
+      return uptimeService.getUptimeHistory(serviceId, 200, startDate, endDate, serviceType);
+    },
+    enabled: !!serviceId && !!serviceType,
     refetchInterval: 5000, // Refresh UI every 5 seconds
   });
 
@@ -135,4 +140,4 @@ export function ServiceUptimeHistory({
       </Table>
     </div>
   );
-}
+}