Skip to content

Commit 099406f

Browse files
jkurijkuri
committed
fix(ui): update ui accordingly
1 parent a032e35 commit 099406f

File tree

5 files changed

+95
-37
lines changed

5 files changed

+95
-37
lines changed

‎src/app/components/app-build-details/app-build-details.component.html‎

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,39 @@ <h2>{{ build?.message }}</h2>
7070
<span name="time-left">approximately {{ approximatelyRemainingTime }} remaining</span>
7171
</div>
7272
</div>
73+
74+
<div *ngIf="build.runs && build.runs.length > 1" class="column is-12">
75+
<hr/>
76+
<div class="columns">
77+
<div class="column is-12">
78+
<div class="build-history-btn-container">
79+
<span *ngIf="!showBuildHistory" (click)="showBuildHistory = true" class="build-history-btn">
80+
Show build history
81+
</span>
82+
<span *ngIf="showBuildHistory" (click)="showBuildHistory = false" class="build-history-btn hide">
83+
Hide build history
84+
</span>
85+
</div>
86+
<div *ngIf="showBuildHistory" class="mtop-20">
87+
<div class="columns list-item list-item-mini"
88+
*ngFor="let run of build.runs; let i = index;"
89+
[ngClass]="{ 'is-queued': run.status === 'queued', 'is-success': run.status === 'success', 'is-running': run.status === 'running', 'is-errored': run.status === 'failed' || !run.status }"
90+
>
91+
<div class="column is-4">
92+
<span>{{ run.start_time | date:'dd.MM.yyyy hh:mm:ss' }}</span>
93+
</div>
94+
<div class="column is-4">
95+
<span *ngIf="run.end_time">{{ run.end_time | date:'dd.MM.yyyy hh:mm:ss' }}</span>
96+
</div>
97+
<div class="column is-4">
98+
<span *ngIf="run.status">{{ run.status.charAt(0).toUpperCase() + run.status.slice(1) }}</span>
99+
<span *ngIf="!run.status">Cancelled</span>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
</div>
105+
</div>
73106
</div>
74107
</div>
75108
</div>
@@ -131,26 +164,6 @@ <h2>{{ build?.message }}</h2>
131164
</div>
132165
</div>
133166
</div>
134-
<div class="column is-12" *ngIf="build.runs && build.runs.length > 1">
135-
<div class="build-top-container">
136-
<div class="build-top-content">
137-
<h1 class="bold">
138-
<span>Previous Runs:</span>
139-
</h1>
140-
<hr/>
141-
<div class="columns list-item"
142-
*ngFor="let run of build.runs; let i = index;"
143-
[ngClass]="{ 'is-queued': run.status === 'queued', 'is-success': run.status === 'success', 'is-running': run.status === 'running', 'is-errored': run.status === 'failed' }">
144-
<div class="column is-4">
145-
<span>{{ run.start_time | date:'dd MM yyyy hh:mm:ss' }} - {{ run.end_time | date:'dd MM yyyy hh:mm:ss' }}</span>
146-
</div>
147-
<div class="column is-8">
148-
<span>{{ run.message }} ({{ run.sha}})</span>
149-
</div>
150-
</div>
151-
</div>
152-
</div>
153-
</div>
154167
</div>
155168
</div>
156169
</div>

‎src/app/components/app-job/app-job.component.html‎

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,40 @@ <h2>{{ job?.build?.message }}</h2>
8686
<progress class="progress is-small" [value]="expectedProgress" max="1">{{expectedProgress}}%</progress>
8787
</div>
8888
</div>
89+
90+
<div *ngIf="job.runs && job.runs.length > 1" class="column is-12">
91+
<hr/>
92+
<div class="columns">
93+
<div class="column is-12">
94+
<div class="build-history-btn-container">
95+
<span *ngIf="!showBuildHistory" (click)="showBuildHistory = true" class="build-history-btn">
96+
Show build history
97+
</span>
98+
<span *ngIf="showBuildHistory" (click)="showBuildHistory = false" class="build-history-btn hide">
99+
Hide build history
100+
</span>
101+
</div>
102+
<div *ngIf="showBuildHistory" class="mtop-20">
103+
<div class="columns list-item list-item-mini"
104+
*ngFor="let run of job.runs; let i = index;"
105+
[ngClass]="{ 'is-queued': run.status === 'queued', 'is-success': run.status === 'success', 'is-running': run.status === 'running', 'is-errored': run.status === 'failed' || !run.status }"
106+
>
107+
<div class="column is-4">
108+
<span>{{ run.start_time | date:'dd.MM.yyyy hh:mm:ss' }}</span>
109+
</div>
110+
<div class="column is-4">
111+
<span *ngIf="run.end_time">{{ run.end_time | date:'dd.MM.yyyy hh:mm:ss' }}</span>
112+
</div>
113+
<div class="column is-4">
114+
<span *ngIf="run.status">{{ run.status.charAt(0).toUpperCase() + run.status.slice(1) }}</span>
115+
<span *ngIf="!run.status">Cancelled</span>
116+
</div>
117+
</div>
118+
</div>
119+
</div>
120+
</div>
121+
</div>
122+
89123
</div>
90124
</div>
91125
</div>
@@ -104,23 +138,6 @@ <h2>{{ job?.build?.message }}</h2>
104138
<div class="column is-12">
105139
<app-terminal [data]="terminalInput" (outputData)="terminalOutput($event)" [options]="terminalOptions"></app-terminal>
106140
</div>
107-
<div class="column is-12" *ngIf="job.runs && job.runs.length > 1">
108-
<div class="build-top-container">
109-
<div class="build-top-content">
110-
<h1 class="bold">
111-
<span>Previous Runs:</span>
112-
</h1>
113-
<hr/>
114-
<div class="columns list-item"
115-
*ngFor="let run of job.runs; let i = index;"
116-
[ngClass]="{ 'is-queued': run.status === 'queued', 'is-success': run.status === 'success', 'is-running': run.status === 'running', 'is-errored': run.status === 'failed' }">
117-
<div class="column is-8">
118-
<span>{{ run.start_time | date:'dd MM yyyy hh:mm:ss' }} - {{ run.end_time | date:'dd MM yyyy hh:mm:ss' }}</span>
119-
</div>
120-
</div>
121-
</div>
122-
</div>
123-
</div>
124141
</div>
125142
</div>
126143
</div>

‎src/app/styles/build-details.sass‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
border: 3px solid $divider
44
border-radius: 4px
55
margin-bottom: 30px
6+
margin-top: 30px
67

78
&.green
89
border-bottom: 3px solid $green
@@ -123,3 +124,21 @@
123124
padding: 5px 10px
124125
border-radius: 4px
125126
margin: 0 5px
127+
128+
.build-history-btn-container
129+
display: flex
130+
justify-content: flex-end
131+
132+
.build-history-btn
133+
width: 180px
134+
display: block
135+
text-align: center
136+
background: $green
137+
margin: 0
138+
border-radius: 5px
139+
border: 1px solid $divider
140+
padding: 5px 20px
141+
cursor: pointer
142+
143+
&.hide
144+
background: linear-gradient(to bottom, #F95359, #DD151C)

‎src/app/styles/common.sass‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,3 +76,5 @@ hr
7676
&.blue
7777
background: $blue
7878

79+
.mtop-20
80+
margin-top: 20px

‎src/app/styles/content.sass‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,13 @@
8888
border-radius: 3px
8989
border: 1px solid $divider
9090

91+
&.list-item-mini
92+
height: 30px
93+
94+
&:hover
95+
cursor: default
96+
background: linear-gradient(to bottom, $background, $background-secondary)
97+
9198
&.list-item-slim
9299
height: 70px
93100

0 commit comments

Comments
 (0)