From 80ee3f6cd1cc1b6b2256fb6dbcd3b2feb2fca8b9 Mon Sep 17 00:00:00 2001 From: ddamiron <ddamiron@sii.fr> Date: Thu, 1 Aug 2019 15:51:31 +0200 Subject: [PATCH] add search by Session and by Slug in data-logs Home page --- .../logs-home/logs-home.component.html | 8 +-- .../logs-home/logs-home.component.ts | 5 ++ .../logs-sessions.component.html | 41 ++++++++++----- .../logs-sessions.component.scss | 12 +++++ .../logs-sessions/logs-sessions.component.ts | 18 +++++++ .../logs-slugs/logs-slugs.component.html | 50 +++++++++++++------ .../logs-slugs/logs-slugs.component.scss | 5 ++ .../logs-slugs/logs-slugs.component.ts | 24 +++++++++ .../logs-error/logs-error.component.html | 4 +- .../report/logs-info/logs-info.component.html | 5 +- .../logs-pre-report.component.html | 16 ++++-- 11 files changed, 148 insertions(+), 40 deletions(-) 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 a9a3068..49a5233 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 @@ -9,11 +9,11 @@ <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"> + <input class="input" type="text" size="45" name="slug" [(ngModel)]="slug" list="slugsList"> </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"> + <input class="input" type="text" size="45" name="sessionId" [(ngModel)]="sessionId" list="sessionsList"> </div> <div class="column is-2 has-text-left"> <label class="label"> </label> @@ -38,8 +38,8 @@ </div> <div class="columns is-centered is-marginless"> <div class="column has-text-centered is-marginless"> - <app-logs-sessions [hidden]="isToggled" [childNbSessions]="nbSessionId"> + <app-logs-sessions [hidden]="isToggled" [sessionsList]="sessionsList" [childNbSessions]="nbSessionId"> </app-logs-sessions> - <app-logs-slugs [hidden]="!isToggled" [childNbSlugs]="nbSlug"></app-logs-slugs> + <app-logs-slugs [hidden]="!isToggled" [slugsList]="slugsList" [childNbSlugs]="nbSlug"></app-logs-slugs> </div> </div> \ No newline at end of file diff --git a/src/app/components/logs-dashboard/logs-home/logs-home.component.ts b/src/app/components/logs-dashboard/logs-home/logs-home.component.ts index fee711b..1010d6a 100644 --- a/src/app/components/logs-dashboard/logs-home/logs-home.component.ts +++ b/src/app/components/logs-dashboard/logs-home/logs-home.component.ts @@ -18,6 +18,8 @@ export class LogsHomeComponent implements OnInit { uuid: string; isUuid: boolean = false; allFields: any; + slugsList: any; + sessionsList: any; sessionId: string; slug: any; data: any; @@ -59,6 +61,9 @@ export class LogsHomeComponent implements OnInit { this.nbSessionId = result[0]['session_id_list'].length; this.nbUuid = result[0]['uuid_list'].length; this.nbSlug = result[0]['slug_list'].length; + this.slugsList = result[0]['slug_list']; + this.sessionsList = result[0]['session_id_list']; + console.log('sessionsList: ', this.sessionsList); }, ); diff --git a/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.html b/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.html index 3c5b3c8..b36cfc8 100644 --- a/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.html +++ b/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.html @@ -1,15 +1,27 @@ +<div class="input-field is-centered"> + <div class="columns is-3 is-vcentered"> + <div class="column is-2 has-text-left"> + <label class="label"> Search by session: </label> + <input class="input" type="text" [(ngModel)]="foundSession" (keyup)="getAllInfoForOneSession($event)" id="foundSession" list="sessionsList" /> + <datalist id="sessionsList"> + <option *ngFor="let session of sessionsList" [value]="session"> {{session}}</option> + </datalist> + </div> + </div> + </div> + <div class="columns is-centered is-marginless"> - <div class="column has-text-left"> - <P>{{ childNbSessions }} session(s) trouvée(s)</P> + <div class="column is-6 has-text-left"> + <P>{{ childNbSessions }} session(s) in the database</P> </div> - <div class="column has-text-centered"> - <p>Values below are for the latest Slug</p> + <div class="column is-6 has-text-left"> + <p>Values below are for the latest slug in the session</p> </div> </div> <div class="table entity-list-table"> <div class="header columns is-marginless"> - <div class="column is-4 has-text-centered"> + <div class="column is-3 has-text-centered"> <span (click)="sortBy('name')" class="is-sortable"> <span class="column-title">SessionId</span> <p></p> @@ -28,7 +40,7 @@ <span class="column-title">Nb of Slugs</span> </span> </div> - <div class="column is-2 has-text-left"> + <div class="column is-4 has-text-left"> <span class="is-sortable"> <span class="sort-icons"> <span class="icon"> @@ -41,7 +53,7 @@ <span class="column-title">Latest Completion Date</span> </span> </div> - <div class="column is-2 has-text-left"> + <div class="column is-1 has-text-left"> <span class="is-sortable"> <span class="sort-icons"> <span class="icon"> @@ -75,23 +87,23 @@ <div class="data columns is-multiline is-vcentered is-marginless" *ngFor="let session of allSessionsInfoList; let i=index; let odd=odd; let even=even;" [ngClass]="{ odd: odd, even: even }"> - <div class="column is-4 has-text-left"> + <div class="column is-3 has-text-left"> {{ session._id.session_id }} </div> <div class="column is-1 has-text-left"> {{ session.all.length }} </div> - <div class="column is-2 has-text-left"> + <div class="column is-4 has-text-left"> {{ session.latest.completionDate.$date }} </div> - <div class="column is-2 has-text-left"> + <div class="column is-1 has-text-left"> <span class="column-title"> {{ session.latest.duration.hours }}: {{ session.latest.duration.minutes }}: {{ session.latest.duration.seconds }}</span> </div> <div class="column is-1 has-text-centered actions"> - {{ session.latest.count.ERROR }} + {{ session.latest.count.ERROR ? 'Yes ('+session.latest.count.ERROR+')':'No'}} </div> <div class="column is-1 actions"> <a class="button button-gl " [routerLink]="['preReport','session', session._id.session_id]"> @@ -102,10 +114,15 @@ </div> </div> <div class="columns is-marginless"> - <div class="column"> + <div class="column is-10"> <app-paginator [length]="paginator.length" [pageSize]="paginator.limit" [pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="1" [showFirstLastButtons]="true" (page)="changePagination($event)" (pageSizeChanged)="changePageSize($event)"> </app-paginator> </div> + <div class="column is-1 is-vcentered"> + <a class="button button-gl is-left" (click)="getAllSessionsInfo(this.childNbSessions, 1)"> + <p class="bold-white">Reset</p> + </a> + </div> </div> \ No newline at end of file diff --git a/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.scss b/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.scss index e69de29..22f7b19 100644 --- a/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.scss +++ b/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.scss @@ -0,0 +1,12 @@ + +@import "../../../../scss/variables.scss"; +@import "../../../../../node_modules/bulma/sass/utilities/_all.sass"; + +.small-text{ + font-size:0.8em; +} + +.bold-white{ + color: white; + font-weight: bold; +} \ No newline at end of file diff --git a/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.ts b/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.ts index 2baa6c8..87442db 100644 --- a/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.ts +++ b/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.ts @@ -10,8 +10,11 @@ import { Subscription } from 'rxjs'; }) export class LogsSessionsComponent implements OnChanges { @Input() childNbSessions: number; + @Input() sessionsList: any; + sessionChangeSub: Subscription; nbSessions: number = 0; + foundSession: string = ''; allSessionsIdInfo: any = []; allSessionsInfoList: any = []; paginator: PaginatorOptions; @@ -52,6 +55,7 @@ export class LogsSessionsComponent implements OnChanges { getAllSessionsInfo(length, pageNumber) { this._dataLogsService.getAllInfoForAllSessions(length, pageNumber).subscribe((result) => { + this.foundSession = ''; this.allSessionsInfoList = result; this.nbSessions = result.length; this.paginator.limit = this._dataLogsService.limit; @@ -60,8 +64,22 @@ export class LogsSessionsComponent implements OnChanges { this.formatDate(); }, ); + } + getAllInfoForOneSession($event) { + // const foundSlug = (<HTMLInputElement>document.getElementById('foundSlug')).value; + this._dataLogsService.getAllInfoForOneSession(this.foundSession).subscribe((result) => { + console.log('result for getAllInfoForOneSlug', result); + this.allSessionsInfoList = result; + this.nbSessions = result.length; + this.paginator.limit = this._dataLogsService.limit; + this.paginator.pageIndex = this._dataLogsService.pageNumber; + this.paginator.length = this.childNbSessions; + this.formatDate(); + }, + ); } + formatDate() { for (let i = 0; i < this.nbSessions; i += 1) { this.allSessionsInfoList[i].latest.completionDate.$date = new Date(this.allSessionsInfoList[i].latest.completionDate.$date); 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 35b93bb..540651c 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,19 +1,28 @@ <div class="input-field is-centered"> - <form> + <!-- <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> </div> - </form> + </form> --> + <div class="columns is-3 is-vcentered"> + <div class="column is-2 has-text-left"> + <label class="label"> Search by slug: </label> + <input class="input" type="text" [(ngModel)]="foundSlug" (keyup)="getAllInfoForOneSlug($event)" id="foundSlug" list="slugsList" /> + <datalist id="slugsList"> + <option *ngFor="let slug of slugsList" [value]="slug"> {{slug}}</option> + </datalist> + </div> </div> +</div> <div class="columns is-centered is-marginless"> - <div class="column has-text-left"> - <P>{{ childNbSlugs }} slug(s) trouvé(s)</P> + <div class="column is-6 has-text-left"> + <P>{{ childNbSlugs }} slug(s) in database</P> </div> - <div class="column has-text-centered"> + <div class="column is-6 has-text-left"> <p>Values below are for the latest Session</p> </div> </div> @@ -32,10 +41,13 @@ <span class="column-title">Slugs</span> </span> </div> - <div class="column is-2 has-text-left"> - <span class="column-title">Nb of Sessions</span> + <div class="column is-1 has-text-left"> + <span class="column-title">Full Data?</span> + </div> + <div class="column is-1 has-text-left"> + <span class="column-title">Sessions</span> </div> - <div class="column is-2 has-text-left"> + <div class="column is-3 has-text-left"> <span class="is-sortable"> <span class="sort-icons"> <span class="icon"> @@ -48,7 +60,7 @@ <span class="column-title">Latest Completion Date</span> </span> </div> - <div class="column is-2 has-text-left"> + <div class="column is-1 has-text-left"> <span class="is-sortable"> <span class="sort-icons"> <span class="icon"> @@ -58,7 +70,7 @@ <i class="fas fa-sort-down"></i> </span> </span> - <span class="column-title">Duration (h:min:s)</span> + <span class="column-title">Duration</span> </span> </div> <div class="column is-1 has-text-left"> <span class="is-sortable"> @@ -87,17 +99,20 @@ <p>{{slug._id.uuid}}</p> </div> </div> - <div class="column is-2 has-text-left"> + <div class="column is-1 has-text-left"> + {{ slug.latest.uuid_suffix === 'full' ? 'Yes' : 'No'}} + </div> + <div class="column is-1 has-text-left"> {{slug.all.length}} </div> - <div class="column is-2 has-text-left"> + <div class="column is-3 has-text-left"> {{slug.latest.completionDate.$date}} </div> - <div class="column is-2 has-text-left"> + <div class="column is-1 has-text-left"> {{slug.latest.duration.hours}}:{{slug.latest.duration.minutes}}:{{slug.latest.duration.seconds}} </div> <div class="column is-1 has-text-left actions"> - {{slug.latest.count.ERROR}} + {{ slug.latest.count.ERROR ? 'Yes ('+slug.latest.count.ERROR+')':'No'}} </div> <div class="column is-1 has-text-left actions"> <a class="button button-gl is-left" [routerLink]="['preReport', 'slug', slug._id.slug]"> @@ -109,10 +124,15 @@ </div> </div> <div class="columns is-marginless"> - <div class="column"> + <div class="column is-10"> <app-paginator *ngIf="paginator.length > 0" [length]="paginator.length" [pageSize]="paginator.limit" [pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="1" [showFirstLastButtons]="true" (page)="changePagination($event)" (pageSizeChanged)="changePageSize($event)"> </app-paginator> </div> + <div class="column is-1 is-vcentered"> + <a class="button button-gl is-left" (click)="getAllInfoForAllSlugs(childNbSlugs, 1);"> + <p class="bold-white">Reset</p> + </a> + </div> </div> \ No newline at end of file diff --git a/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.scss b/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.scss index 42584e5..2f5cc96 100644 --- a/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.scss +++ b/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.scss @@ -3,4 +3,9 @@ .small-text{ font-size:0.8em; +} + +.bold-white{ + color: white; + font-weight: bold; } \ No newline at end of file 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 4e60be2..a723acf 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 @@ -1,8 +1,10 @@ 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 { FormBuilder, FormGroup } from '@angular/forms'; import { Subscription } from 'rxjs'; import { FilterPipe }from './filter.pipe'; + @Component({ selector: 'app-logs-slugs', templateUrl: './logs-slugs.component.html', @@ -10,8 +12,14 @@ import { FilterPipe }from './filter.pipe'; }) export class LogsSlugsComponent implements OnChanges { @Input() childNbSlugs: number; + @Input() slugsList: any; + + filteredSlugs: any[] = []; + isLoading = false; + urlCode: string = 'slugUrl'; slugChangeSub: Subscription; + foundSlug: string = ''; allSlugsInfoList:any = []; searchSlug: string = ''; slugInOnePage:number = 1; @@ -47,16 +55,31 @@ export class LogsSlugsComponent implements OnChanges { } getAllInfoForAllSlugs(length, pageNumber) { this._dataLogsService.getAllInfoForAllSlugs(length, pageNumber).subscribe((result) => { + this.foundSlug = ''; this.allSlugsInfoList = result; this.slugInOnePage = result.length; this.paginator.limit = this._dataLogsService.limit; this.paginator.pageIndex = this._dataLogsService.pageNumber; this.paginator.length = this.childNbSlugs; this.formatDate(); + console.log('slugs result', result); }, ); + } + getAllInfoForOneSlug($event) { + // const foundSlug = (<HTMLInputElement>document.getElementById('foundSlug')).value; + this._dataLogsService.getAllInfoForOneSlug(this.foundSlug).subscribe((result) => { + this.allSlugsInfoList = result; + this.slugInOnePage = result.length; + this.paginator.limit = this._dataLogsService.limit; + this.paginator.pageIndex = this._dataLogsService.pageNumber; + this.paginator.length = this.childNbSlugs; + this.formatDate(); + }, + ); } + formatDate() { for (let i = 0; i < this.slugInOnePage; i += 1) { this.allSlugsInfoList[i].latest.completionDate.$date = new Date(this.allSlugsInfoList[i].latest.completionDate.$date); @@ -70,4 +93,5 @@ export class LogsSlugsComponent implements OnChanges { changePageSize(pageSize) { this._dataLogsService.paginationChanged(pageSize, 1, 'SLUG'); } + } 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 cbc0706..447420c 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 @@ -18,7 +18,7 @@ <p>Durée: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m : {{oneStepData.totalSecondsSpent}}s</p> <br> - <p>Info(s): {{oneStepData.counts.INFO}}</p> + <p>Info(s): {{oneStepData.counts.INFO ? oneStepData.counts.INFO : 0 }}</p> <br> </div> <div class="column is-6 has-text-right"> @@ -33,7 +33,7 @@ class="brandcolor" /> </svg> </div> - <p><br> Erreur(s): {{oneStepData.counts.ERROR}}</p> + <p><br> Erreur(s): {{oneStepData.counts.ERROR ? oneStepData.counts.ERROR : 0}}</p> </div> </div> </div> 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 a20e5cb..54e5edb 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 @@ -18,7 +18,7 @@ <p>Durée: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m : {{oneStepData.totalSecondsSpent}}s</p> <br> - <p>Info(s): {{oneStepData.counts.INFO}}</p> + <p>Info(s): {{oneStepData.counts.INFO ? oneStepData.counts.INFO : 0 }}</p> <br> </div> <div class="column is-6 has-text-right"> @@ -33,7 +33,8 @@ class="brandcolor" /> </svg> </div> - <p><br> Erreur(s): {{oneStepData.counts.ERROR}}</p> + <p><br> Erreur(s): + {{ oneStepData.counts.ERROR ? oneStepData.counts.ERROR : 0}} </div> </div> </div> diff --git a/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.html b/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.html index cddf6e4..04c8f0e 100644 --- a/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.html +++ b/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.html @@ -92,7 +92,7 @@ {{session._id.duration.hours}}:{{session._id.duration.minutes}}:{{session._id.duration.seconds}} </div> <div class="column is-1 has-text-left actions"> - {{ session._id.count.ERROR }} + {{ session._id.count.ERROR ? 'Yes ('+session._id.count.ERROR+')':'No'}} </div> <div class="column is-1 actions"> <a class="button button-gl " @@ -145,8 +145,11 @@ <span class="column-title">Slugs</span> </span> </div> - <div class="column is-2 has-text-left"> - <span class="column-title">Nb of Sessions</span> + <div class="column is-1 has-text-left"> + <span class="column-title">Full Data?</span> + </div> + <div class="column is-1 has-text-left"> + <span class="column-title">Sessions</span> </div> <div class="column is-2 has-text-left"> <span class="is-sortable"> @@ -201,7 +204,10 @@ <p>{{slug._id.uuid}}</p> </div> </div> - <div class="column is-2 has-text-left"> + <div class="column is-1 has-text-left"> + {{ slug._id.uuid_suffix === 'full' ? 'Yes' : 'No'}} + </div> + <div class="column is-1 has-text-left"> {{slug._id.session_list.length}} </div> <div class="column is-2 has-text-left"> @@ -211,7 +217,7 @@ {{slug._id.duration.hours}}:{{slug._id.duration.minutes}}:{{slug._id.duration.seconds}} </div> <div class="column is-1 has-text-left actions"> - {{slug._id.count.ERROR}} + {{ slug._id.count.ERROR ? 'Yes (' + slug._id.count.ERROR + ')':'No'}} </div> <div class="column is-1 has-text-left actions"> <a class="button button-gl is-left" -- GitLab