feat: Add option to display message context (#889)

* feat: Add option to display message context

* fix failing github actions

* newline in ts

* apply feedback changes

* track key instead of whole key value pair

src/app/compare/compare.component.html

@@ -26,10 +26,12 @@
           <div class="flex flex-column">
             <app-report-alert-message [report]="leftNode"/>
             <app-metadata-table class="w-50" [report]="leftNode"/>
+            <app-messagecontext-table class="w-50" [report]="leftNode"/>
           </div>
           <div class="flex flex-column">
             <app-report-alert-message [report]="rightNode"/>
             <app-metadata-table class="w-50" [report]="rightNode"/>
+            <app-messagecontext-table class="w-50" [report]="rightNode"/>
           </div>
         </div>
       }

src/app/compare/compare.component.ts

@@ -5,6 +5,7 @@ import { DiffEditorModel, MonacoEditorModule } from 'ngx-monaco-editor-v2';
 import { TabService } from '../shared/services/tab.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MetadataTableComponent } from '../shared/components/metadata-table/metadata-table.component';
+import { MessagecontextTableComponent } from '../shared/components/messagecontext-table/messagecontext-table.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TitleCasePipe } from '@angular/common';
 import { NodeLinkStrategy, nodeLinkStrategyConst } from '../shared/enums/node-link-strategy';
@@ -30,6 +31,7 @@ import { ReportAlertMessageComponent } from '../report/report-alert-message/repo
   imports: [
     CompareTreeComponent,
     MetadataTableComponent,
+    MessagecontextTableComponent,
     MonacoEditorModule,
     ReactiveFormsModule,
     TitleCasePipe,
@@ -40,6 +42,7 @@ import { ReportAlertMessageComponent } from '../report/report-alert-message/repo
   ],
 })
 export class CompareComponent implements AfterViewInit, OnInit {
+  protected readonly ReportUtil = ReportUtil;
   static readonly ROUTER_PATH: string = 'compare';
   @ViewChild(CompareTreeComponent) compareTreeComponent!: CompareTreeComponent;
   protected readonly nodeLinkStrategyConst = nodeLinkStrategyConst;

src/app/report/edit-display/edit-display.component.html

@@ -37,6 +37,15 @@
           (click)="toggleMetadataTable()">
           {{ metadataTableVisible|booleanToString:'Hide' :'Show' }} metadata
         </button>
+        @if (ReportUtil.isCheckPoint(selectedNode)) {
+          <button
+            data-cy-open-metadata-table
+            class="btn btn-info h-fit"
+            title="Open message context table"
+            (click)="toggleMessageContextTable()">
+            {{ messageContextTableVisible|booleanToString:'Hide' :'Show' }} messagecontext
+          </button>
+        }
         <app-toggle-button
           #editToggleButton
           data-cy-report="toggleEdit"
@@ -111,6 +120,9 @@
     @if (metadataTableVisible) {
       <app-metadata-table [report]="selectedNode"/>
     }
+    @if (messageContextTableVisible) {
+      <app-messagecontext-table [report]="selectedNode"/>
+    }
   }
 </div>
 

src/app/report/edit-display/edit-display.component.ts

@@ -14,6 +14,7 @@ import { HelperService } from '../../shared/services/helper.service';
 import { EditorComponent } from '../../editor/editor.component';
 import { Report } from '../../shared/interfaces/report';
 import { MetadataTableComponent } from '../../shared/components/metadata-table/metadata-table.component';
+import { MessagecontextTableComponent } from '../../shared/components/messagecontext-table/messagecontext-table.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BooleanToStringPipe } from '../../shared/pipes/boolean-to-string.pipe';
 import { catchError } from 'rxjs';
@@ -52,6 +53,7 @@ import { Router } from '@angular/router';
     ReactiveFormsModule,
     EditorComponent,
     MetadataTableComponent,
+    MessagecontextTableComponent,
     BooleanToStringPipe,
     ClipboardModule,
     EditFormComponent,
@@ -84,6 +86,7 @@ export class EditDisplayComponent implements OnChanges {
   editingChildNode: boolean = false;
   editingRootNode: boolean = false;
   metadataTableVisible: boolean = false;
+  messageContextTableVisible: boolean = false;
   displayReport: boolean = false;
   rerunResult?: TestResult;
   selectedNode?: Report | Checkpoint;
@@ -323,6 +326,10 @@ export class EditDisplayComponent implements OnChanges {
     this.metadataTableVisible = !this.metadataTableVisible;
   }
 
+  toggleMessageContextTable(): void {
+    this.messageContextTableVisible = !this.messageContextTableVisible;
+  }
+
   showEditorPossibilitiesModal(modal: any): void {
     this.modalService.open(modal, {
       backdrop: true,

src/app/shared/components/messagecontext-table/messagecontext-table.component.html

@@ -0,0 +1,13 @@
+<div class="d-flex flex-column mb-2">
+  @if (messageContextData.length > 0) {
+    <div class="title">MessageContext:</div>
+    <div data-cy-metadata-table="table" class="metadata-table">
+        @for (entry of messageContextData; track entry[0]) {
+        <div class="table-col first-table-col">
+          <div class="key">{{ entry[0] }}</div>
+          <div class="value" [appCopyTooltip]="entry[1]">{{ entry[1] }}</div>
+        </div>
+        }
+    </div>
+  }
+</div>

src/app/shared/components/messagecontext-table/messagecontext-table.component.ts

@@ -0,0 +1,37 @@
+import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { CommonModule } from '@angular/common';
+import { CopyTooltipDirective } from '../../directives/copy-tooltip.directive';
+import { Report } from '../../interfaces/report';
+import { Checkpoint } from '../../interfaces/checkpoint';
+import { ReportUtil } from '../../util/report-util';
+
+@Component({
+  selector: 'app-messagecontext-table',
+  templateUrl: './messagecontext-table.component.html',
+  styleUrls: ['./../metadata-table/metadata-table.component.css'],
+  standalone: true,
+  imports: [ClipboardModule, MatTooltipModule, CopyTooltipDirective, CommonModule],
+})
+export class MessagecontextTableComponent implements OnInit, OnChanges {
+  protected readonly ReportUtil = ReportUtil;
+
+  @Input({ required: true }) report!: Report | Checkpoint;
+  messageContextData: [string, string][] = [];
+
+  ngOnInit() {
+    this.updateMessageContextData();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.report) {
+      this.updateMessageContextData();
+    }
+  }
+
+  private updateMessageContextData() {
+    const messageContext = ReportUtil.isCheckPoint(this.report) ? this.report.messageContext : null;
+    this.messageContextData = messageContext ? Object.entries(messageContext) : [];
+  }
+}

src/app/shared/components/metadata-table/metadata-table.component.css

@@ -58,3 +58,7 @@ table {
     background-color: rgba(154, 152, 152, 0.5);
   }
 }
+
+.title {
+  font-weight: bold;
+}

src/app/shared/components/metadata-table/metadata-table.component.html

@@ -1,4 +1,5 @@
 <div class="d-flex flex-column mb-2">
+  <div class="title">Metadata:</div>
   <div data-cy-metadata-table="table" class="metadata-table">
     <div class="table-col first-table-col">
       <div class="key">Name</div>

src/app/shared/interfaces/checkpoint.ts

@@ -7,6 +7,7 @@ export interface Checkpoint {
   index: number;
   level: number;
   message: string;
+  messageContext: Record<string, string>;
   messageClassName?: string;
   name: string;
   noCloseReceivedForStream?: boolean;