[status page] checkpoint

.eslintrc.js

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

server/routers/api-router.js

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

src/assets/app.scss

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

src/components/GroupList.vue

@@ -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" />
+                                            <font-awesome-icon v-if="editMode && showMonitorDrag(group.index)" icon="arrows-alt-v" class="action drag me-3" />
-                                            {{ element.name }}
+                                            <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>

src/icon.js

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

src/pages/StatusPage.vue

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