Self-Hosted
/
uptime-kuma
mirror of https://github.com/louislam/uptime-kuma
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

[status page] checkpoint

Browse Source
pull/124/head
LouisLam 3 years ago
parent 1d6670ed9a
commit db05b506f3
6 changed files with 231 additions and 57 deletions
Show Stats Download Patch File Download Diff File

3
.eslintrc.js
Unescape View File

@ -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"],
}

53
server/routers/api-router.js
Unescape View File

@ -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;

14
src/assets/app.scss
Unescape View File

@ -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);
}
}

67
src/components/GroupList.vue
Unescape View File

@ -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,29 +78,58 @@ 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>
.no-monitor-msg {
@import "../assets/vars";
.no-monitor-msg {
position: absolute;
width: 100%;
top: 20px;
left: 0;
}
}
.monitor-list {
.monitor-list {
min-height: 46px;
}
}
.flip-list-move {
.flip-list-move {
transition: transform 0.5s;
}
}
.no-move {
.no-move {
transition: transform 0s;
}
}
.drag {
color: #bbb;
cursor: grab;
}
.remove {
color: $danger;
}
</style>

16
src/icon.js
Unescape View File

@ -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 };

89
src/pages/StatusPage.vue
Unescape View File

@ -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 {

Write Preview
Loading…
Cancel
Save