diff --git a/src/lang/en.json b/src/lang/en.json index 21b0eec7..b8baa96d 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -910,5 +910,7 @@ "Allow Long SMS": "Allow Long SMS", "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" + "max 11 alphanumeric characters": "max 11 alphanumeric characters", + "offlineMonitor": "Offline Monitor", + "offlineMonitors": "Offline Monitors" } diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue index af2f028d..fc9c3a2b 100644 --- a/src/pages/StatusPage.vue +++ b/src/pages/StatusPage.vue @@ -313,6 +313,30 @@ +
+
+

+ {{ $t(this.$root.downMonitors.length === 1 ? "offlineMonitor" : "offlineMonitors") }} +

+ +
+
+
+
+
+ + {{ monitor.name }} +
+
+
+ +
+
+
+
+
+
+
@@ -374,6 +398,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); @@ -390,6 +416,8 @@ const favicon = new Favico({ export default { components: { + HeartbeatBar, + Uptime, PublicGroupList, ImageCropUpload, Confirm, @@ -768,6 +796,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]; @@ -789,6 +819,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}