diff options
Diffstat (limited to 'client')
-rw-r--r-- | client/src/app/+admin/system/jobs/jobs.component.html | 13 | ||||
-rw-r--r-- | client/src/app/+admin/system/jobs/jobs.component.scss | 3 | ||||
-rw-r--r-- | client/src/app/+admin/system/jobs/jobs.component.ts | 10 |
3 files changed, 22 insertions, 4 deletions
diff --git a/client/src/app/+admin/system/jobs/jobs.component.html b/client/src/app/+admin/system/jobs/jobs.component.html index 2d60e7b9e..b6457a005 100644 --- a/client/src/app/+admin/system/jobs/jobs.component.html +++ b/client/src/app/+admin/system/jobs/jobs.component.html | |||
@@ -40,7 +40,8 @@ | |||
40 | <th style="width: 40px"></th> | 40 | <th style="width: 40px"></th> |
41 | <th style="width: calc(100% - 390px)" class="job-id" i18n>ID</th> | 41 | <th style="width: calc(100% - 390px)" class="job-id" i18n>ID</th> |
42 | <th style="width: 200px" class="job-type" i18n>Type</th> | 42 | <th style="width: 200px" class="job-type" i18n>Type</th> |
43 | <th style="width: 200px" class="job-type" i18n *ngIf="jobState === 'all'">State</th> | 43 | <th style="width: 200px" class="job-state" i18n *ngIf="jobState === 'all'">State</th> |
44 | <th style="width: 100px" class="job-progress" i18n *ngIf="hasProgress()">Progress</th> | ||
44 | <th style="width: 150px" class="job-date" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th> | 45 | <th style="width: 150px" class="job-date" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th> |
45 | </tr> | 46 | </tr> |
46 | </ng-template> | 47 | </ng-template> |
@@ -55,9 +56,15 @@ | |||
55 | 56 | ||
56 | <td class="job-id c-hand" [pRowToggler]="job" [title]="job.id">{{ job.id }}</td> | 57 | <td class="job-id c-hand" [pRowToggler]="job" [title]="job.id">{{ job.id }}</td> |
57 | <td class="job-type c-hand" [pRowToggler]="job">{{ job.type }}</td> | 58 | <td class="job-type c-hand" [pRowToggler]="job">{{ job.type }}</td> |
58 | <td class="job-type c-hand" [pRowToggler]="job" *ngIf="jobState === 'all'"> | 59 | |
60 | <td class="job-state c-hand" [pRowToggler]="job" *ngIf="jobState === 'all'"> | ||
59 | <span class="badge" [ngClass]="getJobStateClass(job.state)">{{ job.state }}</span> | 61 | <span class="badge" [ngClass]="getJobStateClass(job.state)">{{ job.state }}</span> |
60 | </td> | 62 | </td> |
63 | |||
64 | <td class="job-state" [pRowToggler]="job" *ngIf="hasProgress()"> | ||
65 | {{ getProgress(job) }} | ||
66 | </td> | ||
67 | |||
61 | <td class="job-date c-hand" [pRowToggler]="job">{{ job.createdAt | date: 'short' }}</td> | 68 | <td class="job-date c-hand" [pRowToggler]="job">{{ job.createdAt | date: 'short' }}</td> |
62 | </tr> | 69 | </tr> |
63 | </ng-template> | 70 | </ng-template> |
@@ -94,7 +101,7 @@ | |||
94 | <ng-container *ngIf="jobType === 'all'" i18n>No jobs found.</ng-container> | 101 | <ng-container *ngIf="jobType === 'all'" i18n>No jobs found.</ng-container> |
95 | <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found.</ng-container> | 102 | <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found.</ng-container> |
96 | </ng-container> | 103 | </ng-container> |
97 | <ng-container *ngIf="jobState !== 'all'"> | 104 | <ng-container *ngIf="jobState !== 'all'"> |
98 | <ng-container *ngIf="jobType === 'all'" i18n>No <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span> jobs found.</ng-container> | 105 | <ng-container *ngIf="jobType === 'all'" i18n>No <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span> jobs found.</ng-container> |
99 | <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found that are <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span>.</ng-container> | 106 | <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found that are <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span>.</ng-container> |
100 | </ng-container> | 107 | </ng-container> |
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss index 784ec4572..9c6ae73e1 100644 --- a/client/src/app/+admin/system/jobs/jobs.component.scss +++ b/client/src/app/+admin/system/jobs/jobs.component.scss | |||
@@ -9,7 +9,8 @@ | |||
9 | max-width: 30vw !important; | 9 | max-width: 30vw !important; |
10 | } | 10 | } |
11 | 11 | ||
12 | .job-type { | 12 | .job-type, |
13 | .job-state { | ||
13 | width: 150px !important; | 14 | width: 150px !important; |
14 | } | 15 | } |
15 | 16 | ||
diff --git a/client/src/app/+admin/system/jobs/jobs.component.ts b/client/src/app/+admin/system/jobs/jobs.component.ts index b1940b0d3..6ab17b3c1 100644 --- a/client/src/app/+admin/system/jobs/jobs.component.ts +++ b/client/src/app/+admin/system/jobs/jobs.component.ts | |||
@@ -83,6 +83,16 @@ export class JobsComponent extends RestTable implements OnInit { | |||
83 | this.saveJobStateAndType() | 83 | this.saveJobStateAndType() |
84 | } | 84 | } |
85 | 85 | ||
86 | hasProgress () { | ||
87 | return this.jobType === 'all' || this.jobType === 'video-transcoding' | ||
88 | } | ||
89 | |||
90 | getProgress (job: Job) { | ||
91 | if (job.state === 'active') return job.progress + '%' | ||
92 | |||
93 | return '' | ||
94 | } | ||
95 | |||
86 | protected loadData () { | 96 | protected loadData () { |
87 | let jobState = this.jobState as JobState | 97 | let jobState = this.jobState as JobState |
88 | if (this.jobState === 'all') jobState = null | 98 | if (this.jobState === 'all') jobState = null |