HDFS-14928. UI: unifying the WebUI across different components. Contributed by Xieming Li

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

@@ -75,7 +75,7 @@
 
 <!-- Overview -->
 <script type="text/x-dust-template" id="tmpl-federationhealth">
-<div class="page-header"><h1>Router {#router}<small>'{HostAndPort}'</small>{/router}</h1></div>
+<div class="page-header"><h1>Router {#router}<small>'{HostAndPort}' (<span class="dfshealth-namenode-icon dfshealth-namenode-{selfState}">{selfState}</span>)</small>{/router}</h1></div>
 {#router}
 <table class="table table-bordered table-striped">
   <tr><th>Started:</th><td>{RouterStarted}</td></tr>
@@ -128,12 +128,12 @@
 <div class="page-header"><h1>Nameservice Information</h1></div>
 <div>
   <ul class="federationhealth-namenode-legend">
-    <li class="federationhealth-namenode-icon federationhealth-namenode-active">Active</li>
-    <li class="federationhealth-namenode-icon federationhealth-namenode-observer">Observer</li>
-    <li class="federationhealth-namenode-icon federationhealth-namenode-standby">Standby</li>
-    <li class="federationhealth-namenode-icon federationhealth-namenode-safemode">Safe mode</li>
-    <li class="federationhealth-namenode-icon federationhealth-namenode-disabled">Disabled</li>
-    <li class="federationhealth-namenode-icon federationhealth-namenode-unavailable">Unavailable</li>
+    <li class="dfshealth-namenode-icon dfshealth-namenode-active">Active</li>
+    <li class="dfshealth-namenode-icon dfshealth-namenode-observer">Observer</li>
+    <li class="dfshealth-namenode-icon dfshealth-namenode-standby">Standby</li>
+    <li class="dfshealth-namenode-icon dfshealth-namenode-safemode">Safe mode</li>
+    <li class="dfshealth-namenode-icon dfshealth-namenode-disabled">Disabled</li>
+    <li class="dfshealth-namenode-icon dfshealth-namenode-unavailable">Unavailable</li>
   </ul>
 </div>
 <small>
@@ -165,7 +165,7 @@
   <tbody>
     {#Nameservices}
     <tr>
-      <td class="federationhealth-namenode-icon federationhealth-namenode-{iconState}" title="{title}"></td>
+      <td class="dfshealth-namenode-icon dfshealth-namenode-{iconState}" title="{title}"></td>
       <td><a href="{webScheme}://{webAddress}">{nameserviceId}</a></td>
       <td><a href="{webScheme}://{webAddress}">{namenodeId}</a></td>
       <td>{lastHeartbeat}</td>
@@ -196,11 +196,11 @@
 <div class="page-header"><h1>Namenode Information</h1></div>
 <div>
   <ul class="federationhealth-namenode-legend">
-    <li class="federationhealth-namenode-icon federationhealth-namenode-active">Active</li>
-    <li class="federationhealth-namenode-icon federationhealth-namenode-observer">Observer</li>
-    <li class="federationhealth-namenode-icon federationhealth-namenode-standby">Standby</li>
-    <li class="federationhealth-namenode-icon federationhealth-namenode-safemode">Safe mode</li>
-    <li class="federationhealth-namenode-icon federationhealth-namenode-unavailable">Unavailable</li>
+    <li class="dfshealth-namenode-icon dfshealth-namenode-active">Active</li>
+    <li class="dfshealth-namenode-icon dfshealth-namenode-observer">Observer</li>
+    <li class="dfshealth-namenode-icon dfshealth-namenode-standby">Standby</li>
+    <li class="dfshealth-namenode-icon dfshealth-namenode-safemode">Safe mode</li>
+    <li class="dfshealth-namenode-icon dfshealth-namenode-unavailable">Unavailable</li>
   </ul>
 </div>
 <small>
@@ -232,7 +232,7 @@
   <tbody>
     {#Namenodes}
     <tr>
-      <td class="federationhealth-namenode-icon federationhealth-namenode-{iconState}" title="{title}"></td>
+      <td class="dfshealth-namenode-icon dfshealth-namenode-{iconState}" title="{title}"></td>
       <td>{nameserviceId}</td>
       <td>{namenodeId}</td>
       <td><a href="{webScheme}://{webAddress}">{webScheme}://{webAddress}</a></td>

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

@@ -72,6 +72,21 @@
       guard_with_startup_progress(function(d) {
         for (var k in d) {
           data[k] = k === 'federation' ? workaround(d[k].beans[0]) : d[k].beans[0];
+          if (k === 'router') {
+            var routerInfo = d[k].beans[0];
+            data[k].selfState = "unavailable";
+            if (routerInfo.Safemode === true) {
+              data[k].selfState = "safemode";
+            } else if (routerInfo.RouterStatus === "INITIALIZING" || routerInfo.RouterStatus === "RUNNING") {
+              data[k].selfState = "active";
+            } else if (routerInfo.RouterStatus === "SAFEMODE") {
+              data[k].selfState = "safemode";
+            } else if (routerInfo.RouterStatus === "STOPPING") {
+              data[k].selfState = "standby";
+            } else if (routerInfo.RouterStatus === "UNAVAILABLE" || routerInfo.RouterStatus === "SHUTDOWN") {
+              data[k].selfState = "unavailable";
+            }
+          }
         }
         render();
       }),

hadoop-hdfs-project/hadoop-hdfs-rbf/src/main/webapps/static/rbf.css

@@ -22,47 +22,6 @@
     width: 60%;
 }
 
-.federationhealth-namenode-icon:before {
-    font-size: 10pt;
-    padding-right: 1pt;
-    font-family: 'Glyphicons Halflings';
-    font-style: normal;
-    font-weight: normal;
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-.federationhealth-namenode-active:before {
-    color: #5fa341;
-    content: "\e013";
-}
-
-.federationhealth-namenode-observer:before {
-    color: #CCCC00;
-    content: "\e013";
-}
-
-.federationhealth-namenode-unavailable:before {
-    color: #c7254e;
-    content: "\e101";
-}
-
-.federationhealth-namenode-standby:before {
-    color: #2e6da6;
-    content: "\e017";
-}
-
-.federationhealth-namenode-safemode:before {
-    color: #bc5f04;
-    content: "\e090";
-}
-
-.federationhealth-namenode-disabled:before {
-    color: #eea236;
-    content: "\e136";
-}
-
 .federationhealth-namenode-legend {
     list-style-type: none;
     text-align: right;

hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.html

@@ -133,7 +133,7 @@
 {/eq}
 {/nn}
 
-<div class="page-header"><h1>Overview {#nnstat}<small>'{HostAndPort}' ({State})</small>{/nnstat}</h1></div>
+<div class="page-header"><h1>Overview {#nnstat}<small>'{HostAndPort}' (<span class="dfshealth-namenode-icon dfshealth-namenode-{State}">{State}</span>)</small>{/nnstat}</h1></div>
 
 <table class="table table-bordered table-striped">
 {#HAInfo}

hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/hadoop.css

@@ -285,6 +285,47 @@ header.bs-docs-nav, header.bs-docs-nav .navbar-brand {
     padding-right: 5pt;
 }
 
+.dfshealth-namenode-icon:before {
+    font-size: 10pt;
+    padding-right: 1pt;
+    font-family: 'Glyphicons Halflings';
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.dfshealth-namenode-active:before {
+    color: #5fa341;
+    content: "\e013";
+}
+
+.dfshealth-namenode-observer:before {
+    color: #CCCC00;
+    content: "\e013";
+}
+
+.dfshealth-namenode-unavailable:before {
+    color: #c7254e;
+    content: "\e101";
+}
+
+.dfshealth-namenode-standby:before {
+    color: #2e6da6;
+    content: "\e017";
+}
+
+.dfshealth-namenode-safemode:before {
+    color: #bc5f04;
+    content: "\e090";
+}
+
+.dfshealth-namenode-disabled:before {
+    color: #eea236;
+    content: "\e136";
+}
+
 .explorer-entry .explorer-browse-links { cursor: pointer; }
 .explorer-entry .glyphicon-trash { cursor: pointer; }