fix(hotfix): fix build item functionality

Author: jkuri

src/app/components/app-build-item/app-build-item.component.html

@@ -25,7 +25,7 @@
     <span class="build-time">{{ build?.totalTime }}</span>
   </div>
   <div class="column is-1 justify-end">
-    <span class="icon restart-build" (click)="restartBuild($event, build.id)" [class.disabled]="build.processingRequest">
+    <span class="icon restart-build" (click)="restartBuild($event, build.id)" [class.disabled]="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">
           <g id="icon" fill-rule="nonzero" fill="#FFFFFF">
@@ -34,7 +34,7 @@
         </g>
       </svg>
     </span>
-    <span class="icon stop-build" (click)="stopBuild($event, build.id)" [class.disabled]="build.processingRequest">
+    <span class="icon stop-build" (click)="stopBuild($event, build.id)" [class.disabled]="processingRequest">
       <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">

src/app/components/app-build-item/app-build-item.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input, HostBinding } from '@angular/core';
+import { Component, Input, HostBinding, OnInit } from '@angular/core';
+import { SocketService } from '../../services/socket.service';
 
 @Component({
   selector: 'app-build-item',
@@ -7,4 +8,28 @@ import { Component, Input, HostBinding } from '@angular/core';
 export class AppBuildItemComponent {
   @Input() build: any;
   @HostBinding('class') classes = 'column is-12';
+
+  processingRequest: boolean;
+
+  constructor(private socketService: SocketService) { }
+
+  ngOnInit() {
+    this.socketService.outputEvents
+      .filter(x => x.type === 'buildRestarted' || x.type === 'buildStopped')
+      .subscribe(e => this.processingRequest = false);
+  }
+
+  restartBuild(e: MouseEvent, id: number): void {
+    e.preventDefault();
+    e.stopPropagation();
+    this.processingRequest = true;
+    this.socketService.emit({ type: 'restartBuild', data: { buildId: id } });
+  }
+
+  stopBuild(e: MouseEvent, id: number): void {
+    e.preventDefault();
+    e.stopPropagation();
+    this.processingRequest = true;
+    this.socketService.emit({ type: 'stopBuild', data: { buildId: id } });
+  }
 }

src/app/components/app-builds/app-builds.component.ts

@@ -36,11 +36,6 @@ export class AppBuildsComponent implements OnInit, OnDestroy {
           return;
         }
 
-        if (event.type === 'buildRestarted' || event.type === 'buildStopped') {
-          const buildIndex = this.builds.findIndex(build => build.id === event.data);
-          this.builds[buildIndex].processingRequest = false;
-        }
-
         if (event.data === 'jobAdded') {
           this.show = 5;
           this.offset = 0;
@@ -85,7 +80,6 @@ export class AppBuildsComponent implements OnInit, OnDestroy {
 
   fetch(): void {
     this.apiService.getBuilds(this.show, this.offset).subscribe(builds => {
-      console.log(builds);
       this.builds = builds;
       this.updateJobs();
       setInterval(() => this.updateJobs(), 1000);
@@ -147,22 +141,6 @@ export class AppBuildsComponent implements OnInit, OnDestroy {
       });
   }
 
-  restartBuild(e: MouseEvent, id: number): void {
-    e.preventDefault();
-    e.stopPropagation();
-    const buildIndex = this.builds.findIndex(build => build.id === id);
-    this.builds[buildIndex].processingRequest = true;
-    this.socketService.emit({ type: 'restartBuild', data: { buildId: id } });
-  }
-
-  stopBuild(e: MouseEvent, id: number): void {
-    e.preventDefault();
-    e.stopPropagation();
-    const buildIndex = this.builds.findIndex(build => build.id === id);
-    this.builds[buildIndex].processingRequest = true;
-    this.socketService.emit({ type: 'stopBuild', data: { buildId: id } });
-  }
-
   gotoBuild(buildId: number) {
     this.router.navigate(['build', buildId]);
   }

src/app/components/app-repository/app-repository.component.ts

@@ -48,11 +48,6 @@ export class AppRepositoryComponent implements OnInit, OnDestroy {
           return;
         }
 
-        if (event.type === 'buildRestarted' || event.type === 'buildStopped') {
-          const buildIndex = this.repo.builds.findIndex(build => build.id === event.data);
-          this.repo.builds[buildIndex].processingRequest = false;
-        }
-
         if (event.data === 'jobAdded') {
           this.fetch();
         }
@@ -155,22 +150,6 @@ export class AppRepositoryComponent implements OnInit, OnDestroy {
       });
   }
 
-  restartBuild(e: MouseEvent, id: number): void {
-    e.preventDefault();
-    e.stopPropagation();
-    const buildIndex = this.repo.builds.findIndex(build => build.id === id);
-    this.repo.builds[buildIndex].processingRequest = true;
-    this.socketService.emit({ type: 'restartBuild', data: { buildId: id } });
-  }
-
-  stopBuild(e: MouseEvent, id: number): void {
-    e.preventDefault();
-    e.stopPropagation();
-    const buildIndex = this.repo.builds.findIndex(build => build.id === id);
-    this.repo.builds[buildIndex].processingRequest = true;
-    this.socketService.emit({ type: 'stopBuild', data: { buildId: id } });
-  }
-
   gotoBuild(buildId: number) {
     this.router.navigate(['build', buildId]);
   }