refs #1477 Refactor Task-logs component for improved layout and styling

ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.css

@@ -1,15 +1,20 @@
-.title {
-  font-size: 24px;
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+.header-container-title {
+  flex-grow: 1;
+  text-align: left;
+  margin-left: 1em;
 }
 
 .calendar-button-row {
   display: flex;
-  justify-content: flex-start;
-  margin-top: 16px;
-}
-
-.divider {
-  margin: 20px 0;
+  gap: 15px;
 }
 
 .lists-container {
@@ -27,14 +32,13 @@
 
 table {
   width: 100%;
-  margin-top: 50px;
 }
 
-.search-container  {
+.search-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 5px;
+  margin: 1.5rem 0rem 1.5rem 0rem;
   box-sizing: border-box;
 }
 
@@ -53,15 +57,8 @@ table {
   padding: 5px;
 }
 
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px;
-}
-
 .mat-elevation-z8 {
-  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
+  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 
 .paginator-container {
@@ -88,12 +85,4 @@ table {
 .chip-in-progress {
   background-color: #f5a623 !important;
   color: white;
-}
-
-.header-container-title {
-  flex-grow: 1;
-  text-align: left;
-  padding-left: 1em;
-}
-
-
+}

ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.html

@@ -4,31 +4,37 @@
   </button>
 
   <div class="header-container-title">
-    <h2 class="title" joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCommandsTitle' | translate }}</h2>
+    <h2 class="title" joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCommandsTitle' |
+      translate }}</h2>
   </div>
 
   <div class="images-button-row">
-    <button mat-flat-button color="primary" (click)="resetFilters()" joyrideStep="resetFiltersStep" text="{{ 'resetFiltersStepText' | translate }}">
+    <button mat-flat-button color="primary" (click)="resetFilters()" joyrideStep="resetFiltersStep"
+      text="{{ 'resetFiltersStepText' | translate }}">
       {{ 'resetFilters' | translate }}
     </button>
   </div>
 </div>
 
-<mat-divider class="divider"></mat-divider>
-
 <div class="search-container">
-  <mat-form-field appearance="fill" class="search-select" joyrideStep="clientSelectStep" text="{{ 'clientSelectStepText' | translate }}">
-    <input type="text" matInput [formControl]="clientControl" [matAutocomplete]="clientAuto" placeholder="{{ 'selectClientPlaceholder' | translate }}">
-    <mat-autocomplete #clientAuto="matAutocomplete" [displayWith]="displayFnClient" (optionSelected)="onOptionClientSelected($event.option.value)">
+  <mat-form-field appearance="fill" class="search-select" joyrideStep="clientSelectStep"
+    text="{{ 'clientSelectStepText' | translate }}">
+    <input type="text" matInput [formControl]="clientControl" [matAutocomplete]="clientAuto"
+      placeholder="{{ 'selectClientPlaceholder' | translate }}">
+    <mat-autocomplete #clientAuto="matAutocomplete" [displayWith]="displayFnClient"
+      (optionSelected)="onOptionClientSelected($event.option.value)">
       <mat-option *ngFor="let client of filteredClients | async" [value]="client">
         {{ client.name }}
       </mat-option>
     </mat-autocomplete>
   </mat-form-field>
 
-  <mat-form-field appearance="fill" class="search-select" joyrideStep="commandSelectStep" text="{{ 'commandSelectStepText' | translate }}">
-    <input type="text" matInput [formControl]="commandControl" [matAutocomplete]="commandAuto" placeholder="{{ 'selectCommandPlaceholder' | translate }}">
-    <mat-autocomplete #commandAuto="matAutocomplete" [displayWith]="displayFnCommand" (optionSelected)="onOptionCommandSelected($event.option.value)">
+  <mat-form-field appearance="fill" class="search-select" joyrideStep="commandSelectStep"
+    text="{{ 'commandSelectStepText' | translate }}">
+    <input type="text" matInput [formControl]="commandControl" [matAutocomplete]="commandAuto"
+      placeholder="{{ 'selectCommandPlaceholder' | translate }}">
+    <mat-autocomplete #commandAuto="matAutocomplete" [displayWith]="displayFnCommand"
+      (optionSelected)="onOptionCommandSelected($event.option.value)">
       <mat-option *ngFor="let command of filteredCommands | async" [value]="command">
         {{ command.name }}
       </mat-option>
@@ -37,7 +43,7 @@
 
   <mat-form-field appearance="fill" class="search-boolean">
     <mat-label i18n="@@searchLabel">Estado</mat-label>
-    <mat-select [(ngModel)]="filters['status']" (selectionChange)="loadTraces()" placeholder="Seleccionar opción" >
+    <mat-select [(ngModel)]="filters['status']" (selectionChange)="loadTraces()" placeholder="Seleccionar opción">
       <mat-option [value]="'failed'">Fallido</mat-option>
       <mat-option [value]="'pending'">Pendiente de ejecutar</mat-option>
       <mat-option [value]="'in-progress'">Ejecutando</mat-option>
@@ -46,12 +52,11 @@
   </mat-form-field>
 </div>
 
-<div *ngIf="loading" class="loading-container">
-  <mat-spinner></mat-spinner>
-</div>
+<app-loading [isLoading]="loading"></app-loading>
 
 <div *ngIf="!loading">
-  <table mat-table [dataSource]="traces" class="mat-elevation-z8" joyrideStep="tableStep" text="{{ 'tableStepText' | translate }}">
+  <table mat-table [dataSource]="traces" class="mat-elevation-z8" joyrideStep="tableStep"
+    text="{{ 'tableStepText' | translate }}">
     <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
       <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
       <td mat-cell *matCellDef="let trace">
@@ -64,11 +69,11 @@
               'chip-in-progress': trace.status === 'in-progress'
             }">
             {{
-              trace.status === 'failed' ? 'Fallido' :
-                trace.status === 'success' ? 'Finalizado con éxito' :
-                  trace.status === 'pending' ? 'Pendiente de ejecutar' :
-                    trace.status === 'in-progress' ? 'Ejecutando' :
-                      trace.status
+            trace.status === 'failed' ? 'Fallido' :
+            trace.status === 'success' ? 'Finalizado con éxito' :
+            trace.status === 'pending' ? 'Pendiente de ejecutar' :
+            trace.status === 'in-progress' ? 'Ejecutando' :
+            trace.status
             }}
           </mat-chip>
         </ng-container>
@@ -86,10 +91,7 @@
 </div>
 
 <div class="paginator-container" joyrideStep="paginationStep" text="{{ 'paginationStepText' | translate }}">
-  <mat-paginator [length]="length"
-                 [pageSize]="itemsPerPage"
-                 [pageIndex]="page"
-                 [pageSizeOptions]="pageSizeOptions"
-                 (page)="onPageChange($event)">
+  <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
+    (page)="onPageChange($event)">
   </mat-paginator>
-</div>
+</div>