diff --git a/src/app/app.routing.module.ts b/src/app/app.routing.module.ts
index e13d295433b54cde2c17e0d613eb9beb2b0bb079..bd1e3dd11913c815ebccfe6c0719eba08ce5990e 100644
--- a/src/app/app.routing.module.ts
+++ b/src/app/app.routing.module.ts
@@ -9,8 +9,11 @@ import { ResourceFormComponent } from './components/resources/edit/resource-form
 import { ResourceDetailComponent } from './components/resources/detail/resource-detail.component';
 import { FormatsComponent, FormatDetailComponent, FormatFormComponent } from './components';
 import { AuthenticatedGuard } from './user/guards/authenticated.guard';
-import { LogsDataComponent } from './components/logs-dashboard/logs-data/logs-data.component';
-import { LogsGraphComponent } from './components/logs-dashboard/logs-graph/logs-graph.component';
+import { LogsDataComponent } from './components/logs-dashboard/report/logs-data/logs-data.component';
+import { LogsGraphComponent } from './components/logs-dashboard/report/logs-graph/logs-graph.component';
+import { LogsPreReportComponent } from './components/logs-dashboard/report/logs-pre-report/logs-pre-report.component';
+import { LogsReportComponent } from './components/logs-dashboard/report/logs-report/logs-report.component';
+import { LogsHomeComponent } from './components/logs-dashboard/logs-home/logs-home.component';
 
 const appRoutes: Routes = [
   {
@@ -119,12 +122,28 @@ const appRoutes: Routes = [
   },
   {
     path: 'datalogs',
-    component: LogsDataComponent,
+    component: LogsHomeComponent,
     canActivate: [AuthenticatedGuard],
     data: {
       title: 'datalogs',
     },
   },
+  {
+    path: 'datalogs/preReport/:type/:id',
+    component: LogsPreReportComponent,
+    canActivate: [AuthenticatedGuard],
+    data: {
+      title: 'preReport',
+    },
+  },
+  {
+    path: 'datalogs/report/:slug/:sessionId/:urlCode',
+    component: LogsReportComponent,
+    canActivate: [AuthenticatedGuard],
+    data: {
+      title: 'report',
+    },
+  },
 ];
 
 @NgModule({
diff --git a/src/app/components/index.ts b/src/app/components/index.ts
index a37c9afcf4f00b44c4cfc1db414c60c23101f002..3e5157edc2c88dd8334b322f0b4881844cb2e233 100644
--- a/src/app/components/index.ts
+++ b/src/app/components/index.ts
@@ -14,10 +14,13 @@ 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/logs-data/logs-data.component';
-import { LogsGraphComponent } from './logs-dashboard/logs-graph/logs-graph.component';
+import { LogsDataComponent } from './logs-dashboard/report/logs-data/logs-data.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';
+import { LogsPreReportComponent } from './logs-dashboard/report/logs-pre-report/logs-pre-report.component';
+import { LogsReportComponent } from './logs-dashboard/report/logs-report/logs-report.component';
+import { LogsHomeComponent } from './logs-dashboard/logs-home/logs-home.component';
 
 export {
   MenuComponent,
@@ -40,6 +43,9 @@ export {
   LogsGraphComponent,
   LogsSessionsComponent,
   LogsSlugsComponent,
+  LogsPreReportComponent,
+  LogsReportComponent,
+  LogsHomeComponent,
 };
 
 // tslint:disable-next-line:variable-name
@@ -64,4 +70,7 @@ export const AppComponents = [
   LogsGraphComponent,
   LogsSessionsComponent,
   LogsSlugsComponent,
+  LogsPreReportComponent,
+  LogsReportComponent,
+  LogsHomeComponent,
 ];
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
new file mode 100644
index 0000000000000000000000000000000000000000..111a7965018e7f4b8dc79e0f130aa9d8e67eca74
--- /dev/null
+++ b/src/app/components/logs-dashboard/logs-home/logs-home.component.html
@@ -0,0 +1,37 @@
+<div class="section">
+  <div class="columns is-centered is-marginless">
+    <div class="input-field">
+      <form>
+        <label> Slug/Uuid: </label>
+        <input type="text" size="40" name="slug" [(ngModel)]="slug">
+         &nbsp;
+        <label> SessionId: </label>
+        <input type="text" size="40" name="sessionId" [(ngModel)]="sessionId">
+
+        <a class="button button-gl " [routerLink]="['report', slug, sessionId, 'home']">
+          <i class="fas fa-search"></i>
+        </a>
+      </form>
+      <br>
+
+
+      <a class="button button-gl is-centered" (click)="tabsToggler(true)">
+        Slugs
+      </a>
+      <a class="button button-gl is-centered" (click)="tabsToggler(false)">
+        Sessions
+      </a>
+
+    </div>
+  </div>
+
+  <div class="columns is-centered is-marginless">
+    <div class="column has-text-centered is-marginless">
+      <app-logs-sessions [hidden]="isToggled" [childSessionId]="sessionId" [childNbSessions]="nbSessionId">
+      </app-logs-sessions>
+      <app-logs-slugs [hidden]="!isToggled" [childSlugsList]="allFields.slug_list" [childNbSlugs]="nbSlug"
+        [childNbUuids]="nbUuid"></app-logs-slugs>
+    </div>
+  </div>
+
+
diff --git a/src/app/components/logs-dashboard/logs-data/logs-data.component.scss b/src/app/components/logs-dashboard/logs-home/logs-home.component.scss
similarity index 100%
rename from src/app/components/logs-dashboard/logs-data/logs-data.component.scss
rename to src/app/components/logs-dashboard/logs-home/logs-home.component.scss
diff --git a/src/app/components/logs-dashboard/logs-home/logs-home.component.ts b/src/app/components/logs-dashboard/logs-home/logs-home.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..03e064b2d64ac4ccd9a0ee20737c910def5e1a8f
--- /dev/null
+++ b/src/app/components/logs-dashboard/logs-home/logs-home.component.ts
@@ -0,0 +1,79 @@
+import { Component, OnInit } 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-home',
+  templateUrl: './logs-home.component.html',
+  styleUrls: ['./logs-home.component.scss'],
+})
+export class LogsHomeComponent implements OnInit {
+  isDashboardDisplayed: boolean = false;
+  uuid: string;
+  allFields: any;
+  sessionId: string;
+  slug: string;
+  data: any;
+  stepData: ILogs;
+  allStepsData: any;
+  nbSessionId: number;
+  nbUuid: number;
+  nbSlug: number;
+  isToggled: boolean;
+
+  sessionIdList: [string];
+  constructor(
+    private dataLogsService: DataLogsService,
+    private route: ActivatedRoute,
+  ) { }
+
+  ngOnInit() {
+    this.isToggled = true;
+    this.data = [];
+    this.uuid = 'c1b069ca-181d-4265-9838-8d182f207bd3';
+    this.sessionId = '372b59a4-72b0-4a3a-b518-843e516da0cd';
+    this.slug = 'arbres-alignement-metropole-lyon';
+    this.allStepsData = [];
+    this.allFields = [];
+    this.getAllUniqueFields();
+
+  }
+
+  onSubmit() {
+    this.isDashboardDisplayed = true;
+    this.isToggled = false;
+    this.dataLogsService.uuidToSessionId(this.uuid)
+    .subscribe((result) => {
+      this.data.uuid = result[0]._id.uuid;
+      this.data.sessionIdList = result[0].session_id_list;
+    },
+    );
+    this.dataLogsService.getAllStepsDuration(
+    this.uuid,
+    this.sessionId,
+  ).subscribe((results) => {
+    console.log('results', results);
+    this.allStepsData = results;
+  },
+  );
+  }
+
+  getAllUniqueFields() {
+    this.dataLogsService.getAllUniqueFields().subscribe((result) => {
+      this.allFields = result[0];
+      this.nbSessionId = result[0]['session_id_list'].length;
+      this.nbUuid = result[0]['uuid_list'].length;
+      this.nbSlug = result[0]['slug_list'].length;
+
+    },
+    );
+  }
+  tabsToggler(oneBoolean) {
+    this.isToggled = oneBoolean;
+    this.isDashboardDisplayed = false;
+  }
+
+}
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 04f36d8230ca0139074da23b0329aebf779a7aad..0fd69dd1f1a6e37b45ff088631f99676831b7704 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
@@ -52,7 +52,7 @@
                 0
               </div>
               <div class="column is-1 actions"> 
-                  <a class="button button-gl " (click)="onSubmit()">
+                  <a class="button button-gl " [routerLink]="['preReport','session', session._id]">
                       <i class="fas fa-eye"></i> Voir
                   </a>
               </div>
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 1fc59e535f56c1989d329cc263fe33f6deb8e8fb..e4edb3bc4ea696613b45ac5930233d9a2d6670ad 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
@@ -15,7 +15,7 @@ export class LogsSessionsComponent implements OnInit {
   @Input() childNbSessions: number;
   allSessionsIdInfo: [];
   childSessionsList: any;
-
+  urlCode: string = 'sessionUrl';
   constructor(
     private dataLogsService: DataLogsService,
   ) { }
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 e3ecc3f039710b2ee519b41c067ac02932dc970f..c844b77d6b77d0113e65ebb1006fc0861ba75c4b 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
@@ -5,11 +5,7 @@
         <div class="column has-text-left">
           <div class="columns is-centered is-marginless">
             <div class="column has-text-left">
-
               <h2>{{ childNbSlugs -1 }} slugs trouvées</h2>
-
-              <h2>{{ childNbUuids }} uuid trouvées</h2>
-
             </div>
           </div>
         </div>
@@ -58,7 +54,7 @@
 
             </div>
             <div class="column  is-1 has-text-centered actions"> 
-                <a class="button button-gl is-centered" (click)="onSubmit()">
+                <a class="button button-gl is-centered" [routerLink]="['preReport','slug', slug]">
                     <i class="fas fa-eye"></i> Voir
                   </a>
             </div>
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 d851fd72d68ce004e938303dd2fed421ddc1d8fe..87331e91a68ede41a7e0c3913bb7726a421c7e5b 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
@@ -15,6 +15,7 @@ export class LogsSlugsComponent implements OnInit {
   @Input() childSlugsList: any;
   @Input() childNbSlugs: any;
   @Input() childNbUuids: any;
+  urlCode: string = 'slugUrl';
 
   allSessionsIdInfo: [];
   childSessionsList: any;
diff --git a/src/app/components/logs-dashboard/logs-data/logs-data.component.html b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.html
similarity index 100%
rename from src/app/components/logs-dashboard/logs-data/logs-data.component.html
rename to src/app/components/logs-dashboard/report/logs-data/logs-data.component.html
diff --git a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.scss b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fb31c60a8f490f55699c010d6888cf52f723cf1d
--- /dev/null
+++ b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.scss
@@ -0,0 +1,27 @@
+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;
+  }
\ No newline at end of file
diff --git a/src/app/components/logs-dashboard/logs-data/logs-data.component.ts b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts
similarity index 97%
rename from src/app/components/logs-dashboard/logs-data/logs-data.component.ts
rename to src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts
index 440cc9d77a2027e75d7d151ac8d99b395845d0f3..d230e4b5466d9efeea4b2ccae888594482ae1601 100644
--- a/src/app/components/logs-dashboard/logs-data/logs-data.component.ts
+++ b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts
@@ -71,8 +71,8 @@ export class LogsDataComponent implements OnInit {
     },
     );
   }
-  tabsToggler(boolean) {
-    this.isToggled = boolean;
+  tabsToggler(oneBoolean) {
+    this.isToggled = oneBoolean;
     this.isDashboardDisplayed = false;
   }
 
diff --git a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.html b/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.html
similarity index 100%
rename from src/app/components/logs-dashboard/logs-graph/logs-graph.component.html
rename to src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.html
diff --git a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.scss b/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.scss
similarity index 100%
rename from src/app/components/logs-dashboard/logs-graph/logs-graph.component.scss
rename to src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.scss
diff --git a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.ts b/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.ts
similarity index 97%
rename from src/app/components/logs-dashboard/logs-graph/logs-graph.component.ts
rename to src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.ts
index b4d074746867508e98d7575f0b12af88b9b35a3f..1415e940f7221bdaae360624c0d409c693203da7 100644
--- a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.ts
+++ b/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.ts
@@ -34,7 +34,7 @@ export class LogsGraphComponent implements OnInit {
     this.yValues = [];
     this.dataset = [];
     this.getData();
-    this.myChart.update();
+    // this.myChart.update();
 
   }
 
@@ -112,7 +112,7 @@ export class LogsGraphComponent implements OnInit {
     }
   }
   replotGraph() {
-    this.myChart.destroy();
+    // this.myChart.destroy();
     this.getData();
     this.myChart.update();
   }
diff --git a/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.html b/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..9449cf2d87dcb1e638a3863a0106519b08e3d3cc
--- /dev/null
+++ b/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.html
@@ -0,0 +1,158 @@
+<ng-container 
+*ngIf="nbObjects!==0"
+>
+
+  <app-back-button [route]="'/datalogs'" [title]="'Retourner à la liste des slugs et sessionIds'"></app-back-button>
+
+  <h1>{{ title }}</h1>
+  <div [ngClass]="{'hidden': isSession}">
+    <div class="section">
+      <div class="columns is-centered is-marginless">
+        <div class="column has-text-left">
+          <h2>{{ nbObjects }} 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-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 session of responseArray.session_id_list; let i=index;">
+            <div class="column is-4 has-text-centered">
+              {{ session }}
+            </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">{{ session.totalHoursSpent }}:
+                {{ session.totalMinutesSpent }}:
+                {{ session.totalSecondsSpent }}</span>
+            </div>
+            <div class="column  is-1 has-text-centered actions">
+              0
+            </div>
+            <div class="column is-1 actions"> 
+                <a class="button button-gl " [routerLink]="['../../../../datalogs/report', id, session, 'slug']">
+                    <i class="fas fa-eye"></i> Voir
+                </a>
+            </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>
+
+  <div [ngClass]="{'hidden': !isSession}" >
+    <div class="section">
+      <div class="columns is-left is-marginless">
+        <div class="column has-text-left">
+          <div class="columns is-centered is-marginless">
+            <div class="column has-text-left">
+
+              <h2>{{ nbObjects -1 }} slugs trouvées</h2>
+
+              <!-- <h2>{{ childNbUuids }} uuid trouvées</h2> -->
+
+            </div>
+          </div>
+        </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">Slugs</span>
+              <p></p>
+            </span>
+          </div>
+          <div class="column is-1 has-text-centered">
+            <span class="column-title">Uuids</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">Last</span>
+          </div>
+          <div class="column  is-1 has-text-centered">
+            <span class="column-title">Errors?</span>
+          </div>
+          <div class="column  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 slug of responseArray.slug_list; let i=index;">
+            <div class="column is-4 has-text-centered">
+              {{ slug }}
+            </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"></span>
+            </div>
+            <div class="column  is-1 has-text-centered actions">
+
+            </div>
+            <div class="column is-1 actions"> 
+                <a class="button button-gl " [routerLink]="['../../../../datalogs/report', slug, id, 'session']">
+                    <i class="fas fa-eye"></i> Voir
+                </a>
+            </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>
+  </div>
+
+</ng-container>
\ No newline at end of file
diff --git a/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.scss b/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0d8923b0348a24a396f4f5cd0dfcaa42e769518e
--- /dev/null
+++ b/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.scss
@@ -0,0 +1,22 @@
+.full-width {
+  width: 100%;
+}
+
+h1 {
+  text-align: center
+}
+
+.icon {
+  cursor: pointer;
+  &:hover {
+    .fa-plus {
+      color: lightblue;
+    }
+    .fa-trash {
+      color: #d5232a;
+    }
+  }
+}
+.hidden {
+  display: none;
+}
\ No newline at end of file
diff --git a/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.ts b/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e69f7c335ce97208c17ad8dc47b7d315ab2683d7
--- /dev/null
+++ b/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.ts
@@ -0,0 +1,60 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { filter, switchMap } from 'rxjs/operators';
+import { Format } from 'src/app/models/format.model';
+import { DataLogsService } from 'src/app/services/data-logs.service';
+
+@Component({
+  selector: 'app-logs-pre-report',
+  templateUrl: './logs-pre-report.component.html',
+  styleUrls: ['./logs-pre-report.component.scss'],
+})
+export class LogsPreReportComponent implements OnInit {
+
+  responseArray: any = [];
+  form: FormGroup;
+  title: string;
+  type: string ;
+  id: string;
+  serviceName:string;
+  nbObjects: number = 0;
+  isSession:boolean = false;
+
+  constructor(
+    private _dataLogsService: DataLogsService,
+    private _route: ActivatedRoute,
+    private _router: Router,
+    private _fb: FormBuilder,
+  ) {
+  }
+
+  ngOnInit() {
+    this.title = this._route.snapshot.data.title;
+    this.id = this._route.snapshot.paramMap.get('id');
+    this.type = this._route.snapshot.paramMap.get('type');
+    if (this.type === 'session') {
+      this.isSession = true;
+    }
+
+    this._route.paramMap.pipe(
+      filter((paramMap: ParamMap) => (paramMap.get('id') !== null)),
+      filter((paramMap: ParamMap) => (paramMap.get('type') !== null)),
+      switchMap((paramMap: ParamMap) => this._dataLogsService.getComplementaryFromSlugOrSession(
+        paramMap.get('type'),
+        paramMap.get('id'))))
+      .subscribe((response) => {
+
+        this.responseArray = response[0];
+        if (this.type === 'session') {
+          this.nbObjects = response[0].slug_list.length;
+        } else {
+          this.nbObjects = response[0].session_id_list.length;
+        }
+        console.log('responseArray: ', this.responseArray);
+        console.log('nbObjects: ', this.nbObjects);
+
+      });
+  }
+
+}
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
new file mode 100644
index 0000000000000000000000000000000000000000..b08386b465dca9e016a11d349322205988f143b1
--- /dev/null
+++ b/src/app/components/logs-dashboard/report/logs-report/logs-report.component.html
@@ -0,0 +1,10 @@
+<ng-container >
+
+  <app-back-button [routerLink]="previousUrl" [title]="'Retourner au pre-report'"></app-back-button>
+
+  <h1>{{ title }}</h1>
+
+
+  <app-logs-graph [childUuid]="uuid" [childSessionId]="sessionId" [childSlug]="slug"></app-logs-graph>
+
+</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
new file mode 100644
index 0000000000000000000000000000000000000000..0d8923b0348a24a396f4f5cd0dfcaa42e769518e
--- /dev/null
+++ b/src/app/components/logs-dashboard/report/logs-report/logs-report.component.scss
@@ -0,0 +1,22 @@
+.full-width {
+  width: 100%;
+}
+
+h1 {
+  text-align: center
+}
+
+.icon {
+  cursor: pointer;
+  &:hover {
+    .fa-plus {
+      color: lightblue;
+    }
+    .fa-trash {
+      color: #d5232a;
+    }
+  }
+}
+.hidden {
+  display: none;
+}
\ No newline at end of file
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
new file mode 100644
index 0000000000000000000000000000000000000000..4253a25db94b114fd3d54f6d9ff0cb1fbc35f788
--- /dev/null
+++ b/src/app/components/logs-dashboard/report/logs-report/logs-report.component.ts
@@ -0,0 +1,78 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { filter, switchMap } from 'rxjs/operators';
+import { Format } from 'src/app/models/format.model';
+import { DataLogsService } from 'src/app/services/data-logs.service';
+
+@Component({
+  selector: 'app-logs-report',
+  templateUrl: './logs-report.component.html',
+  styleUrls: ['./logs-report.component.scss'],
+})
+export class LogsReportComponent implements OnInit {
+
+  responseArray: any = [];
+  form: FormGroup;
+  title: string;
+  slug: string ;
+  uuid:string;
+  previousUrl: string ;
+  sessionId: string;
+  serviceName:string;
+  nbObjects: number = 0;
+  urlCode: string = '';
+  isSession:boolean = false;
+
+  constructor(
+    private _dataLogsService: DataLogsService,
+    private _route: ActivatedRoute,
+    private _router: Router,
+    private _fb: FormBuilder,
+  ) {
+  }
+
+  ngOnInit() {
+    this.title = this._route.snapshot.data.title;
+    this.sessionId = this._route.snapshot.paramMap.get('sessionId');
+    this.slug = this._route.snapshot.paramMap.get('slug');
+    this.urlCode = this._route.snapshot.paramMap.get('urlCode');
+    if (this.urlCode === 'session') {
+      this.previousUrl = '/datalogs/preReport/session/' + this.sessionId;
+
+    } else if (this.urlCode === 'slug') {
+      this.previousUrl = '/datalogs/preReport/slug/' + this.slug;
+    } else {
+      this.previousUrl = '/datalogs';
+    }
+    this.getUuidFromSlug(this.slug);
+
+    // this._route.paramMap.pipe(
+    //   filter((paramMap: ParamMap) => (paramMap.get('id') !== null)),
+    //   filter((paramMap: ParamMap) => (paramMap.get('type') !== null)),
+    //   switchMap((paramMap: ParamMap) => this._dataLogsService.getComplementaryFromSlugOrSession(
+    //     paramMap.get('type'),
+    //     paramMap.get('id'))))
+    //   .subscribe((response) => {
+
+    //     this.responseArray = response[0];
+    //     if (this.type === 'session') {
+    //       this.nbObjects = response[0].slug_list.length;
+    //     } else {
+    //       this.nbObjects = response[0].session_id_list.length;
+    //     }
+    //     console.log('responseArray: ', this.responseArray);
+    //     console.log('nbObjects: ', this.nbObjects);
+
+    //   });
+  }
+
+  getUuidFromSlug(slug) {
+    this._dataLogsService.getUuidFromSlug(slug).subscribe((result) => {
+      console.log(result[0]);
+      this.uuid = result[0].uuid_list[0];
+    },
+    );
+  }
+
+}
diff --git a/src/app/services/data-logs.service.ts b/src/app/services/data-logs.service.ts
index cc60917f527f94c3fb0b662e21b8891ea8d8b10c..b5a90f8aa7a0ed40af75d73097901ab8988213c9 100644
--- a/src/app/services/data-logs.service.ts
+++ b/src/app/services/data-logs.service.ts
@@ -19,7 +19,7 @@ export class DataLogsService {
   private _launchNewAggregationSubject: Subject<any>;
 
   constructor(
-      private _httpClient: HttpClient) {
+    private _httpClient: HttpClient) {
     this.resourceServiceUrl = `${APP_CONFIG.restHeartAggregations.url}`;
     this._launchNewAggregationSubject = new Subject<any>();
     this.limit = 10;
@@ -27,7 +27,7 @@ export class DataLogsService {
   }
 
   uuidToSessionId(uuid): Observable<any[]> {
-    const query = { uuid : uuid };
+    const query = { uuid: uuid };
     const aggregationEndPoint = 'uuidToSessionId?avars=';
     const stringQuery = JSON.stringify(query);
     return this._httpClient.get<any[]>(this.resourceServiceUrl + aggregationEndPoint + stringQuery).pipe(
@@ -38,7 +38,7 @@ export class DataLogsService {
   }
 
   getAllStepsDuration(uuid, sessionId): Observable<any[]> {
-    const query = { uuid : uuid, session_id: sessionId };
+    const query = { uuid: uuid, session_id: sessionId };
     const aggregationEndPoint = 'stepTimeAggr?avars=';
     const stringQuery = JSON.stringify(query);
     return this._httpClient.get<any[]>(this.resourceServiceUrl + aggregationEndPoint + stringQuery).pipe(
@@ -55,8 +55,8 @@ export class DataLogsService {
       }),
     );
   }
-  getData(uuid, sessionId): Observable<any[]> {
-    const query = { uuid : uuid, session_id: sessionId };
+  getData(thisUuid, sessionId): Observable<any[]> {
+    const query = { uuid: thisUuid, session_id: sessionId };
     const stringQuery = JSON.stringify(query);
     const aggregationEndPoint = 'reportDataAggr?avars=';
     return this._httpClient.get<any[]>(this.resourceServiceUrl + aggregationEndPoint + stringQuery).pipe(
@@ -75,4 +75,62 @@ export class DataLogsService {
       }),
     );
   }
+
+  getSlugFromSessionId(sessionId): Observable<any[]> {
+    const query = { session_id: sessionId };
+    const stringQuery = JSON.stringify(query);
+    const aggregationEndPoint = 'sessionIdToSlug?avars=';
+    return this._httpClient.get<any[]>(this.resourceServiceUrl + aggregationEndPoint + stringQuery).pipe(
+      map((response) => {
+        return response;
+      }),
+    );
+  }
+
+  getUuidFromSlug(slug): Observable<any[]> {
+    const query = { slug };
+    const stringQuery = JSON.stringify(query);
+    const aggregationEndPoint = 'slugToUuid?avars=';
+    return this._httpClient.get<any[]>(this.resourceServiceUrl + aggregationEndPoint + stringQuery).pipe(
+      map((response) => {
+        return response;
+      }),
+    );
+  }
+
+  getSessionIdFromSlug(slug): Observable<any[]> {
+    const query = { slug };
+    const stringQuery = JSON.stringify(query);
+    const aggregationEndPoint = 'slugToSessionId?avars=';
+    return this._httpClient.get<any[]>(this.resourceServiceUrl + aggregationEndPoint + stringQuery).pipe(
+      map((response) => {
+        return response;
+      }),
+    );
+  }
+
+  getComplementaryFromSlugOrSession(type, typeInfo): Observable<any[]> {
+    if (type === 'slug') {
+      const query = { slug: typeInfo };
+      const stringQuery = JSON.stringify(query);
+      const aggregationEndPoint = 'slugToSessionId?avars=';
+      return this._httpClient.get<any[]>(this.resourceServiceUrl + aggregationEndPoint + stringQuery).pipe(
+        map((response) => {
+          return response;
+        }),
+      );
+
+    } else {
+      const query = { session_id: typeInfo };
+      const stringQuery = JSON.stringify(query);
+      const aggregationEndPoint = 'sessionIdToSlug?avars=';
+      return this._httpClient.get<any[]>(this.resourceServiceUrl + aggregationEndPoint + stringQuery).pipe(
+        map((response) => {
+          return response;
+        }),
+      );
+    }
+
+  }
+
 }