[new status page] wip

src/assets/app.scss

@@ -92,6 +92,10 @@ textarea.form-control {
     }
 }
 
+.btn-dark {
+    background-color: #161B22;
+}
+
 @media (max-width: 550px) {
     .table-shadow-box {
         padding: 10px !important;
@@ -162,12 +166,12 @@ textarea.form-control {
     .form-check-input:checked {
         border-color: $primary; // Re-apply bootstrap border
     }
-    
+
     .form-switch .form-check-input {
         background-color: #232f3b;
     }
 
-    a,
+    a:not(.btn),
     .table,
     .nav-link {
         color: $dark-font-color;

src/icon.js

@@ -34,6 +34,8 @@ import {
     faAward,
     faLink,
     faChevronDown,
+    faPen,
+    faExternalLinkSquareAlt,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -67,6 +69,8 @@ library.add(
     faAward,
     faLink,
     faChevronDown,
+    faPen,
+    faExternalLinkSquareAlt,
 );
 
 export { FontAwesomeIcon };

src/languages/en.js

@@ -183,7 +183,7 @@ export default {
     "Edit Status Page": "Edit Status Page",
     "Go to Dashboard": "Go to Dashboard",
     "Status Page": "Status Page",
-    "Status Pages": "Status Page",
+    "Status Pages": "Status Pages",
     defaultNotificationName: "My {notification} Alert ({number})",
     here: "here",
     Required: "Required",

src/layouts/Layout.vue

@@ -19,9 +19,9 @@
 
             <ul class="nav nav-pills">
                 <li class="nav-item me-2">
-                    <a href="/status" class="nav-link status-page">
-                        <font-awesome-icon icon="stream" /> {{ $t("Status Page") }}
-                    </a>
+                    <router-link to="/manage-status-page" class="nav-link">
+                        <font-awesome-icon icon="stream" /> {{ $t("Status Pages") }}
+                    </router-link>
                 </li>
                 <li v-if="$root.loggedIn" class="nav-item me-2">
                     <router-link to="/dashboard" class="nav-link">

src/mixins/socket.js

@@ -33,6 +33,7 @@ export default {
             uptimeList: { },
             tlsInfoList: {},
             notificationList: [],
+            statusPageList: [],
             connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
         };
     },
@@ -103,6 +104,11 @@ export default {
                 this.notificationList = data;
             });
 
+            socket.on("statusPageList", (data) => {
+                console.log(data);
+                this.statusPageList = data;
+            });
+
             socket.on("heartbeat", (data) => {
                 if (! (data.monitorID in this.heartbeatList)) {
                     this.heartbeatList[data.monitorID] = [];

src/pages/ManageStatusPage.vue

@@ -0,0 +1,104 @@
+<template>
+    <transition name="slide-fade" appear>
+        <div>
+            <h1 class="mb-3">
+                {{ $t("Status Pages") }}
+            </h1>
+
+            <div>
+                <router-link to="/add-status-page" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("Add New Status Page") }}</router-link>
+            </div>
+
+            <div class="shadow-box">
+                <div v-for="statusPage in $root.statusPageList" class="item">
+                    <div class="row">
+                        <div class="col">
+                            <div class="title">{{ statusPage.title }}</div>
+                            <div class="slug">/status/{{ statusPage.slug }}</div>
+                        </div>
+                        <div class="col-lg-6 col-xl-5">
+                            <div class="btn-group">
+                                <a target="_blank" :href="'/status/' + statusPage.slug" class="btn btn-dark">
+                                    <font-awesome-icon icon="external-link-square-alt" /><br />
+                                    {{ $t("Manage") }}
+                                </a>
+
+                                <router-link to="/" class="btn btn-danger">
+                                    <font-awesome-icon icon="trash" /><br />
+                                    {{ $t("Delete") }}
+                                </router-link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+
+export default {
+    components: {
+
+    },
+    data() {
+        return {
+        };
+    },
+    computed: {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+    @import "../assets/vars.scss";
+
+    .item {
+        display: block;
+        text-decoration: none;
+        padding: 13px 15px 10px 15px;
+        border-radius: 10px;
+        transition: all ease-in-out 0.15s;
+
+        &:hover {
+            background-color: $highlight-white;
+        }
+
+        &.active {
+            background-color: #cdf8f4;
+        }
+
+        .title {
+            font-weight: bold;
+            font-size: 20px;
+        }
+
+        .slug {
+            font-size: 14px;
+        }
+
+        .btn-group {
+            //margin-top: 7px;
+        }
+    }
+
+    .dark {
+        .item {
+            &:hover {
+                background-color: $dark-bg2;
+            }
+
+            &.active {
+                background-color: $dark-bg2;
+            }
+        }
+    }
+</style>

src/pages/Settings.vue

@@ -167,6 +167,8 @@ footer {
         margin: 0.5em;
         padding: 0.7em 1em;
         cursor: pointer;
+        border-left-width: 0;
+        transition: all ease-in-out 0.1s;
     }
 
     .menu-item:hover {

src/pages/StatusPage.vue

@@ -247,6 +247,7 @@ export default {
 
     data() {
         return {
+            slug: null,
             enableEditMode: false,
             enableEditIncidentMode: false,
             hasToken: false,
@@ -296,15 +297,15 @@ export default {
         },
 
         isPublished() {
-            return this.config.statusPagePublished;
+            return this.config.published;
         },
 
         theme() {
-            return this.config.statusPageTheme;
+            return this.config.theme;
         },
 
         tagsVisible() {
-            return this.config.statusPageTags
+            return this.config.showTags;
         },
 
         logoClass() {
@@ -378,8 +379,8 @@ export default {
         },
 
         // Set Theme
-        "config.statusPageTheme"() {
-            this.$root.statusPageTheme = this.config.statusPageTheme;
+        "config.theme"() {
+            this.$root.statusPageTheme = this.config.theme;
             this.loadedTheme = true;
         },
 
@@ -409,7 +410,13 @@ export default {
         }
     },
     async mounted() {
-        axios.get("/api/status-page/config").then((res) => {
+        this.slug = this.$route.params.slug;
+
+        if (!this.slug) {
+            this.slug = "default";
+        }
+
+        axios.get("/api/status-page/config/" + this.slug).then((res) => {
             this.config = res.data;
 
             if (this.config.logo) {
@@ -417,13 +424,13 @@ export default {
             }
         });
 
-        axios.get("/api/status-page/incident").then((res) => {
+        axios.get("/api/status-page/incident/" + this.slug).then((res) => {
             if (res.data.ok) {
                 this.incident = res.data.incident;
             }
         });
 
-        axios.get("/api/status-page/monitor-list").then((res) => {
+        axios.get("/api/status-page/monitor-list/" + this.slug).then((res) => {
             this.$root.publicGroupList = res.data;
         });
 
@@ -438,7 +445,7 @@ export default {
         updateHeartbeatList() {
             // If editMode, it will use the data from websocket.
             if (! this.editMode) {
-                axios.get("/api/status-page/heartbeat").then((res) => {
+                axios.get("/api/status-page/heartbeat/" + this.slug).then((res) => {
                     this.$root.heartbeatList = res.data.heartbeatList;
                     this.$root.uptimeList = res.data.uptimeList;
                     this.loadedData = true;
@@ -485,10 +492,10 @@ export default {
         },
 
         changeTheme(name) {
-            this.config.statusPageTheme = name;
+            this.config.theme = name;
         },
         changeTagsVisibilty(newState) {
-            this.config.statusPageTags = newState;
+            this.config.showTags = newState;
 
             // On load, the status page will not include tags if it's not enabled for security reasons
             // Which means if we enable tags, it won't show in the UI until saved
@@ -501,9 +508,9 @@ export default {
                         return {
                             ...monitor,
                             tags: newState ? this.$root.monitorList[monitor.id].tags : []
-                        }
+                        };
                     })
-                }
+                };
             });
         },
 

src/router.js

@@ -18,6 +18,7 @@ import MonitorHistory from "./components/settings/MonitorHistory.vue";
 import Security from "./components/settings/Security.vue";
 import Backup from "./components/settings/Backup.vue";
 import About from "./components/settings/About.vue";
+import ManageStatusPage from "./pages/ManageStatusPage.vue";
 
 const routes = [
     {
@@ -98,6 +99,10 @@ const routes = [
                             },
                         ]
                     },
+                    {
+                        path: "/manage-status-page",
+                        component: ManageStatusPage,
+                    },
                 ],
             },
         ],
@@ -114,6 +119,10 @@ const routes = [
         path: "/status",
         component: StatusPage,
     },
+    {
+        path: "/status/:slug",
+        component: StatusPage,
+    },
 ];
 
 export const router = createRouter({