mirror of
https://github.com/kunkunsh/kunkun-ext-neohtop.git
synced 2025-04-11 17:29:45 +00:00
92 lines
2.4 KiB
Svelte
92 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import Modal from "./Modal.svelte";
|
|
import { formatStatus } from "$lib/utils";
|
|
import type { Process } from "$lib/types";
|
|
|
|
export let show = false;
|
|
export let process: Process | null = null;
|
|
export let onClose: () => void;
|
|
|
|
function formatMemory(bytes: number) {
|
|
return (bytes / (1024 * 1024)).toFixed(1) + " MB";
|
|
}
|
|
</script>
|
|
|
|
<Modal {show} title="Process Details" maxWidth="500px" {onClose}>
|
|
{#if process}
|
|
<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>
|
|
</div>
|
|
{/if}
|
|
</Modal>
|
|
|
|
<style>
|
|
.process-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.detail-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.detail-row:nth-child(odd) {
|
|
background: var(--surface0);
|
|
}
|
|
|
|
.detail-label {
|
|
flex: 0 0 120px;
|
|
color: var(--subtext0);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.detail-value {
|
|
flex: 1;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
|
monospace;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.detail-value.command {
|
|
font-size: 12px;
|
|
color: var(--subtext1);
|
|
}
|
|
</style>
|