Skip to content

Commit

Permalink
small fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Abdenasser
Abdenasser committed Nov 13, 2024
1 parent 821f671 commit a93ae70
Show file tree
Hide file tree
Showing 3 changed files with 169 additions and 142 deletions.
42 changes: 20 additions & 22 deletions src/lib/components/modals/ProcessDetailsModal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,36 +13,34 @@
export let show = false;
export let process: Process | null = null;
export let onClose: () => void;
$: currentProcess = process;
</script>

<Modal {show} title="Process Details" maxWidth="700px" {onClose}>
{#if currentProcess}
{#if process}
<div class="process-details">
<!-- Basic Info Section -->
<section class="detail-section">
<h3>Basic Information</h3>
<div class="detail-grid">
<div class="detail-row">
<span class="detail-label">Name:</span>
<span class="detail-value">{currentProcess.name}</span>
<span class="detail-value">{process.name}</span>
</div>
<div class="detail-row">
<span class="detail-label">PID:</span>
<span class="detail-value">{currentProcess.pid}</span>
<span class="detail-value">{process.pid}</span>
</div>
<div class="detail-row">
<span class="detail-label">Parent PID:</span>
<span class="detail-value">{currentProcess.ppid}</span>
<span class="detail-value">{process.ppid}</span>
</div>
<div class="detail-row">
<span class="detail-label">User:</span>
<span class="detail-value">{currentProcess.user}</span>
<span class="detail-value">{process.user}</span>
</div>
<div class="detail-row">
<span class="detail-label">Status:</span>
<span class="detail-value">{currentProcess.status}</span>
<span class="detail-value">{process.status}</span>
</div>
</div>
</section>
Expand All @@ -61,12 +59,12 @@
<div class="progress-bar">
<div
class="progress-fill"
style="width: {currentProcess.cpu_usage}%"
class:high={currentProcess.cpu_usage > 50}
class:critical={currentProcess.cpu_usage > 80}
style="width: {process.cpu_usage}%"
class:high={process.cpu_usage > 50}
class:critical={process.cpu_usage > 80}
></div>
</div>
<span>{currentProcess.cpu_usage.toFixed(1)}%</span>
<span>{process.cpu_usage.toFixed(1)}%</span>
</div>
</div>

Expand All @@ -77,8 +75,8 @@
<span>Memory Usage</span>
</div>
<div class="resource-stats">
<div>Physical: {formatBytes(currentProcess.memory_usage)}</div>
<div>Virtual: {formatBytes(currentProcess.virtual_memory)}</div>
<div>Physical: {formatBytes(process.memory_usage)}</div>
<div>Virtual: {formatBytes(process.virtual_memory)}</div>
</div>
</div>

Expand All @@ -89,8 +87,8 @@
<span>Disk I/O</span>
</div>
<div class="resource-stats">
<div>Read: {formatBytes(currentProcess.disk_usage[0])}</div>
<div>Written: {formatBytes(currentProcess.disk_usage[1])}</div>
<div>Read: {formatBytes(process.disk_usage[0])}</div>
<div>Written: {formatBytes(process.disk_usage[1])}</div>
</div>
</div>

Expand All @@ -101,8 +99,8 @@
<span>Time Information</span>
</div>
<div class="resource-stats">
<div>Started: {formatDate(currentProcess.start_time)}</div>
<div>Running: {formatUptime(currentProcess.run_time)}</div>
<div>Started: {formatDate(process.start_time)}</div>
<div>Running: {formatUptime(process.run_time)}</div>
</div>
</div>
</div>
Expand All @@ -114,17 +112,17 @@
<div class="detail-grid">
<div class="detail-row full-width">
<span class="detail-label">Command:</span>
<span class="detail-value command">{currentProcess.command}</span>
<span class="detail-value command">{process.command}</span>
</div>
<div class="detail-row full-width">
<span class="detail-label">Root:</span>
<span class="detail-value path">{currentProcess.root}</span>
<span class="detail-value path">{process.root}</span>
</div>
{#if currentProcess.environ.length > 0}
{#if process.environ.length > 0}
<div class="detail-row full-width">
<span class="detail-label">Environment:</span>
<div class="detail-value env-vars">
{#each currentProcess.environ as env}
{#each process.environ as env}
<div class="env-var">{env}</div>
{/each}
</div>
Expand Down
252 changes: 142 additions & 110 deletions src/lib/stores/processes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,139 +47,171 @@ const initialState: ProcessStore = {
function createProcessStore() {
const { subscribe, set, update } = writable<ProcessStore>(initialState);

return {
subscribe,
set,
update,
// Define all methods first
const setIsLoading = (isLoading: boolean) =>
update((state) => ({ ...state, isLoading }));

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;
}

async getProcesses() {
try {
const result = await invoke<[Process[], SystemStats]>("get_processes");
update((state) => ({
return {
...state,
processes: result[0],
systemStats: result[1],
error: null,
}));
} catch (e: unknown) {
update((state) => ({
...state,
error: e instanceof Error ? e.message : String(e),
}));
}
},
selectedProcess: updatedSelectedProcess,
};
});
} catch (e: unknown) {
update((state) => ({
...state,
error: e instanceof Error ? e.message : String(e),
}));
}
};

async killProcess(pid: number) {
try {
const success = await invoke<boolean>("kill_process", { pid });
if (success) {
await this.getProcesses();
}
} 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");
}
},

toggleSort(field: keyof Process) {
} catch (e: unknown) {
update((state) => ({
...state,
sortConfig: {
field,
direction:
state.sortConfig.field === field
? state.sortConfig.direction === "asc"
? "desc"
: "asc"
: "desc",
},
error: e instanceof Error ? e.message : String(e),
}));
},
} finally {
update((state) => ({ ...state, isKilling: false }));
}
};

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 toggleSort = (field: keyof Process) => {
update((state) => ({
...state,
sortConfig: {
field,
direction:
state.sortConfig.field === field
? state.sortConfig.direction === "asc"
? "desc"
: "asc"
: "desc",
},
}));
};

setSearchTerm: (searchTerm: string) =>
update((state) => ({ ...state, searchTerm, currentPage: 1 })),
setIsFrozen: (isFrozen: boolean) =>
update((state) => ({ ...state, isFrozen })),
setCurrentPage: (currentPage: number) =>
update((state) => ({ ...state, currentPage })),
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 };
});
};

showProcessDetails(process: Process) {
update((state) => ({
...state,
selectedProcessPid: process.pid,
selectedProcess: process,
showInfoModal: true,
}));
},
const setSearchTerm = (searchTerm: string) =>
update((state) => ({ ...state, searchTerm, currentPage: 1 }));

closeProcessDetails() {
update((state) => ({
...state,
showInfoModal: false,
selectedProcess: null,
selectedProcessPid: null,
}));
},
const setIsFrozen = (isFrozen: boolean) =>
update((state) => ({ ...state, isFrozen }));

confirmKillProcess(process: Process) {
update((state) => ({
...state,
processToKill: process,
showConfirmModal: true,
}));
},
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;

closeConfirmKill() {
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,
}));
},

async handleConfirmKill() {
update((state) => ({ ...state, isKilling: true }));
}
};

try {
const pid = this.getState().processToKill?.pid;
if (pid) {
await this.killProcess(pid);
}
} finally {
update((state) => ({
...state,
isKilling: false,
showConfirmModal: false,
processToKill: null,
}));
}
},

// Helper to get current state
getState() {
let currentState: ProcessStore | undefined;
subscribe((state) => {
currentState = state;
})();
return currentState!;
},
// Return all methods
return {
subscribe,
set,
update,
setIsLoading,
getProcesses,
killProcess,
toggleSort,
togglePin,
setSearchTerm,
setIsFrozen,
setCurrentPage,
showProcessDetails,
closeProcessDetails,
confirmKillProcess,
closeConfirmKill,
handleConfirmKill,
};
}

Expand Down
Loading

0 comments on commit a93ae70

Please sign in to comment.