micahstubbs commented on code in PR #2196:
URL: https://github.com/apache/helix/pull/2196#discussion_r947172617
##########
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>
Review Comment:
Here we use a [ngx-datatable](https://github.com/swimlane/ngx-datatable),
modeled on helix-front's own existing
[partition-list](https://github.com/apache/helix/blob/master/helix-front/client/app/resource/partition-list/partition-list.component.html)
component.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
