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 2c78c1dcde6db4d0d5c6879d94e4c8a8dcc30f4b..2fbe18f28b01b3bcbcfbd47492e531caab4d7b88 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 @@ -11,53 +11,52 @@ <label> Session Id </label> </div> <div class="column is-2 has-text-left"> - </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 class="data columns is-multiline is-vcentered is-marginless"> + <div class="column is-5 has-text-left"> + <input class="input" type="text" size="45" name="slug" [(ngModel)]="slug"> + </div> + <div class="column is-5 has-text-left"> + <input class="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> - </div> - </form> - <br> + </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> + <!-- 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> --> + </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/report/logs-data/logs-data.component.html b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.html index 7d51059cd4c4adce9177846a9f729a7f862672d0..536cdecc79ca446e45615b340e4c7a688d343ee7 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 @@ -5,22 +5,43 @@ </div> <div class="section"> <div class="columns is-centered is-marginless"> + + <div class="column has-text-left"> <div *ngFor="let oneStepData of allStepsData"> <div class="mini-info-card" *ngIf="oneStepData" (click)='getLogsSelector(oneStepData._id.step);'> - <span> - <!-- <p>slug: {{oneStepData._id.slug}} </p> - <p>uuid: {{oneStepData._id.uuid}} </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> - </h3> - </span> + <div class="table"> + <div class="columns is-marginless"> + <div class="column is-5 has-text-left"> + <span> + <h3> + <p>step: {{oneStepData._id.step}}</p> + <p>total-time: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m : + {{oneStepData.totalSecondsSpent}}s </p> + </h3> + + </span> + </div> + <div class="column is-5 has-text-left"></div> + <div class="column is-2 has-text-right"> + <br> + <span> + <div class="arrows" [ngClass]="{'is-displayed': displayedStep === oneStepData._id.step}"> + <svg xmlns="https://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9"> + <path + d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z" + class="brandcolor" /> + <path + d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z" + class="brandcolor" /> + </svg> + </div> + </span> + </div> + </div> + </div> </div> </div> - </div> <div class="column has-text-left"> 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 index 0d609c85e000636a5ee67c9ad831e56cf17dee16..faa87dd1bd1a794621498ead6b04d4f87c98b653 100644 --- 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 @@ -1,3 +1,6 @@ +@import "../../../../../scss/variables.scss"; +@import "../../../../../../node_modules/bulma/sass/utilities/_all.sass"; + figure { text-align: center; } @@ -37,4 +40,18 @@ figure { .hidden { display: none; - } \ No newline at end of file + } + + .arrows { + svg { + width: 16px; + fill: $grey-dark-color; + transform: rotate(0deg); + } + } + + .arrows.is-displayed svg { + transform: rotate(-90deg); + } + + 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 923ea276f9f820ad5a380aa64fb620ae06d23793..1287ec97b2d5454377a50001f31fbbcbf87851a8 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 @@ -14,6 +14,7 @@ export class LogsDataComponent implements OnChanges { @Input() childUuid: string = ''; @Input() childSessionId: string = ''; @Input() childSlug: string; + displayedStep: string = 'none'; logTypes: any = [ { name : 'erreurs', @@ -69,6 +70,7 @@ export class LogsDataComponent implements OnChanges { this.tempStep = step; this.allErrorLogs = []; this.allLogs = []; + this.displayedStep = step; if (this.logTypes[0].selected === true) { this.getErrorStepsLogs(step); }