Add host metrics dashboard
This commit is contained in:
22
svelte/package-lock.json
generated
22
svelte/package-lock.json
generated
@@ -10,7 +10,7 @@
|
||||
"dependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
||||
"behave-js": "^1.5.0",
|
||||
"chart.js": "^4.4.6",
|
||||
"chart.js": "^4.5.1",
|
||||
"country-data-list": "^1.4.0",
|
||||
"pure-color": "^1.3.0",
|
||||
"rollup-plugin-includepaths": "^0.2.4",
|
||||
@@ -65,7 +65,6 @@
|
||||
"integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.27.1",
|
||||
"@babel/generator": "^7.28.3",
|
||||
@@ -2507,7 +2506,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-6.2.1.tgz",
|
||||
"integrity": "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
|
||||
"debug": "^4.4.1",
|
||||
@@ -2559,7 +2557,6 @@
|
||||
"integrity": "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~7.16.0"
|
||||
}
|
||||
@@ -2576,7 +2573,6 @@
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
|
||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
@@ -2776,7 +2772,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.8.9",
|
||||
"caniuse-lite": "^1.0.30001746",
|
||||
@@ -2820,9 +2815,9 @@
|
||||
"license": "CC-BY-4.0"
|
||||
},
|
||||
"node_modules/chart.js": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
|
||||
"integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
|
||||
"version": "4.5.1",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
|
||||
"integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@kurkle/color": "^0.3.0"
|
||||
@@ -3535,7 +3530,6 @@
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
@@ -3562,7 +3556,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
@@ -3708,7 +3701,6 @@
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.4.tgz",
|
||||
"integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/estree": "1.0.8"
|
||||
},
|
||||
@@ -4045,7 +4037,6 @@
|
||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.39.11.tgz",
|
||||
"integrity": "sha512-8MxWVm2+3YwrFbPaxOlT1bbMi6OTenrAgks6soZfiaS8Fptk4EVyRIFhJc3RpO264EeSNwgjWAdki0ufg4zkGw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/remapping": "^2.3.4",
|
||||
"@jridgewell/sourcemap-codec": "^1.5.0",
|
||||
@@ -4136,7 +4127,6 @@
|
||||
"integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==",
|
||||
"devOptional": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/source-map": "^0.3.3",
|
||||
"acorn": "^8.15.0",
|
||||
@@ -4183,8 +4173,7 @@
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD",
|
||||
"peer": true
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "5.9.3",
|
||||
@@ -4288,7 +4277,6 @@
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz",
|
||||
"integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"fdir": "^6.5.0",
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
"dependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
||||
"behave-js": "^1.5.0",
|
||||
"chart.js": "^4.4.6",
|
||||
"chart.js": "^4.5.1",
|
||||
"country-data-list": "^1.4.0",
|
||||
"pure-color": "^1.3.0",
|
||||
"rollup-plugin-includepaths": "^0.2.4",
|
||||
|
||||
131
svelte/src/admin_panel/HostMetrics.svelte
Normal file
131
svelte/src/admin_panel/HostMetrics.svelte
Normal file
@@ -0,0 +1,131 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import HostMetricsGraph from "./HostMetricsGraph.svelte";
|
||||
import { load_host_names } from "./HostMetricsLib";
|
||||
import Expandable from "util/Expandable.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)
|
||||
|
||||
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>
|
||||
</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}
|
||||
/>
|
||||
{/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>
|
||||
101
svelte/src/admin_panel/HostMetricsGraph.svelte
Normal file
101
svelte/src/admin_panel/HostMetricsGraph.svelte
Normal file
@@ -0,0 +1,101 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import Chart from "util/Chart.svelte";
|
||||
import { get_endpoint } from "lib/PixeldrainAPI";
|
||||
import { host_colour, host_label } from "./HostMetricsLib";
|
||||
|
||||
let {
|
||||
metric = "",
|
||||
window = 0, // Size of the data window in minutes
|
||||
interval = 0, // Interval of the datapoints in minutes
|
||||
data_type = "number"
|
||||
}: {
|
||||
metric: string;
|
||||
window: number;
|
||||
interval: number;
|
||||
data_type?: string;
|
||||
} = $props();
|
||||
|
||||
let chart: Chart = $state()
|
||||
let chartTimeout: NodeJS.Timeout = null
|
||||
|
||||
const loadGraph = () => {
|
||||
if (chartTimeout !== null) { clearTimeout(chartTimeout) }
|
||||
chartTimeout = setTimeout(() => { loadGraph() }, 10000)
|
||||
|
||||
let today = new Date()
|
||||
let start = new Date()
|
||||
start.setMinutes(start.getMinutes() - window)
|
||||
|
||||
fetch(
|
||||
get_endpoint() + "/admin/host_metrics" +
|
||||
"?start=" + start.toISOString() +
|
||||
"&end=" + today.toISOString() +
|
||||
"&metric="+ metric +
|
||||
"&interval=" + interval
|
||||
).then(resp => {
|
||||
if (!resp.ok) { return Promise.reject("Error: " + resp.status); }
|
||||
return resp.json();
|
||||
}).then(async resp => {
|
||||
|
||||
resp.timestamps.forEach((val: string, idx: number) => {
|
||||
let date = new Date(val);
|
||||
let dateStr: string = date.getFullYear().toString();
|
||||
dateStr += "-" + ("00" + (date.getMonth() + 1)).slice(-2);
|
||||
dateStr += "-" + ("00" + date.getDate()).slice(-2);
|
||||
dateStr += " " + ("00" + date.getHours()).slice(-2);
|
||||
dateStr += ":" + ("00" + date.getMinutes()).slice(-2);
|
||||
resp.timestamps[idx] = " " + dateStr + " "; // Poor man's padding
|
||||
});
|
||||
chart.data().labels = resp.timestamps;
|
||||
|
||||
let i = 0
|
||||
for (const host of Object.keys(resp.host_amounts).sort()) {
|
||||
if (chart.data().datasets[i] === undefined) {
|
||||
chart.data().datasets[i] = {
|
||||
label: await host_label(host),
|
||||
data: [],
|
||||
borderWidth: 1,
|
||||
pointRadius: 0,
|
||||
}
|
||||
}
|
||||
chart.data().datasets[i].borderColor = host_colour(host)
|
||||
chart.data().datasets[i].backgroundColor = host_colour(host)
|
||||
|
||||
if (data_type === "duration") {
|
||||
for (let i = 0; i < resp.host_amounts[host].length; i++) {
|
||||
// Go durations are expressed on nanoseconds, divide by 1
|
||||
// million to convert to milliseconds
|
||||
resp.host_amounts[host][i] /= 1000000
|
||||
}
|
||||
}
|
||||
|
||||
chart.data().datasets[i].data = resp.host_amounts[host]
|
||||
i++
|
||||
}
|
||||
|
||||
chart.update()
|
||||
})
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
loadGraph();
|
||||
|
||||
return () => {
|
||||
if (chartTimeout !== null) {
|
||||
clearTimeout(chartTimeout)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="title">{metric}</div>
|
||||
<Chart bind:this={chart} data_type={data_type} legend={false} ticks={false} animations={false} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.title {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
</style>
|
||||
50
svelte/src/admin_panel/HostMetricsLib.ts
Normal file
50
svelte/src/admin_panel/HostMetricsLib.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import { loading_finish, loading_start } from "lib/Loading";
|
||||
import { get_endpoint } from "lib/PixeldrainAPI";
|
||||
import hsl2rgb from "pure-color/convert/hsl2rgb";
|
||||
import rgb2hex from "pure-color/convert/rgb2hex";
|
||||
|
||||
let host_colours: { [key: string]: string } = {}
|
||||
export const host_colour = (id: string): string => {
|
||||
let host_count: number = Object.keys(host_colours).length
|
||||
if (host_colours[id] === undefined) {
|
||||
host_colours[id] = ""
|
||||
} else {
|
||||
return host_colours[id]
|
||||
}
|
||||
|
||||
const colour_interval = 360 / (host_count + 1)
|
||||
|
||||
var i = 0
|
||||
for (const host of Object.keys(host_colours).sort()) {
|
||||
host_colours[host] = rgb2hex(hsl2rgb([i * colour_interval, 100, 70]))
|
||||
i++
|
||||
}
|
||||
|
||||
return host_colours[id]
|
||||
}
|
||||
|
||||
let host_names: { [key: string]: string } = {}
|
||||
export const host_label = async (id: string): Promise<string> => {
|
||||
if (id === "00000000-0000-0000-0000-000000000000") {
|
||||
return "task scheduler"
|
||||
}
|
||||
if (host_names[id] === undefined) {
|
||||
return id
|
||||
}
|
||||
|
||||
return host_names[id]
|
||||
}
|
||||
|
||||
export const load_host_names = async () => {
|
||||
loading_start()
|
||||
try {
|
||||
const req = await fetch(get_endpoint() + "/status")
|
||||
const j = await req.json()
|
||||
|
||||
for (const peer of j.peers) {
|
||||
host_names[peer.id] = peer.hostname
|
||||
}
|
||||
} finally {
|
||||
loading_finish()
|
||||
}
|
||||
}
|
||||
@@ -10,6 +10,7 @@ import MollieSettlements from "./MollieSettlements.svelte";
|
||||
import PayPalTaxes from "./PayPalTaxes.svelte";
|
||||
import UserBans from "./user_bans/UserBans.svelte";
|
||||
import InvoiceVat from "./InvoiceVAT.svelte";
|
||||
import HostMetrics from "./HostMetrics.svelte";
|
||||
|
||||
let pages = [
|
||||
{
|
||||
@@ -47,6 +48,11 @@ let pages = [
|
||||
title: "User Management",
|
||||
icon: "person",
|
||||
component: UserManagement,
|
||||
}, {
|
||||
path: "/admin/host_metrics",
|
||||
title: "Host Metrics",
|
||||
icon: "area_chart",
|
||||
component: HostMetrics,
|
||||
}, {
|
||||
path: "/admin/mollie_settlements",
|
||||
title: "Prepaid accounting",
|
||||
|
||||
@@ -10,5 +10,8 @@
|
||||
"noUnusedLocals": true,
|
||||
"module": "preserve",
|
||||
"moduleResolution": "bundler"
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"src/"
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user