diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4a6a4d926204b5947fcf8eb44bdc0500e501ccbc..d84b2e5f569194e3378fd7a4b2ad94af17df46a8 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,6 +11,8 @@ import { AppComponents } from './components'; import { UserModule } from './user/user.module'; import { UserService } from './user/services'; import { AppDirectives } from './directives'; +import { FilterPipe } from './components/logs-dashboard/logs-slugs/filter.pipe'; + // Function used by APP_INITIALIZER before the app start: init user info / statut (expect a promise) export function initUserService(authService: UserService) { @@ -34,6 +36,7 @@ export function initAppConfig(appConfigService: AppConfigService) { @NgModule({ declarations: [ AppComponent, + FilterPipe, ...AppComponents, ...AppDirectives, ], @@ -48,6 +51,7 @@ export function initAppConfig(appConfigService: AppConfigService) { UserModule, ], providers: [ + FilterPipe, ...AppServices, { provide: APP_INITIALIZER, diff --git a/src/app/components/index.ts b/src/app/components/index.ts index 7f1e30b9d58971ad2f9ce73a24c72cee11789485..9520cb58901425b887d6ecda3e2b875d8e4ad697 100644 --- a/src/app/components/index.ts +++ b/src/app/components/index.ts @@ -18,6 +18,7 @@ import { LogsErrorComponent } from './logs-dashboard/report/logs-error/logs-erro import { LogsGraphComponent } from './logs-dashboard/report/logs-graph/logs-graph.component'; import { LogsSessionsComponent } from './logs-dashboard/logs-sessions/logs-sessions.component'; import { LogsSlugsComponent } from './logs-dashboard/logs-slugs/logs-slugs.component'; +import { FilterPipe } from './logs-dashboard/logs-slugs/filter.pipe'; import { LogsPreReportComponent } from './logs-dashboard/report/logs-pre-report/logs-pre-report.component'; import { LogsReportComponent } from './logs-dashboard/report/logs-report/logs-report.component'; import { LogsHomeComponent } from './logs-dashboard/logs-home/logs-home.component'; @@ -48,6 +49,7 @@ export { LogsReportComponent, LogsHomeComponent, PageHeaderComponent, + FilterPipe, }; // tslint:disable-next-line:variable-name diff --git a/src/app/components/logs-dashboard/logs-home/logs-home.component.html b/src/app/components/logs-dashboard/logs-home/logs-home.component.html index 16a0e18d2e44df0e5661c7d4faaeb35b6414c89d..a9a3068fa0657a347451c0b14316df051d191f94 100644 --- a/src/app/components/logs-dashboard/logs-home/logs-home.component.html +++ b/src/app/components/logs-dashboard/logs-home/logs-home.component.html @@ -5,26 +5,20 @@ <div class="input-field"> <form> <div class="table"> - <div class="header columns is-marginless"> - <div class="column is-5 has-text-left"> - <label> Slug/Uuid {{test}} </label> - </div> - <div class="column is-5 has-text-left"> - <label> Session Id </label> - </div> - <div class="column is-2 has-text-left"> - </div> - </div> <div class="data-list"> <div class="data columns is-multiline is-vcentered is-marginless"> <div class="column is-5 has-text-left"> + <label class="label"> Slug/Uuid {{test}} </label> <input class="input" type="text" size="45" name="slug" [(ngModel)]="slug"> </div> <div class="column is-5 has-text-left"> + <label class="label"> Session Id </label> <input class="input" type="text" size="45" name="sessionId" [(ngModel)]="sessionId"> </div> - <div class="column is-2 has-text-left"> - <a class="button button-gl " (click)="uuidDetector(slug)"> + <div class="column is-2 has-text-left"> + <label class="label"> </label> + + <a class="button button-gl" (click)="uuidDetector(slug)"> <i class="fas fa-search"></i> </a> </div> @@ -40,10 +34,8 @@ <span class="tab-label">{{ tab.name }}</span> </li> </ul> - </div> </div> - <div class="columns is-centered is-marginless"> <div class="column has-text-centered is-marginless"> <app-logs-sessions [hidden]="isToggled" [childNbSessions]="nbSessionId"> diff --git a/src/app/components/logs-dashboard/logs-home/logs-home.component.scss b/src/app/components/logs-dashboard/logs-home/logs-home.component.scss index d5d4f6828fa1e977e1cfad4f5dd6aec875d1eaf6..cdf91bdb24d96e7ab9c2e06f854af75177b98901 100644 --- a/src/app/components/logs-dashboard/logs-home/logs-home.component.scss +++ b/src/app/components/logs-dashboard/logs-home/logs-home.component.scss @@ -109,4 +109,8 @@ figure { transition: width 0.3s; width: 100%; } + + .button-div{ + padding: 20 px ; + } } diff --git a/src/app/components/logs-dashboard/logs-slugs/filter.pipe.ts b/src/app/components/logs-dashboard/logs-slugs/filter.pipe.ts new file mode 100644 index 0000000000000000000000000000000000000000..2a1fa73c86cd0a410b13dde7cc6d93ec0c633f38 --- /dev/null +++ b/src/app/components/logs-dashboard/logs-slugs/filter.pipe.ts @@ -0,0 +1,14 @@ +import { Pipe, PipeTransform } from '@angular/core'; +@Pipe({ + name: 'filter', +}) +export class FilterPipe implements PipeTransform { + transform(items: any[], searchText: string): any[] { + if (!items) return []; + if (!searchText) return items; + const lowerSearchText = searchText.toLowerCase(); + return items.filter(it => { + return it.toLowerCase().includes(lowerSearchText); + }); + } +} \ No newline at end of file diff --git a/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.html b/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.html index f6fb4173255f0b515021d2c78b7054106fcab1b3..cea57ef4a0006f26bf289165a6b45eabbf3be74f 100644 --- a/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.html +++ b/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.html @@ -1,3 +1,19 @@ +<div class="input-field is-centered"> + <form> + <div class="columns is-vcentered"> + <div class="column is-2 has-text-left"> + <label class="label"> Search by slug: </label> + <input class="input" type="text" name="searchSlug" [(ngModel)]="searchSlug"> + </div> + <ul > + <li *ngFor="let slug of allSlugsInfoList | filter : searchSlug;"> + <p>{{slug._id.slug}}</p> + </li> + </ul> + </div> + </form> + </div> + <div class="columns is-centered is-marginless"> <div class="column has-text-left"> <P>{{ childNbSlugs }} slug(s) trouvé(s)</P> diff --git a/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.ts b/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.ts index e47fb2e202f49c20c0f3a61f3480ad496ae42a42..f7e1d8671163b12007efd16b2bb07b39ad23ce71 100644 --- a/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.ts +++ b/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.ts @@ -2,7 +2,7 @@ import { Component, OnChanges, SimpleChanges, Input } from '@angular/core'; import { DataLogsService } from 'src/app/services/data-logs.service'; import { PaginatorOptions } from 'src/app/models/paginator-options.model'; import { Subscription } from 'rxjs'; - +import { FilterPipe }from './filter.pipe'; @Component({ selector: 'app-logs-slugs', templateUrl: './logs-slugs.component.html', @@ -13,12 +13,22 @@ export class LogsSlugsComponent implements OnChanges { urlCode: string = 'slugUrl'; slugChangeSub: Subscription; allSlugsInfoList:any = []; + searchSlug: string = ''; slugInOnePage:number = 1; allSessionsIdInfo:any = []; + characters = [ + 'Finn the human', + 'Jake the dog', + 'Princess bubblegum', + 'Lumpy Space Princess', + 'Beemo1', + 'Beemo2', + ]; childSessionsList: any; paginator: PaginatorOptions; constructor( private _dataLogsService: DataLogsService, + private _pipe: FilterPipe, ) { this.paginator = { pageIndex: this._dataLogsService.pageNumber, diff --git a/src/app/components/logs-dashboard/report/logs-error/logs-error.component.html b/src/app/components/logs-dashboard/report/logs-error/logs-error.component.html index b8ea9567aaa5dc7ba1bfc7bdecbcd5617fdbcd6b..cbc07063363d44a26bcf04bcb79289097ff0edb0 100644 --- a/src/app/components/logs-dashboard/report/logs-error/logs-error.component.html +++ b/src/app/components/logs-dashboard/report/logs-error/logs-error.component.html @@ -12,10 +12,14 @@ <div *ngIf="oneStepData" (click)='getLogsSelector(oneStepData._id.step, oneStepData.counts);'> <div class="data columns is-multiline is-vcentered is-marginless" [ngClass]="{ odd: odd, even: even }"> <div class="column is-6 has-text-left"> - <p>Step: {{oneStepData._id.step}}</p><br> + <br> + <p>Step: {{oneStepData._id.step}}</p> + <br> <p>Durée: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m : - {{oneStepData.totalSecondsSpent}}s</p><br> + {{oneStepData.totalSecondsSpent}}s</p> + <br> <p>Info(s): {{oneStepData.counts.INFO}}</p> + <br> </div> <div class="column is-6 has-text-right"> <br><br> @@ -39,35 +43,35 @@ </div> <div class="column is-7 has-text-left"> - <div class="is-centered is-marginless" *ngIf="!allErrorLogs[0]"> - <p>No Errors</p> + <div class="is-centered is-marginless" *ngIf="!allErrorLogs[0]"> + <p>No Errors</p> + </div> + <div class="table entity-list-table is-marginless" *ngIf="allErrorLogs[0]"> + <div class="header columns is-marginless is-multiline is-centered is-vcentered"> + + <app-paginator [length]="paginator.length" [pageSize]="paginator.limit" + [pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="5" + [showFirstLastButtons]="true" (page)="changePagination($event)" (pageSizeChanged)="changePageSize($event)"> + </app-paginator> </div> - <div class="table entity-list-table is-marginless" *ngIf="allErrorLogs[0]"> - <div class="header columns is-marginless is-multiline is-centered is-vcentered"> - - <app-paginator [length]="paginator.length" [pageSize]="paginator.limit" - [pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="5" - [showFirstLastButtons]="true" (page)="changePagination($event)" (pageSizeChanged)="changePageSize($event)"> - </app-paginator> - </div> - <div class="data-list" *ngFor="let oneErrorLog of allErrorLogs; let i=index; let odd=odd; let even=even;"> - - <div class="data columns is-multiline is-vcentered is-marginless" [ngClass]="{ odd: odd, even: even }"> - <div class="columns is-marginless"> - <div class="column is-12 has-text-left"> - <p>step: {{oneErrorLog.step}}</p> - <br> - <p>status: {{oneErrorLog.status}}</p> - <br> - <p>info: {{oneErrorLog.info}}</p> - <br> - <p>progress-ratio: {{oneErrorLog.progress_ratio}}</p> - </div> + <div class="data-list" *ngFor="let oneErrorLog of allErrorLogs; let i=index; let odd=odd; let even=even;"> + + <div class="data columns is-multiline is-vcentered is-marginless" [ngClass]="{ odd: odd, even: even }"> + <div class="columns is-marginless"> + <div class="column is-12 has-text-left"> + <p>step: {{oneErrorLog.step}}</p> + <br> + <p>status: {{oneErrorLog.status}}</p> + <br> + <p>info: {{oneErrorLog.info}}</p> + <br> + <p>progress-ratio: {{oneErrorLog.progress_ratio}}</p> </div> </div> </div> </div> - <div> - </div> </div> + <div> + </div> + </div> </div> \ No newline at end of file diff --git a/src/app/components/logs-dashboard/report/logs-info/logs-info.component.html b/src/app/components/logs-dashboard/report/logs-info/logs-info.component.html index f345eca01751fbb5b668b9d4fa543082705fc072..a20e5cb3f43c98cec623e7bb3a0c90ed502250fe 100644 --- a/src/app/components/logs-dashboard/report/logs-info/logs-info.component.html +++ b/src/app/components/logs-dashboard/report/logs-info/logs-info.component.html @@ -12,10 +12,14 @@ <div *ngIf="oneStepData" (click)='getLogsSelector(oneStepData._id.step, oneStepData.counts);'> <div class="data columns is-multiline is-vcentered is-marginless" [ngClass]="{ odd: odd, even: even }"> <div class="column is-6 has-text-left"> - <p>Step: {{oneStepData._id.step}}</p><br> + <br> + <p>Step: {{oneStepData._id.step}}</p> + <br> <p>Durée: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m : - {{oneStepData.totalSecondsSpent}}s</p><br> + {{oneStepData.totalSecondsSpent}}s</p> + <br> <p>Info(s): {{oneStepData.counts.INFO}}</p> + <br> </div> <div class="column is-6 has-text-right"> <br><br> @@ -39,9 +43,9 @@ </div> <div class="column is-7 has-text-left"> - <div class="is-centered is-marginless" *ngIf="!allLogs"> - <p>No Logs!</p> - </div> + <div class="is-centered is-marginless" *ngIf="!allLogs"> + <p>No Logs!</p> + </div> <div class="table entity-list-table is-marginless" *ngIf="allLogs"> <div class="header columns is-marginless is-multiline is-centered is-vcentered"> diff --git a/src/app/services/data-logs.service.ts b/src/app/services/data-logs.service.ts index 7c3815695553920376c472d6ca17b8afa914dcbf..033bf880dd4d3acb3a4785e589106bdb6cc7b0a0 100644 --- a/src/app/services/data-logs.service.ts +++ b/src/app/services/data-logs.service.ts @@ -29,7 +29,7 @@ export class DataLogsService { this._errorLogSubject = new Subject<any>(); this._sessionLogSubject = new Subject<any>(); this._slugLogSubject = new Subject<any>(); - this.limit = 6; + this.limit = 7; this.pageNumber = 1; this.length = 1; }