mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-12-04 04:04:05 +00:00
[status page] checkpoint
This commit is contained in:
LouisLam
parent
1d6670ed9a
commit
db05b506f3
6 changed files with 231 additions and 57 deletions
|
|
@ -37,6 +37,7 @@ module.exports = {
|
|||
"vue/max-attributes-per-line": "off",
|
||||
"vue/singleline-html-element-content-newline": "off",
|
||||
"vue/html-self-closing": "off",
|
||||
"vue/attribute-hyphenation": "off", // This change noNL to "no-n-l" unexpectedly
|
||||
"no-multi-spaces": ["error", {
|
||||
ignoreEOLComments: true,
|
||||
}],
|
||||
|
|
@ -84,7 +85,7 @@ module.exports = {
|
|||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": [ "src/languages/*.js" ],
|
||||
"files": [ "src/languages/*.js", "src/icon.js" ],
|
||||
"rules": {
|
||||
"comma-dangle": ["error", "always-multiline"],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,22 @@
|
|||
let express = require("express");
|
||||
const { allowDevAllOrigin, getSettings } = require("../util-server");
|
||||
const { allowDevAllOrigin, getSettings, setting } = require("../util-server");
|
||||
const { R } = require("redbean-node");
|
||||
let router = express.Router();
|
||||
|
||||
// Status Page Config
|
||||
router.get("/api/status-page/config", async (_request, response) => {
|
||||
allowDevAllOrigin(response);
|
||||
|
||||
let config = getSettings("statusPage");
|
||||
|
||||
if (! config.statusPageTheme) {
|
||||
config.statusPageTheme = "light";
|
||||
}
|
||||
|
||||
if (! config.statusPagePublished) {
|
||||
config.statusPagePublished = true;
|
||||
}
|
||||
|
||||
if (! config.title) {
|
||||
config.title = "Uptime Kuma";
|
||||
}
|
||||
|
|
@ -19,10 +24,28 @@ router.get("/api/status-page/config", async (_request, response) => {
|
|||
response.json(config);
|
||||
});
|
||||
|
||||
// Status Page - Get the current Incident
|
||||
// Can fetch only if published
|
||||
router.get("/api/status-page/incident", async (_, response) => {
|
||||
allowDevAllOrigin(response);
|
||||
|
||||
try {
|
||||
await checkPublished();
|
||||
|
||||
// TODO:
|
||||
|
||||
} catch (error) {
|
||||
send403(response, error.message);
|
||||
}
|
||||
});
|
||||
|
||||
// Status Page - Monitor List
|
||||
// Can fetch only if published
|
||||
router.get("/api/status-page/monitor-list", async (_request, response) => {
|
||||
allowDevAllOrigin(response);
|
||||
|
||||
try {
|
||||
await checkPublished();
|
||||
const monitorList = {};
|
||||
let list = await R.find("monitor", " public = 1 ORDER BY weight DESC, name ", [
|
||||
]);
|
||||
|
|
@ -32,11 +55,18 @@ router.get("/api/status-page/monitor-list", async (_request, response) => {
|
|||
}
|
||||
|
||||
response.json(monitorList);
|
||||
|
||||
} catch (error) {
|
||||
send403(response, error.message);
|
||||
}
|
||||
});
|
||||
|
||||
// Status Page Polling Data
|
||||
// Can fetch only if published
|
||||
router.get("/api/status-page/heartbeat", async (_request, response) => {
|
||||
allowDevAllOrigin(response);
|
||||
try {
|
||||
await checkPublished();
|
||||
|
||||
const monitorList = {};
|
||||
let list = await R.find("", " ", [
|
||||
|
|
@ -49,6 +79,27 @@ router.get("/api/status-page/heartbeat", async (_request, response) => {
|
|||
response.json({
|
||||
monitorList: monitorList,
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
send403(response, error.message);
|
||||
}
|
||||
});
|
||||
|
||||
async function checkPublished() {
|
||||
if (! await isPublished()) {
|
||||
throw new Error("The status page is not published");
|
||||
}
|
||||
}
|
||||
|
||||
async function isPublished() {
|
||||
return await setting("statusPagePublished");
|
||||
}
|
||||
|
||||
function send403(res, msg = "") {
|
||||
res.status(403).json({
|
||||
"status": "fail",
|
||||
"msg": msg,
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = router;
|
||||
|
|
|
|||
|
|
@ -378,7 +378,10 @@ h2 {
|
|||
[contenteditable=true] {
|
||||
&:focus {
|
||||
outline: 0 solid #eee;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: #efefef;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -389,3 +392,12 @@ h2 {
|
|||
color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
transition: all $easing-in 0.2s;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,38 +6,44 @@
|
|||
item-key="id"
|
||||
:animation="100"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<template #item="group">
|
||||
<div>
|
||||
<!-- Group Title -->
|
||||
<h2 class="mt-5">
|
||||
<Editable v-model="element.name" :contenteditable="editMode" tag="span" />
|
||||
<font-awesome-icon v-if="editMode && showGroupDrag" icon="arrows-alt-v" class="action drag me-3" />
|
||||
<font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeGroup(group.index)" />
|
||||
<Editable v-model="group.element.name" :contenteditable="editMode" tag="span" />
|
||||
</h2>
|
||||
|
||||
<div class="shadow-box monitor-list mt-4 position-relative">
|
||||
<div v-if="element.monitorList.length === 0" class="text-center no-monitor-msg">
|
||||
<div v-if="group.element.monitorList.length === 0" class="text-center no-monitor-msg">
|
||||
{{ $t("No Monitors") }}
|
||||
</div>
|
||||
|
||||
<!-- Monitor List -->
|
||||
<!-- animation is not working, no idea why -->
|
||||
<Draggable
|
||||
v-model="element.monitorList"
|
||||
v-model="group.element.monitorList"
|
||||
class="monitor-list"
|
||||
group="same-group"
|
||||
:disabled="!editMode"
|
||||
:animation="100"
|
||||
item-key="id"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<template #item="monitor">
|
||||
<div class="item">
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-8 small-padding">
|
||||
<div class="info">
|
||||
<Uptime :monitor="element" type="24" :pill="true" />
|
||||
{{ element.name }}
|
||||
<font-awesome-icon v-if="editMode && showMonitorDrag(group.index)" icon="arrows-alt-v" class="action drag me-3" />
|
||||
<font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitor.index)" />
|
||||
|
||||
<Uptime :monitor="monitor.element" type="24" :pill="true" />
|
||||
{{ monitor.element.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div :key="$root.userHeartbeatBar" class="col-6 col-md-4">
|
||||
<HeartbeatBar size="small" :monitor-id="element.id" />
|
||||
<HeartbeatBar size="small" :monitor-id="monitor.element.id" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -72,13 +78,33 @@ export default {
|
|||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showGroupDrag() {
|
||||
return (this.$root.publicGroupList.length >= 2);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
removeGroup(index) {
|
||||
this.$root.publicGroupList.splice(index, 1);
|
||||
},
|
||||
|
||||
removeMonitor(groupIndex, index) {
|
||||
this.$root.publicGroupList[groupIndex].monitorList.splice(index, 1);
|
||||
},
|
||||
|
||||
showMonitorDrag(groupIndex) {
|
||||
return this.$root.publicGroupList[groupIndex].monitorList.length >= 2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../assets/vars";
|
||||
|
||||
.no-monitor-msg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -97,4 +123,13 @@ export default {
|
|||
.no-move {
|
||||
transition: transform 0s;
|
||||
}
|
||||
|
||||
.drag {
|
||||
color: #bbb;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.remove {
|
||||
color: $danger;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
16
src/icon.js
16
src/icon.js
|
|
@ -1,8 +1,8 @@
|
|||
// Add Free Font Awesome Icons
|
||||
// https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
|
||||
|
||||
import { library } from "@fortawesome/fontawesome-svg-core";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
|
||||
// Add Free Font Awesome Icons
|
||||
// https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
|
||||
import {
|
||||
faArrowAltCircleUp,
|
||||
faCog,
|
||||
|
|
@ -16,11 +16,14 @@ import {
|
|||
faSearch,
|
||||
faTachometerAlt,
|
||||
faTimes,
|
||||
faTimesCircle,
|
||||
faTrash,
|
||||
faCheckCircle,
|
||||
faStream,
|
||||
faSave,
|
||||
faExclamationCircle
|
||||
faExclamationCircle,
|
||||
faBullhorn,
|
||||
faArrowsAltV,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
library.add(
|
||||
|
|
@ -36,11 +39,14 @@ library.add(
|
|||
faSearch,
|
||||
faTachometerAlt,
|
||||
faTimes,
|
||||
faTimesCircle,
|
||||
faTrash,
|
||||
faCheckCircle,
|
||||
faStream,
|
||||
faSave,
|
||||
faExclamationCircle
|
||||
faExclamationCircle,
|
||||
faBullhorn,
|
||||
faArrowsAltV,
|
||||
);
|
||||
|
||||
export { FontAwesomeIcon };
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="container mt-3">
|
||||
<h1>
|
||||
<img src="/icon.svg" alt class="me-2" />
|
||||
<Editable v-model="config.title" tag="span" :contenteditable="editMode" />
|
||||
<Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
|
||||
</h1>
|
||||
|
||||
<div v-if="hasToken" class="mt-3" style="height: 38px;">
|
||||
|
|
@ -29,6 +29,21 @@
|
|||
{{ $t("Discard") }}
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary btn-add-group me-2" @click="">
|
||||
<font-awesome-icon icon="bullhorn" />
|
||||
{{ $t("Create Incident") }}
|
||||
</button>
|
||||
|
||||
<button v-if="isPublished" class="btn btn-light me-2" @click="">
|
||||
<font-awesome-icon icon="save" />
|
||||
{{ $t("Unpublish") }}
|
||||
</button>
|
||||
|
||||
<button v-if="!isPublished" class="btn btn-info me-2" @click="">
|
||||
<font-awesome-icon icon="save" />
|
||||
{{ $t("Publish") }}
|
||||
</button>
|
||||
|
||||
<!-- Set Default Language -->
|
||||
<!-- Set theme -->
|
||||
</div>
|
||||
|
|
@ -39,10 +54,14 @@
|
|||
<font-awesome-icon icon="check-circle" class="ok" />
|
||||
All Systems Operational
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="false">
|
||||
<font-awesome-icon icon="exclamation-circle" class="warning" />
|
||||
Partially Degraded Service
|
||||
</div>
|
||||
<div>
|
||||
<font-awesome-icon icon="times-circle" class="danger" />
|
||||
Degraded Service
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
|
|
@ -61,12 +80,15 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="editMode" class="row mt-4" style="height: 43px;">
|
||||
<div v-if="editMode" class="mt-4">
|
||||
<div>
|
||||
<button class="btn btn-primary btn-add-group" @click="addGroup">Add Group</button>
|
||||
<button class="btn btn-primary btn-add-group me-2" @click="addGroup">
|
||||
<font-awesome-icon icon="plus" />
|
||||
Add Group
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<div class="mt-3">
|
||||
<VueMultiselect
|
||||
v-model="selectedMonitor"
|
||||
:options="allMonitorList"
|
||||
|
|
@ -77,11 +99,15 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mt-4">
|
||||
<div v-if="$root.publicGroupList.length === 0" class="text-center">
|
||||
👀 Nothing here, please add a group or a monitor.
|
||||
</div>
|
||||
|
||||
<GroupList :edit-mode="enableEditMode" />
|
||||
</div>
|
||||
|
||||
<footer class="my-4">
|
||||
<footer class="mt-5 mb-4">
|
||||
Powered by <a target="_blank" href="https://github.com/louislam/uptime-kuma">Uptime Kuma</a>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
@ -99,11 +125,27 @@ if (env === "development" || localStorage.dev === "dev") {
|
|||
axios.defaults.baseURL = location.protocol + "//" + location.hostname + ":3001";
|
||||
}
|
||||
|
||||
const leavePageMsg = "Do you really want to leave? you have unsaved changes!";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
GroupList,
|
||||
VueMultiselect,
|
||||
},
|
||||
|
||||
// Leave Page for vue route change
|
||||
beforeRouteLeave(to, from, next) {
|
||||
if (this.editMode) {
|
||||
const answer = window.confirm(leavePageMsg);
|
||||
if (answer) {
|
||||
next();
|
||||
} else {
|
||||
next(false);
|
||||
}
|
||||
}
|
||||
next();
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
enableEditMode: false,
|
||||
|
|
@ -129,9 +171,15 @@ export default {
|
|||
|
||||
return result;
|
||||
},
|
||||
|
||||
editMode() {
|
||||
return this.enableEditMode && this.$root.socket.connected;
|
||||
}
|
||||
},
|
||||
|
||||
isPublished() {
|
||||
return this.config.statusPagePublished;
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
|
||||
|
|
@ -157,6 +205,17 @@ export default {
|
|||
|
||||
// Set Theme
|
||||
this.$root.statusPageTheme = this.config.statusPageTheme;
|
||||
|
||||
// Browser change page
|
||||
// https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes
|
||||
window.addEventListener("beforeunload", (e) => {
|
||||
if (this.editMode) {
|
||||
(e || window.event).returnValue = leavePageMsg;
|
||||
return leavePageMsg;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
},
|
||||
async mounted() {
|
||||
this.monitorList = (await axios.get("/api/status-page/monitor-list")).data;
|
||||
|
|
@ -177,8 +236,14 @@ export default {
|
|||
},
|
||||
|
||||
addGroup() {
|
||||
let groupName = "Untitled Group";
|
||||
|
||||
if (this.$root.publicGroupList.length === 0) {
|
||||
groupName = "Services";
|
||||
}
|
||||
|
||||
this.$root.publicGroupList.push({
|
||||
name: "Untitled Group",
|
||||
name: groupName,
|
||||
monitorList: [],
|
||||
})
|
||||
},
|
||||
|
|
@ -186,7 +251,7 @@ export default {
|
|||
discard() {
|
||||
location.reload();
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -204,6 +269,10 @@ export default {
|
|||
.warning {
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue