switchos support

frontend/src/app/features/routers/router-detail-page.component.ts

@@ -14,11 +14,37 @@ import { PageHeaderComponent } from '../../shared/ui/page-header.component';
 import { SectionCardComponent } from '../../shared/ui/section-card.component';
 import { StatCardComponent } from '../../shared/ui/stat-card.component';
 
+type DeviceType = 'routeros' | 'switchos';
+
+interface DeviceItem {
+  id: number;
+  name: string;
+  host: string;
+  port: number;
+  device_type: DeviceType;
+  effective_username?: string | null;
+  supports_export: boolean;
+  supports_restore_upload: boolean;
+  last_connection_status?: boolean | null;
+  last_connection_tested_at?: string | null;
+  last_connection_error?: string | null;
+  last_connection_hostname?: string | null;
+  last_connection_model?: string | null;
+  last_connection_version?: string | null;
+  last_connection_uptime?: string | null;
+  last_connection_transport?: string | null;
+  last_connection_server?: string | null;
+  last_connection_auth_mode?: string | null;
+  last_connection_http_status?: string | null;
+  last_connection_backup_available?: boolean | null;
+}
+
 interface BackupItem {
   id: number;
   file_name: string;
   backup_type: 'export' | 'binary';
   created_at: string;
+  device_type: DeviceType;
 }
 
 interface ConnectionSnapshot {
@@ -29,6 +55,11 @@ interface ConnectionSnapshot {
   version?: string | null;
   uptime: string;
   error?: string | null;
+  transport?: string | null;
+  server?: string | null;
+  auth_mode?: string | null;
+  http_status?: string | null;
+  backup_available?: boolean | null;
 }
 
 interface BackupDiffStats {
@@ -59,7 +90,7 @@ export class RouterDetailPageComponent implements OnInit {
   private readonly ui = inject(UiService);
 
   routerId!: number;
-  routerItem: any;
+  routerItem: DeviceItem | null = null;
   backups: BackupItem[] = [];
   connection: ConnectionSnapshot | null = null;
   exportContent = '';
@@ -73,6 +104,10 @@ export class RouterDetailPageComponent implements OnInit {
   testing = false;
   deletingRouter = false;
 
+  get isSwitchos(): boolean {
+    return this.routerItem?.device_type === 'switchos';
+  }
+
   get exportBackups(): BackupItem[] {
     return this.backups.filter((item) => item.backup_type === 'export');
   }
@@ -96,13 +131,25 @@ export class RouterDetailPageComponent implements OnInit {
     return !!this.diffText;
   }
 
+  get subtitle(): string {
+    if (!this.routerItem) {
+      return this.ui.instant('routers.detailSubtitle');
+    }
+    const suffix = this.routerItem.effective_username ? ` · ${this.routerItem.effective_username}` : '';
+    return `${this.routerItem.host}:${this.routerItem.port}${suffix}`;
+  }
+
+  get deviceTypeLabel(): string {
+    return this.ui.instant(this.isSwitchos ? 'routers.switchos' : 'routers.routeros');
+  }
+
   ngOnInit() {
     this.routerId = Number(this.route.snapshot.paramMap.get('id'));
     this.load();
   }
 
   load() {
-    this.api.http.get(`${this.api.baseUrl}/routers/${this.routerId}`).subscribe((routerItem: any) => {
+    this.api.http.get<DeviceItem>(`${this.api.baseUrl}/routers/${this.routerId}`).subscribe((routerItem) => {
       this.routerItem = routerItem;
       this.connection = this.mapStoredConnection(routerItem);
     });
@@ -110,7 +157,7 @@ export class RouterDetailPageComponent implements OnInit {
   }
 
   runExport() {
-    if (this.exporting) {
+    if (this.exporting || this.isSwitchos) {
       return;
     }
     this.exporting = true;
@@ -187,6 +234,9 @@ export class RouterDetailPageComponent implements OnInit {
   }
 
   upload(id: number) {
+    if (this.isSwitchos) {
+      return;
+    }
     this.api.http.post(`${this.api.baseUrl}/backups/router/${this.routerId}/upload/${id}`, {}).subscribe(() => {
       this.ui.success('toast.binaryUploaded');
     });
@@ -217,7 +267,7 @@ export class RouterDetailPageComponent implements OnInit {
 
   viewExport(id: number) {
     const backup = this.exportBackups.find((item) => item.id === id);
-    this.api.http.get<any>(`${this.api.baseUrl}/backups/${id}/view`).subscribe((r) => {
+    this.api.http.get<{ content: string }>(`${this.api.baseUrl}/backups/${id}/view`).subscribe((r) => {
       this.exportContent = r.content;
       this.previewTitle = backup?.file_name || this.ui.instant('routers.previewTitle');
       this.ui.clear();
@@ -241,7 +291,7 @@ export class RouterDetailPageComponent implements OnInit {
     this.diffVisible = true;
   }
 
-  private mapStoredConnection(routerItem: any): ConnectionSnapshot | null {
+  private mapStoredConnection(routerItem: DeviceItem): ConnectionSnapshot | null {
     if (!routerItem?.last_connection_tested_at) {
       return null;
     }
@@ -252,7 +302,12 @@ export class RouterDetailPageComponent implements OnInit {
       model: routerItem.last_connection_model || 'Unknown',
       version: routerItem.last_connection_version,
       uptime: routerItem.last_connection_uptime || 'Unknown',
-      error: routerItem.last_connection_error || null
+      error: routerItem.last_connection_error || null,
+      transport: routerItem.last_connection_transport || null,
+      server: routerItem.last_connection_server || null,
+      auth_mode: routerItem.last_connection_auth_mode || null,
+      http_status: routerItem.last_connection_http_status || null,
+      backup_available: routerItem.last_connection_backup_available ?? null
     };
   }
 
@@ -269,6 +324,11 @@ export class RouterDetailPageComponent implements OnInit {
       last_connection_version: result.version,
       last_connection_uptime: result.uptime,
       last_connection_error: result.error,
+      last_connection_transport: result.transport,
+      last_connection_server: result.server,
+      last_connection_auth_mode: result.auth_mode,
+      last_connection_http_status: result.http_status,
+      last_connection_backup_available: result.backup_available
     };
   }