feat(status-badges): status badges

README.md

@@ -4,7 +4,7 @@
 
 # abstruse
 
-[![AbstruseCI](https://abstruse.bleenco.io/api/repositories/badge/1)](https://abstruse.bleenco.io/repo/1)
+[![AbstruseCI](https://abstruse.bleenco.io/badge/1)](https://abstruse.bleenco.io/repo/1)
 
 Run Continuous Integration (CI) on your own servers.
 

src/api/server-routes.ts

@@ -138,7 +138,13 @@ export function repositoryRoutes(): express.Router {
     }).catch(err => res.status(200).json({ status: false }));
   });
 
-  router.get('/badge/:id', (req: express.Request, res: express.Response) => {
+  return router;
+}
+
+export function badgeRoutes(): express.Router {
+  const router = express.Router();
+
+  router.get('/:id', (req: express.Request, res: express.Response) => {
     getRepositoryBadge(req.params.id).then(status => {
       let background = null;
       if (status === 'failing') {

src/api/server.ts

@@ -32,6 +32,7 @@ export class ExpressServer implements IExpressServer {
       app.use('/api/repositories', routes.repositoryRoutes());
       app.use('/api/builds', routes.buildRoutes());
       app.use('/api/jobs', routes.jobRoutes());
+      app.use('/badge', routes.badgeRoutes());
       app.use(routes.webRoutes());
       app.listen(this.config.port, () => {
         observer.next(`Server running on port ${this.config.port}`);

src/app/app.module.ts

@@ -11,6 +11,7 @@ import { SocketServiceProvider } from './services/socket.service';
 import { AuthGuardProvider, AuthGuard } from './services/auth-guard.service';
 import { AuthServiceProvider } from './services/auth.service';
 import { EqualValidator } from './directives/equal-validator.directive';
+import { SafeHtmlPipe } from './pipes/safe-html.pipe';
 import { AppComponent } from './app.component';
 import { AppSetupComponent } from './components/app-setup';
 import { AppTerminalComponent } from './components/app-terminal';
@@ -39,7 +40,8 @@ import { AppTeamComponent } from './components/app-team';
     AppJobComponent,
     AppSettingsComponent,
     AppTeamComponent,
-    EqualValidator
+    EqualValidator,
+    SafeHtmlPipe
   ],
   imports: [
     BrowserModule,

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

@@ -65,7 +65,7 @@ <h1>Repositories</h1>
                 <span>{{ repo.default_branch }}</span>
               </div>
               <div class="column is-2 justify-end">
-                <img [src]="repo.status_badge">
+                <span *ngIf="repo.status_badge" [innerHTML]="repo.status_badge | safeHtml" class="status-badge"></span>
               </div>
             </div>
           </div>

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

@@ -21,7 +21,7 @@ export class AppRepositoriesComponent implements OnInit {
   loading: boolean;
   repository: Repository;
   userData: any;
-  repositories: string[];
+  repositories: any[];
   dropdowns: boolean[];
   buildTriggered: boolean;
   url: string;
@@ -52,10 +52,15 @@ export class AppRepositoriesComponent implements OnInit {
   fetch(keyword = ''): void {
     this.loading = true;
     this.apiService.getRepositories(this.userData.id, keyword).subscribe(event => {
-      this.repositories = event.map(repo => {
-        repo.status_badge = this.url + '/api/repositories/badge/' + repo.id;
-        return repo;
+      this.repositories = event;
+      this.repositories.forEach((repo: any, i) => {
+        this.apiService.getBadge(repo.id).subscribe(badge => {
+          if (badge.ok) {
+            this.repositories[i].status_badge = badge._body;
+          }
+        });
       });
+
       this.loading = false;
     });
   }

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

@@ -5,7 +5,7 @@
     <div class="nav-left">
       <span class="nav-item">
         <h1>{{ repo?.full_name }}</h1>
-        <span><img [src]="statusBadge" class="badge-img"></span>
+        <span *ngIf="statusBadge" [innerHTML]="statusBadge | safeHtml" class="status-badge"></span>
       </span>
     </div>
     <div class="nav-center"></div>

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

@@ -24,7 +24,9 @@ export class AppRepositoryComponent implements OnInit, OnDestroy {
     private socketService: SocketService,
     private api: ApiService,
     private config: ConfigService
-  ) { }
+  ) {
+    this.loading = true;
+  }
 
   ngOnInit() {
     this.url = this.config.url;
@@ -35,6 +37,7 @@ export class AppRepositoryComponent implements OnInit, OnDestroy {
         this.router.navigate(['repositories']);
       } else {
         this.fetch();
+        this.fetchBadge();
       }
     });
 
@@ -82,9 +85,6 @@ export class AppRepositoryComponent implements OnInit, OnDestroy {
             }
 
             this.repo.builds[index].jobs[jobIndex].status = status;
-
-            this.statusBadge = '';
-            this.statusBadge = this.url + '/api/repositories/badge/' + this.id;
           }
         }
       });
@@ -99,12 +99,18 @@ export class AppRepositoryComponent implements OnInit, OnDestroy {
       this.repo = event;
       this.loading = false;
       this.updateJobs();
-      this.statusBadge = '';
-      this.statusBadge = this.url + '/api/repositories/badge/' + this.id;
       setInterval(() => this.updateJobs(), 1000);
     });
   }
 
+  fetchBadge(): void {
+    this.api.getBadge(parseInt(this.id, 10)).subscribe(event => {
+      if (event.ok) {
+        this.statusBadge = event._body.replace(/ \r/g, '').trim();
+      }
+    });
+  }
+
   updateJobs(): void {
     let currentTime = new Date().getTime() - this.socketService.timeSyncDiff;
 

src/app/pipes/safe-html.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({ name: 'safeHtml'})
+export class SafeHtmlPipe implements PipeTransform  {
+  constructor(private sanitizer: DomSanitizer) { }
+
+  transform(value) {
+    return this.sanitizer.bypassSecurityTrustHtml(value);
+  }
+}

src/app/services/api.service.ts

@@ -5,11 +5,17 @@ import { Observable } from 'rxjs/Observable';
 @Injectable()
 export class ApiService {
   url: string;
+  loc: Location;
+  port: string;
 
   constructor(private http: Http) {
-    let loc: Location = window.location;
-    let port: string = loc.port === '8000' ? ':6500' : `:${loc.port}`; // dev mode
-    this.url = `${loc.protocol}//${loc.hostname}${port}/api`;
+    this.loc = window.location;
+    this.port = this.loc.port === '8000' ? ':6500' : `:${this.loc.port}`; // dev mode
+    this.url = `${this.loc.protocol}//${this.loc.hostname}${this.port}/api`;
+  }
+
+  getBadge(id: number): Observable<any> {
+    return this.http.get(`${this.loc.protocol}//${this.loc.hostname}${this.port}/badge/${id}`);
   }
 
   getBuilds(limit: number, offset: number): Observable<any> {

src/app/styles/nav.sass

@@ -122,8 +122,8 @@
         &:hover
           color: $white
 
-    .badge-img
+    .status-badge
       display: block
       float: left
-      margin-top: 3px
+      margin-top: 10px
       margin-left: 5px

src/app/styles/repositories.sass

@@ -6,3 +6,6 @@
 
   .column
     padding: 0 5px !important
+
+.status-badge
+  margin-top: 5px