add search by Session and by Slug in data-logs Home page

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

@@ -9,11 +9,11 @@
             <div class="data columns is-multiline is-vcentered is-marginless">
               <div class="column is-5 has-text-left">
                 <label class="label"> Slug/Uuid {{test}} </label>
-                <input class="input" type="text" size="45" name="slug" [(ngModel)]="slug">
+                <input class="input" type="text" size="45" name="slug" [(ngModel)]="slug" list="slugsList">
               </div>
               <div class="column is-5 has-text-left">
                 <label class="label"> Session Id </label>
-                <input class="input" type="text" size="45" name="sessionId" [(ngModel)]="sessionId">
+                <input class="input" type="text" size="45" name="sessionId" [(ngModel)]="sessionId" list="sessionsList">
               </div>
               <div class="column is-2 has-text-left">
                   <label class="label"> &nbsp;</label>
@@ -38,8 +38,8 @@
   </div>
   <div class="columns is-centered is-marginless">
     <div class="column has-text-centered is-marginless">
-      <app-logs-sessions [hidden]="isToggled" [childNbSessions]="nbSessionId">
+      <app-logs-sessions [hidden]="isToggled" [sessionsList]="sessionsList" [childNbSessions]="nbSessionId">
       </app-logs-sessions>
-      <app-logs-slugs [hidden]="!isToggled" [childNbSlugs]="nbSlug"></app-logs-slugs>
+      <app-logs-slugs [hidden]="!isToggled" [slugsList]="slugsList" [childNbSlugs]="nbSlug"></app-logs-slugs>
     </div>
   </div>
\ No newline at end of file

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

@@ -18,6 +18,8 @@ export class LogsHomeComponent implements OnInit {
   uuid: string;
   isUuid: boolean = false;
   allFields: any;
+  slugsList: any;
+  sessionsList: any;
   sessionId: string;
   slug: any;
   data: any;
@@ -59,6 +61,9 @@ export class LogsHomeComponent implements OnInit {
       this.nbSessionId = result[0]['session_id_list'].length;
       this.nbUuid = result[0]['uuid_list'].length;
       this.nbSlug = result[0]['slug_list'].length;
+      this.slugsList = result[0]['slug_list'];
+      this.sessionsList = result[0]['session_id_list'];
+      console.log('sessionsList: ', this.sessionsList);
 
     },
     );

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

+<div class="input-field is-centered">
+    <div class="columns is-3 is-vcentered">
+      <div class="column is-2 has-text-left">
+        <label class="label"> Search by session: </label>
+        <input class="input" type="text" [(ngModel)]="foundSession" (keyup)="getAllInfoForOneSession($event)" id="foundSession" list="sessionsList" />
+        <datalist id="sessionsList">
+          <option *ngFor="let session of sessionsList" [value]="session"> {{session}}</option>
+        </datalist>
+      </div>
+    </div>
+  </div>
+
 <div class="columns is-centered is-marginless">
-  <div class="column has-text-left">
-    <P>{{ childNbSessions }} session(s) trouvée(s)</P>
+  <div class="column is-6 has-text-left">
+    <P>{{ childNbSessions }} session(s) in the database</P>
   </div>
-  <div class="column has-text-centered">
-    <p>Values below are for the latest Slug</p>
+  <div class="column is-6 has-text-left">
+    <p>Values below are for the latest slug in the session</p>
   </div>
 </div>
 
 <div class="table entity-list-table">
   <div class="header columns is-marginless">
-    <div class="column is-4 has-text-centered">
+    <div class="column is-3 has-text-centered">
       <span (click)="sortBy('name')" class="is-sortable">
         <span class="column-title">SessionId</span>
         <p></p>
@@ -28,7 +40,7 @@
         <span class="column-title">Nb of Slugs</span>
       </span>
     </div>
-    <div class="column is-2 has-text-left">
+    <div class="column is-4 has-text-left">
       <span class="is-sortable">
         <span class="sort-icons">
           <span class="icon">
@@ -41,7 +53,7 @@
         <span class="column-title">Latest Completion Date</span>
       </span>
     </div>
-    <div class="column is-2 has-text-left">
+    <div class="column is-1 has-text-left">
       <span class="is-sortable">
         <span class="sort-icons">
           <span class="icon">
@@ -75,23 +87,23 @@
     <div class="data columns is-multiline is-vcentered is-marginless"
       *ngFor="let session of allSessionsInfoList; let i=index; let odd=odd; let even=even;"
       [ngClass]="{ odd: odd, even: even }">
-      <div class="column is-4 has-text-left">
+      <div class="column is-3 has-text-left">
         {{ session._id.session_id }}
       </div>
       <div class="column is-1 has-text-left">
         {{ session.all.length }}
       </div>
-      <div class="column is-2 has-text-left">
+      <div class="column is-4 has-text-left">
         {{ session.latest.completionDate.$date }}
       </div>
-      <div class="column is-2 has-text-left">
+      <div class="column is-1 has-text-left">
         <span class="column-title">
           {{ session.latest.duration.hours }}:
           {{ session.latest.duration.minutes }}:
           {{ session.latest.duration.seconds }}</span>
       </div>
       <div class="column  is-1 has-text-centered actions">
-        {{ session.latest.count.ERROR }}
+        {{ session.latest.count.ERROR ? 'Yes ('+session.latest.count.ERROR+')':'No'}}
       </div>
       <div class="column is-1 actions">
         <a class="button button-gl " [routerLink]="['preReport','session', session._id.session_id]">
@@ -102,10 +114,15 @@
   </div>
 </div>
 <div class="columns is-marginless">
-    <div class="column">
+    <div class="column is-10">
         <app-paginator [length]="paginator.length" [pageSize]="paginator.limit"
         [pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="1"
         [showFirstLastButtons]="true" (page)="changePagination($event)" (pageSizeChanged)="changePageSize($event)">
       </app-paginator>
     </div>
+    <div class="column is-1 is-vcentered">
+        <a class="button button-gl is-left" (click)="getAllSessionsInfo(this.childNbSessions, 1)">
+          <p class="bold-white">Reset</p>
+        </a>
+    </div>
   </div>
\ No newline at end of file

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

+
+@import "../../../../scss/variables.scss";
+@import "../../../../../node_modules/bulma/sass/utilities/_all.sass";
+
+.small-text{
+    font-size:0.8em;
+}
+
+.bold-white{
+    color: white;
+    font-weight: bold;
+}
\ No newline at end of file

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

@@ -10,8 +10,11 @@ import { Subscription } from 'rxjs';
 })
 export class LogsSessionsComponent implements OnChanges {
   @Input() childNbSessions: number;
+  @Input() sessionsList: any;
+
   sessionChangeSub: Subscription;
   nbSessions: number = 0;
+  foundSession: string = '';
   allSessionsIdInfo: any = [];
   allSessionsInfoList: any = [];
   paginator: PaginatorOptions;
@@ -52,6 +55,7 @@ export class LogsSessionsComponent implements OnChanges {
 
   getAllSessionsInfo(length, pageNumber) {
     this._dataLogsService.getAllInfoForAllSessions(length, pageNumber).subscribe((result) => {
+      this.foundSession = '';
       this.allSessionsInfoList = result;
       this.nbSessions = result.length;
       this.paginator.limit = this._dataLogsService.limit;
@@ -60,8 +64,22 @@ export class LogsSessionsComponent implements OnChanges {
       this.formatDate();
     },
     );
+  }
 
+  getAllInfoForOneSession($event) {
+    // const foundSlug = (<HTMLInputElement>document.getElementById('foundSlug')).value;
+    this._dataLogsService.getAllInfoForOneSession(this.foundSession).subscribe((result) => {
+      console.log('result for getAllInfoForOneSlug', result);
+      this.allSessionsInfoList = result;
+      this.nbSessions = result.length;
+      this.paginator.limit = this._dataLogsService.limit;
+      this.paginator.pageIndex = this._dataLogsService.pageNumber;
+      this.paginator.length = this.childNbSessions;
+      this.formatDate();
+    },
+    );
   }
+
   formatDate() {
     for (let i = 0; i < this.nbSessions; i += 1) {
       this.allSessionsInfoList[i].latest.completionDate.$date = new Date(this.allSessionsInfoList[i].latest.completionDate.$date);

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

 <div class="input-field is-centered">
-    <form>
+  <!-- <form>
       <div class="columns is-vcentered">
         <div class="column is-2 has-text-left">
           <label class="label"> Search by slug: </label>
           <input class="input" type="text" name="searchSlug" [(ngModel)]="searchSlug">
         </div>
       </div>
-    </form>
+    </form> -->
+  <div class="columns is-3 is-vcentered">
+    <div class="column is-2 has-text-left">
+      <label class="label"> Search by slug: </label>
+      <input class="input" type="text" [(ngModel)]="foundSlug" (keyup)="getAllInfoForOneSlug($event)" id="foundSlug" list="slugsList" />
+      <datalist id="slugsList">
+        <option *ngFor="let slug of slugsList" [value]="slug"> {{slug}}</option>
+      </datalist>
+    </div>
   </div>
+</div>
 
 <div class="columns is-centered is-marginless">
-  <div class="column has-text-left">
-    <P>{{ childNbSlugs }} slug(s) trouvé(s)</P>
+  <div class="column is-6 has-text-left">
+    <P>{{ childNbSlugs }} slug(s) in database</P>
   </div>
-  <div class="column has-text-centered">
+  <div class="column  is-6 has-text-left">
     <p>Values below are for the latest Session</p>
   </div>
 </div>
@@ -32,10 +41,13 @@
         <span class="column-title">Slugs</span>
       </span>
     </div>
-    <div class="column is-2 has-text-left">
-      <span class="column-title">Nb of Sessions</span>
+    <div class="column is-1 has-text-left">
+        <span class="column-title">Full Data?</span>
+      </div>
+    <div class="column is-1 has-text-left">
+      <span class="column-title">Sessions</span>
     </div>
-    <div class="column is-2 has-text-left">
+    <div class="column is-3 has-text-left">
       <span class="is-sortable">
         <span class="sort-icons">
           <span class="icon">
@@ -48,7 +60,7 @@
         <span class="column-title">Latest Completion Date</span>
       </span>
     </div>
-    <div class="column is-2 has-text-left">
+    <div class="column is-1 has-text-left">
       <span class="is-sortable">
         <span class="sort-icons">
           <span class="icon">
@@ -58,7 +70,7 @@
             <i class="fas fa-sort-down"></i>
           </span>
         </span>
-        <span class="column-title">Duration (h:min:s)</span>
+        <span class="column-title">Duration</span>
       </span> </div>
     <div class="column  is-1 has-text-left">
       <span class="is-sortable">
@@ -87,17 +99,20 @@
             <p>{{slug._id.uuid}}</p>
           </div>
         </div>
-        <div class="column is-2 has-text-left">
+        <div class="column is-1 has-text-left">
+            {{ slug.latest.uuid_suffix === 'full' ? 'Yes' : 'No'}}
+        </div>
+        <div class="column is-1 has-text-left">
           {{slug.all.length}}
         </div>
-        <div class="column is-2 has-text-left">
+        <div class="column is-3 has-text-left">
           {{slug.latest.completionDate.$date}}
         </div>
-        <div class="column is-2 has-text-left">
+        <div class="column is-1 has-text-left">
           {{slug.latest.duration.hours}}:{{slug.latest.duration.minutes}}:{{slug.latest.duration.seconds}}
         </div>
         <div class="column  is-1 has-text-left actions">
-          {{slug.latest.count.ERROR}}
+          {{ slug.latest.count.ERROR ? 'Yes ('+slug.latest.count.ERROR+')':'No'}}
         </div>
         <div class="column  is-1 has-text-left actions">
           <a class="button button-gl is-left" [routerLink]="['preReport', 'slug', slug._id.slug]">
@@ -109,10 +124,15 @@
   </div>
 </div>
 <div class="columns is-marginless">
-  <div class="column">
+  <div class="column is-10">
     <app-paginator *ngIf="paginator.length > 0" [length]="paginator.length" [pageSize]="paginator.limit"
       [pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="1"
       [showFirstLastButtons]="true" (page)="changePagination($event)" (pageSizeChanged)="changePageSize($event)">
     </app-paginator>
   </div>
+  <div class="column is-1 is-vcentered">
+      <a class="button button-gl is-left" (click)="getAllInfoForAllSlugs(childNbSlugs, 1);">
+        <p class="bold-white">Reset</p>
+      </a>
+  </div>
 </div>
\ No newline at end of file

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

@@ -3,4 +3,9 @@
 
 .small-text{
     font-size:0.8em;
+}
+
+.bold-white{
+    color: white;
+    font-weight: bold;
 }
\ No newline at end of file

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

 import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';
 import { DataLogsService } from 'src/app/services/data-logs.service';
 import { PaginatorOptions } from 'src/app/models/paginator-options.model';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { FilterPipe }from './filter.pipe';
+
 @Component({
   selector: 'app-logs-slugs',
   templateUrl: './logs-slugs.component.html',
@@ -10,8 +12,14 @@ import { FilterPipe }from './filter.pipe';
 })
 export class LogsSlugsComponent implements OnChanges {
   @Input() childNbSlugs: number;
+  @Input() slugsList: any;
+
+  filteredSlugs: any[] = [];
+  isLoading = false;
+
   urlCode: string = 'slugUrl';
   slugChangeSub: Subscription;
+  foundSlug: string = '';
   allSlugsInfoList:any = [];
   searchSlug: string = '';
   slugInOnePage:number = 1;
@@ -47,16 +55,31 @@ export class LogsSlugsComponent implements OnChanges {
   }
   getAllInfoForAllSlugs(length, pageNumber) {
     this._dataLogsService.getAllInfoForAllSlugs(length, pageNumber).subscribe((result) => {
+      this.foundSlug = '';
       this.allSlugsInfoList = result;
       this.slugInOnePage = result.length;
       this.paginator.limit = this._dataLogsService.limit;
       this.paginator.pageIndex = this._dataLogsService.pageNumber;
       this.paginator.length = this.childNbSlugs;
       this.formatDate();
+      console.log('slugs result', result);
     },
     );
+  }
 
+  getAllInfoForOneSlug($event) {
+    // const foundSlug = (<HTMLInputElement>document.getElementById('foundSlug')).value;
+    this._dataLogsService.getAllInfoForOneSlug(this.foundSlug).subscribe((result) => {
+      this.allSlugsInfoList = result;
+      this.slugInOnePage = result.length;
+      this.paginator.limit = this._dataLogsService.limit;
+      this.paginator.pageIndex = this._dataLogsService.pageNumber;
+      this.paginator.length = this.childNbSlugs;
+      this.formatDate();
+    },
+    );
   }
+
   formatDate() {
     for (let i = 0; i < this.slugInOnePage; i += 1) {
       this.allSlugsInfoList[i].latest.completionDate.$date = new Date(this.allSlugsInfoList[i].latest.completionDate.$date);
@@ -70,4 +93,5 @@ export class LogsSlugsComponent implements OnChanges {
   changePageSize(pageSize) {
     this._dataLogsService.paginationChanged(pageSize, 1, 'SLUG');
   }
+
 }

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

@@ -18,7 +18,7 @@
                 <p>Durée: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
                   {{oneStepData.totalSecondsSpent}}s</p>
                 <br>
-                <p>Info(s): {{oneStepData.counts.INFO}}</p>
+                <p>Info(s): {{oneStepData.counts.INFO ? oneStepData.counts.INFO : 0 }}</p>
                 <br>
               </div>
               <div class="column is-6 has-text-right">
@@ -33,7 +33,7 @@
                       class="brandcolor" />
                   </svg>
                 </div>
-                <p><br> Erreur(s): {{oneStepData.counts.ERROR}}</p>
+                <p><br> Erreur(s): {{oneStepData.counts.ERROR ? oneStepData.counts.ERROR : 0}}</p>
               </div>
             </div>
           </div>

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

@@ -18,7 +18,7 @@
                 <p>Durée: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
                   {{oneStepData.totalSecondsSpent}}s</p>
                 <br>
-                <p>Info(s): {{oneStepData.counts.INFO}}</p>
+                <p>Info(s): {{oneStepData.counts.INFO ? oneStepData.counts.INFO : 0 }}</p>
                 <br>
               </div>
               <div class="column is-6 has-text-right">
@@ -33,7 +33,8 @@
                       class="brandcolor" />
                   </svg>
                 </div>
-                <p><br> Erreur(s): {{oneStepData.counts.ERROR}}</p>
+                <p><br> Erreur(s): 
+                  {{ oneStepData.counts.ERROR ? oneStepData.counts.ERROR : 0}}
               </div>
             </div>
           </div>

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

@@ -92,7 +92,7 @@
                 {{session._id.duration.hours}}:{{session._id.duration.minutes}}:{{session._id.duration.seconds}}
               </div>
               <div class="column  is-1 has-text-left actions">
-                {{ session._id.count.ERROR }}
+                {{ session._id.count.ERROR ? 'Yes ('+session._id.count.ERROR+')':'No'}}
               </div>
               <div class="column is-1 actions">
                 <a class="button button-gl "
@@ -145,8 +145,11 @@
               <span class="column-title">Slugs</span>
             </span>
           </div>
-          <div class="column is-2 has-text-left">
-            <span class="column-title">Nb of Sessions</span>
+          <div class="column is-1 has-text-left">
+              <span class="column-title">Full Data?</span>
+            </div>
+          <div class="column is-1 has-text-left">
+            <span class="column-title">Sessions</span>
           </div>
           <div class="column is-2 has-text-left">
             <span class="is-sortable">
@@ -201,7 +204,10 @@
                   <p>{{slug._id.uuid}}</p>
                 </div>
               </div>
-              <div class="column is-2 has-text-left">
+              <div class="column is-1 has-text-left">
+                {{ slug._id.uuid_suffix === 'full' ? 'Yes' : 'No'}}
+              </div>
+              <div class="column is-1 has-text-left">
                 {{slug._id.session_list.length}}
               </div>
               <div class="column is-2 has-text-left">
@@ -211,7 +217,7 @@
                 {{slug._id.duration.hours}}:{{slug._id.duration.minutes}}:{{slug._id.duration.seconds}}
               </div>
               <div class="column  is-1 has-text-left actions">
-                {{slug._id.count.ERROR}}
+                {{ slug._id.count.ERROR ? 'Yes (' + slug._id.count.ERROR + ')':'No'}}
               </div>
               <div class="column  is-1 has-text-left actions">
                 <a class="button button-gl is-left"