feat(ui): add collapse on step logs to lazy display on ui (close #3298)…

… (#3450) Signed-off-by: Benjamin Coenen <benjamin.coenen@corp.ovh.com>
ovh · Oct 12, 2018 · d08f3d6 · d08f3d6
1 parent 387f0ce
commit d08f3d6
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 12 deletions.
diff --git a/ui/src/app/views/workflow/run/node/pipeline/step/step.log.component.ts b/ui/src/app/views/workflow/run/node/pipeline/step/step.log.component.ts
@@ -1,5 +1,6 @@
 import {Component, ElementRef, Input, NgZone, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
+import {cloneDeep} from 'lodash';
 import {Subscription} from 'rxjs';
 import {environment} from '../../../../../../../environments/environment';
 import {Action} from '../../../../../../model/action.model';
@@ -71,10 +72,16 @@ export class WorkflowStepLogComponent implements OnInit, OnDestroy {
     workerSubscription: Subscription;
     queryParamsSubscription: Subscription;
     loading = true;
+    loadingMore = false;
     startExec: Date;
     doneExec: Date;
     duration: string;
     selectedLine: number;
+    splittedLogs: {lineNumber: number, value: string}[] = [];
+    splittedLogsToDisplay: {lineNumber: number, value: string}[] = [];
+    limitFrom: number;
+    limitTo: number;
+    basicView = false;
 
     zone: NgZone;
     _showLog = false;
@@ -154,6 +161,16 @@ export class WorkflowStepLogComponent implements OnInit, OnDestroy {
                     this.zone.run(() => {
                         if (build.step_logs) {
                             this.logs = build.step_logs;
+                            this.splittedLogs = this.getLogsSplitted().map((log, i) => ({lineNumber: i + 1, value: log}));
+                            this.splittedLogsToDisplay = cloneDeep(this.splittedLogs);
+
+                            if (this.splittedLogs.length > 1000 && !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;
+                            }
                         }
                         if (this.loading) {
                             this.loading = false;
@@ -206,17 +223,29 @@ export class WorkflowStepLogComponent implements OnInit, OnDestroy {
         this.showLog = !this.showLog;
     }
 
-    getLogs() {
+    getLogs(): string {
         if (this.logs && this.logs.val) {
             return ansi_up.ansi_to_html(this.logs.val);
         }
         return '';
     }
 
-    getLogsSplitted() {
+    getLogsSplitted(): string[] {
       return this.getLogs().split('\n');
     }
 
+    showAllLogs() {
+        this.loadingMore = true;
+        setTimeout(() => {
+            this.limitFrom = null;
+            if (this.splittedLogs.length > 3000) {
+                this.basicView = true;
+            }
+            this.splittedLogsToDisplay = this.splittedLogs;
+            this.loadingMore = false;
+        }, 0);
+    }
+
     generateLink(lineNumber: number) {
       let qps = Object.assign({}, this._route.snapshot.queryParams, {
         stageId: this.job.pipeline_stage_id,

diff --git a/ui/src/app/views/workflow/run/node/pipeline/step/step.log.html b/ui/src/app/views/workflow/run/node/pipeline/step/step.log.html
@@ -20,19 +20,23 @@
           </button>
         </div>
         <!-- Pay attention ! Don't write any spaces, tabs or line between <pre> and <table> -->
-        <pre *ngIf="!loading"><table class="ui very basic table">
+        <pre *ngIf="!loading && !basicView"><table class="ui very basic table">
             <tbody>
-              <ng-container *ngFor="let logLine of getLogsSplitted(); let index = index; let last = last;">
+              <ng-container *ngFor="let logLine of splittedLogsToDisplay; let index = index; let last = last;">
                 <tr
-                  [class.active]="selectedLine === index + 1"
-                  id="L{{job.pipeline_stage_id}}-{{job.pipeline_action_id}}-{{stepOrder}}-{{index + 1}}"
+                  [class.active]="selectedLine === logLine.lineNumber"
+                  id="L{{job.pipeline_stage_id}}-{{job.pipeline_action_id}}-{{stepOrder}}-{{logLine.lineNumber}}"
                   *ngIf="!last">
-                  <td class="number yellow right aligned pointing" (click)="generateLink(index + 1)">{{index + 1}}</td>
-                  <td [innerHTML]="logLine"></td>
+                  <td class="number yellow right aligned pointing" (click)="generateLink(logLine.lineNumber)">{{logLine.lineNumber}}</td>
+                  <td [innerHTML]="logLine.value"></td>
+                </tr>
+                <tr *ngIf="logLine.lineNumber === limitFrom" valign="middle" align="center" class="fold-log pointing" (click)="showAllLogs()">
+                    <td colspan="2"><hr class="mb20"><a *ngIf="!loadingMore"><i class="resize vertical icon"></i>{{'workflow_logs_all' | translate}}</a><div class="ui active centered inline loader" *ngIf="loadingMore"></div><hr></td>
                 </tr>
               </ng-container>
             </tbody>
           </table></pre>
+          <pre *ngIf="basicView && logs" class="ml10">{{logs.val}}</pre>
         <textarea class="fakeInput" name="fakeInput" #logsContent></textarea>
         <div class="ui active centered inline loader" *ngIf="loading"></div>
     </div>

diff --git a/ui/src/app/views/workflow/run/node/pipeline/step/step.log.scss b/ui/src/app/views/workflow/run/node/pipeline/step/step.log.scss
@@ -1,6 +1,13 @@
 @import "../../../../../../../common";
 
 $squareSize: 32px;
+$yellowLogs: #FFFF91;
+.mb20 {
+  margin-bottom: 20px;
+}
+.ml10 {
+  margin-left: 10px;
+}
 
 .logHeader {
   display:  flex;
@@ -23,15 +30,15 @@ $squareSize: 32px;
     padding-top: 6px;
     padding-left: 5px;
     font-weight: 600;
-    color: #FFFF91;
+    color: $yellowLogs;
   }
   .flags {
     height: $squareSize;
     padding-top: 6px;
     padding-left: 5px;
     padding-right: 5px;
     font-weight: 600;
-    color: #FFFF91;
+    color: $yellowLogs;
   }
   .stepWarn {
     display: inline;
@@ -51,7 +58,7 @@ $squareSize: 32px;
   padding-left: 0px;
 
   .yellow {
-    color: #FFFF91;
+    color: $yellowLogs;
   }
 
   .fakeInput {
@@ -80,10 +87,28 @@ $squareSize: 32px;
           background-color: #444 !important;
           color: inherit !important;
         }
+        &.fold-log {
+          height: 2.5em;
+          font-size: 2.5em;
+          font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+          a {
+            color: $yellowLogs;
+            opacity: 0.8;
+            &:hover {
+              opacity: 1;
+            }
+          }
+        }
       }
       td {
         padding-top: 1px;
         padding-bottom: 1px;
+        hr {
+          width: 50%;
+          border: 0;
+          height: 1px;
+          background-image: linear-gradient(to right, rgba(255, 255, 145, 0), rgba(255, 255, 145, 0.75), rgba(255, 255, 145, 0));
+        }
         &.number {
             width: 40px;
         }

diff --git a/ui/src/assets/i18n/en.json b/ui/src/assets/i18n/en.json
@@ -1004,6 +1004,7 @@
   "workflow_notification_list": "Notifications list",
   "workflow_notification_form": "Add a notification",
   "workflow_notification_copy": "Copy",
+  "workflow_logs_all": "Show all logs",
 
   "workflow_wizard_select_repo_man": "Select a repository manager",
   "workflow_wizard_select_repo": "Select a repository",

diff --git a/ui/src/assets/i18n/fr.json b/ui/src/assets/i18n/fr.json
@@ -672,7 +672,7 @@
   "scheduler_workflow_label": "Scheduler : ",
 
   "settings_tips": "Conseils",
-  
+
   "services": "services",
   "services_list": "CDS Services",
   "services_see_all": "Voir tous",
@@ -1004,6 +1004,7 @@
   "workflow_notification_list": "Liste des notifications",
   "workflow_notification_form": "Ajouter une notification",
   "workflow_notification_copy": "Copié",
+  "workflow_logs_all": "Afficher tous les logs",
 
   "workflow_wizard_select_repo_man": "Sélectionner un gestionnaire de dépôt",
   "workflow_wizard_select_repo": "Sélectionner un dépot",