### File

`src/app/workflow/job-list/job-list.component.ts`

### Implements

`OnInit`

### Metadata

selector | `hi-job-list`
styleUrls | `./job-list.component.scss`
templateUrl | `./job-list.component.html`

### Index

###### Properties
headerHeight messages rowHeight sorts table
###### Methods
ngOnInit onSelect parseTime
###### Inputs
jobs

### Constructor

`constructor()`
Defined in src/app/workflow/job-list/job-list.component.ts:31

### Inputs

jobs
Type : `Job[]`
Defined in src/app/workflow/job-list/job-list.component.ts:16

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/workflow/job-list/job-list.component.ts:35
Returns : `void`

onSelect
`onSelect(undefined)`
Defined in src/app/workflow/job-list/job-list.component.ts:41
Parameters :
Name | Optional
No
Returns : `void`

parseTime
`parseTime(rawTime: string)`
Defined in src/app/workflow/job-list/job-list.component.ts:37
Parameters :
Name | Type | Optional
rawTime | `string` | No
Returns : `string`

### Properties

headerHeight
Default value : `Settings.tableHeaderHeight`
Defined in src/app/workflow/job-list/job-list.component.ts:22

messages
Type : `object`
Default value : `{ emptyMessage: 'The list is empty.', totalMessage: 'total', selectedMessage: 'selected', }`
Defined in src/app/workflow/job-list/job-list.component.ts:27

rowHeight
Default value : `Settings.tableRowHeight`
Defined in src/app/workflow/job-list/job-list.component.ts:21

sorts
Type : `[]`
Default value : `[ { prop: 'startTime', dir: 'desc' }, { prop: 'name', dir: 'asc' }, ]`
Defined in src/app/workflow/job-list/job-list.component.ts:23

table
Type : `DatatableComponent`
Decorators : `@ViewChild('jobsTable', {static: false})`
Defined in src/app/workflow/job-list/job-list.component.ts:19

    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>

`./job-list.component.scss`

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""