File
    Implements
    
    
    
    Index
    
        
                
                    | Properties | 
                
                    |  | 
                
                    | Methods | 
                
                    |  | 
                
                    | Inputs | 
                
                    |  | 
        
    
    
    
    
    
    
        Methods
    
    
    
        
            
                | onSelect | 
            
                | onSelect(undefined) | 
            
                |  | 
            
                | 
                     
                        
                     | 
        
    
    
        
            
                | parseTime | 
            
                | parseTime(rawTime: string) | 
            
                |  | 
            
                | 
                        Parameters :
                        
                        
                            
                                
                                    | Name | Type | Optional |  
                                    | rawTime | string | No |  
                     
                        
                     | 
        
    
    
    
    
    
        
            
                | headerHeight | 
                
                    | Default value : Settings.tableHeaderHeight | 
                    
                        |  | 
        
    
    
        
            
                | messages | 
                
                    | Type : object | 
                
                    | Default value : {
    emptyMessage: 'The list is empty.',
    totalMessage: 'total',
    selectedMessage: 'selected',
  } | 
                    
                        |  | 
        
    
    
        
            
                | rowHeight | 
                
                    | Default value : Settings.tableRowHeight | 
                    
                        |  | 
        
    
    
        
            
                | sorts | 
                
                    | Type : [] | 
                
                    | Default value : [
    { prop: 'startTime', dir: 'desc' },
    { prop: 'name', dir: 'asc' },
  ] | 
                    
                        |  | 
        
    
    
        
            
                | table | 
                
                    | Type : DatatableComponent | 
                
                    | Decorators : 
 
                            @ViewChild('jobsTable', {static: false})
 | 
                    
                        |  | 
        
    
        import { Component, OnInit, Input, ViewChild } from '@angular/core';
import moment from 'moment';
import { Settings } from '../../core/settings';
import { Job } from '../shared/workflow.model';
import { DatatableComponent } from '@swimlane/ngx-datatable';
@Component({
  selector: 'hi-job-list',
  templateUrl: './job-list.component.html',
  styleUrls: ['./job-list.component.scss'],
})
export class JobListComponent implements OnInit {
  @Input()
  jobs: Job[];
  @ViewChild('jobsTable', { static: false })
  table: DatatableComponent;
  rowHeight = Settings.tableRowHeight;
  headerHeight = Settings.tableHeaderHeight;
  sorts = [
    { prop: 'startTime', dir: 'desc' },
    { prop: 'name', dir: 'asc' },
  ];
  messages = {
    emptyMessage: 'The list is empty.',
    totalMessage: 'total',
    selectedMessage: 'selected',
  };
  constructor() {}
  ngOnInit() {}
  parseTime(rawTime: string): string {
    return moment(parseInt(rawTime)).fromNow();
  }
  onSelect({ selected }) {
    const row = selected[0];
    this.table.rowDetail.toggleExpandRow(row);
  }
}
     
    
        <!--
  ~ 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>
     
    
    
        
        
            
                Legend
            
            
            
            
                Html element with directive