|
|
|
@ -313,6 +313,30 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div v-if="this.$root.downMonitors?.length > 0" class="mb-4">
|
|
|
|
|
<div class="mb-5">
|
|
|
|
|
<h2 class="group-title">
|
|
|
|
|
{{ $t(this.$root.downMonitors.length === 1 ? "offlineMonitor" : "offlineMonitors") }}
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
|
|
<div class="shadow-box monitor-list mt-4 position-relative">
|
|
|
|
|
<div v-for="monitor in this.$root.downMonitors" :key="monitor.id" class="item">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-9 col-md-8 small-padding">
|
|
|
|
|
<div class="info">
|
|
|
|
|
<Uptime :monitor="monitor" type="24" :pill="true" />
|
|
|
|
|
{{ monitor.name }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
|
|
|
|
|
<HeartbeatBar size="mid" :monitor-id="monitor.id" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="mb-4">
|
|
|
|
|
<div v-if="$root.publicGroupList.length === 0 && loadedData" class="text-center">
|
|
|
|
|
<!-- 👀 Nothing here, please add a group or a monitor. -->
|
|
|
|
@ -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}
|
|
|
|
|