topaLE
/
uptime-kuma
1
0
Fork 0
Code Issues 185 Pull Requests 26 Projects Releases 28 Wiki Activity
Browse Source

[status page] checkpoint

pull/124/head
LouisLam 3 years ago
parent
1d6670ed9a
commit
db05b506f3
6 changed files with 231 additions and 57 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      .eslintrc.js
  2. 53
      server/routers/api-router.js
  3. 14
      src/assets/app.scss
  4. 51
      src/components/GroupList.vue
  5. 16
      src/icon.js
  6. 89
      src/pages/StatusPage.vue

3
.eslintrc.js
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
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
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);
}
}

51
src/components/GroupList.vue
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,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
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
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