diff options
Diffstat (limited to 'static/interface-renderer.js')
| -rw-r--r-- | static/interface-renderer.js | 333 |
1 files changed, 192 insertions, 141 deletions
diff --git a/static/interface-renderer.js b/static/interface-renderer.js index 8c01696..5145cf3 100644 --- a/static/interface-renderer.js +++ b/static/interface-renderer.js @@ -1,162 +1,213 @@ /* jshint esversion: 2024, module: true */ -import { Utils } from './utils.js'; -import { InterfaceState } from './enums.js'; +import { Utils } from "./utils.js"; /** * Static Interface Renderer for displaying network interfaces * @class InterfaceRenderer */ class InterfaceRenderer { - /** - * Render interface tabs - * @static - * @param {Array} interfaces - Array of interface objects - * @param {Object} currentInterface - Current interface object - * @returns {string} HTML string - */ - static renderInterfaceTabs(interfaces, currentInterface) { - if (!interfaces.length) { - return '<div class="no-interfaces">No network interfaces found</div>'; - } - - const tabsHTML = interfaces.map(iface => { - const state = Utils.getInterfaceState(iface); - const stateClass = Utils.getStateClass(state); - const stateText = Utils.getStateText(iface); - const isActive = iface === currentInterface; - - return ` - <button class="interface-tab ${isActive ? 'active' : ''}" + /** + * Render interface tabs + * @static + * @param {Array} interfaces - Array of interface objects + * @param {Object} currentInterface - Current interface object + * @returns {string} HTML string + */ + static renderInterfaceTabs(interfaces, currentInterface) { + if (!interfaces.length) { + return '<div class="no-interfaces">No network interfaces found</div>'; + } + + const tabsHTML = interfaces + .map((iface) => { + const state = Utils.getInterfaceState(iface); + const stateClass = Utils.getStateClass(state); + const stateText = Utils.getStateText(iface); + const isActive = iface === currentInterface; + + return ` + <button class="interface-tab ${isActive ? "active" : ""}" data-interface="${Utils.sanitizeHTML(iface.Name)}"> ${Utils.sanitizeHTML(iface.Name)} <span class="interface-state ${stateClass}">${Utils.sanitizeHTML(stateText)}</span> </button> `; - }).join(''); - - return `<div class="interface-tabs-container">${tabsHTML}</div>`; - } - - /** - * Show detailed interface information - * @static - * @param {Object} iface - Interface object - * @returns {string} HTML string - */ - static showInterfaceDetails(iface) { - const details = [ - InterfaceRenderer.renderDetailRow('Link File', iface.LinkFile), - InterfaceRenderer.renderDetailRow('Network File', iface.NetworkFile), - InterfaceRenderer.renderDetailRow('State', iface.State, Utils.getStateClass(Utils.getInterfaceState(iface))), - InterfaceRenderer.renderDetailRow('Online State', iface.OnlineState), - InterfaceRenderer.renderDetailRow('Type', iface.Type), - InterfaceRenderer.renderDetailRow('Path', iface.Path), - InterfaceRenderer.renderDetailRow('Driver', iface.Driver), - InterfaceRenderer.renderDetailRow('Vendor', iface.Vendor), - InterfaceRenderer.renderDetailRow('Model', iface.Model), - InterfaceRenderer.renderDetailRow('Hardware Address', Utils.arrayToMac(iface.HardwareAddress)), - InterfaceRenderer.renderDetailRow('MTU', iface.MTU ? `${iface.MTU} (min: ${iface.MTUMin ?? '?'}, max: ${iface.MTUMax ?? '?'})` : ''), - InterfaceRenderer.renderDetailRow('QDisc', iface.QDisc), - InterfaceRenderer.renderDetailRow('IPv6 Address Generation Mode', iface.IPv6AddressGenerationMode), - InterfaceRenderer.renderDetailRow('Number of Queues (Tx/Rx)', iface.Queues ? `${iface.Queues.Tx ?? '?'}/${iface.Queues.Rx ?? '?'}` : ''), - InterfaceRenderer.renderDetailRow('Auto negotiation', iface.AutoNegotiation ? 'yes' : 'no'), - InterfaceRenderer.renderDetailRow('Speed', iface.Speed), - InterfaceRenderer.renderDetailRow('Duplex', iface.Duplex), - InterfaceRenderer.renderDetailRow('Port', iface.Port), - InterfaceRenderer.renderDetailRow('Address', InterfaceRenderer.renderAddressList(iface.Addresses)), - InterfaceRenderer.renderDetailRow('DNS', InterfaceRenderer.renderDNSServerList(iface.DNS)), - InterfaceRenderer.renderDetailRow('NTP', iface.NTP), - InterfaceRenderer.renderDetailRow('Activation Policy', iface.ActivationPolicy), - InterfaceRenderer.renderDetailRow('Required For Online', iface.RequiredForOnline ? 'yes' : 'no'), - InterfaceRenderer.renderDetailRow('Connected To', iface.ConnectedTo), - InterfaceRenderer.renderDetailRow('Offered DHCP leases', InterfaceRenderer.renderDHCPLeases(iface.DHCPLeases)) - ].filter(Boolean).join(''); - - return `<div class="interface-detail-grid">${details}</div>`; - } - - /** - * Render a detail row with abbreviations - * @static - * @param {string} label - Row label - * @param {string} value - Row value - * @param {string} [valueClass] - CSS class for value - * @returns {string} HTML string - */ - static renderDetailRow(label, value, valueClass = '') { - if (!value) return ''; - - const abbreviations = { - 'MTU': 'Maximum Transmission Unit', - 'QDisc': 'Queueing Discipline', - 'Tx': 'Transmit', - 'Rx': 'Receive', - 'DNS': 'Domain Name System', - 'NTP': 'Network Time Protocol', - 'DHCP': 'Dynamic Host Configuration Protocol', - 'MAC': 'Media Access Control', - 'IP': 'Internet Protocol', - 'IPv6': 'Internet Protocol version 6' - }; - - const abbrLabel = Object.keys(abbreviations).includes(label) - ? `<abbr title="${abbreviations[label]}">${label}</abbr>` - : label; - - return ` + }) + .join(""); + + return `<div class="interface-tabs-container">${tabsHTML}</div>`; + } + + /** + * Show detailed interface information + * @static + * @param {Object} iface - Interface object + * @returns {string} HTML string + */ + static showInterfaceDetails(iface) { + const details = [ + InterfaceRenderer.renderDetailRow("Link File", iface.LinkFile), + InterfaceRenderer.renderDetailRow("Network File", iface.NetworkFile), + InterfaceRenderer.renderDetailRow( + "State", + iface.State, + Utils.getStateClass(Utils.getInterfaceState(iface)), + ), + InterfaceRenderer.renderDetailRow("Online State", iface.OnlineState), + InterfaceRenderer.renderDetailRow("Type", iface.Type), + InterfaceRenderer.renderDetailRow("Path", iface.Path), + InterfaceRenderer.renderDetailRow("Driver", iface.Driver), + InterfaceRenderer.renderDetailRow("Vendor", iface.Vendor), + InterfaceRenderer.renderDetailRow("Model", iface.Model), + InterfaceRenderer.renderDetailRow( + "Hardware Address", + Utils.arrayToMac(iface.HardwareAddress), + ), + InterfaceRenderer.renderDetailRow( + "MTU", + iface.MTU + ? `${iface.MTU} (min: ${iface.MTUMin ?? "?"}, max: ${iface.MTUMax ?? "?"})` + : "", + ), + InterfaceRenderer.renderDetailRow("QDisc", iface.QDisc), + InterfaceRenderer.renderDetailRow( + "IPv6 Address Generation Mode", + iface.IPv6AddressGenerationMode, + ), + InterfaceRenderer.renderDetailRow( + "Number of Queues (Tx/Rx)", + iface.Queues + ? `${iface.Queues.Tx ?? "?"}/${iface.Queues.Rx ?? "?"}` + : "", + ), + InterfaceRenderer.renderDetailRow( + "Auto negotiation", + iface.AutoNegotiation ? "yes" : "no", + ), + InterfaceRenderer.renderDetailRow("Speed", iface.Speed), + InterfaceRenderer.renderDetailRow("Duplex", iface.Duplex), + InterfaceRenderer.renderDetailRow("Port", iface.Port), + InterfaceRenderer.renderDetailRow( + "Address", + InterfaceRenderer.renderAddressList(iface.Addresses), + ), + InterfaceRenderer.renderDetailRow( + "DNS", + InterfaceRenderer.renderDNSServerList(iface.DNS), + ), + InterfaceRenderer.renderDetailRow("NTP", iface.NTP), + InterfaceRenderer.renderDetailRow( + "Activation Policy", + iface.ActivationPolicy, + ), + InterfaceRenderer.renderDetailRow( + "Required For Online", + iface.RequiredForOnline ? "yes" : "no", + ), + InterfaceRenderer.renderDetailRow("Connected To", iface.ConnectedTo), + InterfaceRenderer.renderDetailRow( + "Offered DHCP leases", + InterfaceRenderer.renderDHCPLeases(iface.DHCPLeases), + ), + ] + .filter(Boolean) + .join(""); + + return `<div class="interface-detail-grid">${details}</div>`; + } + + /** + * Render a detail row with abbreviations + * @static + * @param {string} label - Row label + * @param {string} value - Row value + * @param {string} [valueClass] - CSS class for value + * @returns {string} HTML string + */ + static renderDetailRow(label, value, valueClass = "") { + if (!value) return ""; + + const abbreviations = { + MTU: "Maximum Transmission Unit", + QDisc: "Queueing Discipline", + Tx: "Transmit", + Rx: "Receive", + DNS: "Domain Name System", + NTP: "Network Time Protocol", + DHCP: "Dynamic Host Configuration Protocol", + MAC: "Media Access Control", + IP: "Internet Protocol", + IPv6: "Internet Protocol version 6", + }; + + const abbrLabel = Object.keys(abbreviations).includes(label) + ? `<abbr title="${abbreviations[label]}">${label}</abbr>` + : label; + + return ` <div class="detail-row"> <span class="detail-label">${abbrLabel}:</span> <span class="detail-value ${valueClass}">${Utils.sanitizeHTML(value)}</span> </div> `; - } - - /** - * Render address list - * @static - * @param {Array} addresses - Array of addresses - * @returns {string} Formatted addresses - */ - static renderAddressList(addresses) { - if (!addresses?.length) return ''; - - return addresses.map(addr => { - const ip = Utils.ipFromArray(addr); - return ip ? `<div class="address-item">${Utils.sanitizeHTML(ip)}</div>` : ''; - }).join(''); - } - - /** - * Render DNS server list - * @static - * @param {Array} dnsServers - Array of DNS servers - * @returns {string} Formatted DNS servers - */ - static renderDNSServerList(dnsServers) { - if (!dnsServers?.length) return ''; - - return dnsServers.map(dns => { - const server = Utils.ipFromArray(dns.Address ?? dns); - return server ? `<div class="dns-item">${Utils.sanitizeHTML(server)}</div>` : ''; - }).join(''); - } - - /** - * Render DHCP leases - * @static - * @param {Array} leases - Array of DHCP leases - * @returns {string} Formatted leases - */ - static renderDHCPLeases(leases) { - if (!leases?.length) return ''; - - return leases.map(lease => { - const ip = lease.IP ?? lease; - const to = lease.To ?? lease.MAC ?? ''; - return `<div class="lease-item">${Utils.sanitizeHTML(ip)} (to ${Utils.sanitizeHTML(to)})</div>`; - }).join(''); - } + } + + /** + * Render address list + * @static + * @param {Array} addresses - Array of addresses + * @returns {string} Formatted addresses + */ + static renderAddressList(addresses) { + if (!addresses?.length) return ""; + + return addresses + .map((addr) => { + const ip = Utils.ipFromArray(addr); + return ip + ? `<div class="address-item">${Utils.sanitizeHTML(ip)}</div>` + : ""; + }) + .join(""); + } + + /** + * Render DNS server list + * @static + * @param {Array} dnsServers - Array of DNS servers + * @returns {string} Formatted DNS servers + */ + static renderDNSServerList(dnsServers) { + if (!dnsServers?.length) return ""; + + return dnsServers + .map((dns) => { + const server = Utils.ipFromArray(dns.Address ?? dns); + return server + ? `<div class="dns-item">${Utils.sanitizeHTML(server)}</div>` + : ""; + }) + .join(""); + } + + /** + * Render DHCP leases + * @static + * @param {Array} leases - Array of DHCP leases + * @returns {string} Formatted leases + */ + static renderDHCPLeases(leases) { + if (!leases?.length) return ""; + + return leases + .map((lease) => { + const ip = lease.IP ?? lease; + const to = lease.To ?? lease.MAC ?? ""; + return `<div class="lease-item">${Utils.sanitizeHTML(ip)} (to ${Utils.sanitizeHTML(to)})</div>`; + }) + .join(""); + } } export { InterfaceRenderer }; |