HBASE-23674 Too many rit page Numbers show confusion

hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/AssignmentManagerStatusTmpl.jamon

@@ -119,18 +119,8 @@ int numOfPages = (int) Math.ceil(numOfRITs * 1.0 / ritsPerPage);
              </div>
          </%if>
          </div>
-         <nav>
+         <input type="hidden" id ="rit_page_num" value="<% numOfRITs %>" />
-             <ul class="nav nav-pills pagination">
+         <nav id="rit_pagination"></nav>
-             <%for int i = 1 ; i <= numOfPages; i++ %>
-                 <%if i == 1 %>
-                 <li class="active">
-                 <%else>
-                 <li>
-                 </%if>
-                 <a href="#tab_rits<% i %>"><% i %></a></li>
-             </%for>
-             </ul>
-         </nav>
      </div>
    </section>
  </%if>

hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/MasterStatusTmpl.jamon

@@ -407,6 +407,7 @@ AssignmentManager assignmentManager = master.getAssignmentManager();
     <script src="/static/js/jquery.tablesorter.min.js" type="text/javascript"></script>
     <script src="/static/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="/static/js/tab.js" type="text/javascript"></script>
+    <script src="/static/js/jqSpager.js" type="text/javascript"></script>
     <script>
     $(document).ready(function()
         {
@@ -483,6 +484,34 @@ AssignmentManager assignmentManager = master.getAssignmentManager();
             });
 
             $("#userTables").tablesorter();
+
+            function showRitPages() {
+                if (!$("#rit_page_num")) {
+                  return;
+                }
+                var ritTotalNum = parseInt($("#rit_page_num").val());
+                if (!ritTotalNum || ritTotalNum < 1) {
+                  return;
+                }
+
+                 $("#rit_pagination").sPage({
+                      page:1,
+                      total:ritTotalNum,
+                      pageSize:5,
+                      noData: false,
+                      showPN:true,
+                      prevPage:"prev",
+                      nextPage:"next",
+                      fastForward: 5,
+                      backFun:function(page){
+                          $("div[id^='tab_rits']").removeClass('active');
+                          $("#tab_rits"+page).addClass('active');
+                      }
+                  });
+
+            }
+            showRitPages();
+
         }
     );
     </script>

hbase-server/src/main/resources/hbase-webapps/static/js/jqSpager.js

@@ -0,0 +1,170 @@
+/*
+ * Copyright The Apache Software Foundation
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+; (function ($, window, document, undefined) {
+  'use strict';
+  var defaults = {
+    page: 1,
+    pageSize: 10,
+    total: 0,
+    noData: false,// Whether to show pagination without data, default false does not show, true shows the first page
+    showPN: true,// Whether to show up and down page
+    prevPage: "prev",//Page up button text
+    nextPage: "next",//Page down button text
+    fastForward: 0,//Fast forward fast rewind, default 0 page
+    backFun: function (page) {}//Click the page button callback function to return the current page number
+  };
+  function Plugin(element, options) {
+    this.element = $(element);
+    this.settings = $.extend({}, defaults, options);
+    this.pageNum = 1,
+    this.pageList = [],
+    this.pageTatol = 0;
+    this.init();
+  }
+  $.extend(Plugin.prototype, {
+    init: function () {
+      this.element.empty();
+      this.viewHtml();
+    },
+    creatHtml: function (i) {
+      i == this.settings.page ? this.pageList.push('<li class="active"><a  href="javascript:void(0)" data-page=' + i + ">" + i + "</a></li>")
+        : this.pageList.push("<li><a href='javascript:void(0)'  data-page=" + i + ">" + i + "</a></li>");
+    },
+    viewHtml: function () {
+      var settings = this.settings;
+      var pageTatol = 0;
+      var pageArr = [];
+      if (settings.total > 0) {
+        pageTatol = Math.ceil(settings.total / settings.pageSize);
+      } else {
+        if (settings.noData) {
+          pageTatol = 1;
+          settings.page = 1;
+          settings.total = 0;
+        } else {
+          return;
+        }
+      }
+      this.pageTatol = pageTatol;
+      this.pageNum = settings.page;
+      pageArr.push('<ul class="pagination">');
+      this.pageList = [];
+      if (settings.showPN) {
+        settings.page == 1 ? this.pageList.push('<li class="disabled" ><a href="javascript:void(0)" data-page="prev">' + settings.prevPage + '</a></li>')
+          : this.pageList.push('<li><a href="javascript:void(0)" data-page="prev">' + settings.prevPage + '</a></li>');
+
+      }
+      if (pageTatol <= 6) {
+        for (var i = 1; i < pageTatol + 1; i++) {
+          this.creatHtml(i);
+        }
+      } else {
+        if (settings.page < 5) {
+          for (var i = 1; i <= 5; i++) {
+            this.creatHtml(i);
+          }
+
+          this.pageList.push('<li><a href="javascript:void(0)" data-page="after" class="spage-after">...</a></li><li><a href="javascript:void(0)" data-page=' + pageTatol + ">" + pageTatol + '</a></li>');
+
+        } else if (settings.page > pageTatol - 4) {
+          this.pageList.push('<li><a href="javascript:void(0)" data-page="1">1</a></li><li><a href="javascript:void(0)" data-page="before" class="spage-before">...</a></li>');
+          for (var i = pageTatol - 4; i <= pageTatol; i++) {
+            this.creatHtml(i);
+          }
+        } else {
+          this.pageList.push('<li><a href="javascript:void(0)" data-page="1">1</a></li><li><a  href="javascript:void(0)" data-page="before" class="spage-before">...</a></li>');
+          for (var i = settings.page - 2; i <= Number(settings.page) + 2; i++) {
+            this.creatHtml(i);
+          }
+          this.pageList.push('<li><a href="javascript:void(0)" data-page="after" class="spage-after">...</a></li><li><a href="javascript:void(0)" data-page=' + pageTatol + '">' + pageTatol + '</a></li>');
+        }
+      }
+      if (settings.showPN) {
+        settings.page == pageTatol ? this.pageList.push('<li class="disabled"><a href="javascript:void(0)"  data-page="next">' + settings.nextPage + "</a></li>")
+          : this.pageList.push('<li><a data-page="next" href="javascript:void(0)">' + settings.nextPage + '</a></li>');
+      }
+      pageArr.push(this.pageList.join(''));
+      pageArr.push('</ul>');
+
+      this.element.html(pageArr.join(''));
+      this.clickBtn();
+    },
+    clickBtn: function () {
+      var that = this;
+      var settings = this.settings;
+      var ele = this.element;
+      var pageTatol = this.pageTatol;
+      this.element.off("click", "a");
+      this.element.on("click", "a", function () {
+        var pageNum = $(this).data("page");
+        switch (pageNum) {
+          case "prev":
+            settings.page = settings.page - 1 >= 1 ? settings.page - 1 : 1;
+            pageNum = settings.page;
+            break;
+          case "next":
+            settings.page = Number(settings.page) + 1 <= pageTatol ? Number(settings.page) + 1 : pageTatol;
+            pageNum = settings.page;
+            break;
+          case "before":
+            settings.page = settings.page - settings.fastForward >= 1 ? settings.page - settings.fastForward : 1;
+            pageNum = settings.page;
+            break;
+          case "after":
+            settings.page = Number(settings.page) + Number(settings.fastForward) <= pageTatol ? Number(settings.page) + Number(settings.fastForward) : pageTatol;
+            pageNum = settings.page;
+            break;
+          case "go":
+            if (/^[0-9]*$/.test(p) && p >= 1 && p <= pageTatol) {
+              settings.page = p;
+            } else {
+              return;
+            }
+            break;
+          default:
+            settings.page = pageNum;
+        }
+
+        that.pageNum = settings.page;
+        that.viewHtml();
+        settings.backFun(pageNum);
+      });
+
+      if(settings.fastForward > 0){
+        ele.find(".spage-after").hover(function(){
+          $(this).html("&nbsp;&raquo;");
+        },function(){
+          $(this).html("...");
+        });
+        ele.find(".spage-before").hover(function(){
+          $(this).html("&nbsp;&laquo;");
+        },function(){
+          $(this).html("...");
+        });
+      }
+    }
+  });
+  $.fn.sPage = function (options) {
+    return this.each(function(){
+      new Plugin(this, options);
+    });
+  }
+})(jQuery, window, document);