feat: add process tree

src/lib/clients/saferwall.ts

@@ -109,7 +109,7 @@ export class SaferwallClient {
 
 	public async getFileProcessTree(guid: string) {
 		return this.request<{ proc_tree: Saferwall.Behaviors.ProcessItem[] }>(
-			`behaviors/${guid}/?fields=proc_tree`
+			`behaviors/${guid}?fields=proc_tree`
 		).then((res) => res.proc_tree ?? []);
 	}
 

src/lib/types/saferwall.ts

@@ -196,6 +196,7 @@ export namespace Saferwall {
 			proc_name: string;
 		}
 		export type ProcessTree = ProcessItem[];
+		export type NestedProcessTree = ProcessItem & { children: NestedProcessTree[] };
 	}
 
 	export type Exif = Partial<{
@@ -289,14 +290,14 @@ export namespace Saferwall {
 			member_since: number;
 		}
 
-		export interface Like extends Base {}
-		export interface Submission extends Base {}
+		export interface Like extends Base { }
+		export interface Submission extends Base { }
 		export interface Comment extends Base {
 			comment: string;
 		}
 
-		export interface Follower extends Follow {}
-		export interface Following extends Follow {}
+		export interface Follower extends Follow { }
+		export interface Following extends Follow { }
 
 		export type All = Like | Comment | Submission | Follower | Following | any;
 	}

src/routes/(file)/files/[hash]/dynamic-overview/+page.server.ts

@@ -0,0 +1,50 @@
+import { SaferwallClient } from '$lib/clients/saferwall';
+import type { PageLoad } from '../$types';
+import type { Saferwall } from '$lib/types';
+
+export const load: PageLoad = (async ({
+    parent
+}) => {
+    const parentData = await parent();
+    const guid = (parentData as any).file.default_behavior_id
+
+    const processArray = await new SaferwallClient(parentData.session).getFileProcessTree(guid)
+    const processTree = buildProcessTrees(processArray)
+
+    return {
+        processTree
+    };
+});
+
+type ProcessTree = Saferwall.Behaviors.NestedProcessTree
+function buildProcessTrees(processArray: Saferwall.Behaviors.ProcessItem[]): ProcessTree[] {
+    let trees = new Array<ProcessTree>();
+
+    function buildTree(parentProcess: (typeof processArray)[number]) {
+        let tree: ProcessTree = {
+            ...parentProcess,
+            children: new Array<ProcessTree>()
+        };
+
+        let childProcesses = processArray.filter(
+            (process) => process.parent_pid === parentProcess.pid
+        );
+
+        for (let childProcess of childProcesses) {
+            let childTree = buildTree(childProcess);
+            tree.children.push(childTree);
+        }
+
+        return tree;
+    }
+
+    for (let process of processArray) {
+        if (process.parent_pid === '0x0') {
+            let tree = buildTree(process);
+            trees.push(tree);
+        }
+    }
+
+    return trees;
+}
+

src/routes/(file)/files/[hash]/dynamic-overview/+page.svelte

@@ -1,3 +1,15 @@
+<script lang="ts">
+	import Card from '$lib/components/Card.svelte';
+	import ProcessTreeView from './ProcessTreeView.svelte';
+
+	export let data;
+</script>
+
 <div class="flex flex-1 flex-col w-full h-full items-center justify-center">
-	<h1>Dynamic overview | Coming soon</h1>
+	<section class="container">
+		<Card class="w-full">
+			<h1 class="text-3xl">Process Tree</h1>
+			<ProcessTreeView trees={data.processTree} />
+		</Card>
+	</section>
 </div>

src/routes/(file)/files/[hash]/dynamic-overview/Expandable.svelte

@@ -0,0 +1,44 @@
+<script>
+	export let isExpandable = false;
+
+	let open = true;
+
+	function toggleOpen() {
+		open = !open;
+	}
+</script>
+
+<div class="cursor-pointer flex" on:click={toggleOpen} on:keypress={toggleOpen}>
+	{#if isExpandable}
+		<svg
+			class="rotate-[-90deg] mt-2"
+			class:expanded={open}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="25"
+			viewBox="0 0 24 25"
+			fill="none"
+		>
+			<path
+				d="M6 9.5L12 15.5L18 9.5"
+				stroke="#AFAFAF"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	{/if}
+	<div>
+		<slot name="header" />
+	</div>
+</div>
+
+{#if open && isExpandable}
+	<slot name="expanded" />
+{/if}
+
+<style>
+	.expanded {
+		rotate: 90deg;
+	}
+</style>

src/routes/(file)/files/[hash]/dynamic-overview/ProcessTreeView.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { Saferwall } from '$lib/types';
+	import Expandable from './Expandable.svelte';
+
+	export let trees: Saferwall.Behaviors.NestedProcessTree[];
+	export let indent = 0;
+</script>
+
+<ul class="flex flex-col gap-2">
+	{#each trees as tree, i (tree.path)}
+		<li>
+			<div style="padding-left: {indent}px" class="cursor-pointer">
+				{#if i != 0 || tree.parent_pid != '0x0'}
+					<div class="h-[1px] bg-gray-200 my-3" />
+				{/if}
+				<Expandable isExpandable={tree.children.length != 0}>
+					<svelte:fragment slot="header">
+						<div class="flex items-center gap-2">
+							<div class="font-medium">
+								<span>
+									{tree.pid}
+								</span>
+								<svg
+									class="inline mx-1"
+									xmlns="http://www.w3.org/2000/svg"
+									width="4"
+									height="5"
+									viewBox="0 0 4 5"
+									fill="none"
+								>
+									<path
+										d="M2 4.5C3.10457 4.5 4 3.60457 4 2.5C4 1.39543 3.10457 0.5 2 0.5C0.89543 0.5 0 1.39543 0 2.5C0 3.60457 0.89543 4.5 2 4.5Z"
+										fill="black"
+									/>
+								</svg>
+								<span>
+									{tree.proc_name}
+								</span>
+							</div>
+							<div class="uppercase bg-gray-100 p-2 rounded-md font-bold">
+								{tree.file_type}
+							</div>
+							<div
+								class="capitalize rounded-md font-bold bg-gray-100 p-2"
+								class:clean={tree.detection === 'clean'}
+								class:mal={tree.detection == 'malicious'}
+							>
+								{tree.detection}
+							</div>
+						</div>
+						<p class="text-gray-500 mt-1 ml-5">{tree.path} »</p>
+					</svelte:fragment>
+					<svelte:fragment slot="expanded">
+						<svelte:self trees={tree.children} indent={indent + 50} />
+					</svelte:fragment>
+				</Expandable>
+			</div>
+		</li>
+	{/each}
+</ul>
+
+<style>
+	.mal {
+		@apply bg-rose-100 text-rose-500;
+	}
+
+	.clean {
+		@apply bg-green-100 text-green-500;
+	}
+</style>