github
/
uptime-kuma
mirror of https://github.com/louislam/uptime-kuma
1
0
Fork 0
Code Issues Releases Wiki Activity

fix: HeartbeatBar DOWN status showing green instead of red (#6081) 

Co-authored-by: Frank Elsinga <frank@elsinga.de>
pull/6079/head
Jona Bastian 2025-08-25 05:01:29 +02:00 committed by GitHub
parent 7587269b62
commit bc2db2e36e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/HeartbeatBar.vue
View File

@ -17,7 +17,7 @@
>
<div
class="beat"
:class="{ 'empty': (beat === 0 || beat === null || beat.status === null), 'down': (beat.status === DOWN), 'pending': (beat.status === PENDING), 'maintenance': (beat.status === MAINTENANCE) }"
:class="getBeatClasses(beat)"
:style="beatStyle"
/>
</div>
@ -259,9 +259,9 @@ export default {
if (seconds < tolerance) {
return this.$t("now");
} else if (seconds < 60 * 60) {
return this.$t("time ago", [ (seconds / 60).toFixed(0) + "m" ]);
return this.$t("time ago", [ (seconds / 60).toFixed(0) + "m" ] );
} else {
return this.$t("time ago", [ (seconds / 60 / 60).toFixed(0) + "h" ]);
return this.$t("time ago", [ (seconds / 60 / 60).toFixed(0) + "h" ] );
}
}
},
@ -357,6 +357,25 @@ export default {
return `${this.$root.datetime(beat.time)}${beat.msg ? ` - ${beat.msg}` : ""}`;
},
/**
* Get CSS classes for a beat element based on its status
* @param {object} beat - Beat object containing status information
* @returns {object} Object with CSS class names as keys and boolean values
*/
getBeatClasses(beat) {
if (beat === 0 || beat === null || beat?.status === null) {
return { empty: true };
}
const status = Number(beat.status);
return {
down: status === DOWN,
pending: status === PENDING,
maintenance: status === MAINTENANCE
};
},
/**
* Get the aria-label for accessibility
* @param {object} beat Beat to get aria-label from