From dfe98f9fa6f034f0a222379403681b2aa49ec368 Mon Sep 17 00:00:00 2001 From: Tola Leng Date: Thu, 19 Jun 2025 17:35:12 +0700 Subject: [PATCH] Fix: Pass serviceType to ServiceUptimeHistory and Refactor service detail page data fetching --- .../hooks/useServiceData.tsx | 26 +++++++++++++------ .../services/ServiceDetailContent.tsx | 17 ++++++++---- .../services/ServiceUptimeHistory.tsx | 15 +++++++---- 3 files changed, 40 insertions(+), 18 deletions(-) diff --git a/application/src/components/services/ServiceDetailContainer/hooks/useServiceData.tsx b/application/src/components/services/ServiceDetailContainer/hooks/useServiceData.tsx index 32db1f8..8473786 100644 --- a/application/src/components/services/ServiceDetailContainer/hooks/useServiceData.tsx +++ b/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]); diff --git a/application/src/components/services/ServiceDetailContent.tsx b/application/src/components/services/ServiceDetailContent.tsx index 78dabb1..fd9aef9 100644 --- a/application/src/components/services/ServiceDetailContent.tsx +++ b/application/src/components/services/ServiceDetailContent.tsx @@ -33,10 +33,17 @@ export const ServiceDetailContent = ({

Response Time History

- +
+ + 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'} + + +
{!hasUptimeData && ( @@ -61,4 +68,4 @@ export const ServiceDetailContent = ({ ); -}; +}; \ No newline at end of file diff --git a/application/src/components/services/ServiceUptimeHistory.tsx b/application/src/components/services/ServiceUptimeHistory.tsx index 11fa123..9dca3a6 100644 --- a/application/src/components/services/ServiceUptimeHistory.tsx +++ b/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({ ); -} +} \ No newline at end of file