fnx_web/svelte/src/filesystem/FileStats.svelte

<script lang="ts">
import { onMount } from "svelte";
import { formatDataVolume, formatThousands } from "util/Formatting"
import { fs_path_url } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "./FSNavigator";

let {
	nav,
	expanded = $bindable(false)
}: {
	nav: FSNavigator
	expanded: boolean
} = $props();

let loading = $state(true)
let downloads = $state(0)
let egress_used = $state(0)
let socket = null
let error_msg = $state("")

let connected_to = ""

onMount(() => {
	const unsub = nav.subscribe(update_base)
	return () => {
		unsub()
		close_socket()
	}
})

let total_directories = $state(0)
let total_files = $state(0)
let total_file_size = $state(0)

const update_base = async () => {
	if (!nav.initialized) {
		return
	}

	// Update counters with new info
	total_directories = nav.children.reduce((acc, cur) => cur.type === "dir" ? acc + 1 : acc, 0)
	total_files = nav.children.reduce((acc, cur) => cur.type === "file" ? acc + 1 : acc, 0)
	total_file_size = nav.children.reduce((acc, cur) => acc + cur.file_size, 0)

	if (nav.base.type === "dir") {
		console.debug("Not opening websocket for directory")
		return
	} else if (connected_to === nav.base.path) {
		return // If we're already connected to the same path, don't reconnect
	}

	console.debug("Websocket connection path changed from", connected_to, "to", nav.base.path)

	connected_to = nav.base.path

	// If the socket is already active we need to close it
	close_socket()

	loading = true

	let ws_endpoint = location.origin.replace(/^http/, 'ws') +
		fs_path_url(nav.base.path).replace(/^http/, 'ws') +
		"?download_stats"

	console.log("Opening socket to", ws_endpoint, "for path", nav.base.path)
	socket = new WebSocket(ws_endpoint)
	socket.onmessage = msg => {
		let j = JSON.parse(msg.data)
		console.debug("WS update", j)

		error_msg = ""
		loading = false
		downloads = j.downloads
		egress_used = j.egress
	}
	socket.onerror = err => {
		console.error("WS error", err)
		error_msg = "failed to get stats, retrying..."

		close_socket()

		window.setTimeout(() => {
			if (socket === null) {
				update_base()
			}
		}, 5000)
	}
}

const close_socket = () => {
	// Clear this path so the update_base function does not instantly return
	// with the next retry
	connected_to = ""

	if (socket !== null) {
		// Disable the error handler so it doesn't start retrying the connection
		socket.onerror = null
		socket.close()
		socket = null
	}
}

const toggle_expand = (e: MouseEvent) => {
	e.stopPropagation()
	e.preventDefault()
	expanded = !expanded
}
const toggle_expand_keyboard = (e: KeyboardEvent) => {
	if (e.key === " " || e.key === "Enter") {
		e.stopPropagation()
		e.preventDefault()
		expanded = !expanded
	}
}
</script>

<div class="container" onclick={toggle_expand} onkeypress={toggle_expand_keyboard} role="presentation">
	<button class="button_expand hidden_vertical" onclick={toggle_expand}>
		{#if expanded}
			<i class="icon">expand_more</i>
		{:else}
			<i class="icon">expand_less</i>
		{/if}
	</button>

	{#if $nav.base.type === "file"}
		{#if error_msg !== ""}
			{error_msg}
		{:else}
			<div class="group">
				<div class="label">Downloads</div>
				<div class="stat">
					{loading ? "Loading..." : formatThousands(downloads)}
				</div>
			</div>
			<div class="group">
				<div class="label">Egress</div>
				<div class="stat">
					{loading ? "Loading..." : formatDataVolume(egress_used, 3)}
				</div>
			</div>
		{/if}

		<div class="group">
			<div class="label">Size</div>
			<div class="stat">{formatDataVolume($nav.base.file_size, 3)}</div>
		</div>

	{:else if $nav.base.type === "dir" || $nav.base.type === "bucket"}

		<div class="group">
			<div class="label">Directories</div>
			<div class="stat">{formatThousands(total_directories)}</div>
		</div>

		<div class="group">
			<div class="label">Files</div>
			<div class="stat">{formatThousands(total_files)}</div>
		</div>

		<div class="group">
			<div class="label">Total size</div>
			<div class="stat">{formatDataVolume(total_file_size, 3)}</div>
		</div>
	{/if}
</div>

<style>
.container {
	display: flex;
	flex-direction: row;
}
.group {
	flex: 1 1 auto;
	text-align: center;
}
.label {
	text-align: center;
	font-size: 0.8em;
	line-height: 1em;
}
.stat {
	line-height: 1.2em;
}
</style>