client/src/app/+admin/system/jobs/jobs.component.html

   1 <div class="admin-sub-header">
   2   <div class="select-filter-block">
   3     <label for="jobType" i18n>Job type</label>
   4     <div class="peertube-select-container">
   5       <select id="jobType" name="jobType" [(ngModel)]="jobType" (ngModelChange)="onJobStateOrTypeChanged()" class="form-control">
   6         <option *ngFor="let jobType of jobTypes" [value]="jobType">{{ jobType }}</option>
   7       </select>
   8     </div>
   9   </div>
  10
  11   <div class="select-filter-block">
  12     <label for="jobState" i18n>Job state</label>
  13     <ng-select
  14       class="select-job-state"
  15       [(ngModel)]="jobState"
  16       (ngModelChange)="onJobStateOrTypeChanged()"
  17       [clearable]="false"
  18       [searchable]="false"
  19     >
  20       <ng-option value="all">
  21         <span i18n="Selector for the list displaying jobs, filtering by their state">any</span>
  22       </ng-option>
  23       <ng-option *ngFor="let state of jobStates" [value]="state">
  24         <span class="badge" [ngClass]="getJobStateClass(state)">{{ state }}</span>
  25       </ng-option>
  26     </ng-select>
  27   </div>
  28
  29   <div class="button-filter-block">
  30     <my-button i18n-label label="Refresh" icon="refresh" (click)="refresh()"></my-button>
  31   </div>
  32 </div>
  33
  34 <p-table
  35   [value]="jobs" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage"  [rowsPerPageOptions]="rowsPerPageOptions"
  36   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="uniqId" [first]="pagination.start"
  37   [tableStyle]="{'table-layout':'auto'}" (onPage)="onPage($event)"
  38   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
  39   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} jobs"
  40   (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
  41 >
  42   <ng-template pTemplate="header">
  43     <tr>
  44       <th style="width: 40px"></th>
  45       <th style="width: calc(100% - 390px)" class="job-id" i18n>ID</th>
  46       <th style="width: 200px" class="job-type" i18n>Type</th>
  47       <th style="width: 200px" class="job-priority" i18n>Priority <small>(1 = highest priority)</small></th>
  48       <th style="width: 200px" class="job-state" i18n *ngIf="jobState === 'all'">State</th>
  49       <th style="width: 100px" class="job-progress" i18n *ngIf="hasProgress()">Progress</th>
  50       <th style="width: 150px" class="job-date" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
  51     </tr>
  52   </ng-template>
  53
  54   <ng-template pTemplate="body" let-expanded="expanded" let-job>
  55     <tr>
  56       <td class="expand-cell c-hand" [pRowToggler]="job" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
  57         <span class="expander">
  58           <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
  59         </span>
  60       </td>
  61
  62       <td class="job-id c-hand" [pRowToggler]="job" [title]="job.id">{{ job.id }}</td>
  63       <td class="job-type c-hand" [pRowToggler]="job">{{ job.type }}</td>
  64       <td class="job-priority c-hand" [pRowToggler]="job">{{ job.priority }}</td>
  65
  66       <td class="job-state c-hand" [pRowToggler]="job" *ngIf="jobState === 'all'">
  67         <span class="badge" [ngClass]="getJobStateClass(job.state)">{{ job.state }}</span>
  68       </td>
  69
  70       <td class="job-progress c-hand" [pRowToggler]="job" *ngIf="hasProgress()">
  71         {{ getProgress(job) }}
  72       </td>
  73
  74       <td class="job-date c-hand" [pRowToggler]="job">{{ job.createdAt | date: 'short' }}</td>
  75     </tr>
  76   </ng-template>
  77
  78   <ng-template pTemplate="rowexpansion" let-job>
  79     <tr>
  80       <td [attr.colspan]="getColspan()">
  81         <pre>{{ [
  82           'Job: ' + job.id,
  83           'Type: ' + job.type,
  84           'Processed on ' + (job.processedOn || '-'),
  85           'Finished on ' + (job.finishedOn || '-')
  86         ].join('\n') }}</pre>
  87       </td>
  88     </tr>
  89     <tr>
  90       <td [attr.colspan]="getColspan()">
  91         <pre>{{ job.data }}</pre>
  92       </td>
  93     </tr>
  94     <tr class="job-error" *ngIf="job.error">
  95       <td [attr.colspan]="getColspan()">
  96         <pre>{{ job.error }}</pre>
  97       </td>
  98     </tr>
  99   </ng-template>
 100
 101   <ng-template pTemplate="emptymessage">
 102     <tr>
 103       <td [attr.colspan]="getColspan()">
 104         <div class="no-results">
 105           <div class="d-block">
 106             <ng-container *ngIf="jobState === 'all'">
 107               <ng-container *ngIf="jobType === 'all'" i18n>No jobs found.</ng-container>
 108               <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found.</ng-container>
 109             </ng-container>
 110
 111             <ng-container *ngIf="jobState !== 'all'">
 112               <ng-container *ngIf="jobType === 'all'" i18n>No <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span> jobs found.</ng-container>
 113               <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found that are <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span>.</ng-container>
 114             </ng-container>
 115           </div>
 116         </div>
 117       </td>
 118     </tr>
 119   </ng-template>
 120 </p-table>
 121