add mempool info

Changed files
+27 -24
src
+11 -22
src/App.svelte
··· 1 1 <script lang="ts"> 2 2 import { onMount } from 'svelte'; 3 + import instancesData from './instances.json'; 3 4 4 5 type Instance = { 5 6 url: string, ··· 13 14 hash: null, 14 15 }) 15 16 16 - let instances = $state([ 17 - { url: "https://plcbundle.atscan.net", modern: true }, 18 - { url: "https://plc.j4ck.xyz", modern: false }, 19 - { url: "https://plc.indexx.dev", modern: false }, 20 - ]) 21 - 22 - //instancesSorted = $derived(instances.sort()) 17 + let instances = $state(instancesData) 18 + let instancesSorted = $derived(instances.sort((a, b) => a.status?.responseTime > b.status?.responseTime ? 1 : -1)) 23 19 24 20 async function getStatus(instance: Instance) { 25 21 let statusResp: object | undefined; 26 22 let url: string = instance.url; 27 23 const start = performance.now(); 28 - if (instance.modern === false) { 24 + try { 25 + statusResp = await (await fetch(`${url}/status`)).json() 26 + } catch (e) {} 27 + if (!statusResp) { 29 28 url = `https://keyoxide.org/api/3/get/http?url=${encodeURIComponent(url)}&format=text&time=${Date.now()}` 30 - } 31 - if (instance.modern) { 32 - try { 33 - statusResp = await (await fetch(`${url}/status`)).json() 34 - } catch (e) {} 35 - } 36 - if (!statusResp) { 37 29 const indexResp = await (await fetch(url)).text() 38 30 const [ _, from, to ] = indexResp?.match(/Range:\s+(\d{6}) - (\d{6})/) 39 31 statusResp = { ··· 67 59 } 68 60 instance.status = status 69 61 })) 70 - 71 - instances = instances.sort((a, b) => a.status?.responseTime > b.status?.responseTime ? 1 : -1) 72 - 73 62 } 74 63 75 64 onMount(() => { 76 65 doCheck() 77 66 }) 78 - 79 - <script> 80 67 </script> 81 68 82 69 <main class="w-full mt-10"> ··· 101 88 <th>endpoint</th> 102 89 <th>status</th> 103 90 <th>last bundle</th> 91 + <th>mempool</th> 104 92 <th>head</th> 105 93 <th>root</th> 106 94 <th>version</th> 107 - <th>rtt</th> 95 + <th>latency</th> 108 96 </tr> 109 97 </thead> 110 98 <tbody> 111 99 {#each instances as instance} 112 100 <tr> 113 101 <td><a href={instance.url} target="_blank" class="font-semibold">{instance.url.replace("https://", "")}</a></td> 114 - <td>{#if instance.status?.bundles?.last_bundle === lastKnownBundle.number}โœ…{:else if instance.status}๐Ÿ”„{/if}</td> 102 + <td>{#if instance.status?.bundles?.last_bundle === lastKnownBundle.number}โœ…{:else if instance.status}๐Ÿ”„{:else}โŒ›{/if}</td> 115 103 <td>{#if instance.status?.bundles?.last_bundle}{instance.status?.bundles?.last_bundle}{/if}</td> 104 + <td>{#if instance.status?.mempool}{instance.status?.mempool.count}{:else if instance.status}<span class="opacity-25">syncing</span>{/if}</td> 116 105 <td><span class="font-mono text-xs">{#if instance.status?.bundles?.head_hash}{instance.status?.bundles?.head_hash.slice(0, 7)}{/if}</span></td> 117 106 <td><span class="font-mono text-xs">{#if instance.status?.bundles?.root_hash}{instance.status?.bundles?.root_hash.slice(0, 7)}{/if}</span></td> 118 107 <td>{#if instance.status?.server?.version}{instance.status?.server?.version}{/if}</td>
+2 -2
src/app.css
··· 5 5 @import '@skeletonlabs/skeleton/themes/cerberus'; 6 6 7 7 .table th { 8 - @apply text-xs opacity-50 font-light px-3 text-left; 8 + @apply text-xs opacity-50 font-light px-2 text-left; 9 9 } 10 10 11 11 .table td { 12 - @apply py-1.5 px-3; 12 + @apply py-1.5 px-2; 13 13 } 14 14 15 15 a {
+14
src/instances.json
··· 1 + [ 2 + { 3 + "url": "https://plcbundle.atscan.net", 4 + "modern": true 5 + }, 6 + { 7 + "url": "https://plc.j4ck.xyz", 8 + "modern": false 9 + }, 10 + { 11 + "url": "https://plc.indexx.dev", 12 + "modern": false 13 + } 14 + ]