Feature/seab 1367/assist lambda display (#1014)

Imported DatePipe in order to format the eventDate into a string,
which enables the filter string to match with the eventDate

Imported MapFriendlyValuesPipe in order to format the original values
into its mapped friendly values, which allows the filter to pick up the
new mapped values

Added a new animation state and transition in order to fix
material sort triggering expandable rows

Added a new map friendly value to replace the 'true' and 'false'
values for the 'success' column

Added a new map friendly value to replace the enum values for
the 'type' column

src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.html

@@ -10,7 +10,7 @@ <h1 mat-dialog-title>GitHub App Logs</h1>
     <!-- *ngIf doesn't work with the sorting implementation, using hidden for now -->
     <div [hidden]="showContent !== 'table'">
       <mat-form-field>
-        <mat-label>Filter (except Date)</mat-label>
+        <mat-label>Filter</mat-label>
         <input #filter matInput (keyup)="applyFilter(filter.value)" placeholder="Ex. PUSH" />
       </mat-form-field>
       <table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z3 w-100" matSort>
@@ -22,10 +22,9 @@ <h1 mat-dialog-title>GitHub App Logs</h1>
           <th mat-header-cell *matHeaderCellDef mat-sort-header>GitHub Username</th>
           <td mat-cell *matCellDef="let element">{{ element.githubUsername }}</td>
         </ng-container>
-
         <ng-container matColumnDef="{{ column }}" *ngFor="let column of columnsToDisplay">
           <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column | titlecase }}</th>
-          <td mat-cell *matCellDef="let element">{{ element[column] }}</td>
+          <td mat-cell *matCellDef="let element">{{ column | mapFriendlyValue: element[column] }}</td>
         </ng-container>
 
         <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->

src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.ts

@@ -1,15 +1,14 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
+import { DatePipe } from '@angular/common';
 import { Component, Inject, OnInit, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA, MatPaginator, MatSnackBar, MatSort, MatTableDataSource } from '@angular/material';
 import { AlertService } from 'app/shared/alert/state/alert.service';
 import { LambdaEvent, LambdaEventsService } from 'app/shared/openapi';
 import { finalize } from 'rxjs/operators';
+import { MapFriendlyValuesPipe } from '../../../search/map-friendly-values.pipe';
 
 /**
  * Based on https://material.angular.io/components/table/examples example with expandable rows
- * TODO: Filter by date (datasource is using timestamp instead of medium date)
- * TODO: Friendly value map for reference (maybe success, maybe type too)
- * TODO: Fix sort expanding every row
  * TODO: Add backend pagination
  * @export
  * @class GithubAppsLogsComponent
@@ -21,18 +20,16 @@ import { finalize } from 'rxjs/operators';
   styleUrls: ['./github-apps-logs.component.scss'],
   animations: [
     trigger('detailExpand', [
-      state('collapsed', style({ height: '0px', minHeight: '0' })),
+      state('collapsed, void', style({ height: '0px', minHeight: '0' })),
       state('expanded', style({ height: '*' })),
-      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+      transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
     ])
   ]
 })
 export class GithubAppsLogsComponent implements OnInit {
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public data: string,
-    private lambdaEventsService: LambdaEventsService,
-    private matSnackBar: MatSnackBar
-  ) {}
+  datePipe: DatePipe;
+  mapPipe: MapFriendlyValuesPipe;
   columnsToDisplay: string[] = ['repository', 'reference', 'success', 'type'];
   displayedColumns: string[] = ['eventDate', 'githubUsername', ...this.columnsToDisplay];
   lambdaEvents: LambdaEvent[] | null;
@@ -45,12 +42,27 @@ export class GithubAppsLogsComponent implements OnInit {
   showContent: 'table' | 'error' | 'empty' | null;
   isExpansionDetailRow = (i: number, row: Object) => row.hasOwnProperty('detailRow');
 
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public matDialogData: string,
+    private lambdaEventsService: LambdaEventsService,
+    private matSnackBar: MatSnackBar
+  ) {
+    this.datePipe = new DatePipe('en');
+    this.mapPipe = new MapFriendlyValuesPipe();
+    const defaultPredicate = this.dataSource.filterPredicate;
+    this.dataSource.filterPredicate = (data, filter) => {
+      const formattedDate = this.datePipe.transform(data.eventDate, 'medium').toLowerCase();
+      const formattedStatus = this.mapPipe.transform('success', String(data.success)).toLowerCase();
+      return formattedDate.indexOf(filter) >= 0 || formattedStatus.indexOf(filter) >= 0 || defaultPredicate(data, filter);
+    };
+  }
+
   ngOnInit() {
     this.loading = true;
     this.dataSource.sort = this.sort;
     this.dataSource.paginator = this.paginator;
     this.lambdaEventsService
-      .getLambdaEventsByOrganization(this.data)
+      .getLambdaEventsByOrganization(this.matDialogData)
       .pipe(
         finalize(() => {
           this.loading = false;

src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.module.ts

@@ -19,10 +19,11 @@ import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { RefreshAlertModule } from 'app/shared/alert/alert.module';
 import { CustomMaterialModule } from 'app/shared/modules/material.module';
+import { PipeModule } from '../../../shared/pipe/pipe.module';
 import { GithubAppsLogsComponent } from './github-apps-logs.component';
 
 @NgModule({
-  imports: [CustomMaterialModule, CommonModule, RefreshAlertModule, FlexLayoutModule],
+  imports: [CustomMaterialModule, CommonModule, RefreshAlertModule, FlexLayoutModule, PipeModule],
   declarations: [GithubAppsLogsComponent],
   entryComponents: [GithubAppsLogsComponent]
 })

src/app/search/map-friendly-values.pipe.ts

@@ -103,7 +103,9 @@ export class MapFriendlyValuesPipe implements PipeTransform {
         [SourceFile.TypeEnum.DOCKSTOREYML, 'Configuration'],
         [SourceFile.TypeEnum.DOCKSTORESERVICEOTHER, 'Service Files']
       ])
-    ]
+    ],
+    ['success', new Map([['true', 'Success'], ['false', 'Failed']])],
+    ['type', new Map([['PUSH', 'Push'], ['DELETE', 'Delete'], ['INSTALL', 'Install']])]
   ]);
 
   /**