feat: Enhance swarm component to support hostname addresses and improve device discovery

Author: camalolo

main/http_server/axe-os/src/app/components/swarm/swarm.component.html

@@ -2,10 +2,10 @@
 
     <form [formGroup]="form">
         <div class="field grid p-fluid mb-0">
-            <label htmlFor="ip" class="col-12 mb-2 md:col-4 md:mb-0">Manual Addition</label>
+            <label htmlFor="manualAddAddress" class="col-12 mb-2 md:col-4 md:mb-0">Manual Addition</label>
             <div class="col-12 md:col-8">
                 <p-inputGroup>
-                    <input pInputText id="manualAddIp" formControlName="manualAddIp" type="text" />
+                    <input pInputText id="manualAddAddress" formControlName="manualAddAddress" type="text" placeholder="192.168.1.100 or bitaxe.local" />
                     <button pButton  [disabled]="form.invalid" (click)="add()">Add</button>
                 </p-inputGroup>
 
@@ -64,8 +64,8 @@
         <tr>
             <th *ngFor="let field of [
                 {
-                    name: 'IP',
-                    label: 'IP'
+                    name: 'address',
+                    label: 'Address'
                 },
                 {
                     name: 'hostname',
@@ -121,11 +121,11 @@
             <tr>
                 <td>
                     <a
-                       [ngClass]="'text-'+axe.swarmColor+'-500'"
-                       [href]="'http://'+axe.IP"
-                       target="_blank"
-                       [pTooltip]="axe.deviceModel || 'Other'"
-                       tooltipPosition="top">{{axe.IP}}</a>
+                        [ngClass]="'text-'+axe.swarmColor+'-500'"
+                        [href]="'http://'+axe.address"
+                        target="_blank"
+                        [pTooltip]="axe.deviceModel || 'Other'"
+                        tooltipPosition="top">{{axe.address}}</a>
                 </td>
                 <td>{{axe.hostname}}</td>
                 <td>{{axe.hashRate * 1000000000 | hashSuffix}}</td>
@@ -188,6 +188,6 @@
 
 </div>
 
-<app-modal [headline]="selectedAxeOs?.IP">
-    <app-edit *ngIf="selectedAxeOs" [uri]="'http://' + selectedAxeOs.IP"></app-edit>
+<app-modal [headline]="selectedAxeOs?.address">
+    <app-edit *ngIf="selectedAxeOs" [uri]="'http://' + selectedAxeOs.address"></app-edit>
 </app-modal>

main/http_server/axe-os/src/app/components/swarm/swarm.component.ts

@@ -1,4 +1,4 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { ToastrService } from 'ngx-toastr';
@@ -10,7 +10,7 @@ const SWARM_DATA = 'SWARM_DATA';
 const SWARM_REFRESH_TIME = 'SWARM_REFRESH_TIME';
 const SWARM_SORTING = 'SWARM_SORTING';
 
-type SwarmDevice = { IP: string; ASICModel: string; deviceModel: string; swarmColor: string; asicCount: number; [key: string]: any };
+type SwarmDevice = { address: string; ASICModel: string; deviceModel: string; swarmColor: string; asicCount: number; [key: string]: any };
 
 @Component({
   selector: 'app-swarm',
@@ -50,7 +50,7 @@ export class SwarmComponent implements OnInit, OnDestroy {
   ) {
 
     this.form = this.fb.group({
-      manualAddIp: [null, [Validators.required, Validators.pattern('(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)')]]
+      manualAddAddress: [null, [Validators.required, Validators.pattern('^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)|[a-zA-Z0-9-]+\\.local$')]]
     });
 
     const storedRefreshTime = this.localStorageService.getNumber(SWARM_REFRESH_TIME) ?? 30;
@@ -65,7 +65,7 @@ export class SwarmComponent implements OnInit, OnDestroy {
     });
 
     const storedSorting = this.localStorageService.getObject(SWARM_SORTING) ?? {
-      sortField: 'IP',
+      sortField: 'address',
       sortDirection: 'asc'
     };
     this.sortField = storedSorting.sortField;
@@ -101,6 +101,11 @@ export class SwarmComponent implements OnInit, OnDestroy {
     return ip.split('.').reduce((acc, octet) => (acc << 8) + parseInt(octet, 10), 0) >>> 0;
   }
 
+  private isIpAddress(value: string): boolean {
+    const ipRegex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+    return ipRegex.test(value);
+  }
+
   private intToIp(int: number): string {
     return `${(int >>> 24) & 255}.${(int >>> 16) & 255}.${(int >>> 8) & 255}.${int & 255}`;
   }
@@ -116,15 +121,37 @@ export class SwarmComponent implements OnInit, OnDestroy {
   scanNetwork() {
     this.scanning = true;
 
-    const { start, end } = this.calculateIpRange(window.location.hostname, '255.255.255.0');
-    const ips = Array.from({ length: end - start + 1 }, (_, i) => this.intToIp(start + i));
+    if (this.isIpAddress(window.location.hostname)) {
+      // Direct IP access - scan the subnet
+      const { start, end } = this.calculateIpRange(window.location.hostname, '255.255.255.0');
+      const ips = Array.from({ length: end - start + 1 }, (_, i) => this.intToIp(start + i));
+      this.performNetworkScan(ips);
+    } else {
+      // mDNS hostname - fetch server IP first, then scan its subnet
+      this.httpClient.get(`http://${window.location.hostname}/api/system/info`)
+        .subscribe({
+          next: (response: any) => {
+            const serverIp = response.ip;
+            const { start, end } = this.calculateIpRange(serverIp, '255.255.255.0');
+            const ips = Array.from({ length: end - start + 1 }, (_, i) => this.intToIp(start + i));
+            this.performNetworkScan(ips);
+          },
+          error: () => {
+            // Fallback: skip scanning if we can't get the IP
+            this.scanning = false;
+          }
+        });
+    }
+  }
+
+  private performNetworkScan(ips: string[]) {
     this.getAllDeviceInfo(ips, () => of(null)).subscribe({
       next: (result) => {
         // Filter out null items first
         const validResults = result.filter((item): item is SwarmDevice => item !== null);
         // Merge new results with existing swarm entries
-        const existingIps = new Set(this.swarm.map(item => item.IP));
-        const newItems = validResults.filter(item => !existingIps.has(item.IP));
+        const existingAddresses = new Set(this.swarm.map(item => item.address));
+        const newItems = validResults.filter(item => !existingAddresses.has(item.address));
         this.swarm = [...this.swarm, ...newItems];
         this.sortSwarm();
         this.localStorageService.setObject(SWARM_DATA, this.swarm);
@@ -136,19 +163,31 @@ export class SwarmComponent implements OnInit, OnDestroy {
     });
   }
 
-  private getAllDeviceInfo(ips: string[], errorHandler: (error: any, ip: string) => Observable<SwarmDevice[] | null>, fetchAsic: boolean = true) {
-    return from(ips).pipe(
-      mergeMap(IP => forkJoin({
-        info: this.httpClient.get(`http://${IP}/api/system/info`),
-        asic: fetchAsic ? this.httpClient.get(`http://${IP}/api/system/asic`).pipe(catchError(() => of({}))) : of({})
+  private getAllDeviceInfo(addresses: string[], errorHandler: (error: any, address: string) => Observable<SwarmDevice[] | null>, fetchAsic: boolean = true) {
+    return from(addresses).pipe(
+      mergeMap(address => forkJoin({
+        info: this.httpClient.get(`http://${address}/api/system/info`).pipe(catchError(error => {
+          if (error.status === 401 || error.status === 0) {
+            // Show warning for potential older device or CORS blocked (likely 401)
+            this.toastr.warning(`Potential swarm peer detected at ${address} - upgrade its firmware to be able to add it.`);
+            return of({ _corsError: 401 });
+          }
+          throw error;
+        })),
+        asic: fetchAsic ? this.httpClient.get(`http://${address}/api/system/asic`).pipe(catchError(() => of({}))) : of({})
       }).pipe(
         map(({ info, asic }) => {
-          const existingDevice = this.swarm.find(device => device.IP === IP);
-          const result = { IP, ...(existingDevice ? existingDevice : {}), ...info, ...asic };
+          // Skip processing if we already showed the warning
+          if ((info as any)._corsError === 401) {
+            return null;
+          }
+
+          const existingDevice = this.swarm.find(device => device.address === address);
+          const result = { address, ...(existingDevice ? existingDevice : {}), ...info, ...asic };
           return this.fallbackDeviceModel(result);
         }),
         timeout(5000),
-        catchError(error => errorHandler(error, IP))
+        catchError(error => errorHandler(error, address))
       ),
         128
       ),
@@ -157,61 +196,70 @@ export class SwarmComponent implements OnInit, OnDestroy {
   }
 
   public add() {
-    const IP = this.form.value.manualAddIp;
+    const address = this.form.value.manualAddAddress;
 
-    // Check if IP already exists
-    if (this.swarm.some(item => item.IP === IP)) {
-      this.toastr.warning('This IP address already exists in the swarm.');
+    // Check if address already exists
+    if (this.swarm.some(item => item.address === address)) {
+      this.toastr.warning('This address already exists in the swarm.');
       return;
     }
 
     forkJoin({
-      info: this.httpClient.get<any>(`http://${IP}/api/system/info`),
-      asic: this.httpClient.get<any>(`http://${IP}/api/system/asic`).pipe(catchError(() => of({})))
+      info: this.httpClient.get<any>(`http://${address}/api/system/info`).pipe(catchError(error => {
+        if (error.status === 401 || error.status === 0) {
+          this.toastr.warning(`Potential swarm peer detected at ${address} - upgrade its firmware to be able to add it.`);
+          return of({ _corsError: 401 });
+        }
+        throw error;
+      })),
+      asic: this.httpClient.get<any>(`http://${address}/api/system/asic`).pipe(catchError(() => of({})))
     }).subscribe(({ info, asic }) => {
+      if ((info as any)._corsError === 401) {
+        return; // Already showed warning
+      }
       if (!info.ASICModel || !asic.ASICModel) {
         return;
       }
 
-      this.swarm.push({ IP, ...asic, ...info });
+      this.swarm.push({ address, ...asic, ...info });
       this.sortSwarm();
       this.localStorageService.setObject(SWARM_DATA, this.swarm);
       this.calculateTotals();
     });
   }
 
-  public edit(axe: any) {
-    this.selectedAxeOs = axe;
+  public edit(device: any) {
+    this.selectedAxeOs = device;
     this.modalComponent.isVisible = true;
   }
 
-  public restart(axe: any) {
-    this.httpClient.post(`http://${axe.IP}/api/system/restart`, {}).pipe(
+  public restart(device: any) {
+    this.httpClient.post(`http://${device.address}/api/system/restart`, {}).pipe(
       catchError(error => {
         if (error.status === 0 || error.status === 200 || error.name === 'HttpErrorResponse') {
           return of('success');
         } else {
-          this.toastr.error(`Failed to restart device at ${axe.IP}`);
+          this.toastr.error(`Failed to restart device at ${device.address}`);
           return of(null);
         }
       })
     ).subscribe(res => {
       if (res !== null && res == 'success') {
-        this.toastr.success(`Device at ${axe.IP} restarted`);
+        this.toastr.success(`Device at ${device.address} restarted`);
       }
     });
   }
 
-  public remove(axeOs: any) {
-    this.swarm = this.swarm.filter(axe => axe.IP !== axeOs.IP);
+  public remove(device: any) {
+    this.swarm = this.swarm.filter(axe => axe.address !== device.address);
     this.localStorageService.setObject(SWARM_DATA, this.swarm);
     this.calculateTotals();
   }
 
-  public refreshErrorHandler = (error: any, ip: string) => {
+  public refreshErrorHandler = (error: any, address: string) => {
     const errorMessage = error?.message || error?.statusText || error?.toString() || 'Unknown error';
-    this.toastr.error(`Failed to get info from ${ip}`);
-    const existingDevice = this.swarm.find(axeOs => axeOs.IP === ip);
+    this.toastr.error(`Failed to get info from ${address}`);
+    const existingDevice = this.swarm.find(axeOs => axeOs.address === address);
     return of({
       ...existingDevice,
       hashRate: 0,
@@ -232,10 +280,10 @@ export class SwarmComponent implements OnInit, OnDestroy {
     }
 
     this.refreshIntervalTime = this.refreshTimeSet;
-    const ips = this.swarm.map(axeOs => axeOs.IP);
+    const addresses = this.swarm.map(axeOs => axeOs.address);
     this.isRefreshing = true;
 
-    this.getAllDeviceInfo(ips, this.refreshErrorHandler, fetchAsic).subscribe({
+    this.getAllDeviceInfo(addresses, this.refreshErrorHandler, fetchAsic).subscribe({
       next: (result) => {
         this.swarm = result;
         this.sortSwarm();
@@ -272,15 +320,28 @@ export class SwarmComponent implements OnInit, OnDestroy {
       let comparison = 0;
       const fieldType = typeof a[this.sortField];
 
-      if (this.sortField === 'IP') {
-        // Split IP into octets and compare numerically
-        const aOctets = a[this.sortField].split('.').map(Number);
-        const bOctets = b[this.sortField].split('.').map(Number);
-        for (let i = 0; i < 4; i++) {
-          if (aOctets[i] !== bOctets[i]) {
-            comparison = aOctets[i] - bOctets[i];
-            break;
+      if (this.sortField === 'address') {
+        const aValue = a[this.sortField];
+        const bValue = b[this.sortField];
+        const aIsIp = this.isIpAddress(aValue);
+        const bIsIp = this.isIpAddress(bValue);
+
+        if (aIsIp && bIsIp) {
+          // Both are IPs, sort numerically
+          const aOctets = aValue.split('.').map(Number);
+          const bOctets = bValue.split('.').map(Number);
+          for (let i = 0; i < 4; i++) {
+            if (aOctets[i] !== bOctets[i]) {
+              comparison = aOctets[i] - bOctets[i];
+              break;
+            }
           }
+        } else if (!aIsIp && !bIsIp) {
+          // Both are hostnames, sort alphabetically
+          comparison = aValue.localeCompare(bValue);
+        } else {
+          // Mixed, sort IPs before hostnames
+          comparison = aIsIp ? -1 : 1;
         }
       } else if (fieldType === 'number') {
         comparison = a[this.sortField] - b[this.sortField];

main/http_server/http_server.c

@@ -748,6 +748,15 @@ static esp_err_t GET_system_info(httpd_req_t * req)
     int8_t wifi_rssi = -90;
     get_wifi_current_rssi(&wifi_rssi);
 
+    esp_netif_t *netif = esp_netif_get_handle_from_ifkey("WIFI_STA_DEF");
+    char ip_str[16] = "";
+    if (netif != NULL) {
+        esp_netif_ip_info_t ip_info;
+        if (esp_netif_get_ip_info(netif, &ip_info) == ESP_OK) {
+            inet_ntop(AF_INET, &ip_info.ip, ip_str, sizeof(ip_str));
+        }
+    }
+
     cJSON * root = cJSON_CreateObject();
     cJSON_AddNumberToObject(root, "power", GLOBAL_STATE->POWER_MANAGEMENT_MODULE.power);
     cJSON_AddNumberToObject(root, "voltage", GLOBAL_STATE->POWER_MANAGEMENT_MODULE.voltage);
@@ -776,6 +785,7 @@ static esp_err_t GET_system_info(httpd_req_t * req)
     cJSON_AddStringToObject(root, "hostname", hostname);
     cJSON_AddStringToObject(root, "wifiStatus", GLOBAL_STATE->SYSTEM_MODULE.wifi_status);
     cJSON_AddNumberToObject(root, "wifiRSSI", wifi_rssi);
+    cJSON_AddStringToObject(root, "ip", ip_str);
     cJSON_AddNumberToObject(root, "apEnabled", GLOBAL_STATE->SYSTEM_MODULE.ap_enabled);
     cJSON_AddNumberToObject(root, "sharesAccepted", GLOBAL_STATE->SYSTEM_MODULE.shares_accepted);
     cJSON_AddNumberToObject(root, "sharesRejected", GLOBAL_STATE->SYSTEM_MODULE.shares_rejected);