// Copyright (c) 2021 Daniil Baturin and others // // Permission is hereby granted, free of charge, to any person obtaining a copy // of this software and associated documentation files (the "Software"), to deal // in the Software without restriction, including without limitation the rights // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell // copies of the Software, and to permit persons to whom the Software is // furnished to do so, subject to the following conditions: // // The above copyright notice and this permission notice shall be included in // all copies or substantial portions of the Software. // // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. // Base protocols that get auto-generated buttons var baseProtocols = { "Ethernet": 14, "PPPoE": 8, "IPv4": 20, "IPv6": 40, "UDP": 8, "TCP": 20, "MPLS": 4, "L2TPv3": 8, "GRE": 4, "LISP": 16, "VXLAN": 16, "NVGRE": 8, "STT": 38, "GENEVE": 8, "WireGuard": 40, }; // These are additional options var virtualProtocols = { "GRE-key": 4, "GRE-sequence-number": 4, "Ethernet-VLAN": 4, "Ethernet-QinQ": 4, "Ethernet-MACSec": 32 }; // "Composite" protocol shortcuts var protocolShortcuts = { "EoIP": ["IPv4", "GRE", "Ethernet"], "IPIP": ["IPv4", "IPv4"], "SIT (6in4)": ["IPv4", "IPv6"], "IP6IP6": ["IPv6", "IPv6"] }; // Forms with options for specific protocols protocolOptions = { "GRE": "

Key (4 bytes)

" + "

Sequence numbers (4 bytes)

", "Ethernet": "

802.1q VLAN (4 bytes)

" + "

802.1ad QinQ (4 bytes)

" + "

MACSec (32 bytes)

" }; function makeSharingLink() { var protocolItems = document.querySelectorAll("*[class^='protocol-item-']"); var protocols = []; if(protocolItems) { protocolItems.forEach(function (p) { if(protocolEnabled(p)) { protocols.push(p.classList[0].replace("protocol-item-", "")) } }); } if(protocols.length > 0) { var protoString = protocols.join(","); return `${window.location.origin}${window.location.pathname}?protocols=${protoString}`; } else { return null; } } function updateSharingLink() { var link = makeSharingLink(); var linkBox = document.querySelector("#share"); var linkElem = document.querySelector("#sharing-link"); if(link) { linkElem.value = link; linkBox.hidden = false; } else { linkBox.hidden = true; } } function copySharingLink() { var copyText = document.querySelector("#sharing-link"); copyText.select(); document.execCommand("copy"); } function protocolEnabled(p) { if(p.tagName.toLowerCase() == "input") { // Protocol option checkbox return p.checked; } else { // Normal protocol block, not an option return true; } } function calculateOverhead() { var mtu = document.querySelector("#parent-mtu").value; var protocols = document.querySelectorAll("*[class^='protocol-item-']"); var overhead = 0; for(var i = 0; i < protocols.length; i++) { var p = protocols[i]; if(!protocolEnabled(p)) { continue; } protocolName = protocols[i].className.replace(/^protocol-item-/, ''); overhead += window.protocolData[protocolName]; } var mode = document.ifaceoptions.mode.value; if(mode == "sub") { pdu = Number(mtu) - Number(overhead); } else { pdu = Number(mtu) + Number(overhead); } document.querySelector("#overhead").innerHTML = overhead + " bytes"; document.querySelector("#tunnel-mtu").innerHTML = pdu + " bytes"; updateSharingLink(); } // Since all UI changes require re-calculating the values, // we wrap all events in a handler that forces re-calculation. function handleEvent(e, f) { f(e); calculateOverhead(); } function generateProtocolButtons() { var protocolList = document.querySelector("#protocol-list"); // Add base protocols for(protocolName in baseProtocols) { var button = document.createElement("input"); button.setAttribute('type', 'button'); button.setAttribute('value', protocolName); button.setAttribute('class', 'protocol-button'); button.addEventListener("click", function (e) { handleEvent(e, function () {addProtocol(e.target.value)})}); protocolList.appendChild(button); } // Add shortcuts for complex protocols for(ps in protocolShortcuts) { var button = document.createElement("input"); button.setAttribute('type', 'button'); button.setAttribute('value', ps); button.setAttribute('class', 'protocol-button'); button.addEventListener("click", function (e) { handleEvent(e, function () {addProtocols(e.target.value)})}); protocolList.appendChild(button); } } function addProtocol(name) { protocols = document.querySelector('#protocols'); protocolWrapper = document.createElement('div'); protocolWrapper.setAttribute('class', 'protocol-block-wrapper'); protocolWrapper.setAttribute('id', window.serial); protocol = document.createElement('div'); protocol.setAttribute('class', 'protocol-block'); protocolWrapper.appendChild(protocol); content = "

" + name + " (" + window.protocolData[name] + " bytes)

"; content += "

"; protocol.innerHTML = "

" + content + "

"; if(protocolOptions[name]) { optionsForm = document.createElement("div"); optionsForm.innerHTML = protocolOptions[name]; protocol.appendChild(optionsForm); } var serial = window.serial; // Force lexical scoping protocol.querySelector("div.remove-button input").addEventListener("click", function (e) { handleEvent(e, function () {removeElement(serial)})}); protocols.appendChild(protocolWrapper); window.serial += 1; return protocolWrapper; } function addProtocols(name) { var protos = window.protocolShortcuts[name]; protos.forEach(addProtocol); } function removeElement(id) { element = document.getElementById(id); element.parentNode.removeChild(element); } function setModeFrameSize() { document.querySelector("#mtu-desc").innerHTML = "Payload size: "; document.querySelector("#result-desc").innerHTML = "Frame size: " } function setModePDU() { document.querySelector("#mtu-desc").innerHTML = "Parent interface MTU: "; document.querySelector("#result-desc").innerHTML = "Maximum PDU size: "; } function mergeObjects(l, r) { for (var key in r){ if(r.hasOwnProperty(key)) { l[key] = r[key]; } } return l; } if('serviceWorker' in navigator) { navigator.serviceWorker .register('sw.js') .then(function() { console.log('Service Worker Registered'); }); } // UI setup document.addEventListener("DOMContentLoaded", function () { // The "share" button document.querySelector("#copy-sharing-link").addEventListener("click", copySharingLink); // Dirty hack to ensure protocol block id uniqueness // Incremented every time when user adds a protocol // Other solutions would be dependent on the protocol block layout window.serial = 0; generateProtocolButtons(); document.querySelector("#parent-mtu").addEventListener("input", calculateOverhead); document.querySelector("#mode-pdu").addEventListener("change", function (e) {handleEvent(e, setModePDU)}); document.querySelector("#mode-frame-size").addEventListener("change", function (e) {handleEvent(e, setModeFrameSize)}); window.protocolData = mergeObjects(baseProtocols, virtualProtocols); window.protocolShortcuts = protocolShortcuts; // Support for "sharing" links var query = new URLSearchParams(window.location.search); if(query.has("protocols")) { var protos = query.get("protocols").split(","); // Dirty hack to enable setting protocol options var currentItem = null; if(protos) { protos.forEach(function (p) { var itemOption = null; if(currentItem) { // Some protocols like Ethernet and GRE have options (keys, VLAN...) // They are implemented as inputs inside the protocol block var opt = currentItem.querySelector(`*[class^='protocol-item-${p}']`); if(opt) { itemOption = opt; } } // The current protocol is an option of the previous one, like GRE-key of GRE // There's no support for non-checkbox options yet, so we just "check" it if(itemOption) { itemOption.checked = 1; } else { currentItem = addProtocol(p); } }); } } calculateOverhead(); });