add basic tabs

update label for graph
update css for tables

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

@@ -2,34 +2,62 @@
   <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">
+        <div class="table">
+          <div class="header columns is-marginless">
+            <div class="column is-5 has-text-left">
+              <label> Slug/Uuid </label>
+            </div>
+            <div class="column is-5 has-text-left">
+              <label> Session Id </label>
+            </div>
+            <div class="column is-2 has-text-left">
 
-        <a class="button button-gl " [routerLink]="['report', slug, sessionId, 'home']">
-          <i class="fas fa-search"></i>
-        </a>
-      </form>
-      <br>
+            </div>
+          </div>
 
+          <div class="data-list">
+            <div class="data columns is-multiline is-vcentered is-marginless" >
+            <div class="column is-5 has-text-left">
+              <input type="text" size="45" name="slug" [(ngModel)]="slug">
+            </div>
+            <div class="column is-5 has-text-left">
+              <input type="text" size="45" name="sessionId" [(ngModel)]="sessionId">
+            </div>
+            <div class="column  is-2 has-text-left">
+              <a class="button button-gl " [routerLink]="['report', slug, sessionId, 'home']">
+                <i class="fas fa-search"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+    </div>
+    </form>
+    <br>
+
+    <!-- Tabs -->
+    <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>
 
-      <a class="button button-gl is-centered" (click)="tabsToggler(true)">
+
+    <!-- <a class="button button-gl is-centered" (click)="tabsToggler(true)">
         Slugs
       </a>
       <a class="button button-gl is-centered" (click)="tabsToggler(false)">
         Sessions
-      </a>
+      </a> -->
 
-    </div>
   </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>
+<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>
\ No newline at end of file

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

+@import "../../../../scss/variables.scss";
+@import "../../../../../node_modules/bulma/sass/utilities/_all.sass";
+
 figure {
     text-align: center;
   }
@@ -35,4 +38,75 @@ figure {
         color: #d5232a;
       }
     }
-  }
+  }
\ No newline at end of file
+  .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%;
+  }
+}

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

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { DataLogsService } from 'src/app/services/data-logs.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ILogs } from 'src/app/models/logs.model';
+import { ISimpleTab } from 'src/app/models/basic-tabs.model';
 
 @Component({
   selector: 'app-logs-home',
@@ -21,7 +22,13 @@ export class LogsHomeComponent implements OnInit {
   nbUuid: number;
   nbSlug: number;
   isToggled: boolean;
-
+  tabs: ISimpleTab[] =  [{
+    name: 'Slug',
+    isActive: true},
+  {
+    name: 'Session',
+    isActive: false},
+  ];
   sessionIdList: [string];
   constructor(
     private dataLogsService: DataLogsService,
@@ -69,9 +76,17 @@ export class LogsHomeComponent implements OnInit {
     },
     );
   }
-  tabsToggler(oneBoolean) {
-    this.isToggled = oneBoolean;
-    this.isDashboardDisplayed = false;
+  tabsToggler(tabName) {
+    if (tabName === 'Session') {
+      this.isToggled = false;
+      this.tabs[0].isActive = false;
+      this.tabs[1].isActive = true;
+    }
+    if (tabName === 'Slug') {
+      this.isToggled = true;
+      this.tabs[0].isActive = true;
+      this.tabs[1].isActive = false;
+    }
   }
 
 }

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

@@ -24,7 +24,7 @@
     </div>
 
     <div class="column has-text-left">
-      <div class="mini-log-card" *ngIf="!allLogs?.lenght>0">
+      <div class="mini-log-card" *ngIf="allLogs?.lenght==0">
         <p>No DATA</p>
       </div>
       <!-- <div class="mini-error-card" *ngIf="!allErrorLogs?.lenght>0">

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

@@ -16,15 +16,14 @@ export class LogsDataComponent implements OnChanges {
   @Input() childSlug: string;
   logTypes: any = [
     {
-      name : 'error',
-      selected : true,
+      name : 'erreurs',
+      selected : false,
     },
     {
-      name : 'info',
-      selected : false,
+      name : 'infos',
+      selected : true,
     },
   ];
-  isDashboardDisplayed: boolean = false;
   uuid: string;
   sessionId: string;
   slug: string;

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

@@ -49,6 +49,10 @@ export class LogsGraphComponent implements OnChanges {
           display: true,
           text: 'Logs-chart: progress-report.',
         },
+        legend: {
+          display: true,
+          position: 'right',
+        },
         elements: {
           line: {
             tension: 0, // disables bezier curves

src/app/models/basic-tabs.model.ts

+export interface IBasicTab {
+  name: string;
+  fullRouterLinkPath: string;
+}
+export interface ISimpleTab {
+  name: string;
+  isActive: boolean;
+}