YARN-7464. Introduce filters in Nodes page of new YARN UI. Contributed by Vasudevan Skm.

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-nodes-status.js

@@ -0,0 +1,36 @@
+/**
+ * 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 Ember from 'ember';
+
+export default Ember.Controller.extend({
+  needReload: true,
+  selectedQueue: undefined,
+
+  breadcrumbs: [{
+    text: "Home",
+    routeName: 'application'
+  }, {
+    text: "Nodes",
+    routeName: 'yarn-nodes.table',
+  }, {
+    text: "Node status",
+    routeName: 'yarn-nodes-status',
+  }]
+
+});

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-nodes/table.js

@@ -29,6 +29,10 @@ export default Ember.Controller.extend({
     sortOrder: Ember.computed.alias('tableDefinition.sortOrder'),
     pageNum: Ember.computed.alias('tableDefinition.pageNum'),
     rowCount: Ember.computed.alias('tableDefinition.rowCount'),
+    tableDefinition: TableDefinition.create({
+        enableFaceting: true,
+        rowCount: 25
+    }),
     columns: function() {
         var colums = [];
         colums.push({
@@ -40,6 +44,7 @@ export default Ember.Controller.extend({
             id: 'rack',
             headerTitle: 'Rack',
             contentPath: 'rack',
+            facetType: null,
             minWidth: "100px"
         }, {
             id: 'state',
@@ -51,12 +56,14 @@ export default Ember.Controller.extend({
             id: 'address',
             headerTitle: 'Node Address',
             contentPath: 'id',
-            minWidth: "300px"
+            minWidth: "300px",
+            facetType: null,
         }, {
             id: 'nodeId',
             headerTitle: 'Node HTTP Address',
             contentPath: 'nodeHTTPAddress',
             cellComponentName: 'em-table-linked-cell',
+            facetType: null,
             getCellContent: function(row) {
               var node_id = row.get("id"),
                   node_addr = row.get("nodeHTTPAddress"),
@@ -76,10 +83,12 @@ export default Ember.Controller.extend({
             id: 'containers',
             headerTitle: 'Containers',
             contentPath: 'numContainers',
+            facetType: null,
         }, {
             id: 'memUsed',
             headerTitle: 'Mem Used',
             contentPath: 'usedMemoryBytes',
+            facetType: null,
             cellDefinition: {
               type: "memory"
             }
@@ -87,6 +96,7 @@ export default Ember.Controller.extend({
             id: 'memAvail',
             headerTitle: 'Mem Available',
             contentPath: 'availMemoryBytes',
+            facetType: null,
             cellDefinition: {
               type: "memory"
             }
@@ -94,22 +104,27 @@ export default Ember.Controller.extend({
             id: 'coresUsed',
             headerTitle: 'VCores Used',
             contentPath: 'usedVirtualCores',
+            facetType: null,
         }, {
             id: 'coresAvail',
             headerTitle: 'VCores Available',
             contentPath: 'availableVirtualCores',
+            facetType: null,
         }, {
             id: 'healthUpdate',
             headerTitle: 'Last Health Update',
             contentPath: 'lastHealthUpdate',
+            facetType: null,
         }, {
             id: 'healthReport',
             headerTitle: 'Health-Report',
             contentPath: 'healthReport',
+            facetType: null,
         }, {
             id: 'version',
             headerTitle: 'Version',
             contentPath: 'version',
+            facetType: null,
             observePath: true
         });
         return ColumnDef.make(colums);

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-rm-node.js

@@ -35,7 +35,7 @@ export default DS.Model.extend({
 
   nodeLabelsAsString: function() {
     var labels = this.get("nodeLabels");
-    var labelToReturn = "";
+    var labelToReturn = "default";
     // Only one label per node supported.
     if (labels && labels.length > 0) {
       labelToReturn = labels[0];

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/router.js

@@ -31,6 +31,7 @@ Router.map(function() {
   this.route('yarn-nodes', function(){
     this.route('table');
     this.route('heatmap');
+    this.route('status');
   });
   this.route('yarn-queue', {path: '/yarn-queue/:queue_name'}, function() {
     this.route('info');

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/nodes-heatmap.hbs

@@ -16,15 +16,13 @@
  * limitations under the License.
 }}
 
-<div class="container-fluid">
+<div class="row clearfix">
-  <div class="row">
+  <div class="col-md-6">
-    <div class="col-md-6 container-fluid">
     <input type="text" class="form-control" aria-label="..." placeholder="Enter part of host/rack to filter nodes"
             onchange={{action "applyFilter"}}>
   </div>
-    <div class="col-md-6 container-fluid">
+  <div class="col-md-6">
     <select id="heatmap-select" class="form-control"></select>
   </div>
 </div>
-</div>
 <p/>

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes.hbs

@@ -15,56 +15,35 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 --}}
-
 {{breadcrumb-bar breadcrumbs=breadcrumbs}}
-
 <div class="row">
-  <div class="col-md-2 container-fluid">
+  <div class="container-fluid">
     <div class="panel panel-default">
       <div class="panel-heading">
-        <h4>Nodes</h4>
+        <div class="clearfix">
-      </div>
+          <ul class="nav nav-pills">
-      <div class="panel-body">
+            <ul class="nav nav-pills collapse in">
-        <ul class="nav nav-pills nav-stacked" id="stacked-menu">
-          <ul class="nav nav-pills nav-stacked collapse in">
-
               {{#link-to "yarn-nodes.table" tagName="li"}}
                 {{#link-to 'yarn-nodes.table'}}Information
                 {{/link-to}}
               {{/link-to}}
 
+              {{#link-to 'yarn-nodes.status' tagName="li"}}
+                {{#link-to 'yarn-nodes.status'}}Node Status
+                {{/link-to}}
+              {{/link-to}}
+
               {{#link-to 'yarn-nodes.heatmap' tagName="li"}}
                 {{#link-to 'yarn-nodes.heatmap'}}Nodes Heatmap Chart
                 {{/link-to}}
               {{/link-to}}
-
             </ul>
           </ul>
         </div>
       </div>
-  </div>
+      <div class="panel-body">
-
-  <div class="col-md-10 container-fluid">
-    {{#if model.clusterMetrics}}
-      <div class="row">
-        <div class="col-lg-6 container-fluid">
-          <div class="panel panel-default">
-            <div class="panel-heading">
-              Node Managers
-            </div>
-            <div class="container-fluid" id="nodes-donut-chart">
-              {{donut-chart data=model.clusterMetrics.firstObject.getNodesDataForDonutChart
-              showLabels=true
-              parentId="nodes-donut-chart"
-              ratio=0.6
-              maxHeight=350
-              colorTargets="good error warn"}}
-            </div>
-          </div>
-        </div>
-      </div>
-    {{/if}}
-
         {{outlet}}
       </div>
     </div>
+  </div>
+</div>

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes/heatmap.hbs

@@ -15,15 +15,11 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 --}}
-
 {{#if model.nodes}}
-
+  <div id="nodes-heatmap-chart">
-  <div class="row">
-    <div class="col-lg-12 container-fluid" id="nodes-heatmap-chart">
     {{nodes-heatmap model=model.nodes parentId="nodes-heatmap-chart"
       title="Node Heatmap Chart (Usage of "}}
   </div>
-  </div>
 
 {{/if}}
 

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes/status.hbs

@@ -0,0 +1,35 @@
+{{!--
+  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.
+--}}
+
+{{#if model.clusterMetrics}}
+<div class="row clearfix">
+  <div class="col-lg-6">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Node Managers
+      </div>
+      <div class="container-fluid" id="nodes-donut-chart">
+        {{donut-chart data=model.clusterMetrics.firstObject.getNodesDataForDonutChart showLabels=true parentId="nodes-donut-chart"
+        ratio=0.6 maxHeight=350 colorTargets="good error warn"}}
+      </div>
+    </div>
+  </div>
+</div>
+{{/if}}
+
+{{outlet}}

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes/table.hbs

@@ -15,8 +15,8 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 --}}
-<div class="row">
+<div class="row clearfix">
-  <div class="col-md-12">
+  <div class="col-md-12 yarn-applications-container">
     {{#if model.nodes}}
       {{em-table columns=columns rows=model.nodes definition=tableDefinition}}
     {{else}}