Fix: Historical Performance date filter

Ensure date filter respects server ID and displays correct data for 1 day  date filter
This commit is contained in:
samang-dauth
2025-07-02 17:44:11 +07:00
parent bdcf5c75b9
commit d6793f104c
3 changed files with 147 additions and 12 deletions
@@ -28,9 +28,10 @@ export const ServerHistoryCharts = ({ serverId }: ServerHistoryChartsProps) => {
} = useQuery({
queryKey: ['server-metrics-history', serverId, timeRange],
queryFn: async () => {
console.log('ServerHistoryCharts: Fetching metrics for serverId:', serverId);
console.log('ServerHistoryCharts: Fetching metrics for serverId:', serverId, 'timeRange:', timeRange);
const result = await serverService.getServerMetrics(serverId, timeRange);
console.log('ServerHistoryCharts: Raw metrics result:', result);
console.log('ServerHistoryCharts: Raw metrics result for timeRange', timeRange, ':', result?.length || 0, 'records');
console.log('ServerHistoryCharts: First 3 records:', result?.slice(0, 3));
return result;
},
enabled: !!serverId,
@@ -47,7 +48,9 @@ export const ServerHistoryCharts = ({ serverId }: ServerHistoryChartsProps) => {
timeRange
});
console.log('ServerHistoryCharts: About to format chart data with', metrics?.length || 0, 'metrics for timeRange:', timeRange);
const chartData = formatChartData(metrics, timeRange);
console.log('ServerHistoryCharts: After formatting, got', chartData?.length || 0, 'chart data points');
const getGridColor = () => theme === 'dark' ? '#374151' : '#e5e7eb';
const getAxisColor = () => theme === 'dark' ? '#9ca3af' : '#6b7280';
@@ -55,11 +55,24 @@ export const filterMetricsByTimeRange = (metrics: any[], timeRange: TimeRange):
if (!selectedRange) return metrics;
const cutoffTime = new Date(now.getTime() - (selectedRange.hours * 60 * 60 * 1000));
console.log('filterMetricsByTimeRange: timeRange:', timeRange, 'cutoffTime:', cutoffTime.toISOString(), 'now:', now.toISOString());
return metrics.filter(metric => {
const filtered = metrics.filter(metric => {
const metricTime = new Date(metric.created || metric.timestamp);
return metricTime >= cutoffTime;
const isValid = metricTime >= cutoffTime;
if (!isValid && metrics.indexOf(metric) < 3) {
console.log('filterMetricsByTimeRange: Filtered out metric:', {
metricTime: metricTime.toISOString(),
cutoffTime: cutoffTime.toISOString(),
created: metric.created,
timestamp: metric.timestamp
});
}
return isValid;
});
console.log('filterMetricsByTimeRange: Filtered', metrics.length, 'to', filtered.length, 'metrics');
return filtered;
};
const formatTimestamp = (timestamp: string, timeRange: TimeRange): string => {
@@ -95,7 +108,19 @@ const formatTimestamp = (timestamp: string, timeRange: TimeRange): string => {
};
export const formatChartData = (metrics: any[], timeRange: TimeRange) => {
console.log('formatChartData: Input metrics count:', metrics?.length || 0, 'timeRange:', timeRange);
const filteredMetrics = filterMetricsByTimeRange(metrics, timeRange);
console.log('formatChartData: After time filtering:', filteredMetrics?.length || 0, 'metrics');
if (filteredMetrics.length > 0) {
console.log('formatChartData: First filtered metric:', filteredMetrics[0]);
console.log('formatChartData: Sample timestamps:', filteredMetrics.slice(0, 3).map(m => ({
created: m.created,
timestamp: m.timestamp,
both: new Date(m.created || m.timestamp).toISOString()
})));
}
return filteredMetrics.slice(0, 100).reverse().map((metric, index) => {
const cpuUsage = typeof metric.cpu_usage === 'string' ?
+115 -8
View File
@@ -35,15 +35,20 @@ export const serverService = {
console.log('serverService.getServerMetrics: Could not fetch server details:', error);
}
// Use the server's server_id field if available, otherwise use the serverId
// Try multiple filter strategies to find data
let filter = '';
let metricsServerId = serverId;
// Strategy 1: Use server.server_id if available
if (server && server.server_id) {
metricsServerId = server.server_id;
console.log('serverService.getServerMetrics: Using server.server_id for metrics:', metricsServerId);
filter = `server_id = "${metricsServerId}"`;
console.log('serverService.getServerMetrics: Strategy 1 - Using server.server_id for metrics:', metricsServerId);
} else {
// Strategy 2: Use the serverId directly
filter = `server_id = "${serverId}"`;
console.log('serverService.getServerMetrics: Strategy 2 - Using serverId directly for metrics:', serverId);
}
// Build filter for server_id and time range
let filter = `server_id = "${metricsServerId}"`;
// Add agent_id filter if available in server data
if (server && server.agent_id) {
@@ -78,19 +83,121 @@ export const serverService = {
const cutoffISO = cutoffTime.toISOString();
filter += ` && created >= "${cutoffISO}"`;
console.log('serverService.getServerMetrics: Using time filter:', cutoffISO);
console.log('serverService.getServerMetrics: Using time filter from:', cutoffISO, 'to now');
}
console.log('serverService.getServerMetrics: Final filter:', filter);
// Fetch filtered records with proper sorting
const records = await pb.collection('server_metrics').getFullList({
let records = await pb.collection('server_metrics').getFullList({
filter: filter,
sort: '-created',
requestKey: null
});
console.log('serverService.getServerMetrics: Found', records.length, 'records with filter');
console.log('serverService.getServerMetrics: Found', records.length, 'records with primary filter');
// If no records found with primary strategy, try fallback strategies
if (records.length === 0) {
console.log('serverService.getServerMetrics: No records found, trying fallback strategies...');
// Fallback 1: Try without agent_id filter
let fallbackFilter = `server_id = "${metricsServerId}"`;
if (timeRange) {
const now = new Date();
let cutoffTime;
switch (timeRange) {
case '60m':
cutoffTime = new Date(now.getTime() - (60 * 60 * 1000));
break;
case '1d':
cutoffTime = new Date(now.getTime() - (24 * 60 * 60 * 1000));
break;
case '7d':
cutoffTime = new Date(now.getTime() - (7 * 24 * 60 * 60 * 1000));
break;
case '1m':
cutoffTime = new Date(now.getTime() - (30 * 24 * 60 * 60 * 1000));
break;
case '3m':
cutoffTime = new Date(now.getTime() - (90 * 24 * 60 * 60 * 1000));
break;
default:
cutoffTime = new Date(now.getTime() - (24 * 60 * 60 * 1000));
}
const cutoffISO = cutoffTime.toISOString();
fallbackFilter += ` && created >= "${cutoffISO}"`;
}
console.log('serverService.getServerMetrics: Trying fallback filter without agent_id:', fallbackFilter);
records = await pb.collection('server_metrics').getFullList({
filter: fallbackFilter,
sort: '-created',
requestKey: null
});
console.log('serverService.getServerMetrics: Fallback found', records.length, 'records');
// Fallback 2: Try with different server_id strategies
if (records.length === 0) {
const alternativeIds = [serverId, server?.server_id, server?.id].filter(Boolean);
console.log('serverService.getServerMetrics: Trying alternative server IDs:', alternativeIds);
for (const altId of alternativeIds) {
if (altId && altId !== metricsServerId) {
let altFilter = `server_id = "${altId}"`;
if (timeRange) {
const now = new Date();
let cutoffTime;
switch (timeRange) {
case '60m':
cutoffTime = new Date(now.getTime() - (60 * 60 * 1000));
break;
case '1d':
cutoffTime = new Date(now.getTime() - (24 * 60 * 60 * 1000));
break;
case '7d':
cutoffTime = new Date(now.getTime() - (7 * 24 * 60 * 60 * 1000));
break;
case '1m':
cutoffTime = new Date(now.getTime() - (30 * 24 * 60 * 60 * 1000));
break;
case '3m':
cutoffTime = new Date(now.getTime() - (90 * 24 * 60 * 60 * 1000));
break;
default:
cutoffTime = new Date(now.getTime() - (24 * 60 * 60 * 1000));
}
const cutoffISO = cutoffTime.toISOString();
altFilter += ` && created >= "${cutoffISO}"`;
}
console.log('serverService.getServerMetrics: Trying alternative ID filter:', altFilter);
const altRecords = await pb.collection('server_metrics').getFullList({
filter: altFilter,
sort: '-created',
requestKey: null
});
if (altRecords.length > 0) {
console.log('serverService.getServerMetrics: Alternative ID found', altRecords.length, 'records');
records = altRecords;
break;
}
}
}
}
}
console.log('serverService.getServerMetrics: Final result:', records.length, 'records found');
if (records.length > 0) {
console.log('serverService.getServerMetrics: Sample record:', records[0]);
}
return records;
} catch (error) {
console.error('Error fetching server metrics:', error);