kunkunsh-kunkun-ext-disk-speed/src/App.svelte

<script lang="ts">
	import { open, path, shell, toast, ui } from "@kksh/api/ui/iframe"
	import { Button, ModeWatcher, ThemeWrapper, updateTheme } from "@kksh/svelte"
	import SpeedGauge from "$lib/components/SpeedGauge.svelte"
	import StressSelect from "$lib/components/StressSelect.svelte"
	import TargetDirSelect from "$lib/components/TargetDirSelect.svelte"
	import { stress, targetDir } from "$lib/store"
	import { onMount } from "svelte"
	import { get } from "svelte/store"
	import { type API } from "./types"

	let readSpeedMBps = $state(0)
	let writeSpeedMBps = $state(0)
	let running = $state(false)

	onMount(() => {
		ui.registerDragRegion()
		ui.showBackButton({ right: 0.5, bottom: 0.5 })

		updateTheme({
			theme: "neutral",
			radius: 0.5,
			lightMode: "dark"
		})
	})

	async function startSpeedTest() {
		running = true
		const _targetDir = get(targetDir)
		if (!_targetDir) {
			toast.error("Target directory is not set")
			return
		}

		const { rpcChannel, process } = await shell.createDenoRpcChannel<{}, API>(
			"$EXTENSION/deno-src/lib.ts",
			[],
			{
				allowAllRead: true,
				allowAllWrite: true
			},
			{}
		)

		const api = rpcChannel.getAPI()
		const testFileName = "kk-disk-speed-test"

		const testFilePath = await path.join(_targetDir, testFileName)

		const writeResult = await api.sequentialWriteTest(
			{
				filePath: testFilePath,
				sizeInMB: get(stress) * 1024,
				rounds: 3,
				bufferSizeMB: 1,
				keepTheFile: true
			},
			({ totalMB, totalDuration }) => {
				writeSpeedMBps = totalMB / totalDuration
			}
		)
		const readResult = await api.sequentialReadTest(testFilePath, {
			deleteAfter: true
		})
		writeSpeedMBps = writeResult.totalMB / writeResult.totalDuration
		console.log("writeDuration", writeResult)

		readSpeedMBps = readResult.totalMB / readResult.totalDuration
		console.log("readDuration", readResult)

		process
			.kill()
			.then(() => {
				console.log("process killed")
			})
			.catch((err) => {
				console.error("error killing process", err)
				toast.error(`Error killing process ${process.pid}`)
			})
			.finally(() => {
				running = false
			})
	}
</script>

<svelte:window
	on:keydown={(e) => {
		if (e.key === "Escape") {
			ui.goBack()
		}
	}}
/>
<ModeWatcher />

<ThemeWrapper>
	<main class="container flex flex-col gap-4 pt-10">
		<div class="absolute left-0 top-0 h-10 w-screen" data-kunkun-drag-region></div>
		<div class="flex items-center gap-4">
			<strong>Stress</strong>
			<StressSelect />
		</div>
		<div class="flex items-center gap-4">
			<strong>Target Directory</strong>
			<TargetDirSelect />
			{#if $targetDir}
				<button
					onclick={() => {
						if ($targetDir) {
							open.folder($targetDir)
						}
					}}
				>
					<pre>{$targetDir}</pre>
				</button>
			{:else}
				<pre class="text-red-500">Pick a target directory to test</pre>
			{/if}
		</div>
		<Button disabled={!$targetDir || running} on:click={startSpeedTest}>Start Speed Test</Button>
		<!-- <div class="flex items-center gap-4">
			<strong>Write Speed</strong>
			<pre>{writeSpeedMBps} MB/s</pre>
		</div>
		<div class="flex items-center gap-4">
			<strong>Read Speed</strong>
			<pre>{readSpeedMBps} MB/s</pre>
		</div> -->
		<div class="grid h-96 w-full grid-cols-2">
			<SpeedGauge speedInMBps={writeSpeedMBps} title="Write Speed" class="h-full w-full" />
			<SpeedGauge speedInMBps={readSpeedMBps} title="Read Speed" class="h-full w-full" />
		</div>
	</main>
</ThemeWrapper>