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

finish ui

Browse Source
This commit is contained in:
csehviktor
2025-07-15 03:08:44 +02:00
parent e778f7934e
commit 96df5453b9
7 changed files with 142 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,55 +18,57 @@ type ChartDataReturns = {
networkData: ChartData;
};
export function useChartData(data: StatusMessage | null): ChartDataReturns {
export function useChartData(
data: StatusMessage | StatusMessage[] | null,
): ChartDataReturns {
const currentData = Array.isArray(data) ? data : getRealtimeData();
useEffect(() => {
if (!data) return;
if (!data || Array.isArray(data)) return;
addDataPoint(data);
}, [data]);
const realtimeData = getRealtimeData();
return {
cpuData: {
labels: realtimeData.map((p) => formatTimestamp(p.timestamp)),
labels: currentData.map((p) => formatTimestamp(p.timestamp)),
datasets: [
{
label: "Total CPU (%)",
data: realtimeData.map(({ metrics }) => metrics.cpu.usage),
data: currentData.map(({ metrics }) => metrics.cpu.usage),
color: "#3b82f6",
},
{
label: "User (%)",
data: realtimeData.map(
data: currentData.map(
({ metrics }) => metrics.cpu.breakdown.user,
),
color: "#10b981",
},
{
label: "System (%)",
data: realtimeData.map(
data: currentData.map(
({ metrics }) => metrics.cpu.breakdown.system,
),
color: "#f59e0b",
},
{
label: "I/O Wait (%)",
data: realtimeData.map(
data: currentData.map(
({ metrics }) => metrics.cpu.breakdown.iowait,
),
color: "#ef4444",
},
{
label: "Steal (%)",
data: realtimeData.map(
data: currentData.map(
({ metrics }) => metrics.cpu.breakdown.steal,
),
color: "#8b5cf6",
},
{
label: "Idle (%)",
data: realtimeData.map(
data: currentData.map(
({ metrics }) => metrics.cpu.breakdown.idle,
),
color: "#6b7280",
@@ -74,11 +76,11 @@ export function useChartData(data: StatusMessage | null): ChartDataReturns {
],
},
memoryData: {
labels: realtimeData.map((p) => formatTimestamp(p.timestamp)),
labels: currentData.map((p) => formatTimestamp(p.timestamp)),
datasets: [
{
label: "Memory Usage (%)",
data: realtimeData.map(({ metrics }) =>
data: currentData.map(({ metrics }) =>
calcPercentage(
metrics.memory.used,
metrics.memory.total,
@@ -88,7 +90,7 @@ export function useChartData(data: StatusMessage | null): ChartDataReturns {
},
{
label: "Swap Usage (%)",
data: realtimeData.map(({ metrics }) =>
data: currentData.map(({ metrics }) =>
calcPercentage(
metrics.memory.swap_used,
metrics.memory.swap_total,
@@ -99,16 +101,16 @@ export function useChartData(data: StatusMessage | null): ChartDataReturns {
],
},
networkData: {
labels: realtimeData.map((p) => formatTimestamp(p.timestamp)),
labels: currentData.map((p) => formatTimestamp(p.timestamp)),
datasets: [
{
label: "Upload (bps)",
data: realtimeData.map(({ metrics }) => metrics.network.up),
data: currentData.map(({ metrics }) => metrics.network.up),
color: "#ef4444",
},
{
label: "Download (bps)",
data: realtimeData.map(
data: currentData.map(
({ metrics }) => metrics.network.down,
),
color: "#3b82f6",