4 files changed, 33 insertions, 11 deletions

diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
index 809155338..f1b14e5e3 100644
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
@@ -1,20 +1,27 @@
 <div class="admin-sub-header">
   <div class="admin-sub-title">Jobs list</div>
+
+  <div class="peertube-select-container">
+    <select [(ngModel)]="jobState" (ngModelChange)="onJobStateChanged()">
+      <option *ngFor="let state of jobStates" [value]="state">{{ state }}</option>
+    </select>
+  </div>
 </div>
 
+
+
 <p-dataTable
     [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
     sortField="createdAt" (onLazyLoad)="loadLazy($event)" [scrollable]="true" [virtualScroll]="true" [scrollHeight]="scrollHeight"
 >
   <p-column field="id" header="ID" [style]="{ width: '60px' }"></p-column>
-  <p-column field="category" header="Category" [style]="{ width: '130px' }"></p-column>
-  <p-column field="handlerName" header="Handler name" [style]="{ width: '210px' }"></p-column>
-  <p-column header="Input data">
+  <p-column field="type" header="Type" [style]="{ width: '210px' }"></p-column>
+  <p-column field="state" header="State" [style]="{ width: '130px' }"></p-column>
+  <p-column header="Payload">
     <ng-template pTemplate="body" let-job="rowData">
-      <pre>{{ job.handlerInputData }}</pre>
+      <pre>{{ job.data }}</pre>
     </ng-template>
   </p-column>
-  <p-column field="state" header="State" [style]="{ width: '100px' }"></p-column>
   <p-column field="createdAt" header="Created date" [sortable]="true" [style]="{ width: '250px' }"></p-column>
   <p-column field="updatedAt" header="Updated date" [style]="{ width: '250px' }"></p-column>
 </p-dataTable>
diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss
index 47c01f64a..5c2ad21f2 100644
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss
@@ -1,3 +1,10 @@
+@import '_variables';
+@import '_mixins';
+
+.peertube-select-container {
+  @include peertube-select-container(auto);
+}
+
 pre {
   font-size: 11px;
 }
diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
index f93847f29..7de6f70d2 100644
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'
 import { NotificationsService } from 'angular2-notifications'
 import { SortMeta } from 'primeng/primeng'
 import { Job } from '../../../../../../shared/index'
+import { JobState } from '../../../../../../shared/models'
 import { RestPagination, RestTable } from '../../../shared'
 import { viewportHeight } from '../../../shared/misc/utils'
 import { JobService } from '../shared'
@@ -13,10 +14,12 @@ import { RestExtractor } from '../../../shared/rest/rest-extractor.service'
   styleUrls: [ './jobs-list.component.scss' ]
 })
 export class JobsListComponent extends RestTable implements OnInit {
+  jobState: JobState = 'inactive'
+  jobStates: JobState[] = [ 'active', 'complete', 'failed', 'inactive', 'delayed' ]
   jobs: Job[] = []
   totalRecords = 0
   rowsPerPage = 20
-  sort: SortMeta = { field: 'createdAt', order: 1 }
+  sort: SortMeta = { field: 'createdAt', order: -1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
   scrollHeight = ''
 
@@ -33,9 +36,13 @@ export class JobsListComponent extends RestTable implements OnInit {
     this.scrollHeight = (viewportHeight() - 380) + 'px'
   }
 
+  onJobStateChanged () {
+    this.loadData()
+  }
+
   protected loadData () {
     this.jobsService
-      .getJobs(this.pagination, this.sort)
+      .getJobs(this.jobState, this.pagination, this.sort)
       .subscribe(
         resultList => {
           this.jobs = resultList.data
diff --git a/client/src/app/+admin/jobs/shared/job.service.ts b/client/src/app/+admin/jobs/shared/job.service.ts
index 61ee16077..a19d278c9 100644
--- a/client/src/app/+admin/jobs/shared/job.service.ts
+++ b/client/src/app/+admin/jobs/shared/job.service.ts
@@ -5,6 +5,7 @@ import 'rxjs/add/operator/catch'
 import 'rxjs/add/operator/map'
 import { Observable } from 'rxjs/Observable'
 import { ResultList } from '../../../../../../shared'
+import { JobState } from '../../../../../../shared/models'
 import { Job } from '../../../../../../shared/models/job.model'
 import { environment } from '../../../../environments/environment'
 import { RestExtractor, RestPagination, RestService } from '../../../shared'
@@ -19,19 +20,19 @@ export class JobService {
     private restExtractor: RestExtractor
   ) {}
 
-  getJobs (pagination: RestPagination, sort: SortMeta): Observable<ResultList<Job>> {
+  getJobs (state: JobState, pagination: RestPagination, sort: SortMeta): Observable<ResultList<Job>> {
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
 
-    return this.authHttp.get<ResultList<Job>>(JobService.BASE_JOB_URL, { params })
+    return this.authHttp.get<ResultList<Job>>(JobService.BASE_JOB_URL + '/' + state, { params })
       .map(res => this.restExtractor.convertResultListDateToHuman(res))
       .map(res => this.restExtractor.applyToResultListData(res, this.prettyPrintData))
       .catch(err => this.restExtractor.handleError(err))
   }
 
   private prettyPrintData (obj: Job) {
-    const handlerInputData = JSON.stringify(obj.handlerInputData, null, 2)
+    const data = JSON.stringify(obj.data, null, 2)
 
-    return Object.assign(obj, { handlerInputData })
+    return Object.assign(obj, { data })
   }
 }