Browse Source

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

* Add sorting to job queue table

* Update changelog
pull/5606/head
Raj Gupta 3 weeks ago
committed by GitHub
parent
commit
86d3b25861
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 1
      CHANGELOG.md
  2. 10
      apps/client/src/app/components/admin-jobs/admin-jobs.component.ts
  3. 58
      apps/client/src/app/components/admin-jobs/admin-jobs.html

1
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

10
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;

58
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>

Loading…
Cancel
Save