Skip to content

Commit

Permalink
feat(ui): job details modifications and features
Browse files Browse the repository at this point in the history
  • Loading branch information
@jkuri
jkuri committed Jul 30, 2017
1 parent cc47f8b commit 714985f
Show file tree
Hide file tree
Showing 12 changed files with 141 additions and 63 deletions.
25 changes: 23 additions & 2 deletions src/api/process-manager.ts
View file
Expand Up @@ -317,7 +317,17 @@ export function restartJob(jobId: number): Promise<void> {
})
.then(() => queueJob(jobData.builds_id, jobData.id));
} else {
return dbJob.getJob(jobId).then(job => queueJob(job.builds_id, job.id));
console.log(jobId);
return dbJob.getJob(jobId).then(job => {
jobEvents.next({
type: 'process',
build_id: job.builds_id,
job_id: job.id,
data: 'jobRestarted'
});

return queueJob(job.builds_id, job.id);
});
}
});
}
Expand All @@ -343,8 +353,19 @@ export function stopJob(jobId: number): Promise<any> {
.then(() => killContainer(`${jobProcess.build_id}_${jobProcess.job_id}`).toPromise())
.then(() => resolve(jobProcess));
} else {
let job = null;
dbJob.updateJob({ id: jobId, end_time: new Date(), status: 'failed' })
.then(jobProcess => resolve(jobProcess));
.then(jobData => {
job = jobData;
jobEvents.next({
type: 'process',
build_id: job.builds_id,
job_id: job.id,
data: 'jobStopped'
});
})
.then(() => killContainer(`${job.builds_id}_${job.id}`).toPromise())
.then(() => resolve(job));
}
});
});
Expand Down
10 changes: 8 additions & 2 deletions src/api/socket.ts
View file
Expand Up @@ -101,10 +101,16 @@ export class SocketServer {
});
break;
case 'restartJob':
restartJob(parseInt(event.data.jobId, 10));
restartJob(parseInt(event.data.jobId, 10))
.then(() => {
conn.next({ type: 'jobRestarted', data: event.data.jobId });
});
break;
case 'stopJob':
stopJob(event.data.jobId);
stopJob(event.data.jobId)
.then(() => {
conn.next({ type: 'jobStopped', data: event.data.jobId });
});
break;
case 'subscribeToJobOutput':
getJobProcesses()
Expand Down
9 changes: 5 additions & 4 deletions src/app/components/app-build-details/app-build-details.component.html
View file
Expand Up @@ -15,7 +15,7 @@
<div class="columns is-multiline">
<div class="column is-10">
<h1 class="bold">
<span>{{ build?.head_full_name }}</span>
<span><a [routerLink]="['/repo', build?.repository.id]">{{ build?.head_full_name }}</a></span>
<span class="build-icon">
<img src="images/icons/clock.svg" *ngIf="status === 'queued'">
<img src="images/icons/flickr.svg" *ngIf="status === 'running'">
Expand All @@ -37,15 +37,16 @@ <h1 class="bold">

<hr/>

<div class="column is-4">
<div class="column is-3">
<h2>{{ build?.message }}</h2>
</div>
<div class="column is-2">
<div class="column is-3">
<p>
<span class="icon">
<img src="images/icons/git-commit.svg">
</span>
{{ build?.head_sha }}
<span *ngIf="build?.head_sha">{{ build?.head_sha.slice(0, 7) }}</span>
<span *ngIf="!build?.head_sha">{{ build?.sha.slice(0, 7) }}</span>
</p>
</div>
<div class="column is-4">
Expand Down
4 changes: 2 additions & 2 deletions src/app/components/app-builds/app-builds.component.html
View file
Expand Up @@ -65,9 +65,9 @@ <h1>Dashboard</h1>
<span>{{ build?.author }}</span>
</div>
<div class="column is-1">
{{ build?.totalTime }}
<span>{{ build?.totalTime }}</span>
</div>
<div class="column is-1">
<div class="column is-1 justify-end">
<span class="icon" (click)="restartBuild($event, build.id)" [class.disabled]="build.processingRequest">
<svg width="15px" height="14px" viewBox="0 0 15 14" 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">
Expand Down
96 changes: 57 additions & 39 deletions src/app/components/app-job/app-job.component.html
View file
Expand Up @@ -10,51 +10,69 @@
<div class="content">
<div class="columns is-multiline">
<div class="column is-12" *ngIf="job">
<div class="job-top-container">
<div class="job-top-content">
<div class="job-top-actions">
<div class="columns">
<div class="column is-1">
<span class="total-time">
<div class="build-top-container" [ngClass]="{ green: job?.status === 'success', yellow: job?.status === 'running', red: job?.status === 'failed' }">
<div class="build-top-content">
<div class="columns is-multiline">
<div class="column is-9">
<h1 class="bold">
<span><a [routerLink]="['/repo', job?.builds_id]">{{ job?.build.head_full_name }}</a></span>
<span class="build-icon">
<img src="images/icons/clock.svg" *ngIf="job?.status === 'queued'">
<img src="images/icons/flickr.svg" *ngIf="job?.status === 'running'">
<img src="images/icons/check-true.svg" *ngIf="job?.status === 'success'">
<img src="images/icons/check-false.svg" *ngIf="job?.status === 'failed'">
</span>
</h1>
</div>
<div class="column is-3 justify-end right-buttons-top">
<button class="button is-fullwidth" type="button" (click)="restartJob($event)" [disabled]="processing">
<div class="centered">
<span class="icon">
<img src="images/icons/clock.svg">
<img src="images/icons/restart.svg">
</span>
{{ job?.time }}
</span>
</div>
<div class="column is-8"></div>
<div class="column is-3">
<a class="button floated" [routerLink]="['/build', job.builds_id]">
<img src="images/icons/back.svg"> Back
</a>
<button class="button floated green" type="button" (click)="restartJob()">
<img src="images/icons/sync.svg">
Restart
</button>
<button class="button floated red" type="button" (click)="stopJob()" [disabled]="job.status !== 'running'">
<img src="images/icons/stop.svg">
Stop
</button>
</div>
<span>Restart</span>
</div>
</button>
<button class="button is-fullwidth" type="button" (click)="stopJob($event)" [class.is-hidden]="job.status !== 'running'" [disabled]="processing">
<div class="centered">
<span class="icon">
<img src="images/icons/stop.svg">
</span>
<span>Stop</span>
</div>
</button>
</div>
</div>
<div class="columns">
<div class="column is-1">
<span class="build-icon">
<img src="images/icons/clock.svg" *ngIf="job.status === 'queued'">
<img class="loading-img" src="images/icons/flickr.svg" *ngIf="job.status === 'running'">
<img src="images/icons/check-true.svg" *ngIf="job.status === 'success'">
<img src="images/icons/check-false.svg" *ngIf="job.status === 'failed'">
</span>

<hr/>

<div class="column is-3">
<h2>{{ job?.build.message }}</h2>
</div>
<div class="column is-3">
<p>
<span class="icon">
<img src="images/icons/git-commit.svg">
</span>
<span *ngIf="job?.build.head_sha">{{ job?.build.head_sha.slice(0, 7) }}</span>
<span *ngIf="!job?.build.head_sha">{{ job?.build.sha.slice(0, 7) }}</span>
</p>
</div>
<div class="column is-10">
<h2 class="bold">{{ job?.build.head_full_name }}</h2>
<div class="column is-4">
<p>
<span>{{ job?.build.head_sha }}</span>
<span class="bold">{{ job?.build.message }}</span>
<span>{{ job?.build.author }} authored and commited {{ timeWords }} ago.</span>
<span class="icon">
<img [src]="job?.build.head_user_avatar_url" class="avatar-img">
</span>
<span>{{ job?.build.author }} commited {{ timeWords }} ago</span>
</p>
</div>
<div class="column is-2">
<p class="total-time">
<span class="icon">
<img src="images/icons/clock.svg">
</span>
<span>{{ job?.time }}</span>
</p>
</div>
<div class="column is-1"></div>
</div>
</div>
</div>
Expand Down
17 changes: 16 additions & 1 deletion src/app/components/app-job/app-job.component.ts
View file
Expand Up @@ -24,6 +24,7 @@ export class AppJobComponent implements OnInit, OnDestroy {
terminalOptions: { size: 'small' | 'large' };
terminalInput: any;
timeWords: string;
processing: boolean;

constructor(
private socketService: SocketService,
Expand Down Expand Up @@ -53,6 +54,10 @@ export class AppJobComponent implements OnInit, OnDestroy {
.subscribe(event => {
if (event.type === 'data') {
this.terminalInput = event.data;
} else if (event.type === 'jobStopped' && event.data === this.id) {
this.processing = false;
} else if (event.type === 'jobRestarted' && event.data === this.id) {
this.processing = false;
}
});

Expand Down Expand Up @@ -96,11 +101,21 @@ export class AppJobComponent implements OnInit, OnDestroy {
}
}

restartJob(): void {
restartJob(e: MouseEvent): void {
e.preventDefault();
e.stopPropagation();
this.terminalInput = { clear: true };
this.processing = true;
this.socketService.emit({ type: 'restartJob', data: { jobId: this.id } });
}

stopJob(e: MouseEvent): void {
e.preventDefault();
e.stopPropagation();
this.processing = true;
this.socketService.emit({ type: 'stopJob', data: { jobId: this.id } });
}

terminalOutput(e: any): void {
if (e === 'ready') {
this.terminalReady = true;
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/app-repositories/app-repositories.component.html
View file
Expand Up @@ -55,7 +55,7 @@ <h1>Repositories</h1>
</span>
<span>{{ repo.default_branch }}</span>
</div>
<div class="column is-2">
<div class="column is-2 justify-end">
<img [src]="repo.status_badge">
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/app/components/app-repository/app-repository.component.html
View file
Expand Up @@ -86,9 +86,9 @@ <h1>{{ repo?.full_name }}</h1>
<span>{{ build?.author }}</span>
</div>
<div class="column is-1">
{{ build?.totalTime }}
<span>{{ build?.totalTime }}</span>
</div>
<div class="column is-1">
<div class="column is-1 justify-end">
<span class="icon" (click)="restartBuild($event, build.id)" [class.disabled]="build.processingRequest">
<svg width="15px" height="14px" viewBox="0 0 15 14" 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">
Expand Down
6 changes: 5 additions & 1 deletion src/app/styles/build-details.sass
View file
@@ -1,5 +1,4 @@
.build-top-container
margin-top: 30px
width: 100%
border: 3px solid $divider
border-radius: 4px
Expand Down Expand Up @@ -89,3 +88,8 @@
img
width: 16px
height: 16px

.right-buttons-top

.button
margin-left: 10px
18 changes: 12 additions & 6 deletions src/app/styles/content.sass
View file
Expand Up @@ -122,8 +122,8 @@
margin-right: 20px

img
width: 30px
height: 30px
width: 16px
height: 16px

&.is-success
border-left: 10px solid $green
Expand All @@ -140,11 +140,13 @@
border-left: 10px solid $white

.icon
margin-right: 10px
margin-right: 5px
display: inline-flex
align-items: center

img, svg
width: 23px
height: 23px
width: 16px
height: 16px

g
fill: $white
Expand All @@ -161,7 +163,7 @@
width: 50px
height: 50px
border-radius: 50px
margin: 0 15px 0 10px
margin: 0 15px 0 5px

span
display: block
Expand Down Expand Up @@ -212,3 +214,7 @@
a
color: $white
text-decoration: underline

.justify-end
display: flex
justify-content: flex-end
7 changes: 7 additions & 0 deletions src/app/styles/overrides.sass
View file
Expand Up @@ -22,3 +22,10 @@ form

button[type="submit"]
margin-top: 10px

a
color: $white

&:hover
color: $white

6 changes: 3 additions & 3 deletions src/app/styles/repository.sass
View file
Expand Up @@ -15,11 +15,11 @@
float: left

img
width: 30px
height: 30px
width: 16px
height: 16px
display: block
float: left
margin-right: 10px
margin-right: 5px

a
color: $white
Expand Down

0 comments on commit 714985f

Please sign in to comment.