Home Esplora Aiuto
Registrati Accedi
apache
/
hadoop
mirror da https://github.com/apache/hadoop.git
2
0
Forka 1
File Problemi 0 Wiki
Sfoglia il codice sorgente

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

Surendra Singh Lilhore 5 anni fa
parent
5e156b9dde
commit
76790a1e67
3 ha cambiato i file con 38 aggiunte e 2 eliminazioni
Visualizzazione unificata Mostra Diff Stats
  1. 10 0
      hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.html
  2. 21 2
      hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.js
  3. 7 0
      hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/hadoop.css

+ 10 - 0
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.html
Vedi 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 - 2
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.js
Vedi 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');
 
         });
 
         });
 
@@ -469,4 +488,4 @@ function open_hostip_list(x0, x1) {
 
 function close_hostip_list() {
 
 function close_hostip_list() {
 
   $("#datanode_ips").remove();
 
   $("#datanode_ips").remove();
 
   $("#close_ips").remove();
 
   $("#close_ips").remove();
 
-}
 
+}

+ 7 - 0
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/hadoop.css
Vedi 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;
 
 }
 
 }