AMBARI-916. Provide HDFS metrics graphs in HDFS services page. (Srimanth Gunturi via yusaku)

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

AMBARI-666-CHANGES.txt

@@ -12,6 +12,9 @@ AMBARI-666 branch (unreleased changes)
 
   NEW FEATURES
 
+  AMBARI-916. Provide metrics graphs in HDFS services page. (Srimanth
+  Gunturi via yusaku)
+
   AMBARI-908. Add ui option to either create a Postgres database for Hive
   and Oozie or choose existing database. (Jaimin Jetly via yusaku)
 

ambari-web/app/assets/data/services/metrics/hdfs/file_operations.json

@@ -0,0 +1,17 @@
+{
+  "href" : "http://ec2-23-22-183-40.compute-1.amazonaws.com:9998/clusters/SrimanthAmbari/services/HDFS/components/NAMENODE?fields=metrics/dfs/namenode/FileInfoOps[1351117114,1351120714,60],metrics/dfs/namenode/CreateFileOps[1351117114,1351120714,60],metrics/dfs/namenode/DeleteFileOps[1351117114,1351120714,60]",
+  "metrics" : {
+    "dfs" : {
+      "namenode" : {
+        "FileInfoOps" : "[[0.0,1351117440],[0.0,1351117800],[0.0,1351118160],[0.0,1351118520],[0.0,1351118880],[0.0,1351119240],[0.0,1351119600],[0.0,1351119960],[0.0,1351120320],[0.0,1351120680],[0.0,1351121040]]",
+        "DeleteFileOps" : "[[0.0,1351117440],[0.0,1351117800],[0.0,1351118160],[0.0,1351118520],[0.0,1351118880],[0.0,1351119240],[0.0,1351119600],[0.0,1351119960],[0.0,1351120320],[0.0,1351120680],[0.0,1351121040]]",
+        "CreateFileOps" : "[[0.0,1351117440],[0.0,1351117800],[0.0,1351118160],[0.0,1351118520],[0.0,1351118880],[0.0,1351119240],[0.0,1351119600],[0.0,1351119960],[0.0,1351120320],[0.0,1351120680],[0.0,1351121040]]"
+      }
+    }
+  },
+  "ServiceComponentInfo" : {
+    "cluster_name" : "SrimanthAmbari",
+    "component_name" : "NAMENODE",
+    "service_name" : "HDFS"
+  }
+}

ambari-web/app/assets/data/services/metrics/hdfs/gc.json

@@ -0,0 +1,16 @@
+{
+  "href" : "http://ec2-23-22-183-40.compute-1.amazonaws.com:9998/clusters/SrimanthAmbari/hosts/ip-10-224-3-23.ec2.internal/host_components/NAMENODE?fields=metrics/jvm/gcTimeMillis[1351117114,1351120714,60]",
+  "HostRoles" : {
+    "cluster_name" : "SrimanthAmbari",
+    "component_name" : "NAMENODE",
+    "host_name" : "ip-10-224-3-23.ec2.internal"
+  },
+  "host" : {
+    "href" : "http://ec2-23-22-183-40.compute-1.amazonaws.com:9998/clusters/SrimanthAmbari/hosts/ip-10-224-3-23.ec2.internal"
+  },
+  "metrics" : {
+    "jvm" : {
+      "gcTimeMillis" : "[[0.0,1351117440],[0.0,1351117800],[0.0,1351118160],[0.0,1351118520],[0.0,1351118880],[0.0,1351119240],[0.0,1351119600],[0.0,1351119960],[0.0,1351120320],[0.0,1351120680],[0.027777777778,1351121040]]"
+    }
+  }
+}

ambari-web/app/assets/data/services/metrics/hdfs/io.json

@@ -0,0 +1,16 @@
+{
+  "href" : "http://ec2-23-22-183-40.compute-1.amazonaws.com:9998/clusters/SrimanthAmbari/services/HDFS/components/DATANODE?fields=metrics/dfs/datanode/bytes_written[1351117114,1351120714,60],metrics/dfs/datanode/bytes_read[1351117114,1351120714,60]",
+  "metrics" : {
+    "dfs" : {
+      "datanode" : {
+        "bytes_written" : "[[0.0,1351117440],[0.0,1351117800],[0.0,1351118160],[0.0,1351118520],[0.0,1351118880],[0.0,1351119240],[0.0,1351119600],[0.0,1351119960],[0.0,1351120320],[0.0,1351120680],[0.0,1351121040]]",
+        "bytes_read" : "[[0.0,1351117440],[0.0,1351117800],[0.0,1351118160],[0.0,1351118520],[0.0,1351118880],[0.0,1351119240],[0.0,1351119600],[0.0,1351119960],[0.0,1351120320],[0.0,1351120680],[0.0,1351121040]]"
+      }
+    }
+  },
+  "ServiceComponentInfo" : {
+    "cluster_name" : "SrimanthAmbari",
+    "component_name" : "DATANODE",
+    "service_name" : "HDFS"
+  }
+}

ambari-web/app/assets/data/services/metrics/hdfs/jvm_heap.json

@@ -0,0 +1,19 @@
+{
+  "href" : "http://ec2-23-22-183-40.compute-1.amazonaws.com:9998/clusters/SrimanthAmbari/hosts/ip-10-224-3-23.ec2.internal/host_components/NAMENODE?fields=metrics/jvm/memNonHeapUsedM[1351117114,1351120714,60],metrics/jvm/memNonHeapCommittedM[1351117114,1351120714,60],metrics/jvm/memHeapUsedM[1351117114,1351120714,60],metrics/jvm/memHeapCommittedM[1351117114,1351120714,60]",
+  "HostRoles" : {
+    "cluster_name" : "SrimanthAmbari",
+    "component_name" : "NAMENODE",
+    "host_name" : "ip-10-224-3-23.ec2.internal"
+  },
+  "host" : {
+    "href" : "http://ec2-23-22-183-40.compute-1.amazonaws.com:9998/clusters/SrimanthAmbari/hosts/ip-10-224-3-23.ec2.internal"
+  },
+  "metrics" : {
+    "jvm" : {
+      "memHeapCommittedM" : "[[680.0,1351117440],[680.0,1351117800],[680.0,1351118160],[680.0,1351118520],[680.0,1351118880],[680.0,1351119240],[680.0,1351119600],[680.0,1351119960],[680.0,1351120320],[680.0,1351120680],[680.0,1351121040]]",
+      "memNonHeapUsedM" : "[[22.650757,1351117440],[22.650757,1351117800],[22.650757,1351118160],[22.650757,1351118520],[22.650757,1351118880],[22.650757,1351119240],[22.650757,1351119600],[22.650757,1351119960],[22.651528758,1351120320],[22.65326,1351120680],[22.65326,1351121040]]",
+      "memHeapUsedM" : "[[395.12300758,1351117440],[408.34930122,1351117800],[420.87871456,1351118160],[433.10785828,1351118520],[445.34583947,1351118880],[458.20661247,1351119240],[471.33682175,1351119600],[483.45747058,1351119960],[495.75202453,1351120320],[508.74344031,1351120680],[452.11703887,1351121040]]",
+      "memNonHeapCommittedM" : "[[23.375,1351117440],[23.375,1351117800],[23.375,1351118160],[23.375,1351118520],[23.375,1351118880],[23.375,1351119240],[23.375,1351119600],[23.375,1351119960],[23.375,1351120320],[23.375,1351120680],[23.375,1351121040]]"
+    }
+  }
+}

ambari-web/app/assets/data/services/metrics/hdfs/jvm_threads.json

@@ -0,0 +1,19 @@
+{
+  "href" : "http://ec2-23-22-183-40.compute-1.amazonaws.com:9998/clusters/SrimanthAmbari/hosts/ip-10-224-3-23.ec2.internal/host_components/NAMENODE?fields=metrics/jvm/threadsRunnable[1351117114,1351120714,60],metrics/jvm/threadsBlocked[1351117114,1351120714,60],metrics/jvm/threadsWaiting[1351117114,1351120714,60],metrics/jvm/threadsTimedWaiting[1351117114,1351120714,60]",
+  "HostRoles" : {
+    "cluster_name" : "SrimanthAmbari",
+    "component_name" : "NAMENODE",
+    "host_name" : "ip-10-224-3-23.ec2.internal"
+  },
+  "host" : {
+    "href" : "http://ec2-23-22-183-40.compute-1.amazonaws.com:9998/clusters/SrimanthAmbari/hosts/ip-10-224-3-23.ec2.internal"
+  },
+  "metrics" : {
+    "jvm" : {
+      "threadsBlocked" : "[[0.0,1351117440],[0.0,1351117800],[0.0,1351118160],[0.0,1351118520],[0.0,1351118880],[0.0,1351119240],[0.0,1351119600],[0.0,1351119960],[0.0,1351120320],[0.0,1351120680],[0.0,1351121040]]",
+      "threadsWaiting" : "[[104.0,1351117440],[104.0,1351117800],[104.0,1351118160],[104.0,1351118520],[104.0,1351118880],[104.0,1351119240],[104.0,1351119600],[104.0,1351119960],[104.0,1351120320],[104.0,1351120680],[104.0,1351121040]]",
+      "threadsTimedWaiting" : "[[8.0,1351117440],[8.0,1351117800],[8.0,1351118160],[8.0,1351118520],[8.0,1351118880],[8.0,1351119240],[8.0,1351119600],[8.0,1351119960],[8.1638888889,1351120320],[8.0,1351120680],[8.0,1351121040]]",
+      "threadsRunnable" : "[[10.0,1351117440],[10.0,1351117800],[10.0,1351118160],[10.0,1351118520],[10.0,1351118880],[10.0,1351119240],[10.0,1351119600],[10.0,1351119960],[10.0,1351120320],[10.0,1351120680],[10.0,1351121040]]"
+    }
+  }
+}

ambari-web/app/assets/data/services/metrics/hdfs/rpc.json

@@ -0,0 +1,16 @@
+{
+  "href" : "http://ec2-23-22-183-40.compute-1.amazonaws.com:9998/clusters/SrimanthAmbari/hosts/ip-10-224-3-23.ec2.internal/host_components/NAMENODE?fields=metrics/rpc/RpcQueueTime_avg_time[1351117114,1351120714,60]",
+  "HostRoles" : {
+    "cluster_name" : "SrimanthAmbari",
+    "component_name" : "NAMENODE",
+    "host_name" : "ip-10-224-3-23.ec2.internal"
+  },
+  "host" : {
+    "href" : "http://ec2-23-22-183-40.compute-1.amazonaws.com:9998/clusters/SrimanthAmbari/hosts/ip-10-224-3-23.ec2.internal"
+  },
+  "metrics" : {
+    "rpc" : {
+      "RpcQueueTime_avg_time" : "[[0.055987654321,1351117440],[0.013271604938,1351117800],[0.0046296296296,1351118160],[0.018518518519,1351118520],[0.01712962963,1351118880],[0.0,1351119240],[0.0,1351119600],[0.0,1351119960],[0.0,1351120320],[0.0095679012346,1351120680],[0.018672839506,1351121040]]"
+    }
+  }
+}

ambari-web/app/styles/application.less

@@ -575,13 +575,12 @@ a:focus {
 
 /*end alerts summary*/
 
-/*start cluster metrics*/
-.cluster-metrics {
-  .chart-container {
-    position: relative;
-    margin: 20px 15px 0px 15px;
-  }
-  .chart {
+/*start chart/style graphs*/
+.chart-container{
+  position: relative;
+  margin: 20px 15px 0px 15px;
+  
+  .chart{
     padding-bottom: 0px !important;
     position: relative;
     height: 160px;
@@ -617,8 +616,7 @@ a:focus {
     font-size: small;
   }
 }
-
-/*end cluster metrics*/
+/*end chart/graph styles*/
 
 /*****end styles for dashboard page*****/
 
@@ -719,7 +717,19 @@ a:focus {
       text-align: left;
     }
   }
+}
 
+.summary-metric-graphs{
+  [class*="span"] {
+    float: left;
+    margin-left: 10px;
+  }
+  .chart-container{
+    .chart-x-axis{
+      left: 0%;
+      width: 100%;
+    }
+  }
 }
 
 /*End Services*/
@@ -1546,4 +1556,4 @@ ul.inline li {
 
 #step8-content{
   max-height: 570px;
-}
+}

ambari-web/app/templates/main/charts/linear_time.hbs

@@ -20,4 +20,5 @@
   <div id="{{unbound view.id}}-xaxis" class="chart-x-axis"></div>
   <div id="{{unbound view.id}}-overlay" class="chart-overlay"></div>
   <div id="{{unbound view.id}}-chart" class="chart"></div>
+  <div id="{{unbound view.id}}-title" class="chart-title">{{view.title}}</div>
 </div>

ambari-web/app/templates/main/dashboard.hbs

@@ -44,20 +44,20 @@
           <a class="btn" href="http://gangliaserver/ganglia/?t=yes" target="_blank" rel="tooltip" title="Go to Ganglia"><i class="icon-link"></i></a>
         </div>
 			</div>
-			<div class="cluster-metrics">
+			<div class="graphs-container">
 				<div class="row">
 					<div class="span6">
 						<div class="row">
-							<div class="span3">{{view App.ChartClusterMetricsNetwork}}<div class="chart-title">Network Usage</div></div>
-							<div class="span3">{{view App.ChartClusterMetricsLoad}}<div class="chart-title">Cluster Load</div></div>
+							<div class="span3">{{view App.ChartClusterMetricsNetwork}}</div>
+							<div class="span3">{{view App.ChartClusterMetricsLoad}}</div>
 						</div>
 					</div>
 				</div>
 				<div class="row">
 					<div class="span6">
 						<div class="row">
-							<div class="span3">{{view App.ChartClusterMetricsMemory}}<div class="chart-title">Memory Usage</div></div>
-							<div class="span3">{{view App.ChartClusterMetricsCPU}}<div class="chart-title">CPU Usage</div></div>
+							<div class="span3">{{view App.ChartClusterMetricsMemory}}</div>
+							<div class="span3">{{view App.ChartClusterMetricsCPU}}</div>
 						</div>
 					</div>
 				</div>

ambari-web/app/templates/main/service/info/summary.hbs

@@ -228,29 +228,36 @@
 </div>
 </div>
 <div class="span6">
-  <div class="box">
-    <div class="box-header">
-      <h4>Alerts</h4>
-    </div>
-    <ul class="alerts">
-      {{#each controller.content.alerts}}
-      <li class="status-{{unbound status}}">
-        <p><span class="title">{{title}}</span> <a href="javascript:void(null)">{{service.label}}</a><span
-            class="date-time">{{date}}</span></p>
-
-        <p><span>{{status}}:</span> <span>{{message}}</span></p>
-      </li>
-      {{/each}}
-
-      {{#each view.service.alerts}}
-      <div>
-        Message:{{ message }}<br/>
+	<div class="box">
+		<div class="box-header">
+			<h4>Alerts</h4>
+			<a class="btn" href="http://nagiosserver/nagios" target="_blank" rel="tooltip" title="Go to Nagios"><i class="icon-link"></i></a>
+		</div>
+		<ul class="alerts">
+			{{#each controller.content.alerts}}
+			<li class="status-{{unbound status}}">
+				<p><span class="title">{{title}}</span> <a href="javascript:void(null)">{{service.label}}</a><span class="date-time">{{date}}</span></p>
+				<p><span>{{status}}:</span> <span>{{message}}</span></p>
+			</li>
+			{{/each}}
+		</ul>
+	</div>
+</div>
+<div class="row-fluid">
+  <div class="span12">
+    <div class="box">
+      <div class="box-header">
+        <h4>{{controller.content.label}} Metrics</h4>
       </div>
-      {{/each}}
-    </ul>
-    <div class="box-footer">
-      <hr/>
-      <a class="go-to" href="javascript:void(null)">Go to Nagios</a>
+      
+      <div class="summary-metric-graphs row-fluid">
+        {{#each graph in view.attributes.metricGraphViews}}
+          <div class="span3">
+            {{view graph}}
+          </div> 
+        {{/each}}
+      </div>
+      
     </div>
   </div>
 </div>

ambari-web/app/views.js

@@ -70,6 +70,12 @@ require('views/main/service/info/summary');
 require('views/main/service/info/metrics');
 require('views/main/service/info/configs');
 require('views/main/service/info/audit');
+require('views/main/service/info/metrics/hdfs/jvm_threads');
+require('views/main/service/info/metrics/hdfs/jvm_heap');
+require('views/main/service/info/metrics/hdfs/io');
+require('views/main/service/info/metrics/hdfs/rpc');
+require('views/main/service/info/metrics/hdfs/file_operations');
+require('views/main/service/info/metrics/hdfs/gc');
 require('views/main/charts/menu');
 require('views/main/charts/heatmap');
 require('views/main/charts/horizon');

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

@@ -30,6 +30,7 @@ var App = require('app');
  * Extending classes should override the following:
  * <ul>
  * <li>url - from where the data can be retrieved
+ * <li>title - Title to be displayed when showing the chart
  * <li>id - which uniquely identifies this chart in any page
  * <li>#transformToSeries(jsonData) - function to map server data into graph
  * series
@@ -65,6 +66,14 @@ App.ChartLinearTimeView = Ember.View
        */
       id: null,
 
+      /**
+       * Title to be shown under the chart.
+       * 
+       * @type String
+       * @default null
+       */
+      title: null,
+
       /**
        * @private
        * 
@@ -130,7 +139,7 @@ App.ChartLinearTimeView = Ember.View
           }, {
             x: 1,
             y: 1
-          } ],
+          } ]
         } ]
       },
 
@@ -194,12 +203,12 @@ App.ChartLinearTimeView = Ember.View
             interpolation: 'step-after',
             stroke: true,
             renderer: 'area',
-            strokeWidth: 1,
+            strokeWidth: 1
           });
           this._graph.renderer.unstack = true;
 
           xAxis = new Rickshaw.Graph.Axis.Time({
-            graph: this._graph,
+            graph: this._graph
           });
           yAxis = new Rickshaw.Graph.Axis.Y({
             tickFormat: this.yAxisFormatter,
@@ -207,12 +216,12 @@ App.ChartLinearTimeView = Ember.View
             graph: this._graph
           });
 
-          overlayElement.addEventListener('mousemove', function (e) {
+          overlayElement.addEventListener('mousemove', function () {
             $(xaxisElement).removeClass('hide');
             $(yaxisElement).removeClass('hide');
             $(chartElement).children("div").removeClass('hide');
           });
-          overlayElement.addEventListener('mouseout', function (e) {
+          overlayElement.addEventListener('mouseout', function () {
             $(xaxisElement).addClass('hide');
             $(yaxisElement).addClass('hide');
             $(chartElement).children("div").addClass('hide');
@@ -224,7 +233,7 @@ App.ChartLinearTimeView = Ember.View
             $(chartElement).children('div').addClass('hide');
           });
 
-          var legend = new Rickshaw.Graph.Legend({
+          new Rickshaw.Graph.Legend({
             graph: this._graph,
             element: xaxisElement
           });
@@ -271,12 +280,66 @@ App.ChartLinearTimeView = Ember.View
 App.ChartLinearTimeView.BytesFormatter = function (y) {
   var value = Rickshaw.Fixtures.Number.formatBase1024KMGTP(y);
   if (!y || y.length < 1) {
-    value = "0";
+    value = '';
   } else {
+    if ("number" == typeof value) {
+      value = String(value);
+    }
     if ("string" == typeof value) {
-      value = value.replace(/\.\d+/, " ")
-      value = value + "B";
+      value = value.replace(/\.\d+/, ''); // Remove decimal part
+      // Either it ends with digit or ends with character
+      value = value.replace(/(\d$)/, '$1 '); // Ends with digit like '120'
+      value = value.replace(/([a-zA-Z]$)/, ' $1'); // Ends with character like
+      // '120M'
+      value = value + 'B'; // Append B to make B, MB, GB etc.
+    }
+  }
+  return value;
+};
+
+/**
+ * A formatter which will turn a number into percentage display like '42%'
+ * 
+ * @type Function
+ */
+App.ChartLinearTimeView.PercentageFormatter = function (percentage) {
+  var value = percentage;
+  if (!value || value.length < 1) {
+    value = '';
+  } else {
+    value = value + '%';
+  }
+  return value;
+};
+
+/**
+ * A formatter which will turn elapsed time into display time like '50 ms',
+ * '5s', '10 m', '3 hr' etc. Time is expected to be provided in milliseconds.
+ * 
+ * @type Function
+ */
+App.ChartLinearTimeView.TimeElapsedFormatter = function (millis) {
+  var value = millis;
+  if (!value || value.length < 1) {
+    value = '';
+  } else if ("number" == typeof millis) {
+    var seconds = millis > 1000 ? Math.round(millis / 1000) : 0;
+    var minutes = seconds > 60 ? Math.round(seconds / 60) : 0;
+    var hours = minutes > 60 ? Math.round(minutes / 60) : 0;
+    var days = hours > 24 ? Math.round(hours / 24) : 0;
+    if (days > 0) {
+      value = days + ' d';
+    } else if (hours > 0) {
+      value = hours + ' hr';
+    } else if (minutes > 0) {
+      value = minutes + ' m';
+    } else if (seconds > 0) {
+      value = seconds + ' s';
+    } else if (millis > 0) {
+      value = millis + ' ms';
+    } else {
+      value = millis + ' ms';
     }
   }
   return value;
-}
+};

ambari-web/app/views/main/dashboard/cluster_metrics/cpu.js

@@ -29,14 +29,8 @@ var App = require('app');
 App.ChartClusterMetricsCPU = App.ChartLinearTimeView.extend({
   id: "cluster-metrics-cpu",
   url: "/data/cluster_metrics/cpu_1hr.json",
-  
-  yAxisFormatter: function (y) {
-    var value = this._super(y);
-    if (!value || value.length < 1) {
-      value = "0";
-    }
-    return value + "%";
-  },
+  title: "CPU Usage",
+  yAxisFormatter: App.ChartLinearTimeView.PercentageFormatter,
   
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/dashboard/cluster_metrics/load.js

@@ -30,6 +30,7 @@ var App = require('app');
 App.ChartClusterMetricsLoad = App.ChartLinearTimeView.extend({
   id: "cluster-metrics-load",
   url: "/data/cluster_metrics/load_1hr.json",
+  title: "Cluster Load",
   
   transformToSeries: function(jsonData){
     var seriesArray = [];

ambari-web/app/views/main/dashboard/cluster_metrics/memory.js

@@ -29,8 +29,9 @@ var App = require('app');
 App.ChartClusterMetricsMemory = App.ChartLinearTimeView.extend({
   id: "cluster-metrics-memory",
   url: "/data/cluster_metrics/memory_1hr.json",
-  
+  title: "Memory Usage",
   yAxisFormatter: App.ChartLinearTimeView.BytesFormatter,
+  
   transformToSeries: function (jsonData) {
     var seriesArray = [];
     if (jsonData instanceof Array) {

ambari-web/app/views/main/dashboard/cluster_metrics/network.js

@@ -30,6 +30,7 @@ var App = require('app');
 App.ChartClusterMetricsNetwork = App.ChartLinearTimeView.extend({
   id: "cluster-metrics-network",
   url : "/data/cluster_metrics/network_1hr.json",
+  title: "Network Usage",
   yAxisFormatter: App.ChartLinearTimeView.BytesFormatter,
   
   transformToSeries : function (jsonData) {

ambari-web/app/views/main/service/info/metrics/hdfs/file_operations.js

@@ -0,0 +1,74 @@
+/**
+ * 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 cluster CPU metrics
+ * 
+ * @extends App.ChartLinearTimeView
+ * @extends Ember.Object
+ * @extends Ember.View
+ */
+App.ChartServiceMetricsHDFS_FileOperations = App.ChartLinearTimeView.extend({
+  id: "service-metrics-hdfs-file-operations",
+  url: "/data/services/metrics/hdfs/file_operations.json",
+  title: "File Operations",
+  
+  transformToSeries: function (jsonData) {
+    var seriesArray = [];
+    if (jsonData && jsonData.metrics && jsonData.metrics.dfs && jsonData.metrics.dfs.namenode) {
+      for (var name in jsonData.metrics.dfs.namenode){
+        var displayName;
+        var seriesData = jsonData.metrics.dfs.namenode[name];
+        switch (name) {
+          case "FileInfoOps":
+            displayName = "File Information Operations";
+            break;
+          case "DeleteFileOps":
+            displayName = "Delete File Operations";
+            break;
+          case "CreateFileOps":
+            displayName = "Create File Operations";
+            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/service/info/metrics/hdfs/gc.js

@@ -0,0 +1,69 @@
+/**
+ * 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 cluster CPU metrics
+ * 
+ * @extends App.ChartLinearTimeView
+ * @extends Ember.Object
+ * @extends Ember.View
+ */
+App.ChartServiceMetricsHDFS_GC = App.ChartLinearTimeView.extend({
+  id: "service-metrics-hdfs-gc",
+  url: "/data/services/metrics/hdfs/gc.json",
+  title: "Garbage Collection",
+  yAxisFormatter: App.ChartLinearTimeView.TimeElapsedFormatter,
+  
+  transformToSeries: function (jsonData) {
+    var seriesArray = [];
+    if (jsonData && jsonData.metrics && jsonData.metrics.jvm) {
+      for (var name in jsonData.metrics.jvm){
+        var displayName;
+        var seriesData = jsonData.metrics.jvm[name];
+        switch (name) {
+          case "gcTimeMillis":
+            displayName = "Time";
+            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/service/info/metrics/hdfs/io.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 cluster CPU metrics
+ * 
+ * @extends App.ChartLinearTimeView
+ * @extends Ember.Object
+ * @extends Ember.View
+ */
+App.ChartServiceMetricsHDFS_IO = App.ChartLinearTimeView.extend({
+  id: "service-metrics-hdfs-io",
+  url: "/data/services/metrics/hdfs/io.json",
+  title: "HDFS I/O",
+  yAxisFormatter: App.ChartLinearTimeView.BytesFormatter,
+  
+  transformToSeries: function (jsonData) {
+    var seriesArray = [];
+    if (jsonData && jsonData.metrics && jsonData.metrics.dfs && jsonData.metrics.dfs.datanode) {
+      for (var name in jsonData.metrics.dfs.datanode){
+        var displayName;
+        var seriesData = jsonData.metrics.dfs.datanode[name];
+        switch (name) {
+          case "bytes_written":
+            displayName = "Bytes Written";
+            break;
+          case "bytes_read":
+            displayName = "Bytes Read";
+            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/service/info/metrics/hdfs/jvm_heap.js

@@ -0,0 +1,78 @@
+/**
+ * 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 cluster CPU metrics
+ * 
+ * @extends App.ChartLinearTimeView
+ * @extends Ember.Object
+ * @extends Ember.View
+ */
+App.ChartServiceMetricsHDFS_JVMHeap = App.ChartLinearTimeView.extend({
+  id: "service-metrics-hdfs-jvm-heap",
+  url: "/data/services/metrics/hdfs/jvm_heap.json",
+  title: "JVM Memory Status",
+  yAxisFormatter: App.ChartLinearTimeView.BytesFormatter,
+  
+  transformToSeries: function (jsonData) {
+    var seriesArray = [];
+    if (jsonData && jsonData.metrics && jsonData.metrics.jvm) {
+      for (var name in jsonData.metrics.jvm){
+        var displayName;
+        var seriesData = jsonData.metrics.jvm[name];
+        switch (name) {
+          case "memHeapCommittedM":
+            displayName = "Heap Memory Committed";
+            break;
+          case "memNonHeapUsedM":
+            displayName = "Non Heap Memory Used";
+            break;
+          case "memHeapUsedM":
+            displayName = "Heap Memory Used";
+            break;
+          case "memNonHeapCommittedM":
+            displayName = "Non Heap Memory Committed";
+            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/service/info/metrics/hdfs/jvm_threads.js

@@ -0,0 +1,77 @@
+/**
+ * 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 cluster CPU metrics
+ * 
+ * @extends App.ChartLinearTimeView
+ * @extends Ember.Object
+ * @extends Ember.View
+ */
+App.ChartServiceMetricsHDFS_JVMThreads = App.ChartLinearTimeView.extend({
+  id: "service-metrics-hdfs-jvm-threads",
+  url: "/data/services/metrics/hdfs/jvm_threads.json",
+  title: "JVM Thread Status",
+  
+  transformToSeries: function (jsonData) {
+    var seriesArray = [];
+    if (jsonData && jsonData.metrics && jsonData.metrics.jvm) {
+      for (var name in jsonData.metrics.jvm){
+        var displayName;
+        var seriesData = jsonData.metrics.jvm[name];
+        switch (name) {
+          case "threadsBlocked":
+            displayName = "Threads Blocked";
+            break;
+          case "threadsWaiting":
+            displayName = "Threads Waiting";
+            break;
+          case "threadsTimedWaiting":
+            displayName = "Threads Timed Waiting";
+            break;
+          case "threadsRunnable":
+            displayName = "Threads Runnable";
+            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/service/info/metrics/hdfs/rpc.js

@@ -0,0 +1,69 @@
+/**
+ * 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 cluster CPU metrics
+ * 
+ * @extends App.ChartLinearTimeView
+ * @extends Ember.Object
+ * @extends Ember.View
+ */
+App.ChartServiceMetricsHDFS_RPC = App.ChartLinearTimeView.extend({
+  id: "service-metrics-hdfs-rpc",
+  url: "/data/services/metrics/hdfs/rpc.json",
+  title: "RPC",
+  yAxisFormatter: App.ChartLinearTimeView.TimeElapsedFormatter,
+  
+  transformToSeries: function (jsonData) {
+    var seriesArray = [];
+    if (jsonData && jsonData.metrics && jsonData.metrics.rpc) {
+      for (var name in jsonData.metrics.rpc){
+        var displayName;
+        var seriesData = jsonData.metrics.rpc[name];
+        switch (name) {
+          case "RpcQueueTime_avg_time":
+            displayName = "Queue Average Wait Time";
+            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/service/info/summary.js

@@ -87,12 +87,17 @@ App.MainServiceInfoSummaryView = Em.View.extend({
             summary['dfs_percent_disk_used'] = parseFloat((100 - summary['dfs_percent_remaining']).toFixed(2)) + "%";
             summary['used_bytes'] = (summary['dfs_used_bytes'] + summary['nondfs_used_bytes']).bytesToSize(2, 'parseFloat');
             summary['dfs_total_bytes'] = summary['dfs_total_bytes'].bytesToSize(2, 'parseFloat');
+            summary['metricGraphViews'] = [App.ChartServiceMetricsHDFS_JVMThreads.extend(), 
+                                           App.ChartServiceMetricsHDFS_JVMHeap.extend(), 
+                                           App.ChartServiceMetricsHDFS_IO.extend(), 
+                                           App.ChartServiceMetricsHDFS_RPC.extend(), 
+                                           App.ChartServiceMetricsHDFS_FileOperations.extend(), 
+                                           App.ChartServiceMetricsHDFS_GC.extend()];
           } else if (serviceName == 'mapreduce') {
             summary['start_time'] = summary['start_time'].toDaysHoursMinutes();
             summary['memory_heap_percent_used'] = summary['memory_heap_used'].countPercentageRatio(summary['memory_heap_max']);
             summary['memory_heap_used'] = summary['memory_heap_used'].bytesToSize(2, 'parseFloat');
             summary['memory_heap_max'] = summary['memory_heap_max'].bytesToSize(2, 'parseFloat');
-
           } else if (serviceName == 'hbase') {
             summary['memory_heap_percent_used'] = summary['memory_heap_used'].countPercentageRatio(summary['memory_heap_max']);
             summary['memory_heap_used'] = summary['memory_heap_used'].bytesToSize(2, 'parseFloat');