AMBARI-949. Provide metric graphs for individual hosts. (Srimanth Gunturi via yusaku)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/branches/AMBARI-666@1406455 13f79535-47bb-0310-9956-ffa450edef68

AMBARI-666-CHANGES.txt

@@ -12,6 +12,9 @@ AMBARI-666 branch (unreleased changes)
 
   NEW FEATURES
 
+  AMBARI-949. Provide metric graphs for individual hosts. (Srimanth
+  Gunturi via yusaku)
+
   AMBARI-948. Invoke service starts after services are installed in the
   wizard. (yusaku)
 

ambari-web/app/assets/data/hosts/metrics/cpu.json

@@ -0,0 +1,23 @@
+{
+  "href" : "http://ambari/clusters/mycluster/hosts/hostname?fields=metrics/cpu/cpu_user[1351621554,1351625154,60],metrics/cpu/cpu_wio[1351621554,1351625154,60],metrics/cpu/cpu_nice[1351621554,1351625154,60],metrics/cpu/cpu_aidle[1351621554,1351625154,60],metrics/cpu/cpu_system[1351621554,1351625154,60],metrics/cpu/cpu_idle[1351621554,1351625154,60]",
+  "metrics" : {
+    "cpu" : {
+      "cpu_wio" : "[[0.21944444444,1351621800],[0.25416666667,1351622160],[0.17638888889,1351622520],[0.19472222222,1351622880],[0.22388888889,1351623240],[0.22638888889,1351623600],[0.093611111111,1351623960],[0.18555555556,1351624320],[0.15083333333,1351624680],[0.16583333333,1351625040],[0.0,1351625400]]",
+      "cpu_idle" : "[[57.459722222,1351621800],[55.233611111,1351622160],[50.290277778,1351622520],[49.941666667,1351622880],[49.392222222,1351623240],[47.776111111,1351623600],[46.941388889,1351623960],[44.761388889,1351624320],[42.887222222,1351624680],[42.725,1351625040],[40.239722222,1351625400]]",
+      "cpu_nice" : "[[0.0,1351621800],[0.0,1351622160],[0.0,1351622520],[0.0,1351622880],[0.0,1351623240],[0.0,1351623600],[0.0,1351623960],[0.0,1351624320],[0.0,1351624680],[0.0,1351625040],[0.0,1351625400]]",
+      "cpu_aidle" : "[[0.0,1351621800],[0.0,1351622160],[0.0,1351622520],[0.0,1351622880],[0.0,1351623240],[0.0,1351623600],[0.0,1351623960],[0.0,1351624320],[0.0,1351624680],[0.0,1351625040],[0.0,1351625400]]",
+      "cpu_system" : "[[4.8736111111,1351621800],[4.9991666667,1351622160],[5.89,1351622520],[5.5513888889,1351622880],[5.5730555556,1351623240],[5.5986111111,1351623600],[5.6897222222,1351623960],[5.8952777778,1351624320],[5.945,1351624680],[5.9422222222,1351625040],[6.4375,1351625400]]",
+      "cpu_user" : "[[37.468611111,1351621800],[39.5175,1351622160],[43.655277778,1351622520],[44.28,1351622880],[44.819444444,1351623240],[46.390833333,1351623600],[47.281111111,1351623960],[49.155555556,1351624320],[51.017222222,1351624680],[51.175277778,1351625040],[53.183333333,1351625400]]"
+    }
+  },
+  "Hosts" : {
+    "cluster_name" : "mycluster",
+    "cpu_count" : "2",
+    "total_mem" : "7466",
+    "os_arch" : "x86_64",
+    "attributes" : "{\"publicFQDN\":\"ambari\",\"privateFQDN\":\"hostname\"}",
+    "host_name" : "hostname",
+    "os_type" : "redhatenterpriselinuxserver6",
+    "ip" : "10.38.5.128"
+  }
+}

ambari-web/app/assets/data/hosts/metrics/disk.json

@@ -0,0 +1,20 @@
+{
+  "href" : "http://ambari/clusters/mycluster/hosts/hostname?fields=metrics/disk/disk_total[1351621554,1351625154,60],metrics/disk/part_max_used[1351621554,1351625154,60],metrics/disk/disk_free[1351621554,1351625154,60]",
+  "metrics" : {
+    "disk" : {
+      "disk_total" : "[[893.765,1351621800],[893.765,1351622160],[893.765,1351622520],[893.765,1351622880],[893.765,1351623240],[893.765,1351623600],[893.765,1351623960],[893.765,1351624320],[893.765,1351624680],[893.765,1351625040],[893.765,1351625400]]",
+      "disk_free" : "[[842.89862778,1351621800],[842.898,1351622160],[842.89763333,1351622520],[842.89668333,1351622880],[842.89650278,1351623240],[842.89563333,1351623600],[842.895,1351623960],[842.89460278,1351624320],[842.89400556,1351624680],[842.89364444,1351625040],[842.89263333,1351625400]]",
+      "part_max_used" : "[[86.8,1351621800],[86.8,1351622160],[86.8,1351622520],[86.8,1351622880],[86.8,1351623240],[86.850277778,1351623600],[86.85,1351623960],[86.889444444,1351624320],[86.9,1351624680],[86.9,1351625040],[86.9,1351625400]]"
+    }
+  },
+  "Hosts" : {
+    "cluster_name" : "mycluster",
+    "cpu_count" : "2",
+    "total_mem" : "7466",
+    "os_arch" : "x86_64",
+    "attributes" : "{\"publicFQDN\":\"ambari\",\"privateFQDN\":\"hostname\"}",
+    "host_name" : "hostname",
+    "os_type" : "redhatenterpriselinuxserver6",
+    "ip" : "10.38.5.128"
+  }
+}

ambari-web/app/assets/data/hosts/metrics/load.json

@@ -0,0 +1,20 @@
+{
+  "href" : "http://ambari/clusters/mycluster/hosts/hostname?fields=metrics/load/load_fifteen[1351621554,1351625154,60],metrics/load/load_one[1351621554,1351625154,60],metrics/load/load_five[1351621554,1351625154,60]",
+  "metrics" : {
+    "load" : {
+      "load_fifteen" : "[[3.5136666667,1351621800],[3.7444166667,1351622160],[3.7896666667,1351622520],[3.7719166667,1351622880],[3.8913333333,1351623240],[3.9593611111,1351623600],[3.8402222222,1351623960],[3.8458888889,1351624320],[3.9601388889,1351624680],[4.1802222222,1351625040],[4.02225,1351625400]]",
+      "load_one" : "[[4.7221944444,1351621800],[4.0629166667,1351622160],[3.822,1351622520],[3.9615,1351622880],[4.5276111111,1351623240],[3.6452222222,1351623600],[4.3615,1351623960],[4.0596666667,1351624320],[4.7445277778,1351624680],[4.4509444444,1351625040],[3.7785555556,1351625400]]",
+      "load_five" : "[[4.05075,1351621800],[4.1552222222,1351622160],[3.9908888889,1351622520],[3.8535833333,1351622880],[4.1159722222,1351623240],[4.0588888889,1351623600],[3.82425,1351623960],[3.9144444444,1351624320],[4.2187222222,1351624680],[4.5194166667,1351625040],[3.9673611111,1351625400]]"
+    }
+  },
+  "Hosts" : {
+    "cluster_name" : "mycluster",
+    "cpu_count" : "2",
+    "total_mem" : "7466",
+    "os_arch" : "x86_64",
+    "attributes" : "{\"publicFQDN\":\"ambari\",\"privateFQDN\":\"hostname\"}",
+    "host_name" : "hostname",
+    "os_type" : "redhatenterpriselinuxserver6",
+    "ip" : "10.38.5.128"
+  }
+}

ambari-web/app/assets/data/hosts/metrics/memory.json

@@ -0,0 +1,22 @@
+{
+  "href" : "http://ambari/clusters/mycluster/hosts/hostname?fields=metrics/memory/swap_free[1351621554,1351625154,60],metrics/memory/mem_total[1351621554,1351625154,60],metrics/memory/mem_free[1351621554,1351625154,60],metrics/memory/mem_cached[1351621554,1351625154,60],metrics/memory/mem_buffers[1351621554,1351625154,60]",
+  "metrics" : {
+    "memory" : {
+      "mem_total" : "[[7646152.0,1351621800],[7646152.0,1351622160],[7646152.0,1351622520],[7646152.0,1351622880],[7646152.0,1351623240],[7646152.0,1351623600],[7646152.0,1351623960],[7646152.0,1351624320],[7646152.0,1351624680],[7646152.0,1351625040],[7646152.0,1351625400]]",
+      "swap_free" : "[[0.0,1351621800],[0.0,1351622160],[0.0,1351622520],[0.0,1351622880],[0.0,1351623240],[0.0,1351623600],[0.0,1351623960],[0.0,1351624320],[0.0,1351624680],[0.0,1351625040],[0.0,1351625400]]",
+      "mem_buffers" : "[[228805.27778,1351621800],[228811.94444,1351622160],[228818.91111,1351622520],[228822.58889,1351622880],[228826.24444,1351623240],[228835.45556,1351623600],[228840.68889,1351623960],[228846.57778,1351624320],[228849.25556,1351624680],[228852.0,1351625040],[228859.23333,1351625400]]",
+      "mem_free" : "[[557190.06667,1351621800],[555238.24444,1351622160],[550594.85556,1351622520],[542883.0,1351622880],[548554.16667,1351623240],[544108.65556,1351623600],[540337.38889,1351623960],[539002.24444,1351624320],[540715.05556,1351624680],[537260.6,1351625040],[541950.46667,1351625400]]",
+      "mem_cached" : "[[3517800.5889,1351621800],[3518418.1,1351622160],[3519044.5,1351622520],[3519685.8,1351622880],[3520154.1222,1351623240],[3520744.7444,1351623600],[3521340.8333,1351623960],[3521865.1556,1351624320],[3522396.0556,1351624680],[3522936.7,1351625040],[3523384.7222,1351625400]]"
+    }
+  },
+  "Hosts" : {
+    "cluster_name" : "mycluster",
+    "cpu_count" : "2",
+    "total_mem" : "7466",
+    "os_arch" : "x86_64",
+    "attributes" : "{\"publicFQDN\":\"ambari\",\"privateFQDN\":\"hostname\"}",
+    "host_name" : "hostname",
+    "os_type" : "redhatenterpriselinuxserver6",
+    "ip" : "10.38.5.128"
+  }
+}

ambari-web/app/assets/data/hosts/metrics/network.json

@@ -0,0 +1,21 @@
+{
+  "href" : "http://ambari/clusters/mycluster/hosts/hostname?fields=metrics/network/bytes_in[1351621554,1351625154,60],metrics/network/bytes_out[1351621554,1351625154,60],metrics/network/pkts_in[1351621554,1351625154,60],metrics/network/pkts_out[1351621554,1351625154,60]",
+  "metrics" : {
+    "network" : {
+      "bytes_in" : "[[368.36444444,1351621800],[332.40305556,1351622160],[354.20283333,1351622520],[349.55169444,1351622880],[343.27902778,1351623240],[366.97422222,1351623600],[333.27402778,1351623960],[360.01791667,1351624320],[354.37855556,1351624680],[347.01991667,1351625040],[366.68930556,1351625400]]",
+      "bytes_out" : "[[301.76044444,1351621800],[262.66875,1351622160],[281.7565,1351622520],[275.83197222,1351622880],[271.15458333,1351623240],[289.79577778,1351623600],[262.87319444,1351623960],[284.01583333,1351624320],[279.33888889,1351624680],[273.75552778,1351625040],[289.47902778,1351625400]]",
+      "pkts_in" : "[[3.3466666667,1351621800],[3.0370833333,1351622160],[3.2433333333,1351622520],[3.18625,1351622880],[3.1458333333,1351623240],[3.3453333333,1351623600],[3.04125,1351623960],[3.2750833333,1351624320],[3.2223333333,1351624680],[3.1640277778,1351625040],[3.33875,1351625400]]",
+      "pkts_out" : "[[3.3466666667,1351621800],[3.0416666667,1351622160],[3.2638333333,1351622520],[3.18625,1351622880],[3.1458333333,1351623240],[3.3453333333,1351623600],[3.04125,1351623960],[3.2750833333,1351624320],[3.2223333333,1351624680],[3.1640277778,1351625040],[3.33875,1351625400]]"
+    }
+  },
+  "Hosts" : {
+    "cluster_name" : "mycluster",
+    "cpu_count" : "2",
+    "total_mem" : "7466",
+    "os_arch" : "x86_64",
+    "attributes" : "{\"publicFQDN\":\"ambari\",\"privateFQDN\":\"hostname\"}",
+    "host_name" : "hostname",
+    "os_type" : "redhatenterpriselinuxserver6",
+    "ip" : "10.38.5.128"
+  }
+}

ambari-web/app/assets/data/hosts/metrics/processes.json

@@ -0,0 +1,19 @@
+{
+  "href" : "http://ambari/clusters/mycluster/hosts/hostname?fields=metrics/processes/proc_total[1351621554,1351625154,60],metrics/processes/proc_run[1351621554,1351625154,60]",
+  "metrics" : {
+    "processes" : {
+      "proc_total" : "[[985.57777778,1351621800],[985.52777778,1351622160],[984.69722222,1351622520],[988.78055556,1351622880],[991.69166667,1351623240],[988.18055556,1351623600],[991.85,1351623960],[984.95277778,1351624320],[995.00277778,1351624680],[988.76666667,1351625040],[991.76388889,1351625400]]",
+      "proc_run" : "[[4.3805555556,1351621800],[0.19444444444,1351622160],[0.63055555556,1351622520],[4.0527777778,1351622880],[2.9166666667,1351623240],[9.7111111111,1351623600],[7.8888888889,1351623960],[2.6333333333,1351624320],[12.302777778,1351624680],[8.4944444444,1351625040],[7.5694444444,1351625400]]"
+    }
+  },
+  "Hosts" : {
+    "cluster_name" : "mycluster",
+    "cpu_count" : "2",
+    "total_mem" : "7466",
+    "os_arch" : "x86_64",
+    "attributes" : "{\"publicFQDN\":\"ambari\",\"privateFQDN\":\"hostname\"}",
+    "host_name" : "hostname",
+    "os_type" : "redhatenterpriselinuxserver6",
+    "ip" : "10.38.5.128"
+  }
+}

ambari-web/app/styles/application.less

@@ -931,6 +931,19 @@ a:focus {
       margin-left: 100px;
       line-height: 20px;
     }
+    .host-metrics{
+      [class*="span"] {
+        float: left;
+        margin-left: 10px;
+      }
+      .chart-container {
+        .chart-x-axis {
+          left: 30%;
+          width: 40%;
+        }
+      }
+    }
+    
     .host-components {
       padding: 10px;
       padding-bottom: 0;

ambari-web/app/templates/main/host/metrics.hbs

@@ -15,5 +15,24 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->
-<h5>Host Metrics</h5>
 
+<div class="host-metrics">
+	<div class="span4">
+	  {{view App.ChartHostMetricsCPU}}
+	</div> 
+	<div class="span4">
+	  {{view App.ChartHostMetricsDisk}}
+	</div> 
+	<div class="span4">
+	  {{view App.ChartHostMetricsLoad}}
+	</div> 
+	<div class="span4">
+	  {{view App.ChartHostMetricsMemory}}
+	</div> 
+	<div class="span4">
+	  {{view App.ChartHostMetricsNetwork}}
+	</div> 
+	<div class="span4">
+	  {{view App.ChartHostMetricsProcesses}}
+	</div> 
+</div>

ambari-web/app/templates/main/host/summary.hbs

@@ -17,15 +17,22 @@
 -->
 <div class="row">
   <div class="span5 host-configuration">
-    <dl class="dl-horizontal">
-      <dt>IP:</dt><dd>{{view.content.ip}}</dd>
-      <dt>CPU:</dt><dd>{{view.content.cpu}}</dd>
-      <dt>OS:</dt><dd>type</dd>
-      <dt>Disk Usage:</dt><dd>{{view.content.diskUsage}}</dd>
-      <dt>Memory:</dt><dd>{{view.content.memory}}</dd>
-      <dt>Load Avg:</dt><dd>{{view.content.loadAvg}}</dd>
-      <dt>Agent:</dt><dd>running</dd>
-    </dl>
+    <div class="box">
+		  <div class="box-header">
+		    <h4>Summary</h4>
+		  </div>
+		  <div class="host-summary-content">
+		    <dl class="dl-horizontal">
+		      <dt>IP:</dt><dd>{{view.content.ip}}</dd>
+		      <dt>CPU:</dt><dd>{{view.content.cpu}}</dd>
+		      <dt>OS:</dt><dd>type</dd>
+		      <dt>Disk Usage:</dt><dd>{{view.content.diskUsage}}</dd>
+		      <dt>Memory:</dt><dd>{{view.content.memory}}</dd>
+		      <dt>Load Avg:</dt><dd>{{view.content.loadAvg}}</dd>
+		      <dt>Agent:</dt><dd>running</dd>
+		    </dl>
+		  </div>
+	  </div>
   </div>
   {{#if view.content.components.length}}
   <div class="span3 host-components pull-right">
@@ -67,8 +74,15 @@
   </div>
   {{/if}}
 </div>
-<div class="row">
-  <div class="span5 host-configuration">
-    {{view App.MainHostMetricsView}}
+<div class="row-fluid">
+  <div class="span12">
+    <div class="box">
+      <div class="box-header">
+        <h4>Host Metrics</h4>
+      </div>
+      <div class="row-fluid">
+	     {{view App.MainHostMetricsView}}
+	    </div>
+	  </div>
   </div>
 </div>

ambari-web/app/views.js

@@ -41,6 +41,12 @@ require('views/main/host/summary');
 require('views/main/host/metrics');
 require('views/main/host/audit');
 require('views/main/host/add_view');
+require('views/main/host/metrics/cpu');
+require('views/main/host/metrics/disk');
+require('views/main/host/metrics/load');
+require('views/main/host/metrics/memory');
+require('views/main/host/metrics/network');
+require('views/main/host/metrics/processes');
 require('views/main/admin');
 require('views/main/admin/advanced');
 require('views/main/admin/advanced/password');

ambari-web/app/views/common/chart/linear_time.js

@@ -112,9 +112,40 @@ App.ChartLinearTimeView = Ember.View
           hash.contentType = 'application/json; charset=utf-8';
           hash.context = this;
           hash.success = this._refreshGraph;
+          hash.error = function(xhr, textStatus, errorThrown){
+            this._showMessage('warn', 'Error', 'There was a problem getting data for the chart ('+textStatus+': '+errorThrown+')');
+          }
           jQuery.ajax(hash);
         }
       },
+      
+      /**
+       * Shows a yellow warning message in place of the chart.
+       * 
+       * @param type  Can be any of 'warn', 'error', 'info', 'success'
+       * @param title Bolded title for the message
+       * @param message String representing the message
+       * @type: Function
+       */
+      _showMessage: function(type, title, message){
+        var chartOverlayId = '#' + this.id + '-chart';
+        var typeClass;
+        switch (type) {
+          case 'error':
+            typeClass = 'alert-error';
+            break;
+          case 'success':
+            typeClass = 'alert-success';
+            break;
+          case 'info':
+            typeClass = 'alert-info';
+            break;
+          default:
+            typeClass = '';
+            break;
+        }
+        $(chartOverlayId).append('<div class=\"alert '+typeClass+'\"><strong>'+title+'</strong> '+message+'</div>');
+      },
 
       /**
        * Transforms the JSON data retrieved from the server into the series
@@ -177,7 +208,7 @@ App.ChartLinearTimeView = Ember.View
        */
       _refreshGraph: function (jsonData) {
         var seriesData = this.transformToSeries(jsonData);
-        if (seriesData instanceof Array) {
+        if (seriesData instanceof Array && seriesData.length>0) {
           var palette = new Rickshaw.Color.Palette({
             scheme: this._paletteScheme
           });
@@ -185,67 +216,69 @@ App.ChartLinearTimeView = Ember.View
             series.color = this.colorForSeries(series) || palette.color();
             series.stroke = 'rgba(0,0,0,0.3)';
           }.bind(this));
-        }
-        if (this._graph == null) {
-          var chartId = "#" + this.id + "-chart";
-          var chartOverlayId = "#" + this.id + "-overlay";
-          var xaxisElementId = "#" + this.id + "-xaxis";
-          var yaxisElementId = "#" + this.id + "-yaxis";
-          var chartElement = document.querySelector(chartId);
-          var overlayElement = document.querySelector(chartOverlayId);
-          var xaxisElement = document.querySelector(xaxisElementId);
-          var yaxisElement = document.querySelector(yaxisElementId);
+          
+          if (this._graph == null) {
+            var chartId = "#" + this.id + "-chart";
+            var chartOverlayId = "#" + this.id + "-overlay";
+            var xaxisElementId = "#" + this.id + "-xaxis";
+            var yaxisElementId = "#" + this.id + "-yaxis";
+            var chartElement = document.querySelector(chartId);
+            var overlayElement = document.querySelector(chartOverlayId);
+            var xaxisElement = document.querySelector(xaxisElementId);
+            var yaxisElement = document.querySelector(yaxisElementId);
 
-          this._graph = new Rickshaw.Graph({
-            height: 150,
-            element: chartElement,
-            series: seriesData,
-            interpolation: 'step-after',
-            stroke: true,
-            renderer: 'area',
-            strokeWidth: 1
-          });
-          this._graph.renderer.unstack = true;
+            this._graph = new Rickshaw.Graph({
+              height: 150,
+              element: chartElement,
+              series: seriesData,
+              interpolation: 'step-after',
+              stroke: true,
+              renderer: 'area',
+              strokeWidth: 1
+            });
+            this._graph.renderer.unstack = true;
 
-          xAxis = new Rickshaw.Graph.Axis.Time({
-            graph: this._graph
-          });
-          yAxis = new Rickshaw.Graph.Axis.Y({
-            tickFormat: this.yAxisFormatter,
-            element: yaxisElement,
-            graph: this._graph
-          });
+            xAxis = new Rickshaw.Graph.Axis.Time({
+              graph: this._graph
+            });
+            yAxis = new Rickshaw.Graph.Axis.Y({
+              tickFormat: this.yAxisFormatter,
+              element: yaxisElement,
+              graph: this._graph
+            });
 
-          overlayElement.addEventListener('mousemove', function () {
-            $(xaxisElement).removeClass('hide');
-            $(yaxisElement).removeClass('hide');
-            $(chartElement).children("div").removeClass('hide');
-          });
-          overlayElement.addEventListener('mouseout', function () {
-            $(xaxisElement).addClass('hide');
-            $(yaxisElement).addClass('hide');
-            $(chartElement).children("div").addClass('hide');
-          });
-          // Hide axes
-          this._graph.onUpdate(function () {
-            $(xaxisElement).addClass('hide');
-            $(yaxisElement).addClass('hide');
-            $(chartElement).children('div').addClass('hide');
-          });
+            overlayElement.addEventListener('mousemove', function () {
+              $(xaxisElement).removeClass('hide');
+              $(yaxisElement).removeClass('hide');
+              $(chartElement).children("div").removeClass('hide');
+            });
+            overlayElement.addEventListener('mouseout', function () {
+              $(xaxisElement).addClass('hide');
+              $(yaxisElement).addClass('hide');
+              $(chartElement).children("div").addClass('hide');
+            });
+            // Hide axes
+            this._graph.onUpdate(function () {
+              $(xaxisElement).addClass('hide');
+              $(yaxisElement).addClass('hide');
+              $(chartElement).children('div').addClass('hide');
+            });
 
-          new Rickshaw.Graph.Legend({
-            graph: this._graph,
-            element: xaxisElement
-          });
+            new Rickshaw.Graph.Legend({
+              graph: this._graph,
+              element: xaxisElement
+            });
 
-          // The below code will be needed if we ever use curve
-          // smoothing in our graphs. (see rickshaw defect below)
-          // this._graph.onUpdate(jQuery.proxy(function () {
-          // this._adjustSVGHeight();
-          // }, this));
+            // The below code will be needed if we ever use curve
+            // smoothing in our graphs. (see rickshaw defect below)
+            // this._graph.onUpdate(jQuery.proxy(function () {
+            // this._adjustSVGHeight();
+            // }, this));
+          }
+          this._graph.render();
+        }else{
+          this._showMessage('info', 'No Data', 'There was no data available.');
         }
-        this._graph.render();
-
       },
 
       /**

ambari-web/app/views/main/host/metrics/cpu.js

@@ -0,0 +1,91 @@
+/**
+ * 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.
+ */
+
+var App = require('app');
+
+/**
+ * @class
+ * 
+ * This is a view for showing Host CPU metrics
+ * 
+ * @extends App.ChartLinearTimeView
+ * @extends Ember.Object
+ * @extends Ember.View
+ */
+App.ChartHostMetricsCPU = App.ChartLinearTimeView.extend({
+  id: "host-metrics-cpu",
+  url: "/data/hosts/metrics/cpu.json",
+  title: "CPU Usage",
+  yAxisFormatter: App.ChartLinearTimeView.PercentageFormatter,
+  
+  transformToSeries: function (jsonData) {
+    var seriesArray = [];
+    if (jsonData && jsonData.metrics && jsonData.metrics.cpu) {
+      for ( var name in jsonData.metrics.cpu) {
+        var displayName;
+        var seriesData = jsonData.metrics.cpu[name];
+        switch (name) {
+          case "cpu_wio":
+            displayName = "CPU I/O Idle";
+            break;
+          case "cpu_idle":
+            displayName = "CPU Idle";
+            break;
+          case "cpu_nice":
+            displayName = "CPU Nice";
+            break;
+          case "cpu_aidle":
+            displayName = "CPU Boot Idle";
+            break;
+          case "cpu_system":
+            displayName = "CPU System";
+            break;
+          case "cpu_user":
+            displayName = "CPU User";
+            break;
+          default:
+            break;
+        }
+        if (seriesData) {
+          // Is it a string?
+          if ("string" == typeof seriesData) {
+            seriesData = JSON.parse(seriesData);
+          }
+          // We have valid data
+          var series = {};
+          series.name = displayName;
+          series.data = [];
+          for ( var index = 0; index < seriesData.length; index++) {
+            series.data.push({
+              x: seriesData[index][1],
+              y: seriesData[index][0]
+            });
+          }
+          seriesArray.push(series);
+        }
+      }
+    }
+    return seriesArray;
+  },
+  
+  colorForSeries: function (series) {
+    if ("Idle" == series.name){
+      return 'rgba(255,255,255,1)';
+    }
+    return null;
+  }
+});

ambari-web/app/views/main/host/metrics/disk.js

@@ -0,0 +1,76 @@
+/**
+ * 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.
+ */
+
+var App = require('app');
+
+/**
+ * @class
+ * 
+ * This is a view for showing host disk usage
+ * 
+ * @extends App.ChartLinearTimeView
+ * @extends Ember.Object
+ * @extends Ember.View
+ */
+App.ChartHostMetricsDisk = App.ChartLinearTimeView.extend({
+  id: "host-metrics-disk",
+  url : "/data/hosts/metrics/disk.json",
+  title: "Disk Usage",
+  yAxisFormatter: App.ChartLinearTimeView.BytesFormatter,
+  
+  transformToSeries : function (jsonData) {
+    var seriesArray = [];
+    if (jsonData && jsonData.metrics && jsonData.metrics.disk) {
+      for ( var name in jsonData.metrics.disk) {
+        var displayName;
+        var seriesData = jsonData.metrics.disk[name];
+        switch (name) {
+          case "disk_total":
+            displayName = "Total";
+            break;
+          case "disk_free":
+            displayName = "Free";
+            break;
+          case "part_max_used":
+            displayName = "Maximum Used";
+            break;
+          default:
+            break;
+        }
+        if (seriesData) {
+          // Is it a string?
+          if ("string" == typeof seriesData) {
+            seriesData = JSON.parse(seriesData);
+          }
+          // We have valid data
+          var series = {};
+          series.name = displayName;
+          series.data = [];
+          for ( var index = 0; index < seriesData.length; index++) {
+            series.data.push({
+              x: seriesData[index][1],
+              y: seriesData[index][0]
+            });
+          }
+          seriesArray.push(series);
+        }
+      }
+    }
+    return seriesArray;
+  }
+});

ambari-web/app/views/main/host/metrics/load.js

@@ -0,0 +1,75 @@
+/**
+ * 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.
+ */
+
+var App = require('app');
+
+/**
+ * @class
+ * 
+ * This is a view for showing host load
+ * 
+ * @extends App.ChartLinearTimeView
+ * @extends Ember.Object
+ * @extends Ember.View
+ */
+App.ChartHostMetricsLoad = App.ChartLinearTimeView.extend({
+  id: "host-metrics-load",
+  url: "/data/hosts/metrics/load.json",
+  title: "Load",
+  
+  transformToSeries: function(jsonData){
+    var seriesArray = [];
+    if (jsonData && jsonData.metrics && jsonData.metrics.load) {
+      for ( var name in jsonData.metrics.load) {
+        var displayName;
+        var seriesData = jsonData.metrics.load[name];
+        switch (name) {
+          case "load_fifteen":
+            displayName = "15 Minute Load";
+            break;
+          case "load_one":
+            displayName = "1 Minute Load";
+            break;
+          case "load_five":
+            displayName = "5 Minute Load";
+            break;
+          default:
+            break;
+        }
+        if (seriesData) {
+          // Is it a string?
+          if ("string" == typeof seriesData) {
+            seriesData = JSON.parse(seriesData);
+          }
+          // We have valid data
+          var series = {};
+          series.name = displayName;
+          series.data = [];
+          for ( var index = 0; index < seriesData.length; index++) {
+            series.data.push({
+              x: seriesData[index][1],
+              y: seriesData[index][0]
+            });
+          }
+          seriesArray.push(series);
+        }
+      }
+    }
+    return seriesArray;
+  }
+});

ambari-web/app/views/main/host/metrics/memory.js

@@ -0,0 +1,88 @@
+/**
+ * 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.
+ */
+
+var App = require('app');
+
+/**
+ * @class
+ * 
+ * This is a view for showing host memory metrics
+ * 
+ * @extends App.ChartLinearTimeView
+ * @extends Ember.Object
+ * @extends Ember.View
+ */
+App.ChartHostMetricsMemory = App.ChartLinearTimeView.extend({
+  id: "host-metrics-memory",
+  url: "/data/hosts/metrics/memory.json",
+  title: "Memory Usage",
+  yAxisFormatter: App.ChartLinearTimeView.BytesFormatter,
+  
+  transformToSeries: function (jsonData) {
+    var seriesArray = [];
+    if (jsonData && jsonData.metrics && jsonData.metrics.memory) {
+      for ( var name in jsonData.metrics.memory) {
+        var displayName;
+        var seriesData = jsonData.metrics.memory[name];
+        switch (name) {
+          case "mem_total":
+            displayName = "Total";
+            break;
+          case "swap_free":
+            displayName = "Swap";
+            break;
+          case "mem_buffers":
+            displayName = "Buffers";
+            break;
+          case "mem_free":
+            displayName = "Free";
+            break;
+          case "mem_cached":
+            displayName = "Cached";
+            break;
+          default:
+            break;
+        }
+        if (seriesData) {
+          // Is it a string?
+          if ("string" == typeof seriesData) {
+            seriesData = JSON.parse(seriesData);
+          }
+          // We have valid data
+          var series = {};
+          series.name = displayName;
+          series.data = [];
+          for ( var index = 0; index < seriesData.length; index++) {
+            series.data.push({
+              x: seriesData[index][1],
+              y: seriesData[index][0]
+            });
+          }
+          seriesArray.push(series);
+        }
+      }
+    }
+    return seriesArray;
+  },
+  
+  colorForSeries: function (series) {
+    if("Total"==series.name){
+      return 'rgba(255,255,255,1)';
+    }
+    return null;
+  }
+});

ambari-web/app/views/main/host/metrics/network.js

@@ -0,0 +1,79 @@
+/**
+ * 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.
+ */
+
+var App = require('app');
+
+/**
+ * @class
+ * 
+ * This is a view for showing host network metrics
+ * 
+ * @extends App.ChartLinearTimeView
+ * @extends Ember.Object
+ * @extends Ember.View
+ */
+App.ChartHostMetricsNetwork = App.ChartLinearTimeView.extend({
+  id: "host-metrics-network",
+  url : "/data/hosts/metrics/network.json",
+  title: "Network Usage",
+  yAxisFormatter: App.ChartLinearTimeView.BytesFormatter,
+  
+  transformToSeries : function (jsonData) {
+    var seriesArray = [];
+    if (jsonData && jsonData.metrics && jsonData.metrics.network) {
+      for ( var name in jsonData.metrics.network) {
+        var displayName;
+        var seriesData = jsonData.metrics.network[name];
+        switch (name) {
+          case "pkts_out":
+            displayName = "Packets Out";
+            break;
+          case "bytes_in":
+            displayName = "Bytes In";
+            break;
+          case "bytes_out":
+            displayName = "Bytes Out";
+            break;
+          case "pkts_in":
+            displayName = "Packets In";
+            break;
+          default:
+            break;
+        }
+        if (seriesData) {
+          // Is it a string?
+          if ("string" == typeof seriesData) {
+            seriesData = JSON.parse(seriesData);
+          }
+          // We have valid data
+          var series = {};
+          series.name = displayName;
+          series.data = [];
+          for ( var index = 0; index < seriesData.length; index++) {
+            series.data.push({
+              x: seriesData[index][1],
+              y: seriesData[index][0]
+            });
+          }
+          seriesArray.push(series);
+        }
+      }
+    }
+    return seriesArray;
+  }
+});

ambari-web/app/views/main/host/metrics/processes.js

@@ -0,0 +1,72 @@
+/**
+ * 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.
+ */
+
+var App = require('app');
+
+/**
+ * @class
+ * 
+ * This is a view for showing host process counts
+ * 
+ * @extends App.ChartLinearTimeView
+ * @extends Ember.Object
+ * @extends Ember.View
+ */
+App.ChartHostMetricsProcesses = App.ChartLinearTimeView.extend({
+  id: "host-metrics-processes",
+  url: "/data/hosts/metrics/processes.json",
+  title: "Processes",
+  
+  transformToSeries: function(jsonData){
+    var seriesArray = [];
+    if (jsonData && jsonData.metrics && jsonData.metrics.processes) {
+      for ( var name in jsonData.metrics.processes) {
+        var displayName;
+        var seriesData = jsonData.metrics.processes[name];
+        switch (name) {
+          case "proc_total":
+            displayName = "Total Processes";
+            break;
+          case "proc_run":
+            displayName = "Processes Run";
+            break;
+          default:
+            break;
+        }
+        if (seriesData) {
+          // Is it a string?
+          if ("string" == typeof seriesData) {
+            seriesData = JSON.parse(seriesData);
+          }
+          // We have valid data
+          var series = {};
+          series.name = displayName;
+          series.data = [];
+          for ( var index = 0; index < seriesData.length; index++) {
+            series.data.push({
+              x: seriesData[index][1],
+              y: seriesData[index][0]
+            });
+          }
+          seriesArray.push(series);
+        }
+      }
+    }
+    return seriesArray;
+  }
+});