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