69 lines
2.2 KiB
Svelte
69 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import type { ProcessRow } from "$lib/api/types";
|
|
import { Button } from "$lib/components/ui/button";
|
|
import { fmtBytes, fmtCpu, fmtSeconds } from "$lib/format";
|
|
|
|
let {
|
|
rows,
|
|
onKill,
|
|
}: { rows: ProcessRow[]; onKill: (row: ProcessRow) => void } = $props();
|
|
|
|
const INDENT_REM = 0.875;
|
|
</script>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead class="text-muted-foreground text-xs">
|
|
<tr class="border-b text-left">
|
|
<th class="py-1.5 pr-3 font-medium">pid</th>
|
|
<th class="w-full py-1.5 pr-3 font-medium">command</th>
|
|
<th class="py-1.5 pr-3 text-right font-medium">cpu</th>
|
|
<th class="py-1.5 pr-3 text-right font-medium">rss</th>
|
|
<th class="hidden py-1.5 pr-3 text-right font-medium sm:table-cell">
|
|
age
|
|
</th>
|
|
<th class="py-1.5"><span class="sr-only">actions</span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each rows as row (row.pid)}
|
|
<tr class="border-b last:border-b-0">
|
|
<td class="tabular py-1 pr-3 text-muted-foreground text-xs">
|
|
{row.pid}
|
|
</td>
|
|
<td class="max-w-0 py-1 pr-3">
|
|
<span
|
|
class="block truncate font-mono text-xs"
|
|
title={row.command}
|
|
style:padding-left="{row.depth * INDENT_REM}rem"
|
|
>
|
|
{row.command || row.name}
|
|
</span>
|
|
</td>
|
|
<td class="tabular py-1 pr-3 text-right text-xs">
|
|
{fmtCpu(row.cpu)}
|
|
</td>
|
|
<td class="tabular whitespace-nowrap py-1 pr-3 text-right text-xs">
|
|
{fmtBytes(row.rss)}
|
|
</td>
|
|
<td
|
|
class="tabular hidden whitespace-nowrap py-1 pr-3 text-right text-muted-foreground text-xs sm:table-cell"
|
|
>
|
|
{fmtSeconds(row.age_seconds)}
|
|
</td>
|
|
<td class="py-0.5 text-right">
|
|
<Button
|
|
class="text-muted-foreground hover:text-destructive max-sm:h-10"
|
|
onclick={() => onKill(row)}
|
|
size="xs"
|
|
variant="ghost"
|
|
>
|
|
Kill
|
|
</Button>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|