System views updated

src/app/system/manage-jobs/manage-jobs.component.scss

@@ -1,6 +1,6 @@
 .container-card {
   margin: 0 auto;
-  max-width: 80rem;
+  max-width: 90rem;
   width: 90%;
   padding: 0;
   padding-bottom: 50px;

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html

@@ -24,7 +24,7 @@
     </mat-form-field>
   </div>
 
-  <div class="space-top layout-row gap-20percent">
+  <div class="space-top layout-row gap-10px">
     <button mat-raised-button color="primary" (click)="openRunSelectedJobsDialog()" [disabled]="!isAnyJobSelected()">
       <fa-icon icon="play" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Run Selected Jobs' | translate }}
@@ -135,7 +135,7 @@
             mat-icon-button
             class="errorlog"
             (click)="showErrorLog(job)"
-            *ngIf="!(job.lastRunHistory && job.lastRunHistory.status === 'success')"
+            *ngIf="jobWithError(job)"
             matTooltip="{{ 'labels.inputs.Error Log' | translate }}"
             matTooltipPosition="right"
           >
@@ -145,14 +145,14 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row" ngClass="{{ rowColor(row) }}"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[50, 100]" showFirstLastButtons></mat-paginator>
   </div>
 </div>
 
-<div class="container space-top layout-row gap-20percent">
+<div class="container space-top layout-row gap-10px">
   <button mat-raised-button color="primary" (click)="openRunSelectedJobsDialog()" [disabled]="!isAnyJobSelected()">
     <fa-icon icon="play" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Run Selected Jobs' | translate }}

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.scss

@@ -1,3 +1,8 @@
+.container {
+  min-width: 84rem;
+  width: 84rem;
+}
+
 table {
   width: 100%;
 
@@ -26,6 +31,10 @@ table {
   color: #ffa726;
 }
 
+.job-error {
+  background-color: #f7dbb7;
+}
+
 .suspend {
   background: #32cd32;
   color: #fff;

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.ts

@@ -126,11 +126,12 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
    * Initializes the data source, paginator and sorter for manage scheduler jobs table.
    */
   setJobs() {
-    this.systemService.getJobs().subscribe((jobData: any) => {
-      this.dataSource = new MatTableDataSource(jobData);
+    this.systemService.getJobs().subscribe((jobData: any[]) => {
+      const sortedData = jobData.sort((a, b) => b.active - a.active || this.sortByName(a, b));
+      this.dataSource = new MatTableDataSource(sortedData);
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
-      this.jobsCounter = jobData.length;
+      this.jobsCounter = sortedData.length;
       this.selection.clear();
       this.dataSource.sortingDataAccessor = (item, property) => {
         switch (property) {
@@ -149,6 +150,18 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
     });
   }
 
+  sortByName(a: any, b: any): number {
+    // Sort on name
+    if (a.displayName < b.displayName) {
+      return -1;
+    }
+    if (a.displayName > b.displayName) {
+      return 1;
+    }
+    // Both idential, return 0
+    return 0;
+  }
+
   getScheduler() {
     this.systemService.getScheduler().subscribe((schedulerData: any) => {
       this.schedulerData = schedulerData;
@@ -303,4 +316,15 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
       }
     });
   }
+
+  jobWithError(job: any): boolean {
+    return !(job.lastRunHistory && job.lastRunHistory.status === 'success');
+  }
+
+  rowColor(job: any): string {
+    if (this.jobWithError(job)) {
+      return 'job-error';
+    }
+    return '';
+  }
 }

src/app/system/manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.component.html

@@ -1,12 +1,12 @@
 <div class="container">
-  <div class="layout-row gap-20px">
+  <div class="layout-row m-b-10">
     <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Filter By Version' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
-  <div class="mat-elevation-z8">
+  <div class="mat-elevation-z8 container">
     <table mat-table [dataSource]="dataSource" matSort>
       <ng-container matColumnDef="version">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Version' | translate }}</th>
@@ -72,7 +72,7 @@
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
 
-    <div class="layout-row layout-align-center gap-2percent layout-lt-md-column">
+    <div class="layout-row layout-align-center">
       <button type="button" color="primary" mat-raised-button [routerLink]="['../']">
         {{ 'labels.buttons.Back' | translate }}
       </button>

src/app/system/manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.component.scss

@@ -1,5 +1,9 @@
+.container {
+  padding-bottom: 15px;
+}
+
 table {
-  width: 100%;
+  width: 96%;
 
   .select-row:hover {
     cursor: pointer;