✨ Feat: Add container network stats and improve data fetching

This commit introduces the collection of network statistics for Docker containers, including receive and transmit rates, and total bytes. It also refactors and improves the data fetching and processing logic for container stats, including adding timestamps and improving validation.

- Add `network_rx_rate`, `network_tx_rate`, `network_rx_bytes`, and `network_tx_bytes` columns to the `container_stats` table.
- Update the `addContainerStats` function to include network stats and a timestamp.
- Add a new function `getLastContainerStats` to retrieve the last recorded stats for a container, used for calculating rates.
- Refactor `storeContainerData` to fetch and calculate network stats, including using the previous stats to calculate RX/TX rates.
- Improve data validation for container stats.
- Update default theme colors to be more accessible.

Author: Its4Nik

docker/docker-compose.dev.yaml

@@ -5,7 +5,7 @@ services:
     image: lscr.io/linuxserver/socket-proxy:latest
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock:ro
-    restart: never
+    restart: no
     read_only: true
     tmpfs:
       - /run
@@ -44,10 +44,10 @@ services:
   sqlite-web:
     container_name: sqlite-web
     image: ghcr.io/coleifer/sqlite-web:latest
-    restart: never
+    restart: no
     ports:
       - 8080:8080
     volumes:
-      - /home/nik/Documents/Code-local/dockstat-project/DockStat/data:/data:ro
+      - /home/nik/Documents/Code-local/dockstat-project/DockStat/server/data:/data:ro
     environment:
       - SQLITE_DATABASE=dockstatapi.db

src/core/database/containerStats.ts

@@ -3,41 +3,89 @@ import { db } from "./database";
 import { executeDbOperation } from "./helper";
 
 const insert = db.prepare(`
-  INSERT INTO container_stats (id, hostId, name, image, status, state, cpu_usage, memory_usage)
-  VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+  INSERT INTO container_stats (
+    id,
+    hostId,
+    name,
+    image,
+    status,
+    state,
+    cpu_usage,
+    memory_usage,
+    network_rx_rate,
+    network_tx_rate,
+    network_rx_bytes,
+    network_tx_bytes,
+    timestamp
+  ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
 `);
 
-const get = db.prepare("SELECT * FROM container_stats");
+const getOne = db.prepare(`
+  SELECT *
+    FROM container_stats
+   WHERE hostId = ?
+     AND id     = ?
+ORDER BY timestamp DESC
+   LIMIT 1
+`);
+
+const getAll = db.prepare(`
+  SELECT *
+    FROM container_stats
+`);
 
 export function addContainerStats(stats: container_stats) {
-	return executeDbOperation(
-		"Add Container Stats",
-		() =>
-			insert.run(
-				stats.id,
-				stats.hostId,
-				stats.name,
-				stats.image,
-				stats.status,
-				stats.state,
-				stats.cpu_usage,
-				stats.memory_usage,
-			),
-		() => {
-			if (
-				typeof stats.id !== "string" ||
-				typeof stats.hostId !== "number" ||
-				typeof stats.cpu_usage !== "number" ||
-				typeof stats.memory_usage !== "number"
-			) {
-				throw new TypeError("Invalid container stats parameters");
-			}
-		},
-	);
+  return executeDbOperation(
+    "Add Container Stats",
+    () =>
+      insert.run(
+        stats.id,
+        stats.hostId,
+        stats.name,
+        stats.image,
+        stats.status,
+        stats.state,
+        stats.cpu_usage,
+        stats.memory_usage || 0,
+        stats.network_rx_rate,
+        stats.network_tx_rate,
+        stats.network_rx_bytes,
+        stats.network_tx_bytes,
+        stats.timestamp || new Date().toISOString(),
+      ),
+    () => {
+      if (
+        typeof stats.id !== "string" ||
+        typeof stats.hostId !== "number" ||
+        typeof stats.name !== "string" ||
+        typeof stats.image !== "string" ||
+        typeof stats.status !== "string" ||
+        typeof stats.state !== "string" ||
+        typeof stats.cpu_usage !== "number" ||
+        typeof stats.memory_usage !== "number" ||
+        typeof stats.network_rx_rate !== "number" ||
+        typeof stats.network_tx_rate !== "number" ||
+        typeof stats.network_rx_bytes !== "number" ||
+        typeof stats.network_tx_bytes !== "number"
+      ) {
+        throw new TypeError("Invalid container stats parameters");
+      }
+    },
+  );
 }
 
 export function getContainerStats(): container_stats[] {
-	return executeDbOperation("Get Container Stats", () =>
-		get.all(),
-	) as container_stats[];
+  return executeDbOperation("Get All Container Stats", () =>
+    getAll.all(),
+  ) as container_stats[];
+}
+
+export function getLastContainerStats(
+  hostId: number,
+  containerId: string,
+): container_stats | undefined {
+  return executeDbOperation(
+    "Get Last Container Stat",
+    () => getOne.get(hostId, containerId) as container_stats,
+  );
 }

src/core/database/database.ts

@@ -84,7 +84,11 @@ export function init() {
       status TEXT NOT NULL,
       state TEXT NOT NULL,
       cpu_usage FLOAT NOT NULL,
-      memory_usage,
+      memory_usage FLOAT NOT NULL,
+      network_rx_rate NUMBER NOT NULL,
+      network_tx_rate NUMBER NOT NULL,
+      network_rx_bytes NUMBER NOT NULL,
+      network_tx_bytes NUMBER NOT NULL,
       timestamp DATETIME DEFAULT CURRENT_TIMESTAMP
     );
 
@@ -118,23 +122,23 @@ export function init() {
       --gradient-from: #1e293b;
       --gradient-to: #334155;
       --border: #334155;
-      --border-accent: rgba(129, 140, 249, 0.3);
+      --border-accent: #818cf94d;
       --text-primary: #f8fafc;
       --text-secondary: #94a3b8;
       --text-tertiary: #64748b;
       --state-success: #4ade80;
       --state-warning: #facc15;
       --state-error: #f87171;
       --state-info: #38bdf8;
-      --shadow-glow: 0 0 15px rgba(129, 140, 249, 0.5);
+      --shadow-glow: 0 0 15px #818cf980;
       --background-gradient: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
     }
   `;
 
   if (themeRows.count === 0) {
     db.prepare(
       "INSERT INTO themes (name, creator, vars, tags) VALUES (?,?,?,?)",
-    ).run("default", "Its4Nik", defaultCss, "[default]");
+    ).run("default", "Its4Nik", defaultCss, "default, dark");
   }
 
   const configRow = db

src/core/database/themes.ts

@@ -1,34 +1,34 @@
 import type { Theme } from "~/typings/database";
+import { logger } from "../utils/logger";
 import { db } from "./database";
 import { executeDbOperation } from "./helper";
-import { logger } from "../utils/logger";
 
 const stmt = {
-  insert: db.prepare(`
+	insert: db.prepare(`
       INSERT INTO themes (name, creator, vars, tags) VALUES (?, ?, ?, ?)
     `),
-  remove: db.prepare("DELETE FROM themes WHERE name = ?"),
-  read: db.prepare("SELECT * FROM themes WHERE name = ?"),
-  readAll: db.prepare("SELECT * FROM themes"),
+	remove: db.prepare("DELETE FROM themes WHERE name = ?"),
+	read: db.prepare("SELECT * FROM themes WHERE name = ?"),
+	readAll: db.prepare("SELECT * FROM themes"),
 };
 
 export function getThemes() {
-  return executeDbOperation("Get Themes", () => stmt.readAll.all()) as Theme[];
+	return executeDbOperation("Get Themes", () => stmt.readAll.all()) as Theme[];
 }
 
 export function addTheme({ name, creator, vars, tags }: Theme) {
-  return executeDbOperation("Save Theme", () =>
-    stmt.insert.run(name, creator, vars, tags.toString()),
-  );
+	return executeDbOperation("Save Theme", () =>
+		stmt.insert.run(name, creator, vars, tags.toString()),
+	);
 }
 export function getSpecificTheme(name: string): Theme {
-  return executeDbOperation(
-    "Getting specific Theme",
-    () => stmt.read.get(name) as Theme,
-  );
+	return executeDbOperation(
+		"Getting specific Theme",
+		() => stmt.read.get(name) as Theme,
+	);
 }
 
 export function deleteTheme(name: string) {
-  logger.debug(`Removing ${name} from themes  `);
-  return executeDbOperation("Remove Theme", () => stmt.remove.run(name));
+	logger.debug(`Removing ${name} from themes  `);
+	return executeDbOperation("Remove Theme", () => stmt.remove.run(name));
 }