[helix-front] Added pager into configuration page and partition placement table
Project: http://git-wip-us.apache.org/repos/asf/helix/repo Commit: http://git-wip-us.apache.org/repos/asf/helix/commit/1f7417ac Tree: http://git-wip-us.apache.org/repos/asf/helix/tree/1f7417ac Diff: http://git-wip-us.apache.org/repos/asf/helix/diff/1f7417ac Branch: refs/heads/master Commit: 1f7417ac45595dc594060b3c566f6deda1bd083f Parents: d9052a3 Author: Vivo Xu <[email protected]> Authored: Mon Dec 11 11:37:32 2017 -0800 Committer: Junkai Xue <[email protected]> Committed: Wed Jan 24 18:32:25 2018 -0800 ---------------------------------------------------------------------- .../partition-list.component.html | 27 ++++++++++++++ .../partition-list.component.scss | 5 +++ .../shared/data-table/data-table.component.html | 20 ++++++++++- .../node-viewer/node-viewer.component.html | 38 ++++++++++++++++++-- helix-front/package.json | 2 +- 5 files changed, 88 insertions(+), 4 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/helix/blob/1f7417ac/helix-front/client/app/resource/partition-list/partition-list.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/partition-list/partition-list.component.html b/helix-front/client/app/resource/partition-list/partition-list.component.html index 64119bc..238d5e8 100644 --- a/helix-front/client/app/resource/partition-list/partition-list.component.html +++ b/helix-front/client/app/resource/partition-list/partition-list.component.html @@ -9,6 +9,7 @@ [footerHeight]="rowHeight" [rows]="partitions" [sorts]="sorts" + [limit]="20" selectionType="single" (select)="onSelect($event)"> <ngx-datatable-column @@ -49,6 +50,32 @@ <hi-partition-detail [clusterName]="resource.cluster" [partition]="row"></hi-partition-detail> </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)="partitionsTable.onFooterPage($event)"> + </datatable-pager> + </section> + </section> + </ng-template> + </ngx-datatable-footer> </ngx-datatable> <div *ngIf="!canAnalyse()" class="message" fxLayout="column" fxLayoutAlign="center center"> <md-spinner *ngIf="isLoading"></md-spinner> http://git-wip-us.apache.org/repos/asf/helix/blob/1f7417ac/helix-front/client/app/resource/partition-list/partition-list.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/partition-list/partition-list.component.scss b/helix-front/client/app/resource/partition-list/partition-list.component.scss index 493f45e..3903a76 100644 --- a/helix-front/client/app/resource/partition-list/partition-list.component.scss +++ b/helix-front/client/app/resource/partition-list/partition-list.component.scss @@ -11,3 +11,8 @@ div.message { .status-not-ready { color: mat-color(mat-palette($mat-orange), darker); } + +.footer { + width: 100%; + padding: 0 20px; +} http://git-wip-us.apache.org/repos/asf/helix/blob/1f7417ac/helix-front/client/app/shared/data-table/data-table.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/data-table/data-table.component.html b/helix-front/client/app/shared/data-table/data-table.component.html index 8ae7bbe..e665361 100644 --- a/helix-front/client/app/shared/data-table/data-table.component.html +++ b/helix-front/client/app/shared/data-table/data-table.component.html @@ -1,4 +1,5 @@ <ngx-datatable + #dataTable class="material" [headerHeight]="rowHeight" rowHeight="auto" @@ -37,7 +38,11 @@ </ng-template> </ngx-datatable-column> <ngx-datatable-footer> - <ng-template ngx-datatable-footer-template let-rowCount="rowCount"> + <ng-template + ngx-datatable-footer-template + let-rowCount="rowCount" + let-pageSize="pageSize" + let-curPage="curPage"> <section class="footer" fxLayout="row" fxLayoutAlign="space-between center"> <button md-button *ngIf="insertable" (click)="onCreate()"> <md-icon>add</md-icon> @@ -46,6 +51,19 @@ <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)="dataTable.onFooterPage($event)"> + </datatable-pager> + </section> </section> </ng-template> </ngx-datatable-footer> http://git-wip-us.apache.org/repos/asf/helix/blob/1f7417ac/helix-front/client/app/shared/node-viewer/node-viewer.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/node-viewer/node-viewer.component.html b/helix-front/client/app/shared/node-viewer/node-viewer.component.html index 4b5b253..006761b 100644 --- a/helix-front/client/app/shared/node-viewer/node-viewer.component.html +++ b/helix-front/client/app/shared/node-viewer/node-viewer.component.html @@ -103,7 +103,11 @@ </ng-template> </ngx-datatable-column> <ngx-datatable-footer> - <ng-template ngx-datatable-footer-template let-rowCount="rowCount"> + <ng-template + ngx-datatable-footer-template + let-rowCount="rowCount" + let-pageSize="pageSize" + let-curPage="curPage"> <section class="footer" fxLayout="row" fxLayoutAlign="space-between center"> <button md-button *ngIf="editable" (click)="onCreate('list')"> <md-icon>add</md-icon> @@ -112,6 +116,19 @@ <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)="listTable.onFooterPage($event)"> + </datatable-pager> + </section> </section> </ng-template> </ngx-datatable-footer> @@ -167,7 +184,11 @@ </ng-template> </ngx-datatable-column> <ngx-datatable-footer> - <ng-template ngx-datatable-footer-template let-rowCount="rowCount"> + <ng-template + ngx-datatable-footer-template + let-rowCount="rowCount" + let-pageSize="pageSize" + let-curPage="curPage"> <section class="footer" fxLayout="row" fxLayoutAlign="space-between center"> <button md-button *ngIf="editable" (click)="onCreate('map')"> <md-icon>add</md-icon> @@ -176,6 +197,19 @@ <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)="mapTable.onFooterPage($event)"> + </datatable-pager> + </section> </section> </ng-template> </ngx-datatable-footer> http://git-wip-us.apache.org/repos/asf/helix/blob/1f7417ac/helix-front/package.json ---------------------------------------------------------------------- diff --git a/helix-front/package.json b/helix-front/package.json index 7873329..567d39c 100644 --- a/helix-front/package.json +++ b/helix-front/package.json @@ -7,7 +7,7 @@ "scripts": { "ng": "ng", "build": "rm -rf dist && mkdir dist && ng build -aot -prod && tsc -p server", - "start": "concurrently \"ng serve -pc proxy.conf.json\" \"tsc -w -p server\" \"nodemon dist/server/app.js\"", + "start": "concurrently -r \"ng serve -pc proxy.conf.json\" \"tsc -w -p server\" \"nodemon dist/server/app.js\"", "prod": "npm run build && node dist/server/app.js", "test": "ng test", "lint": "ng lint",
