diff options
author | Julien Maulny <julien.maulny@protonmail.com> | 2019-12-27 19:30:12 +0100 |
---|---|---|
committer | Rigel Kent <sendmemail@rigelk.eu> | 2020-01-06 15:10:19 +0100 |
commit | 4271212172ebd3ff5b4196ecb4064f79f7d5e0de (patch) | |
tree | 98a547b23de8c08e68f119d8fb8c49e37c2c56a3 /client/src/app/+admin/system/jobs/jobs.component.html | |
parent | 51b34a11b298b466faef9c8d24beec4442d7add3 (diff) | |
download | PeerTube-4271212172ebd3ff5b4196ecb4064f79f7d5e0de.tar.gz PeerTube-4271212172ebd3ff5b4196ecb4064f79f7d5e0de.tar.zst PeerTube-4271212172ebd3ff5b4196ecb4064f79f7d5e0de.zip |
Enhance jobs list displaying on smaller screens
Diffstat (limited to 'client/src/app/+admin/system/jobs/jobs.component.html')
-rw-r--r-- | client/src/app/+admin/system/jobs/jobs.component.html | 49 |
1 files changed, 27 insertions, 22 deletions
diff --git a/client/src/app/+admin/system/jobs/jobs.component.html b/client/src/app/+admin/system/jobs/jobs.component.html index de43b6448..af07a32a1 100644 --- a/client/src/app/+admin/system/jobs/jobs.component.html +++ b/client/src/app/+admin/system/jobs/jobs.component.html | |||
@@ -2,7 +2,7 @@ | |||
2 | <div i18n class="form-sub-title">Jobs list</div> | 2 | <div i18n class="form-sub-title">Jobs list</div> |
3 | 3 | ||
4 | <div class="select-filter-block"> | 4 | <div class="select-filter-block"> |
5 | <label for="jobType">Job type</label> | 5 | <label for="jobType" i18n>Job type</label> |
6 | <div class="peertube-select-container"> | 6 | <div class="peertube-select-container"> |
7 | <select id="jobType" name="jobType" [(ngModel)]="jobType" (ngModelChange)="onJobStateOrTypeChanged()"> | 7 | <select id="jobType" name="jobType" [(ngModel)]="jobType" (ngModelChange)="onJobStateOrTypeChanged()"> |
8 | <option *ngFor="let jobType of jobTypes" [value]="jobType">{{ jobType }}</option> | 8 | <option *ngFor="let jobType of jobTypes" [value]="jobType">{{ jobType }}</option> |
@@ -11,7 +11,7 @@ | |||
11 | </div> | 11 | </div> |
12 | 12 | ||
13 | <div class="select-filter-block"> | 13 | <div class="select-filter-block"> |
14 | <label for="jobState">Job state</label> | 14 | <label for="jobState" i18n>Job state</label> |
15 | <div class="peertube-select-container"> | 15 | <div class="peertube-select-container"> |
16 | <select id="jobState" name="jobState" [(ngModel)]="jobState" (ngModelChange)="onJobStateOrTypeChanged()"> | 16 | <select id="jobState" name="jobState" [(ngModel)]="jobState" (ngModelChange)="onJobStateOrTypeChanged()"> |
17 | <option *ngFor="let state of jobStates" [value]="state">{{ state }}</option> | 17 | <option *ngFor="let state of jobStates" [value]="state">{{ state }}</option> |
@@ -23,43 +23,48 @@ | |||
23 | <p-table | 23 | <p-table |
24 | [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" dataKey="uniqId" | 24 | [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" dataKey="uniqId" |
25 | [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" [first]="pagination.start" | 25 | [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" [first]="pagination.start" |
26 | [tableStyle]="{'table-layout':'auto'}" | ||
26 | > | 27 | > |
27 | <ng-template pTemplate="header"> | 28 | <ng-template pTemplate="header"> |
28 | <tr> | 29 | <tr> |
29 | <th style="width: 27px"></th> | 30 | <th i18n style="max-width: 60px;">ID</th> |
30 | <th i18n style="width: 60px">ID</th> | 31 | <th i18n style="max-width: 120px;">Type</th> |
31 | <th i18n style="width: 210px">Type</th> | 32 | <th i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th> |
32 | <th i18n style="width: 130px">State</th> | 33 | <th i18n>State</th> |
33 | <th i18n style="width: 250px" pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th> | ||
34 | <th i18n style="width: 250px">Processed on</th> | ||
35 | <th i18n style="width: 250px">Finished on</th> | ||
36 | </tr> | 34 | </tr> |
37 | </ng-template> | 35 | </ng-template> |
38 | 36 | ||
39 | <ng-template pTemplate="body" let-expanded="expanded" let-job> | 37 | <ng-template pTemplate="body" let-expanded="expanded" let-job> |
40 | <tr> | 38 | <tr class="expander" [pRowToggler]="job"> |
41 | <td class="expand-cell"> | 39 | <td style="max-width: 60px;">{{ job.id }}</td> |
42 | <span class="expander" [pRowToggler]="job"> | 40 | <td style="max-width: 120px;">{{ job.type }}</td> |
43 | <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i> | ||
44 | </span> | ||
45 | </td> | ||
46 | <td>{{ job.id }}</td> | ||
47 | <td>{{ job.type }}</td> | ||
48 | <td>{{ job.state }}</td> | ||
49 | <td>{{ job.createdAt }}</td> | 41 | <td>{{ job.createdAt }}</td> |
50 | <td>{{ job.processedOn }}</td> | 42 | <td *ngIf="job.state === 'delayed'" class="text-muted"><span class="glyphicon glyphicon-repeat"></span> <span i18n>Delayed.</span></td> |
51 | <td>{{ job.finishedOn }}</td> | 43 | <td *ngIf="job.state === 'waiting'" class="text-warning"><span class="glyphicon glyphicon-hourglass"></span> <span i18n>Will start soon...</span></td> |
44 | <td *ngIf="job.state === 'active'" class="text-warning"><span class="glyphicon glyphicon-cog"></span> <span i18n>Running...</span></td> | ||
45 | <td *ngIf="job.state === 'completed'" class="text-success"><span class="glyphicon glyphicon-ok"></span> <span i18n>Finished</span></td> | ||
46 | <td *ngIf="job.state === 'failed'" class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span i18n>Failed</span></td> | ||
52 | </tr> | 47 | </tr> |
53 | </ng-template> | 48 | </ng-template> |
54 | 49 | ||
55 | <ng-template pTemplate="rowexpansion" let-job> | 50 | <ng-template pTemplate="rowexpansion" let-job> |
56 | <tr> | 51 | <tr> |
57 | <td colspan="7"> | 52 | <td colspan="4"> |
53 | <pre>{{ [ | ||
54 | 'Job: ' + job.id, | ||
55 | 'Type: ' + job.type, | ||
56 | 'Processed on ' + (job.processedOn || '-'), | ||
57 | 'Finished on ' + (job.finishedOn || '-') | ||
58 | ].join('\n') }}</pre> | ||
59 | </td> | ||
60 | </tr> | ||
61 | <tr> | ||
62 | <td colspan="4"> | ||
58 | <pre>{{ job.data }}</pre> | 63 | <pre>{{ job.data }}</pre> |
59 | </td> | 64 | </td> |
60 | </tr> | 65 | </tr> |
61 | <tr class="job-error" *ngIf="job.error"> | 66 | <tr class="job-error" *ngIf="job.error"> |
62 | <td colspan="7"> | 67 | <td colspan="4"> |
63 | <pre>{{ job.error }}</pre> | 68 | <pre>{{ job.error }}</pre> |
64 | </td> | 69 | </td> |
65 | </tr> | 70 | </tr> |