Skip to content

Commit

Permalink
fix(ui): update ui accordingly
Browse files Browse the repository at this point in the history
  • Loading branch information
@jkuri
jkuri committed Aug 18, 2017
1 parent a032e35 commit 099406f
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 37 deletions.
53 changes: 33 additions & 20 deletions src/app/components/app-build-details/app-build-details.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,39 @@ <h2>{{ build?.message }}</h2>
<span name="time-left">approximately {{ approximatelyRemainingTime }} remaining</span>
</div>
</div>

<div *ngIf="build.runs && build.runs.length > 1" class="column is-12">
<hr/>
<div class="columns">
<div class="column is-12">
<div class="build-history-btn-container">
<span *ngIf="!showBuildHistory" (click)="showBuildHistory = true" class="build-history-btn">
Show build history
</span>
<span *ngIf="showBuildHistory" (click)="showBuildHistory = false" class="build-history-btn hide">
Hide build history
</span>
</div>
<div *ngIf="showBuildHistory" class="mtop-20">
<div class="columns list-item list-item-mini"
*ngFor="let run of build.runs; let i = index;"
[ngClass]="{ 'is-queued': run.status === 'queued', 'is-success': run.status === 'success', 'is-running': run.status === 'running', 'is-errored': run.status === 'failed' || !run.status }"
>
<div class="column is-4">
<span>{{ run.start_time | date:'dd.MM.yyyy hh:mm:ss' }}</span>
</div>
<div class="column is-4">
<span *ngIf="run.end_time">{{ run.end_time | date:'dd.MM.yyyy hh:mm:ss' }}</span>
</div>
<div class="column is-4">
<span *ngIf="run.status">{{ run.status.charAt(0).toUpperCase() + run.status.slice(1) }}</span>
<span *ngIf="!run.status">Cancelled</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -131,26 +164,6 @@ <h2>{{ build?.message }}</h2>
</div>
</div>
</div>
<div class="column is-12" *ngIf="build.runs && build.runs.length > 1">
<div class="build-top-container">
<div class="build-top-content">
<h1 class="bold">
<span>Previous Runs:</span>
</h1>
<hr/>
<div class="columns list-item"
*ngFor="let run of build.runs; let i = index;"
[ngClass]="{ 'is-queued': run.status === 'queued', 'is-success': run.status === 'success', 'is-running': run.status === 'running', 'is-errored': run.status === 'failed' }">
<div class="column is-4">
<span>{{ run.start_time | date:'dd MM yyyy hh:mm:ss' }} - {{ run.end_time | date:'dd MM yyyy hh:mm:ss' }}</span>
</div>
<div class="column is-8">
<span>{{ run.message }} ({{ run.sha}})</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down
51 changes: 34 additions & 17 deletions src/app/components/app-job/app-job.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,40 @@ <h2>{{ job?.build?.message }}</h2>
<progress class="progress is-small" [value]="expectedProgress" max="1">{{expectedProgress}}%</progress>
</div>
</div>

<div *ngIf="job.runs && job.runs.length > 1" class="column is-12">
<hr/>
<div class="columns">
<div class="column is-12">
<div class="build-history-btn-container">
<span *ngIf="!showBuildHistory" (click)="showBuildHistory = true" class="build-history-btn">
Show build history
</span>
<span *ngIf="showBuildHistory" (click)="showBuildHistory = false" class="build-history-btn hide">
Hide build history
</span>
</div>
<div *ngIf="showBuildHistory" class="mtop-20">
<div class="columns list-item list-item-mini"
*ngFor="let run of job.runs; let i = index;"
[ngClass]="{ 'is-queued': run.status === 'queued', 'is-success': run.status === 'success', 'is-running': run.status === 'running', 'is-errored': run.status === 'failed' || !run.status }"
>
<div class="column is-4">
<span>{{ run.start_time | date:'dd.MM.yyyy hh:mm:ss' }}</span>
</div>
<div class="column is-4">
<span *ngIf="run.end_time">{{ run.end_time | date:'dd.MM.yyyy hh:mm:ss' }}</span>
</div>
<div class="column is-4">
<span *ngIf="run.status">{{ run.status.charAt(0).toUpperCase() + run.status.slice(1) }}</span>
<span *ngIf="!run.status">Cancelled</span>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
Expand All @@ -104,23 +138,6 @@ <h2>{{ job?.build?.message }}</h2>
<div class="column is-12">
<app-terminal [data]="terminalInput" (outputData)="terminalOutput($event)" [options]="terminalOptions"></app-terminal>
</div>
<div class="column is-12" *ngIf="job.runs && job.runs.length > 1">
<div class="build-top-container">
<div class="build-top-content">
<h1 class="bold">
<span>Previous Runs:</span>
</h1>
<hr/>
<div class="columns list-item"
*ngFor="let run of job.runs; let i = index;"
[ngClass]="{ 'is-queued': run.status === 'queued', 'is-success': run.status === 'success', 'is-running': run.status === 'running', 'is-errored': run.status === 'failed' }">
<div class="column is-8">
<span>{{ run.start_time | date:'dd MM yyyy hh:mm:ss' }} - {{ run.end_time | date:'dd MM yyyy hh:mm:ss' }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down
19 changes: 19 additions & 0 deletions src/app/styles/build-details.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
border: 3px solid $divider
border-radius: 4px
margin-bottom: 30px
margin-top: 30px

&.green
border-bottom: 3px solid $green
Expand Down Expand Up @@ -123,3 +124,21 @@
padding: 5px 10px
border-radius: 4px
margin: 0 5px

.build-history-btn-container
display: flex
justify-content: flex-end

.build-history-btn
width: 180px
display: block
text-align: center
background: $green
margin: 0
border-radius: 5px
border: 1px solid $divider
padding: 5px 20px
cursor: pointer

&.hide
background: linear-gradient(to bottom, #F95359, #DD151C)
2 changes: 2 additions & 0 deletions src/app/styles/common.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,3 +76,5 @@ hr
&.blue
background: $blue

.mtop-20
margin-top: 20px
7 changes: 7 additions & 0 deletions src/app/styles/content.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,13 @@
border-radius: 3px
border: 1px solid $divider

&.list-item-mini
height: 30px

&:hover
cursor: default
background: linear-gradient(to bottom, $background, $background-secondary)

&.list-item-slim
height: 70px

Expand Down

0 comments on commit 099406f

Please sign in to comment.