albert/status-monitor
1
0
Fork 0
mirror of https://github.com/csehviktor/status-monitor.git synced 2025-08-08 18:06:14 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

cleanup redundant code

Browse Source
This commit is contained in:
csehviktor
2025-07-10 05:48:24 +02:00
parent 04ebda9a54
commit 67f871882e
5 changed files with 67 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
ui/src/hooks/useChartData.tsx
View File

@@ -1,6 +1,6 @@
import type { StatusMessage } from "@/services/types";
import { addRealtimeData, getRealtimeData } from "@/services/data_service";
import { formatTimestamp } from "@/services/utils";
import { addDataPoint, getRealtimeData } from "@/services/store";
import { formatTimestamp, calcPercentage } from "@/services/utils";
import { useEffect } from "react";
export type ChartData = {
@@ -22,82 +22,95 @@ export function useChartData(data: StatusMessage | null): ChartDataReturns {
useEffect(() => {
if (!data) return;
addRealtimeData(data);
addDataPoint(data);
}, [data]);
const cpuPoints = getRealtimeData("cpu");
const cpuUserPoints = getRealtimeData("cpu_user");
const cpuSystemPoints = getRealtimeData("cpu_system");
const cpuIdlePoints = getRealtimeData("cpu_idle");
const cpuStealPoints = getRealtimeData("cpu_steal");
const cpuIowaitPoints = getRealtimeData("cpu_iowait");
const memoryPoints = getRealtimeData("memory");
const swapPoints = getRealtimeData("swap");
const networkUpPoints = getRealtimeData("network_up");
const networkDownPoints = getRealtimeData("network_down");
const realtimeData = getRealtimeData();
return {
cpuData: {
labels: cpuPoints.map((p) => formatTimestamp(p.timestamp)),
labels: realtimeData.map((p) => formatTimestamp(p.timestamp)),
datasets: [
{
label: "Total CPU (%)",
data: cpuPoints.map((p) => p.value),
data: realtimeData.map(({ metrics }) => metrics.cpu.usage),
color: "#3b82f6",
},
{
label: "User (%)",
data: cpuUserPoints.map((p) => p.value),
data: realtimeData.map(
({ metrics }) => metrics.cpu.breakdown.user,
),
color: "#10b981",
},
{
label: "System (%)",
data: cpuSystemPoints.map((p) => p.value),
data: realtimeData.map(
({ metrics }) => metrics.cpu.breakdown.system,
),
color: "#f59e0b",
},
{
label: "I/O Wait (%)",
data: cpuIowaitPoints.map((p) => p.value),
data: realtimeData.map(
({ metrics }) => metrics.cpu.breakdown.iowait,
),
color: "#ef4444",
},
{
label: "Steal (%)",
data: cpuStealPoints.map((p) => p.value),
data: realtimeData.map(
({ metrics }) => metrics.cpu.breakdown.steal,
),
color: "#8b5cf6",
},
{
label: "Idle (%)",
data: cpuIdlePoints.map((p) => p.value),
data: realtimeData.map(
({ metrics }) => metrics.cpu.breakdown.idle,
),
color: "#6b7280",
},
],
},
memoryData: {
labels: memoryPoints.map((p) => formatTimestamp(p.timestamp)),
labels: realtimeData.map((p) => formatTimestamp(p.timestamp)),
datasets: [
{
label: "Memory Usage (%)",
data: memoryPoints.map((p) => p.value),
data: realtimeData.map(({ metrics }) =>
calcPercentage(
metrics.memory.used,
metrics.memory.total,
),
),
color: "#10b981",
},
{
label: "Swap Usage (%)",
data: swapPoints.map((p) => p.value),
data: realtimeData.map(({ metrics }) =>
calcPercentage(
metrics.memory.swap_used,
metrics.memory.swap_total,
),
),
color: "#f59e0b",
},
],
},
networkData: {
labels: networkUpPoints.map((p) => formatTimestamp(p.timestamp)),
labels: realtimeData.map((p) => formatTimestamp(p.timestamp)),
datasets: [
{
label: "Upload (B/s)",
data: networkUpPoints.map((p) => p.value),
data: realtimeData.map(({ metrics }) => metrics.network.up),
color: "#ef4444",
},
{
label: "Download (B/s)",
data: networkDownPoints.map((p) => p.value),
data: realtimeData.map(
({ metrics }) => metrics.network.down,
),
color: "#3b82f6",
},
],

27
ui/src/pages/agent.tsx
View File

@@ -13,7 +13,7 @@ import { getLastMessage, setLastMessage } from "@/services/store";
import {
formatBytes,
formatPercentage,
breakdownMetrics,
calcPercentage,
} from "@/services/utils";
import { initializeConnection } from "@/services/websocket";
import { useEffect, useState } from "react";
@@ -54,19 +54,18 @@ export function AgentPage() {
return "critical";
};
const {
cpuThreads,
cpuUsage,
memoryUsage,
memoryUsed,
memoryTotal,
diskUsage,
diskFree,
diskTotal,
networkUp,
networkDown,
} = breakdownMetrics(message?.metrics);
const cpuUsage = metrics?.cpu.usage ?? 0;
const memoryUsed = metrics?.memory.used ?? 0;
const memoryTotal = metrics?.memory.total ?? 0;
const memoryUsage = calcPercentage(memoryUsed, memoryTotal);
const diskFree = (metrics?.disk.total ?? 0) - (metrics?.disk.free ?? 0);
const diskTotal = metrics?.disk.total ?? 0;
const diskUsage = calcPercentage(diskFree, diskTotal);
const networkUp = metrics?.network.up ?? 0;
const networkDown = metrics?.network.down ?? 0;
const networkUsage = networkUp + networkDown;
return (
@@ -92,7 +91,7 @@ export function AgentPage() {
title: "CPU USAGE",
value: formatPercentage(cpuUsage),
status: getMetricStatus(cpuUsage),
subtitle: `${cpuThreads} threads`,
subtitle: `${metrics?.cpu.threads} threads`,
}}
>
<DonutChart

82
ui/src/services/data_service.ts
View File

@@ -1,82 +0,0 @@
import type { StatusMessage } from "@/services/types";
import { breakdownMetrics } from "@/services/utils";
type HistoricalDataPoint = {
timestamp: string;
value: number;
};
/*
type HistoricalMetrics = {
cpu: HistoricalDataPoint[];
cpu_user: HistoricalDataPoint[];
cpu_system: HistoricalDataPoint[];
cpu_idle: HistoricalDataPoint[];
cpu_steal: HistoricalDataPoint[];
cpu_iowait: HistoricalDataPoint[];
memory: HistoricalDataPoint[];
swap: HistoricalDataPoint[];
network_up: HistoricalDataPoint[];
network_down: HistoricalDataPoint[];
};
*/
//export type TimePeriod = "realtime" | "hour" | "day" | "week";
const realtimeData = new Map<string, HistoricalDataPoint[]>();
const maxRealtimePoints = 50;
function addDataPoint(metric: string, timestamp: string, value: number) {
if (!realtimeData.has(metric)) {
realtimeData.set(metric, []);
}
const data = realtimeData.get(metric)!;
data.push({ timestamp, value });
if (data.length > maxRealtimePoints) {
data.shift();
}
}
export const addRealtimeData = (data: StatusMessage): void => {
const timestamp = data.timestamp;
const {
cpuUsage,
cpuUser,
cpuSystem,
cpuIdle,
cpuSteal,
cpuIowait,
memoryUsage,
swapUsage,
networkUp,
networkDown,
} = breakdownMetrics(data.metrics);
addDataPoint("cpu", timestamp, cpuUsage);
addDataPoint("cpu_user", timestamp, cpuUser);
addDataPoint("cpu_system", timestamp, cpuSystem);
addDataPoint("cpu_idle", timestamp, cpuIdle);
addDataPoint("cpu_steal", timestamp, cpuSteal);
addDataPoint("cpu_iowait", timestamp, cpuIowait);
addDataPoint("memory", timestamp, memoryUsage);
addDataPoint("swap", timestamp, swapUsage);
addDataPoint("network_up", timestamp, networkUp);
addDataPoint("network_down", timestamp, networkDown);
};
export function getRealtimeData(metric: string): HistoricalDataPoint[] {
return realtimeData.get(metric) || [];
}
/*
export async function getHistoricalData(period: TimePeriod): Promise<HistoricalMetrics> {
return ...todo
}
function clearRealtimeData() {
realtimeData.clear();
}
*/

14
ui/src/services/store.ts
View File

@@ -10,3 +10,17 @@ export function getLastMessage(): StatusMessage | null {
export function setLastMessage(message: StatusMessage) {
store.set(message);
}
const realtimeData: StatusMessage[] = [];
const maxRealtimePoints = 50;
export function addDataPoint(value: StatusMessage) {
realtimeData.push(value);
if (realtimeData.length > maxRealtimePoints) {
realtimeData.shift();
}
}
export function getRealtimeData(): StatusMessage[] {
return realtimeData ?? [];
}

53
ui/src/services/utils.ts
View File

@@ -1,4 +1,4 @@
import type { Metrics, UptimeMessage } from "@/services/types";
import type { UptimeMessage } from "@/services/types";
export function isAgentOnline(data: UptimeMessage): boolean {
const timeDiff = new Date().getTime() - new Date(data.last_seen).getTime();
@@ -66,54 +66,3 @@ export function calcPercentage(
export function formatPercentage(val: number | undefined) {
return `${(val ?? 0).toFixed(2)}%`;
}
export type BrokedownMetrics = {
cpuThreads: number;
cpuUsage: number;
cpuUser: number;
cpuSystem: number;
cpuIdle: number;
cpuSteal: number;
cpuIowait: number;
memoryUsage: number;
memoryUsed: number;
memoryTotal: number;
swapUsage: number;
diskUsage: number;
diskFree: number;
diskTotal: number;
networkUp: number;
networkDown: number;
};
export function breakdownMetrics(
metrics: Metrics | undefined,
): BrokedownMetrics {
return {
cpuThreads: metrics?.cpu.threads ?? 0,
cpuUsage: metrics?.cpu.usage ?? 0,
cpuUser: metrics?.cpu.breakdown.user ?? 0,
cpuSystem: metrics?.cpu.breakdown.system ?? 0,
cpuIdle: metrics?.cpu.breakdown.idle ?? 0,
cpuSteal: metrics?.cpu.breakdown.steal ?? 0,
cpuIowait: metrics?.cpu.breakdown.iowait ?? 0,
memoryUsage: calcPercentage(
metrics?.memory.used,
metrics?.memory.total,
),
memoryUsed: metrics?.memory.used ?? 0,
memoryTotal: metrics?.memory.total ?? 0,
swapUsage: calcPercentage(
metrics?.memory.swap_used,
metrics?.memory.swap_total,
),
diskUsage: calcPercentage(
(metrics?.disk.total ?? 0) - (metrics?.disk.free ?? 0),
metrics?.disk.total,
),
diskFree: metrics?.disk.free ?? 0,
diskTotal: metrics?.disk.total ?? 0,
networkUp: (metrics?.network.up ?? 0) / 1024,
networkDown: (metrics?.network.down ?? 0) / 1024,
};
}