AMBARI-1229. Dashboard - make disk usage pie chart in HDFS summary easier to understand. (yusaku)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/trunk@1435462 13f79535-47bb-0310-9956-ffa450edef68

CHANGES.txt

@@ -17,6 +17,9 @@ Trunk (unreleased changes):
 
  IMPROVEMENTS
 
+ AMBARI-1229. Dashboard - make disk usage pie chart in HDFS summary easier
+ to understand. (yusaku)
+
  AMBARI-1228. During Install, show "warn" on hosts that have tasks cancelled.
  (yusaku)
 

ambari-web/app/messages.js

@@ -340,7 +340,7 @@ Em.I18n.translations = {
   'dashboard.services.hdfs.nodes.uptime':'NameNode Uptime',
   'dashboard.services.hdfs.nodes.heap':'NameNode Heap',
   'dashboard.services.hdfs.nodes.heapUsed':'{0} / {1} ({2}% used)',
-  'dashboard.services.hdfs.chart.label':'Capacity (Free/Used)',
+  'dashboard.services.hdfs.chart.label':'Capacity (Used/Total)',
 
   'dashboard.services.mapreduce.summary':'{0} of {1} trackers live, {2} jobs running, {3} jobs waiting',
   'dashboard.services.mapreduce.taskTrackers':'TaskTrackers',

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

@@ -23,10 +23,12 @@ App.ChartPieView = Em.View.extend({
   h:90,
   data:[300, 500],
   palette: new Rickshaw.Color.Palette({ scheme: 'munin'}),
+  stroke: 'black',
+  strokeWidth: 2,
   donut:d3.layout.pie().sort(null),
 
   r:function () {
-    return Math.min(this.get('w'), this.get('h')) / 2;
+    return Math.min(this.get('w'), this.get('h')) / 2 - this.get('strokeWidth');
   }.property('w', 'h'),
 
   outerR:function () {
@@ -56,6 +58,8 @@ App.ChartPieView = Em.View.extend({
     this.set('svg', d3.select(this.get('selector')).append("svg:svg")
       .attr("width", thisChart.get('w'))
       .attr("height", thisChart.get('h'))
+      .attr("stroke", this.get('stroke'))
+      .attr("stroke-width", this.get('strokeWidth'))
       .append("svg:g")
       .attr("transform", "translate(" + thisChart.get('w') / 2 + "," + thisChart.get('h') / 2 + ")"));
 

ambari-web/app/views/main/dashboard/service/hdfs.js

@@ -23,6 +23,11 @@ App.MainDashboardServiceHdfsView = App.MainDashboardServiceView.extend({
   serviceName: 'HDFS',
   Chart: App.ChartPieView.extend({
     service: null,
+    color: '#0066B3',
+    stroke: '#0066B3',
+    palette: new Rickshaw.Color.Palette({
+      scheme: [ 'rgba(0,102,179,0)', 'rgba(0,102,179,1)'].reverse()
+    }),
     data: function () {
       var total = this.get('service.capacityTotal') + 0;
       var remaining = (this.get('service.capacityRemaining') + 0);