From 9ffd81d7be8199f6219dfcc23aea53be3a1840fe Mon Sep 17 00:00:00 2001 From: ddamiron <ddamiron@sii.fr> Date: Mon, 29 Jul 2019 16:12:43 +0200 Subject: [PATCH] add paginator for DataLogs Infos and Errors --- .../logs-home/logs-home.component.html | 4 +- .../logs-sessions.component.html | 14 +++-- .../logs-sessions/logs-sessions.component.ts | 50 +++++++++++++--- .../logs-slugs/logs-slugs.component.html | 18 +++--- .../logs-slugs/logs-slugs.component.ts | 58 ++++++++++++++----- .../logs-error/logs-error.component.html | 4 +- .../report/logs-info/logs-info.component.html | 31 +++++----- src/app/services/data-logs.service.ts | 38 +++++++++--- 8 files changed, 153 insertions(+), 64 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 233f249..08f25bd 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 @@ -48,8 +48,8 @@ <div class="columns is-centered is-marginless"> <div class="column has-text-centered is-marginless"> - <app-logs-sessions [hidden]="isToggled"> + <app-logs-sessions [hidden]="isToggled" [childNbSessions]="nbSessionId"> </app-logs-sessions> - <app-logs-slugs [hidden]="!isToggled"></app-logs-slugs> + <app-logs-slugs [hidden]="!isToggled" [childNbSlugs]="nbSlug"></app-logs-slugs> </div> </div> \ No newline at end of file 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 4aa1329..b80a22d 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,9 +1,8 @@ <div class="columns is-centered is-marginless"> <div class="column has-text-left"> - <P>{{ nbSessions }} session(s) trouvée(s)</P> + <P>{{ childNbSessions }} session(s) trouvée(s)</P> </div> </div> - <div class="table entity-list-table"> <div class="header columns is-marginless"> <div class="column is-4 has-text-centered"> @@ -97,9 +96,12 @@ </div> </div> </div> - <div class="columns is-marginless"> +</div> +<div class="columns is-marginless"> <div class="column"> - + <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> -</div> \ No newline at end of file + </div> \ 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 831fb94..f0f4406 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 @@ -1,28 +1,51 @@ -import { Component, OnInit, Input } from '@angular/core'; +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 { ActivatedRoute, ParamMap } from '@angular/router'; import { switchMap } from 'rxjs/operators'; import { ILogs } from 'src/app/models/logs.model'; import { FormsModule } from '@angular/forms'; +import { Subscription } from 'rxjs'; + @Component({ selector: 'app-logs-sessions', templateUrl: './logs-sessions.component.html', styleUrls: ['./logs-sessions.component.scss'], }) -export class LogsSessionsComponent implements OnInit { +export class LogsSessionsComponent implements OnChanges { // @Input() childSessionId: string; // @Input() childSessionsList: []; - // @Input() childNbSessions: number; + @Input() childNbSessions: number; + sessionChangeSub: Subscription; nbSessions: number = 0; allSessionsIdInfo: any = []; allSessionsInfoList: any = []; + paginator: PaginatorOptions; urlCode: string = 'sessionUrl'; constructor( private dataLogsService: DataLogsService, - ) { } + ) { + this.paginator = { + pageIndex: this.dataLogsService.pageNumber, + length: 1, + limit: this.dataLogsService.limit, + pageSizeOptions: [5, 10, 20], + }; + } - ngOnInit() { - this.getAllSessionsInfo(); + ngOnChanges(changes: SimpleChanges): void { + this.sessionChangeSub = this.dataLogsService.sessionLogChange$.subscribe( + () => { + this.paginator.limit = this.dataLogsService.limit; + this.paginator.pageIndex = this.dataLogsService.pageNumber; + this.paginator.length = this.dataLogsService.length; + this.getAllSessionsInfo(this.childNbSessions, this.paginator.pageIndex); + }, + ); + this.getAllSessionsInfo(this.childNbSessions, 1); + } + ngOnDestroy() { + this.sessionChangeSub.unsubscribe(); } getProcessTimeAggr (sessionId) { @@ -33,10 +56,13 @@ export class LogsSessionsComponent implements OnInit { ); } - getAllSessionsInfo() { - this.dataLogsService.getAllInfoForAllSessions().subscribe((result) => { + getAllSessionsInfo(length, pageNumber) { + this.dataLogsService.getAllInfoForAllSessions(length, pageNumber).subscribe((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; console.log('allSessionsInfoList: ', this.allSessionsInfoList); this.formatDate(); }, @@ -55,6 +81,12 @@ export class LogsSessionsComponent implements OnInit { } } - seeDashboard() {} + // When pagination is changed by user, we update datasetList with new pagination options + changePagination(pageIndex) { + this.dataLogsService.paginationChanged(this.paginator.limit, pageIndex, 'SESSION'); + } + changePageSize(pageSize) { + this.dataLogsService.paginationChanged(pageSize, 1, 'SESSION'); + } } 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 2eeb092..f6fb417 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 @@ -3,7 +3,6 @@ <P>{{ childNbSlugs }} slug(s) trouvé(s)</P> </div> </div> - <div class="table entity-list-table"> <div class="header columns is-marginless"> <div class="column is-3 has-text-centered"> @@ -93,14 +92,13 @@ </div> </div> </div> - <div class="columns is-marginless"> - <div class="column"> - <!-- <app-paginator *ngIf="paginator.length > 0" [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> + </div> +</div> +<div class="columns is-marginless"> + <div class="column"> + <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> \ 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 a794189..2307caa 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,34 +1,59 @@ -import { Component, OnInit, Input } from '@angular/core'; +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 { ActivatedRoute, ParamMap } from '@angular/router'; import { switchMap } from 'rxjs/operators'; import { ILogs } from 'src/app/models/logs.model'; import { FormsModule } from '@angular/forms'; +import { Subscription } from 'rxjs'; + @Component({ selector: 'app-logs-slugs', templateUrl: './logs-slugs.component.html', styleUrls: ['./logs-slugs.component.scss'], }) -export class LogsSlugsComponent implements OnInit { +export class LogsSlugsComponent implements OnChanges { + @Input() childNbSlugs: number; urlCode: string = 'slugUrl'; + slugChangeSub: Subscription; allSlugsInfoList:any = []; + slugInOnePage:number = 1; allSessionsIdInfo:any = []; childSessionsList: any; - childNbSlugs: number = 0; - + paginator: PaginatorOptions; constructor( private dataLogsService: DataLogsService, - ) { } + ) { + this.paginator = { + pageIndex: this.dataLogsService.pageNumber, + length: 1, + limit: this.dataLogsService.limit, + pageSizeOptions: [5, 10, 20], + }; + } - ngOnInit() { + ngOnChanges(changes: SimpleChanges): void { this.allSlugsInfoList = []; - this.getAllInfoForAllSlugs(); + this.slugChangeSub = this.dataLogsService.slugLogChange$.subscribe( + () => { + this.paginator.limit = this.dataLogsService.limit; + this.paginator.pageIndex = this.dataLogsService.pageNumber; + this.paginator.length = this.childNbSlugs; + this.getAllInfoForAllSlugs(this.childNbSlugs, this.paginator.pageIndex); + }, + ); + this.getAllInfoForAllSlugs(this.childNbSlugs, 1); } - - getAllInfoForAllSlugs() { - this.dataLogsService.getAllInfoForAllSlugs().subscribe((result) => { + ngOnDestroy() { + this.slugChangeSub.unsubscribe(); + } + getAllInfoForAllSlugs(length, pageNumber) { + this.dataLogsService.getAllInfoForAllSlugs(length, pageNumber).subscribe((result) => { this.allSlugsInfoList = result; - this.childNbSlugs = result.length; + this.slugInOnePage = result.length; + this.paginator.limit = this.dataLogsService.limit; + this.paginator.pageIndex = this.dataLogsService.pageNumber; + this.paginator.length = this.childNbSlugs; console.log('allSlugsInfoList: ', this.allSlugsInfoList); this.formatDate(); }, @@ -36,7 +61,7 @@ export class LogsSlugsComponent implements OnInit { } formatDate() { - for (let i = 0; i < this.childNbSlugs; i += 1) { + for (let i = 0; i < this.slugInOnePage; i += 1) { for (let j = 0; j < this.allSlugsInfoList[i].data.length; j += 1) { // const date1 = new Date(this.allSlugsInfoList[i].data[j].completionDate.$date); // const date2 = new Date(this.allSlugsInfoList[i].data[j].startDate.$date); @@ -46,5 +71,12 @@ export class LogsSlugsComponent implements OnInit { } } } - seeDashboard() {} + // When pagination is changed by user, we update datasetList with new pagination options + changePagination(pageIndex) { + this.dataLogsService.paginationChanged(this.paginator.limit, pageIndex, 'SLUG'); + } + + 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 9d29696..ccd9f59 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 @@ -1,6 +1,6 @@ <div class="columns is-centered is-marginless"> - <div class="column has-text-left"> + <div class="column is-5 has-text-left"> <br> <div *ngFor="let oneStepData of allStepsData; let i=index; let odd=odd; let even=even;"> <div *ngIf="oneStepData" (click)='getLogsSelector(oneStepData._id.step, oneStepData.counts);'> @@ -43,7 +43,7 @@ </div> </div> - <div class="column has-text-left"> + <div class="column is-7 has-text-left"> <div class="mini-log-card" *ngIf="allLogs?.lenght==0"> <p>No DATA</p> </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 48c9263..32374bb 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 @@ -1,7 +1,7 @@ <div class="columns is-centered is-marginless"> - <div class="column has-text-left"> -<br> + <div class="column is-5 has-text-left"> + <br> <div *ngFor="let oneStepData of allStepsData; let i=index; let odd=odd; let even=even;"> <div *ngIf="oneStepData" (click)='getLogsSelector(oneStepData._id.step, oneStepData.counts);'> <div class="table entity-list-table"> @@ -43,7 +43,7 @@ </div> </div> - <div class="column has-text-left"> + <div class="column is-7 has-text-left"> <div class="mini-log-card" *ngIf="allLogs?.lenght==0"> <p>No DATA</p> </div> @@ -51,21 +51,24 @@ [pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="5" [showFirstLastButtons]="true" (page)="changePagination($event)" (pageSizeChanged)="changePageSize($event)"> </app-paginator> - <div class="color-green" *ngFor="let oneLog of allLogs"> - <div class="table entity-list-table"> - <div class="columns is-marginless"> - <div class="column is-12 has-text-left"> - <p>step: {{oneLog.step}}</p> - <br> - <p>status: {{oneLog.status}}</p> - <br> - <p>info: {{oneLog.info}}</p> - <br> - <p>progress-ratio: {{oneLog.progress_ratio}}</p> + <div class="data-list"> + <div class="color-green" *ngFor="let oneLog of allLogs"> + <div class="table entity-list-table"> + <div class="columns is-marginless"> + <div class="column is-12 has-text-left"> + <p>step: {{oneLog.step}}</p> + <br> + <p>status: {{oneLog.status}}</p> + <br> + <p>info: {{oneLog.info}}</p> + <br> + <p>progress-ratio: {{oneLog.progress_ratio}}</p> + </div> </div> </div> </div> </div> + <div> </div> diff --git a/src/app/services/data-logs.service.ts b/src/app/services/data-logs.service.ts index 20e6e2c..9e753ac 100644 --- a/src/app/services/data-logs.service.ts +++ b/src/app/services/data-logs.service.ts @@ -19,14 +19,18 @@ export class DataLogsService { private _infoLogSubject: Subject<any>; private _errorLogSubject: Subject<any>; + private _sessionLogSubject: Subject<any>; + private _slugLogSubject: Subject<any>; constructor( private _httpClient: HttpClient) { this.resourceServiceUrl = `${APP_CONFIG.restHeartAggregations.url}`; this._infoLogSubject = new Subject<any>(); this._errorLogSubject = new Subject<any>(); + this._sessionLogSubject = new Subject<any>(); + this._slugLogSubject = new Subject<any>(); - this.limit = 5; + this.limit = 6; this.pageNumber = 1; this.length = 1; } @@ -60,8 +64,12 @@ export class DataLogsService { }), ); } - getAllInfoForAllSlugs(): Observable<any[]> { - const aggregationEndPoint = '/_aggrs/allFullSlugAggr'; + getAllInfoForAllSlugs(nbSlugs, pageNumber): Observable<any[]> { + let aggregationEndPoint = '/_aggrs/allFullSlugAggr'; + this.length = nbSlugs; + this.pageNumber = pageNumber; + aggregationEndPoint += `?pagesize=${(this.limit)}`; + aggregationEndPoint += `&page=${(pageNumber)}`; return this._httpClient.get<any[]>(this.resourceServiceUrl + aggregationEndPoint).pipe( map((response) => { return response; @@ -69,8 +77,12 @@ export class DataLogsService { ); } - getAllInfoForAllSessions(): Observable<any[]> { - const aggregationEndPoint = '/_aggrs/allFullSessionAggr'; + getAllInfoForAllSessions(nbSessions, pageNumber): Observable<any[]> { + let aggregationEndPoint = '/_aggrs/allFullSessionAggr'; + this.length = nbSessions; + this.pageNumber = pageNumber; + aggregationEndPoint += `?pagesize=${(this.limit)}`; + aggregationEndPoint += `&page=${(pageNumber)}`; return this._httpClient.get<any[]>(this.resourceServiceUrl + aggregationEndPoint).pipe( map((response) => { return response; @@ -207,11 +219,15 @@ export class DataLogsService { paginationChanged(limit: number, pageNumber: number, logType:string) { this.limit = limit; this.pageNumber = pageNumber; - console.log('limit: ', this.limit, 'pageNumber: ', this.pageNumber, 'length', this.length); + console.log('paginationChanged', 'limit: ', this.limit, 'pageNumber: ', this.pageNumber, 'length', this.length); if (logType === 'INFO') { this._infoLogSubject.next(); - }else if (logType === 'ERROR') { - this._infoLogSubject.next(); + }if (logType === 'ERROR') { + this._errorLogSubject.next(); + }if (logType === 'SLUG') { + this._slugLogSubject.next(); + }if (logType === 'SESSION') { + this._sessionLogSubject.next(); } } @@ -228,5 +244,11 @@ export class DataLogsService { get errorLogChange$(): Observable<string> { return this._errorLogSubject.asObservable(); } + get sessionLogChange$(): Observable<string> { + return this._sessionLogSubject.asObservable(); + } + get slugLogChange$(): Observable<string> { + return this._slugLogSubject.asObservable(); + } } -- GitLab