refactor: complete rewrite for high performance hierarchical monitoring
This commit is contained in:
@@ -5,11 +5,9 @@
|
||||
|
||||
mod models;
|
||||
mod monitor;
|
||||
mod commands; // We'll keep this but gut it
|
||||
mod cli;
|
||||
|
||||
use tauri::{State, Manager};
|
||||
use std::sync::Mutex;
|
||||
use tauri::State;
|
||||
use crate::monitor::Monitor;
|
||||
use crate::models::GlobalStats;
|
||||
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
use serde::{Serialize, Deserialize};
|
||||
use std::collections::HashMap;
|
||||
use serde::Serialize;
|
||||
|
||||
#[derive(Clone, Serialize, Debug)]
|
||||
pub struct ProcessNode {
|
||||
pub pid: u32,
|
||||
pub name: String,
|
||||
pub cpu_self: f32, // CPU usage of this specific process
|
||||
pub cpu_children: f32, // Sum of children's CPU (recursive)
|
||||
pub mem_rss: u64, // Resident Set Size (Self)
|
||||
pub mem_children: u64, // Sum of children's Mem
|
||||
pub cpu_self: f32,
|
||||
pub cpu_children: f32,
|
||||
pub mem_rss: u64,
|
||||
pub mem_children: u64,
|
||||
pub children: Vec<ProcessNode>,
|
||||
}
|
||||
|
||||
@@ -27,12 +26,6 @@ pub struct GlobalStats {
|
||||
pub cpu_total: f32,
|
||||
pub mem_used: u64,
|
||||
pub mem_total: u64,
|
||||
pub process_tree: Vec<ProcessNode>, // Top-level roots (e.g. systemd/init or orphans)
|
||||
pub process_tree: Vec<ProcessNode>,
|
||||
pub process_count: usize,
|
||||
}
|
||||
|
||||
#[derive(Clone, Copy, PartialEq)]
|
||||
pub enum MemoryMode {
|
||||
Rss, // Fast, default for monitoring
|
||||
Pss, // Slow, accurate for profiling
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
use sysinfo::System;
|
||||
use sysinfo::{System, SystemExt, ProcessExt, CpuExt, PidExt};
|
||||
use std::sync::{Arc, Mutex};
|
||||
use std::thread;
|
||||
use std::time::Duration;
|
||||
use std::collections::{HashMap, HashSet};
|
||||
use std::collections::HashMap;
|
||||
use crate::models::*;
|
||||
|
||||
pub struct Monitor {
|
||||
@@ -39,8 +39,6 @@ impl Monitor {
|
||||
|
||||
thread::spawn(move || {
|
||||
let mut sys = System::new_all();
|
||||
|
||||
// Initial wait to let sysinfo calculate CPU diff
|
||||
thread::sleep(Duration::from_millis(500));
|
||||
sys.refresh_all();
|
||||
|
||||
@@ -49,21 +47,17 @@ impl Monitor {
|
||||
break;
|
||||
}
|
||||
|
||||
// 1. Refresh System State (Efficiently)
|
||||
sys.refresh_cpu_all();
|
||||
sys.refresh_memory();
|
||||
sys.refresh_processes(sysinfo::ProcessesToUpdate::All, true);
|
||||
|
||||
// 2. Calculate Global Stats
|
||||
let cpu_total = sys.global_cpu_usage();
|
||||
let mem_used = sys.used_memory();
|
||||
let mem_total = sys.total_memory();
|
||||
let process_count = sys.processes().len();
|
||||
|
||||
// 3. Build Process Tree
|
||||
let tree = build_process_tree(&sys);
|
||||
|
||||
// 4. Update Shared State
|
||||
{
|
||||
let mut lock = data_ref.lock().unwrap();
|
||||
lock.cpu_total = cpu_total;
|
||||
@@ -73,19 +67,13 @@ impl Monitor {
|
||||
lock.process_count = process_count;
|
||||
}
|
||||
|
||||
// 5. Sleep (Aim for 1s interval)
|
||||
thread::sleep(Duration::from_secs(1));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
pub fn stop(&self) {
|
||||
*self.running.lock().unwrap() = false;
|
||||
}
|
||||
}
|
||||
|
||||
fn build_process_tree(sys: &System) -> Vec<ProcessNode> {
|
||||
// 1. Collect all raw nodes
|
||||
let mut raw_nodes: HashMap<u32, ProcessNode> = HashMap::new();
|
||||
let mut ppid_map: HashMap<u32, u32> = HashMap::new();
|
||||
|
||||
@@ -107,19 +95,16 @@ fn build_process_tree(sys: &System) -> Vec<ProcessNode> {
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Build Hierarchy (Bottom-Up or Map-Based)
|
||||
let mut children_map: HashMap<u32, Vec<u32>> = HashMap::new();
|
||||
for (child, parent) in &ppid_map {
|
||||
children_map.entry(*parent).or_default().push(*child);
|
||||
}
|
||||
|
||||
// Identify roots
|
||||
let roots: Vec<u32> = raw_nodes.keys()
|
||||
.filter(|pid| !ppid_map.contains_key(pid)) // Has no parent in the list
|
||||
.filter(|pid| !ppid_map.contains_key(pid))
|
||||
.cloned()
|
||||
.collect();
|
||||
|
||||
// 3. Recursive Tree Builder
|
||||
fn build_recursive(
|
||||
pid: u32,
|
||||
nodes_map: &mut HashMap<u32, ProcessNode>,
|
||||
@@ -136,7 +121,6 @@ fn build_process_tree(sys: &System) -> Vec<ProcessNode> {
|
||||
}
|
||||
}
|
||||
|
||||
// Sort children by Mem impact by default
|
||||
node.children.sort_by(|a, b| b.total_mem().cmp(&a.total_mem()));
|
||||
|
||||
Some(node)
|
||||
@@ -152,7 +136,6 @@ fn build_process_tree(sys: &System) -> Vec<ProcessNode> {
|
||||
}
|
||||
}
|
||||
|
||||
// Sort roots by total CPU
|
||||
tree.sort_by(|a, b| b.total_cpu().partial_cmp(&a.total_cpu()).unwrap_or(std::cmp::Ordering::Equal));
|
||||
|
||||
tree
|
||||
|
||||
71
src/App.tsx
71
src/App.tsx
@@ -1,57 +1,31 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { SystemStats, ProfilingReport } from './types';
|
||||
import { GlobalStats } from './types';
|
||||
import { Dashboard } from './components/Dashboard';
|
||||
import { ReportView } from './components/ReportView';
|
||||
|
||||
function App() {
|
||||
const [view, setView] = useState<'dashboard' | 'report'>('dashboard');
|
||||
const [stats, setStats] = useState<SystemStats | null>(null);
|
||||
const [stats, setStats] = useState<GlobalStats | null>(null);
|
||||
const [history, setHistory] = useState<{ time: string; cpu: number }[]>([]);
|
||||
const [report, setReport] = useState<ProfilingReport | null>(null);
|
||||
|
||||
// Initial report check
|
||||
useEffect(() => {
|
||||
const checkInitialReport = async () => {
|
||||
try {
|
||||
const data = await invoke<ProfilingReport | null>('get_initial_report');
|
||||
if (data) {
|
||||
setReport(data);
|
||||
setView('report');
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to get initial report:', e);
|
||||
}
|
||||
};
|
||||
checkInitialReport();
|
||||
}, []);
|
||||
|
||||
// Stats Polling
|
||||
useEffect(() => {
|
||||
let timeoutId: number;
|
||||
let isMounted = true;
|
||||
|
||||
const fetchStats = async () => {
|
||||
if (view !== 'dashboard' && !stats?.is_recording) return;
|
||||
|
||||
try {
|
||||
const data = await invoke<SystemStats>('get_system_stats', {
|
||||
minimal: (stats?.is_recording || view === 'report')
|
||||
});
|
||||
const data = await invoke<GlobalStats>('get_latest_stats');
|
||||
|
||||
if (!isMounted) return;
|
||||
|
||||
setStats(data);
|
||||
|
||||
const avgCpu = data.cpu_usage.reduce((a, b) => a + b, 0) / data.cpu_usage.length;
|
||||
|
||||
setHistory(prev => {
|
||||
const newHistory = [...prev, { time: new Date().toLocaleTimeString(), cpu: avgCpu }];
|
||||
const newHistory = [...prev, { time: new Date().toLocaleTimeString(), cpu: data.cpu_total }];
|
||||
if (newHistory.length > 60) newHistory.shift();
|
||||
return newHistory;
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
console.error('Failed to fetch stats:', e);
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
timeoutId = window.setTimeout(fetchStats, 1000);
|
||||
@@ -64,38 +38,21 @@ function App() {
|
||||
isMounted = false;
|
||||
clearTimeout(timeoutId);
|
||||
};
|
||||
}, [view, stats?.is_recording]);
|
||||
}, []);
|
||||
|
||||
const toggleRecording = async () => {
|
||||
if (stats?.is_recording) {
|
||||
const reportData = await invoke<ProfilingReport>('stop_profiling');
|
||||
setReport(reportData);
|
||||
setView('report');
|
||||
} else {
|
||||
await invoke('start_profiling');
|
||||
}
|
||||
};
|
||||
|
||||
if (view === 'report' && report) {
|
||||
return (
|
||||
<ReportView
|
||||
report={report}
|
||||
onBack={() => setView('dashboard')}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (!stats) return <div className="h-screen w-screen flex items-center justify-center text-text bg-base font-black italic tracking-tighter uppercase text-2xl animate-pulse">Initializing SysPulse...</div>;
|
||||
if (!stats) return (
|
||||
<div className="h-screen w-screen flex flex-col items-center justify-center text-text bg-base font-black italic tracking-tighter uppercase text-2xl animate-pulse">
|
||||
Initializing SysPulse
|
||||
<div className="mt-4 w-48 h-1 bg-surface1 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-blue animate-[loading_2s_infinite]" style={{ width: '30%' }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Dashboard
|
||||
stats={stats}
|
||||
history={history}
|
||||
onRecordingToggle={toggleRecording}
|
||||
onImport={(importedReport) => {
|
||||
setReport(importedReport);
|
||||
setView('report');
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,61 +1,89 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useMemo, Fragment } from 'react';
|
||||
import {
|
||||
Activity, Cpu, Server, Database, Play, Square, Shield, Target, Download
|
||||
Activity, Cpu, Server, Database, Shield, ChevronRight, ChevronDown, Search
|
||||
} from 'lucide-react';
|
||||
import { AreaChart, Area, ResponsiveContainer } from 'recharts';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { SystemStats, ProfilingReport } from '../types';
|
||||
import { cn, formatBytes, formatDuration } from '../utils';
|
||||
import { GlobalStats, ProcessNode } from '../types';
|
||||
import { cn, formatBytes } from '../utils';
|
||||
|
||||
interface Props {
|
||||
stats: SystemStats;
|
||||
stats: GlobalStats;
|
||||
history: { time: string; cpu: number }[];
|
||||
onRecordingToggle: () => void;
|
||||
onImport: (report: ProfilingReport) => void;
|
||||
}
|
||||
|
||||
export function Dashboard({ stats, history, onRecordingToggle, onImport }: Props) {
|
||||
export function Dashboard({ stats, history }: Props) {
|
||||
const [searchTerm, setSearchBar] = useState("");
|
||||
const [pinnedPid, setPinnedPid] = useState<number | null>(null);
|
||||
const [expandedPids, setExpandedPids] = useState<Set<number>>(new Set());
|
||||
|
||||
const avgCpu = stats.cpu_usage.reduce((a, b) => a + b, 0) / stats.cpu_usage.length;
|
||||
const memoryPercent = (stats.used_memory / stats.total_memory) * 100;
|
||||
const memoryPercent = (Number(stats.mem_used) / Number(stats.mem_total)) * 100;
|
||||
|
||||
const filteredLiveProcs = stats.processes.filter(p =>
|
||||
p.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
p.pid.toString().includes(searchTerm)
|
||||
);
|
||||
|
||||
const startTargeted = async (pid: number) => {
|
||||
await invoke('start_targeted_profiling', { pid });
|
||||
const toggleExpand = (pid: number) => {
|
||||
const next = new Set(expandedPids);
|
||||
if (next.has(pid)) next.delete(pid);
|
||||
else next.add(pid);
|
||||
setExpandedPids(next);
|
||||
};
|
||||
|
||||
const killProcess = async (pid: number) => {
|
||||
try {
|
||||
await invoke('run_as_admin', { command: `kill -9 ${pid}` });
|
||||
} catch (e) {
|
||||
alert(`Failed to kill process: ${e}`);
|
||||
}
|
||||
};
|
||||
// Flatten the tree for the list view if searching, or keep it hierarchical
|
||||
const filteredTree = useMemo(() => {
|
||||
if (!searchTerm) return stats.process_tree;
|
||||
|
||||
const handleImport = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
const search = searchTerm.toLowerCase();
|
||||
const result: ProcessNode[] = [];
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.target?.result as string) as ProfilingReport;
|
||||
if (data.aggregated_processes && data.timeline) {
|
||||
onImport(data);
|
||||
} else {
|
||||
alert('Invalid report format');
|
||||
function searchRecursive(nodes: ProcessNode[]) {
|
||||
for (const node of nodes) {
|
||||
if (node.name.toLowerCase().includes(search) || node.pid.toString().includes(search)) {
|
||||
result.push(node);
|
||||
}
|
||||
} catch (err) {
|
||||
alert('Failed to parse JSON');
|
||||
searchRecursive(node.children);
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
searchRecursive(stats.process_tree);
|
||||
return result;
|
||||
}, [stats.process_tree, searchTerm]);
|
||||
|
||||
const renderProcessNode = (node: ProcessNode, depth = 0) => {
|
||||
const isExpanded = expandedPids.has(node.pid);
|
||||
const hasChildren = node.children.length > 0;
|
||||
const totalCpu = node.cpu_self + node.cpu_children;
|
||||
const totalMem = node.mem_rss + node.mem_children;
|
||||
|
||||
return (
|
||||
<Fragment key={node.pid}>
|
||||
<div
|
||||
className={cn(
|
||||
"grid grid-cols-[1fr_80px_100px_120px_80px] gap-4 px-4 py-3 border-b border-surface1/20 group hover:bg-surface1/20 transition-all rounded-xl items-center",
|
||||
depth > 0 && "bg-base/10"
|
||||
)}
|
||||
>
|
||||
<div className="font-bold text-text truncate text-sm flex items-center gap-2" style={{ paddingLeft: depth * 16 }}>
|
||||
{hasChildren && !searchTerm ? (
|
||||
<button onClick={() => toggleExpand(node.pid)} className="p-1 hover:bg-surface2 rounded">
|
||||
{isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
|
||||
</button>
|
||||
) : <div className="w-6" />}
|
||||
<span title={node.name}>{node.name}</span>
|
||||
</div>
|
||||
<div className="font-mono text-overlay2 text-xs text-right">{node.pid}</div>
|
||||
<div className="text-blue font-black text-sm text-right tabular-nums">
|
||||
{totalCpu.toFixed(1)}%
|
||||
{depth === 0 && node.cpu_children > 0 && <span className="block text-[9px] text-overlay1 font-normal">Self: {node.cpu_self.toFixed(1)}%</span>}
|
||||
</div>
|
||||
<div className="text-mauve font-black text-sm text-right tabular-nums">
|
||||
{formatBytes(totalMem)}
|
||||
{depth === 0 && node.mem_children > 0 && <span className="block text-[9px] text-overlay1 font-normal">Self: {formatBytes(node.mem_rss)}</span>}
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<button className="opacity-0 group-hover:opacity-100 p-1.5 hover:bg-red/20 text-red rounded-lg transition-all">
|
||||
<Shield size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{hasChildren && isExpanded && !searchTerm && node.children.map(child => renderProcessNode(child, depth + 1))}
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -68,188 +96,97 @@ export function Dashboard({ stats, history, onRecordingToggle, onImport }: Props
|
||||
<span className="font-black tracking-tighter uppercase italic text-xl">SysPulse</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 px-4">
|
||||
<label className="flex items-center gap-2 text-subtext0 hover:text-text transition-colors text-[10px] font-black uppercase tracking-widest cursor-pointer group">
|
||||
<Download size={14} className="text-blue group-hover:scale-110 transition-transform" />
|
||||
<span>Import Run</span>
|
||||
<input type="file" accept=".json" onChange={handleImport} className="hidden" />
|
||||
</label>
|
||||
<div className="h-4 w-px bg-surface1 mx-1" />
|
||||
<button
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-6 py-2 rounded-xl text-xs font-black transition-all shadow-xl",
|
||||
stats.is_recording
|
||||
? "bg-red text-base animate-pulse ring-4 ring-red/20"
|
||||
: "bg-green text-base hover:scale-105 active:scale-95 hover:shadow-green/20"
|
||||
)}
|
||||
onClick={() => {
|
||||
if (!stats.is_recording && pinnedPid) {
|
||||
startTargeted(pinnedPid);
|
||||
} else {
|
||||
onRecordingToggle();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{stats.is_recording ? <Square size={12} fill="currentColor" /> : <Play size={12} fill="currentColor" />}
|
||||
{stats.is_recording ? `STOP (${formatDuration(stats.recording_duration)})` : (pinnedPid ? "PROFILE TARGET" : "START GLOBAL")}
|
||||
</button>
|
||||
<div className="text-[10px] bg-surface1 px-3 py-1.5 rounded-full font-black text-overlay1 uppercase tracking-widest flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-green animate-pulse" />
|
||||
Live Monitor
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main className="flex-1 overflow-hidden flex flex-col p-6 gap-6">
|
||||
{stats.is_recording ? (
|
||||
<div className="flex-1 flex flex-col items-center justify-center gap-8 animate-in fade-in zoom-in duration-500">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-red/20 blur-3xl rounded-full scale-150 animate-pulse" />
|
||||
<div className="relative bg-surface0 p-12 rounded-[2.5rem] border-4 border-red/30 shadow-2xl overflow-hidden group">
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-red/10 to-transparent" />
|
||||
<Activity size={64} className="text-red animate-pulse relative z-10" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<h2 className="text-4xl font-black text-text tracking-tighter uppercase italic drop-shadow-lg">Profiling Active</h2>
|
||||
<p className="text-red font-mono text-2xl font-black tabular-nums">{formatDuration(stats.recording_duration)}</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 w-full max-w-md">
|
||||
<div className="bg-surface0 p-6 rounded-[1.5rem] border border-surface1 shadow-xl text-center">
|
||||
<div className="text-[10px] font-black text-overlay2 mb-2 uppercase tracking-widest">Global CPU</div>
|
||||
<div className="text-3xl font-black text-blue tabular-nums">{avgCpu.toFixed(1)}%</div>
|
||||
</div>
|
||||
<div className="bg-surface0 p-6 rounded-[1.5rem] border border-surface1 shadow-xl text-center">
|
||||
<div className="text-[10px] font-black text-overlay2 mb-2 uppercase tracking-widest">Global RAM</div>
|
||||
<div className="text-3xl font-black text-mauve tabular-nums">{memoryPercent.toFixed(1)}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-overlay1 text-sm font-bold bg-surface0/50 px-4 py-2 rounded-full border border-surface1">
|
||||
<Shield size={14} className="text-green" />
|
||||
<span>Performance optimized snapshot mode enabled</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 shrink-0">
|
||||
<div className="card group bg-gradient-to-b from-surface0 to-base/50">
|
||||
<div className="card-title"><Cpu size={16} className="text-blue" strokeWidth={3} /> System Load</div>
|
||||
<div className="flex items-end gap-2">
|
||||
<span className="stat-value text-blue tabular-nums">{stats.cpu_total.toFixed(1)}</span>
|
||||
<span className="text-subtext0 font-black mb-2">%</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 shrink-0">
|
||||
<div className="card group bg-gradient-to-b from-surface0 to-base/50">
|
||||
<div className="card-title"><Cpu size={16} className="text-blue" strokeWidth={3} /> CPU Load</div>
|
||||
<div className="flex items-end gap-2">
|
||||
<span className="stat-value text-blue tabular-nums">{avgCpu.toFixed(1)}</span>
|
||||
<span className="text-subtext0 font-black mb-2">%</span>
|
||||
</div>
|
||||
<div className="h-16 mt-4">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={history}>
|
||||
<defs>
|
||||
<linearGradient id="cpuDash" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="var(--blue)" stopOpacity={0.5}/>
|
||||
<stop offset="95%" stopColor="var(--blue)" stopOpacity={0}/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<Area type="monotone" dataKey="cpu" stroke="var(--blue)" fill="url(#cpuDash)" strokeWidth={3} isAnimationActive={false} />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-16 mt-4">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={history}>
|
||||
<defs>
|
||||
<linearGradient id="cpuDash" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="var(--blue)" stopOpacity={0.5}/>
|
||||
<stop offset="95%" stopColor="var(--blue)" stopOpacity={0}/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<Area type="monotone" dataKey="cpu" stroke="var(--blue)" fill="url(#cpuDash)" strokeWidth={3} isAnimationActive={false} />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card bg-gradient-to-b from-surface0 to-base/50">
|
||||
<div className="card-title"><Database size={16} className="text-mauve" strokeWidth={3} /> Memory</div>
|
||||
<div className="flex items-end gap-2">
|
||||
<span className="stat-value text-mauve tabular-nums">{formatBytes(stats.used_memory)}</span>
|
||||
<span className="text-subtext0 font-black mb-2">used</span>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<div className="flex justify-between text-[10px] font-black text-overlay2 uppercase mb-2">
|
||||
<span>{memoryPercent.toFixed(1)}% Utilized</span>
|
||||
<span>{formatBytes(stats.total_memory, 0)} Total</span>
|
||||
</div>
|
||||
<div className="h-3 bg-surface1/50 rounded-full overflow-hidden border border-surface2">
|
||||
<div className="h-full bg-gradient-to-r from-mauve to-pink transition-all duration-700 shadow-lg shadow-mauve/20" style={{ width: `${memoryPercent}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card bg-gradient-to-b from-surface0 to-base/50">
|
||||
<div className="card-title"><Database size={16} className="text-mauve" strokeWidth={3} /> Memory</div>
|
||||
<div className="flex items-end gap-2">
|
||||
<span className="stat-value text-mauve tabular-nums">{formatBytes(stats.mem_used)}</span>
|
||||
<span className="text-subtext0 font-black mb-2">used</span>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<div className="flex justify-between text-[10px] font-black text-overlay2 uppercase mb-2">
|
||||
<span>{memoryPercent.toFixed(1)}% Utilized</span>
|
||||
<span>{formatBytes(stats.mem_total, 0)} Total</span>
|
||||
</div>
|
||||
<div className="h-3 bg-surface1/50 rounded-full overflow-hidden border border-surface2">
|
||||
<div className="h-full bg-gradient-to-r from-mauve to-pink transition-all duration-700 shadow-lg shadow-mauve/20" style={{ width: `${memoryPercent}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card bg-gradient-to-b from-surface0 to-base/50">
|
||||
<div className="card-title"><Server size={16} className="text-green" strokeWidth={3} /> Tasks</div>
|
||||
<div className="flex items-end gap-2">
|
||||
<span className="stat-value text-green tabular-nums">{stats.processes.length}</span>
|
||||
<span className="text-subtext0 font-black mb-2">Processes</span>
|
||||
</div>
|
||||
<div className="mt-4 text-xs text-subtext1 font-medium leading-relaxed bg-base/30 p-3 rounded-xl border border-surface1">
|
||||
Live system feed. Target a process to profile its hierarchy in detail.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card bg-gradient-to-b from-surface0 to-base/50">
|
||||
<div className="card-title"><Server size={16} className="text-green" strokeWidth={3} /> Process Stack</div>
|
||||
<div className="flex items-end gap-2">
|
||||
<span className="stat-value text-green tabular-nums">{stats.process_count}</span>
|
||||
<span className="text-subtext0 font-black mb-2">Active</span>
|
||||
</div>
|
||||
<div className="mt-4 text-xs text-subtext1 font-medium leading-relaxed bg-base/30 p-3 rounded-xl border border-surface1">
|
||||
Deep hierarchical tracking enabled. Child process overhead is summed into parent totals.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card flex-1 flex flex-col min-h-0 overflow-hidden shadow-[0_35px_60px_-15px_rgba(0,0,0,0.5)] border border-surface1/50">
|
||||
<div className="flex justify-between items-center mb-6 px-2 shrink-0">
|
||||
<h3 className="text-xl font-black tracking-tighter uppercase italic flex items-center gap-2">
|
||||
<Activity size={24} className="text-red" strokeWidth={3} />
|
||||
Live Feed
|
||||
</h3>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="SEARCH PROCESS..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchBar(e.target.value)}
|
||||
className="bg-surface1/50 border border-surface2 rounded-xl px-4 py-2 text-xs font-bold text-text placeholder:text-overlay1 focus:outline-none focus:ring-2 focus:ring-blue/30 w-64 transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-[10px] bg-red/10 text-red border border-red/20 px-3 py-1.5 rounded-full font-black uppercase tracking-widest flex items-center gap-1.5">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-red animate-pulse" />
|
||||
Real-time
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card flex-1 flex flex-col min-h-0 overflow-hidden shadow-2xl border border-surface1/50">
|
||||
<div className="flex justify-between items-center mb-6 px-2 shrink-0">
|
||||
<h3 className="text-xl font-black tracking-tighter uppercase italic flex items-center gap-2">
|
||||
<Activity size={24} className="text-red" strokeWidth={3} />
|
||||
System Hierarchy
|
||||
</h3>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-overlay1" size={14} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="SEARCH HIERARCHY..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchBar(e.target.value)}
|
||||
className="bg-surface1/50 border border-surface2 rounded-xl pl-9 pr-4 py-2 text-xs font-bold text-text placeholder:text-overlay1 focus:outline-none focus:ring-2 focus:ring-blue/30 w-64 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-[1fr_80px_100px_120px_120px] gap-4 px-6 py-4 bg-surface1/50 rounded-2xl font-black uppercase tracking-widest text-[10px] text-overlay1 mb-2">
|
||||
<div>Process</div>
|
||||
<div className="text-right">PID</div>
|
||||
<div className="text-right">CPU %</div>
|
||||
<div className="text-right">Memory</div>
|
||||
<div className="text-center">Actions</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-[1fr_80px_100px_120px_80px] gap-4 px-6 py-4 bg-surface1/50 rounded-2xl font-black uppercase tracking-widest text-[10px] text-overlay1 mb-2">
|
||||
<div>Hierarchy</div>
|
||||
<div className="text-right">PID</div>
|
||||
<div className="text-right">Total CPU</div>
|
||||
<div className="text-right">Total RAM</div>
|
||||
<div className="text-center">Action</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-y-auto flex-1 custom-scrollbar px-2">
|
||||
{filteredLiveProcs.map((proc) => (
|
||||
<div
|
||||
key={proc.pid}
|
||||
className={cn(
|
||||
"grid grid-cols-[1fr_80px_100px_120px_120px] gap-4 px-4 py-4 border-b border-surface1/20 group hover:bg-surface1/20 transition-all rounded-xl cursor-pointer",
|
||||
pinnedPid === proc.pid ? "bg-blue/10 border-blue/30" : ""
|
||||
)}
|
||||
onClick={() => setPinnedPid(pinnedPid === proc.pid ? null : proc.pid)}
|
||||
>
|
||||
<div className="font-black text-text truncate text-sm flex items-center gap-3" title={proc.name}>
|
||||
<div className={cn(
|
||||
"w-2 h-2 rounded-full transition-colors",
|
||||
proc.is_syspulse ? "bg-mauve" : (pinnedPid === proc.pid ? "bg-blue" : "bg-surface2 group-hover:bg-blue")
|
||||
)} />
|
||||
{proc.name}
|
||||
</div>
|
||||
<div className="font-mono text-overlay2 text-xs text-right self-center">{proc.pid}</div>
|
||||
<div className="text-blue font-black text-sm text-right self-center tabular-nums">{proc.cpu_usage.toFixed(1)}%</div>
|
||||
<div className="text-mauve font-black text-sm text-right self-center tabular-nums">{formatBytes(proc.memory, 0)}</div>
|
||||
<div className="flex justify-center items-center gap-2">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); startTargeted(proc.pid); }}
|
||||
className="opacity-0 group-hover:opacity-100 p-2 hover:bg-blue/20 text-blue rounded-xl transition-all hover:scale-110 active:scale-90"
|
||||
title="Target Profile"
|
||||
>
|
||||
<Target size={16} strokeWidth={2.5} />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); killProcess(proc.pid); }}
|
||||
className="opacity-0 group-hover:opacity-100 p-2 hover:bg-red/20 text-red rounded-xl transition-all hover:scale-110 active:scale-90"
|
||||
title="Terminate"
|
||||
>
|
||||
<Shield size={16} strokeWidth={2.5} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="overflow-y-auto flex-1 custom-scrollbar px-2">
|
||||
{filteredTree.map(node => renderProcessNode(node))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,124 +0,0 @@
|
||||
import { X, AlertTriangle, CheckSquare } from 'lucide-react';
|
||||
import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from 'recharts';
|
||||
import { AggregatedProcess, ProfilingMode } from '../types';
|
||||
import { formatMB } from '../utils';
|
||||
|
||||
interface Props {
|
||||
selectedProcess: AggregatedProcess;
|
||||
mode: ProfilingMode;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function ProcessInspector({ selectedProcess, mode, onClose }: Props) {
|
||||
return (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-end bg-base/80 backdrop-blur-sm p-8 animate-in slide-in-from-right duration-300">
|
||||
<div className="w-full max-w-2xl h-full bg-mantle rounded-3xl border border-surface1 shadow-3xl flex flex-col overflow-hidden">
|
||||
<div className="p-8 border-b border-surface1 flex justify-between items-start shrink-0">
|
||||
<div>
|
||||
<div className="text-xs font-black text-blue uppercase tracking-widest mb-1">
|
||||
{mode === ProfilingMode.Targeted ? `Process Inspector (PID: ${selectedProcess.pid})` : "Application Cluster Inspector"}
|
||||
</div>
|
||||
<h2 className="text-3xl font-black text-text tracking-tighter uppercase italic truncate max-w-md">{selectedProcess.name}</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-surface1 rounded-full transition-colors"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-8 flex flex-col gap-8 custom-scrollbar">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-surface0 p-6 rounded-2xl border border-surface1 shadow-lg">
|
||||
<div className="text-[10px] font-black text-overlay2 uppercase tracking-widest mb-2">Total Avg CPU</div>
|
||||
<div className="text-4xl font-black text-text tabular-nums">
|
||||
{(mode === ProfilingMode.Targeted ? selectedProcess.inclusive_avg_cpu : selectedProcess.avg_cpu).toFixed(1)}%
|
||||
</div>
|
||||
<p className="text-xs text-subtext1 mt-2">Combined impact of this application.</p>
|
||||
</div>
|
||||
<div className="bg-surface0 p-6 rounded-2xl border border-surface1 shadow-lg">
|
||||
<div className="text-[10px] font-black text-overlay2 uppercase tracking-widest mb-2">Total Avg RAM</div>
|
||||
<div className="text-4xl font-black text-mauve tabular-nums">
|
||||
{formatMB(mode === ProfilingMode.Targeted ? selectedProcess.inclusive_avg_memory_mb : selectedProcess.avg_memory_mb)}
|
||||
</div>
|
||||
<p className="text-xs text-subtext1 mt-2">Proportional memory footprint.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card h-64 shrink-0 bg-base border border-surface1">
|
||||
<div className="card-title mb-4">Resource History (Summed)</div>
|
||||
<div className="flex-1 min-h-0">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={selectedProcess.history}>
|
||||
<defs>
|
||||
<linearGradient id="procCpuGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="var(--blue)" stopOpacity={0.6}/>
|
||||
<stop offset="95%" stopColor="var(--blue)" stopOpacity={0}/>
|
||||
</linearGradient>
|
||||
<linearGradient id="procMemGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="var(--mauve)" stopOpacity={0.4}/>
|
||||
<stop offset="95%" stopColor="var(--mauve)" stopOpacity={0}/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="var(--surface1)" vertical={false} opacity={0.3} />
|
||||
<XAxis dataKey="time" stroke="var(--subtext0)" tick={{fontSize: 9}} hide />
|
||||
<YAxis stroke="var(--subtext0)" tick={{fontSize: 9}} />
|
||||
<Tooltip
|
||||
contentStyle={{ background: 'var(--crust)', border: '1px solid var(--surface1)', borderRadius: '12px' }}
|
||||
formatter={(value: number, name: string) => {
|
||||
if (name === 'memory_mb') return [formatMB(value), 'RAM'];
|
||||
if (name === 'cpu_usage') return [`${value.toFixed(1)}%`, 'CPU'];
|
||||
return [value, name];
|
||||
}}
|
||||
/>
|
||||
<Area type="monotone" dataKey="cpu_usage" name="CPU %" stroke="var(--blue)" fill="url(#procCpuGrad)" strokeWidth={3} />
|
||||
<Area type="monotone" dataKey="memory_mb" name="Mem (PSS)" stroke="var(--mauve)" fill="url(#procMemGrad)" strokeWidth={2} />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-xs font-black text-overlay2 uppercase tracking-widest">Profiling Details</h4>
|
||||
<div className="bg-surface0 border border-surface1 rounded-2xl p-6 space-y-3">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-subtext1">Peak Recorded Load</span>
|
||||
<span className="font-black text-blue">{selectedProcess.peak_cpu.toFixed(1)}%</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-subtext1">Peak Recorded RAM</span>
|
||||
<span className="font-black text-mauve">{formatMB(selectedProcess.peak_memory_mb)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-subtext1">
|
||||
{mode === ProfilingMode.Targeted ? "Child Process Count" : "Active Instances Count"}
|
||||
</span>
|
||||
<span className="font-black text-green">
|
||||
{mode === ProfilingMode.Targeted ? selectedProcess.children.length : selectedProcess.instance_count}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-xs font-black text-overlay2 uppercase tracking-widest">Profiling Insights</h4>
|
||||
<div className="flex flex-col gap-2">
|
||||
{selectedProcess.warnings.length > 0 ? selectedProcess.warnings.map((w, idx) => (
|
||||
<div key={idx} className="bg-red/10 border border-red/20 p-4 rounded-xl flex items-center gap-3 text-red">
|
||||
<AlertTriangle size={20} />
|
||||
<span className="font-bold text-sm uppercase italic tracking-tight">{w}</span>
|
||||
</div>
|
||||
)) : (
|
||||
<div className="bg-green/10 border border-green/20 p-4 rounded-xl flex items-center gap-3 text-green">
|
||||
<CheckSquare size={20} />
|
||||
<span className="font-bold text-sm uppercase italic tracking-tight">Healthy Performance Profile</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,336 +0,0 @@
|
||||
import React, { useState, useMemo, Fragment } from 'react';
|
||||
import {
|
||||
Activity, Server, Play, AlertTriangle, ArrowLeft, Shield, Save, Eye, EyeOff
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid
|
||||
} from 'recharts';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { AggregatedProcess, ProfilingMode, ProfilingReport } from '../types';
|
||||
import { cn, formatBytes, formatMB, formatDuration } from '../utils';
|
||||
import { ProcessInspector } from './ProcessInspector';
|
||||
|
||||
interface Props {
|
||||
report: ProfilingReport;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
type SortField = 'name' | 'pid' | 'inclusive_avg_cpu' | 'peak_cpu' | 'inclusive_avg_memory_mb' | 'peak_memory_mb' | 'avg_cpu' | 'avg_memory_mb';
|
||||
|
||||
export function ReportView({ report, onBack }: Props) {
|
||||
const [sortField, setSortField] = useState<SortField>(report.mode === ProfilingMode.Targeted ? 'inclusive_avg_cpu' : 'avg_cpu');
|
||||
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
|
||||
const [selectedProcess, setSelectedProcess] = useState<AggregatedProcess | null>(null);
|
||||
const [hideProfiler, setHideProfiler] = useState(true);
|
||||
const [expandedNodes, setExpandedNodes] = useState<Set<number>>(new Set());
|
||||
|
||||
const toggleExpand = (pid: number) => {
|
||||
const newExpanded = new Set(expandedNodes);
|
||||
if (newExpanded.has(pid)) newExpanded.delete(pid);
|
||||
else newExpanded.add(pid);
|
||||
setExpandedNodes(newExpanded);
|
||||
};
|
||||
|
||||
const handleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortOrder('desc');
|
||||
}
|
||||
};
|
||||
|
||||
const filteredProcesses = useMemo(() => {
|
||||
return report.aggregated_processes.filter(p => !hideProfiler || !p.is_syspulse);
|
||||
}, [report, hideProfiler]);
|
||||
|
||||
const sortedProcesses = useMemo(() => {
|
||||
return [...filteredProcesses]
|
||||
.sort((a, b) => {
|
||||
const valA = a[sortField as keyof AggregatedProcess];
|
||||
const valB = b[sortField as keyof AggregatedProcess];
|
||||
|
||||
if (typeof valA === 'string' && typeof valB === 'string') {
|
||||
return sortOrder === 'asc' ? valA.localeCompare(valB) : valB.localeCompare(valA);
|
||||
}
|
||||
|
||||
const numA = (valA as number) ?? 0;
|
||||
const numB = (valB as number) ?? 0;
|
||||
|
||||
return sortOrder === 'asc' ? numA - numB : numB - numA;
|
||||
});
|
||||
}, [filteredProcesses, sortField, sortOrder]);
|
||||
|
||||
const reactiveTimeline = useMemo(() => {
|
||||
return report.timeline.map(p => ({
|
||||
...p,
|
||||
cpu: hideProfiler ? (p.cpu_total - p.cpu_profiler) : p.cpu_total,
|
||||
mem: hideProfiler ? (p.mem_total_gb - p.mem_profiler_gb) : p.mem_total_gb
|
||||
}));
|
||||
}, [report, hideProfiler]);
|
||||
|
||||
const summaryStats = useMemo(() => {
|
||||
if (report.mode === ProfilingMode.Targeted) {
|
||||
const root = sortedProcesses[0];
|
||||
if (root) {
|
||||
return { cpu: root.inclusive_avg_cpu, mem: root.inclusive_avg_memory_mb };
|
||||
}
|
||||
}
|
||||
const totalCpu = sortedProcesses.reduce((acc, p) => acc + p.avg_cpu, 0);
|
||||
const totalMem = sortedProcesses.reduce((acc, p) => acc + p.avg_memory_mb, 0);
|
||||
return { cpu: totalCpu, mem: totalMem };
|
||||
}, [sortedProcesses, report.mode]);
|
||||
|
||||
const saveReport = async () => {
|
||||
try {
|
||||
const path = await invoke<string>('save_report', { report });
|
||||
alert(`Report saved to: ${path}`);
|
||||
} catch (e) {
|
||||
alert(`Failed to save: ${e}`);
|
||||
}
|
||||
};
|
||||
|
||||
const renderTreeRows = (nodes: AggregatedProcess[], depth = 0): React.ReactNode => {
|
||||
return nodes.map((proc) => {
|
||||
const isExpanded = expandedNodes.has(proc.pid);
|
||||
const hasChildren = proc.children && proc.children.length > 0;
|
||||
|
||||
return (
|
||||
<Fragment key={proc.pid}>
|
||||
<div
|
||||
className="grid grid-cols-[1fr_80px_100px_100px_100px_100px_200px] gap-4 px-4 py-3 border-b border-surface1/20 hover:bg-surface1/20 cursor-pointer transition-all rounded-xl group relative"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedProcess(proc);
|
||||
}}
|
||||
>
|
||||
<div className="font-black text-text truncate text-sm flex items-center gap-2 group-hover:text-blue transition-colors" style={{ paddingLeft: depth * 20 }}>
|
||||
{hasChildren ? (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleExpand(proc.pid);
|
||||
}}
|
||||
className="p-1 hover:bg-surface2 rounded transition-colors"
|
||||
>
|
||||
<Play size={10} className={cn("transition-transform duration-200 fill-current", isExpanded ? "rotate-90" : "")} />
|
||||
</button>
|
||||
) : (
|
||||
<div className="w-4" />
|
||||
)}
|
||||
<div className={cn(
|
||||
"w-2 h-2 rounded-full shrink-0",
|
||||
proc.is_syspulse ? "bg-mauve" : "bg-surface2 group-hover:bg-blue"
|
||||
)} />
|
||||
<span title={proc.name}>{proc.name}</span>
|
||||
</div>
|
||||
|
||||
<div className="text-overlay2 font-mono text-xs text-right self-center tabular-nums">{proc.pid}</div>
|
||||
|
||||
<div className="text-blue font-black text-sm text-right self-center tabular-nums">
|
||||
{proc.inclusive_avg_cpu.toFixed(1)}%
|
||||
{proc.children.length > 0 && <span className="block text-[9px] text-overlay1 font-normal">({proc.avg_cpu.toFixed(1)}% self)</span>}
|
||||
</div>
|
||||
|
||||
<div className="text-subtext0 text-[11px] font-bold text-right self-center tabular-nums">{proc.peak_cpu.toFixed(1)}%</div>
|
||||
|
||||
<div className="text-mauve font-black text-sm text-right self-center tabular-nums">
|
||||
{formatMB(proc.inclusive_avg_memory_mb)}
|
||||
{proc.children.length > 0 && <span className="block text-[9px] text-overlay1 font-normal">({formatMB(proc.avg_memory_mb)} self)</span>}
|
||||
</div>
|
||||
|
||||
<div className="text-subtext0 text-[11px] font-bold text-right self-center tabular-nums">{formatMB(proc.peak_memory_mb, 0)}</div>
|
||||
|
||||
<div className="flex flex-wrap gap-1.5 pl-4 items-center">
|
||||
{proc.warnings.length > 0 ? proc.warnings.map((w, idx) => (
|
||||
<span key={idx} className="bg-red/10 text-red text-[9px] font-black px-2 py-1 rounded-lg border border-red/20 flex items-center gap-1 uppercase tracking-tighter">
|
||||
<AlertTriangle size={8} strokeWidth={3} /> {w}
|
||||
</span>
|
||||
)) : (
|
||||
proc.children.length > 0 ? <span className="text-[10px] text-overlay1 font-bold uppercase tracking-widest">{proc.children.length} units</span> : null
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{hasChildren && isExpanded && renderTreeRows(
|
||||
proc.children.filter(c => !hideProfiler || !c.is_syspulse),
|
||||
depth + 1
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen bg-base text-text">
|
||||
<div className="titlebar shrink-0">
|
||||
<div className="titlebar-drag gap-2 px-4">
|
||||
<div className="w-7 h-7 rounded-xl bg-gradient-to-br from-mauve via-blue to-teal flex items-center justify-center shadow-xl shadow-mauve/20 border border-white/10">
|
||||
<Activity size={16} className="text-base" strokeWidth={3} />
|
||||
</div>
|
||||
<span className="font-black tracking-tighter uppercase italic text-xl">
|
||||
{report.mode === ProfilingMode.Targeted ? `Target: ${report.target_name || "Process"}` : "Global Report"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-4 px-4">
|
||||
<button
|
||||
onClick={() => setHideProfiler(!hideProfiler)}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-4 py-1.5 border rounded-xl text-xs font-black transition-all uppercase tracking-widest",
|
||||
hideProfiler
|
||||
? "bg-blue/10 border-blue/30 text-blue hover:bg-blue/20"
|
||||
: "bg-surface1/50 border-surface2 text-subtext0 hover:text-text"
|
||||
)}
|
||||
>
|
||||
{hideProfiler ? <EyeOff size={14} /> : <Eye size={14} />} {hideProfiler ? "SHOW PROFILER" : "HIDE PROFILER"}
|
||||
</button>
|
||||
<button
|
||||
onClick={saveReport}
|
||||
className="flex items-center gap-2 px-4 py-1.5 bg-surface1/50 hover:bg-surface1 border border-surface2 rounded-xl text-xs font-black transition-all text-text uppercase tracking-widest"
|
||||
>
|
||||
<Save size={14} className="text-blue" /> SAVE JSON
|
||||
</button>
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="flex items-center gap-2 px-4 py-1.5 bg-mauve/10 hover:bg-mauve/20 border border-mauve/30 rounded-xl text-xs font-black transition-all text-mauve uppercase tracking-widest"
|
||||
>
|
||||
<ArrowLeft size={14} /> DASHBOARD
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main className="flex-1 overflow-y-auto p-6 flex flex-col gap-6 custom-scrollbar relative">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 shrink-0">
|
||||
<div className="bg-surface0 p-6 rounded-2xl border border-surface1 shadow-xl text-center group hover:border-mauve/30 transition-colors">
|
||||
<div className="text-[10px] font-black text-overlay2 uppercase tracking-widest mb-1">Session Duration</div>
|
||||
<div className="text-2xl font-black text-text font-mono tabular-nums">{formatDuration(report.duration_seconds)}</div>
|
||||
</div>
|
||||
<div className="bg-surface0 p-6 rounded-2xl border border-surface1 shadow-xl text-center group hover:border-blue/30 transition-colors">
|
||||
<div className="text-[10px] font-black text-overlay2 uppercase tracking-widest mb-1">Impact Avg CPU</div>
|
||||
<div className="text-2xl font-black text-blue tabular-nums">{summaryStats.cpu.toFixed(1)}%</div>
|
||||
</div>
|
||||
<div className="bg-surface0 p-6 rounded-2xl border border-surface1 shadow-xl text-center group hover:border-green/30 transition-colors">
|
||||
<div className="text-[10px] font-black text-overlay2 uppercase tracking-widest mb-1">Impact Avg RAM</div>
|
||||
<div className="text-2xl font-black text-mauve tabular-nums">{formatMB(summaryStats.mem)}</div>
|
||||
</div>
|
||||
<div className="bg-surface0 p-6 rounded-2xl border border-surface1 shadow-xl text-center group hover:border-red/30 transition-colors">
|
||||
<div className="text-[10px] font-black text-overlay2 uppercase tracking-widest mb-1">Issue Alerts</div>
|
||||
<div className="text-2xl font-black text-red tabular-nums">
|
||||
{filteredProcesses.filter(p => p.warnings.length > 0).length}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card h-72 border border-surface1/50 shadow-2xl bg-gradient-to-b from-surface0 to-base/50">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-sm font-black uppercase italic tracking-widest flex items-center gap-2">
|
||||
<Activity size={16} className="text-blue" strokeWidth={3} /> {hideProfiler ? "Reactive Analysis Profile (Profiler Hidden)" : "Full System Load Profile"}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex-1 min-h-0">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={reactiveTimeline}>
|
||||
<defs>
|
||||
<linearGradient id="cpuReportGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="var(--blue)" stopOpacity={0.6}/>
|
||||
<stop offset="95%" stopColor="var(--blue)" stopOpacity={0}/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="var(--surface1)" vertical={false} opacity={0.5} />
|
||||
<XAxis dataKey="time" stroke="var(--subtext0)" tick={{fontSize: 9}} minTickGap={50} />
|
||||
<YAxis stroke="var(--subtext0)" tick={{fontSize: 9}} />
|
||||
<Tooltip
|
||||
contentStyle={{ background: 'var(--mantle)', border: '1px solid var(--surface1)', borderRadius: '12px', fontSize: '11px', fontWeight: 'bold' }}
|
||||
itemStyle={{ color: 'var(--text)' }}
|
||||
formatter={(value: number, name: string) => {
|
||||
if (name === 'mem') return [formatBytes(value * 1024 * 1024 * 1024), 'RAM'];
|
||||
if (name === 'cpu') return [`${value.toFixed(1)}%`, 'CPU'];
|
||||
return [value, name];
|
||||
}}
|
||||
/>
|
||||
<Area type="monotone" dataKey="cpu" name="CPU %" stroke="var(--blue)" fill="url(#cpuReportGradient)" strokeWidth={3} isAnimationActive={true} />
|
||||
<Area type="monotone" dataKey="mem" name="MEM GB" stroke="var(--mauve)" fill="none" strokeWidth={2} />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card flex-1 flex flex-col min-h-0 border border-surface1/50 shadow-[0_35px_60px_-15px_rgba(0,0,0,0.5)] overflow-hidden">
|
||||
<div className="flex justify-between items-center mb-6 px-2">
|
||||
<h3 className="text-xl font-black tracking-tighter uppercase italic flex items-center gap-2">
|
||||
<Server size={24} className="text-green" strokeWidth={3} /> {report.mode === ProfilingMode.Targeted ? "Hierarchical Analysis" : "Aggregated Resource Matrix"}
|
||||
</h3>
|
||||
<div className="flex items-center gap-4">
|
||||
{report.mode === ProfilingMode.Targeted && (
|
||||
<div className="flex items-center gap-1.5 text-[9px] font-bold text-overlay1 uppercase">
|
||||
<div className="w-2 h-2 rounded-full bg-blue/40" /> Inclusive Sum
|
||||
</div>
|
||||
)}
|
||||
<span className="text-[10px] bg-surface1 px-3 py-1.5 rounded-full font-black text-overlay1 uppercase tracking-widest">
|
||||
{report.mode === ProfilingMode.Targeted ? "Toggle Nodes to Expand" : "Grouped by Application Name"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-[1fr_80px_100px_100px_100px_100px_200px] gap-4 px-6 py-4 bg-surface1/50 rounded-2xl font-black uppercase tracking-widest text-[10px] text-overlay1 mb-2">
|
||||
<div className="cursor-pointer hover:text-text transition-colors flex items-center gap-1" onClick={() => handleSort('name')}>
|
||||
Process {sortField === 'name' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</div>
|
||||
<div className="text-right cursor-pointer hover:text-text transition-colors" onClick={() => handleSort('pid')}>
|
||||
{report.mode === ProfilingMode.Targeted ? "PID" : "Units"}
|
||||
</div>
|
||||
<div className="text-right cursor-pointer hover:text-text transition-colors" onClick={() => handleSort(report.mode === ProfilingMode.Targeted ? 'inclusive_avg_cpu' : 'avg_cpu')}>Avg CPU</div>
|
||||
<div className="text-right cursor-pointer hover:text-text transition-colors" onClick={() => handleSort('peak_cpu')}>Peak</div>
|
||||
<div className="text-right cursor-pointer hover:text-text transition-colors" onClick={() => handleSort(report.mode === ProfilingMode.Targeted ? 'inclusive_avg_memory_mb' : 'avg_memory_mb')}>Avg Mem</div>
|
||||
<div className="text-right cursor-pointer hover:text-text transition-colors" onClick={() => handleSort('peak_memory_mb')}>Peak</div>
|
||||
<div className="pl-4">Insights</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-y-auto flex-1 custom-scrollbar px-2">
|
||||
{report.mode === ProfilingMode.Targeted ? renderTreeRows(sortedProcesses) : sortedProcesses.map((proc, i) => (
|
||||
<div
|
||||
key={i}
|
||||
onClick={() => setSelectedProcess(proc)}
|
||||
className="grid grid-cols-[1fr_80px_100px_100px_100px_100px_200px] gap-4 px-4 py-4 border-b border-surface1/20 hover:bg-surface1/20 cursor-pointer transition-all rounded-xl group"
|
||||
>
|
||||
<div className="font-black text-text truncate text-sm flex items-center gap-3 group-hover:text-blue transition-colors" title={proc.name}>
|
||||
<div className={cn(
|
||||
"w-2 h-2 rounded-full shrink-0",
|
||||
proc.is_syspulse ? "bg-mauve" : "bg-surface2 group-hover:bg-blue"
|
||||
)} />
|
||||
{proc.name}
|
||||
</div>
|
||||
<div className="text-overlay2 font-mono text-xs text-right self-center tabular-nums">{proc.instance_count}</div>
|
||||
<div className="text-blue font-black text-sm text-right self-center tabular-nums">{proc.avg_cpu.toFixed(1)}%</div>
|
||||
<div className="text-subtext0 text-[11px] font-bold text-right self-center tabular-nums">{proc.peak_cpu.toFixed(1)}%</div>
|
||||
<div className="text-mauve font-black text-sm text-right self-center tabular-nums">{formatMB(proc.avg_memory_mb)}</div>
|
||||
<div className="text-subtext0 text-[11px] font-bold text-right self-center tabular-nums">{formatMB(proc.peak_memory_mb, 0)}</div>
|
||||
<div className="flex flex-wrap gap-1.5 pl-4 items-center">
|
||||
{proc.warnings.length > 0 ? proc.warnings.map((w, idx) => (
|
||||
<span key={idx} className="bg-red/10 text-red text-[9px] font-black px-2 py-1 rounded-lg border border-red/20 flex items-center gap-1 uppercase tracking-tighter">
|
||||
<AlertTriangle size={8} strokeWidth={3} /> {w}
|
||||
</span>
|
||||
)) : (
|
||||
<span className="text-[10px] text-green/40 font-black uppercase italic tracking-tighter">Healthy Cluster</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-surface0/50 border-t border-surface1 text-[9px] text-overlay1 font-medium italic flex items-center gap-2">
|
||||
<Shield size={10} className="text-blue" />
|
||||
<span>Real Memory (PSS) used for accuracy. Global mode aggregates processes by application name for performance.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedProcess && (
|
||||
<ProcessInspector
|
||||
selectedProcess={selectedProcess}
|
||||
mode={report.mode}
|
||||
onClose={() => setSelectedProcess(null)}
|
||||
/>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,63 +1,17 @@
|
||||
export enum ProfilingMode {
|
||||
Global = "Global",
|
||||
Targeted = "Targeted"
|
||||
}
|
||||
|
||||
export interface ProcessStats {
|
||||
export interface ProcessNode {
|
||||
pid: number;
|
||||
name: string;
|
||||
cpu_usage: number;
|
||||
memory: number;
|
||||
status: string;
|
||||
user_id?: string;
|
||||
is_syspulse: boolean;
|
||||
cpu_self: number;
|
||||
cpu_children: number;
|
||||
mem_rss: number;
|
||||
mem_children: number;
|
||||
children: ProcessNode[];
|
||||
}
|
||||
|
||||
export interface SystemStats {
|
||||
cpu_usage: number[];
|
||||
total_memory: number;
|
||||
used_memory: number;
|
||||
processes: ProcessStats[];
|
||||
is_recording: boolean;
|
||||
recording_duration: number;
|
||||
}
|
||||
|
||||
export interface TimelinePoint {
|
||||
time: string;
|
||||
export interface GlobalStats {
|
||||
cpu_total: number;
|
||||
mem_total_gb: number;
|
||||
cpu_profiler: number;
|
||||
mem_profiler_gb: number;
|
||||
}
|
||||
|
||||
export interface ProcessHistoryPoint {
|
||||
time: string;
|
||||
cpu_usage: number;
|
||||
memory_mb: number;
|
||||
}
|
||||
|
||||
export interface AggregatedProcess {
|
||||
pid: number;
|
||||
name: string;
|
||||
avg_cpu: number;
|
||||
peak_cpu: number;
|
||||
avg_memory_mb: number;
|
||||
peak_memory_mb: number;
|
||||
inclusive_avg_cpu: number;
|
||||
inclusive_avg_memory_mb: number;
|
||||
instance_count: number;
|
||||
warnings: string[];
|
||||
history: ProcessHistoryPoint[];
|
||||
is_syspulse: boolean;
|
||||
children: AggregatedProcess[];
|
||||
}
|
||||
|
||||
export interface ProfilingReport {
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
duration_seconds: number;
|
||||
mode: ProfilingMode;
|
||||
target_name?: string;
|
||||
timeline: TimelinePoint[];
|
||||
aggregated_processes: AggregatedProcess[];
|
||||
mem_used: number;
|
||||
mem_total: number;
|
||||
process_tree: ProcessNode[];
|
||||
process_count: number;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user