diff options
Diffstat (limited to 'client/src/app/+admin/jobs')
4 files changed, 40 insertions, 30 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 a90267172..29103c06b 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,18 +1,20 @@ | |||
1 | <div class="row"> | 1 | <div class="admin-sub-header"> |
2 | <div class="content-padding"> | 2 | <div class="admin-sub-title">Jobs list</div> |
3 | <h3>Jobs list</h3> | ||
4 | |||
5 | <p-dataTable | ||
6 | [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" | ||
7 | sortField="createdAt" (onLazyLoad)="loadLazy($event)" | ||
8 | > | ||
9 | <p-column field="id" header="ID"></p-column> | ||
10 | <p-column field="category" header="Category"></p-column> | ||
11 | <p-column field="handlerName" header="Handler name"></p-column> | ||
12 | <p-column field="handlerInputData" header="Input data"></p-column> | ||
13 | <p-column field="state" header="State"></p-column> | ||
14 | <p-column field="createdAt" header="Created date" [sortable]="true"></p-column> | ||
15 | <p-column field="updatedAt" header="Updated date"></p-column> | ||
16 | </p-dataTable> | ||
17 | </div> | ||
18 | </div> | 3 | </div> |
4 | |||
5 | <p-dataTable | ||
6 | [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" | ||
7 | sortField="createdAt" (onLazyLoad)="loadLazy($event)" [scrollable]="true" [virtualScroll]="true" [scrollHeight]="scrollHeight" | ||
8 | > | ||
9 | <p-column field="id" header="ID" [style]="{ width: '40px' }"></p-column> | ||
10 | <p-column field="category" header="Category" [style]="{ width: '100px' }"></p-column> | ||
11 | <p-column field="handlerName" header="Handler name" [style]="{ width: '150px' }"></p-column> | ||
12 | <p-column header="Input data"> | ||
13 | <ng-template pTemplate="body" let-job="rowData"> | ||
14 | <pre>{{ job.handlerInputData }}</pre> | ||
15 | </ng-template> | ||
16 | </p-column> | ||
17 | <p-column field="state" header="State" [style]="{ width: '100px' }"></p-column> | ||
18 | <p-column field="createdAt" header="Created date" [sortable]="true" [style]="{ width: '250px' }"></p-column> | ||
19 | <p-column field="updatedAt" header="Updated date" [style]="{ width: '250px' }"></p-column> | ||
20 | </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 new file mode 100644 index 000000000..9dde13216 --- /dev/null +++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss | |||
@@ -0,0 +1,3 @@ | |||
1 | pre { | ||
2 | font-size: 13px; | ||
3 | } | ||
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 88fe259fb..f93847f29 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 | |||
@@ -1,22 +1,24 @@ | |||
1 | import { Component } from '@angular/core' | 1 | import { Component, OnInit } from '@angular/core' |
2 | import { NotificationsService } from 'angular2-notifications' | 2 | import { NotificationsService } from 'angular2-notifications' |
3 | import { SortMeta } from 'primeng/primeng' | 3 | import { SortMeta } from 'primeng/primeng' |
4 | import { Job } from '../../../../../../shared/index' | 4 | import { Job } from '../../../../../../shared/index' |
5 | import { RestPagination, RestTable } from '../../../shared' | 5 | import { RestPagination, RestTable } from '../../../shared' |
6 | import { viewportHeight } from '../../../shared/misc/utils' | ||
6 | import { JobService } from '../shared' | 7 | import { JobService } from '../shared' |
7 | import { RestExtractor } from '../../../shared/rest/rest-extractor.service' | 8 | import { RestExtractor } from '../../../shared/rest/rest-extractor.service' |
8 | 9 | ||
9 | @Component({ | 10 | @Component({ |
10 | selector: 'my-jobs-list', | 11 | selector: 'my-jobs-list', |
11 | templateUrl: './jobs-list.component.html', | 12 | templateUrl: './jobs-list.component.html', |
12 | styleUrls: [ ] | 13 | styleUrls: [ './jobs-list.component.scss' ] |
13 | }) | 14 | }) |
14 | export class JobsListComponent extends RestTable { | 15 | export class JobsListComponent extends RestTable implements OnInit { |
15 | jobs: Job[] = [] | 16 | jobs: Job[] = [] |
16 | totalRecords = 0 | 17 | totalRecords = 0 |
17 | rowsPerPage = 10 | 18 | rowsPerPage = 20 |
18 | sort: SortMeta = { field: 'createdAt', order: 1 } | 19 | sort: SortMeta = { field: 'createdAt', order: 1 } |
19 | pagination: RestPagination = { count: this.rowsPerPage, start: 0 } | 20 | pagination: RestPagination = { count: this.rowsPerPage, start: 0 } |
21 | scrollHeight = '' | ||
20 | 22 | ||
21 | constructor ( | 23 | constructor ( |
22 | private notificationsService: NotificationsService, | 24 | private notificationsService: NotificationsService, |
@@ -26,10 +28,14 @@ export class JobsListComponent extends RestTable { | |||
26 | super() | 28 | super() |
27 | } | 29 | } |
28 | 30 | ||
31 | ngOnInit () { | ||
32 | // 270 -> headers + footer... | ||
33 | this.scrollHeight = (viewportHeight() - 380) + 'px' | ||
34 | } | ||
35 | |||
29 | protected loadData () { | 36 | protected loadData () { |
30 | this.jobsService | 37 | this.jobsService |
31 | .getJobs(this.pagination, this.sort) | 38 | .getJobs(this.pagination, this.sort) |
32 | .map(res => this.restExtractor.applyToResultListData(res, this.formatJob.bind(this))) | ||
33 | .subscribe( | 39 | .subscribe( |
34 | resultList => { | 40 | resultList => { |
35 | this.jobs = resultList.data | 41 | this.jobs = resultList.data |
@@ -39,12 +45,4 @@ export class JobsListComponent extends RestTable { | |||
39 | err => this.notificationsService.error('Error', err.message) | 45 | err => this.notificationsService.error('Error', err.message) |
40 | ) | 46 | ) |
41 | } | 47 | } |
42 | |||
43 | private formatJob (job: Job) { | ||
44 | const handlerInputData = JSON.stringify(job.handlerInputData) | ||
45 | |||
46 | return Object.assign(job, { | ||
47 | handlerInputData | ||
48 | }) | ||
49 | } | ||
50 | } | 48 | } |
diff --git a/client/src/app/+admin/jobs/shared/job.service.ts b/client/src/app/+admin/jobs/shared/job.service.ts index 49f1ab6f5..0cfbdbbea 100644 --- a/client/src/app/+admin/jobs/shared/job.service.ts +++ b/client/src/app/+admin/jobs/shared/job.service.ts | |||
@@ -25,6 +25,13 @@ export class JobService { | |||
25 | 25 | ||
26 | return this.authHttp.get<ResultList<Job>>(JobService.BASE_JOB_URL, { params }) | 26 | return this.authHttp.get<ResultList<Job>>(JobService.BASE_JOB_URL, { params }) |
27 | .map(res => this.restExtractor.convertResultListDateToHuman(res)) | 27 | .map(res => this.restExtractor.convertResultListDateToHuman(res)) |
28 | .map(res => this.restExtractor.applyToResultListData(res, this.prettyPrintData)) | ||
28 | .catch(err => this.restExtractor.handleError(err)) | 29 | .catch(err => this.restExtractor.handleError(err)) |
29 | } | 30 | } |
31 | |||
32 | private prettyPrintData (obj: Job) { | ||
33 | const handlerInputData = JSON.stringify(obj.handlerInputData, null, 2) | ||
34 | |||
35 | return Object.assign(obj, { handlerInputData }) | ||
36 | } | ||
30 | } | 37 | } |