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
index 1deaf57257628e528edd3f3bc92050fc559d86b3..2c78c1dcde6db4d0d5c6879d94e4c8a8dcc30f4b 100644
--- a/src/app/components/logs-dashboard/logs-home/logs-home.component.html
+++ b/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">
-
- <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>
\ No newline at end of file
+<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
diff --git a/src/app/components/logs-dashboard/logs-home/logs-home.component.scss b/src/app/components/logs-dashboard/logs-home/logs-home.component.scss
index 07e58bb921bad5d7b1250d3bb0faa87b3e20db48..d5d4f6828fa1e977e1cfad4f5dd6aec875d1eaf6 100644
--- a/src/app/components/logs-dashboard/logs-home/logs-home.component.scss
+++ b/src/app/components/logs-dashboard/logs-home/logs-home.component.scss
@@ -1,3 +1,6 @@
+@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%;
+ }
+}
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
index a8bbd2e381bb905e1268a154990d1e3727813d44..ef258bb0b6c205e4fa04642c075e8ac90a80ef8e 100644
--- a/src/app/components/logs-dashboard/logs-home/logs-home.component.ts
+++ b/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;
+ }
}
}
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
index ffb029fb40bede1d16eeed02eff5b2fb4fe73b50..7d51059cd4c4adce9177846a9f729a7f862672d0 100644
--- 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
@@ -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">
diff --git a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts
index 9a373a4e6a031b21349eade36a764a2f57eb9f69..923ea276f9f820ad5a380aa64fb620ae06d23793 100644
--- a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts
+++ b/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;
diff --git a/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.ts b/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.ts
index 4bec41da2a8732b8b6baf6f24abd112aee393304..c03790bebb1612fe6412eaedb62a19f63df1b9da 100644
--- a/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.ts
+++ b/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
diff --git a/src/app/models/basic-tabs.model.ts b/src/app/models/basic-tabs.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..93caa24433e70b5e3a73a421f703dc654ef653c4
--- /dev/null
+++ b/src/app/models/basic-tabs.model.ts
@@ -0,0 +1,8 @@
+export interface IBasicTab {
+ name: string;
+ fullRouterLinkPath: string;
+}
+export interface ISimpleTab {
+ name: string;
+ isActive: boolean;
+}