Skip to content

Commit 0ddac8c

Browse files
Anamikaghosh18Anamikaghosh18
committed
changes in process metrices & process logs
1 parent 797b0c9 commit 0ddac8c

File tree

4 files changed

+107
-71
lines changed

4 files changed

+107
-71
lines changed

‎server/index.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ setInterval(async () => {
1919
const network = await si.networkStats();
2020
const disk = await si.fsSize();
2121
const processes = await si.processes();
22-
22+
const uptime = process.uptime();
23+
2324
io.emit('systemStats', {
2425
cpu: cpu.currentLoad,
2526
memory: {
@@ -29,7 +30,8 @@ setInterval(async () => {
2930
},
3031
network: network[0],
3132
disk: disk[0],
32-
processes: processes
33+
processes: processes,
34+
uptime: uptime // Include uptime in the emitted data
3335
});
3436
}, 1000);
3537

‎src/components/Navbar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react';
21
import { Link, useLocation } from 'react-router-dom';
32
import { LayoutDashboard, List, Brain } from 'lucide-react';
43

@@ -14,7 +13,8 @@ const Navbar = () => {
1413
<div className="container mx-auto px-4">
1514
<div className="flex items-center justify-between h-16">
1615
<div className="flex items-center space-x-8">
17-
<h1 className="text-xl font-bold text-blue-accent-500">OS Analyzer</h1>
16+
{/* Updated Name and Font */}
17+
<h1 className="text-2xl font-extrabold text-blue-accent-500 font-serif">SysTrack</h1>
1818
<div className="flex space-x-4">
1919
<Link
2020
to="/"

‎src/pages/Dashboard.tsx

+84-65
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Line } from 'react-chartjs-2';
33
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
44
import 'react-circular-progressbar/dist/styles.css';
55
import { io } from 'socket.io-client';
6+
import { Cpu, MemoryStick, HardDrive, Wifi, Activity, Monitor, Clock } from 'lucide-react';
67
import ProcessChatbot from '../components/ProcessChatbot';
78
import {
89
Chart as ChartJS,
@@ -21,9 +22,11 @@ const Dashboard = () => {
2122
const [systemStats, setSystemStats] = useState({
2223
cpu: 0,
2324
memory: { total: 1, used: 0, free: 0 },
24-
network: { rx_sec: 0, tx_sec: 0 },
25-
disk: { size: 1, used: 0, free: 0 },
25+
network: { rx_sec: 0, tx_sec: 0, total_rx: 0, total_tx: 0 },
26+
disk: { size: 1, used: 0 },
2627
processes: [],
28+
uptime: 0,
29+
gpu: null, // New GPU stats
2730
});
2831

2932
const [chartData, setChartData] = useState({
@@ -55,13 +58,16 @@ const Dashboard = () => {
5558
network: {
5659
rx_sec: data.network?.rx_sec ?? 0,
5760
tx_sec: data.network?.tx_sec ?? 0,
61+
total_rx: data.network?.total_rx ?? 0,
62+
total_tx: data.network?.total_tx ?? 0,
5863
},
5964
disk: {
6065
size: data.disk?.size ?? 1,
6166
used: data.disk?.used ?? 0,
62-
free: data.disk?.free ?? 0,
6367
},
6468
processes: data.processes?.list ?? [],
69+
uptime: data.uptime ?? 0,
70+
gpu: data.gpu ?? null, // GPU stats
6571
});
6672

6773
setChartData((prev) => ({
@@ -86,76 +92,89 @@ const Dashboard = () => {
8692
return (used / total) * 100;
8793
};
8894

95+
const formatUptime = (seconds: number) => {
96+
const hours = Math.floor(seconds / 3600);
97+
const minutes = Math.floor((seconds % 3600) / 60);
98+
return `${hours}h ${minutes}m`;
99+
};
100+
89101
return (
90-
<div className="relative min-h-screen">
91-
{/* Animated Text Section */}
92-
<div className="text-center py-6 animate-fade-in">
93-
<h1 className="text-3xl font-bold text-gray-300 animate-slide-in">
94-
Welcome to the OS Process Analyzer
95-
</h1>
96-
<p className="text-lg text-gray-400 mt-2 animate-fade-in">
97-
Monitor your system's performance in real-time with AI-driven insights.
102+
<div className="relative min-h-screen bg-gray-900 text-gray-300">
103+
{/* Header Section */}
104+
<div className="text-center py-6">
105+
<h1 className="text-4xl font-bold text-blue-400">System Performance Dashboard</h1>
106+
<p className="text-lg text-gray-400 mt-2">
107+
Real-time insights into your system's performance and resource usage.
98108
</p>
99109
</div>
100110

101-
<div className="space-y-6 animate-fade-in pr-[400px]">
102-
{/* Gauges Section */}
103-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
104-
{/* CPU Usage Card */}
105-
<div className="relative p-6 rounded-lg shadow-lg bg-gray-800 hover:scale-105 hover:shadow-xl transition-transform duration-300">
106-
<h3 className="text-lg font-semibold mb-4 text-gray-300">CPU Usage</h3>
107-
<CircularProgressbar
108-
value={systemStats.cpu}
109-
text={`${systemStats.cpu.toFixed(1)}%`}
110-
styles={buildStyles({
111-
textColor: '#FFFFFF',
112-
pathColor: '#64FFDA',
113-
trailColor: 'rgba(100, 255, 218, 0.1)',
114-
})}
115-
/>
116-
</div>
111+
{/* Metrics Section */}
112+
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 px-6">
113+
{/* CPU Usage */}
114+
<div className="flex flex-col items-center bg-gray-800 p-4 rounded-lg shadow-lg hover:scale-105 transition-transform duration-300">
115+
<Cpu className="text-blue-400 w-8 h-8 mb-2" />
116+
<h3 className="text-lg font-semibold text-white">CPU Usage</h3>
117+
<CircularProgressbar
118+
value={systemStats.cpu}
119+
text={`${systemStats.cpu.toFixed(1)}%`}
120+
styles={buildStyles({
121+
textColor: '#FFFFFF',
122+
pathColor: '#64FFDA',
123+
trailColor: 'rgba(100, 255, 218, 0.2)',
124+
})}
125+
/>
126+
</div>
117127

118-
{/* Memory Usage Card */}
119-
<div className="relative p-6 rounded-lg shadow-lg bg-gray-800 hover:scale-105 hover:shadow-xl transition-transform duration-300">
120-
<h3 className="text-lg font-semibold mb-4 text-gray-300">Memory Usage</h3>
121-
<CircularProgressbar
122-
value={getPercentage(systemStats.memory.used, systemStats.memory.total)}
123-
text={`${getPercentage(systemStats.memory.used, systemStats.memory.total).toFixed(1)}%`}
124-
styles={buildStyles({
125-
textColor: '#FFFFFF',
126-
pathColor: '#FF6384',
127-
trailColor: 'rgba(255, 99, 132, 0.2)',
128-
})}
129-
/>
130-
</div>
128+
{/* Memory Usage */}
129+
<div className="flex flex-col items-center bg-gray-800 p-4 rounded-lg shadow-lg hover:scale-105 transition-transform duration-300">
130+
<MemoryStick className="text-pink-400 w-8 h-8 mb-2" />
131+
<h3 className="text-lg font-semibold text-white">Memory Usage</h3>
132+
<CircularProgressbar
133+
value={getPercentage(systemStats.memory.used, systemStats.memory.total)}
134+
text={`${getPercentage(systemStats.memory.used, systemStats.memory.total).toFixed(1)}%`}
135+
styles={buildStyles({
136+
textColor: '#FFFFFF',
137+
pathColor: '#FF6384',
138+
trailColor: 'rgba(255, 99, 132, 0.2)',
139+
})}
140+
/>
141+
</div>
131142

132-
{/* Network Usage Card */}
133-
<div className="relative p-6 rounded-lg shadow-lg bg-gray-800 hover:scale-105 hover:shadow-xl transition-transform duration-300">
134-
<h3 className="text-lg font-semibold mb-4 text-gray-300">Network Usage</h3>
135-
<div className="text-gray-300">
136-
<p>↓ {((systemStats.network.rx_sec || 0) / 1024 / 1024).toFixed(2)} MB/s</p>
137-
<p>↑ {((systemStats.network.tx_sec || 0) / 1024 / 1024).toFixed(2)} MB/s</p>
138-
</div>
139-
</div>
143+
{/* Network Usage */}
144+
<div className="flex flex-col items-center bg-gray-800 p-4 rounded-lg shadow-lg hover:scale-105 transition-transform duration-300">
145+
<Wifi className="text-green-400 w-8 h-8 mb-2" />
146+
<h3 className="text-lg font-semibold text-white">Network Usage</h3>
147+
<p className="text-sm text-gray-200">
148+
↓ {((systemStats.network.rx_sec || 0) / 1024 / 1024).toFixed(2)} MB/s
149+
</p>
150+
<p className="text-sm text-gray-200">
151+
↑ {((systemStats.network.tx_sec || 0) / 1024 / 1024).toFixed(2)} MB/s
152+
</p>
153+
</div>
140154

141-
{/* Disk Usage Card */}
142-
<div className="relative p-6 rounded-lg shadow-lg bg-gray-800 hover:scale-105 hover:shadow-xl transition-transform duration-300">
143-
<h3 className="text-lg font-semibold mb-4 text-gray-300">Disk Usage</h3>
144-
<CircularProgressbar
145-
value={getPercentage(systemStats.disk.used, systemStats.disk.size)}
146-
text={`${getPercentage(systemStats.disk.used, systemStats.disk.size).toFixed(1)}%`}
147-
styles={buildStyles({
148-
textColor: '#FFFFFF',
149-
pathColor: '#36A2EB',
150-
trailColor: 'rgba(54, 162, 235, 0.2)',
151-
})}
152-
/>
153-
</div>
155+
156+
157+
{/* Disk Usage */}
158+
<div className="flex flex-col items-center bg-gray-800 p-4 rounded-lg shadow-lg hover:scale-105 transition-transform duration-300">
159+
<HardDrive className="text-purple-400 w-8 h-8 mb-2" />
160+
<h3 className="text-lg font-semibold text-white">Disk Usage</h3>
161+
<CircularProgressbar
162+
value={getPercentage(systemStats.disk.used, systemStats.disk.size)}
163+
text={`${getPercentage(systemStats.disk.used, systemStats.disk.size).toFixed(1)}%`}
164+
styles={buildStyles({
165+
textColor: '#FFFFFF',
166+
pathColor: '#36A2EB',
167+
trailColor: 'rgba(54, 162, 235, 0.2)',
168+
})}
169+
/>
154170
</div>
171+
</div>
155172

173+
{/* Graphs Section */}
174+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 px-6 mt-8">
156175
{/* CPU Usage Chart */}
157-
<div className="bg-navy-800 p-6 rounded-lg shadow-lg">
158-
<h3 className="text-lg font-semibold mb-4 text-blue-accent-500">CPU Usage Over Time</h3>
176+
<div className="bg-gray-800 p-6 rounded-lg shadow-lg">
177+
<h3 className="text-lg font-semibold mb-4 text-blue-400">CPU Usage Over Time</h3>
159178
<div className="h-64">
160179
<Line
161180
data={chartData}
@@ -193,8 +212,8 @@ const Dashboard = () => {
193212
</div>
194213

195214
{/* Memory Usage Chart */}
196-
<div className="bg-navy-800 p-6 rounded-lg shadow-lg">
197-
<h3 className="text-lg font-semibold mb-4 text-blue-accent-500">Memory Usage Over Time</h3>
215+
<div className="bg-gray-800 p-6 rounded-lg shadow-lg">
216+
<h3 className="text-lg font-semibold mb-4 text-pink-400">Memory Usage Over Time</h3>
198217
<div className="h-64">
199218
<Line
200219
data={{

‎src/pages/ProcessList.tsx

+17-2
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,23 @@ const ProcessList = () => {
2929
process.name.toLowerCase().includes(searchTerm.toLowerCase())
3030
);
3131

32+
// Function to determine progress bar color based on usage
33+
const getProgressBarColor = (usage: number) => {
34+
if (usage > 80) return 'bg-red-500'; // High usage
35+
if (usage > 50) return 'bg-yellow-500'; // Moderate usage
36+
return 'bg-green-500'; // Low usage
37+
};
38+
3239
return (
3340
<div className="bg-gray-900 rounded-lg shadow-lg animate-fade-in">
41+
{/* Text Section Below Navbar */}
42+
<div className="text-center py-6">
43+
<h1 className="text-3xl font-bold text-gray-300">Process List</h1>
44+
<p className="text-lg text-gray-400 mt-2">
45+
Monitor and analyze the processes running on your system in real-time. Use the search bar to filter processes by name.
46+
</p>
47+
</div>
48+
3449
{/* Search Bar */}
3550
<div className="p-4 border-b border-gray-700">
3651
<input
@@ -81,7 +96,7 @@ const ProcessList = () => {
8196
<span>{process.cpu.toFixed(1)}%</span>
8297
<div className="w-full bg-gray-700 rounded-full h-2">
8398
<div
84-
className="bg-blue-500 h-2 rounded-full"
99+
className={`${getProgressBarColor(process.cpu)} h-2 rounded-full`}
85100
style={{ width: `${process.cpu}%` }}
86101
></div>
87102
</div>
@@ -92,7 +107,7 @@ const ProcessList = () => {
92107
<span>{process.mem.toFixed(1)}%</span>
93108
<div className="w-full bg-gray-700 rounded-full h-2">
94109
<div
95-
className="bg-green-500 h-2 rounded-full"
110+
className={`${getProgressBarColor(process.mem)} h-2 rounded-full`}
96111
style={{ width: `${process.mem}%` }}
97112
></div>
98113
</div>

0 commit comments

Comments
 (0)