mirror of
https://github.com/kunkunsh/kunkun-ext-neohtop.git
synced 2025-04-04 09:46:43 +00:00
adds environ, root, vram, run_time, start_time, disk_usage, session_id columns
This commit is contained in:
Abdenasser
parent
8e692b013b
commit
7f44f8de09
@ -15,7 +15,7 @@ use sysinfo::{
|
||||
use tauri::State;
|
||||
use std::sync::Mutex;
|
||||
use std::collections::HashMap;
|
||||
use std::time::Instant;
|
||||
use std::time::{Instant, SystemTime, UNIX_EPOCH};
|
||||
|
||||
struct AppState {
|
||||
sys: Mutex<System>,
|
||||
@ -58,6 +58,13 @@ struct ProcessInfo {
|
||||
user: String,
|
||||
command: String,
|
||||
threads: Option<u32>,
|
||||
environ: Vec<String>,
|
||||
root: String,
|
||||
virtual_memory: u64,
|
||||
start_time: u64,
|
||||
run_time: u64,
|
||||
disk_usage: (u64, u64), // (read_bytes, written_bytes)
|
||||
session_id: Option<u32>,
|
||||
}
|
||||
|
||||
#[derive(serde::Serialize)]
|
||||
@ -96,6 +103,12 @@ async fn get_processes(state: State<'_, AppState>) -> Result<(Vec<ProcessInfo>,
|
||||
let processes_data;
|
||||
let system_stats;
|
||||
|
||||
// Get current time once for all calculations
|
||||
let current_time = SystemTime::now()
|
||||
.duration_since(UNIX_EPOCH)
|
||||
.map_err(|e| e.to_string())?
|
||||
.as_secs();
|
||||
|
||||
// Scope for system lock
|
||||
{
|
||||
let mut sys = state.sys.lock().map_err(|_| "Failed to lock system state")?;
|
||||
@ -109,6 +122,13 @@ async fn get_processes(state: State<'_, AppState>) -> Result<(Vec<ProcessInfo>,
|
||||
.processes()
|
||||
.iter()
|
||||
.map(|(pid, process)| {
|
||||
let start_time = process.start_time();
|
||||
let run_time = if start_time > 0 {
|
||||
current_time.saturating_sub(start_time)
|
||||
} else {
|
||||
0
|
||||
};
|
||||
|
||||
(
|
||||
pid.as_u32(),
|
||||
process.name().to_string(),
|
||||
@ -118,6 +138,14 @@ async fn get_processes(state: State<'_, AppState>) -> Result<(Vec<ProcessInfo>,
|
||||
process.memory(),
|
||||
process.status(),
|
||||
process.parent().map(|p| p.as_u32()),
|
||||
process.environ().to_vec(),
|
||||
process.root().to_string_lossy().into_owned(),
|
||||
process.virtual_memory(),
|
||||
start_time,
|
||||
run_time, // Use calculated run_time
|
||||
process.disk_usage().read_bytes,
|
||||
process.disk_usage().written_bytes,
|
||||
process.session_id().map(|id| id.as_u32()),
|
||||
)
|
||||
})
|
||||
.collect::<Vec<_>>();
|
||||
@ -170,7 +198,9 @@ async fn get_processes(state: State<'_, AppState>) -> Result<(Vec<ProcessInfo>,
|
||||
// Build the process info list
|
||||
let processes = processes_data
|
||||
.into_iter()
|
||||
.map(|(pid, name, cmd, user_id, cpu_usage, memory, status, ppid)| {
|
||||
.map(|(pid, name, cmd, user_id, cpu_usage, memory, status, ppid,
|
||||
environ, root, virtual_memory, start_time, run_time,
|
||||
disk_read, disk_written, session_id)| {
|
||||
let static_info = process_cache.entry(pid).or_insert_with(|| {
|
||||
ProcessStaticInfo {
|
||||
name: name.clone(),
|
||||
@ -196,6 +226,13 @@ async fn get_processes(state: State<'_, AppState>) -> Result<(Vec<ProcessInfo>,
|
||||
user: static_info.user.clone(),
|
||||
command: static_info.command.clone(),
|
||||
threads: None,
|
||||
environ,
|
||||
root,
|
||||
virtual_memory,
|
||||
start_time,
|
||||
run_time,
|
||||
disk_usage: (disk_read, disk_written),
|
||||
session_id,
|
||||
}
|
||||
})
|
||||
.collect();
|
||||
|
||||
@ -1,60 +1,183 @@
|
||||
<script lang="ts">
|
||||
import Modal from "./Modal.svelte";
|
||||
import { formatStatus } from "$lib/utils";
|
||||
import { formatStatus, formatUptime } from "$lib/utils";
|
||||
import type { Process } from "$lib/types";
|
||||
import Fa from "svelte-fa";
|
||||
import {
|
||||
faClock,
|
||||
faMemory,
|
||||
faMicrochip,
|
||||
faHardDrive,
|
||||
faNetworkWired,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
export let show = false;
|
||||
export let process: Process | null = null;
|
||||
export let onClose: () => void;
|
||||
|
||||
$: currentProcess = process;
|
||||
|
||||
function formatMemory(bytes: number) {
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + " MB";
|
||||
}
|
||||
|
||||
function formatBytes(bytes: number) {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
if (bytes < 1024 * 1024 * 1024)
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
|
||||
}
|
||||
|
||||
function formatDate(timestamp: number) {
|
||||
return new Date(timestamp * 1000).toLocaleString();
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal {show} title="Process Details" maxWidth="500px" {onClose}>
|
||||
{#if process}
|
||||
<Modal {show} title="Process Details" maxWidth="700px" {onClose}>
|
||||
{#if currentProcess}
|
||||
<div class="process-details">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Name:</span>
|
||||
<span class="detail-value">{process.name}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">PID:</span>
|
||||
<span class="detail-value">{process.pid}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Parent PID:</span>
|
||||
<span class="detail-value">{process.ppid}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">User:</span>
|
||||
<span class="detail-value">{process.user}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Status:</span>
|
||||
<span class="detail-value">
|
||||
{@html formatStatus(process.status)}
|
||||
</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">CPU Usage:</span>
|
||||
<span class="detail-value">{process.cpu_usage.toFixed(1)}%</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Memory Usage:</span>
|
||||
<span class="detail-value">{formatMemory(process.memory_usage)}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Command:</span>
|
||||
<span class="detail-value command">{process.command}</span>
|
||||
</div>
|
||||
<!-- Basic Info Section -->
|
||||
<section class="detail-section">
|
||||
<h3>Basic Information</h3>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Name:</span>
|
||||
<span class="detail-value">{currentProcess.name}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">PID:</span>
|
||||
<span class="detail-value">{currentProcess.pid}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Parent PID:</span>
|
||||
<span class="detail-value">{currentProcess.ppid}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">User:</span>
|
||||
<span class="detail-value">{currentProcess.user}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Status:</span>
|
||||
<span class="detail-value">
|
||||
{@html formatStatus(currentProcess.status)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Resource Usage Section -->
|
||||
<section class="detail-section">
|
||||
<h3>Resource Usage</h3>
|
||||
<div class="resource-grid">
|
||||
<!-- CPU Usage -->
|
||||
<div class="resource-card">
|
||||
<div class="resource-header">
|
||||
<Fa icon={faMicrochip} />
|
||||
<span>CPU Usage</span>
|
||||
</div>
|
||||
<div class="resource-value">
|
||||
<div class="progress-bar">
|
||||
<div
|
||||
class="progress-fill"
|
||||
style="width: {currentProcess.cpu_usage}%"
|
||||
class:high={currentProcess.cpu_usage > 50}
|
||||
class:critical={currentProcess.cpu_usage > 80}
|
||||
></div>
|
||||
</div>
|
||||
<span>{currentProcess.cpu_usage.toFixed(1)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Memory Usage -->
|
||||
<div class="resource-card">
|
||||
<div class="resource-header">
|
||||
<Fa icon={faMemory} />
|
||||
<span>Memory Usage</span>
|
||||
</div>
|
||||
<div class="resource-stats">
|
||||
<div>Physical: {formatBytes(currentProcess.memory_usage)}</div>
|
||||
<div>Virtual: {formatBytes(currentProcess.virtual_memory)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Disk I/O -->
|
||||
<div class="resource-card">
|
||||
<div class="resource-header">
|
||||
<Fa icon={faHardDrive} />
|
||||
<span>Disk I/O</span>
|
||||
</div>
|
||||
<div class="resource-stats">
|
||||
<div>Read: {formatBytes(currentProcess.disk_usage[0])}</div>
|
||||
<div>Written: {formatBytes(currentProcess.disk_usage[1])}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Time Info -->
|
||||
<div class="resource-card">
|
||||
<div class="resource-header">
|
||||
<Fa icon={faClock} />
|
||||
<span>Time Information</span>
|
||||
</div>
|
||||
<div class="resource-stats">
|
||||
<div>Started: {formatDate(currentProcess.start_time)}</div>
|
||||
<div>Running: {formatUptime(currentProcess.run_time)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Command & Environment Section -->
|
||||
<section class="detail-section">
|
||||
<h3>Process Details</h3>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-row full-width">
|
||||
<span class="detail-label">Command:</span>
|
||||
<span class="detail-value command">{currentProcess.command}</span>
|
||||
</div>
|
||||
<div class="detail-row full-width">
|
||||
<span class="detail-label">Root:</span>
|
||||
<span class="detail-value path">{currentProcess.root}</span>
|
||||
</div>
|
||||
{#if currentProcess.environ.length > 0}
|
||||
<div class="detail-row full-width">
|
||||
<span class="detail-label">Environment:</span>
|
||||
<div class="detail-value env-vars">
|
||||
{#each currentProcess.environ as env}
|
||||
<div class="env-var">{env}</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{/if}
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.process-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.detail-section h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--surface0);
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
@ -65,14 +188,16 @@
|
||||
gap: 12px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.detail-row:nth-child(odd) {
|
||||
background: var(--surface0);
|
||||
}
|
||||
|
||||
.detail-row.full-width {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
flex: 0 0 120px;
|
||||
display: flex;
|
||||
color: var(--subtext0);
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -84,8 +209,97 @@
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.detail-value.command {
|
||||
.detail-value.command,
|
||||
.detail-value.path {
|
||||
font-size: 12px;
|
||||
color: var(--subtext1);
|
||||
padding: 8px;
|
||||
background: var(--mantle);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.resource-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.resource-card {
|
||||
background: var(--surface0);
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.resource-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--subtext0);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.resource-header :global(svg) {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.resource-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: var(--surface1);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: var(--blue);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-fill.high {
|
||||
background: var(--yellow);
|
||||
}
|
||||
|
||||
.progress-fill.critical {
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.resource-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.env-vars {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
background: var(--mantle);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.env-var {
|
||||
font-size: 12px;
|
||||
color: var(--subtext1);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.env-var:hover {
|
||||
background: var(--surface1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -46,6 +46,12 @@
|
||||
<div class="panel-header">
|
||||
<Fa icon={faMicrochip} />
|
||||
<h3>CPU Usage</h3>
|
||||
<div class="usage-pill">
|
||||
{formatPercentage(
|
||||
systemStats.cpu_usage.reduce((a, b) => a + b, 0) /
|
||||
systemStats.cpu_usage.length,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats-content cpu-grid">
|
||||
{#each systemStats.cpu_usage as usage, i}
|
||||
|
||||
@ -9,6 +9,13 @@ export interface Process {
|
||||
user: string;
|
||||
command: string;
|
||||
threads?: number;
|
||||
environ: string[];
|
||||
root: string;
|
||||
virtual_memory: number;
|
||||
start_time: number;
|
||||
run_time: number;
|
||||
disk_usage: [number, number]; // [read_bytes, written_bytes]
|
||||
session_id?: number;
|
||||
}
|
||||
|
||||
export interface SystemStats {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
import ProcessTable from "$lib/components/ProcessTable.svelte";
|
||||
import ProcessDetailsModal from "$lib/components/ProcessDetailsModal.svelte";
|
||||
import KillProcessModal from "$lib/components/KillProcessModal.svelte";
|
||||
import { formatStatus } from "$lib/utils";
|
||||
import { formatMemorySize, formatStatus } from "$lib/utils";
|
||||
import { themeStore } from "$lib/stores";
|
||||
import type { Process, SystemStats, Column } from "$lib/types";
|
||||
|
||||
@ -27,6 +27,7 @@
|
||||
let statusFilter = "all";
|
||||
let refreshRate = 1000;
|
||||
let isFrozen = false;
|
||||
let selectedProcessPid: number | null = null;
|
||||
|
||||
let columns: Column[] = [
|
||||
{ id: "name", label: "Process Name", visible: true, required: true },
|
||||
@ -52,6 +53,40 @@
|
||||
},
|
||||
{ id: "command", label: "Command", visible: false },
|
||||
{ id: "ppid", label: "Parent PID", visible: false },
|
||||
{ id: "environ", label: "Environment", visible: false },
|
||||
{ id: "root", label: "Root", visible: false },
|
||||
{
|
||||
id: "virtual_memory",
|
||||
label: "Virtual Memory",
|
||||
visible: false,
|
||||
format: (v) => formatMemorySize(v),
|
||||
},
|
||||
{
|
||||
id: "start_time",
|
||||
label: "Start Time",
|
||||
visible: false,
|
||||
format: (v) => new Date(v * 1000).toLocaleString(), // v is the time where the process was started (in seconds) from epoch
|
||||
},
|
||||
{
|
||||
id: "run_time",
|
||||
label: "Run Time",
|
||||
visible: false,
|
||||
format: (v) => {
|
||||
const seconds = v; // v is the time the process has been running in seconds
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
return `${hours}h ${minutes}m ${remainingSeconds}s`; // Format as HH:MM:SS
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "disk_usage",
|
||||
label: "Disk Usage",
|
||||
visible: false,
|
||||
format: (v) =>
|
||||
`${(v[0] / (1024 * 1024)).toFixed(1)} / ${(v[1] / (1024 * 1024)).toFixed(1)} MB`,
|
||||
},
|
||||
{ id: "session_id", label: "Session ID", visible: false },
|
||||
];
|
||||
|
||||
let sortConfig = {
|
||||
@ -127,6 +162,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
$: if (selectedProcessPid && processes.length > 0) {
|
||||
selectedProcess =
|
||||
processes.find((p) => p.pid === selectedProcessPid) || null;
|
||||
}
|
||||
|
||||
async function getProcesses() {
|
||||
try {
|
||||
const result = await invoke<[Process[], SystemStats]>("get_processes");
|
||||
@ -176,6 +216,7 @@
|
||||
}
|
||||
|
||||
function showProcessDetails(process: Process) {
|
||||
selectedProcessPid = process.pid;
|
||||
selectedProcess = process;
|
||||
showInfoModal = true;
|
||||
}
|
||||
@ -198,6 +239,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
function handleModalClose() {
|
||||
showInfoModal = false;
|
||||
selectedProcess = null;
|
||||
selectedProcessPid = null;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
await Promise.all([getProcesses()]);
|
||||
@ -259,10 +306,7 @@
|
||||
<ProcessDetailsModal
|
||||
show={showInfoModal}
|
||||
process={selectedProcess}
|
||||
onClose={() => {
|
||||
showInfoModal = false;
|
||||
selectedProcess = null;
|
||||
}}
|
||||
onClose={handleModalClose}
|
||||
/>
|
||||
|
||||
<KillProcessModal
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user