mirror of
https://github.com/MrUnknownDE/utools.git
synced 2026-04-05 16:22:00 +02:00
add asn info grid
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 ?? '?';
|
||||
|
||||
Reference in New Issue
Block a user