File
Implements
Methods
checkSelectable
|
checkSelectable(_event)
|
|
|
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})
|
|
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>
.empty {
padding: 20px;
}
Legend
Html element with directive