This is an automated email from the ASF dual-hosted git repository.
jxue pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/helix.git
The following commit(s) were added to refs/heads/master by this push:
new 5a4cfc71a Improve Workflow List UI, fix #2195 (#2196)
5a4cfc71a is described below
commit 5a4cfc71a5bca3e5d87bafc627eb3b571deb162d
Author: Micah Stubbs <[email protected]>
AuthorDate: Wed Aug 17 17:07:33 2022 -0700
Improve Workflow List UI, fix #2195 (#2196)
Add pagination, sort by Workflow ID
Style links as links to improve accessibility
---
.../workflow-detail/workflow-detail.component.html | 2 +-
.../workflow-list/workflow-list.component.html | 68 ++++++++++++++++++++--
.../workflow-list/workflow-list.component.ts | 36 ++++++++++--
3 files changed, 94 insertions(+), 12 deletions(-)
diff --git
a/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.html
b/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.html
index 12e1811fd..fd0cdd090 100644
---
a/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.html
+++
b/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.html
@@ -81,7 +81,7 @@
>
<mat-button-toggle-group
#group="matButtonToggleGroup"
- [value]="workflow.isJobQueue ? 'list' : 'graph'"
+ [value]="'list'"
>
<mat-button-toggle *ngIf="!workflow.isJobQueue" value="graph">
Graph View
diff --git
a/helix-front/client/app/workflow/workflow-list/workflow-list.component.html
b/helix-front/client/app/workflow/workflow-list/workflow-list.component.html
index 5f5ff39fa..595c53e12 100644
--- a/helix-front/client/app/workflow/workflow-list/workflow-list.component.html
+++ b/helix-front/client/app/workflow/workflow-list/workflow-list.component.html
@@ -20,13 +20,69 @@
<section fxLayout="column" fxLayoutAlign="center center">
<mat-spinner *ngIf="isLoading"></mat-spinner>
<section fxFlexFill>
- <section *ngIf="!isLoading && workflows.length == 0" class="empty">
+ <section *ngIf="!isLoading && workflowRows.length == 0" class="empty">
There's no workflow here.
</section>
- <mat-nav-list>
- <a *ngFor="let name of workflows" mat-list-item [routerLink]="[name]">
- <div mat-line>{{ name }}</div>
- </a>
- </mat-nav-list>
+ <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>
diff --git
a/helix-front/client/app/workflow/workflow-list/workflow-list.component.ts
b/helix-front/client/app/workflow/workflow-list/workflow-list.component.ts
index 9582134f7..07391112a 100644
--- a/helix-front/client/app/workflow/workflow-list/workflow-list.component.ts
+++ b/helix-front/client/app/workflow/workflow-list/workflow-list.component.ts
@@ -1,22 +1,35 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
+import { Settings } from '../../core/settings';
import { WorkflowService } from '../shared/workflow.service';
+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: true })
+ table: any;
+
isLoading = true;
clusterName: string;
- workflows: string[];
+ workflowRows: WorkflowRow[];
+
+ headerHeight = Settings.tableHeaderHeight;
+ rowHeight = Settings.tableRowHeight;
+
+ sorts = [{ prop: 'name', dir: 'asc' }];
constructor(
private router: Router,
private route: ActivatedRoute,
- private service: WorkflowService
+ private workflowService: WorkflowService
) {}
ngOnInit() {
@@ -24,8 +37,14 @@ export class WorkflowListComponent implements OnInit {
this.isLoading = true;
this.clusterName = this.route.parent.snapshot.params['name'];
- this.service.getAll(this.clusterName).subscribe(
- (workflows) => (this.workflows = workflows),
+ 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
@@ -38,4 +57,11 @@ export class WorkflowListComponent implements OnInit {
);
}
}
+
+ // Disable table row selection using the
+ // selectCheck option of the
+ // <ngx-datatable></ngx-datatable> element
+ checkSelectable(_event) {
+ return false;
+ }
}
