diff --git a/src/lang/en.json b/src/lang/en.json
index e215f1031..8eb1876ba 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -953,6 +953,8 @@
"cellsyntSplitLongMessages": "Split long messages into up to 6 parts. 153 x 6 = 918 characters.",
"max 15 digits": "max 15 digits",
"max 11 alphanumeric characters": "max 11 alphanumeric characters",
+ "offlineMonitor": "Offline Monitor",
+ "offlineMonitors": "Offline Monitors",
"Community String": "Community String",
"snmpCommunityStringHelptext": "This string functions as a password to authenticate and control access to SNMP-enabled devices. Match it with your SNMP device's configuration.",
"OID (Object Identifier)": "OID (Object Identifier)",
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 116968282..0f20204bb 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -322,6 +322,30 @@
+
+
+
+ {{ $t($root.downMonitors.length === 1 ? "offlineMonitor" : "offlineMonitors") }}
+
+
+
+
+
+
+
+
+ {{ monitor.name }}
+
+
+
+
+
+
+
+
+
+
+
@@ -383,6 +407,8 @@ import { getResBaseURL } from "../util-frontend";
import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_MAINTENANCE, STATUS_PAGE_PARTIAL_DOWN, UP, MAINTENANCE } from "../util.ts";
import Tag from "../components/Tag.vue";
import VueMultiselect from "vue-multiselect";
+import Uptime from "../components/Uptime.vue";
+import HeartbeatBar from "../components/HeartbeatBar.vue";
const toast = useToast();
dayjs.extend(duration);
@@ -399,6 +425,8 @@ const favicon = new Favico({
export default {
components: {
+ HeartbeatBar,
+ Uptime,
PublicGroupList,
ImageCropUpload,
Confirm,
@@ -777,6 +805,8 @@ export default {
this.$root.heartbeatList = heartbeatList;
this.$root.uptimeList = uptimeList;
+ this.$root.downMonitors = this.downMonitors();
+
const heartbeatIds = Object.keys(heartbeatList);
const downMonitors = heartbeatIds.reduce((downMonitorsAmount, currentId) => {
const monitorHeartbeats = heartbeatList[currentId];
@@ -798,6 +828,22 @@ export default {
}
},
+ downMonitors() {
+ let result = [];
+
+ for (const id in this.$root.publicMonitorList) {
+ const monitor = this.$root.publicMonitorList[id];
+ const heartbeats = this.$root.heartbeatList[monitor.id];
+ const lastHeartbeat = heartbeats.at(-1);
+ if (!lastHeartbeat || lastHeartbeat.status !== 0) {
+ continue;
+ }
+ result.push(monitor);
+ }
+
+ return result;
+ },
+
/**
* Setup timer to display countdown to refresh
* @returns {void}