mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-11-27 12:00:35 +03:00
Add badges to favicon
This commit is contained in:
parent
d4c9431142
commit
036218f711
4 changed files with 104 additions and 14918 deletions
14979
package-lock.json
generated
14979
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -72,6 +72,7 @@
|
|||
"dayjs": "~1.10.7",
|
||||
"express": "~4.17.1",
|
||||
"express-basic-auth": "~1.2.0",
|
||||
"favico.js": "^0.3.10",
|
||||
"form-data": "~4.0.0",
|
||||
"http-graceful-shutdown": "~3.1.4",
|
||||
"iconv-lite": "^0.6.3",
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import { io } from "socket.io-client";
|
||||
import { useToast } from "vue-toastification";
|
||||
import Favico from "favico.js";
|
||||
const toast = useToast();
|
||||
|
||||
let socket;
|
||||
|
@ -10,6 +11,12 @@ const noSocketIOPages = [
|
|||
"/"
|
||||
];
|
||||
|
||||
const favicon = new Favico({
|
||||
animation: "none"
|
||||
});
|
||||
|
||||
let downMonitors = [];
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
|
@ -118,10 +125,14 @@ export default {
|
|||
if (data.important) {
|
||||
|
||||
if (data.status === 0) {
|
||||
downMonitors.push(data.monitorID);
|
||||
favicon.badge(downMonitors.length);
|
||||
toast.error(`[${this.monitorList[data.monitorID].name}] [DOWN] ${data.msg}`, {
|
||||
timeout: false,
|
||||
});
|
||||
} else if (data.status === 1) {
|
||||
downMonitors = downMonitors.filter(monitor => monitor !== data.monitorID);
|
||||
favicon.badge(downMonitors.length);
|
||||
toast.success(`[${this.monitorList[data.monitorID].name}] [Up] ${data.msg}`, {
|
||||
timeout: 20000,
|
||||
});
|
||||
|
@ -138,6 +149,11 @@ export default {
|
|||
});
|
||||
|
||||
socket.on("heartbeatList", (monitorID, data, overwrite = false) => {
|
||||
const lastElement = data.at(-1);
|
||||
if (lastElement.status === 0) {
|
||||
downMonitors.push(monitorID);
|
||||
favicon.badge(downMonitors.length);
|
||||
}
|
||||
if (! (monitorID in this.heartbeatList) || overwrite) {
|
||||
this.heartbeatList[monitorID] = data;
|
||||
} else {
|
||||
|
@ -304,11 +320,15 @@ export default {
|
|||
},
|
||||
|
||||
deleteMonitor(monitorID, callback) {
|
||||
downMonitors = downMonitors.filter(monitor => monitor !== monitorID);
|
||||
favicon.badge(downMonitors.length);
|
||||
socket.emit("deleteMonitor", monitorID, callback);
|
||||
},
|
||||
|
||||
clearData() {
|
||||
console.log("reset heartbeat list");
|
||||
downMonitors = [];
|
||||
favicon.badge(0);
|
||||
this.heartbeatList = {};
|
||||
this.importantHeartbeatList = {};
|
||||
},
|
||||
|
|
|
@ -209,12 +209,18 @@ import ImageCropUpload from "vue-image-crop-upload";
|
|||
import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_PARTIAL_DOWN, UP } from "../util.ts";
|
||||
import { useToast } from "vue-toastification";
|
||||
import dayjs from "dayjs";
|
||||
import Favico from "favico.js";
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const leavePageMsg = "Do you really want to leave? you have unsaved changes!";
|
||||
|
||||
let feedInterval;
|
||||
|
||||
const favicon = new Favico({
|
||||
animation: "none"
|
||||
});
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PublicGroupList,
|
||||
|
@ -424,8 +430,20 @@ export default {
|
|||
// If editMode, it will use the data from websocket.
|
||||
if (! this.editMode) {
|
||||
axios.get("/api/status-page/heartbeat").then((res) => {
|
||||
this.$root.heartbeatList = res.data.heartbeatList;
|
||||
this.$root.uptimeList = res.data.uptimeList;
|
||||
const { heartbeatList, uptimeList } = res.data;
|
||||
const heartbeatIds = Object.keys(heartbeatList);
|
||||
|
||||
const downMonitors = heartbeatIds.reduce((downMonitorsAmount, currentId) => {
|
||||
const monitorHeartbeats = heartbeatList[currentId];
|
||||
const lastHeartbeat = monitorHeartbeats.at(-1);
|
||||
|
||||
return lastHeartbeat.status === 0 ? downMonitorsAmount + 1 : downMonitorsAmount;
|
||||
}, 0);
|
||||
|
||||
favicon.badge(downMonitors);
|
||||
|
||||
this.$root.heartbeatList = heartbeatList;
|
||||
this.$root.uptimeList = uptimeList;
|
||||
this.loadedData = true;
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue