From e042dea8c43eec593919bd7bee20eb4390da9636 Mon Sep 17 00:00:00 2001 From: Albrecht Lohofener Date: Wed, 26 Mar 2025 14:26:56 +0100 Subject: [PATCH] Change status page to dashboard --- web-frontend/src/app/app.routes.ts | 8 +-- .../src/app/backend-communication.service.ts | 41 ++++++++++++- .../app/dashboard/dashboard.component.html | 59 +++++++++++++++++++ .../app/dashboard/dashboard.component.scss | 21 +++++++ .../app/dashboard/dashboard.component.spec.ts | 25 ++++++++ .../src/app/dashboard/dashboard.component.ts | 49 +++++++++++++++ .../side-navigation.component.html | 2 +- .../src/app/status/status.component.html | 26 -------- .../src/app/status/status.component.scss | 14 ----- .../src/app/status/status.component.spec.ts | 23 -------- .../src/app/status/status.component.ts | 24 -------- 11 files changed, 198 insertions(+), 94 deletions(-) create mode 100644 web-frontend/src/app/dashboard/dashboard.component.html create mode 100644 web-frontend/src/app/dashboard/dashboard.component.scss create mode 100644 web-frontend/src/app/dashboard/dashboard.component.spec.ts create mode 100644 web-frontend/src/app/dashboard/dashboard.component.ts delete mode 100644 web-frontend/src/app/status/status.component.html delete mode 100644 web-frontend/src/app/status/status.component.scss delete mode 100644 web-frontend/src/app/status/status.component.spec.ts delete mode 100644 web-frontend/src/app/status/status.component.ts diff --git a/web-frontend/src/app/app.routes.ts b/web-frontend/src/app/app.routes.ts index 1672717..c1f7f52 100644 --- a/web-frontend/src/app/app.routes.ts +++ b/web-frontend/src/app/app.routes.ts @@ -1,8 +1,8 @@ import { Routes } from '@angular/router'; import { SystemInformationComponent } from "./system-information/system-information.component"; -import { StatusComponent } from './status/status.component'; import { ConsoleComponent } from './console/console.component'; import { InfoComponent } from './info/info.component'; +import { DashboardComponent } from './dashboard/dashboard.component'; export const routes: Routes = [ { // Redirect to 'status' by default @@ -11,9 +11,9 @@ export const routes: Routes = [ pathMatch: 'full' }, { - path: 'status', - component: StatusComponent, - title: 'Status' + path: 'dashboard', + component: DashboardComponent, + title: 'Dashboard' }, { path: 'console', diff --git a/web-frontend/src/app/backend-communication.service.ts b/web-frontend/src/app/backend-communication.service.ts index ff02965..d745580 100644 --- a/web-frontend/src/app/backend-communication.service.ts +++ b/web-frontend/src/app/backend-communication.service.ts @@ -7,12 +7,19 @@ interface OpenWrtInfo { kernelVersion: string; } +interface AttachedHardware { + wan: string; + lan: string; + usb: string[]; + pci: string[]; +} + @Injectable({ providedIn: 'root' }) export class BackendCommunicationService { - //urlPrefix: string = 'http://localhost:8006'; // Just for development - urlPrefix: string = ''; + urlPrefix: string = 'http://localhost:8006'; // Just for development + //urlPrefix: string = ''; constructor(private http: HttpClient) { } @@ -72,4 +79,34 @@ export class BackendCommunicationService { }) ); } + + // TODO TODO TODO: Implement an API call for getting attached hardware + getAttachedHardware(): Observable { + return this.http.get(this.urlPrefix + '/api/get_container_info').pipe( + map(response => { + const text = response['combined_output'] + const tmpLan = text.match(/declare -x LAN_IF="([^"]+)"/)[1]; + const tmpWan = text.match(/declare -x WAN_IF="([^"]+)"/)[1]; + + const tmpUsb = []; + const tmpUsb1 = text.match(/declare -x USB_1="([^"]+)"/); + const tmpUsb2 = text.match(/declare -x USB_2="([^"]+)"/); + if (tmpUsb1) tmpUsb.push(tmpUsb1[1]); + if (tmpUsb2) tmpUsb.push(tmpUsb2[1]); + + const tmpPci = []; + const tmpPci1 = text.match(/declare -x PCI_1="([^"]+)"/); + const tmpPci2 = text.match(/declare -x PCI_2="([^"]+)"/); + if (tmpPci1) tmpPci.push(tmpPci1[1]); + if (tmpPci2) tmpPci.push(tmpPci2[1]); + + return { + lan: tmpLan, + wan: tmpWan, + usb: tmpUsb, + pci: tmpPci + }; + }) + ); + } } diff --git a/web-frontend/src/app/dashboard/dashboard.component.html b/web-frontend/src/app/dashboard/dashboard.component.html new file mode 100644 index 0000000..95d1f37 --- /dev/null +++ b/web-frontend/src/app/dashboard/dashboard.component.html @@ -0,0 +1,59 @@ +
+ + + + + Running + + + @if (openwrtVersion) { + + + computer + {{ openwrtVersion }} + + + info + Linux kernel {{ openWrtKernel }} + + + } @else { + + } + + + + + + + + Attached hardware + + + + + lan + WAN: {{ wan }} + + + lan + LAN: {{ lan }} + + @for (usbDevice of usb; track usbDevice) { + + usb + USB: {{ usbDevice }} + + } + @for (pciDevice of pci; track pciDevice) { + + memory + PCI: {{ pciDevice }} + + } + + + + + +
diff --git a/web-frontend/src/app/dashboard/dashboard.component.scss b/web-frontend/src/app/dashboard/dashboard.component.scss new file mode 100644 index 0000000..308549b --- /dev/null +++ b/web-frontend/src/app/dashboard/dashboard.component.scss @@ -0,0 +1,21 @@ +.grid-container { + margin: 20px; +} + +.dashboard-card { + position: absolute; + top: 15px; + left: 15px; + right: 15px; + bottom: 15px; +} + +.more-button { + position: absolute; + top: 5px; + right: 10px; +} + +.dashboard-card-content { + text-align: left; +} diff --git a/web-frontend/src/app/dashboard/dashboard.component.spec.ts b/web-frontend/src/app/dashboard/dashboard.component.spec.ts new file mode 100644 index 0000000..5b6077d --- /dev/null +++ b/web-frontend/src/app/dashboard/dashboard.component.spec.ts @@ -0,0 +1,25 @@ +import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; + +import { DashboardComponent } from './dashboard.component'; + +describe('DashboardComponent', () => { + let component: DashboardComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [NoopAnimationsModule] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DashboardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should compile', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/web-frontend/src/app/dashboard/dashboard.component.ts b/web-frontend/src/app/dashboard/dashboard.component.ts new file mode 100644 index 0000000..b959c92 --- /dev/null +++ b/web-frontend/src/app/dashboard/dashboard.component.ts @@ -0,0 +1,49 @@ +import { Component, inject } from '@angular/core'; +import { MatGridListModule } from '@angular/material/grid-list'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCardModule } from '@angular/material/card'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatListModule } from '@angular/material/list'; +import { BackendCommunicationService } from '../backend-communication.service'; + + +@Component({ + selector: 'app-dashboard', + templateUrl: './dashboard.component.html', + styleUrl: './dashboard.component.scss', + standalone: true, + imports: [ + MatGridListModule, + MatMenuModule, + MatIconModule, + MatButtonModule, + MatCardModule, + MatProgressSpinnerModule, + MatListModule + ] +}) +export class DashboardComponent { + openwrtVersion?: string; + openWrtKernel?: string; + + wan?: string; + lan?: string; + usb?: string[]; + pci?: string[]; + + constructor(private service: BackendCommunicationService) { + this.service.pollOpenWrtInfo().subscribe(response => { + this.openwrtVersion = response.version; + this.openWrtKernel = response.kernelVersion; + }); + + this.service.getAttachedHardware().subscribe(response => { + this.wan = response.wan; + this.lan = response.lan; + this.usb = response.usb; + this.pci = response.pci; + }); + } +} diff --git a/web-frontend/src/app/side-navigation/side-navigation.component.html b/web-frontend/src/app/side-navigation/side-navigation.component.html index 2c3f64c..e631058 100644 --- a/web-frontend/src/app/side-navigation/side-navigation.component.html +++ b/web-frontend/src/app/side-navigation/side-navigation.component.html @@ -5,7 +5,7 @@ [opened]="(isHandset$ | async) === false"> Menu - Status + Dashboard Console System information Info diff --git a/web-frontend/src/app/status/status.component.html b/web-frontend/src/app/status/status.component.html deleted file mode 100644 index 365c026..0000000 --- a/web-frontend/src/app/status/status.component.html +++ /dev/null @@ -1,26 +0,0 @@ -
- - - OpenWrt image - - - @if (openwrtVersion) { -
    -
  • Version: {{ openwrtVersion }}
    • -
  • Kernel: {{ openWrtKernel }}
    • -
- } @else { - - } - - - - - - Attached hardware - - - - - -
diff --git a/web-frontend/src/app/status/status.component.scss b/web-frontend/src/app/status/status.component.scss deleted file mode 100644 index 7e28674..0000000 --- a/web-frontend/src/app/status/status.component.scss +++ /dev/null @@ -1,14 +0,0 @@ -.status-card { - max-width: 400px; - margin: 5px; -} - -.responsive-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); - //gap: 24px; -} - -mat-spinner { - margin-top: 10px; -} diff --git a/web-frontend/src/app/status/status.component.spec.ts b/web-frontend/src/app/status/status.component.spec.ts deleted file mode 100644 index 03d5805..0000000 --- a/web-frontend/src/app/status/status.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { StatusComponent } from './status.component'; - -describe('StatusComponent', () => { - let component: StatusComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [StatusComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(StatusComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/web-frontend/src/app/status/status.component.ts b/web-frontend/src/app/status/status.component.ts deleted file mode 100644 index 6e5db48..0000000 --- a/web-frontend/src/app/status/status.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Component } from '@angular/core'; -import { MatButtonModule } from '@angular/material/button'; -import { MatCardModule } from '@angular/material/card'; -import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; -import { BackendCommunicationService } from '../backend-communication.service'; - - -@Component({ - selector: 'app-status', - imports: [MatCardModule, MatButtonModule, MatProgressSpinnerModule], - templateUrl: './status.component.html', - styleUrl: './status.component.scss', -}) -export class StatusComponent { - openwrtVersion?: string; - openWrtKernel?: string; - - constructor(private service: BackendCommunicationService) { - this.service.pollOpenWrtInfo().subscribe(response => { - this.openwrtVersion = response.version; - this.openWrtKernel = response.kernelVersion; - }) - } -}