tree.fail
+3
bun.lock
+3
bun.lock
···
6
6
"dependencies": {
7
7
"@tailwindcss/vite": "^4.1.16",
8
8
"date-fns": "^4.1.0",
9
+
"filesize": "^11.0.13",
9
10
"lodash": "^4.17.21",
10
11
"numeral": "^2.0.6",
11
12
"tailwindcss": "^4.1.16",
···
297
298
"esrap": ["esrap@2.1.2", "", { "dependencies": { "@jridgewell/sourcemap-codec": "1.5.5" } }, "sha512-DgvlIQeowRNyvLPWW4PT7Gu13WznY288Du086E751mwwbsgr29ytBiYeLzAGIo0qk3Ujob0SDk8TiSaM5WQzNg=="],
298
299
299
300
"fdir": ["fdir@6.5.0", "", { "optionalDependencies": { "picomatch": "4.0.3" } }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
301
+
302
+
"filesize": ["filesize@11.0.13", "", {}, "sha512-mYJ/qXKvREuO0uH8LTQJ6v7GsUvVOguqxg2VTwQUkyTPXXRRWPdjuUPVqdBrJQhvci48OHlNGRnux+Slr2Rnvw=="],
300
303
301
304
"fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
302
305
+1
package.json
+1
package.json
+21
-2
src/App.svelte
+21
-2
src/App.svelte
···
1
1
<script lang="ts">
2
2
import { onMount } from 'svelte';
3
+
import { filesize } from 'filesize';
3
4
import { formatDistanceToNow, addSeconds, subSeconds, formatDate, formatISO9075 } from 'date-fns';
4
5
import { Progress, Switch } from '@skeletonlabs/skeleton-svelte';
5
6
import orderBy from "lodash/orderBy";
···
18
19
root_hash: string;
19
20
head_hash: string;
20
21
end_time?: string;
22
+
total_size: number;
23
+
uncompressed_size: number;
21
24
};
22
25
server: {
23
26
uptime: number;
···
44
47
mempoolPercent: number;
45
48
time?: string;
46
49
etaNext?: Date;
50
+
totalSize: number;
51
+
totalSizeUncompressed: number;
47
52
}
48
53
49
54
let lastKnownBundle = $state<LastKnownBundle>({
···
128
133
lastKnownBundle.mempool = status.mempool.count
129
134
lastKnownBundle.mempoolPercent = Math.round((lastKnownBundle.mempool/100)*100)/100
130
135
lastKnownBundle.etaNext = addSeconds(new Date(), status.mempool.eta_next_bundle_seconds)
136
+
lastKnownBundle.totalSize = status.bundles.total_size
137
+
lastKnownBundle.totalSizeUncompressed = status.bundles.uncompressed_size
131
138
}
132
139
}
133
140
lastUpdated = new Date()
···
192
199
</div>
193
200
</header>
194
201
195
-
<div class="flex gap-10 mt-6 grid grid-cols-2">
202
+
<div class="gap-10 mt-6 grid grid-cols-3">
196
203
<div>
197
204
<h2 class="opacity-75 text-sm">Last known bundle</h2>
198
205
<div>
···
228
235
<div class="font-semibold text-2xl animate-pulse">{lastKnownBundle.number + 1}</div>
229
236
<div>{formatNumber(lastKnownBundle.mempool)} / {formatNumber(BUNDLE_OPS)} <span class="opacity-50">({lastKnownBundle.mempoolPercent}%)</span></div>
230
237
{#if lastKnownBundle.etaNext}
231
-
<div class="mt-2 opacity-50">ETA: {formatDistanceToNow(lastKnownBundle.etaNext)}</div>
238
+
<div class="mt-1 opacity-50">ETA: {formatDistanceToNow(lastKnownBundle.etaNext)}</div>
232
239
{/if}
233
240
</div>
234
241
{/if}
235
242
</div>
236
243
</div>
244
+
{#if lastKnownBundle.number > 0}
245
+
<div class="">
246
+
<div>
247
+
<h2 class="opacity-75 text-sm">Statistics</h2>
248
+
</div>
249
+
<div class="mt-2 grid grid-cols-1 gap-1">
250
+
<div><span class="opacity-50">Instances:</span> {instances.filter(i => i._head).length} latest / {instances.length} total</div>
251
+
<div><span class="opacity-50">Bundles Size:</span> {filesize(lastKnownBundle.totalSize)}</div>
252
+
<div><span class="opacity-50">Uncompressed:</span> {filesize(lastKnownBundle.totalSizeUncompressed)}</div>
253
+
</div>
254
+
</div>
255
+
{/if}
237
256
</div>
238
257
239
258
<table class="table mt-10">