diff --git a/src/app/components/index.ts b/src/app/components/index.ts
index bf1009fec3bdbee4dda4eff8617cb97ff4a11e96..7f1e30b9d58971ad2f9ce73a24c72cee11789485 100644
--- a/src/app/components/index.ts
+++ b/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,
diff --git a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.html b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.html
deleted file mode 100644
index 7e174e0e76c2d64c0bbe991e2ec5d9d61bfb9d33..0000000000000000000000000000000000000000
--- a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<div class="section">
- <label class="btn btn-outline-secondary" *ngFor="let logType of logTypes">
- <input type="checkbox" [(ngModel)]="logType.selected"> {{logType.name}}
- </label>
-</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>
- </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> -->
-
- <div *ngFor="let oneLog of allLogs">
-
- <div class="mini-log-card" *ngIf="oneLog">
- <span>
- <!-- <p>slug: {{oneLog.slug}} </p>
- <p>uuid: {{oneLog.uuid}} </p>
- <p>sessionId: {{oneLog.session_id}} </p> -->
- <h3>
- <p>step: {{oneLog.step}}</p>
- <p>status: {{oneLog.status}}</p>
- <p>info: {{oneLog.info}}</p>
- <p>progress-ratio: {{oneLog.progress_ratio}}</p>
-
- </h3>
- </span>
- </div>
- </div>
- <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>
\ No newline at end of file
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
new file mode 100644
index 0000000000000000000000000000000000000000..1137e233ddbfdc6fb1fd3a842b909901ad5cb25a
--- /dev/null
+++ b/src/app/components/logs-dashboard/report/logs-error/logs-error.component.html
@@ -0,0 +1,94 @@
+<!-- <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
diff --git a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.scss b/src/app/components/logs-dashboard/report/logs-error/logs-error.component.scss
similarity index 93%
rename from src/app/components/logs-dashboard/report/logs-data/logs-data.component.scss
rename to src/app/components/logs-dashboard/report/logs-error/logs-error.component.scss
index faa87dd1bd1a794621498ead6b04d4f87c98b653..91621a1498800586833571ca6c9105dc95dfe5e1 100644
--- a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.scss
+++ b/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;
+ }
diff --git a/src/app/components/logs-dashboard/report/logs-error/logs-error.component.ts b/src/app/components/logs-dashboard/report/logs-error/logs-error.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5ba199e7a49c7bda490890f2bb0fdec5af2b3bf9
--- /dev/null
+++ b/src/app/components/logs-dashboard/report/logs-error/logs-error.component.ts
@@ -0,0 +1,163 @@
+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);
+ }
+}
diff --git a/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.html b/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.html
index 015ef8e0a68d39107882e55a81287c5e0edfde21..aab7e313050a7ef234174da04ce76a608ef40e0f 100644
--- a/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.html
+++ b/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.html
@@ -1,19 +1,24 @@
-<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}} 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>
\ No newline at end of file
+</ng-container>
diff --git a/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.scss b/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.scss
index 04e7e7a073c13380c206cc5c8e8025f014d1ad3a..81e12ca709368a7309dbf7d9663108997ba8538d 100644
--- a/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.scss
+++ b/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.scss
@@ -1,3 +1,4 @@
.graph-div-canvas{
- width: 95%;
+ width: 80%;
+ left: 10%;
}
\ 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
new file mode 100644
index 0000000000000000000000000000000000000000..83e789607ea41ca5adab2c3612ad2d85ca4a5af1
--- /dev/null
+++ b/src/app/components/logs-dashboard/report/logs-info/logs-info.component.html
@@ -0,0 +1,112 @@
+<!-- <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 oneLog of allLogs">
+
+ <div class="mini-log-card" *ngIf="oneLog">
+ <span>
+ <!-- <p>slug: {{oneLog.slug}} </p>
+ <p>uuid: {{oneLog.uuid}} </p>
+ <p>sessionId: {{oneLog.session_id}} </p> -->
+ <h3>
+ <p>step: {{oneLog.step}}</p>
+ <p>status: {{oneLog.status}}</p>
+ <p>info: {{oneLog.info}}</p>
+ <p>progress-ratio: {{oneLog.progress_ratio}}</p>
+
+ </h3>
+
+ </span>
+ </div>
+ </div>
+ <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
diff --git a/src/app/components/logs-dashboard/report/logs-info/logs-info.component.scss b/src/app/components/logs-dashboard/report/logs-info/logs-info.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..91621a1498800586833571ca6c9105dc95dfe5e1
--- /dev/null
+++ b/src/app/components/logs-dashboard/report/logs-info/logs-info.component.scss
@@ -0,0 +1,60 @@
+@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;
+ }
+
+
diff --git a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts b/src/app/components/logs-dashboard/report/logs-info/logs-info.component.ts
similarity index 52%
rename from src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts
rename to src/app/components/logs-dashboard/report/logs-info/logs-info.component.ts
index 465b1cd4a09ddffd291e4748ca9ce89de3c03b0d..a1a3d607a069ed3e57c7ac16edf4b7416792e883 100644
--- a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts
+++ b/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);
+ }
}
diff --git a/src/app/components/logs-dashboard/report/logs-report/logs-report.component.html b/src/app/components/logs-dashboard/report/logs-report/logs-report.component.html
index e54d04c0b2c92586ea25962daf75aa62d00e1120..0c240089181d0889bdd490af1f6e8f6595522602 100644
--- a/src/app/components/logs-dashboard/report/logs-report/logs-report.component.html
+++ b/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
diff --git a/src/app/components/logs-dashboard/report/logs-report/logs-report.component.scss b/src/app/components/logs-dashboard/report/logs-report/logs-report.component.scss
index 0d8923b0348a24a396f4f5cd0dfcaa42e769518e..2fb6966f33587bbd022936394b6a91df27e628f0 100644
--- a/src/app/components/logs-dashboard/report/logs-report/logs-report.component.scss
+++ b/src/app/components/logs-dashboard/report/logs-report/logs-report.component.scss
@@ -1,3 +1,117 @@
+@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%;
}
diff --git a/src/app/components/logs-dashboard/report/logs-report/logs-report.component.ts b/src/app/components/logs-dashboard/report/logs-report/logs-report.component.ts
index aa4b22915fbef84ea9713c3bf0427274d467a467..7a87faf32f138390f8ec84736c7e0cf19aecebfd 100644
--- a/src/app/components/logs-dashboard/report/logs-report/logs-report.component.ts
+++ b/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;
+ }
+ }
+
}
diff --git a/src/app/components/paginator/paginator.component.ts b/src/app/components/paginator/paginator.component.ts
index 0debb3cfb0985ef9dcbd7c8d8542880645b099d7..53b60326350a82d101242cec4206a22c14f3d835 100644
--- a/src/app/components/paginator/paginator.component.ts
+++ b/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[] {
diff --git a/src/app/services/data-logs.service.ts b/src/app/services/data-logs.service.ts
index 3b3dcd0f487c58dcc9a5ad4a9e87f8a1820cf504..2dbbfe6f1baec04013baf7a0e20377279a7edba9 100644
--- a/src/app/services/data-logs.service.ts
+++ b/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();
+ }
+
}