update data-logs report:

add paginator
add tabs
update css

src/app/components/index.ts

@@ -13,7 +13,8 @@ import { FormatDetailComponent } from './formats/detail/format-detail.component'
 import { FormatFormComponent } from './formats/edit/format-form.component';
 import { ImageUploadComponent } from './image-upload/image-upload.component';
 import { NotificationsComponent } from './notifications/notifications.component';
-import { LogsDataComponent } from './logs-dashboard/report/logs-data/logs-data.component';
+import { LogsInfoComponent } from './logs-dashboard/report/logs-info/logs-info.component';
+import { LogsErrorComponent } from './logs-dashboard/report/logs-error/logs-error.component';
 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';
@@ -38,7 +39,8 @@ export {
   FormatFormComponent,
   ImageUploadComponent,
   NotificationsComponent,
-  LogsDataComponent,
+  LogsInfoComponent,
+  LogsErrorComponent,
   LogsGraphComponent,
   LogsSessionsComponent,
   LogsSlugsComponent,
@@ -65,7 +67,8 @@ export const AppComponents = [
   FormatFormComponent,
   ImageUploadComponent,
   NotificationsComponent,
-  LogsDataComponent,
+  LogsInfoComponent,
+  LogsErrorComponent,
   LogsGraphComponent,
   LogsSessionsComponent,
   LogsSlugsComponent,

src/app/components/logs-dashboard/report/logs-error/logs-error.component.html

+<!-- <div class="columns is-centered is-marginless">
+    <label class="btn btn-outline-secondary" *ngFor="let logType of logTypes">
+        <input type="checkbox" class="checkbox" [(ngModel)]="logType.selected"> {{logType.name}}
+    </label>
+</div> -->
+
+<div class="columns is-centered is-marginless paginator-container">      
+
+  <!-- this.paginator.limit: {{this.paginator.limit}}<br>
+  pageIndex: {{ this.paginator.pageIndex }}<br>
+  lenght: {{this.paginator.length}}<br> -->
+</div>
+
+<div class="section">
+  <div class="columns is-centered is-marginless">
+
+      <div class="column has-text-left">
+
+          <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">
+                <div class="columns is-marginless">
+                  <div class="column is-6 has-text-left">
+                    <p>Step: {{oneStepData._id.step}}</p>
+                  </div>
+                </div>
+                <div class="columns is-marginless">
+                  <div class="column is-6 has-text-left">
+                    <p>Durée: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
+                      {{oneStepData.totalSecondsSpent}}s</p>
+                  </div>
+                  <div class="column is-6 has-text-right">
+    
+                    <div class="arrows" [ngClass]="{'is-displayed': displayedStep === oneStepData._id.step}">
+                      <svg xmlns="https://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
+                        <path
+                          d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+                          class="brandcolor" />
+                        <path
+                          d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+                          class="brandcolor" />
+                      </svg>
+                    </div>
+    
+                  </div>
+                </div>
+                <div class="columns is-marginless">
+                  <div class="column is-6 has-text-left">
+                    <p>Erreur(s): {{oneStepData.counts.ERROR}}</p>
+                  </div>
+                  <div class="column is-6 has-text-left">
+                    <p>Info(s): {{oneStepData.counts.INFO}}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+    <div class="column has-text-left">
+      <div class="mini-log-card" *ngIf="allLogs?.lenght==0">
+        <p>No DATA</p>
+      </div>
+      <!-- <div class="mini-error-card" *ngIf="!allErrorLogs?.lenght>0">
+          <p>No DATA</p>
+      </div> -->
+      <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 *ngFor="let oneErrorLog of allErrorLogs">
+
+        <div class="mini-error-card" *ngIf="oneErrorLog">
+          <span>
+            <p>slug: {{oneErrorLog.slug}} </p>
+            <p>uuid: {{oneErrorLog.uuid}} </p>
+            <p>sessionId: {{oneErrorLog.session_id}} </p>
+            <h3>
+              <p>step: {{oneErrorLog.step}}</p>
+              <p>status: {{oneErrorLog.status}}</p>
+              <p>info: {{oneErrorLog.info}}</p>
+              <p>progress-ratio: {{oneErrorLog.progress_ratio}}</p>
+
+            </h3>
+          </span>
+        </div>
+      </div>
+      <div>
+
+      </div>
+    </div>
+  </div>
+  
+</div>
\ No newline at end of file

src/app/components/logs-dashboard/report/logs-data/logs-data.component.scss → src/app/components/logs-dashboard/report/logs-error/logs-error.component.scss

@@ -53,5 +53,8 @@ figure {
   .arrows.is-displayed svg {
     transform: rotate(-90deg);
   }
+  .paginator-container{
+    background-color: yellowgreen;
+  }
 
 

src/app/components/logs-dashboard/report/logs-error/logs-error.component.ts

+import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';
+import { DataLogsService } from 'src/app/services/data-logs.service';
+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 { PaginatorOptions } from 'src/app/models/paginator-options.model';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'app-logs-error',
+  templateUrl: './logs-error.component.html',
+  styleUrls: ['./logs-error.component.scss'],
+})
+export class LogsErrorComponent implements OnChanges {
+  @Input() childUuid: string = '';
+  @Input() childSessionId: string = '';
+  @Input() childSlug: string;
+  searchChangeSub: Subscription;
+  selectedStep  = {
+    step:'main',
+    nbErrors: 0,
+    nbInfos: 0,
+  };
+
+  displayedStep: string = 'none';
+  logTypes: any = [
+    {
+      name : 'erreurs',
+      selected : true,
+    },
+    {
+      name : 'infos',
+      selected : false,
+    },
+  ];
+  uuid: string;
+  sessionId: string;
+  slug: string;
+  data: any;
+  stepData: ILogs;
+  allStepsData: any;
+  allErrorLogs: any;
+  allLogs: any;
+  nbSessionId: number;
+  nbUuid: number;
+  nbSlug: number;
+  // Paginator options
+  paginator: PaginatorOptions;
+  pageSizeOptions = [5, 10, 25, 100];
+  sessionIdList: [string];
+  constructor(
+    private dataLogsService: DataLogsService,
+    private route: ActivatedRoute,
+  ) {
+    this.paginator = {
+      pageIndex: this.dataLogsService.pageNumber,
+      length: 1,
+      limit: this.dataLogsService.limit,
+      pageSizeOptions: [5, 10, 20],
+    };
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.data = [];
+    this.slug = this.childSlug;
+    this.allStepsData = [];
+    this.allErrorLogs = [];
+    this.getLogsSteps();
+    this.searchChangeSub = this.dataLogsService.searchChange$.subscribe(
+      () => {
+        this.paginator.limit = this.dataLogsService.limit;
+        this.paginator.pageIndex = this.dataLogsService.pageNumber;
+        if (this.logTypes[0].selected === true) {
+          this.getErrorStepsLogs(this.selectedStep.step, this.selectedStep.nbErrors, this.paginator.pageIndex);
+        }
+        if (this.logTypes[1].selected === true) {
+          this.getSimpleStepsLogs(this.selectedStep.step, this.selectedStep.nbInfos, this.paginator.pageIndex);
+        }
+      },
+    );
+  }
+
+  getLogsSteps() {
+    if ((this.childUuid != null) && (this.childSessionId != null)) {
+      // console.log('parameters', this.childUuid, this.childSessionId);
+
+      this.dataLogsService.getAllStepsDuration(
+        this.childUuid,
+        this.childSessionId,
+      ).subscribe((results) => {
+        console.log('getAllStepsDuration results', results);
+        this.allStepsData = results;
+      },
+      );
+    }
+  }
+  getLogsSelector(step, counts) {
+    this.selectedStep.step = step;
+    this.selectedStep.nbErrors = counts.ERROR;
+    this.selectedStep.nbInfos = counts.INFO;
+    this.allErrorLogs = [];
+    this.allLogs = [];
+    this.displayedStep = step;
+    if (this.logTypes[0].selected === true) {
+      this.getErrorStepsLogs(step, this.selectedStep.nbErrors, 1);
+    }
+    if (this.logTypes[1].selected === true) {
+      this.getSimpleStepsLogs(step, this.selectedStep.nbInfos, 1);
+    }
+  }
+  getErrorStepsLogs(step, nbErrors, pageNumber) {
+    if ((this.childUuid != null) && (this.childSessionId != null)) {
+      // console.log('parameters', this.childUuid, this.childSessionId);
+
+      this.dataLogsService.getLogsStepsLogs(
+        step,
+        this.childSessionId,
+        this.childUuid,
+        'ERROR',
+        nbErrors,
+        pageNumber,
+      ).subscribe((results) => {
+        // console.log('results', results);
+        this.allErrorLogs = results;
+        this.paginator.limit = this.dataLogsService.limit;
+        this.paginator.pageIndex = this.dataLogsService.pageNumber;
+        this.paginator.length = this.dataLogsService.length;
+      },
+      );
+    }
+  }
+  getSimpleStepsLogs(step, nbInfos, pageNumber) {
+    if ((this.childUuid != null) && (this.childSessionId != null)) {
+      // console.log('parameters', this.childUuid, this.childSessionId);
+
+      this.dataLogsService.getLogsStepsLogs(
+        step,
+        this.childSessionId,
+        this.childUuid,
+        'INFO',
+        nbInfos,
+        pageNumber,
+      ).subscribe((results) => {
+        // console.log('results', results);
+        this.allLogs = results;
+        this.paginator.limit = this.dataLogsService.limit;
+        this.paginator.pageIndex = this.dataLogsService.pageNumber;
+        this.paginator.length = this.dataLogsService.length;
+      },
+      );
+    }
+  }
+
+    // When pagination is changed by user, we update datasetList with new pagination options
+  changePagination(pageIndex) {
+    this.dataLogsService.paginationChanged(this.paginator.limit, pageIndex);
+  }
+
+  changePageSize(pageSize) {
+    this.dataLogsService.paginationChanged(pageSize, 1);
+  }
+}

src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.html

-<p>
-</p>
-<div class="graph-component">
-  <div *ngFor="let data of this.graphData">
-    <div *ngFor="let timestamp of data.timestamps">
-    </div>
+<ng-container>
+  <div>
+    <div class="section">
+      <div class="graph-component">
+        <div class="columns is-left ">
+          <p>slug: {{childSlug}} &nbsp; sessionId: {{childSessionId}} </p>
+        </div>
+        <div class="columns is-left ">
+          <p>uuid: {{childUuid}} </p>
+        </div>
+        <a class="button button-gl is-centered" (click)="replotGraph()">
+          Reload Chart
+        </a>
+        <div class="columns is-centered">
+          <div class="graph-div-canvas">
 
-  </div>
-  <a class="button button-gl is-centered" (click)="replotGraph()">
-      Reload Chart
-    </a>
-  <div class="graph-div-canvas">
-      <p>uuid: {{childUuid}} </p>
-      <p>sessionId: {{childSessionId}} </p>
-      <p>slug: {{childSlug}} </p>
-    <canvas id="graphCanvas">{{ chart }}</canvas>
+            <canvas id="graphCanvas">{{ chart }}</canvas>
 
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
-</div>
+</ng-container>
\ No newline at end of file

src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.scss

 .graph-div-canvas{
-    width: 95%;
+    width: 80%;
+    left: 10%;
 }
\ No newline at end of file

src/app/components/logs-dashboard/report/logs-data/logs-data.component.html → src/app/components/logs-dashboard/report/logs-info/logs-info.component.html

-<div class="section">
+<!-- <div class="columns is-centered is-marginless">
   <label class="btn btn-outline-secondary" *ngFor="let logType of logTypes">
-    <input type="checkbox" [(ngModel)]="logType.selected"> {{logType.name}}
+    <input type="checkbox" class="checkbox" [(ngModel)]="logType.selected"> {{logType.name}}
   </label>
+</div> -->
+
+<div class="columns is-centered is-marginless paginator-container">
+
+  <!-- this.paginator.limit: {{this.paginator.limit}}<br>
+  pageIndex: {{ this.paginator.pageIndex }}<br>
+  lenght: {{this.paginator.length}}<br> -->
 </div>
+
 <div class="section">
   <div class="columns is-centered is-marginless">
 
     <div class="column has-text-left">
-      <div *ngFor="let oneStepData of allStepsData">
-        <div class="mini-info-card" *ngIf="oneStepData" (click)='getLogsSelector(oneStepData._id.step);'>
-            <div class="table">
-                <div class="columns is-marginless">
-                    <div class="column is-3 has-text-left">
-                    </div>
-                <div class="column is-5 has-text-center">
-                    <h3>Step: {{oneStepData._id.step}}</h3>
-                </div>
-                <div class="column is-2 has-text-left">
-                </div>
-                </div>
-                <div class="columns is-marginless">
-                <div class="column is-5 has-text-left">
-                    <span>
-                        <h3>
-                            <p>total-time: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
-                            {{oneStepData.totalSecondsSpent}}s </p>
-                            <p>Info(s):  {{oneStepData.counts.INFO}}</p>
-                            <p>Erreur(s):  {{oneStepData.counts.ERROR}}</p>
-                        </h3>
-                      </span>
-                </div>
 
-                <div class="column is-6 has-text-right">
-                  <br>
-                    <span>
-                        <div class="arrows" [ngClass]="{'is-displayed': displayedStep === oneStepData._id.step}">
-                        <svg xmlns="https://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
-                          <path
-                            d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
-                            class="brandcolor" />
-                          <path
-                            d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
-                            class="brandcolor" />
-                        </svg>
-                      </div>
-                    </span>
+      <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">
+            <div class="columns is-marginless">
+              <div class="column is-6 has-text-left">
+                <p>Step: {{oneStepData._id.step}}</p>
+              </div>
+            </div>
+            <div class="columns is-marginless">
+              <div class="column is-6 has-text-left">
+                <p>Durée: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
+                  {{oneStepData.totalSecondsSpent}}s</p>
+              </div>
+              <div class="column is-6 has-text-right">
+
+                <div class="arrows" [ngClass]="{'is-displayed': displayedStep === oneStepData._id.step}">
+                  <svg xmlns="https://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
+                    <path
+                      d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+                      class="brandcolor" />
+                    <path
+                      d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+                      class="brandcolor" />
+                  </svg>
                 </div>
+
+              </div>
+            </div>
+            <div class="columns is-marginless">
+              <div class="column is-6 has-text-left">
+                <p>Erreur(s): {{oneStepData.counts.ERROR}}</p>
               </div>
-            </div>    
+              <div class="column is-6 has-text-left">
+                <p>Info(s): {{oneStepData.counts.INFO}}</p>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -59,7 +64,10 @@
       <!-- <div class="mini-error-card" *ngIf="!allErrorLogs?.lenght>0">
           <p>No DATA</p>
       </div> -->
-
+      <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 *ngFor="let oneLog of allLogs">
 
         <div class="mini-log-card" *ngIf="oneLog">
@@ -74,6 +82,7 @@
               <p>progress-ratio: {{oneLog.progress_ratio}}</p>
 
             </h3>
+
           </span>
         </div>
       </div>
@@ -94,6 +103,10 @@
           </span>
         </div>
       </div>
+      <div>
+
+      </div>
     </div>
   </div>
+
 </div>
\ No newline at end of file

src/app/components/logs-dashboard/report/logs-info/logs-info.component.scss

+@import "../../../../../scss/variables.scss";
+@import "../../../../../../node_modules/bulma/sass/utilities/_all.sass";
+
+figure {
+    text-align: center;
+  }
+  figure img{
+    max-width: 150px;
+    display: inline-block;
+    margin-top: 20px;
+  }
+  
+  .card-header-title {
+    justify-content: center;
+  }
+
+  .mini-info-card{
+    margin-top: 20px;
+    padding: 20px;
+    background-color: yellow;
+
+  }
+  .mini-log-card{
+    margin-top: 20px;
+    padding: 20px;
+    background-color: greenyellow;
+
+  }
+  
+  .mini-error-card{
+    margin-top: 20px;
+    padding: 20px;
+    background-color: red;
+
+  }
+  .input-field{
+    width: 200%;
+    margin-top: 20px;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .arrows {
+    svg {
+      width: 16px;
+      fill: $grey-dark-color;
+      transform: rotate(0deg);
+    }
+  }
+
+  .arrows.is-displayed svg {
+    transform: rotate(-90deg);
+  }
+  .paginator-container{
+    background-color: yellowgreen;
+  }
+
+

src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts → src/app/components/logs-dashboard/report/logs-info/logs-info.component.ts

@@ -4,16 +4,25 @@ 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 { PaginatorOptions } from 'src/app/models/paginator-options.model';
+import { Subscription } from 'rxjs';
 
 @Component({
-  selector: 'app-logs-data',
-  templateUrl: './logs-data.component.html',
-  styleUrls: ['./logs-data.component.scss'],
+  selector: 'app-logs-info',
+  templateUrl: './logs-info.component.html',
+  styleUrls: ['./logs-info.component.scss'],
 })
-export class LogsDataComponent implements OnChanges {
+export class LogsInfoComponent implements OnChanges {
   @Input() childUuid: string = '';
   @Input() childSessionId: string = '';
   @Input() childSlug: string;
+  searchChangeSub: Subscription;
+  selectedStep  = {
+    step:'main',
+    nbErrors: 0,
+    nbInfos: 0,
+  };
+
   displayedStep: string = 'none';
   logTypes: any = [
     {
@@ -36,13 +45,21 @@ export class LogsDataComponent implements OnChanges {
   nbSessionId: number;
   nbUuid: number;
   nbSlug: number;
-  tempStep: string = '';
-
+  // Paginator options
+  paginator: PaginatorOptions;
+  pageSizeOptions = [5, 10, 25, 100];
   sessionIdList: [string];
   constructor(
     private dataLogsService: DataLogsService,
     private route: ActivatedRoute,
-  ) { }
+  ) {
+    this.paginator = {
+      pageIndex: this.dataLogsService.pageNumber,
+      length: 1,
+      limit: this.dataLogsService.limit,
+      pageSizeOptions: [5, 10, 20],
+    };
+  }
 
   ngOnChanges(changes: SimpleChanges): void {
     this.data = [];
@@ -50,6 +67,18 @@ export class LogsDataComponent implements OnChanges {
     this.allStepsData = [];
     this.allErrorLogs = [];
     this.getLogsSteps();
+    this.searchChangeSub = this.dataLogsService.searchChange$.subscribe(
+      () => {
+        this.paginator.limit = this.dataLogsService.limit;
+        this.paginator.pageIndex = this.dataLogsService.pageNumber;
+        if (this.logTypes[0].selected === true) {
+          this.getErrorStepsLogs(this.selectedStep.step, this.selectedStep.nbErrors, this.paginator.pageIndex);
+        }
+        if (this.logTypes[1].selected === true) {
+          this.getSimpleStepsLogs(this.selectedStep.step, this.selectedStep.nbInfos, this.paginator.pageIndex);
+        }
+      },
+    );
   }
 
   getLogsSteps() {
@@ -66,19 +95,21 @@ export class LogsDataComponent implements OnChanges {
       );
     }
   }
-  getLogsSelector(step) {
-    this.tempStep = step;
+  getLogsSelector(step, counts) {
+    this.selectedStep.step = step;
+    this.selectedStep.nbErrors = counts.ERROR;
+    this.selectedStep.nbInfos = counts.INFO;
     this.allErrorLogs = [];
     this.allLogs = [];
     this.displayedStep = step;
     if (this.logTypes[0].selected === true) {
-      this.getErrorStepsLogs(step);
+      this.getErrorStepsLogs(step, this.selectedStep.nbErrors, 1);
     }
     if (this.logTypes[1].selected === true) {
-      this.getSimpleStepsLogs(step);
+      this.getSimpleStepsLogs(step, this.selectedStep.nbInfos, 1);
     }
   }
-  getErrorStepsLogs(step) {
+  getErrorStepsLogs(step, nbErrors, pageNumber) {
     if ((this.childUuid != null) && (this.childSessionId != null)) {
       // console.log('parameters', this.childUuid, this.childSessionId);
 
@@ -87,14 +118,19 @@ export class LogsDataComponent implements OnChanges {
         this.childSessionId,
         this.childUuid,
         'ERROR',
+        nbErrors,
+        pageNumber,
       ).subscribe((results) => {
         // console.log('results', results);
         this.allErrorLogs = results;
+        this.paginator.limit = this.dataLogsService.limit;
+        this.paginator.pageIndex = this.dataLogsService.pageNumber;
+        this.paginator.length = this.dataLogsService.length;
       },
       );
     }
   }
-  getSimpleStepsLogs(step) {
+  getSimpleStepsLogs(step, nbInfos, pageNumber) {
     if ((this.childUuid != null) && (this.childSessionId != null)) {
       // console.log('parameters', this.childUuid, this.childSessionId);
 
@@ -103,11 +139,25 @@ export class LogsDataComponent implements OnChanges {
         this.childSessionId,
         this.childUuid,
         'INFO',
+        nbInfos,
+        pageNumber,
       ).subscribe((results) => {
         // console.log('results', results);
         this.allLogs = results;
+        this.paginator.limit = this.dataLogsService.limit;
+        this.paginator.pageIndex = this.dataLogsService.pageNumber;
+        this.paginator.length = this.dataLogsService.length;
       },
       );
     }
   }
+
+    // When pagination is changed by user, we update datasetList with new pagination options
+  changePagination(pageIndex) {
+    this.dataLogsService.paginationChanged(this.paginator.limit, pageIndex);
+  }
+
+  changePageSize(pageSize) {
+    this.dataLogsService.paginationChanged(pageSize, 1);
+  }
 }

src/app/components/logs-dashboard/report/logs-report/logs-report.component.html

@@ -2,12 +2,25 @@
   <div class="section page-container">
     <app-page-header [pageInfo]="pageHeaderInfo" [goToThisUrl]='previousUrl' [hideBackButton]="false"></app-page-header>
 
-    <app-logs-graph [childUuid]="uuid" [childSessionId]="sessionId" [childSlug]="slug"></app-logs-graph>
-    <div class="columns is-centered ">
+    <ul class="tabs-container">
+        <li *ngFor="let tab of tabs" (click)="tabsToggler(tab.name)" [ngClass]="{'is-active':tab.isActive}">
+          <!-- [routerLink]="tab.fullRouterLinkPath" routerLinkActive="is-active" -->
+          <span class="tab-label">{{ tab.name }}</span>
+        </li>
+      </ul>
+
+
+    <app-logs-graph [hidden]="!isToggled" [childUuid]="uuid" [childSessionId]="sessionId" [childSlug]="slug"></app-logs-graph>
+    
+    
+    <div class="columns is-centered " [hidden]="isToggled">
         <hr>
         <h3>Détails de la session:</h3>
         <hr>
       </div>
-    <app-logs-data [childUuid]="uuid" [childSessionId]="sessionId" [childSlug]="slug"></app-logs-data>
+    
+      <app-logs-info [hidden]="isToggled||isToggled==undefined" [childUuid]="uuid" [childSessionId]="sessionId" [childSlug]="slug"></app-logs-info>
+      <app-logs-error [hidden]="isToggled!=undefined" [childUuid]="uuid" [childSessionId]="sessionId" [childSlug]="slug"></app-logs-error>
+
   </div>
 </ng-container>
\ No newline at end of file

src/app/components/logs-dashboard/report/logs-report/logs-report.component.scss

+@import "../../../../../scss/variables.scss";
+@import "../../../../../../node_modules/bulma/sass/utilities/_all.sass";
+
+figure {
+    text-align: center;
+  }
+  figure img{
+    max-width: 150px;
+    display: inline-block;
+    margin-top: 20px;
+  }
+  
+  .card-header-title {
+    justify-content: center;
+  }
+
+  .mini-log-card{
+    margin-top: 20px;
+    padding: 20px;
+    background-color: yellow;
+
+  }
+  .input-field{
+    width: 200%;
+    margin-top: 20px;
+  }
+
+  .hidden {
+    display: none;
+  }
+  .icon {
+    cursor: pointer;
+    &:hover {
+      .fa-plus {
+        color: lightblue;
+      }
+      .fa-trash {
+        color: #d5232a;
+      }
+    }
+  }
+  .tabs-container {
+  display: flex;
+  align-content: stretch;
+  flex-wrap: wrap;
+  border-bottom: 1px solid $grey-super-light-color;
+
+  li {
+    display: flex;
+    align-items: center;
+    padding-right: 2rem;
+    padding-bottom: 0.4rem;
+    padding-top: 0.4rem;
+    cursor: pointer;
+    position: relative;
+    margin-bottom: 1px;
+    width: 50%;
+
+    @media screen and (min-width: $tablet) {
+      width: 33%;
+      padding-right: 3rem;
+    }
+
+    @media screen and (min-width: $desktop) {
+      width: 20%;
+    }
+  }
+
+  li:last-child {
+    padding-right: 0;
+  }
+
+  .tab-label {
+    font-size: 1rem;
+    font-weight: 500;
+    color: $brand-color;
+  }
+
+  li:hover {
+    .tab-label {
+      font-weight: 700;
+    }
+  }
+
+  li:focus{
+    .tab-label {
+      color: $tomato-color;
+      font-weight: 700;
+    }
+  }
+  li.is-active {
+    .tab-label {
+      color: $tomato-color;
+      font-weight: 600;
+    }
+  }
+
+  li::after {
+    content: '';
+    display: block;
+    height: 2px;
+    background: $tomato-color;
+    width: 0;
+    position: absolute;
+    bottom: -2px;
+  }
+
+  li.is-active::after {
+    transition: width 0.3s;
+    width: 100%;
+  }
+}
+
+
 .full-width {
   width: 100%;
 }

src/app/components/logs-dashboard/report/logs-report/logs-report.component.ts

@@ -5,6 +5,7 @@ import { filter, switchMap } from 'rxjs/operators';
 import { Format } from 'src/app/models/format.model';
 import { DataLogsService } from 'src/app/services/data-logs.service';
 import { IPageHeaderInfo } from 'src/app/models/page.model';
+import { ISimpleTab } from 'src/app/models/basic-tabs.model';
 
 @Component({
   selector: 'app-logs-report',
@@ -16,6 +17,7 @@ export class LogsReportComponent implements OnInit {
     title: 'Data-Logs Report',
   };
   responseArray: any = [];
+  isToggled: boolean = true;
   form: FormGroup;
   title: string;
   slug: string ;
@@ -26,7 +28,20 @@ export class LogsReportComponent implements OnInit {
   urlCode: string = '';
   isSession:boolean = false;
   previousUrl: string;
-
+  tabs: ISimpleTab[] =  [
+    {
+      name: 'Graph',
+      isActive: true,
+    },
+    {
+      name: 'Infos',
+      isActive: false,
+    },
+    {
+      name: 'Errors',
+      isActive: false,
+    },
+  ];
   constructor(
     private _dataLogsService: DataLogsService,
     private _route: ActivatedRoute,
@@ -59,4 +74,27 @@ export class LogsReportComponent implements OnInit {
     );
   }
 
+  tabsToggler(tabName) {
+    if (tabName === 'Graph') {
+      this.isToggled = true;
+      this.tabs[1].isActive = false;
+      this.tabs[0].isActive = true;
+      this.tabs[2].isActive = false;
+
+    }
+    if (tabName === 'Infos') {
+      this.isToggled = false;
+      this.tabs[1].isActive = true;
+      this.tabs[0].isActive = false;
+      this.tabs[2].isActive = false;
+
+    }
+    if (tabName === 'Errors') {
+      this.isToggled = undefined;
+      this.tabs[2].isActive = true;
+      this.tabs[1].isActive = false;
+      this.tabs[0].isActive = false;
+    }
+  }
+
 }

src/app/components/paginator/paginator.component.ts

@@ -39,6 +39,7 @@ export class PaginatorComponent implements OnInit {
     this.scrollTop();
     if (this.pageIndex + 1 <= this.totalPages()) {
       this.page.emit(this.pageIndex + 1);
+      console.log(this.pageIndex + 1);
     }
   }
 
@@ -58,6 +59,8 @@ export class PaginatorComponent implements OnInit {
   changePageSize(size: number) {
     this.pageSize = size;
     this.pageSizeChanged.emit(this.pageSize);
+    console.log(this.pageSize);
+
   }
 
   getPages(): number[] {

src/app/services/data-logs.service.ts

@@ -11,19 +11,24 @@ export class DataLogsService {
   resourceServiceUrl: string;
   limit: number;
   pageNumber: number;
+  length: number;
   sortOptions: {
     value: string,
     order: string,
   };
 
   private _launchNewAggregationSubject: Subject<any>;
+  private _searchChangeSubject: Subject<any>;
 
   constructor(
     private _httpClient: HttpClient) {
     this.resourceServiceUrl = `${APP_CONFIG.restHeartAggregations.url}`;
     this._launchNewAggregationSubject = new Subject<any>();
-    this.limit = 10;
+    this._searchChangeSubject = new Subject<any>();
+
+    this.limit = 5;
     this.pageNumber = 1;
+    this.length = 1;
   }
 
   uuidToSessionId(uuid): Observable<any[]> {
@@ -159,11 +164,15 @@ export class DataLogsService {
     );
   }
 
-  getLogsStepsLogs(step, sessionId, uuid, loglevel): Observable<any[]> {
+  getLogsStepsLogs(step, sessionId, uuid, loglevel, nbLogs, pageNumber): Observable<any[]> {
     const query = { step, uuid, loglevel, session_id : sessionId };
-    const stringQuery = JSON.stringify(query);
+    let stringQuery = JSON.stringify(query);
+    this.length = nbLogs;
+    this.pageNumber = pageNumber;
+    stringQuery += `&pagesize=${(this.limit)}`;
+    stringQuery += `&page=${(pageNumber)}`;
     const aggregationEndPoint = '?filter=';
-    return this._httpClient.get<any[]>(this.resourceServiceUrl + aggregationEndPoint + stringQuery).pipe(
+    return this._httpClient.get<any>(this.resourceServiceUrl + aggregationEndPoint + stringQuery).pipe(
       map((response) => {
         return response;
       }),
@@ -194,4 +203,24 @@ export class DataLogsService {
 
   }
 
+    /* PAGINATION */
+  paginationChanged(limit: number, pageNumber: number) {
+    console.log('inside pagination changed : ', limit, pageNumber);
+    this.limit = limit;
+    this.pageNumber = pageNumber;
+    this._searchChangeSubject.next();
+
+  }
+
+  reverseSortOrder(): void {
+    if (this.sortOptions.order === 'asc') {
+      this.sortOptions.order = 'desc';
+    } else {
+      this.sortOptions.order = 'asc';
+    }
+  }
+  get searchChange$(): Observable<string> {
+    return this._searchChangeSubject.asObservable();
+  }
+
 }