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}