HBASE-28832 Migrated navbars

- Navbars now require a container within (to drastically simplify spacing requirements and CSS required). - The .active class can no longer be applied to .nav-items, it must be applied directly on .nav-links.
apache · Nov 22, 2024 · 3a4d278 · 3a4d278
1 parent 04e360b
commit 3a4d278
Show file tree

Hide file tree

Showing 11 changed files with 219 additions and 206 deletions.
diff --git a/hbase-rest/src/main/resources/hbase-webapps/rest/footer.jsp b/hbase-rest/src/main/resources/hbase-webapps/rest/footer.jsp
@@ -24,7 +24,7 @@
     <script type="text/javascript">
       $(document).ready(function() {
         $('nav.navbar li.active').removeClass('active');
-        $('a[href="' + location.pathname + '"]').closest('li').addClass('active');
+        $('a[href="' + location.pathname + '"]').addClass('active');
       });
     </script>
 </body>

diff --git a/hbase-rest/src/main/resources/hbase-webapps/rest/header.jsp b/hbase-rest/src/main/resources/hbase-webapps/rest/header.jsp
@@ -36,33 +36,35 @@
 
 <body>
 <nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
-  <a class="navbar-brand" href="/rest.jsp"><img src="/static/hbase_logo_small.png" alt="HBase Logo"/></a>
-  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-  <div class="collapse navbar-collapse">
-    <ul class="navbar-nav">
-      <li class="nav-item"><a class="nav-link" href="/rest.jsp">Home</a></li>
-      <li class="nav-item"><a class="nav-link" href="/logs/">Local logs</a></li>
-      <li class="nav-item"><a class="nav-link" href="/processRest.jsp">Process Metrics</a></li>
-      <li class="nav-item"><a class="nav-link" href="/logLevel">Log Level</a></li>
-      <li class="nav-item"><a class="nav-link" href="/dump">Debug Dump</a></li>
-      <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Metrics <span class="caret"></span>
-        </a>
-        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-          <a class="dropdown-item" target="_blank" href="/jmx">JMX</a>
-          <a class="dropdown-item" target="_blank" href="/jmx?description=true">JMX with description</a>
-          <a class="dropdown-item" target="_blank" href="/prometheus">Prometheus</a>
-          <a class="dropdown-item" target="_blank" href="/prometheus?description=true">Prometheus with description</a>
-        </div>
-      </li>
-      <li class="nav-item"><a class="nav-link" href="/prof">Profiler</a></li>
-      <% if (HBaseConfiguration.isShowConfInServlet()) { %>
-      <li class="nav-item"><a class="nav-link" href="/conf">HBase Configuration</a></li>
-      <% } %>
-    </ul>
-  </div><!--/.navbar-collapse -->
+  <div class="container-fluid">
+    <a class="navbar-brand" href="/rest.jsp"><img src="/static/hbase_logo_small.png" alt="HBase Logo"/></a>
+    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-collapse">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse">
+      <ul class="navbar-nav">
+        <li class="nav-item"><a class="nav-link" href="/rest.jsp">Home</a></li>
+        <li class="nav-item"><a class="nav-link" href="/logs/">Local logs</a></li>
+        <li class="nav-item"><a class="nav-link" href="/processRest.jsp">Process Metrics</a></li>
+        <li class="nav-item"><a class="nav-link" href="/logLevel">Log Level</a></li>
+        <li class="nav-item"><a class="nav-link" href="/dump">Debug Dump</a></li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Metrics <span class="caret"></span>
+          </a>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+            <a class="dropdown-item" target="_blank" href="/jmx">JMX</a>
+            <a class="dropdown-item" target="_blank" href="/jmx?description=true">JMX with description</a>
+            <a class="dropdown-item" target="_blank" href="/prometheus">Prometheus</a>
+            <a class="dropdown-item" target="_blank" href="/prometheus?description=true">Prometheus with description</a>
+          </div>
+        </li>
+        <li class="nav-item"><a class="nav-link" href="/prof">Profiler</a></li>
+        <% if (HBaseConfiguration.isShowConfInServlet()) { %>
+        <li class="nav-item"><a class="nav-link" href="/conf">HBase Configuration</a></li>
+        <% } %>
+      </ul>
+    </div><!--/.navbar-collapse -->
+  </div><!--/.container-fluid -->
 </nav>
 
diff --git a/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/MasterStatusTmpl.jamon b/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/MasterStatusTmpl.jamon
@@ -138,49 +138,50 @@ AssignmentManager assignmentManager = master.getAssignmentManager();
   <body>
 
     <nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
-      <a class="navbar-brand" href="/master-status"><img src="/static/hbase_logo_small.png" alt="HBase Logo"/></a>
-      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse">
-        <ul class="navbar-nav">
-          <li class="nav-item active">
-            <a class="nav-link" href="/master-status">Home <span class="sr-only">(current)</span></a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="/tablesDetailed.jsp">Table Details</a>
-          </li>
-          <%if master.isActiveMaster() %>
-              <li class="nav-item"><a class="nav-link" href="/procedures.jsp">Procedures &amp; Locks</a></li>
-              <li class="nav-item"><a class="nav-link" href="/hbck.jsp">HBCK Report</a></li>
-              <li class="nav-item"><a class="nav-link" href="/operationDetails.jsp">Operation Details</a></li>
-              <%if master.getConfiguration().getBoolean(QuotaUtil.QUOTA_CONF_KEY, false) %>
-                  <li class="nav-item"><a class="nav-link" href="/quotas.jsp">Quotas</a></li>
-              </%if>
-          </%if>
-          <li class="nav-item"><a class="nav-link" href="/processMaster.jsp">Process Metrics</a></li>
-          <li class="nav-item"><a class="nav-link" href="/logs/">Local Logs</a></li>
-          <li class="nav-item"><a class="nav-link" href="/logLevel">Log Level</a></li>
-          <li class="nav-item"><a class="nav-link" href="/dump">Debug Dump</a></li>
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              Metrics <span class="caret"></span>
-            </a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-              <a class="dropdown-item" target="_blank" href="/jmx">JMX</a>
-              <a class="dropdown-item" target="_blank" href="/jmx?description=true">JMX with description</a>
-              <a class="dropdown-item" target="_blank" href="/prometheus">Prometheus</a>
-              <a class="dropdown-item" target="_blank" href="/prometheus?description=true">Prometheus with description</a>
-            </div>
-          </li>
-          <li class="nav-item"><a class="nav-link" href="/prof">Profiler</a></li>
-          <%if HBaseConfiguration.isShowConfInServlet()%>
-            <li class="nav-item"><a class="nav-link" href="/conf">HBase Configuration</a></li>
-          </%if>
-          <li class="nav-item"><a class="nav-link" href="/startupProgress.jsp">Startup Progress</a></li>
-         </ul>
-      </div><!--/.navbar-collapse -->
-
+      <div class="container-fluid">
+        <a class="navbar-brand" href="/master-status"><img src="/static/hbase_logo_small.png" alt="HBase Logo"/></a>
+        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-collapse">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse">
+          <ul class="navbar-nav">
+            <li class="nav-item">
+              <a class="nav-link active" href="/master-status">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/tablesDetailed.jsp">Table Details</a>
+            </li>
+            <%if master.isActiveMaster() %>
+                <li class="nav-item"><a class="nav-link" href="/procedures.jsp">Procedures &amp; Locks</a></li>
+                <li class="nav-item"><a class="nav-link" href="/hbck.jsp">HBCK Report</a></li>
+                <li class="nav-item"><a class="nav-link" href="/operationDetails.jsp">Operation Details</a></li>
+                <%if master.getConfiguration().getBoolean(QuotaUtil.QUOTA_CONF_KEY, false) %>
+                    <li class="nav-item"><a class="nav-link" href="/quotas.jsp">Quotas</a></li>
+                </%if>
+            </%if>
+            <li class="nav-item"><a class="nav-link" href="/processMaster.jsp">Process Metrics</a></li>
+            <li class="nav-item"><a class="nav-link" href="/logs/">Local Logs</a></li>
+            <li class="nav-item"><a class="nav-link" href="/logLevel">Log Level</a></li>
+            <li class="nav-item"><a class="nav-link" href="/dump">Debug Dump</a></li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                Metrics <span class="caret"></span>
+              </a>
+              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+                <a class="dropdown-item" target="_blank" href="/jmx">JMX</a>
+                <a class="dropdown-item" target="_blank" href="/jmx?description=true">JMX with description</a>
+                <a class="dropdown-item" target="_blank" href="/prometheus">Prometheus</a>
+                <a class="dropdown-item" target="_blank" href="/prometheus?description=true">Prometheus with description</a>
+              </div>
+            </li>
+            <li class="nav-item"><a class="nav-link" href="/prof">Profiler</a></li>
+            <%if HBaseConfiguration.isShowConfInServlet()%>
+              <li class="nav-item"><a class="nav-link" href="/conf">HBase Configuration</a></li>
+            </%if>
+            <li class="nav-item"><a class="nav-link" href="/startupProgress.jsp">Startup Progress</a></li>
+           </ul>
+        </div><!--/.navbar-collapse -->
+      </div><!--/.container-fluid -->
     </nav>
 
     <div class="container-fluid content">

diff --git a/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/RSStatusTmpl.jamon b/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/RSStatusTmpl.jamon
@@ -97,37 +97,39 @@ org.apache.hadoop.hbase.zookeeper.MasterAddressTracker;
   <body>
 
     <nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
-      <a class="navbar-brand" href="/rs-status">
-        <img src="/static/hbase_logo_small.png" alt="HBase Logo"/>
-      </a>
-      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse">
-        <ul class="navbar-nav">
-          <li class="nav-item active"><a class="nav-link" href="/rs-status">Home <span class="sr-only">(current)</span></a></li>
-          <li class="nav-item"><a class="nav-link" href="/processRS.jsp">Process Metrics</a></li>
-          <li class="nav-item"><a class="nav-link" href="/logs/">Local Logs</a></li>
-          <li class="nav-item"><a class="nav-link" href="/rsOperationDetails.jsp">Operation Details</a></li>
-          <li class="nav-item"><a class="nav-link" href="/logLevel">Log Level</a></li>
-          <li class="nav-item"><a class="nav-link" href="/dump">Debug Dump</a></li>
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              Metrics <span class="caret"></span>
-            </a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-              <a class="dropdown-item" target="_blank" href="/jmx">JMX</a>
-              <a class="dropdown-item" target="_blank" href="/jmx?description=true">JMX with description</a>
-              <a class="dropdown-item" target="_blank" href="/prometheus">Prometheus</a>
-              <a class="dropdown-item" target="_blank" href="/prometheus?description=true">Prometheus with description</a>
-            </div>
-          </li>
-          <li class="nav-item"><a class="nav-link" href="/prof">Profiler</a></li>
-          <%if HBaseConfiguration.isShowConfInServlet()%>
-          <li class="nav-item"><a class="nav-link" href="/conf">HBase Configuration</a></li>
-          </%if>
-        </ul>
-      </div><!--/.navbar-collapse -->
+      <div class="container-fluid">
+        <a class="navbar-brand" href="/rs-status">
+          <img src="/static/hbase_logo_small.png" alt="HBase Logo"/>
+        </a>
+        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-collapse">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse">
+          <ul class="navbar-nav">
+            <li class="nav-item"><a class="nav-link active" href="/rs-status">Home</a></li>
+            <li class="nav-item"><a class="nav-link" href="/processRS.jsp">Process Metrics</a></li>
+            <li class="nav-item"><a class="nav-link" href="/logs/">Local Logs</a></li>
+            <li class="nav-item"><a class="nav-link" href="/rsOperationDetails.jsp">Operation Details</a></li>
+            <li class="nav-item"><a class="nav-link" href="/logLevel">Log Level</a></li>
+            <li class="nav-item"><a class="nav-link" href="/dump">Debug Dump</a></li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                Metrics <span class="caret"></span>
+              </a>
+              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+                <a class="dropdown-item" target="_blank" href="/jmx">JMX</a>
+                <a class="dropdown-item" target="_blank" href="/jmx?description=true">JMX with description</a>
+                <a class="dropdown-item" target="_blank" href="/prometheus">Prometheus</a>
+                <a class="dropdown-item" target="_blank" href="/prometheus?description=true">Prometheus with description</a>
+              </div>
+            </li>
+            <li class="nav-item"><a class="nav-link" href="/prof">Profiler</a></li>
+            <%if HBaseConfiguration.isShowConfInServlet()%>
+            <li class="nav-item"><a class="nav-link" href="/conf">HBase Configuration</a></li>
+            </%if>
+          </ul>
+        </div><!--/.navbar-collapse -->
+      </div><!--/.container-fluid -->
     </nav>
 
   <div class="container-fluid content">

diff --git a/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/tool/CanaryStatusTmpl.jamon b/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/tool/CanaryStatusTmpl.jamon
@@ -46,10 +46,12 @@ org.apache.hadoop.hbase.util.JvmVersion;
   <body>
 
   <nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
-    <a class="navbar-brand" href="/canary-status"><img src="/static/hbase_logo_small.png" alt="HBase Logo"/></a>
-    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
-      <span class="navbar-toggler-icon"></span>
-    </button>
+    <div class="container-fluid">
+      <a class="navbar-brand" href="/canary-status"><img src="/static/hbase_logo_small.png" alt="HBase Logo"/></a>
+      <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-collapse">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+    </div>
   </nav>
 
   <div class="container">

diff --git a/hbase-server/src/main/resources/hbase-webapps/master/footer.jsp b/hbase-server/src/main/resources/hbase-webapps/master/footer.jsp
@@ -23,7 +23,7 @@
     <script type="text/javascript">
       $(document).ready(function() {
         $('nav.navbar li.active').removeClass('active');
-        $('a[href="' + location.pathname + '"]').closest('li').addClass('active');
+        $('a[href="' + location.pathname + '"]').addClass('active');
       });
     </script>
   </body>