fix(ui): logs not displayed when count of lines too long (#5130)

Author: richardlt

ui/src/app/views/workflow/run/node/pipeline/spawninfo/spawninfo.scss

@@ -1,6 +1,6 @@
 @import "../../../../../../../common";
 
-$squareSize: 32px;
+$squareSize: 30px;
 
 .header {
   display:  flex;
@@ -41,12 +41,14 @@ $squareSize: 32px;
   background-color: #222;
   color: white;
   clear: both;
-  padding: 10px $squareSize 10px $squareSize;
+  padding: 10px 20px 10px 20px;
 
   pre {
     font-size: 0.8em;
     line-height: 1.1em;
     max-height: 300px;
     overflow-y: auto;
+    margin-top: 0px;
+    margin-bottom: 0px;
   }
 }

ui/src/app/views/workflow/run/node/pipeline/step/step.log.component.ts

@@ -22,6 +22,7 @@ import { DurationService } from 'app/shared/duration/duration.service';
 import { CDSWebWorker } from 'app/shared/worker/web.worker';
 import { ProjectState } from 'app/store/project.state';
 import { WorkflowState, WorkflowStateModel } from 'app/store/workflow.state';
+import cloneDeep from 'lodash-es/cloneDeep';
 import { Observable, Subscription } from 'rxjs';
 
 @Component({
@@ -56,7 +57,7 @@ export class WorkflowStepLogComponent implements OnInit, OnDestroy {
     doneExec: Date;
     duration: string;
     selectedLine: number;
-    splittedLogs: { lineNumber: number, value: string }[] = [];
+    splittedLogs: { lineNumber: number, value: string }[];
     splittedLogsToDisplay: { lineNumber: number, value: string }[] = [];
     limitFrom: number;
     limitTo: number;
@@ -117,7 +118,7 @@ export class WorkflowStepLogComponent implements OnInit, OnDestroy {
                 if (nrj.job.step_status && nrj.job.step_status.length >= this.stepOrder + 1) {
                     let status = nrj.job.step_status[this.stepOrder].status;
                     if (!this.stepStatus || status !== this.stepStatus.status) {
-                        if (!this.stepStatus ) {
+                        if (!this.stepStatus) {
                             this.initWorker();
                             this.showLogs = true;
                         } else if (this.pipelineBuildStatusEnum.isActive(this.stepStatus.status) &&
@@ -231,7 +232,7 @@ export class WorkflowStepLogComponent implements OnInit, OnDestroy {
 
     parseLogs() {
         let tmpLogs = this.getLogsSplitted();
-        if ( (!this.splittedLogs && !tmpLogs) || (this.splittedLogs && tmpLogs && this.splittedLogs.length === tmpLogs.length)) {
+        if ((!this.splittedLogs && !tmpLogs) || (this.splittedLogs && tmpLogs && this.splittedLogs.length === tmpLogs.length)) {
             return;
         }
         if (!this.splittedLogs || this.splittedLogs.length > tmpLogs.length) {
@@ -243,19 +244,20 @@ export class WorkflowStepLogComponent implements OnInit, OnDestroy {
             });
         } else {
             this.splittedLogs.push(...tmpLogs.slice(this.splittedLogs.length).map((log, i) => {
-                    if (this.ansiViewSelected) {
-                        return { lineNumber: this.splittedLogs.length + i, value: this.ansi_up.ansi_to_html(log) };
-                    }
-                    return { lineNumber: this.splittedLogs.length  + i, value: log };
+                if (this.ansiViewSelected) {
+                    return { lineNumber: this.splittedLogs.length + i + 1, value: this.ansi_up.ansi_to_html(log) };
+                }
+                return { lineNumber: this.splittedLogs.length + i + 1, value: log };
             }));
         }
-        if (!this.allLogsView && this.splittedLogs.length > this.MAX_PRETTY_LOGS_LINES && !this._route.snapshot.fragment) {
+
+        this.splittedLogsToDisplay = cloneDeep(this.splittedLogs);
+        if (!this.allLogsView && this.splittedLogsToDisplay.length > this.MAX_PRETTY_LOGS_LINES && !this._route.snapshot.fragment) {
             this.limitFrom = 30;
             this.limitTo = this.splittedLogs.length - 40;
             this.splittedLogsToDisplay.splice(this.limitFrom, this.limitTo - this.limitFrom);
-        } else {
-            this.splittedLogsToDisplay = this.splittedLogs;
         }
+
         this._cd.markForCheck();
     }
 
@@ -325,12 +327,13 @@ export class WorkflowStepLogComponent implements OnInit, OnDestroy {
     showAllLogs() {
         this.loadingMore = true;
         this.allLogsView = true;
+        this._cd.markForCheck();
         setTimeout(() => {
             this.limitFrom = null;
             if (this.splittedLogs.length > this.MAX_PRETTY_LOGS_LINES) {
                 this.basicView = true;
             }
-            this.splittedLogsToDisplay = this.splittedLogs;
+            this.splittedLogsToDisplay = cloneDeep(this.splittedLogs);
             this.loadingMore = false;
             this._cd.markForCheck();
         }, 0);

ui/src/app/views/workflow/run/node/pipeline/step/step.log.html

@@ -59,7 +59,7 @@
               </ng-container>
             </tbody>
           </table></pre>
-          <pre *ngIf="basicView && logs" class="ml50">{{logs.val}}</pre>
+          <pre *ngIf="basicView && logs">{{logs.val}}</pre>
         <textarea class="fakeInput" name="fakeInput" #logsContent></textarea>
         <div class="ui active centered inline loader" *ngIf="loading"></div>
     </div>

ui/src/app/views/workflow/run/node/pipeline/step/step.log.scss

@@ -5,9 +5,6 @@ $yellowLogs: #FFFF91;
 .mb25 {
   margin-bottom: 25px;
 }
-.ml50 {
-  margin-left: 50px;
-}
 
 .logHeader {
   display:  flex;
@@ -49,8 +46,7 @@ $yellowLogs: #FFFF91;
   background-color: #222;
   color: white;
   clear: both;
-  padding: 10px $squareSize 10px $squareSize;
-  padding-left: 0px;
+  padding: 10px;
   position: relative;
 
   .toolbar {