Permalink
Browse files

feat(status-badges): status badges

  • Loading branch information...
jkuri committed Aug 8, 2017
1 parent 866d959 commit 9a40e9128e39c1d56e459cfb063bc25d1e9bd83b
@@ -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.

@@ -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') {
@@ -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}`);
@@ -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,
@@ -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>
@@ -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;
});
}
@@ -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>
@@ -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;

@@ -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);
}
}
@@ -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> {
@@ -122,8 +122,8 @@
&:hover
color: $white

.badge-img
.status-badge
display: block
float: left
margin-top: 3px
margin-top: 10px
margin-left: 5px
@@ -6,3 +6,6 @@

.column
padding: 0 5px !important

.status-badge
margin-top: 5px

0 comments on commit 9a40e91

Please sign in to comment.