ls-monitor

package.json

@@ -21,10 +21,11 @@
   },
   "private": true,
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "dependencies": {
     "@angular/animations": "17.3.7",
+    "@angular/cdk": "17.3.9",
     "@angular/common": "17.3.7",
     "@angular/compiler": "17.3.7",
     "@angular/core": "17.3.7",
@@ -52,6 +53,7 @@
     "crypto-browserify": "3.12.0",
     "filesize": "10.1.1",
     "find-matching-bracket": "1.0.3",
+    "highlight.js": "11.11.0",
     "lodash-es": "4.17.21",
     "luxon": "3.4.4",
     "marked": "5.1.2",
@@ -61,6 +63,7 @@
     "path-browserify": "1.0.1",
     "process": "0.11.10",
     "rxjs": "^7.4.0",
+    "search-query-parser": "1.6.0",
     "semver": "^7.5.4",
     "stream-browserify": "3.0.0",
     "tslib": "^2.6.2",

src/app/debug/debug.component.html

@@ -19,6 +19,12 @@
         <app-dmesg [device]="device"></app-dmesg>
       </ng-template>
     </li>
+    <li ngbNavItem="ls-monitor" *ngIf="device.username !== 'prisoner'">
+      <a ngbNavLink>ls-monitor</a>
+      <ng-template ngbNavContent>
+        <app-ls-monitor [device]="device"></app-ls-monitor>
+      </ng-template>
+    </li>
   </ul>
 
   <div class="flex-fill overflow-hidden debug-content" [ngbNavOutlet]="nav"></div>

src/app/debug/debug.module.ts

@@ -12,30 +12,42 @@ import {DmesgComponent} from "./dmesg/dmesg.component";
 import {PmLogControlComponent} from './pmlog/control/control.component';
 import {SetContextComponent} from './pmlog/set-context/set-context.component';
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import { DetailsComponent } from './crashes/details/details.component';
+import {DetailsComponent} from './crashes/details/details.component';
+import {LsMonitorComponent} from "./ls-monitor/ls-monitor.component";
+import {DetailsComponent as LsMonitorDetailsComponent} from "./ls-monitor/details/details.component";
 
+import {ObjectHighlightPipe} from "./ls-monitor/object-highlight.pipe";
+
+import hljs from 'highlight.js'
+import json from 'highlight.js/lib/languages/json';
 
 @NgModule({
-  declarations: [
-    DebugComponent,
-    CrashesComponent,
-    PmLogComponent,
-    LogReaderComponent,
-    DmesgComponent,
-    PmLogControlComponent,
-    SetContextComponent,
-    DetailsComponent,
-  ],
-  imports: [
-    CommonModule,
-    DebugRoutingModule,
-    NgbNavModule,
-    NgbTooltipModule,
-    SharedModule,
-    TerminalModule,
-    FormsModule,
-    ReactiveFormsModule
-  ]
+    declarations: [
+        DebugComponent,
+        CrashesComponent,
+        PmLogComponent,
+        LogReaderComponent,
+        DmesgComponent,
+        PmLogControlComponent,
+        SetContextComponent,
+        DetailsComponent,
+        LsMonitorComponent,
+        LsMonitorDetailsComponent,
+        ObjectHighlightPipe,
+    ],
+    imports: [
+        CommonModule,
+        DebugRoutingModule,
+        NgbNavModule,
+        NgbTooltipModule,
+        SharedModule,
+        TerminalModule,
+        FormsModule,
+        ReactiveFormsModule,
+    ]
 })
 export class DebugModule {
+    constructor() {
+        hljs.registerLanguage('json', json);
+    }
 }

src/app/debug/ls-monitor/details/details.component.html

@@ -0,0 +1,37 @@
+<div class="d-flex flex-column w-100 h-100" *ngIf="detailsField as details">
+  <div class="border-bottom">
+    <button class="btn btn-link" (click)="closeClick.emit()"><i class="bi bi-x"></i></button>
+  </div>
+  <div class="flex-fill overflow-x-hidden overflow-y-auto">
+    <table class="table table-sm table-striped table-hover">
+      <thead>
+      <tr>
+        <th>Data</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr (click)="selectedMessage = message" *ngFor="let message of details.messages">
+        <td class="text-nowrap">
+          <small [ngSwitch]="message.type">
+            <i class="bi bi-arrow-right" *ngSwitchCase="'call'"></i>
+            <i class="bi bi-arrow-left" *ngSwitchCase="'return'"></i>
+            <i class="bi bi-x-lg" *ngSwitchCase="'callCancel'"></i>
+          </small>
+          {{ message.information }}
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="border-top h-50 overflow-auto message-selected user-select-text" *ngIf="selectedMessage as selected">
+    <div class="small p-2 border-bottom">
+      <div><b>Type</b>: {{ selected.type }}</div>
+      <div><b>Sender</b>: {{ selected.sender }}</div>
+      <div><b>Destination</b>: {{ selected.destination }}<span
+        *ngIf="selected.methodCategory !== '/'">{{ selected.methodCategory }}</span><span
+        *ngIf="selected.method">/{{ selected.method }}</span></div>
+    </div>
+    <pre class="p-2" *ngIf="selected.payload as payload"><code [innerHtml]="payload | objectHighlight"></code></pre>
+    <pre class="p-2" *ngIf="selected.rawPayload as raw"><code>{{ raw }}</code></pre>
+  </div>
+</div>

src/app/debug/ls-monitor/details/details.component.scss

@@ -0,0 +1,3 @@
+.message-selected {
+  min-height: 50%;
+}

src/app/debug/ls-monitor/details/details.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailsComponent } from './details.component';
+
+describe('DetailsComponent', () => {
+  let component: DetailsComponent;
+  let fixture: ComponentFixture<DetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DetailsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/debug/ls-monitor/details/details.component.ts

@@ -0,0 +1,24 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {CallEntry, MonitorMessageItem} from "../ls-monitor.component";
+
+@Component({
+    selector: 'app-ls-monitor-details',
+    templateUrl: './details.component.html',
+    styleUrls: ['../ls-monitor.component.scss', './details.component.scss']
+})
+export class DetailsComponent {
+
+    detailsField!: CallEntry;
+
+    @Output()
+    closeClick = new EventEmitter<void>();
+
+    selectedMessage?: MonitorMessageItem;
+
+    @Input()
+    set details(value: CallEntry) {
+        this.detailsField = value;
+        this.selectedMessage = value.messages[0];
+    }
+
+}

src/app/debug/ls-monitor/ls-monitor.component.html

@@ -0,0 +1,43 @@
+<div class="w-100 h-100 ls-monitor">
+  <div class="top-bar border-bottom p-2">
+    <input type="search" class="form-control form-control-sm"
+           appSearchBar keywords="sender,destination" (query)="queryUpdated($event)">
+  </div>
+  <div class="side-bar border-end h-100 d-flex flex-column p-2">
+    <button class="btn btn-sm btn-secondary mt-2" ngbTooltip="Capture" (click)="beginCapture()" [disabled]="!device"
+            [ngSwitch]="isCapturing">
+      <i class="bi bi-record-fill larger" *ngSwitchCase="false"></i>
+      <i class="bi bi-stop-fill" *ngSwitchDefault></i>
+    </button>
+    <button class="btn btn-sm btn-secondary mt-2" ngbTooltip="Open" (click)="openFromFile()" [disabled]="isCapturing">
+      <i class="bi bi-folder-fill"></i>
+    </button>
+    <button class="btn btn-sm btn-secondary mt-2" ngbTooltip="Save" *ngIf="isCapture">
+      <i class="bi bi-floppy2-fill"></i>
+    </button>
+    <hr>
+  </div>
+  <div class="table-container overflow-hidden d-flex flex-row">
+    <div class="overflow-x-hidden overflow-y-auto h-100" [class.w-100]="!selectedRow"
+         [class.details-opened]="selectedRow">
+      <table class="table table-sm table-striped table-hover">
+        <thead>
+        <tr>
+          <th class="name-col">Name</th>
+          <th class="sender-col" *ngIf="!selectedRow">Sender</th>
+          <th class="info-col" *ngIf="!selectedRow">Information</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr [class.table-active]="selectedRow === row" (click)="selectedRow = row" *ngFor="let row of rows">
+          <td class="name-col">{{ row.name }}</td>
+          <td class="sender-col" *ngIf="!selectedRow">{{ row.sender }}</td>
+          <td class="info-col text-nowrap" *ngIf="!selectedRow">{{ row.information }}</td>
+        </tbody>
+      </table>
+    </div>
+    <div class="flex-fill h-100 border-start overflow-hidden" *ngIf="selectedRow as selected">
+      <app-ls-monitor-details [details]="selected" (closeClick)="selectedRow = undefined"></app-ls-monitor-details>
+    </div>
+  </div>
+</div>