File

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

Implements

OnInit

Metadata

Index

Properties
Methods

Constructor

constructor(router: Router, route: ActivatedRoute, workflowService: WorkflowService)
Parameters :
Name Type Optional
router Router No
route ActivatedRoute No
workflowService WorkflowService No

Methods

checkSelectable
checkSelectable(_event)
Parameters :
Name Optional
_event No
Returns : boolean
ngOnInit
ngOnInit()
Returns : void

Properties

clusterName
Type : string
headerHeight
Default value : Settings.tableHeaderHeight
isLoading
Default value : true
rowHeight
Default value : Settings.tableRowHeight
sorts
Type : []
Default value : [{ prop: 'name', dir: 'asc' }]
table
Type : DatatableComponent
Decorators :
@ViewChild('workflowsTable', {static: false})
workflowRows
Type : WorkflowRow[]
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 ""