add asn info grid

This commit is contained in:
2026-03-05 21:04:57 +01:00
parent 636cd9a1e4
commit b78b19b58b
3 changed files with 84 additions and 3 deletions

View File

@@ -143,6 +143,9 @@ async function fetchPeeringDb(asn) {
const result = {
peeringPolicy: net.policy_general || null,
infoType: net.info_type || null,
infoTraffic: net.info_traffic || null,
infoRatio: net.info_ratio || null,
infoScope: net.info_scope || null,
website: net.website || null,
ixps: (net.netixlan_set || []).map(ix => ({
name: ix.name,

View File

@@ -327,7 +327,34 @@
class="text-xs px-2 py-0.5 bg-blue-500/20 border border-blue-500/40 text-blue-300 rounded-full"></span>
</div>
<h2 id="res-name" class="text-xl font-semibold text-white mb-1"></h2>
<p id="res-policy" class="text-sm text-gray-400"></p>
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-400 mb-2">
<span id="res-policy-container" class="hidden">Peering Policy: <span id="res-policy"
class="text-gray-200"></span></span>
<span id="res-website-container" class="hidden">Website: <a id="res-website" href="#"
target="_blank"
class="text-purple-400 hover:text-purple-300 transition-colors"></a></span>
</div>
<!-- Rich Info Grid -->
<div id="res-rich-info"
class="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-4 pt-4 border-t border-gray-700/50 hidden">
<div id="res-info-type-container" class="hidden">
<div class="text-xs text-gray-500 uppercase tracking-widest">Type</div>
<div id="res-info-type" class="text-sm text-gray-200 capitalize mt-0.5"></div>
</div>
<div id="res-info-scope-container" class="hidden">
<div class="text-xs text-gray-500 uppercase tracking-widest">Scope</div>
<div id="res-info-scope" class="text-sm text-gray-200 capitalize mt-0.5"></div>
</div>
<div id="res-info-traffic-container" class="hidden">
<div class="text-xs text-gray-500 uppercase tracking-widest">Traffic</div>
<div id="res-info-traffic" class="text-sm text-gray-200 capitalize mt-0.5"></div>
</div>
<div id="res-info-ratio-container" class="hidden">
<div class="text-xs text-gray-500 uppercase tracking-widest">Ratio</div>
<div id="res-info-ratio" class="text-sm text-gray-200 capitalize mt-0.5"></div>
</div>
</div>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 text-center">
<div class="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3">

View File

@@ -100,8 +100,59 @@ function renderResults(data) {
}
const peeringPolicy = data.peeringdb?.peeringPolicy;
document.getElementById('res-policy').textContent =
peeringPolicy ? `Peering Policy: ${peeringPolicy}` : '';
const policyContainer = document.getElementById('res-policy-container');
const policyEl = document.getElementById('res-policy');
if (policyContainer && policyEl) {
if (peeringPolicy) {
policyEl.textContent = peeringPolicy;
policyContainer.classList.remove('hidden');
} else {
policyContainer.classList.add('hidden');
}
}
const website = data.peeringdb?.website;
const websiteContainer = document.getElementById('res-website-container');
const websiteEl = document.getElementById('res-website');
if (websiteContainer && websiteEl) {
if (website) {
websiteEl.href = website;
websiteEl.textContent = website.replace(/^https?:\/\//, '').replace(/\/$/, '');
websiteContainer.classList.remove('hidden');
} else {
websiteContainer.classList.add('hidden');
}
}
// Rich Info Grid
const richInfo = document.getElementById('res-rich-info');
let hasRichInfo = false;
const fields = [
{ id: 'type', value: data.peeringdb?.infoType },
{ id: 'scope', value: data.peeringdb?.infoScope },
{ id: 'traffic', value: data.peeringdb?.infoTraffic },
{ id: 'ratio', value: data.peeringdb?.infoRatio }
];
fields.forEach(f => {
const container = document.getElementById(`res-info-${f.id}-container`);
const el = document.getElementById(`res-info-${f.id}`);
if (container && el) {
if (f.value) {
el.textContent = f.value;
container.classList.remove('hidden');
hasRichInfo = true;
} else {
container.classList.add('hidden');
}
}
});
if (richInfo) {
if (hasRichInfo) richInfo.classList.remove('hidden');
else richInfo.classList.add('hidden');
}
document.getElementById('res-upstream-count').textContent = data.graph?.level2?.upstreams?.length ?? '?';
document.getElementById('res-downstream-count').textContent = data.graph?.level2?.downstreams?.length ?? '?';