<script lang="ts">
import { onMount } from "svelte";
import HostMetricsGraph from "./HostMetricsGraph.svelte";
import { load_host_names } from "./HostMetricsLib";
import Expandable from "util/Expandable.svelte";
import ToggleButton from "layout/ToggleButton.svelte";

const groups: {
	title: string,
	graphs: {
		metric: string,
		data_type: string,
	}[],
}[] = [
	{
		title: "API",
		graphs: [
			{metric: "api_request", data_type: "number"},
			{metric: "api_request_duration", data_type: "duration"},
			{metric: "api_error", data_type: "number"},
			{metric: "api_panic", data_type: "number"},
		],
	}, {
		title: "Task scheduler",
		graphs: [
			{metric: "scheduler_filesystem_remove_orphan", data_type: "number"},
			{metric: "scheduler_timeseries_delete", data_type: "number"},
		],
	}, {
		title: "Database",
		graphs: [
			{metric: "database_query", data_type: "number"},
			{metric: "database_query_duration", data_type: "duration"},
			{metric: "database_query_rows", data_type: "number"},
			{metric: "database_query_retries", data_type: "number"},
			{metric: "database_query_error", data_type: "number"},
		],
	}, {
		title: "Pixelstore",
		graphs: [
			{metric: "pixelstore_write", data_type: "number"},
			{metric: "pixelstore_write_size", data_type: "bytes"},
			{metric: "pixelstore_cache_fetch", data_type: "number"},
			{metric: "pixelstore_cache_fetch_size", data_type: "bytes"},
			{metric: "pixelstore_cache_delete", data_type: "number"},
			{metric: "pixelstore_connection_error", data_type: "number"},
			{metric: "pixelstore_peer_down", data_type: "number"},
			{metric: "pixelstore_peer_up", data_type: "number"},
		],
	}, {
		title: "Pixelstore reads",
		graphs: [
			{metric: "pixelstore_cache_read", data_type: "number"},
			{metric: "pixelstore_cache_read_size", data_type: "bytes"},
			{metric: "pixelstore_neighbour_read", data_type: "number"},
			{metric: "pixelstore_neighbour_read_size", data_type: "bytes"},
			{metric: "pixelstore_reed_solomon_read", data_type: "number"},
			{metric: "pixelstore_reed_solomon_read_size", data_type: "bytes"},
		],
	}, {
		title: "Pixelstore shards",
		graphs: [
			{metric: "pixelstore_shard_delete", data_type: "number"},
			{metric: "pixelstore_shard_delete_size", data_type: "bytes"},
			{metric: "pixelstore_shard_repair", data_type: "number"},
			{metric: "pixelstore_shard_repair_size", data_type: "bytes"},
			{metric: "pixelstore_shard_move", data_type: "number"},
			{metric: "pixelstore_shard_move_size", data_type: "bytes"},
		],
	},
]

let dataWindow: number = $state(60)
let dataInterval: number = $state(1)
let showAggregate: boolean = $state(false)

const setWindow = (window: number, interval: number) => {
	dataWindow = window
	dataInterval = interval
}

let loaded = $state(false)
onMount(async () => {
	await load_host_names()
	loaded = true
})
</script>

{#if loaded}
	<div class="highlight_border" style="margin-bottom: 6px;">
		<button onclick={() => setWindow(60, 1)}>Hour 1m</button>
		<button onclick={() => setWindow(720, 1)}>Half Day 1m</button>
		<button onclick={() => setWindow(1440, 60)}>Day 1h</button>
		<button onclick={() => setWindow(10080, 60)}>Week 1h</button>
		<button onclick={() => setWindow(43200, 60)}>Month 1h</button>
		<button onclick={() => setWindow(131400, 1440)}>Quarter 1d</button>
		<button onclick={() => setWindow(262800, 1440)}>Half-year 1d</button>
		<button onclick={() => setWindow(525600, 1440)}>Year 1d</button>
		<button onclick={() => setWindow(1051200, 1440)}>Two Years 1d</button>
		<button onclick={() => setWindow(2628000, 1440)}>Five Years 1d</button>
		<br/>
		<ToggleButton bind:on={showAggregate}>Aggregate</ToggleButton>
	</div>

	{#each groups as group (group.title)}
		<Expandable click_expand expanded>
			{#snippet header()}
				<div class="title">{group.title}</div>
			{/snippet}

			<div class="grid">
				{#each group.graphs as graph (graph.metric)}
					<HostMetricsGraph
						window={dataWindow}
						interval={dataInterval}
						metric={graph.metric}
						data_type={graph.data_type}
						aggregate={showAggregate}
					/>
				{/each}
			</div>
		</Expandable>
	{/each}
{/if}

<style>
.title {
	font-size: 1.6em;
	padding: 4px;
	text-align: center;
}
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}
</style>
