75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
|
import "./style.css";
|
||
|
import { createPage, getMembers } from "./lib/getPeers";
|
||
|
window.addEventListener("load", () => {
|
||
|
getMembers("https://ixpm-sea.moeqing.com/api/v4/member-export/ixf/0.6").then(
|
||
|
(list) => {
|
||
|
const seaMembers = createPage("app-sea-members", "MoeIX", "Seattle");
|
||
|
seaMembers.style.display = "none";
|
||
|
const groups = document.createElement("div");
|
||
|
groups.classList.add("group");
|
||
|
groups.classList.add("pops");
|
||
|
groups.id = "pops";
|
||
|
list.member_list.forEach((member) => {
|
||
|
const memberElement = document.createElement("div");
|
||
|
memberElement.classList.add("pop");
|
||
|
if (
|
||
|
member.connection_list.find((k) => k.ixp_id == 1)?.state != "active"
|
||
|
)
|
||
|
memberElement.setAttribute("status", "error");
|
||
|
else memberElement.setAttribute("status", "working");
|
||
|
|
||
|
const connection = member.connection_list.find((k) => k.ixp_id == 1);
|
||
|
|
||
|
const span = document.createElement("span");
|
||
|
const name = document.createElement("name");
|
||
|
const asn = document.createElement("asn");
|
||
|
name.innerHTML = member.name ?? `AS${member.asnum}`;
|
||
|
asn.innerHTML = `AS${member.asnum} @ ${
|
||
|
connection?.if_list?.find((k) => k.switch_id == 1)?.if_speed ?? 0
|
||
|
}Mbps`;
|
||
|
span.appendChild(name);
|
||
|
span.appendChild(asn);
|
||
|
memberElement.appendChild(span);
|
||
|
|
||
|
memberElement.appendChild(document.createElement("br"));
|
||
|
|
||
|
const vSwitch = connection?.vlan_list?.find((k) => k.vlan_id == 1);
|
||
|
if (vSwitch?.ipv4) {
|
||
|
const ipv4 = document.createElement("ipv4");
|
||
|
ipv4.innerHTML = `- <code>${vSwitch.ipv4.address}</code>`;
|
||
|
memberElement.appendChild(ipv4);
|
||
|
}
|
||
|
if (vSwitch?.ipv6) {
|
||
|
const ipv6 = document.createElement("ipv6");
|
||
|
ipv6.innerHTML = `- <code>${vSwitch.ipv6.address}</code>`;
|
||
|
memberElement.appendChild(ipv6);
|
||
|
}
|
||
|
|
||
|
memberElement.appendChild(document.createElement("br"));
|
||
|
|
||
|
const asSets = vSwitch?.ipv4?.as_macro ?? vSwitch?.ipv6?.as_macro;
|
||
|
if (asSets) {
|
||
|
const ASSets = document.createElement("div");
|
||
|
ASSets.innerHTML = `AS-SETS: <code>${asSets}</code>`;
|
||
|
memberElement.appendChild(ASSets);
|
||
|
}
|
||
|
|
||
|
const type = document.createElement("div");
|
||
|
type.innerHTML = `Peering Policy: ${member.peering_policy ?? "unknown"}`;
|
||
|
memberElement.appendChild(type);
|
||
|
|
||
|
groups.appendChild(memberElement);
|
||
|
});
|
||
|
seaMembers.appendChild(groups);
|
||
|
document.querySelector("body")?.appendChild(seaMembers);
|
||
|
}
|
||
|
);
|
||
|
|
||
|
document.getElementById("sea-member")!.addEventListener("click", () => {
|
||
|
if (document.getElementById("app-sea-members")) {
|
||
|
document.getElementById("app-main")!.style.display = "none";
|
||
|
document.getElementById("app-sea-members")!.style.display = "block";
|
||
|
}
|
||
|
});
|
||
|
});
|