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     <div class="peertube-select-container">
  14       <select id="jobState" name="jobState" [(ngModel)]="jobState" (ngModelChange)="onJobStateOrTypeChanged()" class="form-control">
  15         <option *ngFor="let state of jobStates" [value]="state">{{ state }}</option>
  16       </select>
  17     </div>
  18   </div>
  19 </div>
  20
  21 <p-table
  22   [value]="jobs" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" dataKey="uniqId"
  23   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" [first]="pagination.start"
  24   [tableStyle]="{'table-layout':'auto'}" (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
  25 >
  26   <ng-template pTemplate="header">
  27     <tr>
  28       <th style="width: 40px"></th>
  29       <th style="width: 100%" class="job-id" i18n>ID</th>
  30       <th style="width: 200px" class="job-type" i18n>Type</th>
  31       <th style="width: 150px" class="job-date" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
  32       <th style="width: 150px" class="job-state" i18n>State</th>
  33     </tr>
  34   </ng-template>
  35
  36   <ng-template pTemplate="body" let-expanded="expanded" let-job>
  37     <tr>
  38       <td class="expand-cell">
  39         <span class="expander" [pRowToggler]="job" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
  40           <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
  41         </span>
  42       </td>
  43
  44       <td class="job-id" [title]="job.id">{{ job.id }}</td>
  45       <td class="job-type">{{ job.type }}</td>
  46       <td class="job-date">{{ job.createdAt | date: 'short' }}</td>
  47       <td class="job-state" *ngIf="job.state === 'delayed'" class="text-muted"><span class="glyphicon glyphicon-repeat"></span> <span i18n>Delayed</span></td>
  48       <td class="job-state" *ngIf="job.state === 'waiting'" class="text-warning"><span class="glyphicon glyphicon-hourglass"></span> <span i18n>Will start soon...</span></td>
  49       <td class="job-state" *ngIf="job.state === 'active'" class="text-warning"><span class="glyphicon glyphicon-cog"></span> <span i18n>Running...</span></td>
  50       <td class="job-state" *ngIf="job.state === 'completed'" class="text-success"><span class="glyphicon glyphicon-ok"></span> <span i18n>Finished</span></td>
  51       <td class="job-state" *ngIf="job.state === 'failed'" class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span i18n>Failed</span></td>
  52     </tr>
  53   </ng-template>
  54
  55   <ng-template pTemplate="rowexpansion" let-job>
  56     <tr>
  57       <td colspan="4">
  58         <pre>{{ [
  59           'Job: ' + job.id,
  60           'Type: ' + job.type,
  61           'Processed on ' + (job.processedOn || '-'),
  62           'Finished on ' + (job.finishedOn || '-')
  63         ].join('\n') }}</pre>
  64       </td>
  65     </tr>
  66     <tr>
  67       <td colspan="4">
  68         <pre>{{ job.data }}</pre>
  69       </td>
  70     </tr>
  71     <tr class="job-error" *ngIf="job.error">
  72       <td colspan="4">
  73         <pre>{{ job.error }}</pre>
  74       </td>
  75     </tr>
  76   </ng-template>
  77 </p-table>
  78