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

HDFS-14358. Provide LiveNode and DeadNode filter in DataNode UI. Contributed by hemanthboyina.

This commit is contained in:
Surendra Singh Lilhore 2019-08-22 12:26:30 +05:30
parent 5e156b9dde
commit 76790a1e67
3 changed files with 38 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.html
View File

@ -23,6 +23,11 @@
<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/hadoop.css" />
<title>Namenode information</title> <title>Namenode information</title>
<style>
.col-sm-6 {
width: 30%;
}
</style>
</head> </head>
<body> <body>
@ -315,9 +320,11 @@
<small><div id="datanode-usage-histogram"></div></small> <small><div id="datanode-usage-histogram"></div></small>
<div class="page-header"><h1><small>In operation</small></h1></div> <div class="page-header"><h1><small>In operation</small></h1></div>
<small> <small>
<p id="datanodefilter" class="col-sm-6">DataNode State </p>
<table class="table" id="table-datanodes"> <table class="table" id="table-datanodes">
<thead> <thead>
<tr> <tr>
<th>State</th>
<th>Node</th> <th>Node</th>
<th>Http Address</th> <th>Http Address</th>
<th>Last contact</th> <th>Last contact</th>
@ -330,6 +337,7 @@
</thead> </thead>
{#LiveNodes} {#LiveNodes}
<tr> <tr>
<td ng-value="{state}">{state}</td>
<td ng-value="{state}-{name}" class="dfshealth-node-icon dfshealth-node-{state}">{name} ({xferaddr})</td> <td ng-value="{state}-{name}" class="dfshealth-node-icon dfshealth-node-{state}">{name} ({xferaddr})</td>
<td ng-value="{state}-{name}"><a href='{dnWebAddress}'>{dnWebAddress}</a></td> <td ng-value="{state}-{name}"><a href='{dnWebAddress}'>{dnWebAddress}</a></td>
<td ng-value="{lastContact}">{lastContact}s</td> <td ng-value="{lastContact}">{lastContact}s</td>
@ -350,6 +358,7 @@
{/LiveNodes} {/LiveNodes}
{#DeadNodes} {#DeadNodes}
<tr class="danger"> <tr class="danger">
<td ng-value="{state}">{state}</td>
<td ng-value="{state}-{name}" class="dfshealth-node-icon dfshealth-node-{state}">{name} ({xferaddr})</td> <td ng-value="{state}-{name}" class="dfshealth-node-icon dfshealth-node-{state}">{name} ({xferaddr})</td>
<td></td> <td></td>
<td>{#helper_relative_time value="{lastContact}"/}</td> <td>{#helper_relative_time value="{lastContact}"/}</td>
@ -357,6 +366,7 @@
<td></td> <td></td>
<td></td> <td></td>
<td></td> <td></td>
<td></td>
</tr> </tr>
{/DeadNodes} {/DeadNodes}
</table> </table>

21
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.js
View File

@ -333,7 +333,11 @@
$('#tab-datanode').html(out); $('#tab-datanode').html(out);
$('#table-datanodes').dataTable( { $('#table-datanodes').dataTable( {
'lengthMenu': [ [25, 50, 100, -1], [25, 50, 100, "All"] ], 'lengthMenu': [ [25, 50, 100, -1], [25, 50, 100, "All"] ],
'columnDefs': [
{ 'targets': [ 0 ], 'visible': false, 'searchable': false }
],
'columns': [ 'columns': [
{ 'orderDataType': 'ng-value', 'searchable': true , "defaultContent": "" },
{ 'orderDataType': 'ng-value', 'searchable': true , "defaultContent": "" }, { 'orderDataType': 'ng-value', 'searchable': true , "defaultContent": "" },
{ 'orderDataType': 'ng-value', 'searchable': true , "defaultContent": ""}, { 'orderDataType': 'ng-value', 'searchable': true , "defaultContent": ""},
{ 'orderDataType': 'ng-value', 'type': 'num' , "defaultContent": 0}, { 'orderDataType': 'ng-value', 'type': 'num' , "defaultContent": 0},
@ -342,7 +346,22 @@
{ 'type': 'num' , "defaultContent": 0}, { 'type': 'num' , "defaultContent": 0},
{ 'orderDataType': 'ng-value', 'type': 'num' , "defaultContent": 0}, { 'orderDataType': 'ng-value', 'type': 'num' , "defaultContent": 0},
{ 'type': 'string' , "defaultContent": ""} { 'type': 'string' , "defaultContent": ""}
]}); ],
initComplete: function () {
var column = this.api().column([0]);
var select = $('<select class="datanodestatus form-control input-sm"><option value="">All</option></select>')
.appendTo('#datanodefilter')
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val());
column.search(val ? '^' + val + '$' : '', true, false).draw();
});
console.log(select);
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
}
});
renderHistogram(data); renderHistogram(data);
$('#ui-tabs a[href="#tab-datanode"]').tab('show'); $('#ui-tabs a[href="#tab-datanode"]').tab('show');
}); });

7
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/hadoop.css
View File

@ -314,6 +314,13 @@ header.bs-docs-nav, header.bs-docs-nav .navbar-brand {
left: 75px; left: 75px;
} }
.datanodestatus{
width:75px;
height:30px;
color: #555;
display: inline-block;
}
.bar rect { .bar rect {
fill: #5FA33F; fill: #5FA33F;
} }