Merge pull request #82 from K97i/v2-nic

Add NIC modal

Author: zleyyij

new/apps/web/src/lib/components/Widgets.svelte

@@ -27,10 +27,10 @@
 	/>
 	<Ram ram={report.Hardware.Ram} pagefile={report.System.PageFile}/>
 	<Gpu gpus={report.Hardware.Gpu} monitors={report.Hardware.Monitors} />
-
+	<Nic nic={report.Network.Adapters} />
 	<!--
 	<OS securityData={rawJSON.Security} basicinfoData={rawJSON.BasicInfo} />
-	<NIC nicData={rawJSON.Network.Adapters} /> -->
+-->
 </div>
 
 <div class="widgets">

new/apps/web/src/lib/components/widgets/Nic.svelte

@@ -2,41 +2,81 @@
 <script lang="ts">
 	import Widget from '../../common/ModalWidget.svelte';
 
-	export let nicData: any;
+	interface NicInfo {
+        DefaultIPGateway: Array<string>;
+        Description: string;
+        DHCPEnabled: boolean;
+        DHCPLeaseExpires: string;
+        DHCPLeaseObtained: string;
+        DHCPServer: string;
+        DNSDomain: null,
+        DNSDomainSuffixSearchOrder: Array<string>;
+        DNSHostName: string;
+        DNSServerSearchOrder: Array<string>;
+        InterfaceIndex: number;
+        IPAddress: Array<string>;
+        IPEnabled: boolean;
+        IPSubnet: Array<string>;
+        MACAddress: string;
+        LinkSpeed: number;
+        PhysicalAdapter: boolean;
+        FullDuplex: boolean;
+        MediaConnectState: number;
+        MediaDuplexState: number;
+        MtuSize: number;
+        Name: string;
+        OperationalStatusDownMediaDisconnected: boolean;
+        PermanentAddress: string;
+        PromiscuousMode: boolean;
+        State: number;
+        DNSIPV6: string;
+        DNSIsStatic: boolean;
+	}
+
+	interface Props {
+		nics: Array<NicInfo>;
+	}
+
+	let {
+		nics
+	}: Props = $props();
+
+	function findPrimaryAdapter(nics: Array<NicInfo>): string {
+		let physicalAdapters: Array<string> = [];
 
-	function findNic() {
-		let nicText = '';
-		nicData.forEach((adapter: any, _: any) => {
+		nics.forEach((adapter: NicInfo, _: any) => {
+			// if adapter is *physical*, AND has a determined IP address
 			if (adapter.PhysicalAdapter && adapter.IPAddress) {
-				if (Object.values(adapter.IPAddress).length > 0) nicText = adapter.Description;
+				if (adapter.IPAddress.length > 0) {
+					return adapter.Description;
+				};
 			}
-		});
 
-		nicData.forEach((_: string, adapter: Record<string, any>) => {
-			if (adapter.PhysicalAdapter) nicText = adapter.Description;
+			// identify and push physical adapters here, so we dont have to .forEach() the list later
+			if (adapter.PhysicalAdapter) physicalAdapters.push(adapter.Description);
 		});
 
-		if (nicText == '') {
-			return 'Disconnected';
-		} else {
-			return nicText;
+		// if there are none with an assigned IP address, but there are physical adapters,
+		// return the first in the array
+		if (physicalAdapters.length > 0){
+			return physicalAdapters[0];
 		}
+
+		return 'Disconnected';
 	}
 </script>
 
-<!-- NIC -->
+<!-- NICs -->
 
-<Widget title="NIC" modalId="nic-modal">
-	<div slot="values">
+<Widget title="NIC">
+	{#snippet widgetContents()}
 		<div class="widget-value">
-			<div class="green">
-				{findNic()}
-			</div>
+			<span>{findPrimaryAdapter(nics)}</span>
 		</div>
-	</div>
+	{/snippet}
 
-	<div slot="modal-body">
-		{#each nicData as adapter}
+	{#snippet modalContents()}
+		{#each nics as adapter}
 			<table class="table nic">
 				<tbody>
 					<tr>
@@ -121,7 +161,7 @@
 					</tr>
 					<tr>
 						<td>Physical Adapter?</td>
-						<td>{adapter.PhysicalAdapter ?? 'unknown'}</td>
+						<td>{adapter.PhysicalAdapter ?? 'Unknown'}</td>
 					</tr>
 					{#if adapter.LinkSpeed}
 						<tr>
@@ -145,12 +185,6 @@
 							<td>{adapter.DNSIsStatic}</td>
 						</tr>
 					{/if}
-					{#if adapter.DNSIsStatic}
-						<tr>
-							<td>Is DNS Static?</td>
-							<td>{adapter.DNSIsStatic}</td>
-						</tr>
-					{/if}
 					{#if adapter.PhysicalAdapter}
 						<tr>
 							<td>Full Duplex?</td>
@@ -192,5 +226,16 @@
 				</tbody>
 			</table>
 		{/each}
-	</div>
+	{/snippet}
 </Widget>
+
+<style>
+	span {
+		color: var(--color-secondary-50);
+	}
+
+	div {
+		color: var(--color-surface-300);
+		font-size: 13pt;
+	}
+</style>