Permalink
Browse files

feat(ui): progress bar

  • Loading branch information...
jkuri committed Aug 30, 2017
1 parent 24e0272 commit 110bf6ae121c43e1e17ff3e0cf371df661b51eee
@@ -13,6 +13,7 @@ import { AuthServiceProvider } from './services/auth.service';
import { EqualValidator } from './directives/equal-validator.directive';
import { SafeHtmlPipe } from './pipes/safe-html.pipe';
import { TimeDurationPipe } from './pipes/time-duration.pipe';
import { TimeDurationRawPipe } from './pipes/time-duration-raw.pipe';
import { ToTimePipe } from './pipes/to-time.pipe';
import { TimeToNowPipe } from './pipes/time-to-now.pipe';
import { AppComponent } from './app.component';
@@ -50,6 +51,7 @@ import { AppTeamComponent } from './components/app-team';
EqualValidator,
SafeHtmlPipe,
TimeDurationPipe,
TimeDurationRawPipe,
ToTimePipe,
TimeToNowPipe
],
@@ -1,9 +1,7 @@

<svg width="509px" height="509px" viewBox="0 0 509 509" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="stop-button" fill-rule="nonzero" fill="#FFFFFF">
<path d="M254.26,0 C113.845,0 0,113.845 0,254.26 C0,394.675 113.845,508.52 254.26,508.52 C394.675,508.52 508.52,394.675 508.52,254.26 C508.52,113.845 394.675,0 254.26,0 Z M254.26,476.737 C131.58,476.737 31.783,376.908 31.783,254.26 C31.783,131.58 131.58,31.783 254.26,31.783 C376.909,31.783 476.737,131.58 476.737,254.26 C476.737,376.908 376.908,476.737 254.26,476.737 Z" id="Shape"></path>
<path d="M317.825,158.912 L190.695,158.912 C173.151,158.912 158.913,173.151 158.913,190.694 L158.913,317.824 C158.913,335.368 173.152,349.607 190.695,349.607 L317.825,349.607 C335.369,349.607 349.608,335.368 349.608,317.824 L349.608,190.694 C349.607,173.151 335.369,158.912 317.825,158.912 Z" id="Shape"></path>
<svg width="76px" height="100px" viewBox="0 0 76 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-12.000000, 0.000000)" fill-rule="nonzero" fill="#FFFFFF">
<path d="M83.273,24.174 L82.921,24.174 C80.352,24.174 78.271,26.236 78.271,28.804 L76.603,49.676 C75.326,48.887 73.552,48.195 73.552,47.6 L73.552,15.004 C73.552,12.439 72.055,10.4 69.49,10.4 L69.137,10.4 C66.571,10.4 64.488,12.459 64.488,15.027 L62.825,45.168 C61.479,44.984 63.22,44.83 59.776,44.736 L59.776,5.357 C59.776,2.787 58.274,0.068 55.709,0.068 L55.358,0.068 C52.788,0.068 50.71,2.47 50.71,5.036 L49.043,44.575 C47.632,44.669 46.002,44.972 46.002,45.157 L46.002,10.868 C46.002,8.302 44.493,3.512 41.925,3.512 L41.575,3.512 C39.008,3.512 36.926,6.945 36.926,9.514 C36.926,9.514 35.441,58.575 33.677,59.933 C33.145,60.338 32.603,60.981 32.057,61.224 L21.782,41.933 C20.941,39.504 18.289,38.309 15.866,39.149 L15.532,39.306 C13.109,40.146 11.827,42.819 12.668,45.244 L23.726,74.109 C26.585,88.813 39.735,99.931 55.533,99.931 C72.97,99.931 86.883,86.399 87.59,69.434 C87.6,69.329 87.328,28.785 87.328,28.785 C87.328,26.217 85.841,24.174 83.273,24.174 Z" id="Shape"></path>
</g>
</g>
</svg>
@@ -122,14 +122,17 @@ <h1 class="bold">
<span class="version">{{ job.language_version }}</span>
</div>
</div>
<div class="column is-5">
<div class="column is-3">
<div class="icon-and-text">
<span class="icon script">
<img src="images/icons/computing-script.svg">
</span>
<span>{{ job.test_script }}</span>
</div>
</div>
<div class="column is-2">
<progress min="0" max="1" [value]="(job.start_time | timeDurationRaw) / job.lastRunTime" *ngIf="job?.status === 'running' && job?.lastRunTime"></progress>
</div>
<div class="column is-1">
<span class="job-time" *ngIf="job?.status === 'running'">{{ job.start_time | timeDuration }}</span>
<span class="job-time" *ngIf="job?.status === 'success' || job?.status === 'failed'">{{ job.end_time - job.start_time | toTime }}</span>
@@ -53,8 +53,6 @@ export class AppBuildDetailsComponent implements OnInit, OnDestroy {
this.loading = false;
this.build = build;

console.log(this.build);

if (this.build.data && this.build.data.ref && this.build.data.ref.startsWith('refs/tags')) {
this.tag = this.build.data.ref.replace('refs/tags/', '');
}
@@ -127,6 +125,16 @@ export class AppBuildDetailsComponent implements OnInit, OnDestroy {
if (this.previousRuntime && this.previousRuntime > this.totalTime) {
this.approximatelyRemainingTime = format(this.previousRuntime - this.totalTime, 'mm:ss');
}

this.build.jobs = this.build.jobs.map(job => {
const lastRun = job.runs && job.runs[job.runs.length - 1].end_time ?
job.runs[job.runs.length - 1] : job.runs[job.runs.length - 2];
if (lastRun) {
job.lastRunTime = lastRun.end_time - lastRun.start_time;
}

return job;
});
}

getBuildStatus(): string {
@@ -91,6 +91,7 @@ export class AppJobComponent implements OnInit, OnDestroy {
} else if (event.data == 'jobFailed') {
this.jobRun.status = 'failed';
this.jobRun.end_time = new Date().getTime();
this.previousRuntime = this.jobRun.end_time - this.jobRun.start_time;
}

this.setFavicon();
@@ -0,0 +1,50 @@
import { Pipe, ChangeDetectorRef } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { Observable } from 'rxjs/Observable';
import { SocketService } from '../services/socket.service';
import { format } from 'date-fns';

@Pipe({
name: 'timeDurationRaw',
pure: false
})
export class TimeDurationRawPipe extends AsyncPipe {
currentTime: number;
value: number;
timer: Observable<number>;

constructor(private ref: ChangeDetectorRef, private socket: SocketService) {
super(ref);
}

transform(obj: any, args?: any[]): any {
if (obj) {
this.value = obj;
if (!this.timer) {
this.timer = this.getTimer();
}

return super.transform(this.timer);
}
}

private getTimer(): Observable<number> {
this.syncTime();

return Observable
.interval(1000)
.startWith(0)
.map(() => {
if (this.currentTime) {
this.currentTime += 1000;
return this.currentTime - this.value;
} else {
return this.value;
}
});
}

private syncTime(): void {
this.currentTime = new Date().getTime() - this.socket.timeSyncDiff;
}
}
@@ -58,9 +58,9 @@

.button
height: 40px
background: linear-gradient(to bottom, #516173, #3A4857)
background-image: linear-gradient(-180deg, #516173 3%, #3B4857 98%)
font-family: $font-family-semibold
color: $color
color: $white
font-size: 14px
padding: 0 20px
text-align: center
@@ -116,12 +116,9 @@
background: linear-gradient(to bottom, #F7981C, #F76B1C)
border-color: #F7981C

&.dark
background: $background

&:hover
color: $white
background: linear-gradient(to bottom, #415061, #303D4C)
background-image: linear-gradient(-180deg, #415061 3%, #303D4C 98%)
border: 1px solid $border

&.green
@@ -139,10 +136,6 @@
background: linear-gradient(to bottom, #F09219, #E96012)
border-color: #F09219

&.dark
background: $background
box-shadow: 1px 2px 5px rgba($background, .7)

&.is-active
background: linear-gradient(to bottom, #354353, #232E3B)

@@ -266,3 +266,19 @@

.more-button-container
margin: 30px 0

progress
width: 100%
margin: 0 10px
height: 4px
border-radius: 10px

&::-webkit-progress-bar
background: #313D4F
border-radius: 10px
&::-webkit-progress-value
background-image: linear-gradient(-90deg, #FDC018 2%, #F8CF5D 98%);
border-radius: 10px
&::-moz-progress-bar
background-image: linear-gradient(-90deg, #FDC018 2%, #F8CF5D 98%);
border-radius: 10px
@@ -28,12 +28,3 @@ a

&:hover
color: $white

.progress-bar
border-radius: 4px

.is-success
&::-webkit-progress-value
background-color: $green
&::-moz-progress-bar
background-color: $green

0 comments on commit 110bf6a

Please sign in to comment.