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

2017-11-15 14:02:53 +05:30 · 2017-11-15 14:02:53 +05:30 · 2f379d412b
parent c4c57b80e1
commit 2f379d412b
9 changed files with 123 additions and 63 deletions
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-nodes-status.js
+++ b/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',
+  }]
+
+});
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-nodes/table.js
+++ b/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);
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-rm-node.js
+++ b/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];
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/router.js
+++ b/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');
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/nodes-heatmap.hbs
+++ b/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">
-    <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">
-      <select id="heatmap-select" class="form-control"></select>
-    </div>
+<div class="row clearfix">
+  <div class="col-md-6">
+    <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">
+    <select id="heatmap-select" class="form-control"></select>
  </div>
 </div>
 <p/>
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes.hbs
+++ b/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">
+          <ul class="nav nav-pills">
+            <ul class="nav nav-pills 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 class="panel-body">
-        <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.heatmap' tagName="li"}}
-              {{#link-to 'yarn-nodes.heatmap'}}Nodes Heatmap Chart
-              {{/link-to}}
-            {{/link-to}}
-
-          </ul>
-        </ul>
+        {{outlet}}
      </div>
    </div>
  </div>
-
-  <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>
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes/heatmap.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes/heatmap.hbs
@ -15,14 +15,10 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 --}}
-
 {{#if model.nodes}}
-
-  <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 id="nodes-heatmap-chart">
+    {{nodes-heatmap model=model.nodes parentId="nodes-heatmap-chart"
+      title="Node Heatmap Chart (Usage of "}}
  </div>

 {{/if}}
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes/status.hbs
+++ b/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}}
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes/table.hbs
+++ b/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="col-md-12">
+<div class="row clearfix">
+  <div class="col-md-12 yarn-applications-container">
    {{#if model.nodes}}
      {{em-table columns=columns rows=model.nodes definition=tableDefinition}}
    {{else}}