the events update

This patch adds the events system to SSVP. This is the next major step forward.

Signed-off-by: Amy Parker <amy@amyip.net>

Makefile

@@ -24,13 +24,16 @@ SASS := npx sass
 SASS_OPTIONS := --trace
 SASS_SRCS = $(shell find scss/ -name '*.scss')
 INSTALLDIR :=
+TSC := npx tsc
+TSC_OPTIONS := --noEmitOnError --module es2015
 
 # TODO: automatically compile sass instead of manual
 
 all:
 	mkdir -p assets/css assets/js
 	$(SASS) scss/custom.scss:assets/css/custom_bootstrap.css $(SASS_OPTIONS)
-	$(MAKE) -C js
+	$(TSC) $(TSC_OPTIONS) --outDir assets/js js/*.ts
+#	$(MAKE) -C js
 
 ssvplwc:
 	cd srv/ssvplwc; cargo run --release

installer/db-setup-mysql.sql

@@ -26,4 +26,4 @@ use ssvp;
 create table ssvp_day_logs (logDate date not null, serverName text not null, serverStatus integer not null);
 create table ssvp_interval_logs (logDate datetime not null, serverName text not null, serverStatus boolean not null);
 create table ssvp_cached_stats (monthlyUptime double not null, yearlyUptime double not null, allTimeUptime double not null, serverName text not null, currentStatus integer not null);
-create table ssvp_events (eventID integer not null, serverName text not null, eventName text not null, eventDescription text, startTime datetime not null, endTime datetime, severity integer not null);
+create table ssvp_events (eventID integer not null auto_increment, serverName text not null, eventName text not null, eventDescription text, startTime datetime not null, endTime datetime, severity integer not null, primary key (eventID);

installer/db-setup-postgres.sql

@@ -28,4 +28,4 @@ grant all on all tables in schema public to ssvp;
 create table ssvp_day_logs (logDate date not null, serverName text not null, serverStatus integer not null);
 create table ssvp_interval_logs (logDate timestamp not null, serverName text not null, serverStatus boolean not null);
 create table ssvp_cached_stats (monthlyUptime double precision not null, yearlyUptime double precision not null, allTimeUptime double precision not null, serverName text not null, currentStatus integer not null);
-create table ssvp_events (eventID integer not null, serverName text not null, eventName text not null, eventDescription text, startTime timestamp not null, endTime timestamp, severity integer not null);
+create table ssvp_events (eventID serial primary key not null, serverName text not null, eventName text not null, eventDescription text, startTime timestamp not null, endTime timestamp, severity integer not null);

installer/db-setup-sqlite3.sql

@@ -23,4 +23,4 @@
 create table ssvp_day_logs ( logDate date not null, serverName text not null, serverStatus integer not null );
 create table ssvp_interval_logs ( logDate datetime not null, serverName text not null, serverStatus boolean not null );
 create table ssvp_cached_stats ( monthlyUptime double not null, yearlyUptime double not null, allTimeUptime double not null, serverName text not null, currentStatus integer not null );
-create table ssvp_events ( eventID integer not null, serverName text not null, eventName text not null, eventDescription text, startTime datetime not null, endTime datetime, severity integer not null );
+create table ssvp_events ( eventID integer not null primary key autoincrement, serverName text not null, eventName text not null, eventDescription text, startTime datetime not null, endTime datetime, severity integer not null );

js/common-1.ts

@@ -0,0 +1,49 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+//
+// ssvp: server statistics viewer project
+// Copyright (C) 2023 Amy Parker <amy@amyip.net>
+//
+// This program is free software; you can redistribute it and/or modify it
+// under the terms of the GNU Affero General Public License as published
+// by the Free Software Foundation; either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful, but
+// WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+// See the GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program; if not, write to the Free Software Foundation, Inc.,
+// 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA or visit the
+// GNU Project at https://gnu.org/licenses. The GNU Affero General Public
+// License version 3 is available at, for your convenience,
+// https://www.gnu.org/licenses/agpl-3.0.en.html.
+
+export enum DailyInfo {
+    Operational = 0,
+    NonCriticalEvent = 1,
+    CriticalFailure = 2,
+    UnknownStatus = -1
+}
+
+export interface ServerInfo {
+    monthly_uptime: number;
+    yearly_uptime: number;
+    alltime_uptime: number;
+    current_status: DailyInfo;
+    daily_types: Array<DailyInfo>;
+}
+
+export function convertFontColor(ss: DailyInfo): string {
+    switch (ss) {
+        case DailyInfo.Operational:
+            return "text-success";
+        case DailyInfo.NonCriticalEvent:
+            return "text-warning";
+        case DailyInfo.CriticalFailure:
+            return "text-danger";
+        default:
+            return "text-body-tertiary";
+    }
+}

js/events-1.ts

@@ -0,0 +1,121 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+//
+// ssvp: server statistics viewer project
+// Copyright (C) 2023 Amy Parker <amy@amyip.net>
+//
+// This program is free software; you can redistribute it and/or modify it
+// under the terms of the GNU Affero General Public License as published
+// by the Free Software Foundation; either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful, but
+// WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+// See the GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program; if not, write to the Free Software Foundation, Inc.,
+// 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA or visit the
+// GNU Project at https://gnu.org/licenses. The GNU Affero General Public
+// License version 3 is available at, for your convenience,
+// https://www.gnu.org/licenses/agpl-3.0.en.html.
+
+import {convertFontColor, DailyInfo} from "./common-1.js";
+
+interface EventListing {
+    eventID: number;
+    serverName: string;
+    startTime: Date;
+    endTime: Date;
+    severity: DailyInfo;
+    eventName: string;
+    eventDescription: string;
+}
+
+const LIM_PER_PAGE: number = 5;
+
+let eventsList: Array<EventListing>;
+let currPage: number = 0;
+let numPages: number;
+const leftHandler = document.getElementById("pg-bt-left");
+const rightHandler = document.getElementById("pg-bt-right");
+
+async function fetchEventsList(page: number) {
+    if (typeof numPages === "undefined") {
+        const r = await fetch("/api/v1/size/events");
+        numPages = Math.ceil((parseInt(await r.text())) / LIM_PER_PAGE) - 1;
+        console.log(numPages);
+    }
+    if (typeof eventsList === "undefined" || page != currPage) {
+        currPage = page;
+        const r = await fetch(`/api/v1/events?lim=${LIM_PER_PAGE}&page=${page}`);
+        eventsList = await r.json();
+        for (let i = 0; i < eventsList.length; ++i) {
+            eventsList[i].startTime = new Date(eventsList[i].startTime);
+            if (eventsList[i].endTime != null)
+                eventsList[i].endTime = new Date(eventsList[i].endTime);
+        }
+        if (page != 0)
+            leftHandler.classList.remove("disabled");
+        else
+            leftHandler.classList.add("disabled");
+        if (page < numPages)
+            rightHandler.classList.remove("disabled");
+        else
+            rightHandler.classList.add("disabled");
+    }
+    generateEventsTable();
+}
+
+document.getElementById("pg-bt-left")
+
+fetchEventsList(0);
+
+function translateDailyInfo(src: DailyInfo): string {
+    switch (src) {
+        case DailyInfo.Operational:
+            return "Informational";
+        case DailyInfo.NonCriticalEvent:
+            return "Non-Critical&nbsp;Event";
+        case DailyInfo.CriticalFailure:
+            return "Critical&nbsp;Event";
+        default:
+            return "Unknown Severity";
+    }
+}
+
+function generateEventsTable(): void {
+    let builder: string = `<div class="table-responsive">
+                                <table class="table" id="events-table">`;
+    for (let sp: number = 0; sp < eventsList.length; ++sp) {
+        const ev: EventListing = eventsList[sp];
+        builder += `<tr>
+                        <th class="bg-body-tertiary rounded-4 py-3 px-4 ${ev.endTime == null ? "border-2 border-warning-subtle" : ""}">
+                            <table class="unpadded-table">
+                                <tr class="bg-body-tertiary border-0">
+                                    <th class="half-width bg-body-tertiary border-0">${ev.eventName}</th>
+                                    <th class="half-width bg-body-tertiary ${convertFontColor(ev.severity)} text-end border-0">${translateDailyInfo(ev.severity)}</th>
+                                </tr>
+                            </table>
+                            <div class="container-fluid bg-body-secondary py-2 my-2 rounded-4">
+                                <p class="m-2">${ev.eventDescription}</p>
+                            </div>
+                            <table class="unpadded-table">
+                                <tr class="bg-body-tertiary border-0">
+                                    <th class="half-width bg-body-tertiary border-0">${ev.serverName}</th>
+                                    <th class="half-width bg-body-tertiary text-end border-0">
+                                        ${ev.startTime.getUTCFullYear()}/${ev.startTime.getUTCMonth()}/${ev.startTime.getUTCDate()} -
+                                        ${ev.endTime == null ? "now" : `${ev.endTime.getUTCFullYear()}/${ev.endTime.getUTCMonth()}/${ev.endTime.getUTCDate()}`}
+                                    </th>
+                                </tr>                                                                                                                                 
+                            </table>
+                        </th>
+                    </tr>`;
+    }
+    builder += `    </table>
+                </div>`;
+    document.getElementById("events-table-gen").innerHTML = builder;
+}
+
+leftHandler.addEventListener("click", () => {fetchEventsList(currPage-1)});
+rightHandler.addEventListener("click", () => {fetchEventsList(currPage+1)});

js/index-1.ts

@@ -20,6 +20,8 @@
 // License version 3 is available at, for your convenience,
 // https://www.gnu.org/licenses/agpl-3.0.en.html. 
 
+import { DailyInfo, ServerInfo, convertFontColor } from "./common-1.js";
+
 const EXPANSION_SIZE: number = 1280;
 const SINGLE_MONTH_SHIFT: number = 800;
 const DOUBLE_MONTH_SHIFT: number = 1920;
@@ -84,13 +86,6 @@ async function serverListInitialization() {
 
 serverListInitialization();
 
-enum DailyInfo {
-    Operational = 0,
-    NonCriticalEvent = 1,
-    CriticalFailure = 2,
-    UnknownStatus = -1
-}
-
 function dailyinfo_tostring(di: DailyInfo): string {
     switch (di) {
         case DailyInfo.Operational:
@@ -106,31 +101,10 @@ function dailyinfo_tostring(di: DailyInfo): string {
     }
 }
 
-interface ServerInfo {
-    monthly_uptime: number;
-    yearly_uptime: number;
-    alltime_uptime: number;
-    current_status: DailyInfo;
-    daily_types: Array<DailyInfo>;
-}
-
 function gen_pct_string(pct: number, sf: number): string {
     return (Math.round(pct * (10**(sf+2))) / (10**sf)).toString() + "%";
 }
 
-function convertFontColor(ss: DailyInfo): string {
-    switch (ss) {
-        case DailyInfo.Operational:
-            return "text-success";
-        case DailyInfo.NonCriticalEvent:
-            return "text-warning";
-        case DailyInfo.CriticalFailure:
-            return "text-danger";
-        default:
-            return "text-body-tertiary";
-    }
-}
-
 function generate_table(): void {
     let builder: string = "<table class=\"table\" id=\"instance-table\">";
     let sp: number = 0; // string pointer

package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "bootstrap": "^5.3.0",
+    "bootstrap-icons": "^1.10.5",
     "es6-promise": "^4.2.8",
     "sass": "^1.64.2",
     "typescript": "^5.1.6"

scss/custom.scss

@@ -77,6 +77,7 @@ body {
     border-spacing: 2rem;
 }
 
-.a-fc-0 {
-
+#events-table {
+    border-collapse: separate;
+    border-spacing: 3rem;
 }