Add pretty print on info/error

chutney-testing · Nov 29, 2023 · d422d9c · d422d9c
1 parent f16e80a
commit d422d9c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 44 deletions.
diff --git a/ui/src/app/modules/scenarios/components/execution/detail/execution.component.html b/ui/src/app/modules/scenarios/components/execution/detail/execution.component.html
@@ -110,7 +110,7 @@
                             </span>
                         </div>
                         <div class="align-self-center">
-                            <pre [class]="inOutCtxToggleClass(ctxVarsToggle)"><code [innerHTML]="entry.value | stringify | prettyPrint: true | safe: 'html'"></code></pre>
+                            <pre [class]="inOutCtxToggleClass(prettyPrintToggle)"><code [innerHTML]="entry.value | stringify | prettyPrint: true | safe: 'html'"></code></pre>
                         </div>
                     </div>
                 </div>
@@ -219,7 +219,7 @@
                                 </span>
                             </div>
                             <div class="align-self-center">
-                                <pre [class]="inOutCtxToggleClass(inputsToggle)"><code [innerHTML]="input.value | stringify | prettyPrint: true | safe: 'html'"></code></pre>
+                                <pre [class]="inOutCtxToggleClass(prettyPrintToggle)"><code [innerHTML]="input.value | stringify | prettyPrint: true | safe: 'html'"></code></pre>
                             </div>
                         </div>
                     </div>
@@ -230,13 +230,13 @@
             </ng-container>
             <ng-container *ngIf="step.information && step.information.length > 0">
                 <div class="infos" [ngClass]="{'d-none': !infosToggle}">
-                    <pre *rxFor="let info of step.information" class="step-info mb-0"
+                    <pre *rxFor="let info of step.information" class="step-info mb-0" [class]="inOutCtxToggleClass(prettyPrintToggle)"
                         [innerHTML]="((info | prettyPrint: true | thumbnail) | safe: 'html')">
                     </pre>
                 </div>
             </ng-container>
             <div *ngIf="step.errors && step.errors.length > 0" class="errors" [ngClass]="{'d-none': !errorsToggle}">
-                <pre *rxFor="let error of step.errors" class="step-error mb-0"
+                <pre *rxFor="let error of step.errors" class="step-error mb-0" [class]="inOutCtxToggleClass(prettyPrintToggle)"
                         [innerHTML]="((error | prettyPrint: true | thumbnail) | safe: 'html')">
                 </pre>
             </div>
@@ -255,7 +255,7 @@
                                 </span>
                             </div>
                             <div class="align-self-center">
-                                <pre [class]="inOutCtxToggleClass(outputsToggle)"><code [innerHTML]="output.value | stringify | prettyPrint: true | safe: 'html'"></code></pre>
+                                <pre [class]="inOutCtxToggleClass(prettyPrintToggle)"><code [innerHTML]="output.value | stringify | prettyPrint: true | safe: 'html'"></code></pre>
                             </div>
                         </div>
                     </div>

diff --git a/ui/src/app/modules/scenarios/components/execution/detail/execution.component.ts b/ui/src/app/modules/scenarios/components/execution/detail/execution.component.ts
@@ -389,62 +389,37 @@ export class ScenarioExecutionComponent implements OnInit, OnDestroy, AfterViewI
     }
 
     togglePayloads() {
-        this.toggleCtxVars();
-        this.toggleInputs(false);
-        this.toggleOutputs(false);
+        this.prettyPrintToggle = !this.prettyPrintToggle;
 
         timer(250).subscribe(() => this.setLefPanelHeight());
     }
 
     private inOutCtxToggle_onClass = 'm-0 text-wrap text-break';
     private inOutCtxToggle_offClass = 'm-0 d-block overflow-auto';
+    prettyPrintToggle = true;
     inOutCtxToggleClass(toggleValue: boolean): string {
         return toggleValue ? this.inOutCtxToggle_onClass : this.inOutCtxToggle_offClass;
     }
 
-    ctxVarsToggle = true;
-    private toggleCtxVars() {
-        this.ctxVarsToggle = !this.ctxVarsToggle;
-            this.querySelector('.ctx-var-raw pre').forEach(e => {
-                e.className = this.inOutCtxToggleClass(this.ctxVarsToggle);
-            });
-    }
-
     toggleInputsOutputs() {
-        this.toggleInputs(true);
-        this.toggleOutputs(true);
+        this.toggleInputs();
+        this.toggleOutputs();
     }
 
-    inputsToggle = true;
     inputsDNoneToggle = true;
-    private toggleInputs(dNone: boolean) {
-        if (dNone) {
-            this.inputsDNoneToggle = !this.inputsDNoneToggle;
-            this.querySelector('.report-raw .inputs').forEach(e => {
-                this.toggleDisplayNone(e, this.inputsDNoneToggle);
-            });
-        } else {
-            this.inputsToggle = !this.inputsToggle;
-            this.querySelector('.report-raw .inputs pre').forEach(e => {
-                e.className = this.inOutCtxToggleClass(this.inputsToggle);
-            });
-        }
+    private toggleInputs() {
+        this.inputsDNoneToggle = !this.inputsDNoneToggle;
+        this.querySelector('.report-raw .inputs').forEach(e => {
+            this.toggleDisplayNone(e, this.inputsDNoneToggle);
+        });
     }
 
-    outputsToggle = true;
     outputsDNoneToggle = true;
-    private toggleOutputs(dNone: boolean) {
-        if (dNone) {
-            this.outputsDNoneToggle = !this.outputsDNoneToggle;
-            this.querySelector('.report-raw .outputs').forEach(e => {
-                this.toggleDisplayNone(e, this.outputsDNoneToggle);
-            });
-        } else {
-            this.outputsToggle = !this.outputsToggle;
-            this.querySelector('.report-raw .outputs pre').forEach(e => {
-                e.className = this.inOutCtxToggleClass(this.outputsToggle);
-            });
-        }
+    private toggleOutputs() {
+        this.outputsDNoneToggle = !this.outputsDNoneToggle;
+        this.querySelector('.report-raw .outputs').forEach(e => {
+            this.toggleDisplayNone(e, this.outputsDNoneToggle);
+        });
     }
 
     toggleInfosErrors() {