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

This commit is contained in:
Takanobu Asanuma 2019-11-11 14:04:57 +09:00
parent 320008bb7c
commit 6663d6a5c2
5 changed files with 71 additions and 56 deletions

View File

@ -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>

View File

@ -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();
}),

View File

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

View File

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

View File

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