Update Job table

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+- Add sorting to job queue table
+
 ### Added
 
 - Added the symbol to the benchmark component

apps/client/src/app/components/admin-jobs/admin-jobs.component.ts

@@ -16,7 +16,8 @@ import {
   ChangeDetectorRef,
   Component,
   OnDestroy,
-  OnInit
+  OnInit,
+  ViewChild
 } from '@angular/core';
 import {
   FormBuilder,
@@ -27,6 +28,7 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { IonIcon } from '@ionic/angular/standalone';
 import { JobStatus } from 'bull';
@@ -58,6 +60,7 @@ import { takeUntil } from 'rxjs/operators';
     MatMenuModule,
     MatSelectModule,
     MatTableModule,
+    MatSortModule,
     NgxSkeletonLoaderModule,
     ReactiveFormsModule
   ],
@@ -66,6 +69,8 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './admin-jobs.html'
 })
 export class GfAdminJobsComponent implements OnDestroy, OnInit {
+  @ViewChild(MatSort) sort: MatSort;
+
   public DATA_GATHERING_QUEUE_PRIORITY_LOW = DATA_GATHERING_QUEUE_PRIORITY_LOW;
   public DATA_GATHERING_QUEUE_PRIORITY_HIGH =
     DATA_GATHERING_QUEUE_PRIORITY_HIGH;
@@ -196,6 +201,12 @@ export class GfAdminJobsComponent implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ jobs }) => {
         this.dataSource = new MatTableDataSource(jobs);
+        this.dataSource.sort = this.sort;
+
+        if (this.sort) {
+          this.sort.active = 'created';
+          this.sort.direction = 'desc';
+        }
 
         this.isLoading = false;
 

apps/client/src/app/components/admin-jobs/admin-jobs.html

@@ -16,9 +16,14 @@
           </mat-select>
         </mat-form-field>
       </form>
-      <table class="gf-table w-100" mat-table [dataSource]="dataSource">
+      <table class="gf-table w-100" mat-table matSort [dataSource]="dataSource">
         <ng-container matColumnDef="index">
-          <th *matHeaderCellDef class="px-1 py-2 text-right" mat-header-cell>
+          <th
+            *matHeaderCellDef
+            class="px-1 py-2 text-right"
+            mat-header-cell
+            mat-sort-header
+          >
             <ng-container i18n>Job ID</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 py-2 text-right" mat-cell>
@@ -27,7 +32,12 @@
         </ng-container>
 
         <ng-container matColumnDef="type">
-          <th *matHeaderCellDef class="px-1 py-2" mat-header-cell>
+          <th
+            *matHeaderCellDef
+            class="px-1 py-2"
+            mat-header-cell
+            mat-sort-header
+          >
             <ng-container i18n>Type</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 py-2" mat-cell>
@@ -42,7 +52,12 @@
         </ng-container>
 
         <ng-container matColumnDef="symbol">
-          <th *matHeaderCellDef class="px-1 py-2" mat-header-cell>
+          <th
+            *matHeaderCellDef
+            class="px-1 py-2"
+            mat-header-cell
+            mat-sort-header
+          >
             <ng-container i18n>Symbol</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 py-2" mat-cell>
@@ -51,7 +66,12 @@
         </ng-container>
 
         <ng-container matColumnDef="dataSource">
-          <th *matHeaderCellDef class="px-1 py-2" mat-header-cell>
+          <th
+            *matHeaderCellDef
+            class="px-1 py-2"
+            mat-header-cell
+            mat-sort-header
+          >
             <ng-container i18n>Data Source</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 py-2" mat-cell>
@@ -60,7 +80,12 @@
         </ng-container>
 
         <ng-container matColumnDef="priority">
-          <th *matHeaderCellDef class="px-1 py-2" mat-header-cell>
+          <th
+            *matHeaderCellDef
+            class="px-1 py-2"
+            mat-header-cell
+            mat-sort-header
+          >
             <ng-container i18n>Priority</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 py-2" mat-cell>
@@ -79,7 +104,12 @@
         </ng-container>
 
         <ng-container matColumnDef="attempts">
-          <th *matHeaderCellDef class="px-1 py-2 text-right" mat-header-cell>
+          <th
+            *matHeaderCellDef
+            class="px-1 py-2 text-right"
+            mat-header-cell
+            mat-sort-header
+          >
             <ng-container i18n>Attempts</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 py-2 text-right" mat-cell>
@@ -88,7 +118,12 @@
         </ng-container>
 
         <ng-container matColumnDef="created">
-          <th *matHeaderCellDef class="px-1 py-2" mat-header-cell>
+          <th
+            *matHeaderCellDef
+            class="px-1 py-2"
+            mat-header-cell
+            mat-sort-header
+          >
             <ng-container i18n>Created</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 py-2" mat-cell>