fixed most svelte issues

This commit is contained in:
Will Greenberg
2025-04-14 11:39:54 -07:00
parent 4f0bc3ad93
commit 4113b71baf
11 changed files with 99 additions and 65 deletions

View File

@@ -1,5 +1,5 @@
import { describe, it, expect } from 'vitest';
import { EventType, parse_finished_report, Severity, type QualitativeWarning } from './analysis';
import { EventType, parse_finished_report, Severity, type QualitativeWarning } from './analysis.svelte';
import { parse_ndjson, type NewlineDeliminatedJson } from './ndjson';
const SAMPLE_REPORT_NDJSON: NewlineDeliminatedJson = [

View File

@@ -1,5 +1,5 @@
import { parse_ndjson, type NewlineDeliminatedJson } from "./ndjson";
import { req } from "./utils";
import { req } from "./utils.svelte";
export type AnalysisReport = {
metadata: ReportMetadata;

View File

@@ -1,6 +1,6 @@
import { get_report, type AnalysisReport } from "./analysis";
import type { Manifest, ManifestEntry } from "./manifest";
import { req } from "./utils";
import { get_report, type AnalysisReport } from "./analysis.svelte";
import type { Manifest, ManifestEntry } from "./manifest.svelte";
import { req } from "./utils.svelte";
export enum AnalysisStatus {
// rayhunter is currently analyzing this entry (note that this is distinct

View File

@@ -1,35 +1,39 @@
<script lang="ts">
import { AnalysisStatus } from "$lib/analysisManager";
import { EventType } from "$lib/analysis";
import type { ManifestEntry } from "$lib/manifest";
let { entry }: {
import { AnalysisStatus } from "$lib/analysisManager.svelte";
import { EventType } from "$lib/analysis.svelte";
import type { ManifestEntry } from "$lib/manifest.svelte";
let { entry, analysis_status }: {
entry: ManifestEntry,
analysis_status: AnalysisStatus | undefined,
} = $props();
let summary = $state('Loading...');
if (entry.analysis_status === AnalysisStatus.Queued) {
summary = 'Queued...';
} else if (entry.analysis_status === AnalysisStatus.Running) {
summary = 'Running...';
} else if (entry.analysis_status === AnalysisStatus.Finished) {
if (entry.analysis_report === undefined) {
summary = 'Loading...';
} else if (typeof(entry.analysis_report) === 'string') {
summary = entry.analysis_report;
} else {
let num_warnings = 0;
for (let row of entry.analysis_report.rows) {
for (let analysis of row.analysis) {
for (let event of analysis.events) {
if (event.type === EventType.Warning) {
num_warnings += 1;
let summary = $derived.by(() => {
if (analysis_status === AnalysisStatus.Queued) {
return 'Queued...';
} else if (entry.analysis_status === AnalysisStatus.Running) {
return 'Running...';
} else if (entry.analysis_status === AnalysisStatus.Finished) {
if (entry.analysis_report === undefined) {
return 'Loading...';
} else if (typeof(entry.analysis_report) === 'string') {
return entry.analysis_report;
} else {
let num_warnings = 0;
for (let row of entry.analysis_report.rows) {
for (let analysis of row.analysis) {
for (let event of analysis.events) {
if (event.type === EventType.Warning) {
num_warnings += 1;
}
}
}
}
return `${num_warnings} warnings`;
}
summary = `${num_warnings} warnings`;
} else {
return 'Loading...';
}
}
})
</script>
<p>

View File

@@ -1,10 +1,11 @@
<script lang="ts">
import { Manifest, ManifestEntry } from "$lib/manifest";
import { Manifest, ManifestEntry } from "$lib/manifest.svelte";
import TableRow from "./ManifestTableRow.svelte";
interface Props {
manifest: Manifest;
entries: ManifestEntry[];
current_entry: ManifestEntry | undefined;
}
let { manifest }: Props = $props();
let { entries, current_entry }: Props = $props();
</script>
<table>
@@ -20,10 +21,10 @@
</tr>
</thead>
<tbody>
{#if manifest.current_entry !== undefined}
<TableRow entry={manifest.current_entry} current={true} />
{#if current_entry !== undefined}
<TableRow entry={current_entry} current={true} />
{/if}
{#each manifest.entries as entry}
{#each entries as entry}
<TableRow entry={entry} current={false} />
{/each}
</tbody>

View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { ManifestEntry } from "$lib/manifest";
import { ManifestEntry } from "$lib/manifest.svelte";
import DownloadLink from '$lib/components/DownloadLink.svelte';
import AnalysisStatus from "./AnalysisStatus.svelte";
let { entry, current }: {
@@ -17,7 +17,7 @@
<td>{entry.qmdl_size_bytes}</td>
<td><DownloadLink url={entry.getPcapUrl()} text="pcap" /></td>
<td><DownloadLink url={entry.getQmdlUrl()} text="qmdl" /></td>
<td><AnalysisStatus entry={entry} /></td>
<td><AnalysisStatus analysis_status={entry.analysis_status} entry={entry} /></td>
</tr>
<style>

View File

@@ -0,0 +1,25 @@
<script lang="ts">
import { req } from "$lib/utils.svelte";
let { currently_recording }: {
currently_recording: boolean;
} = $props();
async function start_recording() {
await req('POST', '/api/start-recording');
}
async function stop_recording() {
await req('POST', '/api/stop-recording');
}
</script>
<div>
{#if currently_recording}
<button onclick={stop_recording}>Stop Recording</button>
{:else}
<button onclick={start_recording}>Start Recording</button>
{/if}
</div>
<style>
</style>

View File

@@ -1,5 +1,5 @@
import { get_report, type AnalysisReport } from "./analysis";
import { AnalysisStatus, type AnalysisManager } from "./analysisManager";
import { get_report, type AnalysisReport } from "./analysis.svelte";
import { AnalysisStatus, type AnalysisManager } from "./analysisManager.svelte";
interface JsonManifest {
entries: JsonManifestEntry[];
@@ -51,13 +51,13 @@ export class Manifest {
}
export class ManifestEntry {
public name: string;
public name = $state("");
public start_time: Date;
public last_message_time: Date | undefined = undefined;
public qmdl_size_bytes: number;
public analysis_size_bytes: number;
public analysis_status: AnalysisStatus | undefined = undefined;
public analysis_report: AnalysisReport | string | undefined = undefined;
public last_message_time: Date | undefined = $state(undefined);
public qmdl_size_bytes = $state(0);
public analysis_size_bytes = $state(0);
public analysis_status: AnalysisStatus | undefined = $state(undefined);
public analysis_report: AnalysisReport | string | undefined = $state(undefined);
constructor(json: JsonManifestEntry) {
this.name = json.name;

View File

@@ -1,7 +1,6 @@
export type NewlineDeliminatedJson = any[];
export function parse_ndjson(input: string): NewlineDeliminatedJson {
console.log(input)
const lines = input.split('\n');
const result = [];
let current_line = '';

View File

@@ -1,4 +1,4 @@
import { Manifest } from "./manifest";
import { Manifest } from "./manifest.svelte";
import type { SystemStats } from "./systemStats";
export async function req(method: string, url: string): Promise<string> {

View File

@@ -1,35 +1,40 @@
<script lang="ts">
import { Manifest, ManifestEntry } from "$lib/manifest";
import { get_manifest, get_system_stats } from "$lib/utils";
import { Manifest, ManifestEntry } from "$lib/manifest.svelte";
import { get_manifest, get_system_stats } from "$lib/utils.svelte";
import ManifestTable from "$lib/components/ManifestTable.svelte";
import { onMount } from "svelte";
import type { SystemStats } from "$lib/systemStats";
import { AnalysisManager } from "$lib/analysisManager";
import { AnalysisManager } from "$lib/analysisManager.svelte";
import { writable, readable, type Readable, type Writable } from "svelte/store";
import RecordingControls from "$lib/components/RecordingControls.svelte";
let manifest: Manifest | undefined = $state(undefined);
let system_stats: SystemStats | undefined = $state(undefined);
let manager: AnalysisManager = new AnalysisManager();
let analysis_status = $state([]);
let loaded = $state(false);
let recording = $state(false);
let entries: ManifestEntry[] = $state([]);
let current_entry: ManifestEntry | undefined = $state(undefined);
let system_stats: SystemStats | undefined = $state(undefined);
$effect(() => {
const interval = setInterval(async () => {
loaded = true;
await manager.update();
let new_manifest = await get_manifest();
await new_manifest.set_analysis_status(manager);
entries = new_manifest.entries;
current_entry = new_manifest.current_entry;
recording = current_entry !== undefined;
async function update(): Promise<void> {
await manager.update();
manifest = await get_manifest();
manifest.set_analysis_status(manager);
system_stats = await get_system_stats();
}
onMount(() => {
const interval = setInterval(() => {
update();
system_stats = await get_system_stats();
}, 1000);
return () => clearInterval(interval);
});
})
</script>
<div class="p-8">
{#if manifest !== undefined}
<ManifestTable manifest={manifest} />
{#if loaded}
<RecordingControls currently_recording={recording} />
<ManifestTable entries={entries} current_entry={current_entry} />
{:else}
<p>Loading...</p>
{/if}