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 *ngFor="let state of jobStates" [value]="state">
  21         <span class="badge" [ngClass]="getJobStateClass(state)">{{ state }}</span>
  22       </ng-option>
  23     </ng-select>
  24   </div>
  25 </div>
  26
  27 <p-table
  28   [value]="jobs" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage"  [rowsPerPageOptions]="rowsPerPageOptions"
  29   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="uniqId" [first]="pagination.start"
  30   [tableStyle]="{'table-layout':'auto'}" (onPage)="onPage($event)"
  31   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
  32   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} jobs"
  33   (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
  34 >
  35   <ng-template pTemplate="header">
  36     <tr>
  37       <th style="width: 40px"></th>
  38       <th style="width: calc(100% - 390px)" class="job-id" i18n>ID</th>
  39       <th style="width: 200px" class="job-type" i18n>Type</th>
  40       <th style="width: 150px" class="job-date" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
  41     </tr>
  42   </ng-template>
  43
  44   <ng-template pTemplate="body" let-expanded="expanded" let-job>
  45     <tr>
  46       <td class="expand-cell" [pRowToggler]="job" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
  47         <span class="expander">
  48           <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
  49         </span>
  50       </td>
  51
  52       <td class="job-id" [pRowToggler]="job" [title]="job.id">{{ job.id }}</td>
  53       <td class="job-type" [pRowToggler]="job">{{ job.type }}</td>
  54       <td class="job-date" [pRowToggler]="job">{{ job.createdAt | date: 'short' }}</td>
  55     </tr>
  56   </ng-template>
  57
  58   <ng-template pTemplate="rowexpansion" let-job>
  59     <tr>
  60       <td colspan="4">
  61         <pre>{{ [
  62           'Job: ' + job.id,
  63           'Type: ' + job.type,
  64           'Processed on ' + (job.processedOn || '-'),
  65           'Finished on ' + (job.finishedOn || '-')
  66         ].join('\n') }}</pre>
  67       </td>
  68     </tr>
  69     <tr>
  70       <td colspan="4">
  71         <pre>{{ job.data }}</pre>
  72       </td>
  73     </tr>
  74     <tr class="job-error" *ngIf="job.error">
  75       <td colspan="4">
  76         <pre>{{ job.error }}</pre>
  77       </td>
  78     </tr>
  79   </ng-template>
  80
  81   <ng-template pTemplate="emptymessage">
  82     <tr>
  83       <td colspan="4">
  84         <div class="no-results">
  85           <div class="d-block">
  86             <ng-container *ngIf="jobType === 'all'" i18n>No <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span> jobs found.</ng-container>
  87             <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found that are <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span>.</ng-container>
  88           </div>
  89         </div>
  90       </td>
  91     </tr>
  92   </ng-template>
  93 </p-table>
  94