[status page] create incident

2024-10-29 18:50:39 +00:00 · 2021-09-16 22:48:28 +08:00 · 2021-09-16 22:48:28 +08:00 · 2955abb5d9
commit 2955abb5d9
parent 8230cfe13f
13 changed files with 273 additions and 60 deletions
--- a/db/patch-incident-table.sql
+++ b/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;
--- a/server/database.js
+++ b/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,
    }

    /**
--- a/server/model/incident.js
+++ b/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;
--- a/server/routers/api-router.js
+++ b/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);
--- a/server/server.js
+++ b/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")
--- a/server/socket-handlers/status-page-socket-handler.js
+++ b/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,
+            })
+        }
+    });
+}
--- a/server/util-server.js
+++ b/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.");
+    }
+}
--- a/src/components/PublicGroupList.vue
+++ b/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>
--- a/src/i18n.js
+++ b/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,
 });
--- a/src/icon.js
+++ b/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 };
--- a/src/mixins/public.js
+++ b/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;
-        }
+        },
    }
 }
--- a/src/mixins/socket.js
+++ b/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
--- a/src/pages/StatusPage.vue
+++ b/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">
-                    <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;
+            })
        }
    }
 }