From aa66e7cc2790241ae1c097bc3e66fadab03a36f9 Mon Sep 17 00:00:00 2001
From: Inigo Goiri <inigoiri@apache.org>
Date: Mon, 26 Mar 2018 09:42:51 -0700
Subject: [PATCH] HDFS-13204. RBF: Optimize name service safe mode icon.
 Contributed by liuhongtong.

(cherry picked from commit 947b2829844f2b4ce42f72b7e3ee27d7c4a27df2)
(cherry picked from commit 0dc16559ee62f4f1691fae017d18358fe15c24cd)
---
 .../main/webapps/router/federationhealth.html |  42 +++---
 .../main/webapps/router/federationhealth.js   |  35 +++--
 .../src/main/webapps/static/rbf.css           | 138 ++++++++++++++++++
 3 files changed, 182 insertions(+), 33 deletions(-)
 create mode 100644 hadoop-hdfs-project/hadoop-hdfs-rbf/src/main/webapps/static/rbf.css
diff --git 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
index 71e21326d10..a7da094b49b 100644
--- 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
@@ -21,7 +21,7 @@
 <meta http-equiv="X-UA-Compatible" content="IE=9" />
 <link rel="stylesheet" type="text/css" href="/static/bootstrap-3.0.2/css/bootstrap.min.css" />
 <link rel="stylesheet" type="text/css" href="/static/dataTables.bootstrap.css" />
-<link rel="stylesheet" type="text/css" href="/static/hadoop.css" />
+<link rel="stylesheet" type="text/css" href="/static/rbf.css" />
 <title>Router Information</title>
 </head>
 <body>
@@ -115,11 +115,11 @@
 <script type="text/x-dust-template" id="tmpl-namenode">
 <div class="page-header"><h1>Nameservice Information</h1></div>
 <div>
-  <ul class="dfshealth-node-legend">
-    <li class="dfshealth-node-icon dfshealth-node-alive">Active</li>
-    <li class="dfshealth-node-icon dfshealth-node-down-decommissioned">Standby</li>
-    <li class="dfshealth-node-icon dfshealth-node-down-maintenance">Safe mode</li>
-    <li class="dfshealth-node-icon dfshealth-node-down">Unavailable</li>
+  <ul class="federationhealth-namenode-legend">
+    <li class="federationhealth-namenode-icon federationhealth-namenode-active">Active</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>
   </ul>
 </div>
 <small>
@@ -151,14 +151,14 @@
   <tbody>
     {#Nameservices}
     <tr>
-      <td class="dfshealth-node-icon dfshealth-node-{iconState}" title="{title}"></td>
+      <td class="federationhealth-namenode-icon federationhealth-namenode-{iconState}" title="{title}"></td>
       <td><a href="http://{webAddress}">{nameserviceId}</a></td>
       <td><a href="http://{webAddress}">{namenodeId}</a></td>
       <td>{lastHeartbeat}</td>
       <td ng-value="{usedPercentage}" style="width:210px">
         <div>
           <div style="display:inline-block; float: left; padding-right: 10px; width:60px;">{totalSpace|fmt_bytes}</div>
-          <div class="clearfix progress dfshealth-node-capacity-bar" title="Used: {used|fmt_bytes}">
+          <div class="clearfix progress federationhealth-namenode-capacity-bar" title="Used: {used|fmt_bytes}">
             <div class="progress-bar {#helper_usage_bar value="{usedPercentage}"/}" style="width: {usedPercentage}%">
             </div>
           </div>
@@ -181,11 +181,11 @@
 
 <div class="page-header"><h1>Namenode Information</h1></div>
 <div>
-  <ul class="dfshealth-node-legend">
-    <li class="dfshealth-node-icon dfshealth-node-alive">Active</li>
-    <li class="dfshealth-node-icon dfshealth-node-down-decommissioned">Standby</li>
-    <li class="dfshealth-node-icon dfshealth-node-down-maintenance">Safe mode</li>
-    <li class="dfshealth-node-icon dfshealth-node-down">Unavailable</li>
+  <ul class="federationhealth-namenode-legend">
+    <li class="federationhealth-namenode-icon federationhealth-namenode-active">Active</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>
   </ul>
 </div>
 <small>
@@ -217,7 +217,7 @@
   <tbody>
     {#Namenodes}
     <tr>
-      <td class="dfshealth-node-icon dfshealth-node-{iconState}" title="{title}"></td>
+      <td class="federationhealth-namenode-icon federationhealth-namenode-{iconState}" title="{title}"></td>
       <td>{nameserviceId}</td>
       <td>{namenodeId}</td>
       <td><a href="http://{webAddress}">{webAddress}</a></td>
@@ -225,7 +225,7 @@
       <td ng-value="{usedPercentage}" style="width:210px">
         <div>
           <div style="display:inline-block; float: left; padding-right: 10px; width:60px;">{totalSpace|fmt_bytes}</div>
-          <div class="clearfix progress dfshealth-node-capacity-bar" title="Used: {used|fmt_bytes}">
+          <div class="clearfix progress federationhealth-namenode-capacity-bar" title="Used: {used|fmt_bytes}">
             <div class="progress-bar {#helper_usage_bar value="{usedPercentage}"/}" style="width: {usedPercentage}%">
             </div>
           </div>
@@ -251,10 +251,10 @@
 <script type="text/x-dust-template" id="tmpl-router">
 <div class="page-header"><h1>Routers Information</h1></div>
 <div>
-  <ul class="dfshealth-node-legend">
-    <li class="dfshealth-node-icon dfshealth-node-alive">Active</li>
-    <li class="dfshealth-node-icon dfshealth-node-decommissioned">Safe mode</li>
-    <li class="dfshealth-node-icon dfshealth-node-down">Unavailable</li>
+  <ul class="federationhealth-router-legend">
+    <li class="federationhealth-router-icon federationhealth-router-active">Active</li>
+    <li class="federationhealth-router-icon federationhealth-router-safemode">Safe mode</li>
+    <li class="federationhealth-router-icon federationhealth-router-unavailable">Unavailable</li>
   </ul>
 </div>
 <table class="table">
@@ -277,7 +277,7 @@
   <tbody>
     {#Routers}
     <tr>
-      <td class="dfshealth-node-icon dfshealth-node-{iconState}" title="{title}"></td>
+      <td class="federationhealth-router-icon federationhealth-router-{iconState}" title="{title}"></td>
       <td>{address}</td>
       <td>{status}</td>
       <td>{lastHeartbeat} sec ago</td>
@@ -395,7 +395,7 @@
       <td>{nameserviceId}</td>
       <td>{path}</td>
       <td>{order}</td>
-      <td class="dfshealth-node-icon dfshealth-mount-read-only-{readonly}"/>
+      <td class="mount-table-icon mount-table-read-only-{readonly}"/>
       <td>{ownerName}</td>
       <td>{groupName}</td>
       <td>{mode}</td>
diff --git 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
index b3ed868c664..ef0a2a4e435 100644
--- 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
@@ -114,19 +114,19 @@
           var n = nodes[i];
           n.usedPercentage = Math.round(n.used * 1.0 / n.totalSpace * 100);
           n.title = "Unavailable";
-          n.iconState = "down";
+          n.iconState = "unavailable";
           if (n.isSafeMode === true) {
             n.title = capitalise(n.state) + " (safe mode)"
-            n.iconState = "decommissioned";
+            n.iconState = "safemode";
           } else if (n.state === "ACTIVE") {
             n.title = capitalise(n.state);
-            n.iconState = "alive";
+            n.iconState = "active";
           } else if (nodes[i].state === "STANDBY") {
             n.title = capitalise(n.state);
-            n.iconState = "down-decommissioned";
+            n.iconState = "standby";
           } else if (nodes[i].state === "UNAVAILABLE") {
             n.title = capitalise(n.state);
-            n.iconState = "down";
+            n.iconState = "unavailable";
           }
           if (n.namenodeId === "null") {
             n.namenodeId = "";
@@ -180,22 +180,22 @@
         for (var i = 0, e = nodes.length; i < e; ++i) {
           var n = nodes[i];
           n.title = "Unavailable"
-          n.iconState = "down";
+          n.iconState = "unavailable";
           if (n.status === "INITIALIZING") {
             n.title = capitalise(n.status);
-            n.iconState = "alive";
+            n.iconState = "active";
           } else if (n.status === "RUNNING") {
             n.title = capitalise(n.status);
-            n.iconState = "alive";
+            n.iconState = "active";
           } else if (n.status === "SAFEMODE") {
             n.title = capitalise(n.status);
-            n.iconState = "down-decommissioned";
+            n.iconState = "safemode";
           } else if (n.status === "STOPPING") {
             n.title = capitalise(n.status);
-            n.iconState = "decommissioned";
+            n.iconState = "unavailable";
           } else if (n.status === "SHUTDOWN") {
             n.title = capitalise(n.status);
-            n.iconState = "down";
+            n.iconState = "unavailable";
           }
         }
       }
@@ -307,7 +307,18 @@
     var HELPERS = {}
 
     function workaround(resource) {
+      function augment_read_only(mountTable) {
+        for (var i = 0, e = mountTable.length; i < e; ++i) {
+          if (mountTable[i].readonly == true) {
+            mountTable[i].readonly = "true"
+          } else {
+            mountTable[i].readonly = "false"
+          }
+        }
+      }
+
       resource.MountTable = JSON.parse(resource.MountTable)
+      augment_read_only(resource.MountTable)
       return resource;
     }
 
@@ -378,4 +389,4 @@
   $(window).bind('hashchange', function () {
     load_page();
   });
-})();
\ No newline at end of file
+})();
diff --git 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
new file mode 100644
index 00000000000..f9230850634
--- /dev/null
+++ b/hadoop-hdfs-project/hadoop-hdfs-rbf/src/main/webapps/static/rbf.css
@@ -0,0 +1,138 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one or more
+* contributor license agreements.  See the NOTICE file distributed with
+* this work for additional information regarding copyright ownership.
+* The ASF licenses this file to You under the Apache License, Version 2.0
+* (the "License"); you may not use this file except in compliance with
+* the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import url("hadoop.css");
+
+.federationhealth-namenode-capacity-bar {
+    margin-bottom:0;
+    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-unavailable:before {
+    color: #c7254e;
+    content: "\e101";
+}
+
+.federationhealth-namenode-standby:before {
+    color: #2e6da6;
+    content: "\e017";
+}
+
+.federationhealth-namenode-safemode:before {
+    color: #bc5f04;
+    content: "\e090";
+}
+
+.federationhealth-namenode-legend {
+    list-style-type: none;
+    text-align: right;
+}
+
+.federationhealth-namenode-legend li {
+    display: inline;
+    padding: 10pt;
+    padding-left: 10pt;
+}
+
+.federationhealth-namenode-legend li:before {
+    padding-right: 5pt;
+}
+
+
+.federationhealth-router-capacity-bar {
+    margin-bottom:0;
+    width: 60%;
+}
+
+.federationhealth-router-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-router-active:before {
+    color: #5fa341;
+    content: "\e013";
+}
+
+.federationhealth-router-unavailable:before {
+    color: #c7254e;
+    content: "\e101";
+}
+
+.federationhealth-router-safemode:before {
+    color: #bc5f04;
+    content: "\e090";
+}
+
+.federationhealth-router-legend {
+    list-style-type: none;
+    text-align: right;
+}
+
+.federationhealth-router-legend li {
+    display: inline;
+    padding: 10pt;
+    padding-left: 10pt;
+}
+
+.federationhealth-router-legend li:before {
+    padding-right: 5pt;
+}
+
+.mount-table-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;
+}
+
+.mount-table-read-only-true:before {
+    color: #c7254e;
+    content: "\e033";
+}
+
+.mount-table-read-only-false:before {
+    color: #5fa341;
+    content: "\e013";
+}
+
