sysinfo/web/src/routes/+page.svelte

98 řádky
3.3 KiB
Svelte

<script>
import { onMount } from 'svelte'
let spec = null
onMount(async () => {
const resp = await fetch('https://sysinfo.gwei.cz/api/spec')
spec = await resp.json()
})
const serverCols = [
{ title: 'Name', key: 'name' },
{ title: 'Hostname', key: (s) => `<a href="https://${s.host}" class="underline hover:no-underline">${s.host}</a>` },
{ title: 'Status', key: (s) => `<a href="https://status.gwei.cz/dashboard/${s.monitor}" target="_blank"><img src="https://status.gwei.cz/api/badge/${s.monitor}/status?style=flat-square" /></a>` },
{ title: 'Location', key: 'location' },
{ title: 'Provider', key: 'provider' },
]
const cols = [
{ title: 'Name', key: 'name' },
{ title: 'Server', key: 'server' },
{ title: 'Endpoint', key: (s) => s.url ? `<a href="${s.url}" class="underline hover:no-underline">${s.url.replace(/^https?:\/\//, '')}</a>` : '' },
{ title: 'Status', key: (s) => `<a href="https://status.gwei.cz/dashboard/${s.monitor}" target="_blank"><img src="https://status.gwei.cz/api/badge/${s.monitor}/status?style=flat-square" /></a>` },
//{ title: 'Uptime', key: (s) => `<img src="https://status.gwei.cz/api/badge/${s.monitor}/uptime/24?style=flat-square" />` },
{ title: 'Version', key: (s) => s.versions ? s.versions.local : '-' },
{ title: 'Latest version', key: (s) => s.versions ? (s.versions.latest || 'n/a') : '-' },
];
</script>
<svelte:head>
<title>sysinfo.gwei.cz</title>
</svelte:head>
<section class="mb-10">
Overview of Gwei.cz servers and services
</section>
{#if spec}
<section class="mb-10">
<h2 class="mb-4 text-xl font-bold">Servers</h2>
<table class="table-auto w-full text-sm">
<thead>
<tr class="">
{#each serverCols as col}
<th class="text-left pb-2">{col.title}</th>
{/each}
</tr>
</thead>
<tbody>
{#each spec.servers as item}
<tr>
{#each serverCols as col}
<td class="">{@html typeof col.key === 'string' ? item[col.key] : col.key(item)}</td>
{/each}
</tr>
{/each}
</tbody>
</table>
</section>
<section>
<h2 class="mb-4 text-xl font-bold">Services</h2>
<table class="table-auto w-full text-sm">
<thead>
<tr class="">
{#each cols as col}
<th class="text-left pb-2">{col.title}</th>
{/each}
</tr>
</thead>
<tbody>
{#each spec.services as service}
<tr>
{#each cols as col}
<td class="">{@html typeof col.key === 'string' ? service[col.key] : col.key(service)}</td>
{/each}
</tr>
{/each}
</tbody>
</table>
</section>
<section class="mt-16 text-base">
Generated {new Date(spec.time).toLocaleString('en-GB', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', timeZone: 'Europe/Prague'})}
| <a href="https://sysinfo.gwei.cz/api/spec" class="underline hover:no-underline">api</a>
| <a href="https://git.gwei.cz/gweicz/sysinfo" class="underline hover:no-underline">source code</a>
</section>
<!--section class="pt-60">
<code><pre>{JSON.stringify(spec, null, 2)}</pre></code>
</section-->
{/if}