From 3757915dacc3e148611dc4fb04eaf087494c7c70 Mon Sep 17 00:00:00 2001
From: Sahil Aggarwal <sahil.agg15@gmail.com>
Date: Thu, 22 Feb 2018 01:50:01 +0530
Subject: [PATCH] HBASE-19075: Fix the 'tasks' table on master info page to not
 scroll up on clicking the tab

---
 .../hbase/tmpl/common/TaskMonitorTmpl.jamon   | 135 ++++++++++++------
 1 file changed, 92 insertions(+), 43 deletions(-)

diff --git a/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/common/TaskMonitorTmpl.jamon b/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/common/TaskMonitorTmpl.jamon
index ca3a0a1033b..79b163441b7 100644
--- a/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/common/TaskMonitorTmpl.jamon
+++ b/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/common/TaskMonitorTmpl.jamon
@@ -26,52 +26,101 @@ TaskMonitor taskMonitor = TaskMonitor.get();
 String filter = "general";
 String format = "html";
 </%args>
-<%java>
-// apply requested filter
-List<? extends MonitoredTask> tasks = taskMonitor.getTasks(filter);
-long now = System.currentTimeMillis();
-Collections.sort(tasks, (t1, t2) -> Long.compare(t1.getStateTime(), t2.getStateTime()));
-boolean first = true;
-</%java>
-<%if format.equals("json")%>
-[<%for MonitoredTask task : tasks%><%if first%><%java>first = false;</%java><%else>,</%if><% task.toJSON() %></%for>]
-<%else>
-<h2>Tasks</h2>
-  <ul class="nav nav-pills">
-    <li <%if filter.equals("all")%>class="active"</%if>><a href="?filter=all">Show All Monitored Tasks</a></li>
-    <li <%if filter.equals("general")%>class="active"</%if>><a href="?filter=general">Show non-RPC Tasks</a></li>
-    <li <%if filter.equals("handler")%>class="active"</%if>><a href="?filter=handler">Show All RPC Handler Tasks</a></li>
-    <li <%if filter.equals("rpc")%>class="active"</%if>><a href="?filter=rpc">Show Active RPC Calls</a></li>
-    <li <%if filter.equals("operation")%>class="active"</%if>><a href="?filter=operation">Show Client Operations</a></li>
-    <li><a href="?format=json&filter=<% filter %>">View as JSON</a></li>
-  </ul>
-  <%if tasks.isEmpty()%>
-    <p>No tasks currently running on this node.</p>
-  <%else>
-    <table class="table">
-    <tr>
-      <th>Start Time</th>
-      <th>Description</th>
-      <th>State</th>
-      <th>Status</th>
-    </tr>
-    <%for MonitoredTask task : tasks %>
-    <tr class="<& stateCss; state = task.getState() &>">
-      <td><% new Date(task.getStartTime()) %></td>
-      <td><% task.getDescription() %></td>
-      <td><% task.getState() %>
-          (since <% StringUtils.formatTimeDiff(now, task.getStateTime()) %> ago)
-      </td>
-      <td><% task.getStatus() %>
-          (since <% StringUtils.formatTimeDiff(now, task.getStatusTime()) %> 
-          ago)</td>
-    </tr>
-    </%for>
-    </table>
 
-  </%if>
+<%if format.equals("json")%>
+    <& renderTasks; filter=filter &>
+<%else>
+  <h2>Tasks</h2>
+
+  <div class="tabbable">
+      <ul class="nav nav-pills">
+        <li class="active">
+            <a href="#tab_alltasks" data-toggle="tab">Show All Monitored Tasks</a>
+        </li>
+        <li class="">
+            <a href="#tab_generaltasks" data-toggle="tab">Show non-RPC Tasks</a>
+        </li>
+        <li class="">
+            <a href="#tab_handlertasks" data-toggle="tab">Show All RPC Handler Tasks</a>
+        </li>
+        <li class="">
+            <a href="#tab_rpctasks" data-toggle="tab">Show Active RPC Calls</a>
+        </li>
+        <li>
+            <a href="#tab_operationtasks" data-toggle="tab">Show Client Operations</a>
+        </li>
+      </ul>
+      <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
+        <div class="tab-pane active" id="tab_alltasks">
+            <& jsonView; filter="all" &>
+            <& renderTasks; filter="all" &>
+        </div>
+        <div class="tab-pane" id="tab_generaltasks">
+            <& jsonView; filter="general" &>
+            <& renderTasks; filter="general" &>
+        </div>
+        <div class="tab-pane" id="tab_handlertasks">
+            <& jsonView; filter="handler" &>
+            <& renderTasks; filter="handler" &>
+        </div>
+        <div class="tab-pane" id="tab_rpctasks">
+            <& jsonView; filter="rpc" &>
+            <& renderTasks; filter="rpc" &>
+        </div>
+        <div class="tab-pane" id="tab_operationtasks">
+            <& jsonView; filter="operation" &>
+            <& renderTasks; filter="operation" &>
+        </div>
+      </div>
+  </div>
 </%if>
 
+<%def jsonView>
+    <%args>
+        String filter;
+    </%args>
+    <a href="?format=json&filter=<% filter %>">View as JSON</a>
+</%def>
+
+<%def renderTasks>
+    <%args>
+        String filter;
+    </%args>
+    <%java>
+       List<? extends MonitoredTask> tasks = taskMonitor.getTasks(filter);
+       long now = System.currentTimeMillis();
+       Collections.sort(tasks, (t1, t2) -> Long.compare(t1.getStateTime(), t2.getStateTime()));
+       boolean first = true;
+    </%java>
+    <%if format.equals("json") %>
+        [<%for MonitoredTask task : tasks%><%if first%><%java>first = false;</%java><%else>,</%if><% task.toJSON() %></%for>]
+    <%else>
+        <%if tasks.isEmpty()%>
+            <p>No tasks currently running on this node.</p>
+        <%else>
+            <table class="table table-striped">
+                <tr>
+                      <th>Start Time</th>
+                      <th>Description</th>
+                      <th>State</th>
+                      <th>Status</th>
+                </tr>
+                <%for MonitoredTask task : tasks %>
+                    <tr class="<& stateCss; state = task.getState() &>">
+                      <td><% new Date(task.getStartTime()) %></td>
+                      <td><% task.getDescription() %></td>
+                      <td><% task.getState() %>
+                          (since <% StringUtils.formatTimeDiff(now, task.getStateTime()) %> ago)
+                      </td>
+                      <td><% task.getStatus() %>
+                          (since <% StringUtils.formatTimeDiff(now, task.getStatusTime()) %>
+                          ago)</td>
+                    </tr>
+                </%for>
+            </table>
+        </%if>
+    </%if>
+</%def>
 
 <%def stateCss>
         <%args>