HBASE-24704 Make Table Schema easier to view with multiple families

Closes #2042

Signed-off-by: Viraj Jasani <vjasani@apache.org>

Author: bsglz

hbase-server/src/main/resources/hbase-webapps/master/table.jsp

@@ -26,12 +26,13 @@
   import="java.util.LinkedHashMap"
   import="java.util.List"
   import="java.util.Map"
+  import="java.util.Set"
+  import="java.util.HashSet"
   import="java.util.Optional"
   import="java.util.TreeMap"
   import="java.util.concurrent.TimeUnit"
   import="org.apache.commons.lang3.StringEscapeUtils"
   import="org.apache.hadoop.conf.Configuration"
-  import="org.apache.hadoop.hbase.HColumnDescriptor"
   import="org.apache.hadoop.hbase.HConstants"
   import="org.apache.hadoop.hbase.HRegionLocation"
   import="org.apache.hadoop.hbase.HTableDescriptor"
@@ -51,6 +52,7 @@
   import="org.apache.hadoop.hbase.client.RegionLocator"
   import="org.apache.hadoop.hbase.client.RegionReplicaUtil"
   import="org.apache.hadoop.hbase.client.Table"
+  import="org.apache.hadoop.hbase.client.ColumnFamilyDescriptor"
   import="org.apache.hadoop.hbase.http.InfoServer"
   import="org.apache.hadoop.hbase.master.HMaster"
   import="org.apache.hadoop.hbase.master.RegionState"
@@ -771,40 +773,45 @@
 %>
 </table>
 <h2>Table Schema</h2>
+
 <table class="table table-striped">
+<%
+  ColumnFamilyDescriptor[] families = table.getDescriptor().getColumnFamilies();
+  Set<Bytes> familyKeySet = new HashSet<>();
+  for (ColumnFamilyDescriptor family: families) {
+    familyKeySet.addAll(family.getValues().keySet());
+  }
+%>
   <tr>
-      <th>Column Family Name</th>
-      <th></th>
+    <th>Property \ Column Family Name</th>
+    <%
+    for (ColumnFamilyDescriptor family: families) {
+    %>
+    <th>
+      <%= StringEscapeUtils.escapeHtml4(family.getNameAsString()) %>
+    </th>
+    <% } %>
   </tr>
-  <%
-    Collection<HColumnDescriptor> families = new HTableDescriptor(table.getDescriptor()).getFamilies();
-    for (HColumnDescriptor family: families) {
-  %>
-  <tr>
-    <td><%= StringEscapeUtils.escapeHtml4(family.getNameAsString()) %></td>
-    <td>
-    <table class="table table-striped">
-      <tr>
-       <th>Property</th>
-       <th>Value</th>
-      </tr>
     <%
-    Map<Bytes, Bytes> familyValues = family.getValues();
-    for (Bytes familyKey: familyValues.keySet()) {
+    for (Bytes familyKey: familyKeySet) {
     %>
       <tr>
         <td>
           <%= StringEscapeUtils.escapeHtml4(familyKey.toString()) %>
-		</td>
+        </td>
+        <%
+        for (ColumnFamilyDescriptor family: families) {
+          String familyValue = "-";
+          if(family.getValues().containsKey(familyKey)){
+            familyValue = family.getValues().get(familyKey).toString();
+          }
+        %>
         <td>
-          <%= StringEscapeUtils.escapeHtml4(familyValues.get(familyKey).toString()) %>
+          <%= StringEscapeUtils.escapeHtml4(familyValue) %>
         </td>
+        <% } %>
       </tr>
     <% } %>
-    </table>
-    </td>
-  </tr>
-  <% } %>
 </table>
 <%
   long totalReadReq = 0;