moeix-home/src/app.ts

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";
}
});
});