feat(trace-navigator): it is now possible to switch btw the traces

src/app/shared/stack-trace/stack-trace.component.ts

@@ -1,24 +1,31 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { MatCheckboxChange } from '@angular/material';
-import {
-  Trace,
-  TraceCompletion,
-  TraceLocation,
-  parseTraceLocation,
-} from '../../api/interfaces/trace.interface';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+// Interface
+import { Trace } from '../../api/interfaces/trace.interface';
 import { ViewTypeFilter } from '../../api/interfaces/type-filter.interface';
 
 @Component({
   selector: 'zp-stack-trace',
   template: `
+    <span class="navigation">
+      <button mat-raised-button (click)="onNavigationClick('prev')" [disabled] = "filtered[1]?.ctx == traceMin">
+        <mat-icon>navigate_before</mat-icon>
+      </button>
+      <button mat-raised-button (click)="onNavigationClick('next')" [disabled] = "filtered[1]?.ctx == traceMax">
+        <mat-icon>navigate_next</mat-icon>
+      </button>
+      <span class="trace-info">
+        <p><strong>Trace ID : </strong>{{filtered[1]?.ctx}}</p>
+        <p><strong>owner : </strong>{{filtered[1]?.owner}}</p>
+      </span>
+    </span>
     <zp-stack-filter [traces]="traces" [types]="types" (filteredTraces)="filterTraces($event)"></zp-stack-filter>
     <table>
       <thead>
         <tr>
           <th>N</th>
           <th>Type</th>
           <th>Content</th>
-          <th>Owner</th>
         </tr>
       </thead>
       <tbody>
@@ -31,7 +38,6 @@ import { ViewTypeFilter } from '../../api/interfaces/type-filter.interface';
             <zp-lazy-json *ngIf="trace.type == 'USR'" [value]="trace.data"></zp-lazy-json>
             <pre *ngIf="trace.type == 'CMT'">{{trace.data}}</pre>
           </td>
-          <td>{{trace.owner}}</td>
         </tr>
       </tbody>
     </table>
@@ -48,8 +54,20 @@ export class StackTraceComponent {
   ];
 
   @Input() traces: Trace[] = [];
+  @Input() traceMin = 0;
+  @Input() traceMax = 9999;
+
+  @Output() traceNavigation = new EventEmitter<string>();
 
   filterTraces(filteredTraces: Trace[]) {
     this.filtered = filteredTraces;
   }
+
+  onNavigationClick(direction: string) {
+    if (direction == 'next') {
+      this.traceNavigation.emit('next');
+    } else if (direction == 'prev') {
+      this.traceNavigation.emit('prev');
+    }
+  }
 }

src/app/traces/traces-view/traces-view.component.html

@@ -72,6 +72,6 @@ <h1>
   </mat-table>
 
   <mat-sidenav #sidenav mode="over" position="end">
-    <zp-stack-trace [traces]="selection"></zp-stack-trace>
+    <zp-stack-trace [traces]="selection" (traceNavigation)="traceNavigate($event)" [traceMin]="ctxMin" [traceMax]="ctxMax"></zp-stack-trace>
   </mat-sidenav>
 </mat-sidenav-container>

src/app/traces/traces-view/traces-view.component.ts

@@ -119,6 +119,10 @@ export class TracesViewComponent implements OnDestroy, OnInit {
   selection: Trace[];
   services: string[] = [];
   initialized = false;
+  // stack-trace navigation
+  ctxMin: number = 9999;
+  ctxMax: number = 0;
+
   constructor(
     private preferences: PreferencesStorage,
     private route: ActivatedRoute,
@@ -171,9 +175,12 @@ export class TracesViewComponent implements OnDestroy, OnInit {
                 : [];
               queue[trace.n] = trace;
               dictionnary.set(trace.ctx, queue);
+              if (trace.ctx > this.ctxMax) this.ctxMax = trace.ctx;
+              if (trace.ctx < this.ctxMin) this.ctxMin = trace.ctx;
             } catch (e) {
               this.logger.error(trace);
             }
+
             const traces = Array.from(dictionnary.entries())
               .map(([ctx, list]) =>
                 list
@@ -288,4 +295,25 @@ export class TracesViewComponent implements OnDestroy, OnInit {
     filterValue = filterValue.trim();
     this.source.filter = filterValue;
   }
+
+  // zp-stack-trace output called function, changing the selection attribute to the next/previous trace
+  traceNavigate(direction: string) {
+    let i = 1;
+    if (direction == 'next') {
+      while (!this.map.has(this.selection[1].ctx + i)) {
+        i++;
+      }
+      this.selection = this.map
+        .get(this.selection[1].ctx + i)
+        .filter((truthy) => truthy);
+    }
+    if (direction == 'prev') {
+      while (!this.map.has(this.selection[1].ctx - i)) {
+        i++;
+      }
+      this.selection = this.map
+        .get(this.selection[1].ctx - i)
+        .filter((truthy) => truthy);
+    }
+  }
 }