mgr/dashboard: Add filtered rows number in table footer

Signed-off-by: Tiago Melo <tmelo@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index 16cf5d7040f3497bd1fcdaff60d399731f98205a..f835f8e033f32a35518f6052cbe7ab9707ac7f22 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -92,6 +92,33 @@
                  [loadingIndicator]="loadingIndicator"
                  [rowIdentity]="rowIdentity()"
                  [rowHeight]="'auto'">
+    <ngx-datatable-footer>
+      <ng-template ngx-datatable-footer-template
+                   let-rowCount="rowCount"
+                   let-pageSize="pageSize"
+                   let-selectedCount="selectedCount"
+                   let-curPage="curPage"
+                   let-offset="offset"
+                   let-isVisible="isVisible">
+        <div class="page-count">
+          <span *ngIf="selectionType"
+                i18n>{{ selectedCount }} selected / </span>
+          <span *ngIf="rowCount != data?.length"
+                i18n>{{ rowCount }} found / </span>
+          <span i18n>{{ data?.length || 0 }} total</span>
+        </div>
+        <datatable-pager [pagerLeftArrowIcon]="paginationClasses.pagerLeftArrow"
+                         [pagerRightArrowIcon]="paginationClasses.pagerRightArrow"
+                         [pagerPreviousIcon]="paginationClasses.pagerPrevious"
+                         [pagerNextIcon]="paginationClasses.pagerNext"
+                         [page]="curPage"
+                         [size]="pageSize"
+                         [count]="rowCount"
+                         [hidden]="!((rowCount / pageSize) > 1)"
+                         (change)="table.onFooterPage($event)">
+        </datatable-pager>
+      </ng-template>
+    </ngx-datatable-footer>
   </ngx-datatable>
 </div>