feat(build-details): stop build functionality

bleenco · Aug 20, 2017 · be5b65a · be5b65a
1 parent 5bc19b6
commit be5b65a
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 27 deletions.
diff --git a/src/app/components/app-build-details/app-build-details.component.html b/src/app/components/app-build-details/app-build-details.component.html
@@ -13,7 +13,7 @@
             <div class="build-top-container" [ngClass]="{ green: status === 'success', yellow: status === 'running', red: status === 'failed' }">
               <div class="build-top-content">
                 <div class="columns is-multiline">
-                  <div class="column is-10">
+                  <div class="column is-8">
                     <h1 class="bold">
                       <span><a [routerLink]="['/repo', build?.data?.repository.id]">{{ build?.data?.repository.full_name }}</a></span>
                       <span class="build-icon">
@@ -25,7 +25,7 @@ <h1 class="bold">
                     </h1>
                   </div>
                   <div class="column is-2">
-                    <button class="button is-fullwidth" name="restart-build" type="button" (click)="restartBuild($event, build.id)" [disabled]="processingBuild">
+                    <button class="button is-fullwidth dark" name="restart-build" type="button" (click)="restartBuild($event, build.id)" [disabled]="processingBuild">
                       <div class="centered">
                         <span class="icon">
                           <img src="images/icons/restart.svg">
@@ -34,15 +34,20 @@ <h1 class="bold">
                       </div>
                     </button>
                   </div>
+                  <div class="column is-2">
+                    <button class="button is-fullwidth dark" name="stop-build" type="button" (click)="stopBuild($event, build.id)" [disabled]="processingBuild">
+                      <div class="centered">
+                        <span class="icon">
+                          <img src="images/icons/stop.svg">
+                        </span>
+                        <span>Stop Build</span>
+                      </div>
+                    </button>
+                  </div>
 
                   <hr/>
 
-                  <div class="column is-4">
-                    <h2 *ngIf="build?.data?.pull_request && !tag">{{ build?.data?.pull_request?.title }}</h2>
-                    <h2 *ngIf="!build?.data?.pull_request && !tag">{{ build?.data?.commits[build?.data?.commits.length - 1]?.message }}</h2>
-                    <h2 *ngIf="tag">{{ build?.data?.head_commit?.message }}</h2>
-                  </div>
-                  <div class="column is-2">
+                  <div class="column is-1">
                     <p>
                       <span class="icon">
                         <img src="images/icons/git-commit.svg">
@@ -51,7 +56,12 @@ <h2 *ngIf="tag">{{ build?.data?.head_commit?.message }}</h2>
                       <span *ngIf="!build?.data?.pull_request?.head?.sha">{{ build?.data?.after.slice(0, 7) }}</span>
                     </p>
                   </div>
-                  <div class="column is-3">
+                  <div class="column is-4">
+                    <p *ngIf="build?.data?.pull_request && !tag">{{ build?.data?.pull_request?.title }}</p>
+                    <p *ngIf="!build?.data?.pull_request && !tag">{{ build?.data?.commits[build?.data?.commits.length - 1]?.message }}</p>
+                    <p *ngIf="tag">{{ build?.data?.head_commit?.message }}</p>
+                  </div>
+                  <div class="column is-4">
                     <p>
                       <span class="icon">
                         <img [src]="build?.data?.sender?.avatar_url" class="avatar-img">
@@ -112,7 +122,7 @@ <h2 *ngIf="tag">{{ build?.data?.head_commit?.message }}</h2>
                 <span class="job-time">{{ job.time }}</span>
               </div>
               <div class="column is-1">
-                <span class="icon" name="restart-job" (click)="restartJob($event, job.id)">
+                <span class="icon" name="restart-job" (click)="restartJob($event, job.id)" [class.disabled]="job.processing">
                   <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">
                       <g id="icon" fill-rule="nonzero" fill="#FFFFFF">
@@ -121,7 +131,7 @@ <h2 *ngIf="tag">{{ build?.data?.head_commit?.message }}</h2>
                     </g>
                   </svg>
                 </span>
-                <span class="icon" name="stop-job" (click)="stopJob($event, job.id)">
+                <span class="icon" name="stop-job" (click)="stopJob($event, job.id)" [class.disabled]="job.processing">
                   <svg width="44px" height="44px" viewBox="0 0 44 44" 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="cancel-2" fill-rule="nonzero" fill="#FFFFFF">

diff --git a/src/app/components/app-build-details/app-build-details.component.ts b/src/app/components/app-build-details/app-build-details.component.ts
@@ -5,6 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { ApiService } from '../../services/api.service';
 import { SocketService } from '../../services/socket.service';
 import { distanceInWordsToNow, distanceInWordsStrict, format } from 'date-fns';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
   selector: 'app-build-details',
@@ -22,6 +23,8 @@ export class AppBuildDetailsComponent implements OnInit, OnDestroy {
   approximatelyRemainingTime: string;
   tag: string = null;
   updateInterval: any;
+  subStatus: Subscription;
+  sub: Subscription;
 
   constructor(
     private socketService: SocketService,
@@ -57,7 +60,7 @@ export class AppBuildDetailsComponent implements OnInit, OnDestroy {
         this.status = this.getBuildStatus();
         this.startUpdating();
 
-        this.socketService.outputEvents
+        this.subStatus = this.socketService.outputEvents
           .filter(event => event.type === 'process')
           .subscribe(event => {
             let index = this.build.jobs.findIndex(job => job.id === event.job_id);
@@ -76,11 +79,12 @@ export class AppBuildDetailsComponent implements OnInit, OnDestroy {
                 this.build.jobs[index].status = 'queued';
               }
 
+              this.build.jobs[index].processing = false;
               this.status = this.getBuildStatus();
             }
           });
 
-        this.socketService.outputEvents
+        this.sub = this.socketService.outputEvents
           .filter(event => event.type === 'buildRestarted' || event.type === 'buildStopped')
           .subscribe(event => {
             this.processingBuild = false;
@@ -90,6 +94,14 @@ export class AppBuildDetailsComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
+    if (this.sub) {
+      this.sub.unsubscribe();
+    }
+
+    if (this.subStatus) {
+      this.subStatus.unsubscribe();
+    }
+
     this.document.getElementById('favicon').setAttribute('href', 'images/favicon.png');
     this.titleService.setTitle('Abstruse CI');
     this.stopUpdating();
@@ -157,9 +169,9 @@ export class AppBuildDetailsComponent implements OnInit, OnDestroy {
       favicon = 'images/favicon.png';
     }
 
+    const name = this.build.repository.full_name;
     this.document.getElementById('favicon').setAttribute('href', favicon);
-    const titleStatus = status.charAt(0).toUpperCase() + status.slice(1);
-    this.titleService.setTitle(`Abstruse CI - Build ${titleStatus}`);
+    this.titleService.setTitle(`${name} - ${status}`);
 
     return status;
   }
@@ -168,13 +180,17 @@ export class AppBuildDetailsComponent implements OnInit, OnDestroy {
     e.preventDefault();
     e.stopPropagation();
 
+    const index = this.build.jobs.findIndex(job => job.id === jobId);
+    this.build.jobs[index].processing = true;
     this.socketService.emit({ type: 'restartJob', data: { jobId: jobId } });
   }
 
   stopJob(e: MouseEvent, jobId: number): void {
     e.preventDefault();
     e.stopPropagation();
 
+    const index = this.build.jobs.findIndex(job => job.id === jobId);
+    this.build.jobs[index].processing = true;
     this.socketService.emit({ type: 'stopJob', data: { jobId: jobId } });
   }
 

diff --git a/src/app/components/app-builds/app-builds.component.ts b/src/app/components/app-builds/app-builds.component.ts
@@ -13,6 +13,7 @@ export class AppBuildsComponent implements OnInit, OnDestroy {
   loading: boolean;
   fetching: boolean;
   hideMoreButton: boolean;
+  subAdded: Subscription;
   sub: Subscription;
   builds: any[];
   limit: number;
@@ -33,7 +34,7 @@ export class AppBuildsComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.fetch();
 
-    this.sub = this.socketService.outputEvents
+    this.subAdded = this.socketService.outputEvents
       .filter(x => x.type !== 'data')
       .subscribe(event => {
         if (!this.builds || !event.data) {
@@ -45,7 +46,7 @@ export class AppBuildsComponent implements OnInit, OnDestroy {
         }
       });
 
-    this.socketService.outputEvents
+    this.sub = this.socketService.outputEvents
       .filter(x => {
         x = x.data ? x.data.toString() : '';
         return x.startsWith('job');
@@ -85,7 +86,14 @@ export class AppBuildsComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.sub.unsubscribe();
+    if (this.subAdded) {
+      this.subAdded.unsubscribe();
+    }
+
+    if (this.sub) {
+      this.sub.unsubscribe();
+    }
+
     this.stopUpdating();
   }
 

diff --git a/src/app/components/app-job/app-job.component.html b/src/app/components/app-job/app-job.component.html
@@ -54,11 +54,11 @@ <h1 class="bold">
                   <hr/>
 
                   <div class="column is-4">
-                    <h2 *ngIf="job?.build?.data?.pull_request && !tag">{{ build?.job?.data?.pull_request?.title }}</h2>
-                    <h2 *ngIf="!job?.build?.data?.pull_request && !tag">{{ build?.job?.data?.commits[build?.data?.commits.length - 1]?.message }}</h2>
+                    <h2 *ngIf="job?.build?.data?.pull_request && !tag">{{ job?.build?.data?.pull_request?.title }}</h2>
+                    <h2 *ngIf="!job?.build?.data?.pull_request && !tag">{{ job?.build?.data?.commits[job?.build?.data?.commits.length - 1]?.message }}</h2>
                     <h2 *ngIf="tag">{{ job?.build?.data?.head_commit?.message }}</h2>
                   </div>
-                  <div class="column is-2">
+                  <div class="column is-1">
                     <p>
                       <span class="icon">
                         <img src="images/icons/git-commit.svg">
@@ -67,7 +67,7 @@ <h2 *ngIf="tag">{{ job?.build?.data?.head_commit?.message }}</h2>
                       <span *ngIf="!job?.build?.data?.pull_request">{{ job?.build?.data?.after.slice(0, 7) }}</span>
                     </p>
                   </div>
-                  <div class="column is-3">
+                  <div class="column is-4">
                     <p>
                       <span class="icon">
                         <img [src]="job?.build?.data?.sender?.avatar_url" class="avatar-img">

diff --git a/src/app/components/app-job/app-job.component.ts b/src/app/components/app-job/app-job.component.ts
@@ -117,8 +117,14 @@ export class AppJobComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.termSub.unsubscribe();
-    this.sub.unsubscribe();
+    if (this.termSub) {
+      this.termSub.unsubscribe();
+    }
+
+    if (this.sub) {
+      this.sub.unsubscribe();
+    }
+
     this.document.getElementById('favicon').setAttribute('href', 'images/favicon.png');
     this.titleService.setTitle('Abstruse CI');
   }
@@ -145,8 +151,9 @@ export class AppJobComponent implements OnInit, OnDestroy {
       default: favicon = 'images/favicon.png'; break;
     }
 
-    const status = this.jobRun.status.charAt(0).toUpperCase() + this.jobRun.status.slice(1);
-    this.titleService.setTitle(`Abstruse CI - Job ${status}`);
+    const name = this.job.build.repository.full_name;
+    const status = this.jobRun.status;
+    this.titleService.setTitle(`${name} - ${status}`);
     this.document.getElementById('favicon').setAttribute('href', favicon);
   }
 

diff --git a/src/app/styles/build-details.sass b/src/app/styles/build-details.sass
@@ -16,7 +16,7 @@
 
   .build-top-content
     padding: 20px
-    background: linear-gradient(to bottom, $background, $background-secondary)
+    background: $background-secondary
 
     .ssh
       padding: 5px 10px