mirror of
https://github.com/MrUnknownDE/utools.git
synced 2026-04-19 14:13:44 +02:00
fix: display issue
This commit is contained in:
@@ -307,7 +307,7 @@
|
|||||||
<div id="loading-hint" class="hidden mt-2 max-w-sm text-center">
|
<div id="loading-hint" class="hidden mt-2 max-w-sm text-center">
|
||||||
<p class="text-xs text-amber-400/80 bg-amber-400/10 border border-amber-400/20 rounded-lg px-4 py-2">
|
<p class="text-xs text-amber-400/80 bg-amber-400/10 border border-amber-400/20 rounded-lg px-4 py-2">
|
||||||
⏳ Large ASes (like Cloudflare, Google, Tier-1 carriers) can take up to 15 seconds on the first
|
⏳ Large ASes (like Cloudflare, Google, Tier-1 carriers) can take up to 15 seconds on the first
|
||||||
lookup — subsequent lookups are cached for 24h.
|
lookup — subsequent lookups are cached for 7 days.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -431,7 +431,7 @@
|
|||||||
<p>Data: <a href="https://stat.ripe.net" target="_blank"
|
<p>Data: <a href="https://stat.ripe.net" target="_blank"
|
||||||
class="text-purple-400 hover:text-purple-300 transition-colors">RIPE Stat</a> & <a
|
class="text-purple-400 hover:text-purple-300 transition-colors">RIPE Stat</a> & <a
|
||||||
href="https://www.peeringdb.com" target="_blank"
|
href="https://www.peeringdb.com" target="_blank"
|
||||||
class="text-purple-400 hover:text-purple-300 transition-colors">PeeringDB</a> · Cache: 24h</p>
|
class="text-purple-400 hover:text-purple-300 transition-colors">PeeringDB</a> · Cache: 7 days</p>
|
||||||
<p class="mt-1">© 2025 <a href="https://mrunk.de"
|
<p class="mt-1">© 2025 <a href="https://mrunk.de"
|
||||||
class="text-purple-400 hover:text-purple-300 transition-colors">MrUnknownDE</a></p>
|
class="text-purple-400 hover:text-purple-300 transition-colors">MrUnknownDE</a></p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
@@ -75,6 +75,7 @@ async function doLookup(rawAsn) {
|
|||||||
|
|
||||||
// ─── Render ───────────────────────────────────────────────────────────────────
|
// ─── Render ───────────────────────────────────────────────────────────────────
|
||||||
function renderResults(data) {
|
function renderResults(data) {
|
||||||
|
// Show results FIRST so the graph container has real dimensions (clientWidth > 0)
|
||||||
loadingSection.classList.add('hidden');
|
loadingSection.classList.add('hidden');
|
||||||
resultsSection.classList.remove('hidden');
|
resultsSection.classList.remove('hidden');
|
||||||
// Reset loading hint for next lookup
|
// Reset loading hint for next lookup
|
||||||
@@ -87,33 +88,33 @@ function renderResults(data) {
|
|||||||
document.getElementById('res-name').textContent = data.name || 'Unknown';
|
document.getElementById('res-name').textContent = data.name || 'Unknown';
|
||||||
|
|
||||||
const announcedBadge = document.getElementById('res-announced-badge');
|
const announcedBadge = document.getElementById('res-announced-badge');
|
||||||
if (data.announced) announcedBadge.classList.remove('hidden');
|
if (announcedBadge) {
|
||||||
else announcedBadge.classList.add('hidden');
|
if (data.announced) announcedBadge.classList.remove('hidden');
|
||||||
|
else announcedBadge.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
const typeBadge = document.getElementById('res-type-badge');
|
const typeBadge = document.getElementById('res-type-badge');
|
||||||
typeBadge.textContent = data.type || '';
|
if (typeBadge) {
|
||||||
typeBadge.classList.toggle('hidden', !data.type);
|
typeBadge.textContent = data.type || '';
|
||||||
|
typeBadge.classList.toggle('hidden', !data.type);
|
||||||
|
}
|
||||||
|
|
||||||
const peeringPolicy = data.peeringdb?.peeringPolicy;
|
const peeringPolicy = data.peeringdb?.peeringPolicy;
|
||||||
document.getElementById('res-policy').textContent =
|
document.getElementById('res-policy').textContent =
|
||||||
peeringPolicy ? `Peering Policy: ${peeringPolicy}` : '';
|
peeringPolicy ? `Peering Policy: ${peeringPolicy}` : '';
|
||||||
|
|
||||||
document.getElementById('res-upstream-count').textContent = data.graph.level2.upstreams.length;
|
document.getElementById('res-upstream-count').textContent = data.graph?.level2?.upstreams?.length ?? '?';
|
||||||
document.getElementById('res-downstream-count').textContent = data.graph.level2.downstreams.length;
|
document.getElementById('res-downstream-count').textContent = data.graph?.level2?.downstreams?.length ?? '?';
|
||||||
document.getElementById('res-prefix-count').textContent = data.prefixes.length;
|
document.getElementById('res-prefix-count').textContent = data.prefixes?.length ?? '?';
|
||||||
|
|
||||||
// Graph
|
// Prefixes + IXPs (before graph — these are cheap)
|
||||||
renderGraph(data.graph);
|
|
||||||
|
|
||||||
// Prefixes
|
|
||||||
renderPrefixes(data.prefixes);
|
renderPrefixes(data.prefixes);
|
||||||
|
|
||||||
// IXPs
|
|
||||||
renderIxps(data.peeringdb?.ixps);
|
renderIxps(data.peeringdb?.ixps);
|
||||||
|
renderNeighbourTable('upstream-table', data.graph?.level2?.upstreams ?? [], 'blue');
|
||||||
|
renderNeighbourTable('downstream-table', data.graph?.level2?.downstreams ?? [], 'green');
|
||||||
|
|
||||||
// Neighbour tables
|
// Graph LAST — needs the container to be visible for clientWidth
|
||||||
renderNeighbourTable('upstream-table', data.graph.level2.upstreams, 'blue');
|
if (data.graph) renderGraph(data.graph);
|
||||||
renderNeighbourTable('downstream-table', data.graph.level2.downstreams, 'green');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ─── Prefix List ─────────────────────────────────────────────────────────────
|
// ─── Prefix List ─────────────────────────────────────────────────────────────
|
||||||
|
|||||||
Reference in New Issue
Block a user