Rearrange admin panel to reduce clutter

This commit is contained in:
2024-04-22 22:57:18 +02:00
parent 58e4507f16
commit cf0494d29c
2 changed files with 58 additions and 54 deletions

View File

@@ -203,6 +203,7 @@ onDestroy(() => {
</a>
<section>
<h3>Process stats</h3>
<table>
<tr>
<td>DB Time</td>
@@ -214,63 +215,56 @@ onDestroy(() => {
</tr>
</table>
<h3>Cache nodes</h3>
</section>
<PeerTable peers={status.peers.reduce((acc, val) => {if (val.role === "cache") {acc.push(val)}; return acc}, [])}/>
<section>
<h3>Storage nodes</h3>
</section>
<PeerTable peers={status.peers.reduce((acc, val) => {if (val.role === "storage") {acc.push(val)}; return acc}, [])}/>
<section>
<h3>Pixelstore stats</h3>
<table>
<thead>
<tr>
<td>Source</td>
<td>Reads</td>
<td>Reads %</td>
<td>Reads / s</td>
<td>Total size</td>
<td>Size %</td>
<td>Size / s</td>
</tr>
</thead>
<tbody>
<tr>
<td>Local cache</td>
<td>{status.local_reads}</td>
<td>{((status.local_reads / total_reads) * 100).toPrecision(3)}%</td>
<td>{status.local_reads_per_sec.toPrecision(4)}/s</td>
<td>{formatDataVolume(status.local_read_size, 4)}</td>
<td>{((status.local_read_size / total_read_size) * 100).toPrecision(3)}%</td>
<td>{formatDataVolume(status.local_read_size_per_sec, 4)}/s</td>
</tr>
<tr>
<td>Neighbour</td>
<td>{status.neighbour_reads}</td>
<td>{((status.neighbour_reads / total_reads) * 100).toPrecision(3)}%</td>
<td>{status.neighbour_reads_per_sec.toPrecision(4)}/s</td>
<td>{formatDataVolume(status.neighbour_read_size, 4)}</td>
<td>{((status.neighbour_read_size / total_read_size) * 100).toPrecision(3)}%</td>
<td>{formatDataVolume(status.neighbour_read_size_per_sec, 4)}/s</td>
</tr>
<tr>
<td>Reed-solomon</td>
<td>{status.remote_reads}</td>
<td>{((status.remote_reads / total_reads) * 100).toPrecision(3)}%</td>
<td>{status.remote_reads_per_sec.toPrecision(4)}/s</td>
<td>{formatDataVolume(status.remote_read_size, 4)}</td>
<td>{((status.remote_read_size / total_read_size) * 100).toPrecision(3)}%</td>
<td>{formatDataVolume(status.remote_read_size_per_sec, 4)}/s</td>
</tr>
</tbody>
</table>
<div class="table_scroll">
<table>
<thead>
<tr>
<td>Source</td>
<td>Reads</td>
<td>Reads %</td>
<td>Reads / s</td>
<td>Total size</td>
<td>Size %</td>
<td>Size / s</td>
</tr>
</thead>
<tbody>
<tr>
<td>Local cache</td>
<td>{status.local_reads}</td>
<td>{((status.local_reads / total_reads) * 100).toPrecision(3)}%</td>
<td>{status.local_reads_per_sec.toPrecision(4)}/s</td>
<td>{formatDataVolume(status.local_read_size, 4)}</td>
<td>{((status.local_read_size / total_read_size) * 100).toPrecision(3)}%</td>
<td>{formatDataVolume(status.local_read_size_per_sec, 4)}/s</td>
</tr>
<tr>
<td>Neighbour</td>
<td>{status.neighbour_reads}</td>
<td>{((status.neighbour_reads / total_reads) * 100).toPrecision(3)}%</td>
<td>{status.neighbour_reads_per_sec.toPrecision(4)}/s</td>
<td>{formatDataVolume(status.neighbour_read_size, 4)}</td>
<td>{((status.neighbour_read_size / total_read_size) * 100).toPrecision(3)}%</td>
<td>{formatDataVolume(status.neighbour_read_size_per_sec, 4)}/s</td>
</tr>
<tr>
<td>Reed-solomon</td>
<td>{status.remote_reads}</td>
<td>{((status.remote_reads / total_reads) * 100).toPrecision(3)}%</td>
<td>{status.remote_reads_per_sec.toPrecision(4)}/s</td>
<td>{formatDataVolume(status.remote_read_size, 4)}</td>
<td>{((status.remote_read_size / total_read_size) * 100).toPrecision(3)}%</td>
<td>{formatDataVolume(status.remote_read_size_per_sec, 4)}/s</td>
</tr>
</tbody>
</table>
</div>
<p>
Cache threshold: {status.cache_threshold.toFixed(3)}
Cache threshold: {formatDataVolume(status.cache_threshold, 4)}
</p>
<h3>Socket statistics</h3>
<h3>Socket stats</h3>
<table>
<thead>
<tr>
@@ -295,6 +289,16 @@ onDestroy(() => {
</tr>
</tbody>
</table>
<h3>Cache nodes</h3>
</section>
<PeerTable peers={status.peers.reduce((acc, val) => {if (val.role === "cache") {acc.push(val)}; return acc}, [])}/>
<section>
<h3>Storage nodes</h3>
</section>
<PeerTable peers={status.peers.reduce((acc, val) => {if (val.role === "storage") {acc.push(val)}; return acc}, [])}/>
<section>
<h3>Query statistics</h3>
<div class="table_scroll" style="text-align: left;">
<table>

View File

@@ -28,7 +28,7 @@ export const formatDataVolume = (amt, precision) => {
} else if (amt >= 1e3-1) {
return (amt/1e3).toPrecision(precision) + " kB";
}
return amt + " B"
return amt.toPrecision(precision) + " B"
}
export const formatDataVolumeBits = (amt, precision) => {
amt = amt*8