Skip to content

Commit 714985f

Browse files
jkurijkuri
committed
feat(ui): job details modifications and features
1 parent cc47f8b commit 714985f

File tree

12 files changed

+141
-63
lines changed

12 files changed

+141
-63
lines changed

‎src/api/process-manager.ts‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -317,7 +317,17 @@ export function restartJob(jobId: number): Promise<void> {
317317
})
318318
.then(() => queueJob(jobData.builds_id, jobData.id));
319319
} else {
320-
return dbJob.getJob(jobId).then(job => queueJob(job.builds_id, job.id));
320+
console.log(jobId);
321+
return dbJob.getJob(jobId).then(job => {
322+
jobEvents.next({
323+
type: 'process',
324+
build_id: job.builds_id,
325+
job_id: job.id,
326+
data: 'jobRestarted'
327+
});
328+
329+
return queueJob(job.builds_id, job.id);
330+
});
321331
}
322332
});
323333
}
@@ -343,8 +353,19 @@ export function stopJob(jobId: number): Promise<any> {
343353
.then(() => killContainer(`${jobProcess.build_id}_${jobProcess.job_id}`).toPromise())
344354
.then(() => resolve(jobProcess));
345355
} else {
356+
let job = null;
346357
dbJob.updateJob({ id: jobId, end_time: new Date(), status: 'failed' })
347-
.then(jobProcess => resolve(jobProcess));
358+
.then(jobData => {
359+
job = jobData;
360+
jobEvents.next({
361+
type: 'process',
362+
build_id: job.builds_id,
363+
job_id: job.id,
364+
data: 'jobStopped'
365+
});
366+
})
367+
.then(() => killContainer(`${job.builds_id}_${job.id}`).toPromise())
368+
.then(() => resolve(job));
348369
}
349370
});
350371
});

‎src/api/socket.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,10 +101,16 @@ export class SocketServer {
101101
});
102102
break;
103103
case 'restartJob':
104-
restartJob(parseInt(event.data.jobId, 10));
104+
restartJob(parseInt(event.data.jobId, 10))
105+
.then(() => {
106+
conn.next({ type: 'jobRestarted', data: event.data.jobId });
107+
});
105108
break;
106109
case 'stopJob':
107-
stopJob(event.data.jobId);
110+
stopJob(event.data.jobId)
111+
.then(() => {
112+
conn.next({ type: 'jobStopped', data: event.data.jobId });
113+
});
108114
break;
109115
case 'subscribeToJobOutput':
110116
getJobProcesses()

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<div class="columns is-multiline">
1616
<div class="column is-10">
1717
<h1 class="bold">
18-
<span>{{ build?.head_full_name }}</span>
18+
<span><a [routerLink]="['/repo', build?.repository.id]">{{ build?.head_full_name }}</a></span>
1919
<span class="build-icon">
2020
<img src="images/icons/clock.svg" *ngIf="status === 'queued'">
2121
<img src="images/icons/flickr.svg" *ngIf="status === 'running'">
@@ -37,15 +37,16 @@ <h1 class="bold">
3737

3838
<hr/>
3939

40-
<div class="column is-4">
40+
<div class="column is-3">
4141
<h2>{{ build?.message }}</h2>
4242
</div>
43-
<div class="column is-2">
43+
<div class="column is-3">
4444
<p>
4545
<span class="icon">
4646
<img src="images/icons/git-commit.svg">
4747
</span>
48-
{{ build?.head_sha }}
48+
<span *ngIf="build?.head_sha">{{ build?.head_sha.slice(0, 7) }}</span>
49+
<span *ngIf="!build?.head_sha">{{ build?.sha.slice(0, 7) }}</span>
4950
</p>
5051
</div>
5152
<div class="column is-4">

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,9 @@ <h1>Dashboard</h1>
6565
<span>{{ build?.author }}</span>
6666
</div>
6767
<div class="column is-1">
68-
{{ build?.totalTime }}
68+
<span>{{ build?.totalTime }}</span>
6969
</div>
70-
<div class="column is-1">
70+
<div class="column is-1 justify-end">
7171
<span class="icon" (click)="restartBuild($event, build.id)" [class.disabled]="build.processingRequest">
7272
<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">
7373
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

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

Lines changed: 57 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -10,51 +10,69 @@
1010
<div class="content">
1111
<div class="columns is-multiline">
1212
<div class="column is-12" *ngIf="job">
13-
<div class="job-top-container">
14-
<div class="job-top-content">
15-
<div class="job-top-actions">
16-
<div class="columns">
17-
<div class="column is-1">
18-
<span class="total-time">
13+
<div class="build-top-container" [ngClass]="{ green: job?.status === 'success', yellow: job?.status === 'running', red: job?.status === 'failed' }">
14+
<div class="build-top-content">
15+
<div class="columns is-multiline">
16+
<div class="column is-9">
17+
<h1 class="bold">
18+
<span><a [routerLink]="['/repo', job?.builds_id]">{{ job?.build.head_full_name }}</a></span>
19+
<span class="build-icon">
20+
<img src="images/icons/clock.svg" *ngIf="job?.status === 'queued'">
21+
<img src="images/icons/flickr.svg" *ngIf="job?.status === 'running'">
22+
<img src="images/icons/check-true.svg" *ngIf="job?.status === 'success'">
23+
<img src="images/icons/check-false.svg" *ngIf="job?.status === 'failed'">
24+
</span>
25+
</h1>
26+
</div>
27+
<div class="column is-3 justify-end right-buttons-top">
28+
<button class="button is-fullwidth" type="button" (click)="restartJob($event)" [disabled]="processing">
29+
<div class="centered">
1930
<span class="icon">
20-
<img src="images/icons/clock.svg">
31+
<img src="images/icons/restart.svg">
2132
</span>
22-
{{ job?.time }}
23-
</span>
24-
</div>
25-
<div class="column is-8"></div>
26-
<div class="column is-3">
27-
<a class="button floated" [routerLink]="['/build', job.builds_id]">
28-
<img src="images/icons/back.svg"> Back
29-
</a>
30-
<button class="button floated green" type="button" (click)="restartJob()">
31-
<img src="images/icons/sync.svg">
32-
Restart
33-
</button>
34-
<button class="button floated red" type="button" (click)="stopJob()" [disabled]="job.status !== 'running'">
35-
<img src="images/icons/stop.svg">
36-
Stop
37-
</button>
38-
</div>
33+
<span>Restart</span>
34+
</div>
35+
</button>
36+
<button class="button is-fullwidth" type="button" (click)="stopJob($event)" [class.is-hidden]="job.status !== 'running'" [disabled]="processing">
37+
<div class="centered">
38+
<span class="icon">
39+
<img src="images/icons/stop.svg">
40+
</span>
41+
<span>Stop</span>
42+
</div>
43+
</button>
3944
</div>
40-
</div>
41-
<div class="columns">
42-
<div class="column is-1">
43-
<span class="build-icon">
44-
<img src="images/icons/clock.svg" *ngIf="job.status === 'queued'">
45-
<img class="loading-img" src="images/icons/flickr.svg" *ngIf="job.status === 'running'">
46-
<img src="images/icons/check-true.svg" *ngIf="job.status === 'success'">
47-
<img src="images/icons/check-false.svg" *ngIf="job.status === 'failed'">
48-
</span>
45+
46+
<hr/>
47+
48+
<div class="column is-3">
49+
<h2>{{ job?.build.message }}</h2>
50+
</div>
51+
<div class="column is-3">
52+
<p>
53+
<span class="icon">
54+
<img src="images/icons/git-commit.svg">
55+
</span>
56+
<span *ngIf="job?.build.head_sha">{{ job?.build.head_sha.slice(0, 7) }}</span>
57+
<span *ngIf="!job?.build.head_sha">{{ job?.build.sha.slice(0, 7) }}</span>
58+
</p>
4959
</div>
50-
<div class="column is-10">
51-
<h2 class="bold">{{ job?.build.head_full_name }}</h2>
60+
<div class="column is-4">
5261
<p>
53-
<span>{{ job?.build.head_sha }}</span>
54-
<span class="bold">{{ job?.build.message }}</span>
55-
<span>{{ job?.build.author }} authored and commited {{ timeWords }} ago.</span>
62+
<span class="icon">
63+
<img [src]="job?.build.head_user_avatar_url" class="avatar-img">
64+
</span>
65+
<span>{{ job?.build.author }} commited {{ timeWords }} ago</span>
66+
</p>
67+
</div>
68+
<div class="column is-2">
69+
<p class="total-time">
70+
<span class="icon">
71+
<img src="images/icons/clock.svg">
72+
</span>
73+
<span>{{ job?.time }}</span>
74+
</p>
5675
</div>
57-
<div class="column is-1"></div>
5876
</div>
5977
</div>
6078
</div>

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

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export class AppJobComponent implements OnInit, OnDestroy {
2424
terminalOptions: { size: 'small' | 'large' };
2525
terminalInput: any;
2626
timeWords: string;
27+
processing: boolean;
2728

2829
constructor(
2930
private socketService: SocketService,
@@ -53,6 +54,10 @@ export class AppJobComponent implements OnInit, OnDestroy {
5354
.subscribe(event => {
5455
if (event.type === 'data') {
5556
this.terminalInput = event.data;
57+
} else if (event.type === 'jobStopped' && event.data === this.id) {
58+
this.processing = false;
59+
} else if (event.type === 'jobRestarted' && event.data === this.id) {
60+
this.processing = false;
5661
}
5762
});
5863

@@ -96,11 +101,21 @@ export class AppJobComponent implements OnInit, OnDestroy {
96101
}
97102
}
98103

99-
restartJob(): void {
104+
restartJob(e: MouseEvent): void {
105+
e.preventDefault();
106+
e.stopPropagation();
100107
this.terminalInput = { clear: true };
108+
this.processing = true;
101109
this.socketService.emit({ type: 'restartJob', data: { jobId: this.id } });
102110
}
103111

112+
stopJob(e: MouseEvent): void {
113+
e.preventDefault();
114+
e.stopPropagation();
115+
this.processing = true;
116+
this.socketService.emit({ type: 'stopJob', data: { jobId: this.id } });
117+
}
118+
104119
terminalOutput(e: any): void {
105120
if (e === 'ready') {
106121
this.terminalReady = true;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ <h1>Repositories</h1>
5555
</span>
5656
<span>{{ repo.default_branch }}</span>
5757
</div>
58-
<div class="column is-2">
58+
<div class="column is-2 justify-end">
5959
<img [src]="repo.status_badge">
6060
</div>
6161
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,9 +86,9 @@ <h1>{{ repo?.full_name }}</h1>
8686
<span>{{ build?.author }}</span>
8787
</div>
8888
<div class="column is-1">
89-
{{ build?.totalTime }}
89+
<span>{{ build?.totalTime }}</span>
9090
</div>
91-
<div class="column is-1">
91+
<div class="column is-1 justify-end">
9292
<span class="icon" (click)="restartBuild($event, build.id)" [class.disabled]="build.processingRequest">
9393
<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">
9494
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.build-top-container
2-
margin-top: 30px
32
width: 100%
43
border: 3px solid $divider
54
border-radius: 4px
@@ -89,3 +88,8 @@
8988
img
9089
width: 16px
9190
height: 16px
91+
92+
.right-buttons-top
93+
94+
.button
95+
margin-left: 10px

‎src/app/styles/content.sass‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -122,8 +122,8 @@
122122
margin-right: 20px
123123

124124
img
125-
width: 30px
126-
height: 30px
125+
width: 16px
126+
height: 16px
127127

128128
&.is-success
129129
border-left: 10px solid $green
@@ -140,11 +140,13 @@
140140
border-left: 10px solid $white
141141

142142
.icon
143-
margin-right: 10px
143+
margin-right: 5px
144+
display: inline-flex
145+
align-items: center
144146

145147
img, svg
146-
width: 23px
147-
height: 23px
148+
width: 16px
149+
height: 16px
148150

149151
g
150152
fill: $white
@@ -161,7 +163,7 @@
161163
width: 50px
162164
height: 50px
163165
border-radius: 50px
164-
margin: 0 15px 0 10px
166+
margin: 0 15px 0 5px
165167

166168
span
167169
display: block
@@ -212,3 +214,7 @@
212214
a
213215
color: $white
214216
text-decoration: underline
217+
218+
.justify-end
219+
display: flex
220+
justify-content: flex-end

0 commit comments

Comments
 (0)