### File

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

### Implements

`OnInit`

### Metadata

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

### Index

###### Properties
clusterName headerHeight isLoading rowHeight sorts table workflowRows
###### Methods
checkSelectable ngOnInit

### Constructor

`constructor(router: Router, route: ActivatedRoute, workflowService: WorkflowService)`
Defined in src/app/workflow/workflow-list/workflow-list.component.ts:28
Parameters :
Name | Type | Optional
router | `Router` | No
route | `ActivatedRoute` | No
workflowService | `WorkflowService` | No

### Methods

checkSelectable
`checkSelectable(_event)`
Defined in src/app/workflow/workflow-list/workflow-list.component.ts:65
Parameters :
Name | Optional
_event | No
Returns : `boolean`

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

### Properties

clusterName
Type : `string`
Defined in src/app/workflow/workflow-list/workflow-list.component.ts:22

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

isLoading
Default value : `true`
Defined in src/app/workflow/workflow-list/workflow-list.component.ts:21

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

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

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

workflowRows
Type : `WorkflowRow[]`
Defined in src/app/workflow/workflow-list/workflow-list.component.ts:23

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { Router, ActivatedRoute } from '@angular/router';

    import { Settings } from '../../core/settings';
    import { WorkflowService } from '../shared/workflow.service';
    import { DatatableComponent } from '@swimlane/ngx-datatable';

    type WorkflowRow = {
      name: string;
    };

    @Component({
      selector: 'hi-workflow-list',
      templateUrl: './workflow-list.component.html',
      styleUrls: ['./workflow-list.component.scss'],
    })
    export class WorkflowListComponent implements OnInit {
      @ViewChild('workflowsTable', { static: false })
      table: DatatableComponent;

      isLoading = true;
      clusterName: string;
      workflowRows: WorkflowRow[];

      headerHeight = Settings.tableHeaderHeight;
      rowHeight = Settings.tableRowHeight;

      sorts = [{ prop: 'name', dir: 'asc' }];

      constructor(
        private router: Router,
        private route: ActivatedRoute,
        private workflowService: WorkflowService
      ) {}

      ngOnInit() {
        if (this.route.parent) {
          this.isLoading = true;
          this.clusterName = this.route.parent.snapshot.params['name'];

          this.workflowService.getAll(this.clusterName).subscribe(
            (workflows) => {
              this.workflowRows = workflows.map((workflowName) => {
                return {
                  name: workflowName,
                };
              });
            },
            (error) => {
              // since rest API simply throws 404 instead of empty config when config is not initialized yet
              // frontend has to treat 404 as normal result
              if (error != 'Not Found') {
                console.error(error);
              }
              this.isLoading = false;
            },
            () => (this.isLoading = false)
          );
        }
      }

      // Disable table row selection using the
      // selectCheck option of the
      // <ngx-datatable></ngx-datatable> element
      checkSelectable(_event) {
        return false;
      }
    }

    <!--
      ~ 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.
      -->

    <section fxLayout="column" fxLayoutAlign="center center">
      <mat-spinner *ngIf="isLoading"></mat-spinner>
      <section fxFlexFill>
        <section *ngIf="!isLoading && workflowRows.length == 0" class="empty">
          There's no workflow here.
        </section>
        <section>
          <ngx-datatable
            #workflowsTable
            class="material"
            [headerHeight]="headerHeight"
            [rowHeight]="rowHeight"
            columnMode="force"
            [footerHeight]="rowHeight"
            [rows]="workflowRows"
            [sorts]="sorts"
            [limit]="20"
            [selectCheck]="checkSelectable"
          >
            <ngx-datatable-column
              name="Workflow ID"
              prop="name"
              [resizeable]="true"
              [sortable]="true"
              [draggable]="false"
              [canAutoResize]="true"
            >
              <ng-template let-row="row" ngx-datatable-cell-template>
                <a routerLink="{{row.name}}">{{row.name}}</a>
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-row-detail rowHeight="auto">
              <ng-template let-row="row" ngx-datatable-row-detail-template>
              </ng-template>
            </ngx-datatable-row-detail>
            <ngx-datatable-footer>
              <ng-template
                ngx-datatable-footer-template
                let-rowCount="rowCount"
                let-pageSize="pageSize"
                let-curPage="curPage"
              >
                <section
                  class="footer"
                  fxLayout="row"
                  fxLayoutAlign="space-between center"
                >
                  <section>{{ rowCount }} total</section>
                  <section>
                    <datatable-pager
                      [pagerLeftArrowIcon]="'datatable-icon-left'"
                      [pagerRightArrowIcon]="'datatable-icon-right'"
                      [pagerPreviousIcon]="'datatable-icon-prev'"
                      [pagerNextIcon]="'datatable-icon-skip'"
                      [page]="curPage"
                      [size]="pageSize"
                      [count]="rowCount"
                      [hidden]="!(rowCount / pageSize > 1)"
                      (change)="workflowsTable.onFooterPage($event)"
                    >
                    </datatable-pager>
                  </section>
                </section>
              </ng-template>
            </ngx-datatable-footer>
          </ngx-datatable>
        </section>
      </section>
    </section>

`./workflow-list.component.scss`

    .empty {
      padding: 20px;
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""