Feature/add sorting to job queue table (#5560)

* Add sorting to job queue table

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added support for column sorting to the queue jobs table in the admin control panel
 - Added a blog post: _Hacktoberfest 2025_
 
 ### Changed

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';
@@ -44,6 +46,7 @@ import {
   removeCircleOutline,
   timeOutline
 } from 'ionicons/icons';
+import { get } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -57,6 +60,7 @@ import { takeUntil } from 'rxjs/operators';
     MatButtonModule,
     MatMenuModule,
     MatSelectModule,
+    MatSortModule,
     MatTableModule,
     NgxSkeletonLoaderModule,
     ReactiveFormsModule
@@ -66,6 +70,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 +202,8 @@ export class GfAdminJobsComponent implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ jobs }) => {
         this.dataSource = new MatTableDataSource(jobs);
+        this.dataSource.sort = this.sort;
+        this.dataSource.sortingDataAccessor = get;
 
         this.isLoading = false;
 

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

@@ -16,9 +16,21 @@
           </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
+        matSortActive="created"
+        matSortDirection="desc"
+        [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="id"
+          >
             <ng-container i18n>Job ID</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 py-2 text-right" mat-cell>
@@ -27,7 +39,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="name"
+          >
             <ng-container i18n>Type</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 py-2" mat-cell>
@@ -42,7 +59,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="data.symbol"
+          >
             <ng-container i18n>Symbol</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 py-2" mat-cell>
@@ -51,7 +73,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="data.dataSource"
+          >
             <ng-container i18n>Data Source</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 py-2" mat-cell>
@@ -60,7 +87,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="opts.priority"
+          >
             <ng-container i18n>Priority</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 py-2" mat-cell>
@@ -79,7 +111,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="attemptsMade"
+          >
             <ng-container i18n>Attempts</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 py-2 text-right" mat-cell>
@@ -88,7 +125,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="timestamp"
+          >
             <ng-container i18n>Created</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 py-2" mat-cell>