mirror of
https://github.com/kunkunsh/kunkun-ext-neohtop.git
synced 2025-04-04 09:46:43 +00:00
Merge branch 'main' into apply_blur
This commit is contained in:
Abdenasser Elidrissi
GitHub
commit
8f46808b7e
@ -1,31 +1,16 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { getVersion } from "@tauri-apps/api/app";
|
import { getVersion } from "@tauri-apps/api/app";
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import ThemeSwitcher from "./ThemeSwitcher.svelte";
|
import { ThemeSwitcher } from "$lib/components";
|
||||||
import { faInfo } from "@fortawesome/free-solid-svg-icons";
|
import { faInfo } from "@fortawesome/free-solid-svg-icons";
|
||||||
import Fa from "svelte-fa";
|
import Fa from "svelte-fa";
|
||||||
|
import { ASCII_ART, APP_INFO } from "$lib/constants";
|
||||||
|
|
||||||
let version = "";
|
let version = "";
|
||||||
let latestVersion = "";
|
let latestVersion = "";
|
||||||
let showInfo = false;
|
let showInfo = false;
|
||||||
let hasUpdate = false;
|
let hasUpdate = false;
|
||||||
|
|
||||||
const ASCII_ART = `
|
|
||||||
███╗ ██╗███████╗ ██████╗ ██╗ ██╗████████╗ ██████╗ ██████╗
|
|
||||||
████╗ ██║██╔════╝██╔═══██╗██║ ██║╚══██╔══╝██╔═══██╗██╔══██╗
|
|
||||||
██╔██╗ ██║█████╗ ██║ ██║███████║ ██║ ██║ ██║██████╔╝
|
|
||||||
██║╚██╗██║██╔══╝ ██║ ██║██╔══██║ ██║ ██║ ██║██╔═══╝
|
|
||||||
██║ ╚████║███████╗╚██████╔╝██║ ██║ ██║ ╚██████╔╝██║
|
|
||||||
╚═╝ ╚═══╝╚══════╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝
|
|
||||||
`;
|
|
||||||
|
|
||||||
const APP_INFO = {
|
|
||||||
name: "NeoHtop",
|
|
||||||
developer: "Abdenasser",
|
|
||||||
github: "https://github.com/Abdenasser/neohtop",
|
|
||||||
stack: ["Tauri", "Rust", "Svelte", "TypeScript"],
|
|
||||||
};
|
|
||||||
|
|
||||||
async function checkLatestVersion() {
|
async function checkLatestVersion() {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(
|
const response = await fetch(
|
||||||
|
|||||||
@ -1,430 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import {
|
|
||||||
faThumbtack,
|
|
||||||
faInfoCircle,
|
|
||||||
faXmark,
|
|
||||||
} from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import Fa from "svelte-fa";
|
|
||||||
import type { Process, Column } from "$lib/types";
|
|
||||||
import * as SimpleIcons from "simple-icons";
|
|
||||||
|
|
||||||
export let processes: Process[];
|
|
||||||
export let columns: Column[];
|
|
||||||
export let systemStats: { memory_total: number } | null;
|
|
||||||
export let sortConfig: { field: keyof Process; direction: "asc" | "desc" };
|
|
||||||
export let pinnedProcesses: Set<string>;
|
|
||||||
|
|
||||||
export let onToggleSort: (field: keyof Process) => void;
|
|
||||||
export let onTogglePin: (command: string) => void;
|
|
||||||
export let onShowDetails: (process: Process) => void;
|
|
||||||
export let onKillProcess: (process: Process) => void;
|
|
||||||
|
|
||||||
function getSortIndicator(field: keyof Process) {
|
|
||||||
if (sortConfig.field !== field) return "↕";
|
|
||||||
return sortConfig.direction === "asc" ? "↑" : "↓";
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleImageError(event: Event) {
|
|
||||||
const img = event.target as HTMLImageElement;
|
|
||||||
img.src = getIconForProcess("default"); // Fallback to default icon
|
|
||||||
img.onerror = null; // Prevent infinite loop if default icon also fails
|
|
||||||
}
|
|
||||||
|
|
||||||
function getIconForProcess(name: string): string {
|
|
||||||
// First try with com.company.something pattern
|
|
||||||
if (name.startsWith("com.")) {
|
|
||||||
const companyName = name.replace(/^com\.([^.]+)\..*$/, "$1");
|
|
||||||
const formattedCompanyName =
|
|
||||||
companyName.charAt(0).toUpperCase() + companyName.slice(1);
|
|
||||||
const companyIconKey = `si${formattedCompanyName}`;
|
|
||||||
const companyIcon =
|
|
||||||
SimpleIcons[companyIconKey as keyof typeof SimpleIcons];
|
|
||||||
|
|
||||||
if (companyIcon) {
|
|
||||||
// Use theme color instead of brand color
|
|
||||||
const color = getComputedStyle(document.documentElement)
|
|
||||||
.getPropertyValue("--text")
|
|
||||||
.trim();
|
|
||||||
const svg =
|
|
||||||
typeof companyIcon === "object" && "svg" in companyIcon
|
|
||||||
? companyIcon.svg
|
|
||||||
: "";
|
|
||||||
const svgWithColor = svg.replace("<svg", `<svg fill="${color}"`);
|
|
||||||
return `data:image/svg+xml;base64,${btoa(svgWithColor)}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// If no company icon found, fall back to original implementation
|
|
||||||
const cleanName = name
|
|
||||||
.replace(/\.(app|exe)$/i, "")
|
|
||||||
.replace(/[-_./\\]/g, " ")
|
|
||||||
.split(" ")[0]
|
|
||||||
.trim()
|
|
||||||
.toLowerCase();
|
|
||||||
|
|
||||||
const formattedName =
|
|
||||||
cleanName.charAt(0).toUpperCase() + cleanName.slice(1);
|
|
||||||
const iconKey = `si${formattedName}`;
|
|
||||||
let simpleIcon = SimpleIcons[iconKey as keyof typeof SimpleIcons];
|
|
||||||
|
|
||||||
// Default icon if no match found
|
|
||||||
if (!simpleIcon) {
|
|
||||||
simpleIcon = SimpleIcons.siGhostery;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Use theme color instead of brand color
|
|
||||||
const color = getComputedStyle(document.documentElement)
|
|
||||||
.getPropertyValue("--text")
|
|
||||||
.trim();
|
|
||||||
|
|
||||||
const svg =
|
|
||||||
typeof simpleIcon === "object" && "svg" in simpleIcon
|
|
||||||
? simpleIcon.svg
|
|
||||||
: "";
|
|
||||||
const svgWithColor = svg.replace("<svg", `<svg fill="${color}"`);
|
|
||||||
return `data:image/svg+xml;base64,${btoa(svgWithColor)}`;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="table-container">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
{#each columns.filter((col) => col.visible) as column}
|
|
||||||
<th class="sortable" on:click={() => onToggleSort(column.id)}>
|
|
||||||
<div class="th-content">
|
|
||||||
{column.label}
|
|
||||||
<span
|
|
||||||
class="sort-indicator"
|
|
||||||
class:active={sortConfig.field === column.id}
|
|
||||||
>
|
|
||||||
{getSortIndicator(column.id)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
{/each}
|
|
||||||
<th>Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{#each processes as process (process.pid)}
|
|
||||||
<tr
|
|
||||||
class:high-usage={process.cpu_usage > 50 ||
|
|
||||||
process.memory_usage / (systemStats?.memory_total || 0) > 0.1}
|
|
||||||
class:pinned={pinnedProcesses.has(process.command)}
|
|
||||||
>
|
|
||||||
{#each columns.filter((col) => col.visible) as column}
|
|
||||||
<td class="truncate">
|
|
||||||
{#if column.id === "name"}
|
|
||||||
<div class="name-cell">
|
|
||||||
<img
|
|
||||||
class="process-icon"
|
|
||||||
src={getIconForProcess(process.name)}
|
|
||||||
alt=""
|
|
||||||
height="16"
|
|
||||||
width="16"
|
|
||||||
on:error={handleImageError}
|
|
||||||
/>
|
|
||||||
<span class="process-name">{process.name}</span>
|
|
||||||
</div>
|
|
||||||
{:else if column.format}
|
|
||||||
{@html column.format(process[column.id])}
|
|
||||||
{:else}
|
|
||||||
{process[column.id]}
|
|
||||||
{/if}
|
|
||||||
</td>
|
|
||||||
{/each}
|
|
||||||
<td class="col-actions">
|
|
||||||
<div class="action-buttons">
|
|
||||||
<button
|
|
||||||
class="btn-action pin-btn"
|
|
||||||
class:pinned={pinnedProcesses.has(process.command)}
|
|
||||||
on:click={() => onTogglePin(process.command)}
|
|
||||||
title={pinnedProcesses.has(process.command) ? "Unpin" : "Pin"}
|
|
||||||
>
|
|
||||||
<Fa icon={faThumbtack} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn-action info-btn"
|
|
||||||
on:click={() => onShowDetails(process)}
|
|
||||||
title="Show Details"
|
|
||||||
>
|
|
||||||
<Fa icon={faInfoCircle} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn-action kill-btn"
|
|
||||||
on:click={() => onKillProcess(process)}
|
|
||||||
title="End Process"
|
|
||||||
>
|
|
||||||
<Fa icon={faXmark} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{/each}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.table-container {
|
|
||||||
flex: 1;
|
|
||||||
overflow-x: auto;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
/* Scrollbar styles */
|
|
||||||
scrollbar-width: thin; /* Firefox */
|
|
||||||
scrollbar-color: var(--surface2) var(--mantle); /* Firefox */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Webkit scrollbar styles (Chrome, Safari, Edge) */
|
|
||||||
.table-container::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-container::-webkit-scrollbar-track {
|
|
||||||
background: var(--mantle);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-container::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--surface2);
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: background 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-container::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: var(--surface1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-container::-webkit-scrollbar-corner {
|
|
||||||
background: var(--mantle);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* When both scrollbars are present, add some padding to prevent overlap */
|
|
||||||
.table-container::-webkit-scrollbar-corner {
|
|
||||||
background-color: var(--mantle);
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: max-content;
|
|
||||||
min-width: 100%;
|
|
||||||
table-layout: fixed;
|
|
||||||
border-collapse: collapse;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
background: var(--mantle);
|
|
||||||
text-align: left;
|
|
||||||
padding: 8px 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--subtext0);
|
|
||||||
border-bottom: 1px solid var(--surface0);
|
|
||||||
transition: background-color 0.2s ease;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
padding: 6px 12px;
|
|
||||||
border-bottom: 1px solid var(--surface0);
|
|
||||||
color: var(--text);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:hover {
|
|
||||||
background-color: var(--surface0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.truncate {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
max-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sortable {
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.th-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sort-indicator {
|
|
||||||
color: var(--overlay0);
|
|
||||||
font-size: 12px;
|
|
||||||
opacity: 0.5;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sort-indicator.active {
|
|
||||||
color: var(--blue);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sortable:hover .sort-indicator {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.high-usage {
|
|
||||||
background-color: color-mix(in srgb, var(--red) 10%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.high-usage:hover {
|
|
||||||
background-color: color-mix(in srgb, var(--red) 15%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
tr.pinned {
|
|
||||||
background-color: color-mix(in srgb, var(--blue) 10%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
tr.pinned:hover {
|
|
||||||
background-color: color-mix(in srgb, var(--blue) 15%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
th:last-child {
|
|
||||||
width: 120px;
|
|
||||||
min-width: 120px;
|
|
||||||
max-width: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
td:last-child {
|
|
||||||
width: 120px;
|
|
||||||
min-width: 120px;
|
|
||||||
max-width: 120px;
|
|
||||||
padding: 6px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-actions {
|
|
||||||
position: sticky;
|
|
||||||
right: 0;
|
|
||||||
z-index: 2;
|
|
||||||
background: var(--base);
|
|
||||||
border-left: 1px solid var(--surface0);
|
|
||||||
width: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 4px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
background: transparent;
|
|
||||||
border-radius: 6px;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
opacity: 0.1;
|
|
||||||
transition: opacity 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action:hover::before {
|
|
||||||
opacity: 0.15;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pin-btn {
|
|
||||||
color: var(--sapphire);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pin-btn::before {
|
|
||||||
background: var(--sapphire);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pin-btn.pinned {
|
|
||||||
color: var(--blue);
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pin-btn.pinned::before {
|
|
||||||
background: var(--blue);
|
|
||||||
opacity: 0.15;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-btn {
|
|
||||||
color: var(--lavender);
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-btn::before {
|
|
||||||
background: var(--lavender);
|
|
||||||
}
|
|
||||||
|
|
||||||
.kill-btn {
|
|
||||||
color: var(--red);
|
|
||||||
border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.kill-btn:hover {
|
|
||||||
color: var(--base);
|
|
||||||
background: var(--red);
|
|
||||||
}
|
|
||||||
|
|
||||||
.kill-btn:hover::before {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action:hover {
|
|
||||||
box-shadow: 0 0 12px color-mix(in srgb, currentColor 20%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action:active {
|
|
||||||
transform: translateY(1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pin-btn.pinned:active {
|
|
||||||
transform: rotate(45deg) translateY(1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action:focus {
|
|
||||||
outline: none;
|
|
||||||
box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action:disabled:hover {
|
|
||||||
transform: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action:disabled::before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.process-icon {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name-cell {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,461 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import Fa from "svelte-fa";
|
|
||||||
import {
|
|
||||||
faMicrochip,
|
|
||||||
faMemory,
|
|
||||||
faServer,
|
|
||||||
faNetworkWired,
|
|
||||||
faHardDrive,
|
|
||||||
} from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import type { SystemStats } from "$lib/types";
|
|
||||||
import {
|
|
||||||
formatUptime,
|
|
||||||
formatMemorySize,
|
|
||||||
formatPercentage,
|
|
||||||
getUsageClass,
|
|
||||||
} from "$lib/utils";
|
|
||||||
|
|
||||||
export let systemStats: SystemStats | null = null;
|
|
||||||
$: memoryPercentage = systemStats
|
|
||||||
? (systemStats.memory_used / systemStats.memory_total) * 100
|
|
||||||
: 0;
|
|
||||||
|
|
||||||
function formatBytes(bytes: number): string {
|
|
||||||
const units = ["B", "KB", "MB", "GB", "TB"];
|
|
||||||
let value = bytes;
|
|
||||||
let unitIndex = 0;
|
|
||||||
|
|
||||||
while (value >= 1024 && unitIndex < units.length - 1) {
|
|
||||||
value /= 1024;
|
|
||||||
unitIndex++;
|
|
||||||
}
|
|
||||||
|
|
||||||
return `${value.toFixed(1)} ${units[unitIndex]}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
$: diskUsagePercentage = systemStats
|
|
||||||
? (systemStats.disk_used_bytes / systemStats.disk_total_bytes) * 100
|
|
||||||
: 0;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="dashboard-stats">
|
|
||||||
{#if systemStats}
|
|
||||||
<div class="stats-layout">
|
|
||||||
<!-- CPU Panel -->
|
|
||||||
<div class="stat-panel">
|
|
||||||
<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}
|
|
||||||
<div class="stat-item with-progress">
|
|
||||||
<div class="progress-container">
|
|
||||||
<span class="label">Core {i}</span>
|
|
||||||
<div class="bar-container">
|
|
||||||
<div
|
|
||||||
class="usage-bar {getUsageClass(usage)}"
|
|
||||||
style="transform: translateX({usage - 100}%);"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<span class="value">{Math.round(usage)}%</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Memory Panel -->
|
|
||||||
<div class="stat-panel">
|
|
||||||
<div class="panel-header">
|
|
||||||
<Fa icon={faMemory} />
|
|
||||||
<h3>Memory</h3>
|
|
||||||
<div class="usage-pill">{formatPercentage(memoryPercentage)}</div>
|
|
||||||
</div>
|
|
||||||
<div class="stats-content">
|
|
||||||
<div class="stat-item with-progress">
|
|
||||||
<div class="memory-progress-container">
|
|
||||||
<span class="label">Memory usage</span>
|
|
||||||
<div class="bar-container">
|
|
||||||
<div
|
|
||||||
class="usage-bar {getUsageClass(memoryPercentage)}"
|
|
||||||
style="transform: translateX({memoryPercentage - 100}%);"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<span class="value">{formatPercentage(memoryPercentage)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span>Total</span>
|
|
||||||
<span>{formatMemorySize(systemStats.memory_total)}</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span>Used</span>
|
|
||||||
<span>{formatMemorySize(systemStats.memory_used)}</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span>Free</span>
|
|
||||||
<span>{formatMemorySize(systemStats.memory_free)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Storage Panel -->
|
|
||||||
<div class="stat-panel">
|
|
||||||
<div class="panel-header">
|
|
||||||
<Fa icon={faHardDrive} />
|
|
||||||
<h3>Storage</h3>
|
|
||||||
<div class="usage-pill">
|
|
||||||
{formatPercentage(diskUsagePercentage)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stats-content">
|
|
||||||
<div class="stat-item">
|
|
||||||
<span>Total</span>
|
|
||||||
<span>{formatBytes(systemStats.disk_total_bytes)}</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span>Used</span>
|
|
||||||
<span>{formatBytes(systemStats.disk_used_bytes)}</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span>Free</span>
|
|
||||||
<span>{formatBytes(systemStats.disk_free_bytes)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- System Panel -->
|
|
||||||
<div class="stat-panel">
|
|
||||||
<div class="panel-header">
|
|
||||||
<Fa icon={faServer} />
|
|
||||||
<h3>System</h3>
|
|
||||||
</div>
|
|
||||||
<div class="system-grid">
|
|
||||||
<div class="stat-item">
|
|
||||||
<span>Uptime</span>
|
|
||||||
<span>{formatUptime(systemStats.uptime)}</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span>1m Load</span>
|
|
||||||
<span>{systemStats.load_avg[0].toFixed(2)}</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span>5m Load</span>
|
|
||||||
<span>{systemStats.load_avg[1].toFixed(2)}</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span>15m Load</span>
|
|
||||||
<span>{systemStats.load_avg[2].toFixed(2)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Network Panel -->
|
|
||||||
<div class="stat-panel">
|
|
||||||
<div class="panel-header">
|
|
||||||
<Fa icon={faNetworkWired} />
|
|
||||||
<h3>Network I/O</h3>
|
|
||||||
</div>
|
|
||||||
<div class="network-stats">
|
|
||||||
<div class="stat-item">
|
|
||||||
<span>↓ Receiving</span>
|
|
||||||
<span>{formatBytes(systemStats.network_rx_bytes)}/s</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span>↑ Sending</span>
|
|
||||||
<span>{formatBytes(systemStats.network_tx_bytes)}/s</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.dashboard-stats {
|
|
||||||
padding: 0.5rem;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-layout {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.75rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-panel {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
background-color: var(--mantle);
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 0.75rem;
|
|
||||||
/* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
border-bottom: 1px solid var(--surface0);
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-header h3 {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin: 0;
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-header :global(svg) {
|
|
||||||
color: var(--blue);
|
|
||||||
width: 0.8rem;
|
|
||||||
height: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.usage-pill {
|
|
||||||
margin-left: auto;
|
|
||||||
background: var(--surface0);
|
|
||||||
padding: 0.15rem 0.5rem;
|
|
||||||
border-radius: 1rem;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cpu-layout {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 0.75rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding-right: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cpu-row {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cpu-info {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-container {
|
|
||||||
height: 8px;
|
|
||||||
background: var(--surface0);
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-container.main-bar {
|
|
||||||
height: 6px;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.usage-bar {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
transform-origin: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.usage-bar.low {
|
|
||||||
background: var(--blue);
|
|
||||||
}
|
|
||||||
.usage-bar.medium {
|
|
||||||
background: var(--yellow);
|
|
||||||
}
|
|
||||||
.usage-bar.high {
|
|
||||||
background: var(--peach);
|
|
||||||
}
|
|
||||||
.usage-bar.critical {
|
|
||||||
background: var(--red);
|
|
||||||
}
|
|
||||||
|
|
||||||
.memory-grid,
|
|
||||||
.disk-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 0.75rem;
|
|
||||||
align-content: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.system-grid,
|
|
||||||
.network-grid {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.4rem;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.load-stats {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.network-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
line-height: 1.2;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-item span:first-child {
|
|
||||||
color: var(--subtext0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-item span:last-child {
|
|
||||||
color: var(--text);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.full-width {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.network-stats {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-item.with-progress {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-info {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-container {
|
|
||||||
width: 100%;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 4rem 1fr 3rem;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.memory-progress-container {
|
|
||||||
width: 100%;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 5rem 1fr 2.5rem;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.3rem;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.memory-progress-container .label {
|
|
||||||
color: var(--subtext0);
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.memory-progress-container .value {
|
|
||||||
color: var(--text);
|
|
||||||
text-align: right;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-container .label {
|
|
||||||
color: var(--subtext0);
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-container .value {
|
|
||||||
color: var(--text);
|
|
||||||
text-align: right;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-container {
|
|
||||||
height: 8px;
|
|
||||||
background: var(--surface0);
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.usage-bar {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
transform-origin: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cpu-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 0.4rem 2rem;
|
|
||||||
height: auto;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-container {
|
|
||||||
width: 100%;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 2.5rem 1fr 2.5rem;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.3rem;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Make CPU panel take more space */
|
|
||||||
.stat-panel:first-child {
|
|
||||||
flex: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Customize flex distribution for each panel */
|
|
||||||
.stat-panel:nth-child(1) {
|
|
||||||
flex: 2.5; /* CPU: more space for 2 columns */
|
|
||||||
}
|
|
||||||
.stat-panel:nth-child(2) {
|
|
||||||
flex: 2; /* Memory: more space for details */
|
|
||||||
}
|
|
||||||
.stat-panel:nth-child(3),
|
|
||||||
.stat-panel:nth-child(4),
|
|
||||||
.stat-panel:nth-child(5) {
|
|
||||||
flex: 0.8; /* Storage, System, and Network: less space */
|
|
||||||
min-width: 125px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { themeStore } from "$lib/stores";
|
import { themeStore } from "$lib/stores";
|
||||||
import { themes } from "$lib/styles";
|
import { themes } from "$lib/definitions";
|
||||||
import { fade } from "svelte/transition";
|
import { fade } from "svelte/transition";
|
||||||
import Fa from "svelte-fa";
|
import Fa from "svelte-fa";
|
||||||
import {
|
import {
|
||||||
@ -8,51 +8,12 @@
|
|||||||
faChevronRight,
|
faChevronRight,
|
||||||
} from "@fortawesome/free-solid-svg-icons";
|
} from "@fortawesome/free-solid-svg-icons";
|
||||||
import { platform } from "@tauri-apps/plugin-os";
|
import { platform } from "@tauri-apps/plugin-os";
|
||||||
|
import { THEME_GROUPS } from "$lib/constants";
|
||||||
|
|
||||||
let showMenu = false;
|
let showMenu = false;
|
||||||
|
|
||||||
const themeGroups = [
|
const themeGroups = [
|
||||||
{
|
...THEME_GROUPS,
|
||||||
label: "Dark",
|
|
||||||
themes: [
|
|
||||||
"catppuccin",
|
|
||||||
"dracula",
|
|
||||||
"monokaiPro",
|
|
||||||
"tokyoNight",
|
|
||||||
"ayuDark",
|
|
||||||
"ayuMirage",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Light",
|
|
||||||
themes: ["githubLight", "solarizedLight", "oneLight", "ayuLight"],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Warm",
|
|
||||||
themes: ["gruvbox"],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Cool",
|
|
||||||
themes: ["nord", "oneDark"],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Fun",
|
|
||||||
themes: [
|
|
||||||
"bubblegum",
|
|
||||||
"rosePine",
|
|
||||||
"cottonCandy",
|
|
||||||
"synthwave",
|
|
||||||
"candyfloss",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Retro",
|
|
||||||
themes: ["terminal", "amber", "ibmPC"],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Accessibility",
|
|
||||||
themes: ["highContrast"],
|
|
||||||
},
|
|
||||||
...(platform() === "windows" || platform() === "macos"
|
...(platform() === "windows" || platform() === "macos"
|
||||||
? [
|
? [
|
||||||
{
|
{
|
||||||
|
|||||||
@ -1,18 +1,4 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Window } from "@tauri-apps/api/window";
|
|
||||||
|
|
||||||
const appWindow = new Window("main");
|
|
||||||
let isMaximized = false;
|
|
||||||
|
|
||||||
async function toggleMaximize() {
|
|
||||||
isMaximized = await appWindow.isMaximized();
|
|
||||||
if (isMaximized) {
|
|
||||||
await appWindow.unmaximize();
|
|
||||||
} else {
|
|
||||||
await appWindow.maximize();
|
|
||||||
}
|
|
||||||
isMaximized = await appWindow.isMaximized();
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="title-bar" data-tauri-drag-region>
|
<div class="title-bar" data-tauri-drag-region>
|
||||||
|
|||||||
@ -1,542 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import AppInfo from "./AppInfo.svelte";
|
|
||||||
import { statusMap } from "$lib/utils";
|
|
||||||
import Fa from "svelte-fa";
|
|
||||||
import {
|
|
||||||
faPlay,
|
|
||||||
faPause,
|
|
||||||
faChevronDown,
|
|
||||||
faChevronRight,
|
|
||||||
} from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import { configStore } from "$lib/stores/config";
|
|
||||||
import type { AppConfig } from "$lib/types/config";
|
|
||||||
export let searchTerm: string;
|
|
||||||
export let statusFilter: string = "all";
|
|
||||||
export let itemsPerPage: number;
|
|
||||||
export let currentPage: number;
|
|
||||||
export let totalPages: number;
|
|
||||||
export let totalResults: number;
|
|
||||||
export let columns: Array<{
|
|
||||||
id: string;
|
|
||||||
label: string;
|
|
||||||
visible: boolean;
|
|
||||||
required?: boolean;
|
|
||||||
}>;
|
|
||||||
export let refreshRate: number;
|
|
||||||
export let isFrozen: boolean;
|
|
||||||
|
|
||||||
const itemsPerPageOptions = [15, 25, 50, 100, 250, 500];
|
|
||||||
let showColumnMenu = false;
|
|
||||||
const statusOptions = [
|
|
||||||
{ value: "all", label: "All Statuses" },
|
|
||||||
...Object.values(statusMap).map((status) => ({
|
|
||||||
value: status.label,
|
|
||||||
label: status.label,
|
|
||||||
})),
|
|
||||||
];
|
|
||||||
|
|
||||||
const refreshRateOptions = [
|
|
||||||
{ value: 1000, label: "1s" },
|
|
||||||
{ value: 2000, label: "2s" },
|
|
||||||
{ value: 5000, label: "5s" },
|
|
||||||
{ value: 10000, label: "10s" },
|
|
||||||
{ value: 30000, label: "30s" },
|
|
||||||
];
|
|
||||||
|
|
||||||
function changePage(page: number) {
|
|
||||||
if (page >= 1 && page <= totalPages) {
|
|
||||||
currentPage = page;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleColumnVisibilityChange(columnId: string, visible: boolean) {
|
|
||||||
configStore.updateConfig({
|
|
||||||
appearance: {
|
|
||||||
columnVisibility: {
|
|
||||||
...$configStore.appearance.columnVisibility,
|
|
||||||
[columnId]: visible,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
|
|
||||||
configStore.updateConfig({
|
|
||||||
behavior: {
|
|
||||||
...$configStore.behavior,
|
|
||||||
[key]: value,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="toolbar">
|
|
||||||
<div class="toolbar-content">
|
|
||||||
<div class="search-box">
|
|
||||||
<div class="search-input-wrapper">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Search processes"
|
|
||||||
bind:value={searchTerm}
|
|
||||||
class="search-input"
|
|
||||||
/>
|
|
||||||
{#if searchTerm}
|
|
||||||
<button class="btn-clear" on:click={() => (searchTerm = "")}>
|
|
||||||
Clear
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="toolbar-group">
|
|
||||||
<select
|
|
||||||
bind:value={statusFilter}
|
|
||||||
on:change={() =>
|
|
||||||
updateBehaviorConfig("defaultStatusFilter", statusFilter)}
|
|
||||||
class="select-input"
|
|
||||||
>
|
|
||||||
{#each statusOptions as option}
|
|
||||||
<option value={option.value}>{option.label}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="toolbar-spacer"></div>
|
|
||||||
|
|
||||||
<div class="pagination-controls">
|
|
||||||
<select
|
|
||||||
class="select-input"
|
|
||||||
bind:value={itemsPerPage}
|
|
||||||
on:change={() => updateBehaviorConfig("itemsPerPage", itemsPerPage)}
|
|
||||||
aria-label="Items per page"
|
|
||||||
>
|
|
||||||
{#each itemsPerPageOptions as option}
|
|
||||||
<option value={option}>{option} per page</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<div class="pagination">
|
|
||||||
<button
|
|
||||||
class="btn-page"
|
|
||||||
disabled={currentPage === 1}
|
|
||||||
on:click={() => changePage(1)}
|
|
||||||
>
|
|
||||||
««
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn-page"
|
|
||||||
disabled={currentPage === 1}
|
|
||||||
on:click={() => changePage(currentPage - 1)}
|
|
||||||
>
|
|
||||||
«
|
|
||||||
</button>
|
|
||||||
<div class="page-info">
|
|
||||||
<span>Page {currentPage} of {totalPages}</span>
|
|
||||||
<span class="results-info">({totalResults} processes)</span>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
class="btn-page"
|
|
||||||
disabled={currentPage === totalPages}
|
|
||||||
on:click={() => changePage(currentPage + 1)}
|
|
||||||
>
|
|
||||||
»
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn-page"
|
|
||||||
disabled={currentPage === totalPages}
|
|
||||||
on:click={() => changePage(totalPages)}
|
|
||||||
>
|
|
||||||
»»
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="toolbar-spacer"></div>
|
|
||||||
|
|
||||||
<div class="column-toggle">
|
|
||||||
<button
|
|
||||||
class="btn-toggle"
|
|
||||||
on:click={() => (showColumnMenu = !showColumnMenu)}
|
|
||||||
aria-label="Toggle columns"
|
|
||||||
>
|
|
||||||
Columns
|
|
||||||
<span class="icon">
|
|
||||||
{#if showColumnMenu}
|
|
||||||
<Fa icon={faChevronDown} />
|
|
||||||
{:else}
|
|
||||||
<Fa icon={faChevronRight} />
|
|
||||||
{/if}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{#if showColumnMenu}
|
|
||||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
||||||
<div class="column-menu" on:mouseleave={() => (showColumnMenu = false)}>
|
|
||||||
{#each columns as column}
|
|
||||||
<label class="column-option">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={column.visible}
|
|
||||||
disabled={column.required}
|
|
||||||
on:change={(e) =>
|
|
||||||
handleColumnVisibilityChange(
|
|
||||||
column.id,
|
|
||||||
e.currentTarget.checked,
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<span>{column.label}</span>
|
|
||||||
</label>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="toolbar-group">
|
|
||||||
<div class="refresh-controls">
|
|
||||||
<select
|
|
||||||
class="select-input"
|
|
||||||
bind:value={refreshRate}
|
|
||||||
on:change={() => updateBehaviorConfig("refreshRate", refreshRate)}
|
|
||||||
disabled={isFrozen}
|
|
||||||
>
|
|
||||||
{#each refreshRateOptions as option}
|
|
||||||
<option value={option.value}>{option.label}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
<button
|
|
||||||
class="btn-action"
|
|
||||||
class:frozen={isFrozen}
|
|
||||||
on:click={() => (isFrozen = !isFrozen)}
|
|
||||||
title={isFrozen ? "Resume Updates" : "Pause Updates"}
|
|
||||||
>
|
|
||||||
{#if isFrozen}
|
|
||||||
<Fa icon={faPlay} />
|
|
||||||
{:else}
|
|
||||||
<Fa icon={faPause} />
|
|
||||||
{/if}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<AppInfo />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.toolbar {
|
|
||||||
padding: 8px;
|
|
||||||
border-bottom: 1px solid var(--surface0);
|
|
||||||
background-color: var(--mantle);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 0 12px;
|
|
||||||
min-width: max-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar-spacer {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-box {
|
|
||||||
width: 240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input-wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input {
|
|
||||||
width: 240px;
|
|
||||||
height: 28px;
|
|
||||||
padding: 0 12px;
|
|
||||||
padding-right: 70px;
|
|
||||||
border: 1px solid var(--surface1);
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 12px;
|
|
||||||
background-color: var(--surface0);
|
|
||||||
color: var(--text);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-clear {
|
|
||||||
position: absolute;
|
|
||||||
right: 4px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
padding: 4px 8px;
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--subtext0);
|
|
||||||
background: var(--surface1);
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-clear:hover {
|
|
||||||
background: var(--surface2);
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input::-webkit-search-cancel-button {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
height: 14px;
|
|
||||||
width: 14px;
|
|
||||||
margin-right: 4px;
|
|
||||||
background: var(--overlay0);
|
|
||||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")
|
|
||||||
no-repeat 50% 50%;
|
|
||||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")
|
|
||||||
no-repeat 50% 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input::-webkit-search-cancel-button:hover {
|
|
||||||
background: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input:hover {
|
|
||||||
background-color: var(--surface1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--blue);
|
|
||||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 25%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination-controls {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-input {
|
|
||||||
padding: 6px 12px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text);
|
|
||||||
background: var(--surface0);
|
|
||||||
border: 1px solid var(--surface1);
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
appearance: none;
|
|
||||||
padding-right: 24px;
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: right 8px center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-input:hover {
|
|
||||||
background-color: var(--surface1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-page {
|
|
||||||
padding: 6px 10px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text);
|
|
||||||
background: var(--surface0);
|
|
||||||
border: 1px solid var(--surface1);
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-page:hover:not(:disabled) {
|
|
||||||
background: var(--surface1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-page:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-info {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--subtext0);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-info span {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.results-info {
|
|
||||||
color: var(--overlay0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-toggle {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 6px 12px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text);
|
|
||||||
background: var(--surface0);
|
|
||||||
border: 1px solid var(--surface1);
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-toggle:hover {
|
|
||||||
background: var(--surface1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
font-size: 10px;
|
|
||||||
color: var(--subtext0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-menu {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
right: 0;
|
|
||||||
margin-top: 4px;
|
|
||||||
padding: 8px;
|
|
||||||
background: var(--base);
|
|
||||||
border: 1px solid var(--surface0);
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
||||||
z-index: 100;
|
|
||||||
max-height: 300px;
|
|
||||||
overflow-y: auto;
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-menu::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-menu::-webkit-scrollbar-track {
|
|
||||||
background: var(--mantle);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-menu::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--surface2);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-menu::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: var(--surface1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-option {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 6px 8px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text);
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-option:hover {
|
|
||||||
background: var(--surface0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-option input[type="checkbox"] {
|
|
||||||
appearance: none;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
border: 1px solid var(--surface2);
|
|
||||||
border-radius: 4px;
|
|
||||||
background: var(--mantle);
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-option input[type="checkbox"]:checked {
|
|
||||||
background: var(--blue);
|
|
||||||
border-color: var(--blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-option input[type="checkbox"]:checked::after {
|
|
||||||
content: "✓";
|
|
||||||
position: absolute;
|
|
||||||
color: var(--base);
|
|
||||||
font-size: 12px;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-option input[type="checkbox"]:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-controls {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-controls :global(svg) {
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--subtext0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
border: none;
|
|
||||||
background: var(--surface0);
|
|
||||||
color: var(--text);
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action:hover {
|
|
||||||
background: var(--surface1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.frozen {
|
|
||||||
background: var(--blue);
|
|
||||||
color: var(--base);
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-input {
|
|
||||||
height: 28px;
|
|
||||||
padding: 0 8px;
|
|
||||||
border: 1px solid var(--surface1);
|
|
||||||
border-radius: 6px;
|
|
||||||
background: var(--surface0);
|
|
||||||
color: var(--text);
|
|
||||||
font-size: 13px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-input:disabled {
|
|
||||||
opacity: 0.7;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
7
src/lib/components/index.ts
Normal file
7
src/lib/components/index.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export * from "./toolbar";
|
||||||
|
export * from "./process";
|
||||||
|
export * from "./stats";
|
||||||
|
export * from "./modals";
|
||||||
|
export { default as AppInfo } from "./AppInfo.svelte";
|
||||||
|
export { default as TitleBar } from "./TitleBar.svelte";
|
||||||
|
export { default as ThemeSwitcher } from "./ThemeSwitcher.svelte";
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Modal from "./Modal.svelte";
|
import { Modal } from "$lib/components";
|
||||||
|
|
||||||
interface Process {
|
interface Process {
|
||||||
pid: number;
|
pid: number;
|
||||||
@ -1,6 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Modal from "./Modal.svelte";
|
import { Modal } from "$lib/components";
|
||||||
import { formatStatus, formatUptime } from "$lib/utils";
|
import { formatUptime, formatBytes, formatDate } from "$lib/utils";
|
||||||
import type { Process } from "$lib/types";
|
import type { Process } from "$lib/types";
|
||||||
import Fa from "svelte-fa";
|
import Fa from "svelte-fa";
|
||||||
import {
|
import {
|
||||||
@ -8,34 +8,15 @@
|
|||||||
faMemory,
|
faMemory,
|
||||||
faMicrochip,
|
faMicrochip,
|
||||||
faHardDrive,
|
faHardDrive,
|
||||||
faNetworkWired,
|
|
||||||
} from "@fortawesome/free-solid-svg-icons";
|
} from "@fortawesome/free-solid-svg-icons";
|
||||||
|
|
||||||
export let show = false;
|
export let show = false;
|
||||||
export let process: Process | null = null;
|
export let process: Process | null = null;
|
||||||
export let onClose: () => void;
|
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>
|
</script>
|
||||||
|
|
||||||
<Modal {show} title="Process Details" maxWidth="700px" {onClose}>
|
<Modal {show} title="Process Details" maxWidth="700px" {onClose}>
|
||||||
{#if currentProcess}
|
{#if process}
|
||||||
<div class="process-details">
|
<div class="process-details">
|
||||||
<!-- Basic Info Section -->
|
<!-- Basic Info Section -->
|
||||||
<section class="detail-section">
|
<section class="detail-section">
|
||||||
@ -43,25 +24,23 @@
|
|||||||
<div class="detail-grid">
|
<div class="detail-grid">
|
||||||
<div class="detail-row">
|
<div class="detail-row">
|
||||||
<span class="detail-label">Name:</span>
|
<span class="detail-label">Name:</span>
|
||||||
<span class="detail-value">{currentProcess.name}</span>
|
<span class="detail-value">{process.name}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-row">
|
<div class="detail-row">
|
||||||
<span class="detail-label">PID:</span>
|
<span class="detail-label">PID:</span>
|
||||||
<span class="detail-value">{currentProcess.pid}</span>
|
<span class="detail-value">{process.pid}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-row">
|
<div class="detail-row">
|
||||||
<span class="detail-label">Parent PID:</span>
|
<span class="detail-label">Parent PID:</span>
|
||||||
<span class="detail-value">{currentProcess.ppid}</span>
|
<span class="detail-value">{process.ppid}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-row">
|
<div class="detail-row">
|
||||||
<span class="detail-label">User:</span>
|
<span class="detail-label">User:</span>
|
||||||
<span class="detail-value">{currentProcess.user}</span>
|
<span class="detail-value">{process.user}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-row">
|
<div class="detail-row">
|
||||||
<span class="detail-label">Status:</span>
|
<span class="detail-label">Status:</span>
|
||||||
<span class="detail-value">
|
<span class="detail-value">{process.status}</span>
|
||||||
{@html formatStatus(currentProcess.status)}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -80,12 +59,12 @@
|
|||||||
<div class="progress-bar">
|
<div class="progress-bar">
|
||||||
<div
|
<div
|
||||||
class="progress-fill"
|
class="progress-fill"
|
||||||
style="width: {currentProcess.cpu_usage}%"
|
style="width: {process.cpu_usage}%"
|
||||||
class:high={currentProcess.cpu_usage > 50}
|
class:high={process.cpu_usage > 50}
|
||||||
class:critical={currentProcess.cpu_usage > 80}
|
class:critical={process.cpu_usage > 80}
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<span>{currentProcess.cpu_usage.toFixed(1)}%</span>
|
<span>{process.cpu_usage.toFixed(1)}%</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -96,8 +75,8 @@
|
|||||||
<span>Memory Usage</span>
|
<span>Memory Usage</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="resource-stats">
|
<div class="resource-stats">
|
||||||
<div>Physical: {formatBytes(currentProcess.memory_usage)}</div>
|
<div>Physical: {formatBytes(process.memory_usage)}</div>
|
||||||
<div>Virtual: {formatBytes(currentProcess.virtual_memory)}</div>
|
<div>Virtual: {formatBytes(process.virtual_memory)}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -108,8 +87,8 @@
|
|||||||
<span>Disk I/O</span>
|
<span>Disk I/O</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="resource-stats">
|
<div class="resource-stats">
|
||||||
<div>Read: {formatBytes(currentProcess.disk_usage[0])}</div>
|
<div>Read: {formatBytes(process.disk_usage[0])}</div>
|
||||||
<div>Written: {formatBytes(currentProcess.disk_usage[1])}</div>
|
<div>Written: {formatBytes(process.disk_usage[1])}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -120,8 +99,8 @@
|
|||||||
<span>Time Information</span>
|
<span>Time Information</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="resource-stats">
|
<div class="resource-stats">
|
||||||
<div>Started: {formatDate(currentProcess.start_time)}</div>
|
<div>Started: {formatDate(process.start_time)}</div>
|
||||||
<div>Running: {formatUptime(currentProcess.run_time)}</div>
|
<div>Running: {formatUptime(process.run_time)}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -133,17 +112,17 @@
|
|||||||
<div class="detail-grid">
|
<div class="detail-grid">
|
||||||
<div class="detail-row full-width">
|
<div class="detail-row full-width">
|
||||||
<span class="detail-label">Command:</span>
|
<span class="detail-label">Command:</span>
|
||||||
<span class="detail-value command">{currentProcess.command}</span>
|
<span class="detail-value command">{process.command}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-row full-width">
|
<div class="detail-row full-width">
|
||||||
<span class="detail-label">Root:</span>
|
<span class="detail-label">Root:</span>
|
||||||
<span class="detail-value path">{currentProcess.root}</span>
|
<span class="detail-value path">{process.root}</span>
|
||||||
</div>
|
</div>
|
||||||
{#if currentProcess.environ.length > 0}
|
{#if process.environ.length > 0}
|
||||||
<div class="detail-row full-width">
|
<div class="detail-row full-width">
|
||||||
<span class="detail-label">Environment:</span>
|
<span class="detail-label">Environment:</span>
|
||||||
<div class="detail-value env-vars">
|
<div class="detail-value env-vars">
|
||||||
{#each currentProcess.environ as env}
|
{#each process.environ as env}
|
||||||
<div class="env-var">{env}</div>
|
<div class="env-var">{env}</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
3
src/lib/components/modals/index.ts
Normal file
3
src/lib/components/modals/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export { default as Modal } from "./Modal.svelte";
|
||||||
|
export { default as ProcessDetailsModal } from "./ProcessDetailsModal.svelte";
|
||||||
|
export { default as KillProcessModal } from "./KillProcessModal.svelte";
|
||||||
164
src/lib/components/process/ActionButtons.svelte
Normal file
164
src/lib/components/process/ActionButtons.svelte
Normal file
@ -0,0 +1,164 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import {
|
||||||
|
faThumbtack,
|
||||||
|
faInfoCircle,
|
||||||
|
faXmark,
|
||||||
|
} from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import Fa from "svelte-fa";
|
||||||
|
import type { Process } from "$lib/types";
|
||||||
|
|
||||||
|
export let process: Process;
|
||||||
|
export let isPinned: boolean;
|
||||||
|
export let onTogglePin: (command: string) => void;
|
||||||
|
export let onShowDetails: (process: Process) => void;
|
||||||
|
export let onKillProcess: (process: Process) => void;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<td class="col-actions">
|
||||||
|
<div class="action-buttons">
|
||||||
|
<button
|
||||||
|
class="btn-action pin-btn"
|
||||||
|
class:pinned={isPinned}
|
||||||
|
on:click={() => onTogglePin(process.command)}
|
||||||
|
title={isPinned ? "Unpin" : "Pin"}
|
||||||
|
>
|
||||||
|
<Fa icon={faThumbtack} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn-action info-btn"
|
||||||
|
on:click={() => onShowDetails(process)}
|
||||||
|
title="Show Details"
|
||||||
|
>
|
||||||
|
<Fa icon={faInfoCircle} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn-action kill-btn"
|
||||||
|
on:click={() => onKillProcess(process)}
|
||||||
|
title="End Process"
|
||||||
|
>
|
||||||
|
<Fa icon={faXmark} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
td {
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-bottom: 1px solid var(--surface0);
|
||||||
|
color: var(--text);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.col-actions {
|
||||||
|
position: sticky;
|
||||||
|
right: 0;
|
||||||
|
z-index: 2;
|
||||||
|
background: var(--base);
|
||||||
|
border-left: 1px solid var(--surface0);
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-action {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
background: transparent;
|
||||||
|
border-radius: 6px;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-action::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
opacity: 0.1;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-action:hover::before {
|
||||||
|
opacity: 0.15;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pin-btn {
|
||||||
|
color: var(--sapphire);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pin-btn::before {
|
||||||
|
background: var(--sapphire);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pin-btn.pinned {
|
||||||
|
color: var(--blue);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pin-btn.pinned::before {
|
||||||
|
background: var(--blue);
|
||||||
|
opacity: 0.15;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-btn {
|
||||||
|
color: var(--lavender);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-btn::before {
|
||||||
|
background: var(--lavender);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kill-btn {
|
||||||
|
color: var(--red);
|
||||||
|
border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kill-btn:hover {
|
||||||
|
color: var(--base);
|
||||||
|
background: var(--red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kill-btn:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-action:hover {
|
||||||
|
box-shadow: 0 0 12px color-mix(in srgb, currentColor 20%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-action:active {
|
||||||
|
transform: translateY(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pin-btn.pinned:active {
|
||||||
|
transform: rotate(45deg) translateY(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-action:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-action:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-action:disabled:hover {
|
||||||
|
transform: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-action:disabled::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
84
src/lib/components/process/ProcessIcon.svelte
Normal file
84
src/lib/components/process/ProcessIcon.svelte
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as SimpleIcons from "simple-icons";
|
||||||
|
|
||||||
|
export let processName: string;
|
||||||
|
export let size: number = 16;
|
||||||
|
|
||||||
|
function handleImageError(event: Event) {
|
||||||
|
const img = event.target as HTMLImageElement;
|
||||||
|
img.src = getIconForProcess("default");
|
||||||
|
img.onerror = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getIconForProcess(name: string): string {
|
||||||
|
// First try with com.company.something pattern
|
||||||
|
if (name.startsWith("com.")) {
|
||||||
|
const companyName = name.replace(/^com\.([^.]+)\..*$/, "$1");
|
||||||
|
const formattedCompanyName =
|
||||||
|
companyName.charAt(0).toUpperCase() + companyName.slice(1);
|
||||||
|
const companyIconKey = `si${formattedCompanyName}`;
|
||||||
|
const companyIcon =
|
||||||
|
SimpleIcons[companyIconKey as keyof typeof SimpleIcons];
|
||||||
|
|
||||||
|
if (companyIcon) {
|
||||||
|
// Use theme color instead of brand color
|
||||||
|
const color = getComputedStyle(document.documentElement)
|
||||||
|
.getPropertyValue("--text")
|
||||||
|
.trim();
|
||||||
|
const svg =
|
||||||
|
typeof companyIcon === "object" && "svg" in companyIcon
|
||||||
|
? companyIcon.svg
|
||||||
|
: "";
|
||||||
|
const svgWithColor = svg.replace("<svg", `<svg fill="${color}"`);
|
||||||
|
return `data:image/svg+xml;base64,${btoa(svgWithColor)}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// If no company icon found, fall back to original implementation
|
||||||
|
const cleanName = name
|
||||||
|
.replace(/\.(app|exe)$/i, "")
|
||||||
|
.replace(/[-_./\\]/g, " ")
|
||||||
|
.split(" ")[0]
|
||||||
|
.trim()
|
||||||
|
.toLowerCase();
|
||||||
|
|
||||||
|
const formattedName =
|
||||||
|
cleanName.charAt(0).toUpperCase() + cleanName.slice(1);
|
||||||
|
const iconKey = `si${formattedName}`;
|
||||||
|
let simpleIcon = SimpleIcons[iconKey as keyof typeof SimpleIcons];
|
||||||
|
|
||||||
|
// Default icon if no match found
|
||||||
|
if (!simpleIcon) {
|
||||||
|
simpleIcon = SimpleIcons.siGhostery;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use theme color instead of brand color
|
||||||
|
const color = getComputedStyle(document.documentElement)
|
||||||
|
.getPropertyValue("--text")
|
||||||
|
.trim();
|
||||||
|
|
||||||
|
const svg =
|
||||||
|
typeof simpleIcon === "object" && "svg" in simpleIcon
|
||||||
|
? simpleIcon.svg
|
||||||
|
: "";
|
||||||
|
const svgWithColor = svg.replace("<svg", `<svg fill="${color}"`);
|
||||||
|
return `data:image/svg+xml;base64,${btoa(svgWithColor)}`;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<img
|
||||||
|
class="process-icon"
|
||||||
|
src={getIconForProcess(processName)}
|
||||||
|
alt=""
|
||||||
|
height={size}
|
||||||
|
width={size}
|
||||||
|
on:error={handleImageError}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.process-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
79
src/lib/components/process/ProcessRow.svelte
Normal file
79
src/lib/components/process/ProcessRow.svelte
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Process, Column } from "$lib/types";
|
||||||
|
import { ProcessIcon, ActionButtons } from "$lib/components";
|
||||||
|
|
||||||
|
export let process: Process;
|
||||||
|
export let columns: Column[];
|
||||||
|
export let isPinned: boolean;
|
||||||
|
export let isHighUsage: boolean;
|
||||||
|
|
||||||
|
export let onTogglePin: (command: string) => void;
|
||||||
|
export let onShowDetails: (process: Process) => void;
|
||||||
|
export let onKillProcess: (process: Process) => void;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<tr class:high-usage={isHighUsage} class:pinned={isPinned}>
|
||||||
|
{#each columns.filter((col) => col.visible) as column}
|
||||||
|
<td class="truncate">
|
||||||
|
{#if column.id === "name"}
|
||||||
|
<div class="name-cell">
|
||||||
|
<ProcessIcon processName={process.name} />
|
||||||
|
<span class="process-name">{process.name}</span>
|
||||||
|
</div>
|
||||||
|
{:else if column.format}
|
||||||
|
{@html column.format(process[column.id])}
|
||||||
|
{:else}
|
||||||
|
{process[column.id]}
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
|
{/each}
|
||||||
|
<ActionButtons
|
||||||
|
{process}
|
||||||
|
{isPinned}
|
||||||
|
{onTogglePin}
|
||||||
|
{onShowDetails}
|
||||||
|
{onKillProcess}
|
||||||
|
/>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
td {
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-bottom: 1px solid var(--surface0);
|
||||||
|
color: var(--text);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.truncate {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:hover {
|
||||||
|
background-color: var(--surface0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.high-usage {
|
||||||
|
background-color: color-mix(in srgb, var(--red) 10%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.high-usage:hover {
|
||||||
|
background-color: color-mix(in srgb, var(--red) 15%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.pinned {
|
||||||
|
background-color: color-mix(in srgb, var(--blue) 10%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.pinned:hover {
|
||||||
|
background-color: color-mix(in srgb, var(--blue) 15%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-cell {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
77
src/lib/components/process/ProcessTable.svelte
Normal file
77
src/lib/components/process/ProcessTable.svelte
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Process, Column } from "$lib/types";
|
||||||
|
import { TableHeader, ProcessRow } from "$lib/components";
|
||||||
|
|
||||||
|
export let processes: Process[];
|
||||||
|
export let columns: Column[];
|
||||||
|
export let systemStats: { memory_total: number } | null;
|
||||||
|
export let sortConfig: { field: keyof Process; direction: "asc" | "desc" };
|
||||||
|
export let pinnedProcesses: Set<string>;
|
||||||
|
|
||||||
|
export let onToggleSort: (field: keyof Process) => void;
|
||||||
|
export let onTogglePin: (command: string) => void;
|
||||||
|
export let onShowDetails: (process: Process) => void;
|
||||||
|
export let onKillProcess: (process: Process) => void;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="table-container">
|
||||||
|
<table>
|
||||||
|
<TableHeader {columns} {sortConfig} {onToggleSort} />
|
||||||
|
<tbody>
|
||||||
|
{#each processes as process (process.pid)}
|
||||||
|
<ProcessRow
|
||||||
|
{process}
|
||||||
|
{columns}
|
||||||
|
isPinned={pinnedProcesses.has(process.command)}
|
||||||
|
isHighUsage={process.cpu_usage > 50 ||
|
||||||
|
process.memory_usage / (systemStats?.memory_total || 0) > 0.1}
|
||||||
|
{onTogglePin}
|
||||||
|
{onShowDetails}
|
||||||
|
{onKillProcess}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.table-container {
|
||||||
|
flex: 1;
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: auto;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: var(--surface2) var(--mantle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container::-webkit-scrollbar-track {
|
||||||
|
background: var(--mantle);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--surface2);
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--surface1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container::-webkit-scrollbar-corner {
|
||||||
|
background: var(--mantle);
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: max-content;
|
||||||
|
min-width: 100%;
|
||||||
|
table-layout: fixed;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
79
src/lib/components/process/TableHeader.svelte
Normal file
79
src/lib/components/process/TableHeader.svelte
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Process, Column } from "$lib/types";
|
||||||
|
|
||||||
|
export let columns: Column[];
|
||||||
|
export let sortConfig: { field: keyof Process; direction: "asc" | "desc" };
|
||||||
|
export let onToggleSort: (field: keyof Process) => void;
|
||||||
|
|
||||||
|
function getSortIndicator(field: keyof Process) {
|
||||||
|
if (sortConfig.field !== field) return "↕";
|
||||||
|
return sortConfig.direction === "asc" ? "↑" : "↓";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
{#each columns.filter((col) => col.visible) as column}
|
||||||
|
<th class="sortable" on:click={() => onToggleSort(column.id)}>
|
||||||
|
<div class="th-content">
|
||||||
|
{column.label}
|
||||||
|
<span
|
||||||
|
class="sort-indicator"
|
||||||
|
class:active={sortConfig.field === column.id}
|
||||||
|
>
|
||||||
|
{getSortIndicator(column.id)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
{/each}
|
||||||
|
<th>Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
th {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
background: var(--mantle);
|
||||||
|
text-align: left;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--subtext0);
|
||||||
|
border-bottom: 1px solid var(--surface0);
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
th:last-child {
|
||||||
|
width: 120px;
|
||||||
|
min-width: 120px;
|
||||||
|
max-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sortable {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.th-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-indicator {
|
||||||
|
color: var(--overlay0);
|
||||||
|
font-size: 12px;
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-indicator.active {
|
||||||
|
color: var(--blue);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sortable:hover .sort-indicator {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
5
src/lib/components/process/index.ts
Normal file
5
src/lib/components/process/index.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export { default as ProcessTable } from "./ProcessTable.svelte";
|
||||||
|
export { default as ProcessRow } from "./ProcessRow.svelte";
|
||||||
|
export { default as TableHeader } from "./TableHeader.svelte";
|
||||||
|
export { default as ActionButtons } from "./ActionButtons.svelte";
|
||||||
|
export { default as ProcessIcon } from "./ProcessIcon.svelte";
|
||||||
59
src/lib/components/stats/CpuPanel.svelte
Normal file
59
src/lib/components/stats/CpuPanel.svelte
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { faMicrochip } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { PanelHeader, ProgressBar } from "$lib/components";
|
||||||
|
import { formatPercentage } from "$lib/utils";
|
||||||
|
|
||||||
|
export let cpuUsage: number[];
|
||||||
|
|
||||||
|
$: averageUsage = formatPercentage(
|
||||||
|
cpuUsage.reduce((a, b) => a + b, 0) / cpuUsage.length,
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="stat-panel">
|
||||||
|
<PanelHeader icon={faMicrochip} title="CPU Usage" usageValue={averageUsage} />
|
||||||
|
<div class="stats-content cpu-grid">
|
||||||
|
{#each cpuUsage as usage, i}
|
||||||
|
<div class="stat-item with-progress">
|
||||||
|
<ProgressBar
|
||||||
|
label={`Core ${i}`}
|
||||||
|
value={usage}
|
||||||
|
labelWidth="2.5rem"
|
||||||
|
valueWidth="2.5rem"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.stat-panel {
|
||||||
|
flex: 2.5;
|
||||||
|
min-width: 0;
|
||||||
|
background-color: var(--mantle);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cpu-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 0.4rem 2rem;
|
||||||
|
height: auto;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item.with-progress {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
56
src/lib/components/stats/MemoryPanel.svelte
Normal file
56
src/lib/components/stats/MemoryPanel.svelte
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { faMemory } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { PanelHeader, ProgressBar, StatItem } from "$lib/components";
|
||||||
|
import { formatMemorySize, formatPercentage } from "$lib/utils";
|
||||||
|
|
||||||
|
export let memoryTotal: number;
|
||||||
|
export let memoryUsed: number;
|
||||||
|
export let memoryFree: number;
|
||||||
|
|
||||||
|
$: memoryPercentage = (memoryUsed / memoryTotal) * 100;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="stat-panel">
|
||||||
|
<PanelHeader
|
||||||
|
icon={faMemory}
|
||||||
|
title="Memory"
|
||||||
|
usageValue={formatPercentage(memoryPercentage)}
|
||||||
|
/>
|
||||||
|
<div class="stats-content">
|
||||||
|
<div class="stat-item with-progress">
|
||||||
|
<ProgressBar
|
||||||
|
label="Memory usage"
|
||||||
|
value={memoryPercentage}
|
||||||
|
labelWidth="5rem"
|
||||||
|
valueWidth="2.5rem"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<StatItem label="Total" value={formatMemorySize(memoryTotal)} />
|
||||||
|
<StatItem label="Used" value={formatMemorySize(memoryUsed)} />
|
||||||
|
<StatItem label="Free" value={formatMemorySize(memoryFree)} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.stat-panel {
|
||||||
|
flex: 2;
|
||||||
|
min-width: 0;
|
||||||
|
background-color: var(--mantle);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item.with-progress {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
34
src/lib/components/stats/NetworkPanel.svelte
Normal file
34
src/lib/components/stats/NetworkPanel.svelte
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { faNetworkWired } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { PanelHeader, StatItem } from "$lib/components";
|
||||||
|
import { formatBytes } from "$lib/utils";
|
||||||
|
|
||||||
|
export let networkRxBytes: number;
|
||||||
|
export let networkTxBytes: number;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="stat-panel">
|
||||||
|
<PanelHeader icon={faNetworkWired} title="Network I/O" />
|
||||||
|
<div class="network-stats">
|
||||||
|
<StatItem label="↓ Receiving" value={formatBytes(networkRxBytes)} />
|
||||||
|
<StatItem label="↑ Sending" value={formatBytes(networkTxBytes)} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.stat-panel {
|
||||||
|
flex: 0.8;
|
||||||
|
min-width: 125px;
|
||||||
|
background-color: var(--mantle);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-stats {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
50
src/lib/components/stats/PanelHeader.svelte
Normal file
50
src/lib/components/stats/PanelHeader.svelte
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import Fa from "svelte-fa";
|
||||||
|
import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
|
||||||
|
export let icon: IconDefinition;
|
||||||
|
export let title: string;
|
||||||
|
export let usageValue: string | null = null;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="panel-header">
|
||||||
|
<Fa {icon} />
|
||||||
|
<h3>{title}</h3>
|
||||||
|
{#if usageValue}
|
||||||
|
<div class="usage-pill">{usageValue}</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.panel-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
border-bottom: 1px solid var(--surface0);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header h3 {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header :global(svg) {
|
||||||
|
color: var(--blue);
|
||||||
|
width: 0.8rem;
|
||||||
|
height: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usage-pill {
|
||||||
|
margin-left: auto;
|
||||||
|
background: var(--surface0);
|
||||||
|
padding: 0.15rem 0.5rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
80
src/lib/components/stats/ProgressBar.svelte
Normal file
80
src/lib/components/stats/ProgressBar.svelte
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let label: string;
|
||||||
|
export let value: number;
|
||||||
|
export let labelWidth = "2.5rem";
|
||||||
|
export let valueWidth = "2.5rem";
|
||||||
|
|
||||||
|
function getUsageClass(usage: number): string {
|
||||||
|
if (usage > 90) return "critical";
|
||||||
|
if (usage > 75) return "high";
|
||||||
|
if (usage > 50) return "medium";
|
||||||
|
return "low";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-container"
|
||||||
|
style="--label-width: {labelWidth}; --value-width: {valueWidth}"
|
||||||
|
>
|
||||||
|
<span class="label">{label}</span>
|
||||||
|
<div class="bar-container">
|
||||||
|
<div
|
||||||
|
class="usage-bar {getUsageClass(value)}"
|
||||||
|
style="transform: translateX({value - 100}%);"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<span class="value">{Math.round(value)}%</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.progress-container {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: var(--label-width) 1fr var(--value-width);
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: var(--subtext0);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
color: var(--text);
|
||||||
|
text-align: right;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-container {
|
||||||
|
height: 8px;
|
||||||
|
background: var(--surface0);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usage-bar {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
transform-origin: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usage-bar.low {
|
||||||
|
background: var(--blue);
|
||||||
|
}
|
||||||
|
.usage-bar.medium {
|
||||||
|
background: var(--yellow);
|
||||||
|
}
|
||||||
|
.usage-bar.high {
|
||||||
|
background: var(--peach);
|
||||||
|
}
|
||||||
|
.usage-bar.critical {
|
||||||
|
background: var(--red);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
30
src/lib/components/stats/StatItem.svelte
Normal file
30
src/lib/components/stats/StatItem.svelte
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let label: string;
|
||||||
|
export let value: string;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="stat-item">
|
||||||
|
<span>{label}</span>
|
||||||
|
<span>{value}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.stat-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item span:first-child {
|
||||||
|
color: var(--subtext0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item span:last-child {
|
||||||
|
color: var(--text);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
34
src/lib/components/stats/StatPanel.svelte
Normal file
34
src/lib/components/stats/StatPanel.svelte
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let title: string;
|
||||||
|
export let flex = 1;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="stat-panel" style="--flex: {flex}">
|
||||||
|
<h3 class="panel-title">{title}</h3>
|
||||||
|
<div class="panel-content">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.stat-panel {
|
||||||
|
flex: var(--flex);
|
||||||
|
min-width: 125px;
|
||||||
|
background: var(--mantle);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-title {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--subtext0);
|
||||||
|
margin: 0 0 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
52
src/lib/components/stats/StatsBar.svelte
Normal file
52
src/lib/components/stats/StatsBar.svelte
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { SystemStats } from "$lib/types";
|
||||||
|
import {
|
||||||
|
CpuPanel,
|
||||||
|
MemoryPanel,
|
||||||
|
StoragePanel,
|
||||||
|
SystemPanel,
|
||||||
|
NetworkPanel,
|
||||||
|
} from "$lib/components";
|
||||||
|
|
||||||
|
export let systemStats: SystemStats | null = null;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="dashboard-stats">
|
||||||
|
{#if systemStats}
|
||||||
|
<div class="stats-layout">
|
||||||
|
<CpuPanel cpuUsage={systemStats.cpu_usage} />
|
||||||
|
|
||||||
|
<MemoryPanel
|
||||||
|
memoryTotal={systemStats.memory_total}
|
||||||
|
memoryUsed={systemStats.memory_used}
|
||||||
|
memoryFree={systemStats.memory_free}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<StoragePanel
|
||||||
|
diskTotalBytes={systemStats.disk_total_bytes}
|
||||||
|
diskUsedBytes={systemStats.disk_used_bytes}
|
||||||
|
diskFreeBytes={systemStats.disk_free_bytes}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SystemPanel uptime={systemStats.uptime} loadAvg={systemStats.load_avg} />
|
||||||
|
|
||||||
|
<NetworkPanel
|
||||||
|
networkRxBytes={systemStats.network_rx_bytes}
|
||||||
|
networkTxBytes={systemStats.network_tx_bytes}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.dashboard-stats {
|
||||||
|
padding: 0.5rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-layout {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
42
src/lib/components/stats/StoragePanel.svelte
Normal file
42
src/lib/components/stats/StoragePanel.svelte
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { faHardDrive } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { PanelHeader, StatItem } from "$lib/components";
|
||||||
|
import { formatBytes, formatPercentage } from "$lib/utils";
|
||||||
|
|
||||||
|
export let diskTotalBytes: number;
|
||||||
|
export let diskUsedBytes: number;
|
||||||
|
export let diskFreeBytes: number;
|
||||||
|
|
||||||
|
$: diskUsagePercentage = (diskUsedBytes / diskTotalBytes) * 100;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="stat-panel">
|
||||||
|
<PanelHeader
|
||||||
|
icon={faHardDrive}
|
||||||
|
title="Storage"
|
||||||
|
usageValue={formatPercentage(diskUsagePercentage)}
|
||||||
|
/>
|
||||||
|
<div class="stats-content">
|
||||||
|
<StatItem label="Total" value={formatBytes(diskTotalBytes)} />
|
||||||
|
<StatItem label="Used" value={formatBytes(diskUsedBytes)} />
|
||||||
|
<StatItem label="Free" value={formatBytes(diskFreeBytes)} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.stat-panel {
|
||||||
|
flex: 0.8;
|
||||||
|
min-width: 125px;
|
||||||
|
background-color: var(--mantle);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
37
src/lib/components/stats/SystemPanel.svelte
Normal file
37
src/lib/components/stats/SystemPanel.svelte
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { faServer } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { PanelHeader, StatItem } from "$lib/components";
|
||||||
|
import { formatUptime } from "$lib/utils";
|
||||||
|
|
||||||
|
export let uptime: number;
|
||||||
|
export let loadAvg: [number, number, number];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="stat-panel">
|
||||||
|
<PanelHeader icon={faServer} title="System" />
|
||||||
|
<div class="system-grid">
|
||||||
|
<StatItem label="Uptime" value={formatUptime(uptime)} />
|
||||||
|
<StatItem label="1m Load" value={loadAvg[0].toFixed(2)} />
|
||||||
|
<StatItem label="5m Load" value={loadAvg[1].toFixed(2)} />
|
||||||
|
<StatItem label="15m Load" value={loadAvg[2].toFixed(2)} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.stat-panel {
|
||||||
|
flex: 0.8;
|
||||||
|
min-width: 125px;
|
||||||
|
background-color: var(--mantle);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.system-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.4rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
9
src/lib/components/stats/index.ts
Normal file
9
src/lib/components/stats/index.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
export { default as StatsBar } from "./StatsBar.svelte";
|
||||||
|
export { default as CpuPanel } from "./CpuPanel.svelte";
|
||||||
|
export { default as MemoryPanel } from "./MemoryPanel.svelte";
|
||||||
|
export { default as StoragePanel } from "./StoragePanel.svelte";
|
||||||
|
export { default as SystemPanel } from "./SystemPanel.svelte";
|
||||||
|
export { default as NetworkPanel } from "./NetworkPanel.svelte";
|
||||||
|
export { default as PanelHeader } from "./PanelHeader.svelte";
|
||||||
|
export { default as ProgressBar } from "./ProgressBar.svelte";
|
||||||
|
export { default as StatItem } from "./StatItem.svelte";
|
||||||
172
src/lib/components/toolbar/ColumnToggle.svelte
Normal file
172
src/lib/components/toolbar/ColumnToggle.svelte
Normal file
@ -0,0 +1,172 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import Fa from "svelte-fa";
|
||||||
|
import {
|
||||||
|
faChevronDown,
|
||||||
|
faChevronRight,
|
||||||
|
} from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { settingsStore } from "$lib/stores";
|
||||||
|
|
||||||
|
export let columns: Array<{
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
visible: boolean;
|
||||||
|
required?: boolean;
|
||||||
|
}>;
|
||||||
|
|
||||||
|
let showColumnMenu = false;
|
||||||
|
|
||||||
|
function handleColumnVisibilityChange(columnId: string, visible: boolean) {
|
||||||
|
settingsStore.updateConfig({
|
||||||
|
appearance: {
|
||||||
|
columnVisibility: {
|
||||||
|
...$settingsStore.appearance.columnVisibility,
|
||||||
|
[columnId]: visible,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="column-toggle">
|
||||||
|
<button
|
||||||
|
class="btn-toggle"
|
||||||
|
on:click={() => (showColumnMenu = !showColumnMenu)}
|
||||||
|
aria-label="Toggle columns"
|
||||||
|
>
|
||||||
|
Columns
|
||||||
|
<span class="icon">
|
||||||
|
{#if showColumnMenu}
|
||||||
|
<Fa icon={faChevronDown} />
|
||||||
|
{:else}
|
||||||
|
<Fa icon={faChevronRight} />
|
||||||
|
{/if}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{#if showColumnMenu}
|
||||||
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||||
|
<div class="column-menu" on:mouseleave={() => (showColumnMenu = false)}>
|
||||||
|
{#each columns as column}
|
||||||
|
<label class="column-option">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={column.visible}
|
||||||
|
disabled={column.required}
|
||||||
|
on:change={(e) =>
|
||||||
|
handleColumnVisibilityChange(column.id, e.currentTarget.checked)}
|
||||||
|
/>
|
||||||
|
<span>{column.label}</span>
|
||||||
|
</label>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.column-toggle {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--surface0);
|
||||||
|
border: 1px solid var(--surface1);
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-toggle:hover {
|
||||||
|
background: var(--surface1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--subtext0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
right: 0;
|
||||||
|
margin-top: 4px;
|
||||||
|
padding: 8px;
|
||||||
|
background: var(--base);
|
||||||
|
border: 1px solid var(--surface0);
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||||
|
z-index: 100;
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-menu::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-menu::-webkit-scrollbar-track {
|
||||||
|
background: var(--mantle);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-menu::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--surface2);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-menu::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--surface1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-option {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text);
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-option:hover {
|
||||||
|
background: var(--surface0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-option input[type="checkbox"] {
|
||||||
|
appearance: none;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1px solid var(--surface2);
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--mantle);
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-option input[type="checkbox"]:checked {
|
||||||
|
background: var(--blue);
|
||||||
|
border-color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-option input[type="checkbox"]:checked::after {
|
||||||
|
content: "✓";
|
||||||
|
position: absolute;
|
||||||
|
color: var(--base);
|
||||||
|
font-size: 12px;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-option input[type="checkbox"]:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
148
src/lib/components/toolbar/PaginationControls.svelte
Normal file
148
src/lib/components/toolbar/PaginationControls.svelte
Normal file
@ -0,0 +1,148 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { AppConfig } from "$lib/types";
|
||||||
|
import { settingsStore } from "$lib/stores";
|
||||||
|
import { ITEMS_PER_PAGE_OPTIONS } from "$lib/constants";
|
||||||
|
|
||||||
|
export let itemsPerPage: number;
|
||||||
|
export let currentPage: number;
|
||||||
|
export let totalPages: number;
|
||||||
|
export let totalResults: number;
|
||||||
|
|
||||||
|
function changePage(page: number) {
|
||||||
|
if (page >= 1 && page <= totalPages) {
|
||||||
|
currentPage = page;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
|
||||||
|
settingsStore.updateConfig({
|
||||||
|
behavior: {
|
||||||
|
...$settingsStore.behavior,
|
||||||
|
[key]: value,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="pagination-controls">
|
||||||
|
<select
|
||||||
|
class="select-input"
|
||||||
|
bind:value={itemsPerPage}
|
||||||
|
on:change={() => updateBehaviorConfig("itemsPerPage", itemsPerPage)}
|
||||||
|
aria-label="Items per page"
|
||||||
|
>
|
||||||
|
{#each ITEMS_PER_PAGE_OPTIONS as option}
|
||||||
|
<option value={option}>{option} per page</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<div class="pagination">
|
||||||
|
<button
|
||||||
|
class="btn-page"
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
on:click={() => changePage(1)}
|
||||||
|
>
|
||||||
|
««
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn-page"
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
on:click={() => changePage(currentPage - 1)}
|
||||||
|
>
|
||||||
|
«
|
||||||
|
</button>
|
||||||
|
<div class="page-info">
|
||||||
|
<span>Page {currentPage} of {totalPages}</span>
|
||||||
|
<span class="results-info">({totalResults} processes)</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="btn-page"
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
on:click={() => changePage(currentPage + 1)}
|
||||||
|
>
|
||||||
|
»
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn-page"
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
on:click={() => changePage(totalPages)}
|
||||||
|
>
|
||||||
|
»»
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.pagination-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-input {
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--surface0);
|
||||||
|
border: 1px solid var(--surface1);
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
appearance: none;
|
||||||
|
padding-right: 24px;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 8px center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-input:hover {
|
||||||
|
background-color: var(--surface1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-page {
|
||||||
|
padding: 6px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--surface0);
|
||||||
|
border: 1px solid var(--surface1);
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-page:hover:not(:disabled) {
|
||||||
|
background: var(--surface1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-page:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-info {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--subtext0);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-info span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.results-info {
|
||||||
|
color: var(--overlay0);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
109
src/lib/components/toolbar/RefreshControls.svelte
Normal file
109
src/lib/components/toolbar/RefreshControls.svelte
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import Fa from "svelte-fa";
|
||||||
|
import { faPlay, faPause } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import type { AppConfig } from "$lib/types";
|
||||||
|
import { settingsStore } from "$lib/stores";
|
||||||
|
import { REFRESH_RATE_OPTIONS } from "$lib/constants";
|
||||||
|
export let refreshRate: number;
|
||||||
|
export let isFrozen: boolean;
|
||||||
|
|
||||||
|
function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
|
||||||
|
settingsStore.updateConfig({
|
||||||
|
behavior: {
|
||||||
|
...$settingsStore.behavior,
|
||||||
|
[key]: value,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="refresh-controls">
|
||||||
|
<select
|
||||||
|
class="select-input"
|
||||||
|
bind:value={refreshRate}
|
||||||
|
on:change={() => updateBehaviorConfig("refreshRate", refreshRate)}
|
||||||
|
disabled={isFrozen}
|
||||||
|
>
|
||||||
|
{#each REFRESH_RATE_OPTIONS as option}
|
||||||
|
<option value={option.value}>{option.label}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
<button
|
||||||
|
class="btn-action"
|
||||||
|
class:frozen={isFrozen}
|
||||||
|
on:click={() => (isFrozen = !isFrozen)}
|
||||||
|
title={isFrozen ? "Resume Updates" : "Pause Updates"}
|
||||||
|
>
|
||||||
|
{#if isFrozen}
|
||||||
|
<Fa icon={faPlay} />
|
||||||
|
{:else}
|
||||||
|
<Fa icon={faPause} />
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.refresh-controls {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refresh-controls :global(svg) {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--subtext0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-action {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border: none;
|
||||||
|
background: var(--surface0);
|
||||||
|
color: var(--text);
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-action:hover {
|
||||||
|
background: var(--surface1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-action.frozen {
|
||||||
|
background: var(--blue);
|
||||||
|
color: var(--base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-input {
|
||||||
|
height: 28px;
|
||||||
|
padding: 0 8px;
|
||||||
|
border: 1px solid var(--surface1);
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--surface0);
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
appearance: none;
|
||||||
|
padding-right: 24px;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 8px center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-input:hover {
|
||||||
|
background-color: var(--surface1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-input:disabled {
|
||||||
|
opacity: 0.7;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
90
src/lib/components/toolbar/SearchBox.svelte
Normal file
90
src/lib/components/toolbar/SearchBox.svelte
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let searchTerm: string;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="search-box">
|
||||||
|
<div class="search-input-wrapper">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search processes"
|
||||||
|
bind:value={searchTerm}
|
||||||
|
class="search-input"
|
||||||
|
/>
|
||||||
|
{#if searchTerm}
|
||||||
|
<button class="btn-clear" on:click={() => (searchTerm = "")}>
|
||||||
|
Clear
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.search-box {
|
||||||
|
width: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input-wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 28px;
|
||||||
|
padding: 0 12px;
|
||||||
|
padding-right: 70px;
|
||||||
|
border: 1px solid var(--surface1);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
background-color: var(--surface0);
|
||||||
|
color: var(--text);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-clear {
|
||||||
|
position: absolute;
|
||||||
|
right: 4px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
padding: 4px 8px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--subtext0);
|
||||||
|
background: var(--surface1);
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-clear:hover {
|
||||||
|
background: var(--surface2);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input::-webkit-search-cancel-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
height: 14px;
|
||||||
|
width: 14px;
|
||||||
|
margin-right: 4px;
|
||||||
|
background: var(--overlay0);
|
||||||
|
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")
|
||||||
|
no-repeat 50% 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input::-webkit-search-cancel-button:hover {
|
||||||
|
background: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input:hover {
|
||||||
|
background-color: var(--surface1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--blue);
|
||||||
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 25%, transparent);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
60
src/lib/components/toolbar/StatusFilter.svelte
Normal file
60
src/lib/components/toolbar/StatusFilter.svelte
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { STATUS_OPTIONS } from "$lib/constants";
|
||||||
|
import type { AppConfig } from "$lib/types";
|
||||||
|
import { settingsStore } from "$lib/stores";
|
||||||
|
|
||||||
|
export let statusFilter: string = "all";
|
||||||
|
|
||||||
|
function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
|
||||||
|
settingsStore.updateConfig({
|
||||||
|
behavior: {
|
||||||
|
...$settingsStore.behavior,
|
||||||
|
[key]: value,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="toolbar-group">
|
||||||
|
<select
|
||||||
|
bind:value={statusFilter}
|
||||||
|
on:change={() => updateBehaviorConfig("defaultStatusFilter", statusFilter)}
|
||||||
|
class="select-input"
|
||||||
|
>
|
||||||
|
{#each STATUS_OPTIONS as option}
|
||||||
|
<option value={option.value}>{option.label}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.select-input {
|
||||||
|
height: 28px;
|
||||||
|
padding: 0 8px;
|
||||||
|
border: 1px solid var(--surface1);
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--surface0);
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
appearance: none;
|
||||||
|
padding-right: 24px;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 8px center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-input:hover {
|
||||||
|
background-color: var(--surface1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-input:disabled {
|
||||||
|
opacity: 0.7;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
68
src/lib/components/toolbar/ToolBar.svelte
Normal file
68
src/lib/components/toolbar/ToolBar.svelte
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import {
|
||||||
|
AppInfo,
|
||||||
|
StatusFilter,
|
||||||
|
SearchBox,
|
||||||
|
RefreshControls,
|
||||||
|
PaginationControls,
|
||||||
|
ColumnToggle,
|
||||||
|
} from "$lib/components";
|
||||||
|
|
||||||
|
export let searchTerm: string;
|
||||||
|
export let statusFilter: string = "all";
|
||||||
|
export let itemsPerPage: number;
|
||||||
|
export let currentPage: number;
|
||||||
|
export let totalPages: number;
|
||||||
|
export let totalResults: number;
|
||||||
|
export let columns: Array<{
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
visible: boolean;
|
||||||
|
required?: boolean;
|
||||||
|
}>;
|
||||||
|
export let refreshRate: number;
|
||||||
|
export let isFrozen: boolean;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="toolbar">
|
||||||
|
<div class="toolbar-content">
|
||||||
|
<SearchBox bind:searchTerm />
|
||||||
|
<StatusFilter bind:statusFilter />
|
||||||
|
|
||||||
|
<div class="toolbar-spacer"></div>
|
||||||
|
|
||||||
|
<PaginationControls
|
||||||
|
bind:itemsPerPage
|
||||||
|
bind:currentPage
|
||||||
|
{totalPages}
|
||||||
|
{totalResults}
|
||||||
|
/>
|
||||||
|
<div class="toolbar-spacer"></div>
|
||||||
|
|
||||||
|
<ColumnToggle {columns} />
|
||||||
|
|
||||||
|
<RefreshControls bind:refreshRate bind:isFrozen />
|
||||||
|
|
||||||
|
<AppInfo />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.toolbar {
|
||||||
|
padding: 8px;
|
||||||
|
border-bottom: 1px solid var(--surface0);
|
||||||
|
background-color: var(--mantle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 0 12px;
|
||||||
|
min-width: max-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-spacer {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
6
src/lib/components/toolbar/index.ts
Normal file
6
src/lib/components/toolbar/index.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export { default as ToolBar } from "./ToolBar.svelte";
|
||||||
|
export { default as SearchBox } from "./SearchBox.svelte";
|
||||||
|
export { default as StatusFilter } from "./StatusFilter.svelte";
|
||||||
|
export { default as PaginationControls } from "./PaginationControls.svelte";
|
||||||
|
export { default as ColumnToggle } from "./ColumnToggle.svelte";
|
||||||
|
export { default as RefreshControls } from "./RefreshControls.svelte";
|
||||||
71
src/lib/constants/index.ts
Normal file
71
src/lib/constants/index.ts
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
export const ASCII_ART = `
|
||||||
|
███╗ ██╗███████╗ ██████╗ ██╗ ██╗████████╗ ██████╗ ██████╗
|
||||||
|
████╗ ██║██╔════╝██╔═══██╗██║ ██║╚══██╔══╝██╔═══██╗██╔══██╗
|
||||||
|
██╔██╗ ██║█████╗ ██║ ██║███████║ ██║ ██║ ██║██████╔╝
|
||||||
|
██║╚██╗██║██╔══╝ ██║ ██║██╔══██║ ██║ ██║ ██║██╔═══╝
|
||||||
|
██║ ╚████║███████╗╚██████╔╝██║ ██║ ██║ ╚██████╔╝██║
|
||||||
|
╚═╝ ╚═══╝╚══════╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const APP_INFO = {
|
||||||
|
name: "NeoHtop",
|
||||||
|
developer: "Abdenasser",
|
||||||
|
github: "https://github.com/Abdenasser/neohtop",
|
||||||
|
stack: ["Tauri", "Rust", "Svelte", "TypeScript"],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ITEMS_PER_PAGE_OPTIONS = [15, 25, 50, 100, 250, 500];
|
||||||
|
|
||||||
|
export const REFRESH_RATE_OPTIONS = [
|
||||||
|
{ value: 1000, label: "1s" },
|
||||||
|
{ value: 2000, label: "2s" },
|
||||||
|
{ value: 5000, label: "5s" },
|
||||||
|
{ value: 10000, label: "10s" },
|
||||||
|
{ value: 30000, label: "30s" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const STATUS_OPTIONS = [
|
||||||
|
{ value: "all", label: "All Statuses" },
|
||||||
|
{ value: "running", label: "Running" },
|
||||||
|
{ value: "sleeping", label: "Sleeping" },
|
||||||
|
{ value: "idle", label: "Idle" },
|
||||||
|
{ value: "unknown", label: "Unknown" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const THEME_GROUPS = [
|
||||||
|
{
|
||||||
|
label: "Dark",
|
||||||
|
themes: [
|
||||||
|
"catppuccin",
|
||||||
|
"dracula",
|
||||||
|
"monokaiPro",
|
||||||
|
"tokyoNight",
|
||||||
|
"ayuDark",
|
||||||
|
"ayuMirage",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Light",
|
||||||
|
themes: ["githubLight", "solarizedLight", "oneLight", "ayuLight"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Warm",
|
||||||
|
themes: ["gruvbox"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Cool",
|
||||||
|
themes: ["nord", "oneDark"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Fun",
|
||||||
|
themes: ["bubblegum", "rosePine", "cottonCandy", "synthwave", "candyfloss"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Retro",
|
||||||
|
themes: ["terminal", "amber", "ibmPC"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Accessibility",
|
||||||
|
themes: ["highContrast"],
|
||||||
|
},
|
||||||
|
];
|
||||||
61
src/lib/definitions/columns.ts
Normal file
61
src/lib/definitions/columns.ts
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
import type { Column } from "$lib/types";
|
||||||
|
import { formatMemorySize } from "$lib/utils";
|
||||||
|
|
||||||
|
export let column_definitions: Column[] = [
|
||||||
|
{ id: "name", label: "Process Name", visible: true, required: true },
|
||||||
|
{ id: "pid", label: "PID", visible: true, required: false },
|
||||||
|
{
|
||||||
|
id: "status",
|
||||||
|
label: "Status",
|
||||||
|
visible: true,
|
||||||
|
},
|
||||||
|
{ id: "user", label: "User", visible: true },
|
||||||
|
{
|
||||||
|
id: "cpu_usage",
|
||||||
|
label: "CPU %",
|
||||||
|
visible: true,
|
||||||
|
format: (v) => v.toFixed(1) + "%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "memory_usage",
|
||||||
|
label: "RAM",
|
||||||
|
visible: true,
|
||||||
|
format: (v) => (v / (1024 * 1024)).toFixed(1) + " MB",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "virtual_memory",
|
||||||
|
label: "VIRT",
|
||||||
|
visible: true,
|
||||||
|
format: (v) => formatMemorySize(v),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "disk_usage",
|
||||||
|
label: "Disk R/W",
|
||||||
|
visible: true,
|
||||||
|
format: (v) =>
|
||||||
|
`${(v[0] / (1024 * 1024)).toFixed(1)} / ${(v[1] / (1024 * 1024)).toFixed(1)} MB`,
|
||||||
|
},
|
||||||
|
{ id: "ppid", label: "Parent PID", visible: false },
|
||||||
|
{ id: "root", label: "Root", visible: false },
|
||||||
|
{ id: "command", label: "Command", visible: false },
|
||||||
|
{ id: "environ", label: "Environment Variables", visible: false },
|
||||||
|
{ id: "session_id", label: "Session ID", visible: false },
|
||||||
|
{
|
||||||
|
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: true,
|
||||||
|
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
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
3
src/lib/definitions/index.ts
Normal file
3
src/lib/definitions/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export * from "./columns";
|
||||||
|
export * from "./settings";
|
||||||
|
export * from "./themes";
|
||||||
@ -1,13 +1,4 @@
|
|||||||
export interface AppConfig {
|
import type { AppConfig } from "$lib/types";
|
||||||
appearance: {
|
|
||||||
columnVisibility: Record<string, boolean>;
|
|
||||||
};
|
|
||||||
behavior: {
|
|
||||||
itemsPerPage: number;
|
|
||||||
refreshRate: number;
|
|
||||||
defaultStatusFilter: string;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export const DEFAULT_CONFIG: AppConfig = {
|
export const DEFAULT_CONFIG: AppConfig = {
|
||||||
appearance: {
|
appearance: {
|
||||||
@ -1,30 +1,4 @@
|
|||||||
export interface Theme {
|
import type { Theme } from "$lib/types";
|
||||||
name: string;
|
|
||||||
label: string;
|
|
||||||
colors: {
|
|
||||||
base: string;
|
|
||||||
mantle: string;
|
|
||||||
crust: string;
|
|
||||||
text: string;
|
|
||||||
subtext0: string;
|
|
||||||
subtext1: string;
|
|
||||||
surface0: string;
|
|
||||||
surface1: string;
|
|
||||||
surface2: string;
|
|
||||||
overlay0: string;
|
|
||||||
overlay1: string;
|
|
||||||
blue: string;
|
|
||||||
lavender: string;
|
|
||||||
sapphire: string;
|
|
||||||
sky: string;
|
|
||||||
red: string;
|
|
||||||
maroon: string;
|
|
||||||
peach: string;
|
|
||||||
yellow: string;
|
|
||||||
green: string;
|
|
||||||
teal: string;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export const themes: Record<string, Theme> = {
|
export const themes: Record<string, Theme> = {
|
||||||
catppuccin: {
|
catppuccin: {
|
||||||
@ -1,58 +1,3 @@
|
|||||||
import { writable } from "svelte/store";
|
export * from "./processes";
|
||||||
import { themes, type Theme } from "$lib/styles";
|
export * from "./theme";
|
||||||
|
export * from "./settings";
|
||||||
function createThemeStore() {
|
|
||||||
// Default theme
|
|
||||||
const defaultTheme = themes.catppuccin;
|
|
||||||
|
|
||||||
// Initialize with default theme
|
|
||||||
const { subscribe, set } = writable<Theme>(defaultTheme);
|
|
||||||
|
|
||||||
// Initialize theme on client-side only
|
|
||||||
if (typeof window !== "undefined") {
|
|
||||||
const storedTheme = localStorage.getItem("theme");
|
|
||||||
if (storedTheme && themes[storedTheme]) {
|
|
||||||
set(themes[storedTheme]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
subscribe,
|
|
||||||
setTheme: (themeName: string) => {
|
|
||||||
const theme = themes[themeName];
|
|
||||||
if (theme) {
|
|
||||||
if (typeof window !== "undefined") {
|
|
||||||
localStorage.setItem("theme", themeName);
|
|
||||||
// Add this line to set the data-theme attribute
|
|
||||||
document.documentElement.setAttribute("data-theme", themeName);
|
|
||||||
}
|
|
||||||
set(theme);
|
|
||||||
applyTheme(theme);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
init: () => {
|
|
||||||
const storedTheme =
|
|
||||||
typeof window !== "undefined" ? localStorage.getItem("theme") : null;
|
|
||||||
const theme = (storedTheme && themes[storedTheme]) || defaultTheme;
|
|
||||||
if (typeof window !== "undefined") {
|
|
||||||
// Add this line to set the data-theme attribute on init
|
|
||||||
document.documentElement.setAttribute(
|
|
||||||
"data-theme",
|
|
||||||
storedTheme || "catppuccin",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
applyTheme(theme);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function applyTheme(theme: Theme) {
|
|
||||||
if (typeof window !== "undefined") {
|
|
||||||
const root = document.documentElement;
|
|
||||||
Object.entries(theme.colors).forEach(([key, value]) => {
|
|
||||||
root.style.setProperty(`--${key}`, value);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const themeStore = createThemeStore();
|
|
||||||
|
|||||||
218
src/lib/stores/processes.ts
Normal file
218
src/lib/stores/processes.ts
Normal file
@ -0,0 +1,218 @@
|
|||||||
|
import { writable, derived } from "svelte/store";
|
||||||
|
import type { Process, SystemStats } from "$lib/types";
|
||||||
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
|
|
||||||
|
interface ProcessStore {
|
||||||
|
processes: Process[];
|
||||||
|
systemStats: SystemStats | null;
|
||||||
|
error: string | null;
|
||||||
|
isLoading: boolean;
|
||||||
|
searchTerm: string;
|
||||||
|
currentPage: number;
|
||||||
|
pinnedProcesses: Set<string>;
|
||||||
|
selectedProcess: Process | null;
|
||||||
|
showInfoModal: boolean;
|
||||||
|
showConfirmModal: boolean;
|
||||||
|
processToKill: Process | null;
|
||||||
|
isKilling: boolean;
|
||||||
|
isFrozen: boolean;
|
||||||
|
selectedProcessPid: number | null;
|
||||||
|
sortConfig: {
|
||||||
|
field: keyof Process;
|
||||||
|
direction: "asc" | "desc";
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const initialState: ProcessStore = {
|
||||||
|
processes: [],
|
||||||
|
systemStats: null,
|
||||||
|
error: null,
|
||||||
|
isLoading: true,
|
||||||
|
searchTerm: "",
|
||||||
|
currentPage: 1,
|
||||||
|
pinnedProcesses: new Set(),
|
||||||
|
selectedProcess: null,
|
||||||
|
showInfoModal: false,
|
||||||
|
showConfirmModal: false,
|
||||||
|
processToKill: null,
|
||||||
|
isKilling: false,
|
||||||
|
isFrozen: false,
|
||||||
|
selectedProcessPid: null,
|
||||||
|
sortConfig: {
|
||||||
|
field: "cpu_usage",
|
||||||
|
direction: "desc",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
function createProcessStore() {
|
||||||
|
const { subscribe, set, update } = writable<ProcessStore>(initialState);
|
||||||
|
|
||||||
|
// Define all methods first
|
||||||
|
const setIsLoading = (isLoading: boolean) =>
|
||||||
|
update((state) => ({ ...state, isLoading }));
|
||||||
|
|
||||||
|
const getProcesses = async () => {
|
||||||
|
try {
|
||||||
|
const result = await invoke<[Process[], SystemStats]>("get_processes");
|
||||||
|
update((state) => {
|
||||||
|
let updatedSelectedProcess = state.selectedProcess;
|
||||||
|
if (state.selectedProcessPid) {
|
||||||
|
updatedSelectedProcess =
|
||||||
|
result[0].find((p) => p.pid === state.selectedProcessPid) || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
processes: result[0],
|
||||||
|
systemStats: result[1],
|
||||||
|
error: null,
|
||||||
|
selectedProcess: updatedSelectedProcess,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
} catch (e: unknown) {
|
||||||
|
update((state) => ({
|
||||||
|
...state,
|
||||||
|
error: e instanceof Error ? e.message : String(e),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const killProcess = async (pid: number) => {
|
||||||
|
try {
|
||||||
|
update((state) => ({ ...state, isKilling: true }));
|
||||||
|
const success = await invoke<boolean>("kill_process", { pid });
|
||||||
|
if (success) {
|
||||||
|
await getProcesses();
|
||||||
|
} else {
|
||||||
|
throw new Error("Failed to kill process");
|
||||||
|
}
|
||||||
|
} catch (e: unknown) {
|
||||||
|
update((state) => ({
|
||||||
|
...state,
|
||||||
|
error: e instanceof Error ? e.message : String(e),
|
||||||
|
}));
|
||||||
|
} finally {
|
||||||
|
update((state) => ({ ...state, isKilling: false }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleSort = (field: keyof Process) => {
|
||||||
|
update((state) => ({
|
||||||
|
...state,
|
||||||
|
sortConfig: {
|
||||||
|
field,
|
||||||
|
direction:
|
||||||
|
state.sortConfig.field === field
|
||||||
|
? state.sortConfig.direction === "asc"
|
||||||
|
? "desc"
|
||||||
|
: "asc"
|
||||||
|
: "desc",
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const togglePin = (command: string) => {
|
||||||
|
update((state) => {
|
||||||
|
const newPinnedProcesses = new Set(state.pinnedProcesses);
|
||||||
|
if (newPinnedProcesses.has(command)) {
|
||||||
|
newPinnedProcesses.delete(command);
|
||||||
|
} else {
|
||||||
|
newPinnedProcesses.add(command);
|
||||||
|
}
|
||||||
|
return { ...state, pinnedProcesses: newPinnedProcesses };
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const setSearchTerm = (searchTerm: string) =>
|
||||||
|
update((state) => ({ ...state, searchTerm, currentPage: 1 }));
|
||||||
|
|
||||||
|
const setIsFrozen = (isFrozen: boolean) =>
|
||||||
|
update((state) => ({ ...state, isFrozen }));
|
||||||
|
|
||||||
|
const setCurrentPage = (currentPage: number) =>
|
||||||
|
update((state) => ({ ...state, currentPage }));
|
||||||
|
|
||||||
|
const showProcessDetails = (process: Process) => {
|
||||||
|
update((state) => ({
|
||||||
|
...state,
|
||||||
|
selectedProcessPid: process.pid,
|
||||||
|
selectedProcess: process,
|
||||||
|
showInfoModal: true,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeProcessDetails = () => {
|
||||||
|
update((state) => ({
|
||||||
|
...state,
|
||||||
|
showInfoModal: false,
|
||||||
|
selectedProcess: null,
|
||||||
|
selectedProcessPid: null,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmKillProcess = (process: Process) => {
|
||||||
|
update((state) => ({
|
||||||
|
...state,
|
||||||
|
processToKill: process,
|
||||||
|
showConfirmModal: true,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeConfirmKill = () => {
|
||||||
|
update((state) => ({
|
||||||
|
...state,
|
||||||
|
showConfirmModal: false,
|
||||||
|
processToKill: null,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleConfirmKill = async () => {
|
||||||
|
let processToKill: Process | null = null;
|
||||||
|
|
||||||
|
let currentState: ProcessStore | undefined;
|
||||||
|
const unsubscribe = subscribe((state) => {
|
||||||
|
currentState = state;
|
||||||
|
});
|
||||||
|
unsubscribe();
|
||||||
|
|
||||||
|
if (currentState?.processToKill && "pid" in currentState.processToKill) {
|
||||||
|
processToKill = currentState.processToKill;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!processToKill?.pid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await killProcess(processToKill.pid);
|
||||||
|
} finally {
|
||||||
|
update((state) => ({
|
||||||
|
...state,
|
||||||
|
showConfirmModal: false,
|
||||||
|
processToKill: null,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Return all methods
|
||||||
|
return {
|
||||||
|
subscribe,
|
||||||
|
set,
|
||||||
|
update,
|
||||||
|
setIsLoading,
|
||||||
|
getProcesses,
|
||||||
|
killProcess,
|
||||||
|
toggleSort,
|
||||||
|
togglePin,
|
||||||
|
setSearchTerm,
|
||||||
|
setIsFrozen,
|
||||||
|
setCurrentPage,
|
||||||
|
showProcessDetails,
|
||||||
|
closeProcessDetails,
|
||||||
|
confirmKillProcess,
|
||||||
|
closeConfirmKill,
|
||||||
|
handleConfirmKill,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export const processStore = createProcessStore();
|
||||||
@ -1,8 +1,8 @@
|
|||||||
import { writable } from "svelte/store";
|
import { writable } from "svelte/store";
|
||||||
import type { AppConfig } from "$lib/types/config";
|
import type { AppConfig } from "$lib/types";
|
||||||
import { DEFAULT_CONFIG } from "$lib/types/config";
|
import { DEFAULT_CONFIG } from "$lib/definitions/settings";
|
||||||
|
|
||||||
function createConfigStore() {
|
function createSettingsStore() {
|
||||||
const { subscribe, set, update } = writable<AppConfig>(DEFAULT_CONFIG);
|
const { subscribe, set, update } = writable<AppConfig>(DEFAULT_CONFIG);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -33,4 +33,4 @@ function createConfigStore() {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export const configStore = createConfigStore();
|
export const settingsStore = createSettingsStore();
|
||||||
58
src/lib/stores/theme.ts
Normal file
58
src/lib/stores/theme.ts
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import { writable } from "svelte/store";
|
||||||
|
import { themes } from "$lib/definitions/themes";
|
||||||
|
import type { Theme } from "$lib/types";
|
||||||
|
function createThemeStore() {
|
||||||
|
// Default theme
|
||||||
|
const defaultTheme = themes.catppuccin;
|
||||||
|
|
||||||
|
// Initialize with default theme
|
||||||
|
const { subscribe, set } = writable<Theme>(defaultTheme);
|
||||||
|
|
||||||
|
// Initialize theme on client-side only
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
const storedTheme = localStorage.getItem("theme");
|
||||||
|
if (storedTheme && themes[storedTheme]) {
|
||||||
|
set(themes[storedTheme]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
subscribe,
|
||||||
|
setTheme: (themeName: string) => {
|
||||||
|
const theme = themes[themeName];
|
||||||
|
if (theme) {
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
localStorage.setItem("theme", themeName);
|
||||||
|
// Add this line to set the data-theme attribute
|
||||||
|
document.documentElement.setAttribute("data-theme", themeName);
|
||||||
|
}
|
||||||
|
set(theme);
|
||||||
|
applyTheme(theme);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
init: () => {
|
||||||
|
const storedTheme =
|
||||||
|
typeof window !== "undefined" ? localStorage.getItem("theme") : null;
|
||||||
|
const theme = (storedTheme && themes[storedTheme]) || defaultTheme;
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
// Add this line to set the data-theme attribute on init
|
||||||
|
document.documentElement.setAttribute(
|
||||||
|
"data-theme",
|
||||||
|
storedTheme || "catppuccin",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
applyTheme(theme);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyTheme(theme: Theme) {
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
const root = document.documentElement;
|
||||||
|
Object.entries(theme.colors).forEach(([key, value]) => {
|
||||||
|
root.style.setProperty(`--${key}`, value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const themeStore = createThemeStore();
|
||||||
@ -40,3 +40,76 @@ export interface Column {
|
|||||||
required?: boolean;
|
required?: boolean;
|
||||||
format?: (value: any) => string;
|
format?: (value: any) => string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface Theme {
|
||||||
|
name: string;
|
||||||
|
label: string;
|
||||||
|
colors: {
|
||||||
|
base: string;
|
||||||
|
mantle: string;
|
||||||
|
crust: string;
|
||||||
|
text: string;
|
||||||
|
subtext0: string;
|
||||||
|
subtext1: string;
|
||||||
|
surface0: string;
|
||||||
|
surface1: string;
|
||||||
|
surface2: string;
|
||||||
|
overlay0: string;
|
||||||
|
overlay1: string;
|
||||||
|
blue: string;
|
||||||
|
lavender: string;
|
||||||
|
sapphire: string;
|
||||||
|
sky: string;
|
||||||
|
red: string;
|
||||||
|
maroon: string;
|
||||||
|
peach: string;
|
||||||
|
yellow: string;
|
||||||
|
green: string;
|
||||||
|
teal: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AppConfig {
|
||||||
|
appearance: {
|
||||||
|
columnVisibility: Record<string, boolean>;
|
||||||
|
};
|
||||||
|
behavior: {
|
||||||
|
itemsPerPage: number;
|
||||||
|
refreshRate: number;
|
||||||
|
defaultStatusFilter: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ColumnDefinition {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
visible: boolean;
|
||||||
|
required?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface StatusOption {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RefreshRateOption {
|
||||||
|
value: number;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ToolBarProps {
|
||||||
|
searchTerm: string;
|
||||||
|
statusFilter: string;
|
||||||
|
itemsPerPage: number;
|
||||||
|
currentPage: number;
|
||||||
|
totalPages: number;
|
||||||
|
totalResults: number;
|
||||||
|
columns: ColumnDefinition[];
|
||||||
|
refreshRate: number;
|
||||||
|
isFrozen: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SortConfig {
|
||||||
|
field: keyof Process;
|
||||||
|
direction: "asc" | "desc";
|
||||||
|
}
|
||||||
|
|||||||
@ -1,39 +1,12 @@
|
|||||||
|
import type { Process } from "$lib/types";
|
||||||
|
import type { SortConfig } from "$lib/types";
|
||||||
|
|
||||||
export interface ProcessStatus {
|
export interface ProcessStatus {
|
||||||
label: string;
|
label: string;
|
||||||
emoji: string;
|
emoji: string;
|
||||||
color: string;
|
color: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const statusMap: Record<string, ProcessStatus> = {
|
|
||||||
Running: {
|
|
||||||
label: "Running",
|
|
||||||
emoji: "🏃",
|
|
||||||
color: "var(--green)",
|
|
||||||
},
|
|
||||||
Sleeping: {
|
|
||||||
label: "Sleeping",
|
|
||||||
emoji: "😴",
|
|
||||||
color: "var(--blue)",
|
|
||||||
},
|
|
||||||
Idle: {
|
|
||||||
label: "Idle",
|
|
||||||
emoji: "⌛",
|
|
||||||
color: "var(--overlay0)",
|
|
||||||
},
|
|
||||||
Unknown: {
|
|
||||||
label: "Unknown",
|
|
||||||
emoji: "❓",
|
|
||||||
color: "var(--overlay0)",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export function formatStatus(status: string): string {
|
|
||||||
const processStatus = statusMap[status] || statusMap.Unknown;
|
|
||||||
return `<span class="status-badge" style="--status-color: ${processStatus.color}">
|
|
||||||
${processStatus.label}
|
|
||||||
</span>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function formatMemorySize(bytes: number): string {
|
export function formatMemorySize(bytes: number): string {
|
||||||
const gb = bytes / (1024 * 1024 * 1024);
|
const gb = bytes / (1024 * 1024 * 1024);
|
||||||
return `${gb.toFixed(1)} GB`;
|
return `${gb.toFixed(1)} GB`;
|
||||||
@ -56,3 +29,123 @@ export function getUsageClass(percentage: number): string {
|
|||||||
if (percentage >= 30) return "medium";
|
if (percentage >= 30) return "medium";
|
||||||
return "low";
|
return "low";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function formatBytes(bytes: number): string {
|
||||||
|
const units = ["B", "KB", "MB", "GB", "TB"];
|
||||||
|
let value = bytes;
|
||||||
|
let unitIndex = 0;
|
||||||
|
|
||||||
|
while (value >= 1024 && unitIndex < units.length - 1) {
|
||||||
|
value /= 1024;
|
||||||
|
unitIndex++;
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${value.toFixed(1)} ${units[unitIndex]}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatDate(timestamp: number) {
|
||||||
|
return new Date(timestamp * 1000).toLocaleString();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cache for compiled regex patterns
|
||||||
|
const regexCache = new Map<string, RegExp>();
|
||||||
|
|
||||||
|
export function filterProcesses(
|
||||||
|
processes: Process[],
|
||||||
|
searchTerm: string,
|
||||||
|
statusFilter: string,
|
||||||
|
): Process[] {
|
||||||
|
// Early return for empty search and "all" status
|
||||||
|
if (searchTerm.length === 0 && statusFilter === "all") {
|
||||||
|
return processes;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pre-process search terms once
|
||||||
|
const terms =
|
||||||
|
searchTerm.length > 0
|
||||||
|
? searchTerm.split(",").map((term) => term.trim())
|
||||||
|
: [];
|
||||||
|
|
||||||
|
return processes.filter((process) => {
|
||||||
|
// Early status check
|
||||||
|
if (
|
||||||
|
statusFilter !== "all" &&
|
||||||
|
process.status.toLowerCase() !== statusFilter
|
||||||
|
) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Skip search if no terms
|
||||||
|
if (terms.length === 0) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cache lowercase values
|
||||||
|
const processNameLower = process.name.toLowerCase();
|
||||||
|
const processCommandLower = process.command.toLowerCase();
|
||||||
|
const processPidString = process.pid.toString();
|
||||||
|
|
||||||
|
// Check each term
|
||||||
|
return terms.some((term) => {
|
||||||
|
const termLower = term.toLowerCase();
|
||||||
|
|
||||||
|
// Try exact matches first (faster)
|
||||||
|
if (
|
||||||
|
processNameLower.includes(termLower) ||
|
||||||
|
processCommandLower.includes(termLower) ||
|
||||||
|
processPidString.includes(term)
|
||||||
|
) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Try regex match last (slower)
|
||||||
|
try {
|
||||||
|
let regex = regexCache.get(term);
|
||||||
|
if (!regex) {
|
||||||
|
regex = new RegExp(term, "i");
|
||||||
|
regexCache.set(term, regex);
|
||||||
|
}
|
||||||
|
return regex.test(process.name);
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create a Map for quick pinned status lookup
|
||||||
|
const isPinned = new Map<string, boolean>();
|
||||||
|
|
||||||
|
export function sortProcesses(
|
||||||
|
processes: Process[],
|
||||||
|
sortConfig: SortConfig,
|
||||||
|
pinnedProcesses: Set<string>,
|
||||||
|
): Process[] {
|
||||||
|
// Clear the cache before sorting
|
||||||
|
isPinned.clear();
|
||||||
|
|
||||||
|
return [...processes].sort((a, b) => {
|
||||||
|
// Cache pinned status
|
||||||
|
let aPin = pinnedProcesses.has(a.command);
|
||||||
|
isPinned.set(a.command, aPin);
|
||||||
|
|
||||||
|
let bPin = pinnedProcesses.has(b.command);
|
||||||
|
isPinned.set(b.command, bPin);
|
||||||
|
|
||||||
|
// Quick pin comparison
|
||||||
|
if (aPin !== bPin) {
|
||||||
|
return aPin ? -1 : 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only compute direction once
|
||||||
|
const direction = sortConfig.direction === "asc" ? 1 : -1;
|
||||||
|
const aValue = a[sortConfig.field];
|
||||||
|
const bValue = b[sortConfig.field];
|
||||||
|
|
||||||
|
// Type-specific comparisons
|
||||||
|
if (typeof aValue === "string") {
|
||||||
|
return direction * aValue.localeCompare(bValue as string);
|
||||||
|
}
|
||||||
|
return direction * (Number(aValue) - Number(bValue));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
@ -1,154 +1,53 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { invoke } from "@tauri-apps/api/core";
|
|
||||||
import { onMount, onDestroy } from "svelte";
|
import { onMount, onDestroy } from "svelte";
|
||||||
import StatsBar from "$lib/components/StatsBar.svelte";
|
import {
|
||||||
import ToolBar from "$lib/components/ToolBar.svelte";
|
StatsBar,
|
||||||
import ProcessTable from "$lib/components/ProcessTable.svelte";
|
ToolBar,
|
||||||
import ProcessDetailsModal from "$lib/components/ProcessDetailsModal.svelte";
|
TitleBar,
|
||||||
import KillProcessModal from "$lib/components/KillProcessModal.svelte";
|
ProcessTable,
|
||||||
import { formatMemorySize, formatStatus } from "$lib/utils";
|
ProcessDetailsModal,
|
||||||
import { themeStore } from "$lib/stores";
|
KillProcessModal,
|
||||||
import type { Process, SystemStats, Column } from "$lib/types";
|
} from "$lib/components/index";
|
||||||
import TitleBar from "$lib/components/TitleBar.svelte";
|
import { themeStore, settingsStore, processStore } from "$lib/stores/index";
|
||||||
import { configStore } from "$lib/stores/config";
|
import { column_definitions } from "$lib/definitions/columns";
|
||||||
|
import { filterProcesses, sortProcesses } from "$lib/utils";
|
||||||
|
|
||||||
|
$: ({
|
||||||
|
processes,
|
||||||
|
systemStats,
|
||||||
|
error,
|
||||||
|
searchTerm,
|
||||||
|
isLoading,
|
||||||
|
currentPage,
|
||||||
|
pinnedProcesses,
|
||||||
|
selectedProcess,
|
||||||
|
showInfoModal,
|
||||||
|
showConfirmModal,
|
||||||
|
processToKill,
|
||||||
|
isKilling,
|
||||||
|
isFrozen,
|
||||||
|
sortConfig,
|
||||||
|
} = $processStore);
|
||||||
|
|
||||||
let processes: Process[] = [];
|
|
||||||
let systemStats: SystemStats | null = null;
|
|
||||||
let intervalId: number;
|
let intervalId: number;
|
||||||
let error: string | null = null;
|
|
||||||
let searchTerm = "";
|
|
||||||
let isLoading = true;
|
|
||||||
let currentPage = 1;
|
|
||||||
let pinnedProcesses: Set<string> = new Set();
|
|
||||||
let selectedProcess: Process | null = null;
|
|
||||||
let showInfoModal = false;
|
|
||||||
let showConfirmModal = false;
|
|
||||||
let processToKill: Process | null = null;
|
|
||||||
let isKilling = false;
|
|
||||||
let isFrozen = false;
|
|
||||||
let selectedProcessPid: number | null = null;
|
|
||||||
|
|
||||||
let columnDefinitions: Column[] = [
|
$: columns = column_definitions.map((col) => ({
|
||||||
{ id: "name", label: "Process Name", visible: true, required: true },
|
|
||||||
{ id: "pid", label: "PID", visible: true, required: false },
|
|
||||||
{
|
|
||||||
id: "status",
|
|
||||||
label: "Status",
|
|
||||||
visible: true,
|
|
||||||
format: formatStatus,
|
|
||||||
},
|
|
||||||
{ id: "user", label: "User", visible: true },
|
|
||||||
{
|
|
||||||
id: "cpu_usage",
|
|
||||||
label: "CPU %",
|
|
||||||
visible: true,
|
|
||||||
format: (v) => v.toFixed(1) + "%",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "memory_usage",
|
|
||||||
label: "RAM",
|
|
||||||
visible: true,
|
|
||||||
format: (v) => (v / (1024 * 1024)).toFixed(1) + " MB",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "virtual_memory",
|
|
||||||
label: "VIRT",
|
|
||||||
visible: true,
|
|
||||||
format: (v) => formatMemorySize(v),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "disk_usage",
|
|
||||||
label: "Disk R/W",
|
|
||||||
visible: true,
|
|
||||||
format: (v) =>
|
|
||||||
`${(v[0] / (1024 * 1024)).toFixed(1)} / ${(v[1] / (1024 * 1024)).toFixed(1)} MB`,
|
|
||||||
},
|
|
||||||
{ id: "ppid", label: "Parent PID", visible: false },
|
|
||||||
{ id: "root", label: "Root", visible: false },
|
|
||||||
{ id: "command", label: "Command", visible: false },
|
|
||||||
{ id: "environ", label: "Environment Variables", visible: false },
|
|
||||||
{ id: "session_id", label: "Session ID", visible: false },
|
|
||||||
{
|
|
||||||
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: true,
|
|
||||||
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
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// Merge column definitions with stored visibility
|
|
||||||
$: columns = columnDefinitions.map((col) => ({
|
|
||||||
...col,
|
...col,
|
||||||
visible:
|
visible:
|
||||||
col.required ||
|
col.required ||
|
||||||
($configStore.appearance.columnVisibility[col.id] ?? col.visible),
|
($settingsStore.appearance.columnVisibility[col.id] ?? col.visible),
|
||||||
}));
|
}));
|
||||||
$: itemsPerPage = $configStore.behavior.itemsPerPage;
|
$: itemsPerPage = $settingsStore.behavior.itemsPerPage;
|
||||||
$: refreshRate = $configStore.behavior.refreshRate;
|
$: refreshRate = $settingsStore.behavior.refreshRate;
|
||||||
$: statusFilter = $configStore.behavior.defaultStatusFilter;
|
$: statusFilter = $settingsStore.behavior.defaultStatusFilter;
|
||||||
|
|
||||||
let sortConfig = {
|
$: filteredProcesses = filterProcesses(processes, searchTerm, statusFilter);
|
||||||
field: "cpu_usage" as keyof Process,
|
|
||||||
direction: "desc" as "asc" | "desc",
|
|
||||||
};
|
|
||||||
|
|
||||||
$: filteredProcesses = processes.filter((process) => {
|
$: sortedProcesses = sortProcesses(
|
||||||
let matchesSearch = searchTerm.length === 0;
|
filteredProcesses,
|
||||||
searchTerm
|
sortConfig,
|
||||||
.split(",")
|
pinnedProcesses,
|
||||||
.map((term) => term.trim())
|
);
|
||||||
.forEach((term) => {
|
|
||||||
const nameSubstringMatch = process.name
|
|
||||||
.toLowerCase()
|
|
||||||
.includes(term.toLowerCase());
|
|
||||||
const nameRegexMatch = (() => {
|
|
||||||
try {
|
|
||||||
return new RegExp(term, "i").test(process.name);
|
|
||||||
} catch {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
const commandMatch = process.command
|
|
||||||
.toLowerCase()
|
|
||||||
.includes(term.toLowerCase());
|
|
||||||
const pidMatch = process.pid.toString().includes(term);
|
|
||||||
matchesSearch ||=
|
|
||||||
nameSubstringMatch || nameRegexMatch || commandMatch || pidMatch;
|
|
||||||
});
|
|
||||||
|
|
||||||
const matchesStatus =
|
|
||||||
statusFilter === "all" ? true : process.status === statusFilter;
|
|
||||||
|
|
||||||
return matchesSearch && matchesStatus;
|
|
||||||
});
|
|
||||||
|
|
||||||
$: sortedProcesses = filteredProcesses.sort((a, b) => {
|
|
||||||
const aPin = pinnedProcesses.has(a.command);
|
|
||||||
const bPin = pinnedProcesses.has(b.command);
|
|
||||||
if (aPin && !bPin) return -1;
|
|
||||||
if (!aPin && bPin) return 1;
|
|
||||||
|
|
||||||
const aValue = a[sortConfig.field];
|
|
||||||
const bValue = b[sortConfig.field];
|
|
||||||
const direction = sortConfig.direction === "asc" ? 1 : -1;
|
|
||||||
|
|
||||||
if (typeof aValue === "string" && typeof bValue === "string") {
|
|
||||||
return direction * aValue.localeCompare(bValue);
|
|
||||||
}
|
|
||||||
return direction * (Number(aValue) - Number(bValue));
|
|
||||||
});
|
|
||||||
|
|
||||||
$: totalPages = Math.ceil(filteredProcesses.length / itemsPerPage);
|
$: totalPages = Math.ceil(filteredProcesses.length / itemsPerPage);
|
||||||
$: paginatedProcesses = sortedProcesses.slice(
|
$: paginatedProcesses = sortedProcesses.slice(
|
||||||
@ -157,7 +56,6 @@
|
|||||||
);
|
);
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
// Reset to first page when filtering or changing items per page
|
|
||||||
if (searchTerm || itemsPerPage) {
|
if (searchTerm || itemsPerPage) {
|
||||||
currentPage = 1;
|
currentPage = 1;
|
||||||
}
|
}
|
||||||
@ -167,104 +65,21 @@
|
|||||||
if (intervalId) clearInterval(intervalId);
|
if (intervalId) clearInterval(intervalId);
|
||||||
if (!isFrozen) {
|
if (!isFrozen) {
|
||||||
intervalId = setInterval(() => {
|
intervalId = setInterval(() => {
|
||||||
getProcesses();
|
processStore.getProcesses();
|
||||||
}, refreshRate);
|
}, refreshRate);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$: 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");
|
|
||||||
processes = result[0];
|
|
||||||
systemStats = result[1];
|
|
||||||
error = null;
|
|
||||||
} catch (e: unknown) {
|
|
||||||
if (e instanceof Error) {
|
|
||||||
error = e.message;
|
|
||||||
} else {
|
|
||||||
error = String(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function killProcess(pid: number) {
|
|
||||||
try {
|
|
||||||
const success = await invoke<boolean>("kill_process", { pid });
|
|
||||||
if (success) {
|
|
||||||
await getProcesses();
|
|
||||||
}
|
|
||||||
} catch (e: unknown) {
|
|
||||||
if (e instanceof Error) {
|
|
||||||
error = e.message;
|
|
||||||
} else {
|
|
||||||
error = String(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleSort(field: keyof Process) {
|
|
||||||
if (sortConfig.field === field) {
|
|
||||||
sortConfig.direction = sortConfig.direction === "asc" ? "desc" : "asc";
|
|
||||||
} else {
|
|
||||||
sortConfig.field = field;
|
|
||||||
sortConfig.direction = "desc";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function togglePin(command: string) {
|
|
||||||
if (pinnedProcesses.has(command)) {
|
|
||||||
pinnedProcesses.delete(command);
|
|
||||||
} else {
|
|
||||||
pinnedProcesses.add(command);
|
|
||||||
}
|
|
||||||
pinnedProcesses = pinnedProcesses; // Trigger reactivity
|
|
||||||
}
|
|
||||||
|
|
||||||
function showProcessDetails(process: Process) {
|
|
||||||
selectedProcessPid = process.pid;
|
|
||||||
selectedProcess = process;
|
|
||||||
showInfoModal = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function confirmKillProcess(process: Process) {
|
|
||||||
processToKill = process;
|
|
||||||
showConfirmModal = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleConfirmKill() {
|
|
||||||
if (processToKill) {
|
|
||||||
isKilling = true;
|
|
||||||
try {
|
|
||||||
await killProcess(processToKill.pid);
|
|
||||||
} finally {
|
|
||||||
isKilling = false;
|
|
||||||
showConfirmModal = false;
|
|
||||||
processToKill = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleModalClose() {
|
|
||||||
showInfoModal = false;
|
|
||||||
selectedProcess = null;
|
|
||||||
selectedProcessPid = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
try {
|
try {
|
||||||
await getProcesses();
|
await processStore.getProcesses();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Failed to load processes:", error);
|
console.error("Failed to load processes:", error);
|
||||||
} finally {
|
} finally {
|
||||||
isLoading = false;
|
processStore.setIsLoading(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
configStore.init();
|
settingsStore.init();
|
||||||
themeStore.init();
|
themeStore.init();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -288,12 +103,12 @@
|
|||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<ToolBar
|
<ToolBar
|
||||||
bind:searchTerm
|
bind:searchTerm={$processStore.searchTerm}
|
||||||
bind:statusFilter
|
bind:statusFilter
|
||||||
bind:itemsPerPage
|
bind:itemsPerPage
|
||||||
bind:currentPage
|
bind:currentPage={$processStore.currentPage}
|
||||||
bind:refreshRate
|
bind:refreshRate
|
||||||
bind:isFrozen
|
bind:isFrozen={$processStore.isFrozen}
|
||||||
{totalPages}
|
{totalPages}
|
||||||
totalResults={filteredProcesses.length}
|
totalResults={filteredProcesses.length}
|
||||||
bind:columns
|
bind:columns
|
||||||
@ -309,10 +124,10 @@
|
|||||||
{systemStats}
|
{systemStats}
|
||||||
{sortConfig}
|
{sortConfig}
|
||||||
{pinnedProcesses}
|
{pinnedProcesses}
|
||||||
onToggleSort={toggleSort}
|
onToggleSort={processStore.toggleSort}
|
||||||
onTogglePin={togglePin}
|
onTogglePin={processStore.togglePin}
|
||||||
onShowDetails={showProcessDetails}
|
onShowDetails={processStore.showProcessDetails}
|
||||||
onKillProcess={confirmKillProcess}
|
onKillProcess={processStore.confirmKillProcess}
|
||||||
/>
|
/>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
@ -321,18 +136,15 @@
|
|||||||
<ProcessDetailsModal
|
<ProcessDetailsModal
|
||||||
show={showInfoModal}
|
show={showInfoModal}
|
||||||
process={selectedProcess}
|
process={selectedProcess}
|
||||||
onClose={handleModalClose}
|
onClose={processStore.closeProcessDetails}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<KillProcessModal
|
<KillProcessModal
|
||||||
show={showConfirmModal}
|
show={showConfirmModal}
|
||||||
process={processToKill}
|
process={processToKill}
|
||||||
{isKilling}
|
{isKilling}
|
||||||
onClose={() => {
|
onClose={processStore.closeConfirmKill}
|
||||||
showConfirmModal = false;
|
onConfirm={processStore.handleConfirmKill}
|
||||||
processToKill = null;
|
|
||||||
}}
|
|
||||||
onConfirm={handleConfirmKill}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user