Initial display of OpenWrt Ethernet interfaces

web-frontend/src/app/backend-communication.service.ts

@@ -109,4 +109,24 @@ export class BackendCommunicationService {
       })
     );
   }
+
+  getOpenWrtIpAddresses(): Observable<any> {
+    return this.http.get<any>(this.urlPrefix + '/api/get_openwrt_ip_addresses').pipe(
+      tap(response => console.log('Fetched OpenWrt IP addresses: ', response)),
+      map(response => {
+        let tmpEthernetInterfaces= '';
+        if (response['combined_output'] !== '\n') {
+          try {
+            response['combined_output'] = JSON.parse(response['combined_output']);
+            tmpEthernetInterfaces = response['combined_output'];
+          } catch (error) {
+            //console.error('Error parsing combined_output:', error);
+          }
+        }
+        return {
+          ethernetInterfaces: tmpEthernetInterfaces,
+        };
+      })
+    );
+  }
 }

web-frontend/src/app/dashboard/dashboard.component.html

@@ -9,7 +9,7 @@
           @if (openwrtVersion) {
             <mat-list role="list">
               <mat-list-item role="listitem">
-                <mat-icon matListItemIcon>computer</mat-icon>
+                <mat-icon matListItemIcon>router</mat-icon>
                 {{ openwrtVersion }}
               </mat-list-item>
               <mat-list-item role="listitem">
@@ -27,7 +27,7 @@
     <mat-grid-tile [colspan]="1" [rowspan]="1">
       <mat-card class="dashboard-card">
         <mat-card-header>
-          <mat-card-title>Attached hardware</mat-card-title>
+          <mat-card-title>Attached devices</mat-card-title>
         </mat-card-header>
         <mat-card-content class="dashboard-card-content">
           <mat-list role="list">
@@ -55,5 +55,28 @@
         </mat-card-content>
       </mat-card>
     </mat-grid-tile>
+
+
+    <mat-grid-tile [colspan]="2" [rowspan]="1">
+      <mat-card class="dashboard-card">
+        <mat-card-header>
+          <mat-card-title>Ethernet interfaces</mat-card-title>
+        </mat-card-header>
+        <mat-card-content class="dashboard-card-content">
+          <mat-list role="list">
+            @if (ethernetInterfaces) {
+              @for (ethernetInterface of ethernetInterfaces; track ethernetInterface) {
+                <mat-list-item role="listitem">
+                  <mat-icon matListItemIcon>settings_ethernet</mat-icon>
+                  {{ ethernetInterface.ifname }}: {{ ethernetInterface.address }}
+                </mat-list-item>
+              }
+            } @else {
+              <mat-spinner [diameter]="50"></mat-spinner>
+            }
+          </mat-list>
+        </mat-card-content>
+      </mat-card>
+    </mat-grid-tile>
   </mat-grid-list>
 </div>

web-frontend/src/app/dashboard/dashboard.component.ts

@@ -33,6 +33,8 @@ export class DashboardComponent {
   usb?: string[];
   pci?: string[];
 
+  ethernetInterfaces?: any;
+
   constructor(private service: BackendCommunicationService) {
     this.service.pollOpenWrtInfo().subscribe(response => {
       this.openwrtVersion = response.version;
@@ -45,5 +47,9 @@ export class DashboardComponent {
       this.usb = response.usb;
       this.pci = response.pci;
     });
+
+    this.service.getOpenWrtIpAddresses().subscribe(response => {
+      this.ethernetInterfaces = response.ethernetInterfaces;
+    });
   }
 }