TyleoDvDelaware3217/Kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-07-19 07:44:02 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

. Number of beats adapts to container width, just like auto mode :)

Browse source
This commit is contained in:
Doruk 2025-06-14 12:32:54 +02:00
parent f47f73d76d
commit e16b6cf0d1
2 changed files with 16 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
server/util/heartbeat-range.js
View file

@ -64,24 +64,24 @@ async function getAggregatedHeartbeatData(monitorId, range) {
return null; // This will trigger fallback in router return null; // This will trigger fallback in router
} }
// Convert to heartbeat-like format // Convert stat data to simplified format for client-side aggregation
const result = stats.map(stat => ({ const result = stats.map(stat => ({
time: dayjs(stat.timestamp * 1000).format("YYYY-MM-DD HH:mm:ss"), // Convert seconds to milliseconds time: dayjs(stat.timestamp * 1000).format("YYYY-MM-DD HH:mm:ss"),
status: stat.up > 0 ? 1 : (stat.down > 0 ? 0 : 1), // Simplified status logic status: stat.up > 0 ? 1 : (stat.down > 0 ? 0 : 1),
up: stat.up, up: stat.up,
down: stat.down, down: stat.down,
ping: stat.ping ping: stat.ping
})); }));
console.log(`[HEARTBEAT-RANGE] Returning ${result.length} converted records`); console.log(`[HEARTBEAT-RANGE] Returning ${result.length} stat records for client aggregation`);
return result; return result;
} else { } else {
// Use daily stats for ranges over 24 hours // Use daily stats for ranges over 24 hours
const days = Math.ceil(hours / 24); const days = Math.ceil(hours / 24);
const startTime = now.subtract(days, "days"); const startTime = now.subtract(days, "days");
const timestampKey = Math.floor(startTime.valueOf() / (24 * 60 * 60 * 1000)) * (24 * 60 * 60 * 1000); const timestampKey = Math.floor(startTime.valueOf() / (24 * 60 * 60 * 1000)); // Convert to seconds
console.log(`[HEARTBEAT-RANGE] Using daily stats from timestamp ${timestampKey} (${dayjs(timestampKey).format()})`); console.log(`[HEARTBEAT-RANGE] Using daily stats from timestamp ${timestampKey} (${dayjs(timestampKey * 1000).format()})`);
const stats = await R.getAll(` const stats = await R.getAll(`
SELECT * FROM stat_daily SELECT * FROM stat_daily
@ -97,16 +97,16 @@ async function getAggregatedHeartbeatData(monitorId, range) {
return null; // This will trigger fallback in router return null; // This will trigger fallback in router
} }
// Convert to heartbeat-like format // Convert stat data to simplified format for client-side aggregation
const result = stats.map(stat => ({ const result = stats.map(stat => ({
time: dayjs(stat.timestamp).format("YYYY-MM-DD HH:mm:ss"), time: dayjs(stat.timestamp * 1000).format("YYYY-MM-DD HH:mm:ss"),
status: stat.up > 0 ? 1 : (stat.down > 0 ? 0 : 1), // Simplified status logic status: stat.up > 0 ? 1 : (stat.down > 0 ? 0 : 1),
up: stat.up, up: stat.up,
down: stat.down, down: stat.down,
ping: stat.ping ping: stat.ping
})); }));
console.log(`[HEARTBEAT-RANGE] Returning ${result.length} converted records`); console.log(`[HEARTBEAT-RANGE] Returning ${result.length} stat records for client aggregation`);
return result; return result;
} }
} }

18
src/components/HeartbeatBar.vue
View file

@ -133,21 +133,15 @@ export default {
}, },
aggregatedBeatList() { aggregatedBeatList() {
console.log(`[HEARTBEAT-BAR] aggregatedBeatList called with range: ${this.heartbeatBarRange}, beatList length: ${this.beatList ? this.beatList.length : 'null'}`); console.log(`[HEARTBEAT-BAR] aggregatedBeatList called with range: ${this.heartbeatBarRange}, beatList length: ${this.beatList ? this.beatList.length : 'null'}, maxBeat: ${this.maxBeat}`);
if (!this.beatList || this.beatList.length === 0) { if (!this.beatList || this.beatList.length === 0) {
console.log(`[HEARTBEAT-BAR] No beatList data`); console.log(`[HEARTBEAT-BAR] No beatList data`);
return []; return [];
} }
// If data is already aggregated from server (has 'up'/'down' fields), use as-is // Always do client-side aggregation using dynamic maxBeat for proper screen sizing
if (this.beatList[0] && typeof this.beatList[0].up !== 'undefined') { console.log(`[HEARTBEAT-BAR] Performing client-side aggregation with ${this.maxBeat} buckets`);
console.log(`[HEARTBEAT-BAR] Using pre-aggregated server data`);
return this.beatList;
}
// Otherwise, do client-side aggregation for raw heartbeat data
console.log(`[HEARTBEAT-BAR] Performing client-side aggregation`);
const now = dayjs(); const now = dayjs();
const buckets = []; const buckets = [];
@ -161,8 +155,8 @@ export default {
totalHours = 90 * 24; // Fallback totalHours = 90 * 24; // Fallback
} }
// Calculate bucket size and count // Use dynamic maxBeat calculated from screen size
const totalBuckets = this.maxBeat || 50; const totalBuckets = this.maxBeat > 0 ? this.maxBeat : 50;
const bucketSize = totalHours / totalBuckets; const bucketSize = totalHours / totalBuckets;
// Create time buckets from oldest to newest // Create time buckets from oldest to newest
@ -217,7 +211,7 @@ export default {
} }
}); });
console.log(`[HEARTBEAT-BAR] Generated ${buckets.length} aggregated buckets`); console.log(`[HEARTBEAT-BAR] Generated ${buckets.length} aggregated buckets using dynamic maxBeat`);
return buckets; return buckets;
}, },