You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@helix.apache.org by jx...@apache.org on 2018/01/25 21:49:21 UTC

[30/50] [abbrv] helix git commit: [helix-front] Added pager into configuration page and partition placement table

[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 <vx...@linkedin.com>
Authored: Mon Dec 11 11:37:32 2017 -0800
Committer: Junkai Xue <jx...@linkedin.com>
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",