feat(repository): #1579 display build history for each PR on new page

web/src/app/core/resolvers/status.resolver.ts

@@ -0,0 +1,39 @@
+// Angular modules
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
+
+// 3rd party
+import { of, Observable } from 'rxjs';
+import { catchError, take } from 'rxjs/operators';
+
+// Dashboard hub model and services
+import { RepositoryService } from '@core/services/index.service';
+import { PullRequestStatusModel } from '@shared/models/index.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class StatusResolver implements Resolve<PullRequestStatusModel> {
+
+  /**
+   * Life cycle method
+   * @param respositoryService RepositoryService
+   * @param router Router
+   */
+  constructor(
+    private respositoryService: RepositoryService,
+    private router: Router
+  ) { }
+
+  resolve(route: ActivatedRouteSnapshot): Observable<PullRequestStatusModel> {
+    return this.respositoryService.getPullRequestStatusByUid(route.params.repoUid, route.params.pullRequestUid)
+      .pipe(
+        take(1),
+        catchError(() => {
+          this.router.navigate(['/projects', route.params.projectUid]);
+
+          return of(new PullRequestStatusModel());
+        })
+      );
+  }
+}

web/src/app/core/services/repository.service.ts

@@ -94,12 +94,16 @@ export class RepositoryService {
     return callable({ token: this.authService.profile.oauth.githubToken, repository: { fullName: fullName, ref: ref } });
   }
 
-  public getPullRequestStatuses(uid: string): Observable<PullRequestStatusModel[]> {
+  /**
+   * Find all pull reqeust status and map the latest bulid time for each pull reqeust
+   * @param repoUid string
+   */
+  public getPullRequestStatuses(repoUid: string): Observable<PullRequestStatusModel[]> {
     return this.activityService
       .start()
       .pipe(
         switchMap(() => this.afs.collection<IRepository>('repositories')
-          .doc<IRepository>(uid)
+          .doc<IRepository>(repoUid)
           .collection<PullRequestStatusModel>('statuses')
           .snapshotChanges().pipe(
             map((actions: any) => actions.map((a: any) => {
@@ -110,4 +114,20 @@ export class RepositoryService {
             }))
           )));
   }
+
+  /**
+   * Find the Status details for pull requst of a given repository
+   * @param repoUid string
+   * @param uid string
+   */
+  public getPullRequestStatusByUid(repoUid: string, uid: string): Observable<PullRequestStatusModel> {
+    return this.activityService
+      .start()
+      .pipe(
+        switchMap(() => this.afs.collection<IRepository>('repositories')
+          .doc<IRepository>(repoUid)
+          .collection<PullRequestStatusModel>('statuses')
+          .doc<PullRequestStatusModel>(uid)
+          .valueChanges()));
+  }
 }

web/src/app/projects/build-history/build-history.component.html

@@ -0,0 +1,38 @@
+<div class="build-history" *ngIf="status">
+  <div class="build-history__header" fxLayout="row" fxLayoutAlign="start center">
+    <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="5px">
+      <a [routerLink]="['/projects', projectUid]" *ngIf="!isSmallScreen"> Project ></a>
+      <a [routerLink]="['/projects', projectUid, repoUid]" *ngIf="!isSmallScreen"> Pull Request ></a>
+      <span>Build History</span>
+    </div>
+  </div>
+  <mat-card class="build-history__card">
+    <mat-card-header>
+      <div class="build-history__card__header">
+        <mat-icon svgIcon="request_white"></mat-icon>
+      </div>
+      <mat-card-title class="build-history__card__title">
+        Build History
+      </mat-card-title>
+      <mat-card-subtitle class="build-history__card__title__subtitle">
+        You have {{ status.historic.length }} total builds
+      </mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content class="build-history__card__content">
+      <table mat-table [dataSource]="status.historic" class="build-history__card__content__table">
+        <ng-container matColumnDef="commitId">
+          <th mat-header-cell *matHeaderCellDef>Commit Id</th>
+          <td mat-cell *matCellDef="let element"> {{ element.commitId }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="time">
+          <th mat-header-cell *matHeaderCellDef>Time</th>
+          <td mat-cell *matCellDef="let element"> {{ element.buildTimes[0].time }} seconds </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
+    </mat-card-content>
+  </mat-card>
+</div>

web/src/app/projects/build-history/build-history.component.scss

@@ -0,0 +1,42 @@
+@import "../../../assets/scss/variable";
+@import "../../../assets/scss/mixin.scss";
+
+.build-history {
+  @include pageContainer;
+
+  &__header {
+    @include pageHeader;
+  }
+
+  &__card {
+    @include cardContainer;
+
+    &__header {
+      @include header-icon;
+      background-color: $purple-color;
+      box-shadow: 0px 3px 6px $purple-shadow;
+    }
+
+    &__title {
+      @include title;
+
+      &__subtitle {
+        @include subtitle;
+      }
+    }
+
+    &__content {
+      padding: 0;
+      display: block;
+      overflow: auto;
+      max-height: 60vh;
+
+      @include tableContainer;
+
+      &__table {
+        width: 100%;
+        padding: 0 2px;
+      }
+    }
+  }
+}

web/src/app/projects/build-history/build-history.component.ts

@@ -0,0 +1,38 @@
+// Core modules
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+// DashboardHub services
+import { PullRequestStatusModel } from '@app/shared/models/index.model';
+
+@Component({
+  selector: 'dashboard-build-history',
+  templateUrl: './build-history.component.html',
+  styleUrls: ['./build-history.component.scss'],
+})
+export class BuildHistoryComponent implements OnInit {
+
+  public projectUid: string;
+  public repoUid: string;
+  public pullRequestUid: string;
+  public historic: [];
+  public displayedColumns: string[] = ['commitId', 'time'];
+  public status: PullRequestStatusModel;
+
+  /**
+   * Life cycle method
+   * @param route ActivateRoute
+   */
+  constructor(
+    private route: ActivatedRoute
+  ) { }
+
+  /**
+   * Captured pull request status information from status resolver route
+   */
+  ngOnInit(): void {
+    this.projectUid = this.route.snapshot.paramMap.get('projectUid');
+    this.repoUid = this.route.snapshot.paramMap.get('repoUid');
+    this.route.data.subscribe((data: { status: PullRequestStatusModel }) => this.status = data.status);
+  }
+}

web/src/app/projects/projects-routing.module.ts

@@ -14,6 +14,8 @@ import { ViewProjectComponent } from './view/view.component';
 // Dashboard hub authentication guards
 import { AuthGuard } from '@core/guards/authentication.guard';
 import { RepositoryResolver } from '@core/resolvers/repository.resolver';
+import { StatusResolver } from '@core/resolvers/status.resolver';
+import { BuildHistoryComponent } from './build-history/build-history.component';
 import { PullRequestsComponent } from './pull-requests/pull-requests.component';
 import { RatingComponent } from './rating/rating.component';
 
@@ -57,6 +59,11 @@ const routes: Routes = [
     component: PullRequestsComponent,
     resolve: { repository: RepositoryResolver },
   },
+  {
+    path: ':projectUid/:repoUid/:pullRequestUid',
+    component: BuildHistoryComponent,
+    resolve: { status: StatusResolver },
+  },
 ];
 
 @NgModule({

web/src/app/projects/projects.module.ts

@@ -7,6 +7,7 @@ import { SharedModule } from '@shared/shared.module';
 import { ProjectsRoutingModule } from './projects-routing.module';
 
 // Dashboard hub components
+import { BuildHistoryComponent } from './build-history/build-history.component';
 import { CreateEditProjectComponent } from './create-edit/create-edit.component';
 import { MonitorSummaryComponent } from './monitor-summary/monitor-summary.component';
 import { PullRequestsComponent } from './pull-requests/pull-requests.component';
@@ -27,6 +28,7 @@ import { ViewProjectComponent } from './view/view.component';
     ViewProjectComponent,
     RatingComponent,
     PullRequestsComponent,
+    BuildHistoryComponent,
   ],
 })
 export class ProjectsModule { }

web/src/app/projects/pull-requests/pull-requests.component.html

@@ -22,7 +22,7 @@
         <ng-container matColumnDef="id">
           <th mat-header-cell *matHeaderCellDef>Id</th>
           <td mat-cell *matCellDef="let element">
-            <span fxLayoutAlign.xs="center center">{{ element.id }}</span>
+            <a [routerLink]="[element.uid]" fxLayoutAlign.xs="center center">{{ element.id }}</a>
           </td>
         </ng-container>
         <ng-container matColumnDef="title">