From e20ccf2e1844148c5fe7beb230e075ec4afb0106 Mon Sep 17 00:00:00 2001
From: Andy Chen <42463687+ByteMap@users.noreply.github.com>
Date: Fri, 19 Jun 2020 10:02:01 -0700
Subject: [PATCH] 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
---
 .../github-apps-logs.component.html           |  5 ++-
 .../github-apps-logs.component.ts             | 34 +++++++++++++------
 .../github-apps-logs.module.ts                |  3 +-
 src/app/search/map-friendly-values.pipe.ts    |  4 ++-
 4 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.html b/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.html
index 180904c8b1..3d447413cb 100644
--- a/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.html
+++ b/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 -->
diff --git a/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.ts b/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.ts
index a9b856f7ae..3fc65cc1f0 100644
--- a/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.ts
+++ b/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;
diff --git a/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.module.ts b/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.module.ts
index fdc7c6c1e0..9e0d904e5b 100644
--- a/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.module.ts
+++ b/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]
 })
diff --git a/src/app/search/map-friendly-values.pipe.ts b/src/app/search/map-friendly-values.pipe.ts
index 136cd4821d..e9fe0f2f96 100644
--- a/src/app/search/map-friendly-values.pipe.ts
+++ b/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']])]
   ]);
 
   /**