| <!-- |
| ~ Licensed to the Apache Software Foundation (ASF) under one |
| ~ or more contributor license agreements. See the NOTICE file |
| ~ distributed with this work for additional information |
| ~ regarding copyright ownership. The ASF licenses this file |
| ~ to you under the Apache License, Version 2.0 (the |
| ~ "License"); you may not use this file except in compliance |
| ~ with the License. You may obtain a copy of the License at |
| ~ |
| ~ http://www.apache.org/licenses/LICENSE-2.0 |
| ~ |
| ~ Unless required by applicable law or agreed to in writing, |
| ~ software distributed under the License is distributed on an |
| ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| ~ KIND, either express or implied. See the License for the |
| ~ specific language governing permissions and limitations |
| ~ under the License. |
| --> |
| |
| <ngx-datatable |
| #jobsTable |
| class="material" |
| [headerHeight]="headerHeight" |
| [rowHeight]="rowHeight" |
| columnMode="force" |
| [footerHeight]="rowHeight" |
| [rows]="jobs" |
| selectionType="single" |
| [sorts]="sorts" |
| (select)="onSelect($event)" |
| [messages]="messages" |
| fxFill |
| > |
| <ngx-datatable-column |
| [width]="50" |
| [resizeable]="false" |
| [sortable]="false" |
| [draggable]="false" |
| [canAutoResize]="false" |
| > |
| <ng-template let-expanded="expanded" ngx-datatable-cell-template> |
| <mat-icon>{{ expanded ? 'expand_more' : 'chevron_right' }}</mat-icon> |
| </ng-template> |
| </ngx-datatable-column> |
| <ngx-datatable-column |
| name="Start Time" |
| [width]="200" |
| [resizeable]="false" |
| [draggable]="false" |
| [canAutoResize]="false" |
| > |
| <ng-template let-value="value" ngx-datatable-cell-template> |
| <span *ngIf="value" [matTooltip]="value | date: 'medium'"> |
| {{ parseTime(value) }} |
| </span> |
| <span *ngIf="!value">-</span> |
| </ng-template> |
| </ngx-datatable-column> |
| <ngx-datatable-column name="Job Name" prop="name"> |
| <ng-template let-row="row" let-value="value" ngx-datatable-cell-template> |
| <span [matTooltip]="row.rawName"> ...{{ value }} </span> |
| </ng-template> |
| </ngx-datatable-column> |
| <ngx-datatable-column |
| name="State" |
| [width]="120" |
| [resizeable]="false" |
| [draggable]="false" |
| [canAutoResize]="false" |
| > |
| <ng-template let-value="value" ngx-datatable-cell-template> |
| <span *ngIf="value" class="state-default state-{{ value }}"> |
| {{ value }} |
| </span> |
| <span *ngIf="!value" class="state-PENDING">PENDING</span> |
| </ng-template> |
| </ngx-datatable-column> |
| <ngx-datatable-row-detail rowHeight="auto"> |
| <ng-template let-row="row" ngx-datatable-row-detail-template> |
| <hi-job-detail [job]="row"></hi-job-detail> |
| </ng-template> |
| </ngx-datatable-row-detail> |
| </ngx-datatable> |