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 </div>
  29
  30 <p-table
  31   [value]="jobs" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage"  [rowsPerPageOptions]="rowsPerPageOptions"
  32   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="uniqId" [first]="pagination.start"
  33   [tableStyle]="{'table-layout':'auto'}" (onPage)="onPage($event)"
  34   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
  35   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} jobs"
  36   (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
  37 >
  38   <ng-template pTemplate="header">
  39     <tr>
  40       <th style="width: 40px"></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>
  43       <th style="width: 200px" class="job-priority" i18n>Priority <small>(1 = highest priority)</small></th>
  44       <th style="width: 200px" class="job-state" i18n *ngIf="jobState === 'all'">State</th>
  45       <th style="width: 100px" class="job-progress" i18n *ngIf="hasProgress()">Progress</th>
  46       <th style="width: 150px" class="job-date" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
  47     </tr>
  48   </ng-template>
  49
  50   <ng-template pTemplate="body" let-expanded="expanded" let-job>
  51     <tr>
  52       <td class="expand-cell c-hand" [pRowToggler]="job" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
  53         <span class="expander">
  54           <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
  55         </span>
  56       </td>
  57
  58       <td class="job-id c-hand" [pRowToggler]="job" [title]="job.id">{{ job.id }}</td>
  59       <td class="job-type c-hand" [pRowToggler]="job">{{ job.type }}</td>
  60       <td class="job-priority c-hand" [pRowToggler]="job">{{ job.priority }}</td>
  61
  62       <td class="job-state c-hand" [pRowToggler]="job" *ngIf="jobState === 'all'">
  63         <span class="badge" [ngClass]="getJobStateClass(job.state)">{{ job.state }}</span>
  64       </td>
  65
  66       <td class="job-progress c-hand" [pRowToggler]="job" *ngIf="hasProgress()">
  67         {{ getProgress(job) }}
  68       </td>
  69
  70       <td class="job-date c-hand" [pRowToggler]="job">{{ job.createdAt | date: 'short' }}</td>
  71     </tr>
  72   </ng-template>
  73
  74   <ng-template pTemplate="rowexpansion" let-job>
  75     <tr>
  76       <td [attr.colspan]="getColspan()">
  77         <pre>{{ [
  78           'Job: ' + job.id,
  79           'Type: ' + job.type,
  80           'Processed on ' + (job.processedOn || '-'),
  81           'Finished on ' + (job.finishedOn || '-')
  82         ].join('\n') }}</pre>
  83       </td>
  84     </tr>
  85     <tr>
  86       <td [attr.colspan]="getColspan()">
  87         <pre>{{ job.data }}</pre>
  88       </td>
  89     </tr>
  90     <tr class="job-error" *ngIf="job.error">
  91       <td [attr.colspan]="getColspan()">
  92         <pre>{{ job.error }}</pre>
  93       </td>
  94     </tr>
  95   </ng-template>
  96
  97   <ng-template pTemplate="emptymessage">
  98     <tr>
  99       <td [attr.colspan]="getColspan()">
 100         <div class="no-results">
 101           <div class="d-block">
 102             <ng-container *ngIf="jobState === 'all'">
 103               <ng-container *ngIf="jobType === 'all'" i18n>No jobs found.</ng-container>
 104               <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found.</ng-container>
 105             </ng-container>
 106             <ng-container *ngIf="jobState !== 'all'">
 107               <ng-container *ngIf="jobType === 'all'" i18n>No <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span> jobs found.</ng-container>
 108               <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found that are <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span>.</ng-container>
 109             </ng-container>
 110           </div>
 111         </div>
 112       </td>
 113     </tr>
 114   </ng-template>
 115 </p-table>
 116