diff --git a/src/app/components/index.ts b/src/app/components/index.ts index c27042c18e06ed289627eac91c8ec0f60feaa9c4..fc91f8712dd2cebba33644bce5a6951d59e8f129 100644 --- a/src/app/components/index.ts +++ b/src/app/components/index.ts @@ -16,6 +16,8 @@ import { ImageUploadComponent } from './image-upload/image-upload.component'; import { NotificationsComponent } from './notifications/notifications.component'; import { LogsDataComponent } from './logs-dashboard/logs-data/logs-data.component'; import { LogsGraphComponent } from './logs-dashboard/logs-graph/logs-graph.component'; +import { LogsSessionsComponent } from './logs-dashboard/logs-sessions/logs-sessions.component'; + export { MenuComponent, @@ -36,6 +38,7 @@ export { NotificationsComponent, LogsDataComponent, LogsGraphComponent, + LogsSessionsComponent, }; // tslint:disable-next-line:variable-name @@ -58,4 +61,5 @@ export const AppComponents = [ NotificationsComponent, LogsDataComponent, LogsGraphComponent, + LogsSessionsComponent, ]; diff --git a/src/app/components/logs-dashboard/logs-data/logs-data.component.html b/src/app/components/logs-dashboard/logs-data/logs-data.component.html index 56e34a632cbbe2ff99530d06026395c2ee0960fb..9719aac7dd794c0c1cf57fff3f152e174a814805 100644 --- a/src/app/components/logs-dashboard/logs-data/logs-data.component.html +++ b/src/app/components/logs-dashboard/logs-data/logs-data.component.html @@ -1,80 +1,86 @@ <div class="section"> - - <div class="input-field"> - <form > - <label>uuid: </label> - <input type="text" size="40" name="uuid" [(ngModel)]="uuid"> - <br> - <label>sessionId: </label> - <input type="text" size="40" name="sessionId" [(ngModel)]="sessionId"> - <label>slug: </label> - <input type="text" size="40" name="slug" [(ngModel)]="slug"> - </form> - <br> - <a class="button button-gl is-centered" (click)="onSubmit()"> - Afficher - </a> + + <div class="input-field"> + <form> + <label>uuid: </label> + <input type="text" size="40" name="uuid" [(ngModel)]="uuid"> + <br> + <label>sessionId: </label> + <input type="text" size="40" name="sessionId" [(ngModel)]="sessionId"> + <label>slug: </label> + <input type="text" size="40" name="slug" [(ngModel)]="slug"> + </form> + <br> + <a class="button button-gl is-centered" (click)="onSubmit()"> + Display Steps Duration + </a> + </div> + <div class="columns is-centered is-marginless"> + <div class="column has-text-centered"> + <h2>{{ nbSessionId }} sessionId trouvées</h2> + <div *ngFor="let s of allFields.session_id_list"> + <p>{{s}} </p> + </div> + + <h2>{{ nbSlug }} slugs trouvées</h2> + <div *ngFor="let slg of allFields.slug_list"> + <p>{{slg}} </p> + </div> + <h2>{{ nbUuid }} uuid trouvées</h2> + <div *ngFor="let ul of allFields.uuid_list"> + <p>{{ul}} </p> + </div> + </div> - <div class="columns is-centered is-marginless"> - <div class="column has-text-centered"> - <h2>{{ nbSessionId }} sessionId trouvées</h2> - <div *ngFor="let s of allFields.session_id_list"> - <p>{{s}} </p> - </div> - - <h2>{{ nbSlug }} slugs trouvées</h2> - <div *ngFor="let slg of allFields.slug_list"> - <p>{{slg}} </p> - </div> - <h2>{{ nbUuid }} uuid trouvées</h2> - <div *ngFor="let ul of allFields.uuid_list"> - <p>{{ul}} </p> - </div> + </div> + <div class="columns is-centered is-marginless"> + <div class="column has-text-centered"> + + <app-logs-sessions [childSessionId]="sessionId" [childNbSessions]="nbSessionId" [childSessionsList]="allFields.session_id_list"></app-logs-sessions> - </div> + </div> </div> <div class="columns is-centered is-marginless"> <div class="column has-text-centered"> <div *ngFor="let a of [data]"> - <hr> + <hr> <span> - <h3> - uuid: {{a.uuid}} - </h3> - <p>|</p> - <p>V</p> - - session_id list: - <div *ngFor="let s of a.sessionIdList"> - {{s}} - </div> + <h3> + uuid: {{a.uuid}} + </h3> + <p>|</p> + <p>V</p> + session_id list: + <div *ngFor="let s of a.sessionIdList"> + {{s}} + </div> </span> + </div> </div> - </div> - - <div class="column has-text-centered"> + <div class="column has-text-centered"> <div *ngFor="let oneStepData of allStepsData"> <div class="mini-log-card"> <span> - <p>slug: {{oneStepData._id.slug}} </p> + <p>slug: {{oneStepData._id.slug}} </p> <p>uuid: {{oneStepData._id.uuid}} </p> - <p>sessionId: {{oneStepData._id.session_id}} </p> + <p>sessionId: {{oneStepData._id.session_id}} </p> <h3> - <p>step: {{oneStepData._id.step}}</p> - <p>total-time: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m : {{oneStepData.totalSecondsSpent}}s </p> + <p>step: {{oneStepData._id.step}}</p> + <p>total-time: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m : + {{oneStepData.totalSecondsSpent}}s </p> </h3> - </span> + </span> + </div> </div> + </div> - </div> + <div class="table"> + </div> - <div class="table"> - </div> - -</div> + </div> -<app-logs-graph></app-logs-graph> \ No newline at end of file + <app-logs-graph [childUuid]="uuid" [childSessionId]="sessionId" [childSlug]="slug"></app-logs-graph> \ No newline at end of file diff --git a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.html b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.html index e6218fc4c7ba432983e57f3d89ab431d5cbe7641..015ef8e0a68d39107882e55a81287c5e0edfde21 100644 --- a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.html +++ b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.html @@ -1,5 +1,4 @@ <p> - graph-logs works! </p> <div class="graph-component"> <div *ngFor="let data of this.graphData"> @@ -7,8 +6,13 @@ </div> </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> </div> diff --git a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.scss b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.scss index 17c0def17fcc5e21e50addd46ee7e6a14799074d..04e7e7a073c13380c206cc5c8e8025f014d1ad3a 100644 --- a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.scss +++ b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.scss @@ -1,3 +1,3 @@ .graph-div-canvas{ - width: 60%; + width: 95%; } \ No newline at end of file diff --git a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.ts b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.ts index 747c2812da7b4854fbf9fcff664d6eadd4b53540..b4d074746867508e98d7575f0b12af88b9b35a3f 100644 --- a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.ts +++ b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; import { Chart } from 'chart.js'; import { DataLogsService } from 'src/app/services/data-logs.service'; import { ActivatedRoute, ParamMap } from '@angular/router'; @@ -12,6 +12,10 @@ import { FormsModule } from '@angular/forms'; styleUrls: ['./logs-graph.component.scss'], }) export class LogsGraphComponent implements OnInit { + @Input() childUuid: string; + @Input() childSessionId: string; + @Input() childSlug: string; + public myChart: Chart; graphData: any; uuid: string; @@ -28,9 +32,7 @@ export class LogsGraphComponent implements OnInit { this.graphData = [0.2, 0.3]; this.xValues = []; this.yValues = []; - this.dataset = [] - this.uuid = 'c1b069ca-181d-4265-9838-8d182f207bd3'; - this.sessionId = '372b59a4-72b0-4a3a-b518-843e516da0cd'; + this.dataset = []; this.getData(); this.myChart.update(); @@ -38,17 +40,21 @@ export class LogsGraphComponent implements OnInit { plotGraph() { - this.myChart = new Chart(document.getElementById("graphCanvas"), { + this.myChart = new Chart(document.getElementById('graphCanvas'), { type: 'scatter', data: { datasets: this.dataset, }, options: { + title: { + display: true, + text: 'Logs-chart: progress-report.', + }, elements: { line: { - tension: 0, // disables bezier curves + tension: 0, // disables bezier curves }, - }, + }, responsive: true, scales: { xAxes: [{ @@ -56,7 +62,7 @@ export class LogsGraphComponent implements OnInit { display: true, scaleLabel: { display: true, - labelString: 'Date', + labelString: 'Time', }, ticks: { major: { @@ -79,8 +85,9 @@ export class LogsGraphComponent implements OnInit { } getXYValuesFromData() { - const color = ["red", "yellow", "blue", "black", "pink", "green", "orange"]; - let c=0; + const color = ['red', 'yellow', 'blue', 'black', 'pink', 'green', 'orange']; + let c = 0; + this.dataset = []; for (const data of this.graphData) { const arrayOfXY = []; for (const i in data.values) { @@ -104,13 +111,17 @@ export class LogsGraphComponent implements OnInit { c += 1; } } + replotGraph() { + this.myChart.destroy(); + this.getData(); + this.myChart.update(); + } getData() { - this.dataLogsService.getData(this.uuid, this.sessionId).subscribe((results) => { + this.dataLogsService.getData(this.childUuid, this.childSessionId).subscribe((results) => { console.log(results); this.graphData = results; this.getXYValuesFromData(); this.plotGraph(); - }, ); } 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 new file mode 100644 index 0000000000000000000000000000000000000000..8c6361cb96d83d4314d7f9dcd702f3cdd6a0a256 --- /dev/null +++ b/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.html @@ -0,0 +1,68 @@ +<ng-container > + <div> + <div class="section"> + <div class="columns is-centered is-marginless"> + <div class="column has-text-centered"> + <h2>{{ childNbSessions }} Sessions trouvées</h2> + </div> + </div> + + <div class="table"> + <div class="header columns is-marginless"> + <div class="column is-4 has-text-centered"> + <span (click)="sortBy('name')" class="is-sortable"> + <span class="column-title" >SessionId</span> + <p></p> + </span> + </div> + <div class="column is-1 has-text-centered"> + <span class="column-title">All ?</span> + </div> + <div class="column is-2 has-text-centered"> + <span class="column-title">Completion Date</span> + </div> + <div class="column is-2 has-text-centered"> + <span class="column-title">Duration</span> + </div> + <div class="column is-1 has-text-centered"> + <span class="column-title">Errors?</span> + </div> + <div class="column is-offset-1 is-1 has-text-centered"> + <span class="column-title"></span> + </div> + </div> + <div class="data-list"> + <div class="data columns is-multiline is-vcentered is-marginless" + *ngFor="let sessionId of childSessionsList; let i=index;"> + <div class="column is-4 has-text-centered"> + {{ sessionId }} + </div> + <div class="column is-1 has-text-centered"> + <!-- {{ format.mapServerType}} --> + </div> + <div class="column is-2 has-text-centered"> + <span class="column-title">Completion Date</span> + </div> + <div class="column is-2 has-text-centered"> + <span class="column-title">Duration</span> + </div> + <div class="column is-1 has-text-centered actions"> + </div> + <div class="column is-offset-1 is-1 has-text-centered actions"> + <app-crud-buttons ></app-crud-buttons> + </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> + </ng-container> \ No newline at end of file diff --git a/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.scss b/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 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 new file mode 100644 index 0000000000000000000000000000000000000000..4ce05de95a50ca803977427d077f71f31ea69199 --- /dev/null +++ b/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit, 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'; +@Component({ + selector: 'app-logs-sessions', + templateUrl: './logs-sessions.component.html', + styleUrls: ['./logs-sessions.component.scss'], +}) +export class LogsSessionsComponent implements OnInit { + @Input() childSessionId: string; + @Input() childSessionsList: any; + @Input() childNbSessions: number; + + constructor() { } + + ngOnInit() { + } + +}