SF-3593 Show build executionData on project Serval admin page (#3503)

Author: Nateowami

src/SIL.XForge.Scripture/ClientApp/src/app/event-metrics/event-metric-dialog.component.html

@@ -9,14 +9,10 @@ <h3>{{ t("event_type") }}</h3>
         <pre>{{ data.eventType }}</pre>
       </div>
       <h3>{{ t("parameters") }}</h3>
-      <div>
-        <pre>{{ data.payload | json }}</pre>
-      </div>
+      <app-json-viewer [data]="data.payload"></app-json-viewer>
       @if (data.result != null) {
         <h3>{{ t("result") }}</h3>
-        <div>
-          <pre>{{ data.result }}</pre>
-        </div>
+        <app-json-viewer [data]="data.result"></app-json-viewer>
       }
       @if (data.exception != null) {
         <h3>{{ t("exception") }}</h3>

src/SIL.XForge.Scripture/ClientApp/src/app/event-metrics/event-metric-dialog.component.ts

@@ -4,13 +4,14 @@ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { TranslocoModule } from '@ngneat/transloco';
 import { I18nService } from 'xforge-common/i18n.service';
 import { UICommonModule } from 'xforge-common/ui-common.module';
+import { JsonViewerComponent } from '../shared/json-viewer/json-viewer.component';
 import { EventMetric } from './event-metric';
 
 @Component({
   selector: 'app-event-metric-dialog',
   templateUrl: './event-metric-dialog.component.html',
   styleUrls: ['./event-metric-dialog.component.scss'],
-  imports: [CommonModule, MatDialogModule, TranslocoModule, UICommonModule]
+  imports: [CommonModule, MatDialogModule, TranslocoModule, UICommonModule, JsonViewerComponent]
 })
 export class EventMetricDialogComponent {
   constructor(

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/job-events-dialog.component.html

@@ -29,14 +29,14 @@ <h4>{{ getEventTypeLabel(event.eventType) }}</h4>
           @if (hasPayload(event.payload)) {
             <div class="event-payload">
               <strong>Parameters:</strong>
-              <pre>{{ event.payload | json }}</pre>
+              <app-json-viewer [data]="event.payload"></app-json-viewer>
             </div>
           }
 
           @if (event.result != null) {
             <div class="event-result">
               <strong>Result:</strong>
-              <pre>{{ event.result }}</pre>
+              <app-json-viewer [data]="event.result"></app-json-viewer>
             </div>
           }
         </div>

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/job-events-dialog.component.ts

@@ -4,6 +4,7 @@ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { I18nService } from 'xforge-common/i18n.service';
 import { UICommonModule } from 'xforge-common/ui-common.module';
 import { EventMetric } from '../event-metrics/event-metric';
+import { JsonViewerComponent } from '../shared/json-viewer/json-viewer.component';
 
 interface JobEventsDialogData {
   projectId: string;
@@ -28,7 +29,7 @@ const EVENT_TYPE_LABELS: {
   selector: 'app-job-events-dialog',
   templateUrl: './job-events-dialog.component.html',
   styleUrls: ['./job-events-dialog.component.scss'],
-  imports: [CommonModule, MatDialogModule, UICommonModule]
+  imports: [CommonModule, MatDialogModule, UICommonModule, JsonViewerComponent]
 })
 export class JobEventsDialogComponent {
   constructor(

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-project.component.html

@@ -111,37 +111,56 @@ <h2>Downloads</h2>
   </table>
 </div>
 
-<h2>Last Draft Settings</h2>
-<h3>Training books</h3>
-@for (book of trainingBooksByProject; track book.source) {
-  <div class="training">
-    <p>{{ book.source }}</p>
-    <p class="training-source-range">{{ book.scriptureRange }}</p>
-  </div>
-} @empty {
-  <p class="training">None</p>
-}
-<h3>Training data files</h3>
-<p>{{ trainingFiles.join(", ") || "None" }}</p>
-<h3>Translation books</h3>
-@for (book of translationBooksByProject; track book.source) {
-  <div class="translation">
-    <p>{{ book.source }}</p>
-    <p class="translation-range">{{ book.scriptureRange }}</p>
-  </div>
-} @empty {
-  <p class="translation">None</p>
+@if (rawLastCompletedBuild?.executionData?.warnings?.length > 0) {
+  <h2>Serval warnings from last build</h2>
+  @for (warning of rawLastCompletedBuild.executionData.warnings; track $index) {
+    <p>
+      <app-notice icon="warning" mode="fill-dark" type="warning">{{ warning }}</app-notice>
+    </p>
+  }
 }
 
-@if (draftJob$ | async; as draftJob) {
-  <h3>Diagnostic Information</h3>
-  <app-draft-information [draftJob]="draftJob"></app-draft-information>
-}
+<h2>Additional Information</h2>
 
-<h2>Raw Draft Configuration</h2>
-<pre class="raw-draft-config">
-@for (key of keys(draftConfig ?? {}); track key) {{{ key }}: <strong>{{
-    key === 'servalConfig' ? draftConfig![key] : stringify(draftConfig![key])
-  }}</strong>
-}
-</pre>
+<mat-accordion>
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>Last Draft Settings</mat-expansion-panel-header>
+    <h3>Training books</h3>
+    @for (book of trainingBooksByProject; track book.source) {
+      <div class="training">
+        <p>{{ book.source }}</p>
+        <p class="training-source-range">{{ book.scriptureRange }}</p>
+      </div>
+    } @empty {
+      <p class="training">None</p>
+    }
+    <h3>Training data files</h3>
+    <p>{{ trainingFiles.join(", ") || "None" }}</p>
+    <h3>Translation books</h3>
+    @for (book of translationBooksByProject; track book.source) {
+      <div class="translation">
+        <p>{{ book.source }}</p>
+        <p class="translation-range">{{ book.scriptureRange }}</p>
+      </div>
+    } @empty {
+      <p class="translation">None</p>
+    }
+  </mat-expansion-panel>
+
+  @if (draftJob$ | async; as draftJob) {
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>Diagnostic Information</mat-expansion-panel-header>
+      <app-draft-information [draftJob]="draftJob"></app-draft-information>
+    </mat-expansion-panel>
+  }
+
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>Raw Scripture Forge Draft Configuration</mat-expansion-panel-header>
+    <app-json-viewer [data]="draftConfig ?? {}"></app-json-viewer>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>Raw Serval Build Info</mat-expansion-panel-header>
+    <app-json-viewer [data]="rawLastCompletedBuild ?? {}"></app-json-viewer>
+  </mat-expansion-panel>
+</mat-accordion>

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-project.component.scss

@@ -14,15 +14,7 @@
   }
 }
 
-.raw-draft-config {
-  font-family: monospace;
-}
-
 .zip-progress {
   display: flex;
   align-items: center;
 }
-
-pre {
-  white-space: pre-wrap;
-}

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-project.component.ts

@@ -5,7 +5,7 @@ import { Router } from '@angular/router';
 import { saveAs } from 'file-saver';
 import { SFProjectProfile } from 'realtime-server/lib/esm/scriptureforge/models/sf-project';
 import { DraftConfig, TranslateSource } from 'realtime-server/lib/esm/scriptureforge/models/translate-config';
-import { catchError, lastValueFrom, Observable, of, Subscription, switchMap, throwError } from 'rxjs';
+import { catchError, firstValueFrom, lastValueFrom, Observable, of, Subscription, switchMap, throwError } from 'rxjs';
 import { ActivatedProjectService } from 'xforge-common/activated-project.service';
 import { DataLoadingComponent } from 'xforge-common/data-loading-component';
 import { I18nService } from 'xforge-common/i18n.service';
@@ -18,6 +18,7 @@ import { WriteStatusComponent } from 'xforge-common/write-status/write-status.co
 import { ParatextService } from '../core/paratext.service';
 import { SFProjectService } from '../core/sf-project.service';
 import { BuildDto } from '../machine-api/build-dto';
+import { JsonViewerComponent } from '../shared/json-viewer/json-viewer.component';
 import { MobileNotSupportedComponent } from '../shared/mobile-not-supported/mobile-not-supported.component';
 import { NoticeComponent } from '../shared/notice/notice.component';
 import { SharedModule } from '../shared/shared.module';
@@ -56,7 +57,8 @@ function projectType(project: TranslateSource | SFProjectProfile): string {
     UICommonModule,
     DraftInformationComponent,
     MobileNotSupportedComponent,
-    WriteStatusComponent
+    WriteStatusComponent,
+    JsonViewerComponent
   ]
 })
 export class ServalProjectComponent extends DataLoadingComponent implements OnInit {
@@ -84,6 +86,7 @@ export class ServalProjectComponent extends DataLoadingComponent implements OnIn
   draftConfig: Object | undefined;
   draftJob$: Observable<BuildDto | undefined> = new Observable<BuildDto | undefined>();
   lastCompletedBuild: BuildDto | undefined;
+  rawLastCompletedBuild: any;
   zipSubscription: Subscription | undefined;
 
   constructor(
@@ -204,8 +207,11 @@ export class ServalProjectComponent extends DataLoadingComponent implements OnIn
         }),
         quietTakeUntilDestroyed(this.destroyRef)
       )
-      .subscribe((build: BuildDto | undefined) => {
+      .subscribe(async (build: BuildDto | undefined) => {
         this.lastCompletedBuild = build;
+        if (build?.id != null) {
+          this.rawLastCompletedBuild = await firstValueFrom(this.draftGenerationService.getRawBuild(build.id));
+        }
       });
   }
 
@@ -288,23 +294,6 @@ export class ServalProjectComponent extends DataLoadingComponent implements OnIn
     this.checkUpdateStatus(updateTaskPromise);
   }
 
-  keys(obj: Object): string[] {
-    return Object.keys(obj);
-  }
-
-  stringify(value: any): string {
-    if (Array.isArray(value)) {
-      return this.arrayToString(value);
-    }
-    return JSON.stringify(value, (_key, value) => (Array.isArray(value) ? this.arrayToString(value) : value), 2);
-  }
-
-  arrayToString(value: any): string {
-    const isObject = typeof value[0] === 'object';
-    const contents = isObject ? value.map(x => this.stringify(x)).join(', ') : value.join(', ');
-    return '[' + contents + ']';
-  }
-
   private checkUpdateStatus(updatePromise: Promise<void>): void {
     this.updateState = ElementState.Submitting;
     updatePromise

src/SIL.XForge.Scripture/ClientApp/src/app/shared/json-viewer/_json-viewer-theme.scss

@@ -0,0 +1,29 @@
+@use '@angular/material' as mat;
+
+@mixin color($theme) {
+  $is-dark: mat.get-theme-type($theme) == dark;
+
+  @if $is-dark {
+    --json-viewer-key-color: #9cdcfe; // Light blue for property names
+    --json-viewer-string-color: #ce9178; // Light orange for strings
+    --json-viewer-number-color: #b5cea8; // Light green for numbers
+    --json-viewer-boolean-color: #569cd6; // Medium blue for booleans
+    --json-viewer-null-color: #808080; // Gray for null
+    --json-viewer-brace-color: #d4d4d4; // Light gray for braces/brackets
+    --json-viewer-punctuation-color: #cccccc; // Light gray for colons/commas
+  } @else {
+    --json-viewer-key-color: #0451a5; // Blue for property names
+    --json-viewer-string-color: #a31515; // Red for strings
+    --json-viewer-number-color: #098658; // Green for numbers
+    --json-viewer-boolean-color: #0000ff; // Blue for booleans
+    --json-viewer-null-color: #808080; // Gray for null
+    --json-viewer-brace-color: #000000; // Black for braces/brackets
+    --json-viewer-punctuation-color: #808080; // Gray for colons/commas
+  }
+}
+
+@mixin theme($theme) {
+  @if mat.theme-has($theme, color) {
+    @include color($theme);
+  }
+}

src/SIL.XForge.Scripture/ClientApp/src/app/shared/json-viewer/json-viewer.component.html

@@ -0,0 +1,43 @@
+@for (token of tokens; track $index) {
+  @switch (token.type) {
+    @case ("indent") {
+      <span class="json-indent">{{ token.value }}</span>
+    }
+    @case ("key") {
+      <span class="json-key">{{ token.value }}</span>
+    }
+    @case ("colon") {
+      <span class="json-colon">{{ token.value }} </span>
+    }
+    @case ("string") {
+      <span class="json-string">{{ token.value }}</span>
+    }
+    @case ("number") {
+      <span class="json-number">{{ token.value }}</span>
+    }
+    @case ("boolean") {
+      <span class="json-boolean">{{ token.value }}</span>
+    }
+    @case ("null") {
+      <span class="json-null">{{ token.value }}</span>
+    }
+    @case ("brace-open") {
+      <span class="json-brace">{{ token.value }}</span>
+    }
+    @case ("brace-close") {
+      <span class="json-brace">{{ token.value }}</span>
+    }
+    @case ("bracket-open") {
+      <span class="json-bracket">{{ token.value }}</span>
+    }
+    @case ("bracket-close") {
+      <span class="json-bracket">{{ token.value }}</span>
+    }
+    @case ("comma") {
+      <span class="json-comma">{{ token.value }}</span>
+    }
+    @case ("newline") {
+      <br />
+    }
+  }
+}

src/SIL.XForge.Scripture/ClientApp/src/app/shared/json-viewer/json-viewer.component.scss

@@ -0,0 +1,48 @@
+:host {
+  display: block;
+  border-radius: 8px;
+  overflow-x: auto;
+  padding: 16px;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  white-space: nowrap;
+
+  // JSON syntax highlighting using CSS custom properties
+  .json-key {
+    color: var(--json-viewer-key-color);
+    font-weight: 500;
+  }
+
+  .json-string {
+    color: var(--json-viewer-string-color);
+  }
+
+  .json-number {
+    color: var(--json-viewer-number-color);
+  }
+
+  .json-boolean {
+    color: var(--json-viewer-boolean-color);
+  }
+
+  .json-null {
+    color: var(--json-viewer-null-color);
+    font-style: italic;
+  }
+
+  .json-brace,
+  .json-bracket {
+    color: var(--json-viewer-brace-color);
+    font-weight: 600;
+  }
+
+  .json-colon,
+  .json-comma {
+    color: var(--json-viewer-punctuation-color);
+  }
+
+  .json-indent {
+    white-space: pre;
+  }
+}