Update the service detail page to display all monitoring data (default and regional) in separate lines on the graph when "All Monitoring" is selected. Preserve the original functionality of other monitoring source options.
This commit is contained in:
Tola Leng
@@ -1,3 +1,4 @@
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { uptimeService } from '@/services/uptimeService';
|
||||
@@ -13,28 +14,24 @@ interface UseUptimeDataProps {
|
||||
export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseUptimeDataProps) => {
|
||||
const [historyItems, setHistoryItems] = useState<UptimeData[]>([]);
|
||||
|
||||
// Fetch real uptime history data if serviceId is provided - filtered for default monitoring with agent_id 1
|
||||
// Fetch ALL uptime history data including regional monitoring data
|
||||
const { data: uptimeData, isLoading, error, isFetching, refetch } = useQuery({
|
||||
queryKey: ['uptimeHistory', serviceId, serviceType],
|
||||
queryKey: ['allUptimeHistory', serviceId, serviceType],
|
||||
queryFn: async () => {
|
||||
if (!serviceId) {
|
||||
console.log('No serviceId provided, skipping fetch');
|
||||
return [];
|
||||
}
|
||||
console.log(`Fetching uptime data for service ${serviceId} of type ${serviceType} - filtering for default monitoring with agent_id 1`);
|
||||
console.log(`Fetching ALL uptime data for service ${serviceId} of type ${serviceType} - including regional monitoring`);
|
||||
|
||||
// Get raw uptime history data
|
||||
const rawData = await uptimeService.getUptimeHistory(serviceId, 50, undefined, undefined, serviceType);
|
||||
|
||||
// Filter for default monitoring records with agent_id 1 only
|
||||
const filteredData = rawData.filter(record => {
|
||||
// Keep records that either have no regional info (pure default) OR have agent_id 1
|
||||
return (!record.region_name && !record.agent_id) ||
|
||||
(record.agent_id === '1' || record.agent_id === 1);
|
||||
});
|
||||
// Include ALL monitoring data - both default and regional
|
||||
const allMonitoringData = rawData.filter(record => record.service_id === serviceId);
|
||||
|
||||
console.log(`Filtered ${rawData.length} records to ${filteredData.length} records for default monitoring with agent_id 1`);
|
||||
return filteredData;
|
||||
console.log(`Retrieved ${rawData.length} total records, filtered to ${allMonitoringData.length} records for service ${serviceId}`);
|
||||
return allMonitoringData;
|
||||
},
|
||||
enabled: !!serviceId,
|
||||
refetchInterval: 30000,
|
||||
@@ -44,21 +41,21 @@ export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseU
|
||||
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
|
||||
});
|
||||
|
||||
// Filter and process uptime data
|
||||
// Process uptime data to include both default and regional monitoring
|
||||
const processUptimeData = (data: UptimeData[], intervalSeconds: number): UptimeData[] => {
|
||||
if (!data || data.length === 0) return [];
|
||||
|
||||
console.log(`Processing ${data.length} filtered uptime records for service ${serviceId}`);
|
||||
console.log(`Processing ${data.length} uptime records (all monitoring data) for service ${serviceId}`);
|
||||
|
||||
// Sort data by timestamp (newest first)
|
||||
const sortedData = [...data].sort((a, b) =>
|
||||
new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
|
||||
);
|
||||
|
||||
// Take the most recent 20 records to ensure we have enough data
|
||||
const recentData = sortedData.slice(0, 20);
|
||||
// Take the most recent records to ensure we have enough data for both default and regional
|
||||
const recentData = sortedData.slice(0, 50);
|
||||
|
||||
console.log(`Using ${recentData.length} most recent filtered records`);
|
||||
console.log(`Using ${recentData.length} most recent records including both default and regional monitoring`);
|
||||
|
||||
return recentData;
|
||||
};
|
||||
@@ -66,12 +63,12 @@ export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseU
|
||||
// Update history items when data changes
|
||||
useEffect(() => {
|
||||
if (uptimeData && uptimeData.length > 0) {
|
||||
console.log(`Received ${uptimeData.length} filtered uptime records for service ${serviceId}`);
|
||||
console.log(`Received ${uptimeData.length} uptime records (all monitoring) for service ${serviceId}`);
|
||||
const processedData = processUptimeData(uptimeData, interval);
|
||||
setHistoryItems(processedData);
|
||||
} else if (!serviceId || (uptimeData && uptimeData.length === 0)) {
|
||||
// Generate placeholder data when no real data is available
|
||||
console.log(`No filtered uptime data available for service ${serviceId}, generating placeholder`);
|
||||
console.log(`No uptime data available for service ${serviceId}, generating placeholder`);
|
||||
|
||||
const statusValue = (status === "up" || status === "down" || status === "warning" || status === "paused")
|
||||
? status
|
||||
@@ -90,39 +87,9 @@ export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseU
|
||||
}
|
||||
}, [uptimeData, serviceId, status, interval]);
|
||||
|
||||
// Ensure we always have exactly 20 items for consistent display
|
||||
// Return display items - all monitoring data for tooltip usage
|
||||
const getDisplayItems = (): UptimeData[] => {
|
||||
const items = [...historyItems];
|
||||
|
||||
// If we have fewer than 20 items, pad with older placeholder data
|
||||
if (items.length < 20) {
|
||||
const lastItem = items.length > 0 ? items[items.length - 1] : null;
|
||||
const lastStatus = lastItem ? lastItem.status :
|
||||
(status === "up" || status === "down" || status === "warning" || status === "paused") ?
|
||||
status as "up" | "down" | "warning" | "paused" : "paused";
|
||||
|
||||
const paddingCount = 20 - items.length;
|
||||
const paddingItems: UptimeData[] = Array(paddingCount).fill(null).map((_, index) => {
|
||||
const baseTime = lastItem ? new Date(lastItem.timestamp).getTime() : Date.now();
|
||||
const timeOffset = (index + 1) * interval * 1000;
|
||||
|
||||
return {
|
||||
id: `padding-${serviceId}-${index}`,
|
||||
service_id: serviceId || "",
|
||||
serviceId: serviceId || "",
|
||||
timestamp: new Date(baseTime - timeOffset).toISOString(),
|
||||
status: lastStatus,
|
||||
responseTime: 0
|
||||
};
|
||||
});
|
||||
|
||||
items.push(...paddingItems);
|
||||
}
|
||||
|
||||
// Return exactly 20 items, sorted by timestamp (newest first)
|
||||
return items.slice(0, 20).sort((a, b) =>
|
||||
new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
|
||||
);
|
||||
return historyItems;
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user