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-type" i18n *ngIf="jobState === 'all'">State</th>
  44       <th style="width: 150px" class="job-date" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
  45     </tr>
  46   </ng-template>
  47
  48   <ng-template pTemplate="body" let-expanded="expanded" let-job>
  49     <tr>
  50       <td class="expand-cell c-hand" [pRowToggler]="job" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
  51         <span class="expander">
  52           <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
  53         </span>
  54       </td>
  55
  56       <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" *ngIf="jobState === 'all'">
  59         <span class="badge" [ngClass]="getJobStateClass(job.state)">{{ job.state }}</span>
  60       </td>
  61       <td class="job-date c-hand" [pRowToggler]="job">{{ job.createdAt | date: 'short' }}</td>
  62     </tr>
  63   </ng-template>
  64
  65   <ng-template pTemplate="rowexpansion" let-job>
  66     <tr>
  67       <td [attr.colspan]="getColspan()">
  68         <pre>{{ [
  69           'Job: ' + job.id,
  70           'Type: ' + job.type,
  71           'Processed on ' + (job.processedOn || '-'),
  72           'Finished on ' + (job.finishedOn || '-')
  73         ].join('\n') }}</pre>
  74       </td>
  75     </tr>
  76     <tr>
  77       <td [attr.colspan]="getColspan()">
  78         <pre>{{ job.data }}</pre>
  79       </td>
  80     </tr>
  81     <tr class="job-error" *ngIf="job.error">
  82       <td [attr.colspan]="getColspan()">
  83         <pre>{{ job.error }}</pre>
  84       </td>
  85     </tr>
  86   </ng-template>
  87
  88   <ng-template pTemplate="emptymessage">
  89     <tr>
  90       <td [attr.colspan]="getColspan()">
  91         <div class="no-results">
  92           <div class="d-block">
  93             <ng-container *ngIf="jobState === 'all'">
  94               <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>
  96             </ng-container>
  97             <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>
  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>
 100             </ng-container>
 101           </div>
 102         </div>
 103       </td>
 104     </tr>
 105   </ng-template>
 106 </p-table>
 107