Skip to content

Commit 76790a1

Browse files
HDFS-14358. Provide LiveNode and DeadNode filter in DataNode UI. Contributed by hemanthboyina.
1 parent 5e156b9 commit 76790a1

File tree

3 files changed

+38
-2
lines changed

3 files changed

+38
-2
lines changed

hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@
2323
<link rel="stylesheet" type="text/css" href="/static/dataTables.bootstrap.css" />
2424
<link rel="stylesheet" type="text/css" href="/static/hadoop.css" />
2525
<title>Namenode information</title>
26+
<style>
27+
.col-sm-6 {
28+
width: 30%;
29+
}
30+
</style>
2631
</head>
2732
<body>
2833

@@ -315,9 +320,11 @@
315320
<small><div id="datanode-usage-histogram"></div></small>
316321
<div class="page-header"><h1><small>In operation</small></h1></div>
317322
<small>
323+
<p id="datanodefilter" class="col-sm-6">DataNode State </p>
318324
<table class="table" id="table-datanodes">
319325
<thead>
320326
<tr>
327+
<th>State</th>
321328
<th>Node</th>
322329
<th>Http Address</th>
323330
<th>Last contact</th>
@@ -330,6 +337,7 @@
330337
</thead>
331338
{#LiveNodes}
332339
<tr>
340+
<td ng-value="{state}">{state}</td>
333341
<td ng-value="{state}-{name}" class="dfshealth-node-icon dfshealth-node-{state}">{name} ({xferaddr})</td>
334342
<td ng-value="{state}-{name}"><a href='{dnWebAddress}'>{dnWebAddress}</a></td>
335343
<td ng-value="{lastContact}">{lastContact}s</td>
@@ -350,13 +358,15 @@
350358
{/LiveNodes}
351359
{#DeadNodes}
352360
<tr class="danger">
361+
<td ng-value="{state}">{state}</td>
353362
<td ng-value="{state}-{name}" class="dfshealth-node-icon dfshealth-node-{state}">{name} ({xferaddr})</td>
354363
<td></td>
355364
<td>{#helper_relative_time value="{lastContact}"/}</td>
356365
<td></td>
357366
<td></td>
358367
<td></td>
359368
<td></td>
369+
<td></td>
360370
</tr>
361371
{/DeadNodes}
362372
</table>

hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.js

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -333,7 +333,11 @@
333333
$('#tab-datanode').html(out);
334334
$('#table-datanodes').dataTable( {
335335
'lengthMenu': [ [25, 50, 100, -1], [25, 50, 100, "All"] ],
336+
'columnDefs': [
337+
{ 'targets': [ 0 ], 'visible': false, 'searchable': false }
338+
],
336339
'columns': [
340+
{ 'orderDataType': 'ng-value', 'searchable': true , "defaultContent": "" },
337341
{ 'orderDataType': 'ng-value', 'searchable': true , "defaultContent": "" },
338342
{ 'orderDataType': 'ng-value', 'searchable': true , "defaultContent": ""},
339343
{ 'orderDataType': 'ng-value', 'type': 'num' , "defaultContent": 0},
@@ -342,7 +346,22 @@
342346
{ 'type': 'num' , "defaultContent": 0},
343347
{ 'orderDataType': 'ng-value', 'type': 'num' , "defaultContent": 0},
344348
{ 'type': 'string' , "defaultContent": ""}
345-
]});
349+
],
350+
initComplete: function () {
351+
var column = this.api().column([0]);
352+
var select = $('<select class="datanodestatus form-control input-sm"><option value="">All</option></select>')
353+
.appendTo('#datanodefilter')
354+
.on('change', function () {
355+
var val = $.fn.dataTable.util.escapeRegex(
356+
$(this).val());
357+
column.search(val ? '^' + val + '$' : '', true, false).draw();
358+
});
359+
console.log(select);
360+
column.data().unique().sort().each(function (d, j) {
361+
select.append('<option value="' + d + '">' + d + '</option>');
362+
});
363+
}
364+
});
346365
renderHistogram(data);
347366
$('#ui-tabs a[href="#tab-datanode"]').tab('show');
348367
});
@@ -469,4 +488,4 @@ function open_hostip_list(x0, x1) {
469488
function close_hostip_list() {
470489
$("#datanode_ips").remove();
471490
$("#close_ips").remove();
472-
}
491+
}

hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/hadoop.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,13 @@ header.bs-docs-nav, header.bs-docs-nav .navbar-brand {
314314
left: 75px;
315315
}
316316

317+
.datanodestatus{
318+
width:75px;
319+
height:30px;
320+
color: #555;
321+
display: inline-block;
322+
}
323+
317324
.bar rect {
318325
fill: #5FA33F;
319326
}

0 commit comments

Comments
 (0)