10000 feat(ui): add collapse on step logs to lazy display on ui (close #329… · ovh/cds@d08f3d6 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit d08f3d6

Browse files
bnjjjsguiheux
bnjjj
authored and
sguiheux
committed
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>
1 parent 387f0ce commit d08f3d6

File tree

5 files changed

+72
-12
lines changed

5 files changed

+72
-12
lines changed

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

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {Component, ElementRef, Input, NgZone, OnDestroy, OnInit, ViewChild} from '@angular/core';
22
import {ActivatedRoute, Router} from '@angular/router';
3+
import {cloneDeep} from 'lodash';
34
import {Subscription} from 'rxjs';
45
import {environment} from '../../../../../../../environments/environment';
56
import {Action} from '../../../../../../model/action.model';
@@ -71,10 +72,16 @@ export class WorkflowStepLogComponent implements OnInit, OnDestroy {
7172
workerSubscription: Subscription;
7273
queryParamsSubscription: Subscription;
7374
loading = true;
75+
loadingMore = false;
7476
startExec: Date;
7577
doneExec: Date;
7678
duration: string;
7779
selectedLine: number;
80+
splittedLogs: {lineNumber: number, value: string}[] = [];
81+
splittedLogsToDisplay: {lineNumber: number, value: string}[] = [];
82+
limitFrom: number;
83+
limitTo: number;
84+
basicView = false;
7885

7986
zone: NgZone;
8087
_showLog = false;
@@ -154,6 +161,16 @@ export class WorkflowStepLogComponent implements OnInit, OnDestroy {
154161
this.zone.run(() => {
155162
if (build.step_logs) {
156163
this.logs = build.step_logs;
164+
this.splittedLogs = this.getLogsSplitted().map((log, i) => ({lineNumber: i + 1, value: log}));
165+
this.splittedLogsToDisplay = cloneDeep(this.splittedLogs);
166+
167+
if (this.splittedLogs.length > 1000 && !this._route.snapshot.fragment) {
168+
this.limitFrom = 30;
169+
this.limitTo = this.splittedLogs.length - 40;
170+
this.splittedLogsToDisplay.splice(this.limitFrom, this.limitTo - this.limitFrom);
171+
} else {
172+
this.splittedLogsToDisplay = this.splittedLogs;
173+
}
157174
}
158175
if (this.loading) {
159176
this.loading = false;
@@ -206,17 +223,29 @@ export class WorkflowStepLogComponent implements OnInit, OnDestroy {
206223
this.showLog = !this.showLog;
207224
}
208225

209-
getLogs() {
226+
getLogs(): string {
210227
if (this.logs && this.logs.val) {
211228
return ansi_up.ansi_to_html(this.logs.val);
212229
}
213230
return '';
214231
}
215232

216-
getLogsSplitted() {
233+
getLogsSplitted(): string[] {
217234
return this.getLogs().split('\n');
218235
}
219236

237+
showAllLogs() {
238+
this.loadingMore = true;
239+
setTimeout(() => {
240+
this.limitFrom = null;
241+
if (this.splittedLogs.length > 3000) {
242+
this.basicView = true;
243+
}
244+
this.splittedLogsToDisplay = this.splittedLogs;
245+
this.loadingMore = false;
246+
}, 0);
247+
}
248+
220249
generateLink(lineNumber: number) {
221250
let qps = Object.assign({}, this._route.snapshot.queryParams, {
222251
stageId: this.job.pipeline_stage_id,

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

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,23 @@
2020
</button>
2121
</div>
2222
<!-- Pay attention ! Don't write any spaces, tabs or line between <pre> and <table> -->
23-
<pre *ngIf="!loading"><table class="ui very basic table">
23+
<pre *ngIf="!loading && !basicView"><table class="ui very basic table">
2424
<tbody>
25-
<ng-container *ngFor="let logLine of getLogsSplitted(); let index = index; let last = last;">
25+
<ng-container *ngFor="let logLine of splittedLogsToDisplay; let index = index; let last = last;">
2626
<tr
27-
[class.active]="selectedLine === index + 1"
28-
id="L{{job.pipeline_stage_id}}-{{job.pipeline_action_id}}-{{stepOrder}}-{{index + 1}}"
27+
[class.active]="selectedLine === logLine.lineNumber"
28+
id="L{{job.pipeline_stage_id}}-{{job.pipeline_action_id}}-{{stepOrder}}-{{logLine.lineNumber}}"
2929
*ngIf="!last">
30-
<td class="number yellow right aligned pointing" (click)="generateLink(index + 1)">{{index + 1}}</td>
31-
<td [innerHTML]="logLine"></td>
30+
<td class="number yellow right aligned pointing" (click)="generateLink(logLine.lineNumber)">{{logLine.lineNumber}}</td>
31+
<td [innerHTML]="logLine.value"></td>
32+
</tr>
33+
<tr *ngIf="logLine.lineNumber === limitFrom" valign="middle" align="center" class="fold-log pointing" (click)="showAllLogs()">
34+
<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>
3235
</tr>
3336
</ng-container>
3437
</tbody>
3538
</table></pre>
39+
<pre *ngIf="basicView && logs" class="ml10">{{logs.val}}</pre>
3640
<textarea class="fakeInput" name="fakeInput" #logsContent></textarea>
3741
<div class="ui active centered inline loader" *ngIf="loading"></div>
3842
</div>

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

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
@import "../../../../../../../common";
22

33
$squareSize: 32px;
4+
$yellowLogs: #FFFF91;
5+
.mb20 {
6+
margin-bottom: 20px;
7+
}
8+
.ml10 {
9+
margin-left: 10px;
10+
}
411

512
.logHeader {
613
display: flex;
@@ -23,15 +30,15 @@ $squareSize: 32px;
2330
padding-top: 6px;
2431
padding-left: 5px;
2532
font-weight: 600;
26-
color: #FFFF91;
33+
color: $yellowLogs;
2734
}
2835
.flags {
2936
height: $squareSize;
3037
padding-top: 6px;
3138
padding-left: 5px;
3239
padding-right: 5px;
3340
font-weight: 600;
34-
color: #FFFF91;
41+
color: $yellowLogs;
3542
}
3643
.stepWarn {
3744
display: inline;
@@ -51,7 +58,7 @@ $squareSize: 32px;
5158
padding-left: 0px;
5259

5360
.yellow {
54-
color: #FFFF91;
61+
color: $yellowLogs;
5562
}
5663

5764
.fakeInput {
@@ -80,10 +87,28 @@ $squareSize: 32px;
8087
background-color: #444 !important;
8188
< 10000 span class="pl-c1">color: inherit !important;
8289
}
90+
&.fold-log {
91+
height: 2.5em;
92+
font-size: 2.5em;
93+
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
94+
a {
95+
color: $yellowLogs;
96+
opacity: 0.8;
97+
&:hover {
98+
opacity: 1;
99+
}
100+
}
101+
}
83102
}
84103
td {
85104
padding-top: 1px;
86105
padding-bottom: 1px;
106+
hr {
107+
width: 50%;
108+
border: 0;
109+
height: 1px;
110+
background-image: linear-gradient(to right, rgba(255, 255, 145, 0), rgba(255, 255, 145, 0.75), rgba(255, 255, 145, 0));
111+
}
87112
&.number {
88113
width: 40px;
89114
}

‎ui/src/assets/i18n/en.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1004,6 +1004,7 @@
10041004
"workflow_notification_list": "Notifications list",
10051005
"workflow_notification_form": "Add a notification",
10061006
"workflow_notification_copy": "Copy",
1007+
"workflow_logs_all": "Show all logs",
10071008

10081009
"workflow_wizard_select_repo_man": "Select a repository manager",
10091010
"workflow_wizard_select_repo": "Select a repository",

‎ui/src/assets/i18n/fr.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -672,7 +672,7 @@
672672
"scheduler_workflow_label": "Scheduler : ",
673673

674674
"settings_tips": "Conseils",
675-
675+
676676
"services": "services",
677677
"services_list": "CDS Services",
678678
"services_see_all": "Voir tous",
@@ -1004,6 +1004,7 @@
10041004
"workflow_notification_list": "Liste des notifications",
10051005
"workflow_notification_form": "Ajouter une notification",
10061006
"workflow_notification_copy": "Copié",
1007+
"workflow_logs_all": "Afficher tous les logs",
10071008

10081009
"workflow_wizard_select_repo_man": "Sélectionner un gestionnaire de dépôt",
10091010
"workflow_wizard_select_repo": "Sélectionner un dépot",

0 commit comments

Comments
 (0)
0