refactor: remove unneeded activate route from device pages

docker-compose.yml

@@ -1,5 +1,3 @@
-version: '3'
-
 services:
   openamtui:
     image: openamtui

src/app/app-routing.module.ts

@@ -18,14 +18,12 @@ import { WirelessDetailComponent } from './wireless/wireless-detail/wireless-det
 import { WirelessComponent } from './wireless/wireless.component'
 import { IEEE8021xComponent } from './ieee8021x/ieee8021x.component'
 import { IEEE8021xDetailComponent } from './ieee8021x/ieee8021x-detail/ieee8021x-detail.component'
-import { ExplorerComponent } from './explorer/explorer.component'
 import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
 
 const routes: Routes = [
   { path: 'devices', component: DevicesComponent },
   { path: 'devices/:id', component: DeviceDetailComponent },
   { path: 'devices/:id/:component', component: DeviceDetailComponent },
-  { path: 'devices/:id/explorer', component: ExplorerComponent },
   { path: 'profiles', component: ProfilesComponent },
   {
     path: 'profiles/new',

src/app/devices/audit-log/audit-log.component.ts

@@ -20,16 +20,15 @@ import {
   MatRowDef,
   MatRow
 } from '@angular/material/table'
-import { ActivatedRoute, Router } from '@angular/router'
-import { BehaviorSubject, merge, of } from 'rxjs'
-import { catchError, finalize, startWith, switchMap } from 'rxjs/operators'
+import { Router } from '@angular/router'
+import { merge, of } from 'rxjs'
+import { catchError, startWith, switchMap } from 'rxjs/operators'
 import SnackbarDefaults from 'src/app/shared/config/snackBarDefault'
 import { AuditLogResponse, Device } from 'src/models/models'
 import { DevicesService } from '../devices.service'
 import { MomentModule } from 'ngx-moment'
 import { MatCard, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card'
 import { MatProgressBar } from '@angular/material/progress-bar'
-import { MatToolbar } from '@angular/material/toolbar'
 import { environment } from 'src/environments/environment'
 
 @Component({
@@ -59,7 +58,7 @@ import { environment } from 'src/environments/environment'
     MomentModule
   ]
 })
-export class AuditLogComponent implements OnInit, AfterViewInit {
+export class AuditLogComponent implements AfterViewInit {
   @Input()
   public deviceId = ''
 
@@ -76,7 +75,6 @@ export class AuditLogComponent implements OnInit, AfterViewInit {
 
   constructor(
     public snackBar: MatSnackBar,
-    public readonly activatedRoute: ActivatedRoute,
     public readonly router: Router,
     private readonly devicesService: DevicesService
   ) {
@@ -88,11 +86,6 @@ export class AuditLogComponent implements OnInit, AfterViewInit {
       ]
     }
   }
-  ngOnInit(): void {
-    this.activatedRoute.params.subscribe((params) => {
-      this.deviceId = params.id
-    })
-  }
   ngAfterViewInit(): void {
     // If the user changes the sort order, reset back to the first page.
     this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0))

src/app/devices/device-detail/device-detail.component.ts

@@ -27,7 +27,7 @@ import { MatTabGroup, MatTab } from '@angular/material/tabs'
 import { MatSidenavContainer, MatSidenav, MatSidenavContent } from '@angular/material/sidenav'
 import { DeviceToolbarComponent } from '../device-toolbar/device-toolbar.component'
 import { ActivatedRoute, Router, RouterLink, RouterLinkActive } from '@angular/router'
-import { ExplorerComponent } from 'src/app/explorer/explorer.component'
+import { ExplorerComponent } from '../explorer/explorer.component'
 import { AlarmsComponent } from '../alarms/alarms.component'
 import { CertificatesComponent } from '../certificates/certificates.component'
 import { EventLogComponent } from '../event-log/event-log.component'

src/app/devices/device-toolbar/device-toolbar.component.ts

@@ -6,8 +6,8 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { catchError, finalize, switchMap } from 'rxjs/operators'
 import { MatSnackBar } from '@angular/material/snack-bar'
-import { ActivatedRoute, Router } from '@angular/router'
-import { defer, iif, Observable, of } from 'rxjs'
+import { Router } from '@angular/router'
+import { Observable, of } from 'rxjs'
 import { DevicesService } from '../devices.service'
 import SnackbarDefaults from 'src/app/shared/config/snackBarDefault'
 import { AMTFeaturesResponse, Device, UserConsentResponse } from 'src/models/models'
@@ -100,7 +100,6 @@ export class DeviceToolbarComponent implements OnInit {
 
   constructor(
     public snackBar: MatSnackBar,
-    public readonly activatedRoute: ActivatedRoute,
     public readonly router: Router,
     private readonly devicesService: DevicesService,
     private readonly userConsentService: UserConsentService,

src/app/devices/event-log/event-log.component.spec.ts

@@ -138,6 +138,7 @@ describe('EventLogComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(EventLogComponent)
     component = fixture.componentInstance
+    component.deviceId = 'guid'
     fixture.detectChanges()
   })
 

src/app/devices/event-log/event-log.component.ts

@@ -18,7 +18,6 @@ import {
   MatRowDef,
   MatRow
 } from '@angular/material/table'
-import { ActivatedRoute } from '@angular/router'
 import { of } from 'rxjs'
 import { catchError, finalize, take } from 'rxjs/operators'
 import SnackbarDefaults from 'src/app/shared/config/snackBarDefault'
@@ -78,7 +77,6 @@ export class EventLogComponent implements OnInit {
   public dataSource = new MatTableDataSource(this.eventLogData)
   constructor(
     public snackBar: MatSnackBar,
-    public readonly activatedRoute: ActivatedRoute,
     private readonly devicesService: DevicesService
   ) {
     if (!this.isCloudMode) {
@@ -92,26 +90,23 @@ export class EventLogComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.activatedRoute.params.pipe(take(1)).subscribe((params) => {
-      this.isLoading = true
-      this.deviceId = params.id
-      this.devicesService
-        .getEventLog(this.deviceId)
-        .pipe(
-          catchError((err) => {
-            console.error(err)
-            this.snackBar.open($localize`Error retrieving event log`, undefined, SnackbarDefaults.defaultError)
-            return of(this.eventLogData)
-          }),
-          finalize(() => {
-            this.isLoading = false
-          })
-        )
-        .subscribe((data) => {
-          this.eventLogData = data || []
-          this.dataSource.data = this.eventLogData
+    this.isLoading = true
+    this.devicesService
+      .getEventLog(this.deviceId)
+      .pipe(
+        catchError((err) => {
+          console.error(err)
+          this.snackBar.open($localize`Error retrieving event log`, undefined, SnackbarDefaults.defaultError)
+          return of(this.eventLogData)
+        }),
+        finalize(() => {
+          this.isLoading = false
         })
-    })
+      )
+      .subscribe((data) => {
+        this.eventLogData = data || []
+        this.dataSource.data = this.eventLogData
+      })
   }
 
   decodeEventType(eventType: number): string {

src/app/explorer/explorer.component.spec.ts → src/app/devices/explorer/explorer.component.spec.ts

@@ -5,7 +5,7 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { ExplorerComponent } from './explorer.component'
-import { DevicesService } from '../devices/devices.service'
+import { DevicesService } from '../devices.service'
 import { ActivatedRoute } from '@angular/router'
 import { MonacoEditorModule, NGX_MONACO_EDITOR_CONFIG } from 'ngx-monaco-editor-v2'
 import { MatSnackBarModule } from '@angular/material/snack-bar'
@@ -73,14 +73,9 @@ describe('ExplorerComponent', () => {
     expect(component.filteredOptions).toBeTruthy()
   })
 
-  it('should handle ActivatedRoute parameters', () => {
-    expect(component.deviceId).toBe('123')
-    expect(devicesServiceSpy.executeExplorerCall).toHaveBeenCalledWith('123', 'Operation1')
-    expect(component.XMLData).toBe('<xml>Data</xml>')
-  })
-
   it('should update XMLData on input change', () => {
-    component.inputChanged('Operation2')
+    component.deviceId = '123'
+    component.inputChanged({ option: { value: 'Operation2' } } as any)
     expect(component.selectedWsmanOperation).toBe('Operation2')
     expect(devicesServiceSpy.executeExplorerCall).toHaveBeenCalledWith('123', 'Operation2')
     expect(component.XMLData).toBe('<xml>Data</xml>')

src/app/explorer/explorer.component.ts → src/app/devices/explorer/explorer.component.ts

@@ -6,8 +6,8 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { MatDialog } from '@angular/material/dialog'
 import { MatSnackBar } from '@angular/material/snack-bar'
-import { ActivatedRoute, Router } from '@angular/router'
-import { DevicesService } from '../devices/devices.service'
+import { Router } from '@angular/router'
+import { DevicesService } from '../devices.service'
 import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
 import { FormsModule, FormControl, ReactiveFormsModule } from '@angular/forms'
 import { MatCardModule } from '@angular/material/card'
@@ -53,8 +53,7 @@ export class ExplorerComponent implements OnInit {
     public snackBar: MatSnackBar,
     public dialog: MatDialog,
     public readonly router: Router,
-    private readonly devicesService: DevicesService,
-    public readonly activatedRoute: ActivatedRoute
+    private readonly devicesService: DevicesService
   ) {}
 
   ngOnInit(): void {
@@ -65,17 +64,15 @@ export class ExplorerComponent implements OnInit {
         startWith(''),
         map((value) => this._filter(value ?? ''))
       )
-      this.activatedRoute.params.subscribe((params) => {
-        this.deviceId = params.id
-        this.devicesService.executeExplorerCall(this.deviceId, this.selectedWsmanOperation).subscribe({
-          next: (data) => {
-            this.XMLData = data
-          },
-          error: (err) => {
-            console.error(err)
-            this.snackBar.open($localize`Error retrieving explorer response`, undefined, SnackbarDefaults.defaultError)
-          }
-        })
+
+      this.devicesService.executeExplorerCall(this.deviceId, this.selectedWsmanOperation).subscribe({
+        next: (data) => {
+          this.XMLData = data
+        },
+        error: (err) => {
+          console.error(err)
+          this.snackBar.open($localize`Error retrieving explorer response`, undefined, SnackbarDefaults.defaultError)
+        }
       })
     })
   }

src/app/devices/general/general.component.ts

@@ -7,7 +7,7 @@ import { Component, Input, OnInit } from '@angular/core'
 import { MatCardModule } from '@angular/material/card'
 import { MatCheckboxModule } from '@angular/material/checkbox'
 import { MatSelectModule } from '@angular/material/select'
-import { ActivatedRoute, Router } from '@angular/router'
+import { Router } from '@angular/router'
 import { AMTFeaturesRequest, AMTFeaturesResponse, Device, HardwareInformation } from 'src/models/models'
 import { DevicesService } from '../devices.service'
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
@@ -67,7 +67,6 @@ export class GeneralComponent implements OnInit {
 
   constructor(
     public snackBar: MatSnackBar,
-    public readonly activatedRoute: ActivatedRoute,
     public readonly router: Router,
     private readonly devicesService: DevicesService,
     public fb: FormBuilder

src/app/devices/hardware-information/hardware-information.component.ts

@@ -6,7 +6,7 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { MatCardModule } from '@angular/material/card'
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar'
-import { ActivatedRoute, Router } from '@angular/router'
+import { Router } from '@angular/router'
 import { catchError, finalize, throwError } from 'rxjs'
 import SnackbarDefaults from 'src/app/shared/config/snackBarDefault'
 import { DevicesService } from '../devices.service'
@@ -45,7 +45,6 @@ export class HardwareInformationComponent implements OnInit {
 
   constructor(
     public snackBar: MatSnackBar,
-    public readonly activatedRoute: ActivatedRoute,
     public readonly router: Router,
     private readonly devicesService: DevicesService,
     public fb: FormBuilder

src/app/profiles/key-display-dialog/key-display-dialog.component.spec.ts

@@ -1,14 +1,23 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { KeyDisplayDialogComponent } from './key-display-dialog.component'
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'
+import { provideNoopAnimations } from '@angular/platform-browser/animations'
 
 describe('KeyDisplayDialogComponent', () => {
   let component: KeyDisplayDialogComponent
   let fixture: ComponentFixture<KeyDisplayDialogComponent>
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [KeyDisplayDialogComponent]
+      providers: [
+        provideNoopAnimations(),
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: { key: 'test' }
+        }
+      ],
+      imports: [KeyDisplayDialogComponent, MatDialogModule]
     }).compileComponents()
 
     fixture = TestBed.createComponent(KeyDisplayDialogComponent)