ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-27 16:54:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #835 from willianrod/feat/add-favicon-badges

Browse source 
Add badges to favicon
This commit is contained in:
Louis Lam 2022-03-12 15:39:18 +08:00 committed by GitHub
commit 5f778b9763
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 91 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "uptime-kuma",
"version": "1.11.4",
"version": "1.12.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "uptime-kuma",
"version": "1.11.4",
"version": "1.12.1",
"license": "MIT",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "~1.2.36",
@ -29,6 +29,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.5",
"iconv-lite": "^0.6.3",
@ -6140,6 +6141,11 @@
"reusify": "^1.0.4"
}
},
"node_modules/favico.js": {
"version": "0.3.10",
"resolved": "https://registry.npmjs.org/favico.js/-/favico.js-0.3.10.tgz",
"integrity": "sha1-gFhuJ6EX8kqNUcGKmb3HFNQzkwE="
},
"node_modules/fb-watchman": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
@ -18240,6 +18246,11 @@
"reusify": "^1.0.4"
}
},
"favico.js": {
"version": "0.3.10",
"resolved": "https://registry.npmjs.org/favico.js/-/favico.js-0.3.10.tgz",
"integrity": "sha1-gFhuJ6EX8kqNUcGKmb3HFNQzkwE="
},
"fb-watchman": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",

1
package.json
View file

@ -74,6 +74,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.5",
"iconv-lite": "^0.6.3",

45
src/mixins/socket.js
View file

@ -1,6 +1,7 @@
import { io } from "socket.io-client";
import { useToast } from "vue-toastification";
import jwt_decode from "jwt-decode";
import Favico from "favico.js";
const toast = useToast();
let socket;
@ -11,6 +12,10 @@ const noSocketIOPages = [
"/"
];
const favicon = new Favico({
animation: "none"
});
export default {
data() {
@ -392,10 +397,50 @@ export default {
return result;
},
stats() {
let result = {
up: 0,
down: 0,
unknown: 0,
pause: 0,
};
for (let monitorID in this.$root.monitorList) {
let beat = this.$root.lastHeartbeatList[monitorID];
let monitor = this.$root.monitorList[monitorID];
if (monitor && ! monitor.active) {
result.pause++;
} else if (beat) {
if (beat.status === 1) {
result.up++;
} else if (beat.status === 0) {
result.down++;
} else if (beat.status === 2) {
result.up++;
} else {
result.unknown++;
}
} else {
result.unknown++;
}
}
return result;
},
},
watch: {
// Update Badge
"stats.down"(to, from) {
if (to !== from) {
favicon.badge(to);
console.log(to);
}
},
// Reload the SPA if the server version is changed.
"info.version"(to, from) {
if (from && from !== to) {

39
src/pages/DashboardHome.vue
View file

@ -9,19 +9,19 @@
<div class="row">
<div class="col">
<h3>{{ $t("Up") }}</h3>
<span class="num">{{ stats.up }}</span>
<span class="num">{{ $root.stats.up }}</span>
</div>
<div class="col">
<h3>{{ $t("Down") }}</h3>
<span class="num text-danger">{{ stats.down }}</span>
<span class="num text-danger">{{ $root.stats.down }}</span>
</div>
<div class="col">
<h3>{{ $t("Unknown") }}</h3>
<span class="num text-secondary">{{ stats.unknown }}</span>
<span class="num text-secondary">{{ $root.stats.unknown }}</span>
</div>
<div class="col">
<h3>{{ $t("pauseDashboardHome") }}</h3>
<span class="num text-secondary">{{ stats.pause }}</span>
<span class="num text-secondary">{{ $root.stats.pause }}</span>
</div>
</div>
</div>
@ -89,37 +89,6 @@ export default {
};
},
computed: {
stats() {
let result = {
up: 0,
down: 0,
unknown: 0,
pause: 0,
};
for (let monitorID in this.$root.monitorList) {
let beat = this.$root.lastHeartbeatList[monitorID];
let monitor = this.$root.monitorList[monitorID];
if (monitor && ! monitor.active) {
result.pause++;
} else if (beat) {
if (beat.status === 1) {
result.up++;
} else if (beat.status === 0) {
result.down++;
} else if (beat.status === 2) {
result.up++;
} else {
result.unknown++;
}
} else {
result.unknown++;
}
}
return result;
},
importantHeartBeatList() {
let result = [];

33
src/pages/StatusPage.vue
View file

@ -220,12 +220,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,
@ -304,7 +310,7 @@ export default {
},
tagsVisible() {
return this.config.statusPageTags
return this.config.statusPageTags;
},
logoClass() {
@ -439,8 +445,25 @@ 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;
this.$root.heartbeatList = heartbeatList;
this.$root.uptimeList = uptimeList;
const heartbeatIds = Object.keys(heartbeatList);
const downMonitors = heartbeatIds.reduce((downMonitorsAmount, currentId) => {
const monitorHeartbeats = heartbeatList[currentId];
const lastHeartbeat = monitorHeartbeats.at(-1);
if (lastHeartbeat) {
return lastHeartbeat.status === 0 ? downMonitorsAmount + 1 : downMonitorsAmount;
} else {
return downMonitorsAmount;
}
}, 0);
favicon.badge(downMonitors);
this.loadedData = true;
});
}
@ -501,9 +524,9 @@ export default {
return {
...monitor,
tags: newState ? this.$root.monitorList[monitor.id].tags : []
}
};
})
}
};
});
},