feat(status page): Add configurable heartbeat bar range options (100beats, 1..365 days)

db/knex_migrations/2025-06-14-0000-heartbeat-range-config.js

@@ -0,0 +1,11 @@
+exports.up = function (knex) {
+    return knex.schema.alterTable("status_page", function (table) {
+        table.smallint("heartbeat_bar_days").notNullable().defaultTo(0).checkBetween([ 0, 365 ]);
+    });
+};
+
+exports.down = function (knex) {
+    return knex.schema.alterTable("status_page", function (table) {
+        table.dropColumn("heartbeat_bar_days");
+    });
+};

server/model/status_page.js

@@ -409,6 +409,7 @@ class StatusPage extends BeanModel {
             showPoweredBy: !!this.show_powered_by,
             googleAnalyticsId: this.google_analytics_tag_id,
             showCertificateExpiry: !!this.show_certificate_expiry,
+            heartbeatBarDays: this.heartbeat_bar_days,
         };
     }
 
@@ -432,6 +433,7 @@ class StatusPage extends BeanModel {
             showPoweredBy: !!this.show_powered_by,
             googleAnalyticsId: this.google_analytics_tag_id,
             showCertificateExpiry: !!this.show_certificate_expiry,
+            heartbeatBarDays: this.heartbeat_bar_days || 0,
         };
     }
 

server/routers/status-page-router.js

@@ -4,9 +4,10 @@ const { UptimeKumaServer } = require("../uptime-kuma-server");
 const StatusPage = require("../model/status_page");
 const { allowDevAllOrigin, sendHttpError } = require("../util-server");
 const { R } = require("redbean-node");
-const { badgeConstants } = require("../../src/util");
+const { badgeConstants, UP, DOWN, MAINTENANCE, PENDING } = require("../../src/util");
 const { makeBadge } = require("badge-maker");
 const { UptimeCalculator } = require("../uptime-calculator");
+const dayjs = require("dayjs");
 
 let router = express.Router();
 
@@ -84,21 +85,75 @@ router.get("/api/status-page/heartbeat/:slug", cache("1 minutes"), async (reques
             statusPageID
         ]);
 
-        for (let monitorID of monitorIDList) {
-            let list = await R.getAll(`
+        // Get the status page to determine the heartbeat range
+        let statusPage = await R.findOne("status_page", " id = ? ", [ statusPageID ]);
+        let heartbeatBarDays = statusPage ? (statusPage.heartbeat_bar_days || 0) : 0;
+
+        // Get max beats parameter from query string (for client-side screen width constraints)
+        const maxBeats = Math.min(parseInt(request.query.maxBeats) || 100, 100);
+
+        // Process all monitors in parallel using Promise.all
+        const monitorPromises = monitorIDList.map(async (monitorID) => {
+            const uptimeCalculator = await UptimeCalculator.getUptimeCalculator(monitorID);
+
+            let heartbeats;
+
+            if (heartbeatBarDays === 0) {
+                // Auto mode - use original LIMIT 100 logic
+                let list = await R.getAll(`
                     SELECT * FROM heartbeat
                     WHERE monitor_id = ?
                     ORDER BY time DESC
                     LIMIT 100
-            `, [
+                `, [
+                    monitorID,
+                ]);
+
+                list = R.convertToBeans("heartbeat", list);
+                heartbeats = list.reverse().map(row => row.toPublicJSON());
+            } else {
+                // For configured day ranges, use aggregated data from UptimeCalculator
+                const buckets = uptimeCalculator.getAggregatedBuckets(heartbeatBarDays, maxBeats);
+                heartbeats = buckets.map(bucket => {
+                    // If bucket has no data, return 0 (empty beat) to match original behavior
+                    if (bucket.up === 0 && bucket.down === 0 && bucket.maintenance === 0 && bucket.pending === 0) {
+                        return 0;
+                    }
+
+                    return {
+                        status: bucket.down > 0 ? DOWN :
+                            bucket.maintenance > 0 ? MAINTENANCE :
+                                bucket.pending > 0 ? PENDING :
+                                    bucket.up > 0 ? UP : 0,
+                        time: dayjs.unix(bucket.end).toISOString(),
+                        msg: "",
+                        ping: null
+                    };
+                });
+            }
+
+            // Calculate uptime based on the range
+            let uptime;
+            if (heartbeatBarDays <= 1) {
+                uptime = uptimeCalculator.get24Hour().uptime;
+            } else {
+                uptime = uptimeCalculator.getData(heartbeatBarDays, "day").uptime;
+            }
+
+            return {
                 monitorID,
-            ]);
+                heartbeats,
+                uptime
+            };
+        });
 
-            list = R.convertToBeans("heartbeat", list);
-            heartbeatList[monitorID] = list.reverse().map(row => row.toPublicJSON());
+        // Wait for all monitors to be processed
+        const monitorResults = await Promise.all(monitorPromises);
 
-            const uptimeCalculator = await UptimeCalculator.getUptimeCalculator(monitorID);
-            uptimeList[`${monitorID}_24`] = uptimeCalculator.get24Hour().uptime;
+        // Populate the response objects
+        for (const result of monitorResults) {
+            heartbeatList[result.monitorID] = result.heartbeats;
+            uptimeList[result.monitorID] = result.uptime;
         }
 
         response.json({

server/socket-handlers/status-page-socket-handler.js

@@ -165,6 +165,7 @@ module.exports.statusPageSocketHandler = (socket) => {
             statusPage.custom_css = config.customCSS;
             statusPage.show_powered_by = config.showPoweredBy;
             statusPage.show_certificate_expiry = config.showCertificateExpiry;
+            statusPage.heartbeat_bar_days = config.heartbeatBarDays;
             statusPage.modified_date = R.isoDateTime();
             statusPage.google_analytics_tag_id = config.googleAnalyticsId;
 

server/uptime-calculator.js

@@ -845,6 +845,93 @@ class UptimeCalculator {
     setMigrationMode(value) {
         this.migrationMode = value;
     }
+
+    /**
+     * Get aggregated heartbeat buckets for a specific time range
+     * @param {number} days Number of days to aggregate
+     * @param {number} targetBuckets Number of buckets to create (default 100)
+     * @returns {Array} Array of aggregated bucket data
+     */
+    getAggregatedBuckets(days, targetBuckets = 100) {
+        const now = this.getCurrentDate();
+        const startTime = now.subtract(days, "day");
+        const totalMinutes = days * 60 * 24;
+        const bucketSizeMinutes = totalMinutes / targetBuckets;
+
+        // Get available data from UptimeCalculator for lookup
+        const availableData = {};
+        let rawDataPoints;
+
+        if (days <= 1) {
+            const exactMinutes = Math.ceil(days * 24 * 60);
+            rawDataPoints = this.getDataArray(exactMinutes, "minute");
+        } else if (days <= 30) {
+            // For 1-30 days, use hourly data (up to 720 hours)
+            const exactHours = Math.min(Math.ceil(days * 24), 720);
+            rawDataPoints = this.getDataArray(exactHours, "hour");
+        } else {
+            // For > 30 days, use daily data
+            const requestDays = Math.min(days, 365);
+            rawDataPoints = this.getDataArray(requestDays, "day");
+        }
+
+        // Create lookup map for available data
+        for (const point of rawDataPoints) {
+            if (point && point.timestamp) {
+                availableData[point.timestamp] = point;
+            }
+        }
+
+        // Create exactly targetBuckets buckets spanning the full requested time range
+        const buckets = [];
+        for (let i = 0; i < targetBuckets; i++) {
+            const bucketStart = startTime.add(i * bucketSizeMinutes, "minute");
+            const bucketEnd = startTime.add((i + 1) * bucketSizeMinutes, "minute");
+
+            buckets.push({
+                start: bucketStart.unix(),
+                end: bucketEnd.unix(),
+                up: 0,
+                down: 0,
+                maintenance: 0,
+                pending: 0
+            });
+        }
+
+        // Aggregate available data into buckets
+        for (const [ timestamp, dataPoint ] of Object.entries(availableData)) {
+            const timestampNum = parseInt(timestamp);
+
+            // Find the appropriate bucket for this data point
+            // For daily data (> 30 days), timestamps are at start of day
+            // We need to find which bucket this day belongs to
+            for (let i = 0; i < buckets.length; i++) {
+                const bucket = buckets[i];
+
+                if (days > 30) {
+                    // For daily data, check if the timestamp falls within the bucket's day range
+                    if (timestampNum >= bucket.start && timestampNum < bucket.end) {
+                        bucket.up += dataPoint.up || 0;
+                        bucket.down += dataPoint.down || 0;
+                        bucket.maintenance += dataPoint.maintenance || 0;
+                        bucket.pending += dataPoint.pending || 0;
+                        break;
+                    }
+                } else {
+                    // For minute/hourly data, use exact timestamp matching
+                    if (timestampNum >= bucket.start && timestampNum < bucket.end && dataPoint) {
+                        bucket.up += dataPoint.up || 0;
+                        bucket.down += dataPoint.down || 0;
+                        bucket.maintenance += 0; // UptimeCalculator treats maintenance as up
+                        bucket.pending += 0;     // UptimeCalculator doesn't track pending separately
+                        break;
+                    }
+                }
+            }
+        }
+
+        return buckets;
+    }
 }
 
 class UptimeDataResult {

src/components/HeartbeatBar.vue

@@ -144,20 +144,15 @@ export default {
                 return [];
             }
 
-            // If heartbeat days is configured (not auto), data is already aggregated from server
-            if (this.normalizedHeartbeatBarDays > 0 && this.beatList.length > 0) {
-                // Show all beats from server - they are already properly aggregated
-                return this.beatList;
-            }
-
-            // Original logic for auto mode (heartbeatBarDays = 0)
-            let placeholders = [];
-
             // Handle case where maxBeat is -1 (no limit)
             if (this.maxBeat <= 0) {
                 return this.beatList;
             }
 
+            // For both configured days and auto mode, show only what fits on screen
+            // The server provides consistent data (300 buckets for configured days, 100 beats for auto)
+            // We slice to show only what fits in the current container width
+            let placeholders = [];
             let start = this.beatList.length - this.maxBeat;
 
             if (this.move) {
@@ -323,22 +318,7 @@ export default {
         resize() {
             if (this.$refs.wrap) {
                 const newMaxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatHoverAreaPadding * 2));
-
-                // If maxBeat changed and we're in configured days mode, notify parent to reload data
-                if (newMaxBeat !== this.maxBeat && this.normalizedHeartbeatBarDays > 0) {
-                    this.maxBeat = newMaxBeat;
-
-                    // Find the closest parent with reloadHeartbeatData method (StatusPage)
-                    let parent = this.$parent;
-                    while (parent && !parent.reloadHeartbeatData) {
-                        parent = parent.$parent;
-                    }
-                    if (parent && parent.reloadHeartbeatData) {
-                        parent.reloadHeartbeatData(newMaxBeat);
-                    }
-                } else {
-                    this.maxBeat = newMaxBeat;
-                }
+                this.maxBeat = newMaxBeat;
             }
         },
 

src/components/PublicGroupList.vue

@@ -38,7 +38,7 @@
                                             <font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
                                             <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitor.index)" />
 
-                                            <Uptime :monitor="monitor.element" type="24" :pill="true" />
+                                            <Uptime :monitor="monitor.element" :type="uptimeType" :pill="true" />
                                             <a
                                                 v-if="showLink(monitor)"
                                                 :href="monitor.element.url"
@@ -73,7 +73,7 @@
                                         </div>
                                     </div>
                                     <div :key="$root.userHeartbeatBar" class="col-6">
-                                        <HeartbeatBar size="mid" :monitor-id="monitor.element.id" />
+                                        <HeartbeatBar size="mid" :monitor-id="monitor.element.id" :heartbeat-bar-days="heartbeatBarDays" />
                                     </div>
                                 </div>
                             </div>
@@ -114,6 +114,11 @@ export default {
         /** Should expiry be shown? */
         showCertificateExpiry: {
             type: Boolean,
+        },
+        /** Heartbeat bar days */
+        heartbeatBarDays: {
+            type: [ Number, String ],
+            default: 0
         }
     },
     data() {
@@ -124,6 +129,19 @@ export default {
     computed: {
         showGroupDrag() {
             return (this.$root.publicGroupList.length >= 2);
+        },
+        /**
+         * Get the uptime type based on heartbeatBarDays
+         * Returns the exact type for dynamic uptime calculation
+         * @returns {string} The uptime type
+         */
+        uptimeType() {
+            const days = Number(this.heartbeatBarDays);
+            if (days === 0 || days === 1) {
+                return "24"; // 24 hours (for compatibility)
+            } else {
+                return `${days}d`; // Dynamic days format (e.g., "7d", "14d", "30d")
+            }
         }
     },
     created() {

src/components/Uptime.vue

@@ -30,10 +30,8 @@ export default {
                 return this.$t("statusMaintenance");
             }
 
-            let key = this.monitor.id + "_" + this.type;
-
-            if (this.$root.uptimeList[key] !== undefined) {
-                let result = Math.round(this.$root.uptimeList[key] * 10000) / 100;
+            if (this.$root.uptimeList[this.monitor.id] !== undefined) {
+                let result = Math.round(this.$root.uptimeList[this.monitor.id] * 10000) / 100;
                 // Only perform sanity check on status page. See louislam/uptime-kuma#2628
                 if (this.$route.path.startsWith("/status") && result > 100) {
                     return "100%";
@@ -90,6 +88,14 @@ export default {
             if (this.type === "720") {
                 return `30${this.$t("-day")}`;
             }
+            if (this.type === "24") {
+                return `24${this.$t("-hour")}`;
+            }
+            // Handle dynamic day formats (e.g., "7d", "14d", "30d")
+            const dayMatch = this.type.match(/^(\d+)d$/);
+            if (dayMatch) {
+                return `${dayMatch[1]}${this.$t("-day")}`;
+            }
             return `24${this.$t("-hour")}`;
         }
     },

src/lang/en.json

@@ -380,6 +380,9 @@
     "Footer Text": "Footer Text",
     "Refresh Interval": "Refresh Interval",
     "Refresh Interval Description": "The status page will do a full site refresh every {0} seconds",
+    "Heartbeat Bar Days": "Heartbeat Bar Days",
+    "Status page shows heartbeat history days": "Status page shows {0} days of heartbeats",
+    "Status page will show last beats": "Status page shows the last {0} heartbeats",
     "Show Powered By": "Show Powered By",
     "Domain Names": "Domain Names",
     "signedInDisp": "Signed in as {0}",