diff options
author | Chocobozzz <me@florianbigard.com> | 2018-02-23 14:36:16 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-02-23 14:36:16 +0100 |
commit | ab998f7b6dffbe461d830d3696cb46491ad6afb0 (patch) | |
tree | f819e4049ca62b5389fd31ebfcbcb6ffbe0eaf0b /client/src/app/+admin/jobs | |
parent | 621d99f53f47a11919ec243e05273ecf5907b444 (diff) | |
download | PeerTube-ab998f7b6dffbe461d830d3696cb46491ad6afb0.tar.gz PeerTube-ab998f7b6dffbe461d830d3696cb46491ad6afb0.tar.zst PeerTube-ab998f7b6dffbe461d830d3696cb46491ad6afb0.zip |
Improve admin tables
Diffstat (limited to 'client/src/app/+admin/jobs')
-rw-r--r-- | client/src/app/+admin/jobs/jobs-list/jobs-list.component.html | 52 | ||||
-rw-r--r-- | client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts | 22 |
2 files changed, 56 insertions, 18 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 f1b14e5e3..87717d3dd 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 | |||
@@ -8,20 +8,42 @@ | |||
8 | </div> | 8 | </div> |
9 | </div> | 9 | </div> |
10 | 10 | ||
11 | <p-table | ||
12 | [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" dataKey="id" | ||
13 | sortField="createdAt" (onLazyLoad)="loadLazy($event)" | ||
14 | > | ||
15 | <ng-template pTemplate="header"> | ||
16 | <tr> | ||
17 | <th style="width: 27px"></th> | ||
18 | <th style="width: 60px">ID</th> | ||
19 | <th style="width: 210px">Type</th> | ||
20 | <th style="width: 130px">State</th> | ||
21 | <th style="width: 250px" pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th> | ||
22 | <th style="width: 250px">Updated</th> | ||
23 | </tr> | ||
24 | </ng-template> | ||
11 | 25 | ||
26 | <ng-template pTemplate="body" let-expanded="expanded" let-job> | ||
27 | <tr> | ||
28 | <td> | ||
29 | <span class="expander" [pRowToggler]="job"> | ||
30 | <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i> | ||
31 | </span> | ||
32 | </td> | ||
33 | <td>{{ job.id }}</td> | ||
34 | <td>{{ job.type }}</td> | ||
35 | <td>{{ job.state }}</td> | ||
36 | <td>{{ job.createdAt }}</td> | ||
37 | <td>{{ job.updatedAt }}</td> | ||
38 | </tr> | ||
39 | </ng-template> | ||
40 | |||
41 | <ng-template pTemplate="rowexpansion" let-job> | ||
42 | <tr> | ||
43 | <td colspan="6"> | ||
44 | <pre>{{ job.data }}</pre> | ||
45 | </td> | ||
46 | </tr> | ||
47 | </ng-template> | ||
48 | </p-table> | ||
12 | 49 | ||
13 | <p-dataTable | ||
14 | [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" | ||
15 | sortField="createdAt" (onLazyLoad)="loadLazy($event)" [scrollable]="true" [virtualScroll]="true" [scrollHeight]="scrollHeight" | ||
16 | > | ||
17 | <p-column field="id" header="ID" [style]="{ width: '60px' }"></p-column> | ||
18 | <p-column field="type" header="Type" [style]="{ width: '210px' }"></p-column> | ||
19 | <p-column field="state" header="State" [style]="{ width: '130px' }"></p-column> | ||
20 | <p-column header="Payload"> | ||
21 | <ng-template pTemplate="body" let-job="rowData"> | ||
22 | <pre>{{ job.data }}</pre> | ||
23 | </ng-template> | ||
24 | </p-column> | ||
25 | <p-column field="createdAt" header="Created date" [sortable]="true" [style]="{ width: '250px' }"></p-column> | ||
26 | <p-column field="updatedAt" header="Updated date" [style]="{ width: '250px' }"></p-column> | ||
27 | </p-dataTable> | ||
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 7de6f70d2..80aba9f3a 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 | |||
@@ -14,11 +14,13 @@ import { RestExtractor } from '../../../shared/rest/rest-extractor.service' | |||
14 | styleUrls: [ './jobs-list.component.scss' ] | 14 | styleUrls: [ './jobs-list.component.scss' ] |
15 | }) | 15 | }) |
16 | export class JobsListComponent extends RestTable implements OnInit { | 16 | export class JobsListComponent extends RestTable implements OnInit { |
17 | private static JOB_STATE_LOCAL_STORAGE_STATE = 'jobs-list-state' | ||
18 | |||
17 | jobState: JobState = 'inactive' | 19 | jobState: JobState = 'inactive' |
18 | jobStates: JobState[] = [ 'active', 'complete', 'failed', 'inactive', 'delayed' ] | 20 | jobStates: JobState[] = [ 'active', 'complete', 'failed', 'inactive', 'delayed' ] |
19 | jobs: Job[] = [] | 21 | jobs: Job[] = [] |
20 | totalRecords = 0 | 22 | totalRecords: number |
21 | rowsPerPage = 20 | 23 | rowsPerPage = 10 |
22 | sort: SortMeta = { field: 'createdAt', order: -1 } | 24 | sort: SortMeta = { field: 'createdAt', order: -1 } |
23 | pagination: RestPagination = { count: this.rowsPerPage, start: 0 } | 25 | pagination: RestPagination = { count: this.rowsPerPage, start: 0 } |
24 | scrollHeight = '' | 26 | scrollHeight = '' |
@@ -32,12 +34,16 @@ export class JobsListComponent extends RestTable implements OnInit { | |||
32 | } | 34 | } |
33 | 35 | ||
34 | ngOnInit () { | 36 | ngOnInit () { |
35 | // 270 -> headers + footer... | 37 | // 380 -> headers + footer... |
36 | this.scrollHeight = (viewportHeight() - 380) + 'px' | 38 | this.scrollHeight = (viewportHeight() - 380) + 'px' |
39 | |||
40 | this.loadJobState() | ||
41 | this.loadSort() | ||
37 | } | 42 | } |
38 | 43 | ||
39 | onJobStateChanged () { | 44 | onJobStateChanged () { |
40 | this.loadData() | 45 | this.loadData() |
46 | this.saveJobState() | ||
41 | } | 47 | } |
42 | 48 | ||
43 | protected loadData () { | 49 | protected loadData () { |
@@ -52,4 +58,14 @@ export class JobsListComponent extends RestTable implements OnInit { | |||
52 | err => this.notificationsService.error('Error', err.message) | 58 | err => this.notificationsService.error('Error', err.message) |
53 | ) | 59 | ) |
54 | } | 60 | } |
61 | |||
62 | private loadJobState () { | ||
63 | const result = localStorage.getItem(JobsListComponent.JOB_STATE_LOCAL_STORAGE_STATE) | ||
64 | |||
65 | if (result) this.jobState = result as JobState | ||
66 | } | ||
67 | |||
68 | private saveJobState () { | ||
69 | localStorage.setItem(JobsListComponent.JOB_STATE_LOCAL_STORAGE_STATE, this.jobState) | ||
70 | } | ||
55 | } | 71 | } |