[status page] create incident

pull/124/head
LouisLam 3 years ago
parent 8230cfe13f
commit 2955abb5d9

@ -0,0 +1,17 @@
-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
BEGIN TRANSACTION;
create table incident
(
id INTEGER not null
constraint incident_pk
primary key autoincrement,
title VARCHAR(255) not null,
content TEXT not null,
style VARCHAR(30) default 'warning' not null,
created_date DATETIME default (DATETIME('now')) not null,
pin BOOLEAN default 1 not null,
active BOOLEAN default 1 not null
);
COMMIT;

@ -34,6 +34,7 @@ class Database {
"patch-2fa.sql": true,
"patch-add-retry-interval-monitor.sql": true,
"patch-monitor-public-weight.sql": true,
"patch-incident-table.sql": true,
}
/**

@ -0,0 +1,17 @@
const { BeanModel } = require("redbean-node/dist/bean-model");
class Incident extends BeanModel {
toPublicJSON() {
return {
id: this.id,
style: this.style,
title: this.title,
content: this.content,
pin: this.pin,
createdDate: this.createdDate,
};
}
}
module.exports = Incident;

@ -38,7 +38,10 @@ router.get("/api/status-page/incident", async (_, response) => {
try {
await checkPublished();
// TODO:
response.json({
ok: true,
incident: (await R.findOne("incident", " pin = 1 AND active = 1")).toPublicJSON(),
})
} catch (error) {
send403(response, error.message);

@ -35,7 +35,7 @@ console.log("Importing this project modules");
debug("Importing Monitor");
const Monitor = require("./model/monitor");
debug("Importing Settings");
const { getSettings, setSettings, setting, initJWTSecret, genSecret, allowDevAllOrigin } = require("./util-server");
const { getSettings, setSettings, setting, initJWTSecret, genSecret, allowDevAllOrigin, checkLogin } = require("./util-server");
debug("Importing Notification");
const { Notification } = require("./notification");
@ -91,6 +91,7 @@ module.exports.io = io;
// Must be after io instantiation
const { sendNotificationList, sendHeartbeatList, sendImportantHeartbeatList } = require("./client");
const { statusPageSocketHandler } = require("./socket-handlers/status-page-socket-handler");
app.use(express.json());
@ -1104,7 +1105,10 @@ exports.entryPage = "dashboard";
}
});
debug("added all socket handlers")
// Status Page Socket Handler for admin only
statusPageSocketHandler(socket);
debug("added all socket handlers");
// ***************************
// Better do anything after added all socket handlers here
@ -1208,12 +1212,6 @@ async function getMonitorJSONList(userID) {
return result;
}
function checkLogin(socket) {
if (! socket.userID) {
throw new Error("You are not logged in.");
}
}
async function initDatabase() {
if (! fs.existsSync(Database.path)) {
console.log("Copying Database")

@ -0,0 +1,61 @@
const { R } = require("redbean-node");
const { checkLogin } = require("../util-server");
const dayjs = require("dayjs");
module.exports.statusPageSocketHandler = (socket) => {
// Post or edit incident
socket.on("postIncident", async (incident, callback) => {
try {
checkLogin(socket);
await R.exec("UPDATE incident SET pin = 0 ");
let incidentBean;
if (incident.id) {
incidentBean = await R.findOne("incident", " id = ?", [
incident.id
]);
}
if (incidentBean == null) {
incidentBean = R.dispense("incident");
}
incidentBean.title = incident.title;
incidentBean.content = incident.content;
incidentBean.style = incident.style;
incidentBean.pin = true;
incidentBean.createdDate = R.isoDateTime(dayjs.utc());
await R.store(incidentBean);
callback({
ok: true,
incident: incidentBean.toPublicJSON(),
})
} catch (error) {
callback({
ok: false,
msg: error.message,
})
}
});
socket.on("unpinIncident", async (callback) => {
try {
checkLogin(socket);
await R.exec("UPDATE incident SET pin = 0 WHERE pin = 1");
callback({
ok: true,
})
} catch (error) {
callback({
ok: false,
msg: error.message,
})
}
});
}

@ -293,3 +293,9 @@ exports.allowAllOrigin = (res) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
}
exports.checkLogin = (socket) => {
if (! socket.userID) {
throw new Error("You are not logged in.");
}
}

@ -9,7 +9,7 @@
<template #item="group">
<div>
<!-- Group Title -->
<h2 class="mt-5">
<h2 class="mt-5 group-title">
<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" />
@ -128,4 +128,12 @@ export default {
.remove {
color: $danger;
}
.group-title {
span {
display: inline-block;
min-width: 15px;
}
}
</style>

@ -43,6 +43,6 @@ export const i18n = createI18n({
locale: localStorage.locale || "en",
fallbackLocale: "en",
silentFallbackWarn: true,
silentTranslationWarn: false,
silentTranslationWarn: true,
messages: languageList,
});

@ -25,6 +25,7 @@ import {
faBullhorn,
faArrowsAltV,
faUnlink,
faQuestionCircle,
} from "@fortawesome/free-solid-svg-icons";
library.add(
@ -49,6 +50,7 @@ library.add(
faBullhorn,
faArrowsAltV,
faUnlink,
faQuestionCircle,
);
export { FontAwesomeIcon };

@ -22,8 +22,19 @@ export default {
result[monitor.id] = monitor;
}
}
return result;
},
publicLastHeartbeatList() {
let result = {}
for (let monitorID in this.publicMonitorList) {
if (this.lastHeartbeatList[monitorID]) {
result[monitorID] = this.lastHeartbeatList[monitorID];
}
}
return result;
}
},
}
}

@ -106,7 +106,11 @@ export default {
this.heartbeatList[data.monitorID] = [];
}
this.heartbeatList[data.monitorID].push(data)
this.heartbeatList[data.monitorID].push(data);
if (this.heartbeatList[data.monitorID].length >= 150) {
this.heartbeatList[data.monitorID].shift();
}
// Add to important list if it is important
// Also toast

@ -12,7 +12,6 @@
:width="128"
:height="128"
:langType="$i18n.locale"
:headers="uploadHeader"
img-format="png"
:noCircle="true"
:noSquare="false"
@ -24,7 +23,7 @@
</h1>
<!-- Admin functions -->
<div v-if="hasToken" class="mt-3">
<div v-if="hasToken" class="mb-4">
<div v-if="!enableEditMode">
<button class="btn btn-info me-2" @click="edit">
<font-awesome-icon icon="edit" />
@ -78,30 +77,44 @@
</div>
<!-- Incident -->
<div v-if="incident !== null" class="shadow-box alert alert-success mt-4 p-4 incident" role="alert">
<div v-if="incident !== null" class="shadow-box alert mb-4 p-4 incident" role="alert" :class="incidentClass">
<strong v-if="editIncidentMode">{{ $t("Title") }}:</strong>
<Editable v-model="incident.title" tag="h4" :contenteditable="editIncidentMode" :noNL="true" class="alert-heading" />
<strong v-if="editIncidentMode">{{ $t("Content") }}:</strong>
<Editable v-model="incident.content" tag="div" :contenteditable="editIncidentMode" class="content" />
<div v-if="editMode" class="mt-3">
<button v-if="editMode && !incident.id" class="btn btn-light me-2" @click="postIncident">
<button v-if="editIncidentMode" class="btn btn-light me-2" @click="postIncident">
<font-awesome-icon icon="bullhorn" />
{{ $t("Post") }}
</button>
<button v-if="editMode && !incident.id" class="btn btn-light me-2" @click="cancelIncident">
<font-awesome-icon icon="times" />
{{ $t("Cancel") }}
</button>
<!-- TODO : color change -->
<button v-if="editMode && incident.id" class="btn btn-light me-2" @click="editIncident">
<button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="editIncident">
<font-awesome-icon icon="edit" />
{{ $t("Edit") }}
</button>
<button v-if="editMode && incident.id" class="btn btn-light me-2" @click="unpinIncident">
<button v-if="editIncidentMode" class="btn btn-light me-2" @click="cancelIncident">
<font-awesome-icon icon="times" />
{{ $t("Cancel") }}
</button>
<div v-if="editIncidentMode" class="dropdown d-inline-block me-2">
<button id="dropdownMenuButton1" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Style: {{ incident.style }}
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#" @click="incident.style = 'info'">info</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'warning'">warning</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'danger'">danger</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'primary'">primary</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'light'">light</a></li>
<li><a class="dropdown-item" href="#" @click="incident.style = 'dark'">dark</a></li>
</ul>
</div>
<button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="unpinIncident">
<font-awesome-icon icon="unlink" />
{{ $t("Unpin") }}
</button>
@ -109,25 +122,35 @@
</div>
<!-- Overall Status -->
<div v-if="$root.publicGroupList.length > 0" class="shadow-box list p-4 overall-status mt-4">
<div v-if="false">
<font-awesome-icon icon="check-circle" class="ok" />
All Systems Operational
</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 class="shadow-box list p-4 overall-status mb-4">
<div v-if="Object.keys($root.publicMonitorList).length === 0">
<font-awesome-icon icon="question-circle" class="ok" />
No Services
</div>
<template v-else>
<div v-if="allUp">
<font-awesome-icon icon="check-circle" class="ok" />
All Systems Operational
</div>
<div v-if="partialDown">
<font-awesome-icon icon="exclamation-circle" class="warning" />
Partially Degraded Service
</div>
<div v-if="allDown">
<font-awesome-icon icon="times-circle" class="danger" />
Degraded Service
</div>
</template>
</div>
<!-- Description -->
<Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mt-4 description" />
<strong v-if="editMode">{{ $t("Description") }}:</strong>
<Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mb-4 description" />
<div v-if="editMode" class="mt-4">
<div v-if="editMode" class="mb-4">
<div>
<button class="btn btn-primary btn-add-group me-2" @click="addGroup">
<font-awesome-icon icon="plus" />
@ -146,12 +169,12 @@
</div>
</div>
<div class="mt-4">
<div class="mb-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" />
<PublicGroupList :edit-mode="enableEditMode" />
</div>
<footer class="mt-5 mb-4">
@ -163,14 +186,17 @@
<script>
import VueMultiselect from "vue-multiselect"
import axios from "axios";
import GroupList from "../components/GroupList.vue";
import PublicGroupList from "../components/PublicGroupList.vue";
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";
const toast = useToast();
const leavePageMsg = "Do you really want to leave? you have unsaved changes!";
export default {
components: {
GroupList,
PublicGroupList,
VueMultiselect,
ImageCropUpload
},
@ -223,7 +249,7 @@ export default {
},
editIncidentMode() {
return this.editMode && this.enableEditIncidentMode;
return this.enableEditIncidentMode;
},
isPublished() {
@ -234,12 +260,6 @@ export default {
return this.config.statusPageTheme;
},
uploadHeader() {
return {
Authorization: "Bearer " + localStorage.token,
}
},
logoClass() {
if (this.editMode) {
return {
@ -247,7 +267,44 @@ export default {
}
}
return {};
}
},
incidentClass() {
return "bg-" + this.incident.style;
},
overallStatus() {
let status = STATUS_PAGE_ALL_UP;
let hasUp = false;
for (let id in this.$root.publicLastHeartbeatList) {
let beat = this.$root.publicLastHeartbeatList[id];
if (beat.status === UP) {
hasUp = true;
} else {
status = STATUS_PAGE_PARTIAL_DOWN;
}
}
if (! hasUp) {
status = STATUS_PAGE_ALL_DOWN;
}
return status;
},
allUp() {
return this.overallStatus === STATUS_PAGE_ALL_UP;
},
partialDown() {
return this.overallStatus === STATUS_PAGE_PARTIAL_DOWN;
},
allDown() {
return this.overallStatus === STATUS_PAGE_ALL_DOWN;
},
},
watch: {
@ -276,7 +333,6 @@ export default {
},
async created() {
this.hasToken = ("token" in localStorage);
this.config = (await axios.get("/api/status-page/config")).data;
// Browser change page
// https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes
@ -290,7 +346,19 @@ export default {
});
},
async mounted() {
this.monitorList = (await axios.get("/api/status-page/monitor-list")).data;
axios.get("/api/status-page/config").then((res) => {
this.config = res.data;
});
axios.get("/api/status-page/incident").then((res) => {
if (res.data.ok) {
this.incident = res.data.incident;
}
});
axios.get("/api/status-page/monitor-list").then((res) => {
this.monitorList = res.data;
});
},
methods: {
@ -346,27 +414,44 @@ export default {
this.incident = {
title: "",
content: "",
style: "primary",
};
},
postIncident() {
this.enableEditIncidentMode = false;
// TODO
if (this.incident.title == "" || this.incident.content == "") {
toast.error("Please input title and content.");
return;
}
this.$root.getSocket().emit("postIncident", this.incident, (res) => {
if (res.ok) {
this.enableEditIncidentMode = false;
this.incident = res.incident;
} else {
toast.error(res.msg);
}
});
},
/**
* Click Edit Button
*/
editIncident() {
this.enableEditIncidentMode = true;
// TODO
},
cancelIncident() {
this.enableEditIncidentMode = false;
this.incident = null;
},
unpinIncident() {
this.incident = null;
// TODO
this.$root.getSocket().emit("unpinIncident", () => {
this.incident = null;
})
}
}
}

Loading…
Cancel
Save