Resource Monitor

Repository

I developed this modern resource monitor to explore the high-performance capabilities of the Tauri framework and the Rust systems language. By combining a low-level Rust backend with a reactive Next.js frontend, I created a utility that provides real-time insights into CPU, GPU, and RAM usage with minimal overhead. The project served as a deep dive into cross-process communication and the challenges of hardware-level data collection across different operating systems.

Unified Data Collection Engine

The core of the application is the ResourceMonitor struct, which orchestrates the collection of data from various system subsystems. It leverages the sysinfo crate for CPU and memory metrics and the nvml-wrapper for NVIDIA GPU telemetry. By consolidating these disparate sources into a single collect_all_data function, I ensured that the frontend receives a synchronized snapshot of the system state, complete with precise millisecond timestamps for accurate historical graphing.

1impl ResourceMonitor {
2    pub fn new() -> Result<Self, String> {
3        let sys = System::new_all();
4        let nvml = Nvml::init().map_err(|e| format!("GPU Init Failed: {}", e))?;
5        Ok(ResourceMonitor { sys, nvml })
6    }
7
8    pub fn collect_all_data(&mut self) -> ResourceData {
9        self.sys.refresh_all();
10
11        // Parallel data gathering from different monitors
12        let cpu_info = CpuMonitor::get_cpu_info(&mut self.sys);
13        let system_info = SystemMonitor::get_system_info(&mut self.sys);
14        let memory_info = MemoryMonitor::get_memory_info(&mut self.sys);
15        let gpu_info = self.collect_gpu_data();
16
17        ResourceData {
18            cpu: cpu_info,
19            sys: system_info,
20            mem: memory_info,
21            gpu: gpu_info,
22            timestamp_ms: current_time_millis(),
23        }
24    }
25}

Cross-Process Command Bridge

Tauri's security-first architecture requires a clear bridge between the frontend and backend. I implemented a series of tauri::command handlers that expose the ResourceMonitor's functionality to the TypeScript environment. By utilizing Tauri's State management system and Mutex locking, I ensured that data access is thread-safe and that the frontend can request specific data streams—such as just CPU or GPU metrics—to minimize unnecessary processing.

1#[tauri::command]
2fn get_all_resource_data(monitor: State<SharedResourceMonitor>) -> ResourceData {
3    // Thread-safe access to the shared monitor state
4    let mut monitor = monitor.lock().expect("State Lock Failure");
5    monitor.collect_all_data()
6}
7
8#[tauri::command]
9fn get_gpu_data(monitor: State<SharedResourceMonitor>) -> GpuInfo {
10    let monitor = monitor.lock().expect("State Lock Failure");
11    monitor.collect_gpu_data()
12}

High-Performance SVG Graphing

To visualize the system's performance history, I developed a custom LineGraph component in React. Instead of relying on heavy third-party graphing libraries, I built a lightweight SVG generator that renders data points on the fly. This component calculates the visual coordinates based on raw usage percentages and uses an optimized polyline for rendering. This approach ensures that the UI remains fluid and responsive even when displaying hundreds of data points per second.

1export default function LineGraph({dataPoints, label, upperRange = 100}: LineGraphInterface) {
2    const width = 450;
3    const height = 200;
4    const padding = 12;
5
6    // Calculate normalized SVG coordinates
7    const points = dataPoints.map((value, i) => {
8        const x = padding + (i / (dataPoints.length - 1)) * (width - 2 * padding);
9        const y = (height - padding) - (value / upperRange) * (height - 2 * padding);
10        return `${x},${y}`;
11    }).join(' ');
12
13    return (
14        <div className="line-graph">
15            <svg viewBox={`0 0 ${width} ${height}`} width="100%">
16                {/* Dynamic Grid Lines */}
17                {[0, 25, 50, 75, 100].map(p => (
18                    <line key={p} x1="0" y1={getGridY(p)} x2={width} y2={getGridY(p)}
19                          stroke="#666" strokeDasharray="4 2" />
20                ))}
21                {/* The Usage Curve */}
22                <polyline fill="none" stroke="#000" strokeWidth="2" points={points} />
23            </svg>
24        </div>
25    );
26}

Technical Impact and Optimization

By choosing Tauri over traditional Electron-based solutions, I achieved a significantly lower memory footprint and a smaller final executable size (~5MB vs ~80MB). The project taught me the importance of efficient data polling rates and the power of Rust for systems-level tasks. Future iterations will focus on adding support for individual CPU cores and multi-GPU configurations, further enhancing the tool's utility for power users.

Try It Out

Download

If you want to try this app out for yourself, click on the download button and install the app using the MSI or EXE installer from GitHub.