Apache
/
hadoop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

HDFS-13204. RBF: Optimize name service safe mode icon. Contributed by liuhongtong.

This commit is contained in:
Inigo Goiri 2018-03-26 09:42:51 -07:00
parent cfc3a1c8f0
commit 947b282984
3 changed files with 182 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,7 +21,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=9" /> <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/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/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> <title>Router Information</title>
</head> </head>
<body> <body>
@ -115,11 +115,11 @@
<script type="text/x-dust-template" id="tmpl-namenode"> <script type="text/x-dust-template" id="tmpl-namenode">
<div class="page-header"><h1>Nameservice Information</h1></div> <div class="page-header"><h1>Nameservice Information</h1></div>
<div> <div>
<ul class="dfshealth-node-legend"> <ul class="federationhealth-namenode-legend">
<li class="dfshealth-node-icon dfshealth-node-alive">Active</li> <li class="federationhealth-namenode-icon federationhealth-namenode-active">Active</li>
<li class="dfshealth-node-icon dfshealth-node-down-decommissioned">Standby</li> <li class="federationhealth-namenode-icon federationhealth-namenode-standby">Standby</li>
<li class="dfshealth-node-icon dfshealth-node-down-maintenance">Safe mode</li> <li class="federationhealth-namenode-icon federationhealth-namenode-safemode">Safe mode</li>
<li class="dfshealth-node-icon dfshealth-node-down">Unavailable</li> <li class="federationhealth-namenode-icon federationhealth-namenode-unavailable">Unavailable</li>
</ul> </ul>
</div> </div>
<small> <small>
@ -151,14 +151,14 @@
<tbody> <tbody>
{#Nameservices} {#Nameservices}
<tr> <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}">{nameserviceId}</a></td>
<td><a href="http://{webAddress}">{namenodeId}</a></td> <td><a href="http://{webAddress}">{namenodeId}</a></td>
<td>{lastHeartbeat}</td> <td>{lastHeartbeat}</td>
<td ng-value="{usedPercentage}" style="width:210px"> <td ng-value="{usedPercentage}" style="width:210px">
<div> <div>
<div style="display:inline-block; float: left; padding-right: 10px; width:60px;">{totalSpace|fmt_bytes}</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 class="progress-bar {#helper_usage_bar value="{usedPercentage}"/}" style="width: {usedPercentage}%">
</div> </div>
</div> </div>
@ -181,11 +181,11 @@
<div class="page-header"><h1>Namenode Information</h1></div> <div class="page-header"><h1>Namenode Information</h1></div>
<div> <div>
<ul class="dfshealth-node-legend"> <ul class="federationhealth-namenode-legend">
<li class="dfshealth-node-icon dfshealth-node-alive">Active</li> <li class="federationhealth-namenode-icon federationhealth-namenode-active">Active</li>
<li class="dfshealth-node-icon dfshealth-node-down-decommissioned">Standby</li> <li class="federationhealth-namenode-icon federationhealth-namenode-standby">Standby</li>
<li class="dfshealth-node-icon dfshealth-node-down-maintenance">Safe mode</li> <li class="federationhealth-namenode-icon federationhealth-namenode-safemode">Safe mode</li>
<li class="dfshealth-node-icon dfshealth-node-down">Unavailable</li> <li class="federationhealth-namenode-icon federationhealth-namenode-unavailable">Unavailable</li>
</ul> </ul>
</div> </div>
<small> <small>
@ -217,7 +217,7 @@
<tbody> <tbody>
{#Namenodes} {#Namenodes}
<tr> <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>{nameserviceId}</td>
<td>{namenodeId}</td> <td>{namenodeId}</td>
<td><a href="http://{webAddress}">{webAddress}</a></td> <td><a href="http://{webAddress}">{webAddress}</a></td>
@ -225,7 +225,7 @@
<td ng-value="{usedPercentage}" style="width:210px"> <td ng-value="{usedPercentage}" style="width:210px">
<div> <div>
<div style="display:inline-block; float: left; padding-right: 10px; width:60px;">{totalSpace|fmt_bytes}</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 class="progress-bar {#helper_usage_bar value="{usedPercentage}"/}" style="width: {usedPercentage}%">
</div> </div>
</div> </div>
@ -251,10 +251,10 @@
<script type="text/x-dust-template" id="tmpl-router"> <script type="text/x-dust-template" id="tmpl-router">
<div class="page-header"><h1>Routers Information</h1></div> <div class="page-header"><h1>Routers Information</h1></div>
<div> <div>
<ul class="dfshealth-node-legend"> <ul class="federationhealth-router-legend">
<li class="dfshealth-node-icon dfshealth-node-alive">Active</li> <li class="federationhealth-router-icon federationhealth-router-active">Active</li>
<li class="dfshealth-node-icon dfshealth-node-decommissioned">Safe mode</li> <li class="federationhealth-router-icon federationhealth-router-safemode">Safe mode</li>
<li class="dfshealth-node-icon dfshealth-node-down">Unavailable</li> <li class="federationhealth-router-icon federationhealth-router-unavailable">Unavailable</li>
</ul> </ul>
</div> </div>
<table class="table"> <table class="table">
@ -277,7 +277,7 @@
<tbody> <tbody>
{#Routers} {#Routers}
<tr> <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>{address}</td>
<td>{status}</td> <td>{status}</td>
<td>{lastHeartbeat} sec ago</td> <td>{lastHeartbeat} sec ago</td>
@ -395,7 +395,7 @@
<td>{nameserviceId}</td> <td>{nameserviceId}</td>
<td>{path}</td> <td>{path}</td>
<td>{order}</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>{ownerName}</td>
<td>{groupName}</td> <td>{groupName}</td>
<td>{mode}</td> <td>{mode}</td>

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

@ -114,19 +114,19 @@
var n = nodes[i]; var n = nodes[i];
n.usedPercentage = Math.round(n.used * 1.0 / n.totalSpace * 100); n.usedPercentage = Math.round(n.used * 1.0 / n.totalSpace * 100);
n.title = "Unavailable"; n.title = "Unavailable";
n.iconState = "down"; n.iconState = "unavailable";
if (n.isSafeMode === true) { if (n.isSafeMode === true) {
n.title = capitalise(n.state) + " (safe mode)" n.title = capitalise(n.state) + " (safe mode)"
n.iconState = "decommissioned"; n.iconState = "safemode";
} else if (n.state === "ACTIVE") { } else if (n.state === "ACTIVE") {
n.title = capitalise(n.state); n.title = capitalise(n.state);
n.iconState = "alive"; n.iconState = "active";
} else if (nodes[i].state === "STANDBY") { } else if (nodes[i].state === "STANDBY") {
n.title = capitalise(n.state); n.title = capitalise(n.state);
n.iconState = "down-decommissioned"; n.iconState = "standby";
} else if (nodes[i].state === "UNAVAILABLE") { } else if (nodes[i].state === "UNAVAILABLE") {
n.title = capitalise(n.state); n.title = capitalise(n.state);
n.iconState = "down"; n.iconState = "unavailable";
} }
if (n.namenodeId === "null") { if (n.namenodeId === "null") {
n.namenodeId = ""; n.namenodeId = "";
@ -180,22 +180,22 @@
for (var i = 0, e = nodes.length; i < e; ++i) { for (var i = 0, e = nodes.length; i < e; ++i) {
var n = nodes[i]; var n = nodes[i];
n.title = "Unavailable" n.title = "Unavailable"
n.iconState = "down"; n.iconState = "unavailable";
if (n.status === "INITIALIZING") { if (n.status === "INITIALIZING") {
n.title = capitalise(n.status); n.title = capitalise(n.status);
n.iconState = "alive"; n.iconState = "active";
} else if (n.status === "RUNNING") { } else if (n.status === "RUNNING") {
n.title = capitalise(n.status); n.title = capitalise(n.status);
n.iconState = "alive"; n.iconState = "active";
} else if (n.status === "SAFEMODE") { } else if (n.status === "SAFEMODE") {
n.title = capitalise(n.status); n.title = capitalise(n.status);
n.iconState = "down-decommissioned"; n.iconState = "safemode";
} else if (n.status === "STOPPING") { } else if (n.status === "STOPPING") {
n.title = capitalise(n.status); n.title = capitalise(n.status);
n.iconState = "decommissioned"; n.iconState = "unavailable";
} else if (n.status === "SHUTDOWN") { } else if (n.status === "SHUTDOWN") {
n.title = capitalise(n.status); n.title = capitalise(n.status);
n.iconState = "down"; n.iconState = "unavailable";
} }
} }
} }
@ -307,7 +307,18 @@
var HELPERS = {} var HELPERS = {}
function workaround(resource) { 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) resource.MountTable = JSON.parse(resource.MountTable)
augment_read_only(resource.MountTable)
return resource; return resource;
} }
@ -378,4 +389,4 @@
$(window).bind('hashchange', function () { $(window).bind('hashchange', function () {
load_page(); load_page();
}); });
})(); })();

138
hadoop-hdfs-project/hadoop-hdfs-rbf/src/main/webapps/static/rbf.css Normal file
View File

@ -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";
}