This is an automated email from the ASF dual-hosted git repository.
zitadombi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/ozone.git
The following commit(s) were added to refs/heads/master by this push:
new a17a93be3a HDDS-9726. Add page jump function and entity count display
to the Node Status section of the SCM UI. (#5646)
a17a93be3a is described below
commit a17a93be3a86e9936f8fbe6bc6e5e59a94ace798
Author: Conway Zhang <[email protected]>
AuthorDate: Thu Nov 23 20:15:19 2023 +0800
HDDS-9726. Add page jump function and entity count display to the Node
Status section of the SCM UI. (#5646)
---
.../main/resources/webapps/scm/scm-overview.html | 45 ++++++++++++++--------
.../src/main/resources/webapps/scm/scm.js | 27 ++++++++++++-
2 files changed, 54 insertions(+), 18 deletions(-)
diff --git
a/hadoop-hdds/server-scm/src/main/resources/webapps/scm/scm-overview.html
b/hadoop-hdds/server-scm/src/main/resources/webapps/scm/scm-overview.html
index f16187ff44..5929610def 100644
--- a/hadoop-hdds/server-scm/src/main/resources/webapps/scm/scm-overview.html
+++ b/hadoop-hdds/server-scm/src/main/resources/webapps/scm/scm-overview.html
@@ -69,22 +69,35 @@
</tr>
</tbody>
</table>
-<div>
- <nav aria-label="...">
- <ul class="pagination">
- <li class="page-item" ng-class="{disabled:currentPage==1}"
- ng-click="handlePagination(currentPage-1,(currentPage==1))">
- <span class="page-link" tabindex="-1">Previous</span>
- </li>
- <li class="page-item active">
- <span class="page-link">{{currentPage}} </span>
- </li>
- <li class="page-item" ng-class="{disabled:lastIndex==currentPage}"
- ng-click="handlePagination(currentPage+1,
(lastIndex==currentPage))">
- <span class="page-link" tabindex="-1">Next</span>
- </li>
- </ul>
- </nav>
+
+<div class="row">
+ <div class="col-md-6 text-left">
+ <label>Page:</label>
+ <select class="form-select" ng-model="currentPage"
ng-change="handlePagination(currentPage, false)">
+ <option ng-repeat="page in getPagesArray()"
ng-value="page">{{page}}</option>
+ </select>
+ <span>of {{lastIndex}}. </span>
+ <span ng-if="nodeStatus && nodeStatus.length > 0">
+ Showing {{getCurrentPageFirstItemIndex()}} to
{{getCurrentPageLastItemIndex()}} of the total {{totalItems}} entries.
+ </span>
+ </div>
+ <div class="col-md-6 text-right">
+ <nav aria-label="..." ng-show="RecordsToDisplay !== 'All'">
+ <ul class="pagination" style="margin: 0; padding: 0">
+ <li class="page-item" ng-class="{disabled:currentPage==1}"
+
ng-click="handlePagination(currentPage-1,(currentPage==1))">
+ <span class="page-link" tabindex="-1">Previous</span>
+ </li>
+ <li class="page-item active">
+ <span class="page-link">{{currentPage}} </span>
+ </li>
+ <li class="page-item"
ng-class="{disabled:lastIndex==currentPage}"
+ ng-click="handlePagination(currentPage+1,
(lastIndex==currentPage))">
+ <span class="page-link" tabindex="-1">Next</span>
+ </li>
+ </ul>
+ </nav>
+ </div>
</div>
<h2>Status</h2>
diff --git a/hadoop-hdds/server-scm/src/main/resources/webapps/scm/scm.js
b/hadoop-hdds/server-scm/src/main/resources/webapps/scm/scm.js
index 8669528b43..aee56ad266 100644
--- a/hadoop-hdds/server-scm/src/main/resources/webapps/scm/scm.js
+++ b/hadoop-hdds/server-scm/src/main/resources/webapps/scm/scm.js
@@ -75,6 +75,7 @@
});
nodeStatusCopy = [...$scope.nodeStatus];
+ $scope.totalItems = nodeStatusCopy.length;
$scope.lastIndex = Math.ceil(nodeStatusCopy.length /
$scope.RecordsToDisplay);
$scope.nodeStatus = nodeStatusCopy.slice(0,
$scope.RecordsToDisplay);
});
@@ -91,10 +92,11 @@
}
/* Page Slicing logic */
$scope.handlePagination = (pageIndex, isDisabled) => {
- if(!isDisabled) {
+ if(!isDisabled && $scope.RecordsToDisplay != 'All') {
+ pageIndex = parseInt(pageIndex);
let startIndex = 0, endIndex = 0;
$scope.currentPage = pageIndex;
- startIndex = (pageIndex * $scope.RecordsToDisplay) -
$scope.RecordsToDisplay;
+ startIndex = ($scope.currentPage - 1) *
parseInt($scope.RecordsToDisplay);
endIndex = startIndex + parseInt($scope.RecordsToDisplay);
$scope.nodeStatus = nodeStatusCopy.slice(startIndex,
endIndex);
}
@@ -104,6 +106,27 @@
$scope.columnName = colName;
$scope.reverse = !$scope.reverse;
}
+ /*show page*/
+ $scope.getPagesArray = function () {
+ return Array.from({ length: $scope.lastIndex }, (_, index) =>
index + 1);
+ };
+ /*show last item index*/
+ $scope.getCurrentPageLastItemIndex = () => {
+ if ($scope.RecordsToDisplay == 'All') {
+ return $scope.totalItems;
+ }
+
+ let endIndex = $scope.currentPage *
parseInt($scope.RecordsToDisplay);
+ return Math.min(endIndex, $scope.totalItems);
+ }
+ /*show first item index*/
+ $scope.getCurrentPageFirstItemIndex = () => {
+ if ($scope.RecordsToDisplay == 'All') {
+ return 1;
+ }
+ return ($scope.currentPage - 1) * $scope.RecordsToDisplay + 1;
+ }
+
const nodeOpStateSortOrder = {
"IN_SERVICE": "a",
"DECOMMISSIONING": "b",
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
