HDFS-13187. RBF: Fix Routers information shown in the web UI. Contributed by Inigo Goiri and Wei Yan.

(cherry picked from commit 6ce9f79cc9)

hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/router/federationhealth.html

@@ -35,6 +35,7 @@
   <ul class="nav navbar-nav" id="ui-tabs">
     <li><a href="#tab-overview">Overview</a></li>
     <li><a href="#tab-namenode">Subclusters</a></li>
+    <li><a href="#tab-router">Routers</a></li>
     <li><a href="#tab-datanode">Datanodes</a></li>
     <li><a href="#tab-mounttable">Mount table</a></li>
     <li class="dropdown">
@@ -62,6 +63,7 @@
 <div class="tab-content">
   <div class="tab-pane" id="tab-overview"></div>
   <div class="tab-pane" id="tab-namenode"></div>
+  <div class="tab-pane" id="tab-router"></div>
   <div class="tab-pane" id="tab-datanode"></div>
   <div class="tab-pane" id="tab-mounttable"></div>
 </div>
@@ -245,6 +247,8 @@
 </small>
 </script>
 
+<!-- Routers -->
+<script type="text/x-dust-template" id="tmpl-router">
 <div class="page-header"><h1>Routers Information</h1></div>
 <div>
   <ul class="dfshealth-node-legend">

hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/router/federationhealth.js

@@ -20,6 +20,7 @@
 
   dust.loadSource(dust.compile($('#tmpl-federationhealth').html(), 'federationhealth'));
   dust.loadSource(dust.compile($('#tmpl-namenode').html(), 'namenode-info'));
+  dust.loadSource(dust.compile($('#tmpl-router').html(), 'router-info'));
   dust.loadSource(dust.compile($('#tmpl-datanode').html(), 'datanode-info'));
   dust.loadSource(dust.compile($('#tmpl-mounttable').html(), 'mounttable'));
 
@@ -133,6 +134,48 @@
         }
       }
 
+      r.Nameservices = node_map_to_array(JSON.parse(r.Nameservices));
+      augment_namenodes(r.Nameservices);
+      r.Namenodes = node_map_to_array(JSON.parse(r.Namenodes));
+      augment_namenodes(r.Namenodes);
+      return r;
+    }
+
+    $.get(
+      '/jmx?qry=Hadoop:service=Router,name=FederationState',
+      guard_with_startup_progress(function (resp) {
+        var data = workaround(resp.beans[0]);
+        var base = dust.makeBase(HELPERS);
+        dust.render('namenode-info', base.push(data), function(err, out) {
+          $('#tab-namenode').html(out);
+          $('#ui-tabs a[href="#tab-namenode"]').tab('show');
+        });
+      })).error(ajax_error_handler);
+  }
+
+  function load_router_info() {
+    var HELPERS = {
+      'helper_lastcontact_tostring' : function (chunk, ctx, bodies, params) {
+        var value = dust.helpers.tap(params.value, chunk, ctx);
+        return chunk.write('' + new Date(Date.now()-1000*Number(value)));
+      }
+    };
+
+    function workaround(r) {
+      function node_map_to_array(nodes) {
+        var res = [];
+        for (var n in nodes) {
+          var p = nodes[n];
+          p.name = n;
+          res.push(p);
+        }
+        return res;
+      }
+
+      function capitalise(string) {
+          return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
+      }
+
       function augment_routers(nodes) {
         for (var i = 0, e = nodes.length; i < e; ++i) {
           var n = nodes[i];
@@ -157,10 +200,6 @@
         }
       }
 
-      r.Nameservices = node_map_to_array(JSON.parse(r.Nameservices));
-      augment_namenodes(r.Nameservices);
-      r.Namenodes = node_map_to_array(JSON.parse(r.Namenodes));
-      augment_namenodes(r.Namenodes);
       r.Routers = node_map_to_array(JSON.parse(r.Routers));
       augment_routers(r.Routers);
       return r;
@@ -171,9 +210,9 @@
       guard_with_startup_progress(function (resp) {
         var data = workaround(resp.beans[0]);
         var base = dust.makeBase(HELPERS);
-        dust.render('namenode-info', base.push(data), function(err, out) {
+        dust.render('router-info', base.push(data), function(err, out) {
-          $('#tab-namenode').html(out);
+          $('#tab-router').html(out);
-          $('#ui-tabs a[href="#tab-namenode"]').tab('show');
+          $('#ui-tabs a[href="#tab-router"]').tab('show');
         });
       })).error(ajax_error_handler);
   }
@@ -314,17 +353,20 @@
   function load_page() {
     var hash = window.location.hash;
     switch(hash) {
-      case "#tab-mounttable":
+      case "#tab-overview":
-        load_mount_table();
+        load_overview();
         break;
       case "#tab-namenode":
         load_namenode_info();
         break;
+      case "#tab-router":
+        load_router_info();
+        break;
       case "#tab-datanode":
         load_datanode_info();
         break;
-      case "#tab-overview":
+      case "#tab-mounttable":
-        load_overview();
+        load_mount_table();
         break;
       default:
         window.location.hash = "tab-overview";