[status page] create incident

db/patch-incident-table.sql

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

server/database.js

@@ -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,
     }
 
     /**

server/model/incident.js

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

server/routers/api-router.js

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

server/server.js

@@ -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")

server/socket-handlers/status-page-socket-handler.js

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

server/util-server.js

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

src/components/GroupList.vue → src/components/PublicGroupList.vue

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

src/i18n.js

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

src/icon.js

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

src/mixins/public.js

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

src/mixins/socket.js

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

src/pages/StatusPage.vue

@@ -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">
+                <button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="editIncident">
-                    <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">
                     <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 class="shadow-box list  p-4 overall-status mb-4">
-            <div v-if="false">
+            <div v-if="Object.keys($root.publicMonitorList).length === 0">
-                <font-awesome-icon icon="check-circle" class="ok" />
+                <font-awesome-icon icon="question-circle" class="ok" />
-                All Systems Operational
+                No Services
-            </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>
+
+            <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;
+            if (this.incident.title == "" || this.incident.content == "") {
-            // TODO
+                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;
+            this.$root.getSocket().emit("unpinIncident", () => {
-            // TODO
+                this.incident = null;
+            })
         }
     }
 }