feat: implement incident history (#6469)

Co-authored-by: Frank Elsinga <frank@elsinga.de>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

server/model/incident.js

@@ -1,9 +1,21 @@
 const { BeanModel } = require("redbean-node/dist/bean-model");
+const { R } = require("redbean-node");
+const dayjs = require("dayjs");
 
 class Incident extends BeanModel {
+    /**
+     * Resolve the incident and mark it as inactive
+     * @returns {Promise<void>}
+     */
+    async resolve() {
+        this.active = false;
+        this.pin = false;
+        this.last_updated_date = R.isoDateTime(dayjs.utc());
+        await R.store(this);
+    }
+
     /**
      * Return an object that ready to parse to JSON for public
-     * Only show necessary data to public
      * @returns {object} Object ready to parse
      */
     toPublicJSON() {
@@ -12,9 +24,11 @@ class Incident extends BeanModel {
             style: this.style,
             title: this.title,
             content: this.content,
-            pin: this.pin,
+            pin: !!this.pin,
-            createdDate: this.createdDate,
+            active: !!this.active,
-            lastUpdatedDate: this.lastUpdatedDate,
+            createdDate: this.created_date,
+            lastUpdatedDate: this.last_updated_date,
+            status_page_id: this.status_page_id,
         };
     }
 }

server/model/status_page.js

@@ -7,8 +7,8 @@ const analytics = require("../analytics/analytics");
 const { marked } = require("marked");
 const { Feed } = require("feed");
 const config = require("../config");
-const { setting } = require("../util-server");
 
+const { setting } = require("../util-server");
 const {
     STATUS_PAGE_ALL_DOWN,
     STATUS_PAGE_ALL_UP,
@@ -17,6 +17,7 @@ const {
     UP,
     MAINTENANCE,
     DOWN,
+    INCIDENT_PAGE_SIZE,
 } = require("../../src/util");
 
 class StatusPage extends BeanModel {
@@ -307,12 +308,13 @@ class StatusPage extends BeanModel {
     static async getStatusPageData(statusPage) {
         const config = await statusPage.toPublicJSON();
 
-        // Incident
+        // All active incidents
-        let incident = await R.findOne("incident", " pin = 1 AND active = 1 AND status_page_id = ? ", [statusPage.id]);
+        let incidents = await R.find(
-
+            "incident",
-        if (incident) {
+            " pin = 1 AND active = 1 AND status_page_id = ? ORDER BY created_date DESC",
-            incident = incident.toPublicJSON();
+            [statusPage.id]
-        }
+        );
+        incidents = incidents.map((i) => i.toPublicJSON());
 
         let maintenanceList = await StatusPage.getMaintenanceList(statusPage.id);
 
@@ -330,7 +332,7 @@ class StatusPage extends BeanModel {
         // Response
         return {
             config,
-            incident,
+            incidents,
             publicGroupList,
             maintenanceList,
         };
@@ -499,6 +501,54 @@ class StatusPage extends BeanModel {
         }
     }
 
+    /**
+     * Get paginated incident history for a status page using cursor-based pagination
+     * @param {number} statusPageId ID of the status page
+     * @param {string|null} cursor ISO date string cursor (created_date of last item from previous page)
+     * @param {boolean} isPublic Whether to return public or admin data
+     * @returns {Promise<object>} Paginated incident data with cursor
+     */
+    static async getIncidentHistory(statusPageId, cursor = null, isPublic = true) {
+        let incidents;
+
+        if (cursor) {
+            incidents = await R.find(
+                "incident",
+                " status_page_id = ? AND created_date < ? ORDER BY created_date DESC LIMIT ? ",
+                [statusPageId, cursor, INCIDENT_PAGE_SIZE]
+            );
+        } else {
+            incidents = await R.find("incident", " status_page_id = ? ORDER BY created_date DESC LIMIT ? ", [
+                statusPageId,
+                INCIDENT_PAGE_SIZE,
+            ]);
+        }
+
+        const total = await R.count("incident", " status_page_id = ? ", [statusPageId]);
+
+        const lastIncident = incidents[incidents.length - 1];
+        let nextCursor = null;
+        let hasMore = false;
+
+        if (lastIncident) {
+            const moreCount = await R.count("incident", " status_page_id = ? AND created_date < ? ", [
+                statusPageId,
+                lastIncident.created_date,
+            ]);
+            hasMore = moreCount > 0;
+            if (hasMore) {
+                nextCursor = lastIncident.created_date;
+            }
+        }
+
+        return {
+            incidents: incidents.map((i) => i.toPublicJSON()),
+            total,
+            nextCursor,
+            hasMore,
+        };
+    }
+
     /**
      * Get list of maintenances
      * @param {number} statusPageId ID of status page to get maintenance for

server/routers/status-page-router.js

@@ -142,6 +142,30 @@ router.get("/api/status-page/:slug/manifest.json", cache("1440 minutes"), async
     }
 });
 
+router.get("/api/status-page/:slug/incident-history", cache("5 minutes"), async (request, response) => {
+    allowDevAllOrigin(response);
+
+    try {
+        let slug = request.params.slug;
+        slug = slug.toLowerCase();
+        let statusPageID = await StatusPage.slugToID(slug);
+
+        if (!statusPageID) {
+            sendHttpError(response, "Status Page Not Found");
+            return;
+        }
+
+        const cursor = request.query.cursor || null;
+        const result = await StatusPage.getIncidentHistory(statusPageID, cursor, true);
+        response.json({
+            ok: true,
+            ...result,
+        });
+    } catch (error) {
+        sendHttpError(response, error.message);
+    }
+});
+
 // overall status-page status badge
 router.get("/api/status-page/:slug/badge", cache("5 minutes"), async (request, response) => {
     allowDevAllOrigin(response);

server/socket-handlers/status-page-socket-handler.js

@@ -8,6 +8,21 @@ const apicache = require("../modules/apicache");
 const StatusPage = require("../model/status_page");
 const { UptimeKumaServer } = require("../uptime-kuma-server");
 
+/**
+ * Validates incident data
+ * @param {object} incident - The incident object
+ * @returns {void}
+ * @throws {Error} If validation fails
+ */
+function validateIncident(incident) {
+    if (!incident.title || incident.title.trim() === "") {
+        throw new Error("Please input title");
+    }
+    if (!incident.content || incident.content.trim() === "") {
+        throw new Error("Please input content");
+    }
+}
+
 /**
  * Socket handlers for status page
  * @param {Socket} socket Socket.io instance to add listeners on
@@ -25,8 +40,6 @@ module.exports.statusPageSocketHandler = (socket) => {
                 throw new Error("slug is not found");
             }
 
-            await R.exec("UPDATE incident SET pin = 0 WHERE status_page_id = ? ", [statusPageID]);
-
             let incidentBean;
 
             if (incident.id) {
@@ -44,12 +57,13 @@ module.exports.statusPageSocketHandler = (socket) => {
             incidentBean.content = incident.content;
             incidentBean.style = incident.style;
             incidentBean.pin = true;
+            incidentBean.active = true;
             incidentBean.status_page_id = statusPageID;
 
             if (incident.id) {
-                incidentBean.lastUpdatedDate = R.isoDateTime(dayjs.utc());
+                incidentBean.last_updated_date = R.isoDateTime(dayjs.utc());
             } else {
-                incidentBean.createdDate = R.isoDateTime(dayjs.utc());
+                incidentBean.created_date = R.isoDateTime(dayjs.utc());
             }
 
             await R.store(incidentBean);
@@ -85,6 +99,171 @@ module.exports.statusPageSocketHandler = (socket) => {
         }
     });
 
+    socket.on("getIncidentHistory", async (slug, cursor, callback) => {
+        try {
+            let statusPageID = await StatusPage.slugToID(slug);
+            if (!statusPageID) {
+                throw new Error("slug is not found");
+            }
+
+            const isPublic = !socket.userID;
+            const result = await StatusPage.getIncidentHistory(statusPageID, cursor, isPublic);
+            callback({
+                ok: true,
+                ...result,
+            });
+        } catch (error) {
+            callback({
+                ok: false,
+                msg: error.message,
+            });
+        }
+    });
+
+    socket.on("editIncident", async (slug, incidentID, incident, callback) => {
+        try {
+            checkLogin(socket);
+
+            let statusPageID = await StatusPage.slugToID(slug);
+            if (!statusPageID) {
+                callback({
+                    ok: false,
+                    msg: "slug is not found",
+                    msgi18n: true,
+                });
+                return;
+            }
+
+            let bean = await R.findOne("incident", " id = ? AND status_page_id = ? ", [incidentID, statusPageID]);
+            if (!bean) {
+                callback({
+                    ok: false,
+                    msg: "Incident not found or access denied",
+                    msgi18n: true,
+                });
+                return;
+            }
+
+            try {
+                validateIncident(incident);
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message,
+                    msgi18n: true,
+                });
+                return;
+            }
+
+            const validStyles = ["info", "warning", "danger", "primary", "light", "dark"];
+            if (!validStyles.includes(incident.style)) {
+                incident.style = "warning";
+            }
+
+            bean.title = incident.title;
+            bean.content = incident.content;
+            bean.style = incident.style;
+            bean.pin = incident.pin !== false;
+            bean.lastUpdatedDate = R.isoDateTime(dayjs.utc());
+
+            await R.store(bean);
+
+            callback({
+                ok: true,
+                msg: "Saved.",
+                msgi18n: true,
+                incident: bean.toPublicJSON(),
+            });
+        } catch (error) {
+            callback({
+                ok: false,
+                msg: error.message,
+                msgi18n: true,
+            });
+        }
+    });
+
+    socket.on("deleteIncident", async (slug, incidentID, callback) => {
+        try {
+            checkLogin(socket);
+
+            let statusPageID = await StatusPage.slugToID(slug);
+            if (!statusPageID) {
+                callback({
+                    ok: false,
+                    msg: "slug is not found",
+                    msgi18n: true,
+                });
+                return;
+            }
+
+            let bean = await R.findOne("incident", " id = ? AND status_page_id = ? ", [incidentID, statusPageID]);
+            if (!bean) {
+                callback({
+                    ok: false,
+                    msg: "Incident not found or access denied",
+                    msgi18n: true,
+                });
+                return;
+            }
+
+            await R.trash(bean);
+
+            callback({
+                ok: true,
+                msg: "successDeleted",
+                msgi18n: true,
+            });
+        } catch (error) {
+            callback({
+                ok: false,
+                msg: error.message,
+                msgi18n: true,
+            });
+        }
+    });
+
+    socket.on("resolveIncident", async (slug, incidentID, callback) => {
+        try {
+            checkLogin(socket);
+
+            let statusPageID = await StatusPage.slugToID(slug);
+            if (!statusPageID) {
+                callback({
+                    ok: false,
+                    msg: "slug is not found",
+                    msgi18n: true,
+                });
+                return;
+            }
+
+            let bean = await R.findOne("incident", " id = ? AND status_page_id = ? ", [incidentID, statusPageID]);
+            if (!bean) {
+                callback({
+                    ok: false,
+                    msg: "Incident not found or access denied",
+                    msgi18n: true,
+                });
+                return;
+            }
+
+            await bean.resolve();
+
+            callback({
+                ok: true,
+                msg: "Resolved",
+                msgi18n: true,
+                incident: bean.toPublicJSON(),
+            });
+        } catch (error) {
+            callback({
+                ok: false,
+                msg: error.message,
+                msgi18n: true,
+            });
+        }
+    });
+
     socket.on("getStatusPage", async (slug, callback) => {
         try {
             checkLogin(socket);

src/components/IncidentEditForm.vue

@@ -0,0 +1,119 @@
+<template>
+    <div
+        class="shadow-box alert mb-4 p-4 incident"
+        role="alert"
+        :class="'bg-' + modelValue.style"
+        data-testid="incident-edit"
+    >
+        <strong>{{ $t("Title") }}:</strong>
+        <Editable
+            :model-value="modelValue.title"
+            tag="h4"
+            :contenteditable="true"
+            :noNL="true"
+            class="alert-heading"
+            data-testid="incident-title"
+            @update:model-value="updateField('title', $event)"
+        />
+
+        <strong>{{ $t("Content") }}:</strong>
+        <Editable
+            :model-value="modelValue.content"
+            tag="div"
+            :contenteditable="true"
+            class="content"
+            data-testid="incident-content-editable"
+            @update:model-value="updateField('content', $event)"
+        />
+        <div class="form-text">
+            {{ $t("markdownSupported") }}
+        </div>
+
+        <div class="mt-3">
+            <button class="btn btn-light me-2" data-testid="post-incident-button" @click="$emit('post')">
+                <font-awesome-icon icon="bullhorn" />
+                {{ $t("Post") }}
+            </button>
+
+            <button class="btn btn-light me-2" @click="$emit('cancel')">
+                <font-awesome-icon icon="times" />
+                {{ $t("Cancel") }}
+            </button>
+
+            <div 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"
+                >
+                    {{ $t("Style") }}: {{ $t(modelValue.style) }}
+                </button>
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+                    <li>
+                        <a class="dropdown-item" href="#" @click.prevent="updateField('style', 'info')">
+                            {{ $t("info") }}
+                        </a>
+                    </li>
+                    <li>
+                        <a class="dropdown-item" href="#" @click.prevent="updateField('style', 'warning')">
+                            {{ $t("warning") }}
+                        </a>
+                    </li>
+                    <li>
+                        <a class="dropdown-item" href="#" @click.prevent="updateField('style', 'danger')">
+                            {{ $t("danger") }}
+                        </a>
+                    </li>
+                    <li>
+                        <a class="dropdown-item" href="#" @click.prevent="updateField('style', 'primary')">
+                            {{ $t("primary") }}
+                        </a>
+                    </li>
+                    <li>
+                        <a class="dropdown-item" href="#" @click.prevent="updateField('style', 'light')">
+                            {{ $t("light") }}
+                        </a>
+                    </li>
+                    <li>
+                        <a class="dropdown-item" href="#" @click.prevent="updateField('style', 'dark')">
+                            {{ $t("dark") }}
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "IncidentEditForm",
+    props: {
+        modelValue: {
+            type: Object,
+            required: true,
+        },
+    },
+    emits: ["update:modelValue", "post", "cancel"],
+    methods: {
+        updateField(field, value) {
+            this.$emit("update:modelValue", {
+                ...this.modelValue,
+                [field]: value,
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.incident {
+    .content {
+        &[contenteditable="true"] {
+            min-height: 60px;
+        }
+    }
+}
+</style>

src/components/IncidentHistory.vue

@@ -0,0 +1,154 @@
+<template>
+    <div class="incident-group" data-testid="incident-group">
+        <div v-if="loading && incidents.length === 0" class="text-center py-4">
+            <div class="spinner-border text-primary" role="status">
+                <span class="visually-hidden">{{ $t("Loading...") }}</span>
+            </div>
+        </div>
+
+        <div v-else-if="incidents.length === 0" class="text-center py-4 text-muted">
+            {{ $t("No incidents recorded") }}
+        </div>
+
+        <div v-else class="incident-list">
+            <div
+                v-for="incident in incidents"
+                :key="incident.id"
+                class="incident-item"
+                :class="{ resolved: !incident.active }"
+            >
+                <div class="incident-style-indicator" :class="`bg-${incident.style}`"></div>
+                <div class="incident-body">
+                    <div class="incident-header d-flex justify-content-between align-items-start">
+                        <h5 class="incident-title mb-0">{{ incident.title }}</h5>
+                        <div v-if="editMode" class="incident-actions">
+                            <button
+                                v-if="incident.active"
+                                class="btn btn-success btn-sm me-1"
+                                :title="$t('Resolve')"
+                                @click="$emit('resolve-incident', incident)"
+                            >
+                                <font-awesome-icon icon="check" />
+                            </button>
+                            <button
+                                class="btn btn-outline-secondary btn-sm me-1"
+                                :title="$t('Edit')"
+                                @click="$emit('edit-incident', incident)"
+                            >
+                                <font-awesome-icon icon="edit" />
+                            </button>
+                            <button
+                                class="btn btn-outline-danger btn-sm"
+                                :title="$t('Delete')"
+                                @click="$emit('delete-incident', incident)"
+                            >
+                                <font-awesome-icon icon="trash" />
+                            </button>
+                        </div>
+                    </div>
+                    <!-- eslint-disable-next-line vue/no-v-html-->
+                    <div class="incident-content mt-1" v-html="getIncidentHTML(incident.content)"></div>
+                    <div class="incident-meta text-muted small mt-2">
+                        <div>{{ $t("createdAt", { date: datetime(incident.createdDate) }) }}</div>
+                        <div v-if="incident.lastUpdatedDate">
+                            {{ $t("lastUpdatedAt", { date: datetime(incident.lastUpdatedDate) }) }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { marked } from "marked";
+import DOMPurify from "dompurify";
+import datetimeMixin from "../mixins/datetime";
+
+export default {
+    name: "IncidentHistory",
+    mixins: [datetimeMixin],
+    props: {
+        incidents: {
+            type: Array,
+            default: () => [],
+        },
+        editMode: {
+            type: Boolean,
+            default: false,
+        },
+        loading: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    emits: ["edit-incident", "delete-incident", "resolve-incident"],
+    methods: {
+        /**
+         * Get sanitized HTML for incident content
+         * @param {string} content - Markdown content
+         * @returns {string} Sanitized HTML
+         */
+        getIncidentHTML(content) {
+            if (content != null) {
+                return DOMPurify.sanitize(marked(content));
+            }
+            return "";
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.incident-group {
+    padding: 10px;
+
+    .incident-list {
+        .incident-item {
+            display: flex;
+            padding: 13px 15px 10px 15px;
+            border-radius: 10px;
+            transition: all ease-in-out 0.15s;
+
+            &:hover {
+                background-color: $highlight-white;
+            }
+
+            &.resolved {
+                opacity: 0.7;
+            }
+
+            .incident-style-indicator {
+                width: 6px;
+                min-height: 100%;
+                border-radius: 3px;
+                flex-shrink: 0;
+                margin-right: 12px;
+            }
+
+            .incident-body {
+                flex: 1;
+                min-width: 0;
+            }
+
+            .incident-meta {
+                font-size: 12px;
+            }
+        }
+    }
+}
+
+.dark {
+    .incident-group {
+        .incident-list {
+            .incident-item {
+                &:hover {
+                    background-color: $dark-bg2;
+                }
+            }
+        }
+    }
+}
+</style>

src/components/IncidentManageModal.vue

@@ -0,0 +1,204 @@
+<template>
+    <div ref="modal" class="modal fade" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">
+                        {{ $t("Edit Incident") }}
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <form @submit.prevent="submit">
+                        <div class="mb-3">
+                            <label for="incident-title" class="form-label">{{ $t("Title") }}</label>
+                            <input
+                                id="incident-title"
+                                v-model="form.title"
+                                type="text"
+                                class="form-control"
+                                :placeholder="$t('Incident title')"
+                                required
+                            />
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="incident-content" class="form-label">{{ $t("Content") }}</label>
+                            <textarea
+                                id="incident-content"
+                                v-model="form.content"
+                                class="form-control"
+                                rows="4"
+                                :placeholder="$t('Incident description')"
+                                required
+                            ></textarea>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="incident-style" class="form-label">{{ $t("Style") }}</label>
+                            <select id="incident-style" v-model="form.style" class="form-select">
+                                <option value="info">{{ $t("info") }}</option>
+                                <option value="warning">
+                                    {{ $t("warning") }}
+                                </option>
+                                <option value="danger">
+                                    {{ $t("danger") }}
+                                </option>
+                                <option value="primary">
+                                    {{ $t("primary") }}
+                                </option>
+                                <option value="light">{{ $t("light") }}</option>
+                                <option value="dark">{{ $t("dark") }}</option>
+                            </select>
+                        </div>
+
+                        <div class="mb-3 form-check">
+                            <input id="incident-pin" v-model="form.pin" type="checkbox" class="form-check-input" />
+                            <label for="incident-pin" class="form-check-label">
+                                {{ $t("Pin this incident") }}
+                            </label>
+                            <div class="form-text">
+                                {{ $t("Pinned incidents are shown prominently on the status page") }}
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                        {{ $t("Cancel") }}
+                    </button>
+                    <button type="button" class="btn btn-primary" :disabled="processing" @click="submit">
+                        <span v-if="processing" class="spinner-border spinner-border-sm me-1" role="status"></span>
+                        {{ $t("Save") }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <Confirm
+        ref="confirmDelete"
+        btn-style="btn-danger"
+        :yes-text="$t('Yes')"
+        :no-text="$t('No')"
+        @yes="confirmDeleteIncident"
+    >
+        {{ $t("deleteIncidentMsg") }}
+    </Confirm>
+</template>
+
+<script>
+import { Modal } from "bootstrap";
+import Confirm from "./Confirm.vue";
+
+export default {
+    name: "IncidentManageModal",
+    components: {
+        Confirm,
+    },
+    props: {
+        slug: {
+            type: String,
+            required: true,
+        },
+    },
+    emits: ["incident-updated"],
+    data() {
+        return {
+            modal: null,
+            processing: false,
+            incidentId: null,
+            pendingDeleteIncident: null,
+            form: {
+                title: "",
+                content: "",
+                style: "warning",
+                pin: true,
+            },
+        };
+    },
+    mounted() {
+        this.modal = new Modal(this.$refs.modal);
+    },
+    methods: {
+        /**
+         * Show the modal for editing an existing incident
+         * @param {object} incident - The incident to edit
+         * @returns {void}
+         */
+        showEdit(incident) {
+            this.incidentId = incident.id;
+            this.form = {
+                title: incident.title,
+                content: incident.content,
+                style: incident.style || "warning",
+                pin: !!incident.pin,
+            };
+            this.modal.show();
+        },
+
+        /**
+         * Show delete confirmation dialog
+         * @param {object} incident - The incident to delete
+         * @returns {void}
+         */
+        showDelete(incident) {
+            this.pendingDeleteIncident = incident;
+            this.$refs.confirmDelete.show();
+        },
+
+        /**
+         * Submit the form to edit the incident
+         * @returns {void}
+         */
+        submit() {
+            if (!this.form.title || this.form.title.trim() === "") {
+                this.$root.toastError(this.$t("Please input title"));
+                return;
+            }
+
+            if (!this.form.content || this.form.content.trim() === "") {
+                this.$root.toastError(this.$t("Please input content"));
+                return;
+            }
+
+            this.processing = true;
+
+            this.$root.getSocket().emit("editIncident", this.slug, this.incidentId, this.form, (res) => {
+                this.processing = false;
+                this.$root.toastRes(res);
+                if (res.ok) {
+                    this.modal.hide();
+                    this.$emit("incident-updated");
+                }
+            });
+        },
+
+        /**
+         * Confirm and delete the incident
+         * @returns {void}
+         */
+        confirmDeleteIncident() {
+            if (!this.pendingDeleteIncident) {
+                return;
+            }
+
+            this.$root.getSocket().emit("deleteIncident", this.slug, this.pendingDeleteIncident.id, (res) => {
+                this.$root.toastRes(res);
+                if (res.ok) {
+                    this.$emit("incident-updated");
+                }
+                this.pendingDeleteIncident = null;
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.modal-body {
+    .form-text {
+        font-size: 0.875rem;
+    }
+}
+</style>

src/lang/en.json

@@ -46,6 +46,9 @@
     "Status": "Status",
     "DateTime": "DateTime",
     "Message": "Message",
+    "No incidents recorded": "No incidents recorded",
+    "Load More": "Load More",
+    "Loading...": "Loading...",
     "No important events": "No important events",
     "Resume": "Resume",
     "Edit": "Edit",
@@ -62,6 +65,7 @@
     "minuteShort": "{n} min | {n} min",
     "years": "{n} year | {n} years",
     "Response": "Response",
+    "Pin this incident": "Pin this incident",
     "Ping": "Ping",
     "Monitor Type": "Monitor Type",
     "Keyword": "Keyword",
@@ -167,6 +171,10 @@
     "Last Result": "Last Result",
     "Create your admin account": "Create your admin account",
     "Repeat Password": "Repeat Password",
+    "Incident description": "Incident description",
+    "Incident not found or access denied": "Incident not found or access denied",
+    "Past Incidents": "Past Incidents",
+    "Incident title": "Incident title",
     "Import Backup": "Import Backup",
     "Export Backup": "Export Backup",
     "Export": "Export",
@@ -223,6 +231,7 @@
     "Blue": "Blue",
     "Indigo": "Indigo",
     "Purple": "Purple",
+    "Pinned incidents are shown prominently on the status page": "Pinned incidents are shown prominently on the status page",
     "Pink": "Pink",
     "Custom": "Custom",
     "Search...": "Search…",
@@ -238,6 +247,7 @@
     "Degraded Service": "Degraded Service",
     "Add Group": "Add Group",
     "Add a monitor": "Add a monitor",
+    "Edit Incident": "Edit Incident",
     "Edit Status Page": "Edit Status Page",
     "Go to Dashboard": "Go to Dashboard",
     "Status Page": "Status Page",
@@ -296,6 +306,8 @@
     "successKeyword": "Success Keyword",
     "successKeywordExplanation": "MQTT Keyword that will be considered as success",
     "recent": "Recent",
+    "Resolve": "Resolve",
+    "Resolved": "Resolved",
     "Reset Token": "Reset Token",
     "Done": "Done",
     "Info": "Info",
@@ -349,6 +361,7 @@
     "Customize": "Customize",
     "Custom Footer": "Custom Footer",
     "Custom CSS": "Custom CSS",
+    "deleteIncidentMsg": "Are you sure you want to delete this incident?",
     "deleteStatusPageMsg": "Are you sure want to delete this status page?",
     "Proxies": "Proxies",
     "default": "Default",
@@ -371,6 +384,7 @@
     "Stop": "Stop",
     "Add New Status Page": "Add New Status Page",
     "Slug": "Slug",
+    "slug is not found": "Slug is not found",
     "Accept characters:": "Accept characters:",
     "startOrEndWithOnly": "Start or end with {0} only",
     "No consecutive dashes": "No consecutive dashes",
@@ -394,6 +408,8 @@
     "Trust Proxy": "Trust Proxy",
     "Other Software": "Other Software",
     "For example: nginx, Apache and Traefik.": "For example: nginx, Apache and Traefik.",
+    "Please input content": "Please input content",
+    "Please input title": "Please input title",
     "Please read": "Please read",
     "Subject:": "Subject:",
     "Valid To:": "Valid To:",

src/pages/StatusPage.vue

@@ -297,131 +297,83 @@
                 </div>
             </div>
 
-            <!-- Incident -->
+            <!-- Incident Edit Form -->
-            <div
+            <IncidentEditForm
-                v-if="incident !== null"
+                v-if="
-                class="shadow-box alert mb-4 p-4 incident"
+                    editIncidentMode &&
-                role="alert"
+                    incident !== null &&
-                :class="incidentClass"
+                    (!incident.id || !activeIncidents.some((i) => i.id === incident.id))
-                data-testid="incident"
+                "
-            >
+                v-model="incident"
-                <strong v-if="editIncidentMode">{{ $t("Title") }}:</strong>
+                @post="postIncident"
-                <Editable
+                @cancel="cancelIncident"
-                    v-model="incident.title"
-                    tag="h4"
-                    :contenteditable="editIncidentMode"
-                    :noNL="true"
-                    class="alert-heading"
-                    data-testid="incident-title"
             />
 
-                <strong v-if="editIncidentMode">{{ $t("Content") }}:</strong>
+            <!-- Active Pinned Incidents -->
-                <Editable
+            <template v-for="activeIncident in activeIncidents" :key="activeIncident.id">
-                    v-if="editIncidentMode"
+                <!-- Edit mode for this specific incident -->
-                    v-model="incident.content"
+                <IncidentEditForm
-                    tag="div"
+                    v-if="editIncidentMode && incident !== null && incident.id === activeIncident.id"
-                    :contenteditable="editIncidentMode"
+                    v-model="incident"
-                    class="content"
+                    @post="postIncident"
-                    data-testid="incident-content-editable"
+                    @cancel="cancelIncident"
                 />
-                <div v-if="editIncidentMode" class="form-text">
+
-                    {{ $t("markdownSupported") }}
+                <!-- Display mode for this incident -->
-                </div>
+                <div
-                <!-- eslint-disable vue/no-v-html-->
+                    v-else
+                    class="shadow-box alert mb-4 p-4 incident"
+                    role="alert"
+                    :class="'bg-' + activeIncident.style"
+                    data-testid="incident"
+                >
+                    <h4 class="alert-heading" data-testid="incident-title">{{ activeIncident.title }}</h4>
+                    <!-- eslint-disable vue/no-v-html -->
                     <div
-                    v-if="!editIncidentMode"
                         class="content"
                         data-testid="incident-content"
-                    v-html="incidentHTML"
+                        v-html="getIncidentHTML(activeIncident.content)"
                     ></div>
-                <!-- eslint-enable vue/no-v-html-->
+                    <!-- eslint-enable vue/no-v-html -->
 
                     <!-- Incident Date -->
                     <div class="date mt-3">
                         {{
                             $t("dateCreatedAtFromNow", {
-                            date: $root.datetime(incident.createdDate),
+                                date: $root.datetime(activeIncident.createdDate),
-                            fromNow: dateFromNow(incident.createdDate),
+                                fromNow: dateFromNow(activeIncident.createdDate),
                             })
                         }}
                         <br />
-                    <span v-if="incident.lastUpdatedDate">
+                        <span v-if="activeIncident.lastUpdatedDate">
                             {{
                                 $t("lastUpdatedAtFromNow", {
-                                date: $root.datetime(incident.lastUpdatedDate),
+                                    date: $root.datetime(activeIncident.lastUpdatedDate),
-                                fromNow: dateFromNow(incident.lastUpdatedDate),
+                                    fromNow: dateFromNow(activeIncident.lastUpdatedDate),
                                 })
                             }}
                         </span>
                     </div>
 
                     <div v-if="editMode" class="mt-3">
-                    <button
+                        <button class="btn btn-light me-2" @click="resolveIncident(activeIncident)">
-                        v-if="editIncidentMode"
+                            <font-awesome-icon icon="check" />
-                        class="btn btn-light me-2"
+                            {{ $t("Resolve") }}
-                        data-testid="post-incident-button"
-                        @click="postIncident"
-                    >
-                        <font-awesome-icon icon="bullhorn" />
-                        {{ $t("Post") }}
                         </button>
-
+                        <button class="btn btn-light me-2" @click="editIncident(activeIncident)">
-                    <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="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-light me-2"
-                            class="btn btn-secondary dropdown-toggle"
+                            @click="$refs.incidentManageModal.showDelete(activeIncident)"
-                            type="button"
-                            data-bs-toggle="dropdown"
-                            aria-expanded="false"
                         >
-                            {{ $t("Style") }}: {{ $t(incident.style) }}
-                        </button>
-                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
-                            <li>
-                                <a class="dropdown-item" href="#" @click="incident.style = 'info'">{{ $t("info") }}</a>
-                            </li>
-                            <li>
-                                <a class="dropdown-item" href="#" @click="incident.style = 'warning'">
-                                    {{ $t("warning") }}
-                                </a>
-                            </li>
-                            <li>
-                                <a class="dropdown-item" href="#" @click="incident.style = 'danger'">
-                                    {{ $t("danger") }}
-                                </a>
-                            </li>
-                            <li>
-                                <a class="dropdown-item" href="#" @click="incident.style = 'primary'">
-                                    {{ $t("primary") }}
-                                </a>
-                            </li>
-                            <li>
-                                <a class="dropdown-item" href="#" @click="incident.style = 'light'">
-                                    {{ $t("light") }}
-                                </a>
-                            </li>
-                            <li>
-                                <a class="dropdown-item" href="#" @click="incident.style = 'dark'">{{ $t("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("Delete") }}
                         </button>
                     </div>
                 </div>
+            </template>
 
             <!-- Overall Status -->
             <div class="shadow-box list p-4 overall-status mb-4">
@@ -544,6 +496,56 @@
                 />
             </div>
 
+            <!-- Past Incidents -->
+            <div v-if="pastIncidentCount > 0" class="past-incidents-section mb-4">
+                <h2 class="past-incidents-title mb-3">
+                    {{ $t("Past Incidents") }}
+                </h2>
+
+                <div class="past-incidents-content">
+                    <div
+                        v-for="(dateGroup, dateKey) in groupedIncidentHistory"
+                        :key="dateKey"
+                        class="incident-date-group mb-4"
+                    >
+                        <h4 class="incident-date-header">{{ dateKey }}</h4>
+                        <div class="shadow-box incident-list-box">
+                            <IncidentHistory
+                                :incidents="dateGroup"
+                                :edit-mode="enableEditMode"
+                                :loading="incidentHistoryLoading"
+                                @edit-incident="$refs.incidentManageModal.showEdit($event)"
+                                @delete-incident="$refs.incidentManageModal.showDelete($event)"
+                                @resolve-incident="resolveIncident"
+                            />
+                        </div>
+                    </div>
+
+                    <div v-if="incidentHistoryHasMore" class="load-more-controls d-flex justify-content-center mt-3">
+                        <button
+                            class="btn btn-outline-secondary btn-sm"
+                            :disabled="incidentHistoryLoading"
+                            @click="loadMoreIncidentHistory"
+                        >
+                            <span
+                                v-if="incidentHistoryLoading"
+                                class="spinner-border spinner-border-sm me-1"
+                                role="status"
+                            ></span>
+                            {{ $t("Load More") }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Incident Manage Modal -->
+            <IncidentManageModal
+                v-if="enableEditMode"
+                ref="incidentManageModal"
+                :slug="slug"
+                @incident-updated="loadIncidentHistory"
+            />
+
             <footer class="mt-5 mb-4">
                 <div class="custom-footer-text text-start">
                     <strong v-if="enableEditMode">{{ $t("Custom Footer") }}:</strong>
@@ -617,6 +619,9 @@ import DOMPurify from "dompurify";
 import Confirm from "../components/Confirm.vue";
 import PublicGroupList from "../components/PublicGroupList.vue";
 import MaintenanceTime from "../components/MaintenanceTime.vue";
+import IncidentHistory from "../components/IncidentHistory.vue";
+import IncidentManageModal from "../components/IncidentManageModal.vue";
+import IncidentEditForm from "../components/IncidentEditForm.vue";
 import { getResBaseURL } from "../util-frontend";
 import {
     STATUS_PAGE_ALL_DOWN,
@@ -650,6 +655,9 @@ export default {
         MaintenanceTime,
         Tag,
         VueMultiselect,
+        IncidentHistory,
+        IncidentManageModal,
+        IncidentEditForm,
     },
 
     // Leave Page for vue route change
@@ -695,6 +703,10 @@ export default {
             updateCountdown: null,
             updateCountdownText: null,
             loading: true,
+            incidentHistory: [],
+            incidentHistoryLoading: false,
+            incidentHistoryNextCursor: null,
+            incidentHistoryHasMore: false,
         };
     },
     computed: {
@@ -820,7 +832,7 @@ export default {
         },
 
         incidentHTML() {
-            if (this.incident.content != null) {
+            if (this.incident && this.incident.content != null) {
                 return DOMPurify.sanitize(marked(this.incident.content));
             } else {
                 return "";
@@ -846,6 +858,40 @@ export default {
         lastUpdateTimeDisplay() {
             return this.$root.datetime(this.lastUpdateTime);
         },
+
+        /**
+         * Get all active pinned incidents for display at the top
+         * @returns {object[]} List of active pinned incidents
+         */
+        activeIncidents() {
+            return this.incidentHistory.filter((i) => i.active && i.pin);
+        },
+
+        /**
+         * Count of past incidents (non-active or unpinned)
+         * @returns {number} Number of past incidents
+         */
+        pastIncidentCount() {
+            return this.incidentHistory.filter((i) => !(i.active && i.pin)).length;
+        },
+
+        /**
+         * Group past incidents (non-active or unpinned) by date for display
+         * Active+pinned incidents are shown separately at the top, not in this section
+         * @returns {object} Incidents grouped by date string
+         */
+        groupedIncidentHistory() {
+            const groups = {};
+            const pastIncidents = this.incidentHistory.filter((i) => !(i.active && i.pin));
+            for (const incident of pastIncidents) {
+                const dateKey = this.formatDateKey(incident.createdDate);
+                if (!groups[dateKey]) {
+                    groups[dateKey] = [];
+                }
+                groups[dateKey].push(incident);
+            }
+            return groups;
+        },
     },
     watch: {
         /**
@@ -948,6 +994,18 @@ export default {
                     this.imgDataUrl = this.config.icon;
                 }
 
+                this.maintenanceList = res.data.maintenanceList;
+                this.$root.publicGroupList = res.data.publicGroupList;
+
+                this.loading = false;
+
+                feedInterval = setInterval(
+                    () => {
+                        this.updateHeartbeatList();
+                    },
+                    Math.max(5, this.config.autoRefreshInterval) * 1000
+                );
+
                 this.incident = res.data.incident;
                 this.maintenanceList = res.data.maintenanceList;
                 this.$root.publicGroupList = res.data.publicGroupList;
@@ -972,6 +1030,7 @@ export default {
             });
 
         this.updateHeartbeatList();
+        this.loadIncidentHistory();
 
         // Go to edit page if ?edit present
         // null means ?edit present, but no value
@@ -1244,7 +1303,8 @@ export default {
             this.$root.getSocket().emit("postIncident", this.slug, this.incident, (res) => {
                 if (res.ok) {
                     this.enableEditIncidentMode = false;
-                    this.incident = res.incident;
+                    this.incident = null;
+                    this.loadIncidentHistory();
                 } else {
                     this.$root.toastError(res.msg);
                 }
@@ -1252,12 +1312,14 @@ export default {
         },
 
         /**
-         * Click Edit Button
+         * Edit an incident inline
+         * @param {object} incident - The incident to edit
          * @returns {void}
          */
-        editIncident() {
+        editIncident(incident) {
+            this.previousIncident = this.incident;
+            this.incident = { ...incident };
             this.enableEditIncidentMode = true;
-            this.previousIncident = Object.assign({}, this.incident);
         },
 
         /**
@@ -1283,6 +1345,18 @@ export default {
             });
         },
 
+        /**
+         * Get HTML for incident content
+         * @param {string} content - Markdown content
+         * @returns {string} Sanitized HTML
+         */
+        getIncidentHTML(content) {
+            if (content != null) {
+                return DOMPurify.sanitize(marked(content));
+            }
+            return "";
+        },
+
         /**
          * Get the relative time difference of a date from now
          * @param {any} date Date to get time difference
@@ -1313,6 +1387,105 @@ export default {
                 return "";
             }
         },
+
+        /**
+         * Load incident history for the status page
+         * @returns {void}
+         */
+        loadIncidentHistory() {
+            this.loadIncidentHistoryWithCursor(null);
+        },
+
+        /**
+         * Load incident history using cursor-based pagination
+         * @param {string|null} cursor - Cursor for pagination (created_date of last item)
+         * @param {boolean} append - Whether to append to existing list
+         * @returns {void}
+         */
+        loadIncidentHistoryWithCursor(cursor, append = false) {
+            this.incidentHistoryLoading = true;
+
+            if (this.enableEditMode) {
+                this.$root.getSocket().emit("getIncidentHistory", this.slug, cursor, (res) => {
+                    this.incidentHistoryLoading = false;
+                    if (res.ok) {
+                        if (append) {
+                            this.incidentHistory = [...this.incidentHistory, ...res.incidents];
+                        } else {
+                            this.incidentHistory = res.incidents;
+                        }
+                        this.incidentHistoryNextCursor = res.nextCursor;
+                        this.incidentHistoryHasMore = res.hasMore;
+                    } else {
+                        console.error("Failed to load incident history:", res.msg);
+                        this.$root.toastError(res.msg);
+                    }
+                });
+            } else {
+                const url = cursor
+                    ? `/api/status-page/${this.slug}/incident-history?cursor=${encodeURIComponent(cursor)}`
+                    : `/api/status-page/${this.slug}/incident-history`;
+                axios
+                    .get(url)
+                    .then((res) => {
+                        this.incidentHistoryLoading = false;
+                        if (res.data.ok) {
+                            if (append) {
+                                this.incidentHistory = [...this.incidentHistory, ...res.data.incidents];
+                            } else {
+                                this.incidentHistory = res.data.incidents;
+                            }
+                            this.incidentHistoryNextCursor = res.data.nextCursor;
+                            this.incidentHistoryHasMore = res.data.hasMore;
+                        }
+                    })
+                    .catch((error) => {
+                        this.incidentHistoryLoading = false;
+                        console.error("Failed to load incident history:", error);
+                    });
+            }
+        },
+
+        /**
+         * Load more incident history using cursor-based pagination
+         * @returns {void}
+         */
+        loadMoreIncidentHistory() {
+            if (this.incidentHistoryHasMore && this.incidentHistoryNextCursor) {
+                this.loadIncidentHistoryWithCursor(this.incidentHistoryNextCursor, true);
+            }
+        },
+
+        /**
+         * Format date key for grouping (e.g., "December 8, 2025")
+         * @param {string} dateStr - ISO date string
+         * @returns {string} Formatted date key
+         */
+        formatDateKey(dateStr) {
+            if (!dateStr) {
+                return this.$t("Unknown");
+            }
+            const date = new Date(dateStr);
+            return date.toLocaleDateString(undefined, {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+            });
+        },
+
+        /**
+         * Resolve an incident
+         * @param {object} incident - The incident to resolve
+         * @returns {void}
+         */
+        resolveIncident(incident) {
+            this.$root.getSocket().emit("resolveIncident", this.slug, incident.id, (res) => {
+                this.$root.toastRes(res);
+                if (res.ok) {
+                    this.loadIncidentHistory();
+                }
+            });
+        },
     },
 };
 </script>
@@ -1431,12 +1604,14 @@ footer {
 
     /* Reset button placed at top-left of the logo */
     .reset-top-left {
-        position: absolute;
+        transition:
-        top: 0;
+            transform $easing-in 0.18s,
-        left: -15px;
+            box-shadow $easing-in 0.18s,
-        z-index: 2;
+            background-color $easing-in 0.18s;
-        width: 20px;
+        font-size: 18px;
-        height: 20px;
+        width: 18px;
+        height: 18px;
+        padding: 0;
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -1445,11 +1620,6 @@ footer {
         border: none;
         box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
         cursor: pointer;
-        padding: 0;
-        transition:
-            transform $easing-in 0.18s,
-            box-shadow $easing-in 0.18s,
-            background-color $easing-in 0.18s;
         transform-origin: center;
 
         &:hover {
@@ -1586,4 +1756,28 @@ footer {
 .refresh-info {
     opacity: 0.7;
 }
+
+.past-incidents-title {
+    font-size: 26px;
+    font-weight: normal;
+}
+
+.past-incidents-section {
+    .past-incidents-content {
+        padding: 0;
+    }
+}
+
+.incident-date-group {
+    .incident-date-header {
+        font-size: 1rem;
+        font-weight: normal;
+        color: var(--bs-secondary);
+        margin-bottom: 0.75rem;
+    }
+
+    .incident-list-box {
+        padding: 0;
+    }
+}
 </style>

src/util.js

@@ -10,8 +10,8 @@
 */
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CONSOLE_STYLE_FgViolet = exports.CONSOLE_STYLE_FgLightBlue = exports.CONSOLE_STYLE_FgLightGreen = exports.CONSOLE_STYLE_FgOrange = exports.CONSOLE_STYLE_FgGray = exports.CONSOLE_STYLE_FgWhite = exports.CONSOLE_STYLE_FgCyan = exports.CONSOLE_STYLE_FgMagenta = exports.CONSOLE_STYLE_FgBlue = exports.CONSOLE_STYLE_FgYellow = exports.CONSOLE_STYLE_FgGreen = exports.CONSOLE_STYLE_FgRed = exports.CONSOLE_STYLE_FgBlack = exports.CONSOLE_STYLE_Hidden = exports.CONSOLE_STYLE_Reverse = exports.CONSOLE_STYLE_Blink = exports.CONSOLE_STYLE_Underscore = exports.CONSOLE_STYLE_Dim = exports.CONSOLE_STYLE_Bright = exports.CONSOLE_STYLE_Reset = exports.RESPONSE_BODY_LENGTH_MAX = exports.RESPONSE_BODY_LENGTH_DEFAULT = exports.PING_PER_REQUEST_TIMEOUT_DEFAULT = exports.PING_PER_REQUEST_TIMEOUT_MAX = exports.PING_PER_REQUEST_TIMEOUT_MIN = exports.PING_COUNT_DEFAULT = exports.PING_COUNT_MAX = exports.PING_COUNT_MIN = exports.PING_GLOBAL_TIMEOUT_DEFAULT = exports.PING_GLOBAL_TIMEOUT_MAX = exports.PING_GLOBAL_TIMEOUT_MIN = exports.PING_PACKET_SIZE_DEFAULT = exports.PING_PACKET_SIZE_MAX = exports.PING_PACKET_SIZE_MIN = exports.MIN_INTERVAL_SECOND = exports.MAX_INTERVAL_SECOND = exports.SQL_DATETIME_FORMAT_WITHOUT_SECOND = exports.SQL_DATETIME_FORMAT = exports.SQL_DATE_FORMAT = exports.STATUS_PAGE_MAINTENANCE = exports.STATUS_PAGE_PARTIAL_DOWN = exports.STATUS_PAGE_ALL_UP = exports.STATUS_PAGE_ALL_DOWN = exports.MAINTENANCE = exports.PENDING = exports.UP = exports.DOWN = exports.appName = exports.isNode = exports.isDev = void 0;
+exports.CONSOLE_STYLE_FgLightBlue = exports.CONSOLE_STYLE_FgLightGreen = exports.CONSOLE_STYLE_FgOrange = exports.CONSOLE_STYLE_FgGray = exports.CONSOLE_STYLE_FgWhite = exports.CONSOLE_STYLE_FgCyan = exports.CONSOLE_STYLE_FgMagenta = exports.CONSOLE_STYLE_FgBlue = exports.CONSOLE_STYLE_FgYellow = exports.CONSOLE_STYLE_FgGreen = exports.CONSOLE_STYLE_FgRed = exports.CONSOLE_STYLE_FgBlack = exports.CONSOLE_STYLE_Hidden = exports.CONSOLE_STYLE_Reverse = exports.CONSOLE_STYLE_Blink = exports.CONSOLE_STYLE_Underscore = exports.CONSOLE_STYLE_Dim = exports.CONSOLE_STYLE_Bright = exports.CONSOLE_STYLE_Reset = exports.RESPONSE_BODY_LENGTH_MAX = exports.RESPONSE_BODY_LENGTH_DEFAULT = exports.PING_PER_REQUEST_TIMEOUT_DEFAULT = exports.PING_PER_REQUEST_TIMEOUT_MAX = exports.PING_PER_REQUEST_TIMEOUT_MIN = exports.PING_COUNT_DEFAULT = exports.PING_COUNT_MAX = exports.PING_COUNT_MIN = exports.PING_GLOBAL_TIMEOUT_DEFAULT = exports.PING_GLOBAL_TIMEOUT_MAX = exports.PING_GLOBAL_TIMEOUT_MIN = exports.PING_PACKET_SIZE_DEFAULT = exports.PING_PACKET_SIZE_MAX = exports.PING_PACKET_SIZE_MIN = exports.INCIDENT_PAGE_SIZE = exports.MIN_INTERVAL_SECOND = exports.MAX_INTERVAL_SECOND = exports.SQL_DATETIME_FORMAT_WITHOUT_SECOND = exports.SQL_DATETIME_FORMAT = exports.SQL_DATE_FORMAT = exports.STATUS_PAGE_MAINTENANCE = exports.STATUS_PAGE_PARTIAL_DOWN = exports.STATUS_PAGE_ALL_UP = exports.STATUS_PAGE_ALL_DOWN = exports.MAINTENANCE = exports.PENDING = exports.UP = exports.DOWN = exports.appName = exports.isNode = exports.isDev = void 0;
-exports.TYPES_WITH_DOMAIN_EXPIRY_SUPPORT_VIA_FIELD = exports.evaluateJsonQuery = exports.intHash = exports.localToUTC = exports.utcToLocal = exports.utcToISODateTime = exports.isoToUTCDateTime = exports.parseTimeFromTimeObject = exports.parseTimeObject = exports.getMonitorRelativeURL = exports.genSecret = exports.getCryptoRandomInt = exports.getRandomInt = exports.getRandomArbitrary = exports.TimeLogger = exports.polyfill = exports.log = exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.badgeConstants = exports.CONSOLE_STYLE_BgGray = exports.CONSOLE_STYLE_BgWhite = exports.CONSOLE_STYLE_BgCyan = exports.CONSOLE_STYLE_BgMagenta = exports.CONSOLE_STYLE_BgBlue = exports.CONSOLE_STYLE_BgYellow = exports.CONSOLE_STYLE_BgGreen = exports.CONSOLE_STYLE_BgRed = exports.CONSOLE_STYLE_BgBlack = exports.CONSOLE_STYLE_FgPink = exports.CONSOLE_STYLE_FgBrown = void 0;
+exports.TYPES_WITH_DOMAIN_EXPIRY_SUPPORT_VIA_FIELD = exports.evaluateJsonQuery = exports.intHash = exports.localToUTC = exports.utcToLocal = exports.utcToISODateTime = exports.isoToUTCDateTime = exports.parseTimeFromTimeObject = exports.parseTimeObject = exports.getMonitorRelativeURL = exports.genSecret = exports.getCryptoRandomInt = exports.getRandomInt = exports.getRandomArbitrary = exports.TimeLogger = exports.polyfill = exports.log = exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.badgeConstants = exports.CONSOLE_STYLE_BgGray = exports.CONSOLE_STYLE_BgWhite = exports.CONSOLE_STYLE_BgCyan = exports.CONSOLE_STYLE_BgMagenta = exports.CONSOLE_STYLE_BgBlue = exports.CONSOLE_STYLE_BgYellow = exports.CONSOLE_STYLE_BgGreen = exports.CONSOLE_STYLE_BgRed = exports.CONSOLE_STYLE_BgBlack = exports.CONSOLE_STYLE_FgPink = exports.CONSOLE_STYLE_FgBrown = exports.CONSOLE_STYLE_FgViolet = void 0;
 const dayjs_1 = require("dayjs");
 const jsonata = require("jsonata");
 exports.isDev = process.env.NODE_ENV === "development";
@@ -31,6 +31,7 @@ exports.SQL_DATETIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
 exports.SQL_DATETIME_FORMAT_WITHOUT_SECOND = "YYYY-MM-DD HH:mm";
 exports.MAX_INTERVAL_SECOND = 2073600;
 exports.MIN_INTERVAL_SECOND = 1;
+exports.INCIDENT_PAGE_SIZE = 10;
 exports.PING_PACKET_SIZE_MIN = 1;
 exports.PING_PACKET_SIZE_MAX = 65500;
 exports.PING_PACKET_SIZE_DEFAULT = 56;

src/util.ts

@@ -46,6 +46,8 @@ export const SQL_DATETIME_FORMAT_WITHOUT_SECOND = "YYYY-MM-DD HH:mm";
 export const MAX_INTERVAL_SECOND = 2073600; // 24 days
 export const MIN_INTERVAL_SECOND = 1; // 1 second
 
+export const INCIDENT_PAGE_SIZE = 10;
+
 // Packet Size limits
 export const PING_PACKET_SIZE_MIN = 1;
 export const PING_PACKET_SIZE_MAX = 65500;

test/e2e/specs/incident-history.spec.js

@@ -0,0 +1,150 @@
+import { expect, test } from "@playwright/test";
+import { login, restoreSqliteSnapshot, screenshot } from "../util-test";
+
+test.describe("Incident History", () => {
+    test.beforeEach(async ({ page }) => {
+        await restoreSqliteSnapshot(page);
+    });
+
+    test("past incidents section is hidden when no incidents exist", async ({ page }, testInfo) => {
+        test.setTimeout(60000);
+
+        await page.goto("./add");
+        await login(page);
+        await expect(page.getByTestId("monitor-type-select")).toBeVisible();
+
+        await page.goto("./add-status-page");
+        await page.getByTestId("name-input").fill("Empty Test");
+        await page.getByTestId("slug-input").fill("empty-test");
+        await page.getByTestId("submit-button").click();
+        await page.waitForURL("/status/empty-test?edit");
+
+        await page.getByTestId("save-button").click();
+        await expect(page.getByTestId("edit-sidebar")).toHaveCount(0);
+
+        const pastIncidentsSection = page.locator(".past-incidents-section");
+        await expect(pastIncidentsSection).toHaveCount(0);
+
+        await screenshot(testInfo, page);
+    });
+
+    test("active pinned incidents are shown at top and not in past incidents", async ({ page }, testInfo) => {
+        test.setTimeout(60000);
+
+        await page.goto("./add");
+        await login(page);
+        await expect(page.getByTestId("monitor-type-select")).toBeVisible();
+
+        await page.goto("./add-status-page");
+        await page.getByTestId("name-input").fill("Dedup Test");
+        await page.getByTestId("slug-input").fill("dedup-test");
+        await page.getByTestId("submit-button").click();
+        await page.waitForURL("/status/dedup-test?edit");
+
+        await page.getByTestId("create-incident-button").click();
+        await page.getByTestId("incident-title").fill("Active Incident");
+        await page.getByTestId("incident-content-editable").fill("This is an active incident");
+        await page.getByTestId("post-incident-button").click();
+
+        await page.waitForTimeout(500);
+
+        await page.getByTestId("save-button").click();
+        await expect(page.getByTestId("edit-sidebar")).toHaveCount(0);
+
+        const activeIncident = page.getByTestId("incident").filter({ hasText: "Active Incident" });
+        await expect(activeIncident).toBeVisible();
+
+        const pastIncidentsSection = page.locator(".past-incidents-section");
+        await expect(pastIncidentsSection).toHaveCount(0);
+
+        await screenshot(testInfo, page);
+    });
+
+    test("resolved incidents appear in past incidents section", async ({ page }, testInfo) => {
+        test.setTimeout(120000);
+
+        await page.goto("./add");
+        await login(page);
+        await expect(page.getByTestId("monitor-type-select")).toBeVisible();
+
+        await page.goto("./add-status-page");
+        await page.getByTestId("name-input").fill("Resolve Test");
+        await page.getByTestId("slug-input").fill("resolve-test");
+        await page.getByTestId("submit-button").click();
+        await page.waitForURL("/status/resolve-test?edit");
+
+        await page.getByTestId("create-incident-button").click();
+        await page.getByTestId("incident-title").fill("Resolved Incident");
+        await page.getByTestId("incident-content-editable").fill("This incident will be resolved");
+        await page.getByTestId("post-incident-button").click();
+
+        await page.waitForTimeout(500);
+
+        const activeIncidentBanner = page.getByTestId("incident").filter({ hasText: "Resolved Incident" });
+        await expect(activeIncidentBanner).toBeVisible({ timeout: 10000 });
+
+        const resolveButton = activeIncidentBanner.locator("button", { hasText: "Resolve" });
+        await expect(resolveButton).toBeVisible();
+        await resolveButton.click();
+
+        await expect(activeIncidentBanner).toHaveCount(0, { timeout: 10000 });
+
+        await page.getByTestId("save-button").click();
+        await expect(page.getByTestId("edit-sidebar")).toHaveCount(0);
+
+        await page.goto("./status/resolve-test");
+        await page.waitForLoadState("networkidle");
+
+        const pastIncidentsSection = page.locator(".past-incidents-section");
+        await expect(pastIncidentsSection).toBeVisible({ timeout: 15000 });
+
+        const resolvedIncidentTitle = pastIncidentsSection.locator(".incident-title");
+        await expect(resolvedIncidentTitle).toContainText("Resolved Incident", { timeout: 15000 });
+
+        await screenshot(testInfo, page);
+    });
+
+    test("incident history pagination loads more incidents", async ({ page }, testInfo) => {
+        test.setTimeout(180000);
+
+        await page.goto("./add");
+        await login(page);
+        await expect(page.getByTestId("monitor-type-select")).toBeVisible();
+
+        await page.goto("./add-status-page");
+        await page.getByTestId("name-input").fill("Pagination Test");
+        await page.getByTestId("slug-input").fill("pagination-test");
+        await page.getByTestId("submit-button").click();
+        await page.waitForURL("/status/pagination-test?edit");
+
+        for (let i = 1; i <= 12; i++) {
+            await page.getByTestId("create-incident-button").click();
+            await page.getByTestId("incident-title").fill("Incident " + i);
+            await page.getByTestId("incident-content-editable").fill("Content for incident " + i);
+            await page.getByTestId("post-incident-button").click();
+            await page.waitForTimeout(300);
+
+            const resolveButton = page.locator("button", { hasText: "Resolve" }).first();
+            if (await resolveButton.isVisible()) {
+                await resolveButton.click();
+                await page.waitForTimeout(300);
+            }
+        }
+
+        await page.getByTestId("save-button").click();
+        await expect(page.getByTestId("edit-sidebar")).toHaveCount(0);
+
+        await page.waitForTimeout(1000);
+
+        const pastIncidentsSection = page.locator(".past-incidents-section");
+        await expect(pastIncidentsSection).toBeVisible();
+
+        const loadMoreButton = page.locator("button", { hasText: "Load More" });
+
+        if (await loadMoreButton.isVisible()) {
+            await loadMoreButton.click();
+            await page.waitForTimeout(1000);
+            await screenshot(testInfo, page);
+        }
+    });
+});