added Incident report History

server/server.js

@@ -358,7 +358,6 @@ let needSetup = false;
             }
 
         });
-
         socket.on("login", async (data, callback) => {
             const clientIP = await server.getClientIP(socket);
 
@@ -663,6 +662,16 @@ let needSetup = false;
             }
         });
 
+        socket.on("fetchIncidentReports", async () => {
+            try {
+                const incidentReports = await R.findAll("incident");
+                socket.emit("incidentReports", incidentReports);
+            } catch (error) {
+                console.error(error);
+                socket.emit("incidentReportsError", { error: "Failed to fetch incident reports" });
+            }
+        });
+
         // ***************************
         // Auth Only API
         // ***************************
@@ -720,7 +729,6 @@ let needSetup = false;
                 });
             }
         });
-
         // Edit a monitor
         socket.on("editMonitor", async (monitor, callback) => {
             try {

src/pages/ListIncidents.vue

@@ -0,0 +1,79 @@
+<template>
+    <div>
+        <h1>{{ $t("Incident Reports") }}</h1>
+        <div v-if="isLoading">Loading...</div>
+        <div v-else-if="filteredReports.length">
+            <div
+                v-for="report in filteredReports"
+                :key="report._id"
+                class="big-padding"
+            >
+                <h3>{{ datetimeFormat(report._createdDate) }}</h3>
+                <hr />
+                <h4>{{ report._title }}</h4>
+                <p>{{ report._content }}</p>
+                <hr />
+                <br /><br />
+            </div>
+        </div>
+        <p v-else>No incident reports found or an error occurred.</p>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            incidentReports: [],
+            isLoading: false,
+            error: null,
+        };
+    },
+    computed: {
+        filteredReports() {
+            return this.incidentReports
+                .slice() // Create a copy to avoid mutating the original array
+                .sort(
+                    (a, b) =>
+                        new Date(b._createdDate) - new Date(a._createdDate),
+                )
+                .slice(-25); // Get the last 25 sorted reports
+        },
+    },
+
+    mounted() {
+        this.fetchIncidentReports();
+    },
+    methods: {
+        async fetchIncidentReports() {
+            this.isLoading = true;
+            try {
+                const response = await fetch("/api/incident-reports"); // Replace with your API endpoint
+                const data = await response.json();
+                this.incidentReports = data;
+            } catch (error) {
+                this.error = error;
+                console.error("Error fetching incident reports:", error);
+            } finally {
+                this.isLoading = false;
+            }
+        },
+    },
+};
+</script>
+<style>
+.incident-report-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px; /* Adjust gap between boxes */
+}
+
+.incident-report {
+    background-color: #fff;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+</style>
+

src/pages/StatusPage.vue

@@ -41,7 +41,6 @@
                         {{ $t("Refresh Interval Description", [config.autoRefreshInterval]) }}
                     </div>
                 </div>
-
                 <div class="my-3">
                     <label for="switch-theme" class="form-label">{{ $t("Theme") }}</label>
                     <select id="switch-theme" v-model="config.theme" class="form-select">
@@ -326,7 +325,25 @@
                     <!-- 👀 Nothing here, please add a group or a monitor. -->
                     👀 {{ $t("statusPageNothing") }}
                 </div>
-
+                <div>
+                    <h1>Incident Reports</h1>
+                    <div v-if="isLoading">Loading...</div>
+                    <div v-else-if="filteredReports.length">
+                        <div
+                            v-for="report in filteredReports"
+                            :key="report._id"
+                            class="big-padding"
+                        >
+                            <h3>{{ (report._createdDate) }}</h3>
+                            <hr />
+                            <h4>{{ report._title }}</h4>
+                            <p>{{ report._content }}</p>
+                            <hr />
+                            <br /><br />
+                        </div>
+                    </div>
+                    <p v-else>No incident reports found or an error occurred.</p>
+                </div>
                 <PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" :show-certificate-expiry="config.showCertificateExpiry" />
             </div>
 
@@ -378,12 +395,15 @@ import DOMPurify from "dompurify";
 import Confirm from "../components/Confirm.vue";
 import PublicGroupList from "../components/PublicGroupList.vue";
 import MaintenanceTime from "../components/MaintenanceTime.vue";
+import dateTime from "../mixins/datetime.js";
 import { getResBaseURL } from "../util-frontend";
 import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_MAINTENANCE, STATUS_PAGE_PARTIAL_DOWN, UP, MAINTENANCE } from "../util.ts";
 import Tag from "../components/Tag.vue";
 import VueMultiselect from "vue-multiselect";
+import io from "socket.io-client";
 
 const toast = useToast();
+
 dayjs.extend(duration);
 
 const leavePageMsg = "Do you really want to leave? you have unsaved changes!";
@@ -406,7 +426,7 @@ export default {
         Tag,
         VueMultiselect
     },
-
+    mixins: [ dateTime ],
     // Leave Page for vue route change
     beforeRouteLeave(to, from, next) {
         if (this.editMode) {
@@ -428,7 +448,6 @@ export default {
             default: null,
         },
     },
-
     data() {
         return {
             slug: null,
@@ -450,18 +469,31 @@ export default {
             updateCountdown: null,
             updateCountdownText: null,
             loading: true,
+            isLoading: false,
+            incidentReports: [],
+            error: null,
         };
     },
     computed: {
-
+        filteredReports() {
+            for (let reports in this.incidentReports) {
+                this.datetime(reports._createdDate);
+            }
+            return this.incidentReports
+                .slice()
+                .sort(
+                    (a, b) =>
+                        new Date(b._createdDate) - new Date(a._createdDate),
+                )
+                .slice(-25);
+        },
         logoURL() {
             if (this.imgDataUrl.startsWith("data:")) {
                 return this.imgDataUrl;
             } else {
                 return this.baseURL + this.imgDataUrl;
             }
         },
-
         /**
          * If the monitor is added to public list, which will not be in this list.
          * @returns {object[]} List of monitors
@@ -730,7 +762,7 @@ export default {
         });
 
         this.updateHeartbeatList();
-
+        this.fetchIncidentReports();
         // Go to edit page if ?edit present
         // null means ?edit present, but no value
         if (this.$route.query.edit || this.$route.query.edit === null) {
@@ -796,7 +828,22 @@ export default {
                 });
             }
         },
+        async fetchIncidentReports() {
+            const socket = io();
+            this.isLoading = true;
+            socket.emit("fetchIncidentReports");
+
+            socket.on("incidentReports", (data) => {
+                this.incidentReports = data;
+                this.isLoading = false;
+            });
 
+            socket.on("incidentReportsError", (error) => {
+                this.error = error;
+                console.error("", error);
+                this.isLoading = false;
+            });
+        },
         /**
          * Setup timer to display countdown to refresh
          * @returns {void}

src/router.js

@@ -7,6 +7,7 @@ import DashboardHome from "./pages/DashboardHome.vue";
 import Details from "./pages/Details.vue";
 import EditMonitor from "./pages/EditMonitor.vue";
 import EditMaintenance from "./pages/EditMaintenance.vue";
+import ListIncidents from "./pages/ListIncidents.vue";
 import List from "./pages/List.vue";
 const Settings = () => import("./pages/Settings.vue");
 import Setup from "./pages/Setup.vue";
@@ -160,6 +161,10 @@ const routes = [
                         path: "/maintenance/edit/:id",
                         component: EditMaintenance,
                     },
+                    {
+                        path: "/incident-history",
+                        component: ListIncidents,
+                    },
                 ],
             },
         ],