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

2019-11-11 14:04:57 +09:00 · 2019-11-11 14:04:57 +09:00 · 6663d6a5c2
parent 320008bb7c
commit 6663d6a5c2
5 changed files with 71 additions and 56 deletions
--- a/hadoop-hdfs-project/hadoop-hdfs-rbf/src/main/webapps/router/federationhealth.html
+++ b/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>
--- a/hadoop-hdfs-project/hadoop-hdfs-rbf/src/main/webapps/router/federationhealth.js
+++ b/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();
      }),
--- a/hadoop-hdfs-project/hadoop-hdfs-rbf/src/main/webapps/static/rbf.css
+++ b/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;
--- a/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.html
+++ b/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}
--- a/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/hadoop.css
+++ b/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; }