[status page] checkpoint

2024-11-09 23:24:07 -08:00 · 2021-09-15 14:34:30 +08:00 · 2021-09-15 14:34:30 +08:00 · db05b506f3
parent 1d6670ed9a
commit db05b506f3
6 changed files with 231 additions and 57 deletions
--- a/.eslintrc.js
+++ b/.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"],
            }
--- a/server/routers/api-router.js
+++ b/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,36 +24,82 @@ 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);

-    const monitorList = {};
-    let list = await R.find("monitor", " public = 1 ORDER BY weight DESC, name ", [
-    ]);
+    try {
+        await checkPublished();
+        const monitorList = {};
+        let list = await R.find("monitor", " public = 1 ORDER BY weight DESC, name ", [
+        ]);

-    for (let monitor of list) {
-        monitorList[monitor.id] = await monitor.toJSON();
+        for (let monitor of list) {
+            monitorList[monitor.id] = await monitor.toJSON();
+        }
+
+        response.json(monitorList);
+
+    } catch (error) {
+        send403(response, error.message);
    }
-
-    response.json(monitorList);
 });

 // 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("", "  ", [
-    ])
+        const monitorList = {};
+        let list = await R.find("", "  ", [
+        ])

-    for (let monitor of list) {
-        monitorList[monitor.id] = await monitor.toJSON();
+        for (let monitor of list) {
+            monitorList[monitor.id] = await monitor.toJSON();
+        }
+
+        response.json({
+            monitorList: monitorList,
+        });
+
+    } catch (error) {
+        send403(response, error.message);
    }
-
-    response.json({
-        monitorList: monitorList,
-    });
 });

+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;
--- a/src/assets/app.scss
+++ b/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);
+    }
+}
--- a/src/components/GroupList.vue
+++ b/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" />
-                                            {{ 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,29 +78,58 @@ 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>
-    .no-monitor-msg {
-        position: absolute;
-        width: 100%;
-        top: 20px;
-        left: 0;
-    }
+@import "../assets/vars";

-    .monitor-list {
-        min-height: 46px;
-    }
+.no-monitor-msg {
+    position: absolute;
+    width: 100%;
+    top: 20px;
+    left: 0;
+}

-    .flip-list-move {
-        transition: transform 0.5s;
-    }
+.monitor-list {
+    min-height: 46px;
+}

-    .no-move {
-        transition: transform 0s;
-    }
+.flip-list-move {
+    transition: transform 0.5s;
+}
+
+.no-move {
+    transition: transform 0s;
+}
+
+.drag {
+    color: #bbb;
+    cursor: grab;
+}
+
+.remove {
+    color: $danger;
+}
 </style>
--- a/src/icon.js
+++ b/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 };
--- a/src/pages/StatusPage.vue
+++ b/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 {