537 lines
28 KiB
TypeScript
537 lines
28 KiB
TypeScript
import { useState, useEffect, useMemo } from 'react';
|
|
import { invoke } from '@tauri-apps/api/core';
|
|
import {
|
|
AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer,
|
|
CartesianGrid
|
|
} from 'recharts';
|
|
import {
|
|
Activity, Cpu, Server, Database, Play, Square,
|
|
AlertTriangle, ArrowLeft, Shield, CheckSquare, Square as SquareIcon, Save, X
|
|
} from 'lucide-react';
|
|
import { clsx } from 'clsx';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
// --- Types ---
|
|
|
|
interface ProcessStats {
|
|
pid: number;
|
|
name: string;
|
|
cpu_usage: number;
|
|
memory: number;
|
|
status: string;
|
|
user_id?: string;
|
|
}
|
|
|
|
interface SystemStats {
|
|
cpu_usage: number[];
|
|
total_memory: number;
|
|
used_memory: number;
|
|
processes: ProcessStats[];
|
|
is_recording: boolean;
|
|
recording_duration: number;
|
|
}
|
|
|
|
interface TimelinePoint {
|
|
time: string;
|
|
avg_cpu: number;
|
|
memory_gb: number;
|
|
}
|
|
|
|
interface ProcessHistoryPoint {
|
|
time: string;
|
|
cpu_usage: number;
|
|
memory_mb: number;
|
|
}
|
|
|
|
interface AggregatedProcess {
|
|
name: string;
|
|
avg_cpu: number;
|
|
peak_cpu: number;
|
|
avg_memory_mb: number;
|
|
peak_memory_mb: number;
|
|
instance_count: number;
|
|
warnings: string[];
|
|
history: ProcessHistoryPoint[];
|
|
}
|
|
|
|
interface ProfilingReport {
|
|
start_time: string;
|
|
end_time: string;
|
|
duration_seconds: number;
|
|
timeline: TimelinePoint[];
|
|
aggregated_processes: AggregatedProcess[];
|
|
}
|
|
|
|
function cn(...inputs: (string | undefined | null | false)[]) {
|
|
return twMerge(clsx(inputs));
|
|
}
|
|
|
|
function App() {
|
|
const [view, setView] = useState<'dashboard' | 'report'>('dashboard');
|
|
const [stats, setStats] = useState<SystemStats | null>(null);
|
|
const [history, setHistory] = useState<{ time: string; cpu: number }[]>([]);
|
|
const [excludeSelf, setExcludeSelf] = useState(true);
|
|
const [report, setReport] = useState<ProfilingReport | null>(null);
|
|
|
|
useEffect(() => {
|
|
const fetchStats = async () => {
|
|
try {
|
|
const isRecording = stats?.is_recording ?? false;
|
|
const data = await invoke<SystemStats>('get_system_stats', {
|
|
excludeSelf,
|
|
minimal: isRecording || view === 'report'
|
|
});
|
|
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 }];
|
|
if (newHistory.length > 60) newHistory.shift();
|
|
return newHistory;
|
|
});
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
};
|
|
|
|
fetchStats();
|
|
const interval = setInterval(fetchStats, 1000);
|
|
return () => clearInterval(interval);
|
|
}, [excludeSelf, 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');
|
|
}
|
|
};
|
|
|
|
const killProcess = async (pid: number) => {
|
|
try {
|
|
await invoke('run_as_admin', { command: `kill -9 ${pid}` });
|
|
} catch (e) {
|
|
alert(`Failed to kill process: ${e}`);
|
|
}
|
|
};
|
|
|
|
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">Loading System Data...</div>;
|
|
|
|
const avgCpu = stats.cpu_usage.reduce((a, b) => a + b, 0) / stats.cpu_usage.length;
|
|
const memoryPercent = (stats.used_memory / stats.total_memory) * 100;
|
|
|
|
return (
|
|
<div className="flex flex-col h-screen bg-base text-text">
|
|
<div data-tauri-drag-region className="titlebar shrink-0">
|
|
<div className="titlebar-drag gap-2 px-4" data-tauri-drag-region>
|
|
<Activity size={16} className="text-mauve" />
|
|
<span className="font-bold tracking-tight">SysPulse</span>
|
|
</div>
|
|
<div className="flex items-center gap-4 px-4">
|
|
<button
|
|
className="flex items-center gap-2 text-subtext0 hover:text-text transition-colors text-xs"
|
|
onClick={() => setExcludeSelf(!excludeSelf)}
|
|
>
|
|
{excludeSelf ? <CheckSquare size={14} className="text-blue" /> : <SquareIcon size={14} />}
|
|
<span>Hide SysPulse</span>
|
|
</button>
|
|
<button
|
|
className={cn(
|
|
"flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-bold transition-all shadow-lg",
|
|
stats.is_recording
|
|
? "bg-red text-base animate-pulse"
|
|
: "bg-green text-base hover:scale-105 active:scale-95"
|
|
)}
|
|
onClick={toggleRecording}
|
|
>
|
|
{stats.is_recording ? <Square size={12} fill="currentColor" /> : <Play size={12} fill="currentColor" />}
|
|
{stats.is_recording ? `STOP (${formatDuration(stats.recording_duration)})` : "RECORD PROFILE"}
|
|
</button>
|
|
</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-full border-4 border-red/30 shadow-2xl">
|
|
<Activity size={64} className="text-red animate-pulse" />
|
|
</div>
|
|
</div>
|
|
<div className="text-center space-y-2">
|
|
<h2 className="text-3xl font-black text-text tracking-tighter uppercase italic">Profiling Active</h2>
|
|
<p className="text-subtext1 font-mono text-xl">{formatDuration(stats.recording_duration)}</p>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4 w-full max-w-md">
|
|
<div className="bg-surface0 p-4 rounded-2xl border border-surface1">
|
|
<div className="text-xs font-bold text-subtext0 mb-1 uppercase tracking-widest">CPU</div>
|
|
<div className="text-2xl font-black text-blue">{avgCpu.toFixed(1)}%</div>
|
|
</div>
|
|
<div className="bg-surface0 p-4 rounded-2xl border border-surface1">
|
|
<div className="text-xs font-bold text-subtext0 mb-1 uppercase tracking-widest">RAM</div>
|
|
<div className="text-2xl font-black text-mauve">{memoryPercent.toFixed(1)}%</div>
|
|
</div>
|
|
</div>
|
|
<p className="text-overlay1 text-sm italic">Minimal footprint mode enabled to ensure accurate results.</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 shrink-0">
|
|
<div className="card group">
|
|
<div className="card-title"><Cpu size={16} className="text-blue" /> CPU Load</div>
|
|
<div className="flex items-end gap-2">
|
|
<span className="stat-value text-blue">{avgCpu.toFixed(1)}</span>
|
|
<span className="text-subtext0 font-bold 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={2} isAnimationActive={false} />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card">
|
|
<div className="card-title"><Database size={16} className="text-mauve" /> Memory</div>
|
|
<div className="flex items-end gap-2">
|
|
<span className="stat-value text-mauve">{(stats.used_memory / 1024 / 1024 / 1024).toFixed(1)}</span>
|
|
<span className="text-subtext0 font-bold mb-2">GB used</span>
|
|
</div>
|
|
<div className="mt-6">
|
|
<div className="flex justify-between text-[10px] font-bold text-overlay2 uppercase mb-1">
|
|
<span>{memoryPercent.toFixed(1)}%</span>
|
|
<span>{(stats.total_memory / 1024 / 1024 / 1024).toFixed(0)} GB</span>
|
|
</div>
|
|
<div className="h-2 bg-surface1 rounded-full overflow-hidden">
|
|
<div className="h-full bg-mauve transition-all duration-700" style={{ width: `${memoryPercent}%` }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card">
|
|
<div className="card-title"><Server size={16} className="text-green" /> Tasks</div>
|
|
<div className="flex items-end gap-2">
|
|
<span className="stat-value text-green">{stats.processes.length}</span>
|
|
<span className="text-subtext0 font-bold mb-2">active</span>
|
|
</div>
|
|
<div className="mt-4 text-xs text-overlay2 font-medium leading-relaxed">
|
|
Profiling will merge child processes into their parents for consolidated analysis.
|
|
</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">
|
|
<h3 className="text-lg font-black tracking-tighter uppercase italic flex items-center gap-2">
|
|
<Activity size={20} className="text-red" />
|
|
Live Process Feed
|
|
</h3>
|
|
<div className="text-[10px] bg-surface1 px-2 py-1 rounded font-bold text-overlay2 uppercase">Top 50 Consumers</div>
|
|
</div>
|
|
|
|
<div className="table-header grid grid-cols-[4fr_1fr_1.5fr_1.5fr_0.5fr] gap-4 px-4 py-3 bg-surface1/30 rounded-t-xl">
|
|
<div>Name</div>
|
|
<div>PID</div>
|
|
<div>CPU</div>
|
|
<div>Memory</div>
|
|
<div className="text-center">Action</div>
|
|
</div>
|
|
|
|
<div className="overflow-y-auto flex-1 custom-scrollbar">
|
|
{stats.processes.map((proc) => (
|
|
<div key={proc.pid} className="table-row grid grid-cols-[4fr_1fr_1.5fr_1.5fr_0.5fr] gap-4 px-4 py-3 border-b border-surface1/30 group hover:bg-surface1/20 transition-all">
|
|
<div className="font-bold text-text truncate text-sm" title={proc.name}>{proc.name}</div>
|
|
<div className="font-mono text-overlay1 text-xs mt-1">{proc.pid}</div>
|
|
<div className="text-blue font-black text-sm">{proc.cpu_usage.toFixed(1)}%</div>
|
|
<div className="text-mauve font-black text-sm">{(proc.memory / 1024 / 1024).toFixed(0)} MB</div>
|
|
<div className="flex justify-center">
|
|
<button
|
|
onClick={() => killProcess(proc.pid)}
|
|
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>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type SortField = 'name' | 'avg_cpu' | 'peak_cpu' | 'avg_memory_mb' | 'peak_memory_mb' | 'instance_count';
|
|
|
|
function ReportView({ report, onBack }: { report: ProfilingReport, onBack: () => void }) {
|
|
const [sortField, setSortField] = useState<SortField>('avg_cpu');
|
|
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
|
|
const [selectedProcess, setSelectedProcess] = useState<AggregatedProcess | null>(null);
|
|
|
|
const handleSort = (field: SortField) => {
|
|
if (sortField === field) {
|
|
setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
|
|
} else {
|
|
setSortField(field);
|
|
setSortOrder('desc');
|
|
}
|
|
};
|
|
|
|
const sortedProcesses = useMemo(() => {
|
|
return [...report.aggregated_processes].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;
|
|
});
|
|
}, [report, sortField, sortOrder]);
|
|
|
|
const saveReport = async () => {
|
|
try {
|
|
const path = await invoke<string>('save_report', { report });
|
|
alert(`Report saved to: ${path}`);
|
|
} catch (e) {
|
|
alert(`Failed to save: ${e}`);
|
|
}
|
|
};
|
|
|
|
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">
|
|
<Activity size={16} className="text-mauve" />
|
|
<span className="font-bold uppercase italic tracking-tighter">Profiling Report</span>
|
|
</div>
|
|
<div className="flex gap-4 px-4">
|
|
<button
|
|
onClick={saveReport}
|
|
className="flex items-center gap-2 px-3 py-1 bg-surface1 hover:bg-surface2 rounded text-xs font-bold transition-all text-text"
|
|
>
|
|
<Save size={14} className="text-blue" /> SAVE JSON
|
|
</button>
|
|
<button
|
|
onClick={onBack}
|
|
className="flex items-center gap-2 px-3 py-1 bg-surface1 hover:bg-surface2 rounded text-xs font-bold transition-all text-text"
|
|
>
|
|
<ArrowLeft size={14} className="text-mauve" /> 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">
|
|
<div className="text-[10px] font-black text-overlay2 uppercase tracking-widest mb-1">Session Time</div>
|
|
<div className="text-2xl font-black text-text font-mono">{formatDuration(report.duration_seconds)}</div>
|
|
</div>
|
|
<div className="bg-surface0 p-6 rounded-2xl border border-surface1 shadow-xl text-center">
|
|
<div className="text-[10px] font-black text-overlay2 uppercase tracking-widest mb-1">End of Session</div>
|
|
<div className="text-xl font-bold text-text">{new Date(report.end_time).toLocaleTimeString()}</div>
|
|
</div>
|
|
<div className="bg-surface0 p-6 rounded-2xl border border-surface1 shadow-xl text-center">
|
|
<div className="text-[10px] font-black text-overlay2 uppercase tracking-widest mb-1">Uniques</div>
|
|
<div className="text-2xl font-black text-blue">{report.aggregated_processes.length}</div>
|
|
</div>
|
|
<div className="bg-surface0 p-6 rounded-2xl border border-surface1 shadow-xl text-center">
|
|
<div className="text-[10px] font-black text-overlay2 uppercase tracking-widest mb-1">Issue Alerts</div>
|
|
<div className="text-2xl font-black text-red">
|
|
{report.aggregated_processes.filter(p => p.warnings.length > 0).length}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card h-72 border border-surface1/50 shadow-2xl">
|
|
<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" /> Session Load Profile
|
|
</h3>
|
|
</div>
|
|
<div className="flex-1 min-h-0">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart data={report.timeline}>
|
|
<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' }}
|
|
itemStyle={{ color: 'var(--text)' }}
|
|
/>
|
|
<Area type="monotone" dataKey="avg_cpu" name="CPU %" stroke="var(--blue)" fill="url(#cpuReportGradient)" strokeWidth={3} isAnimationActive={true} />
|
|
<Area type="monotone" dataKey="memory_gb" 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-2xl overflow-hidden">
|
|
<div className="flex justify-between items-center mb-6 px-2">
|
|
<h3 className="text-lg font-black tracking-tighter uppercase italic flex items-center gap-2">
|
|
<Server size={20} className="text-green" /> Analysis Matrix
|
|
</h3>
|
|
<span className="text-[10px] text-overlay1 font-bold">CLICK PROCESS TO INSPECT</span>
|
|
</div>
|
|
|
|
<div className="table-header grid grid-cols-[2fr_0.8fr_1fr_1fr_1fr_1fr_2fr] gap-2 px-4 py-3 bg-surface1/30 rounded-t-xl font-bold uppercase tracking-widest text-[9px] text-overlay1">
|
|
<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="cursor-pointer hover:text-text transition-colors" onClick={() => handleSort('instance_count')}>Units</div>
|
|
<div className="cursor-pointer hover:text-text transition-colors" onClick={() => handleSort('avg_cpu')}>Avg CPU</div>
|
|
<div className="cursor-pointer hover:text-text transition-colors" onClick={() => handleSort('peak_cpu')}>Peak CPU</div>
|
|
<div className="cursor-pointer hover:text-text transition-colors" onClick={() => handleSort('avg_memory_mb')}>Avg Mem</div>
|
|
<div className="cursor-pointer hover:text-text transition-colors" onClick={() => handleSort('peak_memory_mb')}>Peak Mem</div>
|
|
<div>Insights</div>
|
|
</div>
|
|
|
|
<div className="overflow-y-auto flex-1 custom-scrollbar">
|
|
{sortedProcesses.map((proc, i) => (
|
|
<div
|
|
key={i}
|
|
onClick={() => setSelectedProcess(proc)}
|
|
className="table-row grid grid-cols-[2fr_0.8fr_1fr_1fr_1fr_1fr_2fr] gap-2 px-4 py-3 border-b border-surface1/20 hover:bg-surface1/30 cursor-pointer transition-colors group"
|
|
>
|
|
<div className="font-bold text-text truncate text-xs group-hover:text-blue" title={proc.name}>{proc.name}</div>
|
|
<div className="text-overlay1 font-mono text-xs">{proc.instance_count}</div>
|
|
<div className="text-blue font-black text-xs">{proc.avg_cpu.toFixed(1)}%</div>
|
|
<div className="text-subtext0 text-[10px] font-bold">{proc.peak_cpu.toFixed(1)}%</div>
|
|
<div className="text-mauve font-black text-xs">{proc.avg_memory_mb.toFixed(0)}MB</div>
|
|
<div className="text-subtext0 text-[10px] font-bold">{proc.peak_memory_mb.toFixed(0)}MB</div>
|
|
<div className="flex flex-wrap gap-1">
|
|
{proc.warnings.map((w, idx) => (
|
|
<span key={idx} className="bg-red/10 text-red text-[9px] font-black px-1.5 py-0.5 rounded-full border border-red/20 flex items-center gap-1 uppercase tracking-tighter">
|
|
<AlertTriangle size={8} /> {w}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Process Detail Side Panel/Modal */}
|
|
{selectedProcess && (
|
|
<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">Process Inspector</div>
|
|
<h2 className="text-3xl font-black text-text tracking-tighter uppercase italic truncate max-w-md">{selectedProcess.name}</h2>
|
|
</div>
|
|
<button
|
|
onClick={() => setSelectedProcess(null)}
|
|
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">Instances Detected</div>
|
|
<div className="text-4xl font-black text-text">{selectedProcess.instance_count}</div>
|
|
<p className="text-xs text-subtext1 mt-2">Maximum concurrent processes seen with this name.</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">Average Impact</div>
|
|
<div className="text-4xl font-black text-blue">{selectedProcess.avg_cpu.toFixed(1)}%</div>
|
|
<p className="text-xs text-subtext1 mt-2">Mean CPU usage across the entire session.</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' }}
|
|
/>
|
|
<Area type="monotone" dataKey="cpu_usage" name="Total CPU %" stroke="var(--blue)" fill="url(#procCpuGrad)" strokeWidth={3} />
|
|
<Area type="monotone" dataKey="memory_mb" name="Total Mem (MB)" 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 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">Optimal Performance Profile</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function formatDuration(seconds: number) {
|
|
const m = Math.floor(seconds / 60);
|
|
const s = Math.floor(seconds % 60);
|
|
return `${m}:${s.toString().padStart(2, '0')}`;
|
|
}
|
|
|
|
export default App;
|