Update

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