AMBARI-4901. 'HDFS Capacity' widget rename and enhancements to clarify HDFS disk usage.(xiwang)

ambari-web/app/messages.js

@@ -1612,7 +1612,11 @@ Em.I18n.translations = {
 
   'dashboard.widgets.NameNodeHeap': 'NameNode Heap',
   'dashboard.widgets.NameNodeCpu': 'NameNode CPU WIO',
-  'dashboard.widgets.NameNodeCapacity': 'HDFS Capacity',
+  'dashboard.widgets.HDFSDiskUsage': 'HDFS Disk Usage',
+  'dashboard.widgets.HDFSDiskUsage.DFSused': 'DFS used',
+  'dashboard.widgets.HDFSDiskUsage.nonDFSused': 'non DFS used',
+  'dashboard.widgets.HDFSDiskUsage.remaining': 'remaining',
+  'dashboard.widgets.HDFSDiskUsage.info': '{0} ({1}%)',
   'dashboard.widgets.JobTrackerHeap': 'JobTracker Heap',
   'dashboard.widgets.JobTrackerCpu': 'JobTracker CPU WIO',
   'dashboard.widgets.JobTrackerCapacity': 'JobTracker Capacity',
@@ -1661,8 +1665,11 @@ Em.I18n.translations = {
   'dashboard.services.hdfs.nanmenode':'NameNode',
   'dashboard.services.hdfs.snanmenode':'Secondary NameNode',
   'dashboard.services.hdfs.journalnodes':'JournalNodes',
-  'dashboard.services.hdfs.capacity':'HDFS Disk Capacity',
-  'dashboard.services.hdfs.capacityUsed':'{0} / {1} ({2}% used)',
+  'dashboard.services.hdfs.capacity':'HDFS Disk Usage',
+  'dashboard.services.hdfs.capacity.dfsUsed':'Disk Usage (DFS Used)',
+  'dashboard.services.hdfs.capacity.nonDfsUsed':'Disk Usage (Non DFS Used)',
+  'dashboard.services.hdfs.capacity.remaining':'Disk Usage (Remaining)',
+  'dashboard.services.hdfs.capacityUsed':'{0} / {1} ({2}%)',
   'dashboard.services.hdfs.totalFilesAndDirs':'Total Files + Directories',
   'dashboard.services.hdfs.datanodes':'DataNodes',
   'dashboard.services.hdfs.datanodecounts':'DataNodes Status',

ambari-web/app/styles/application.less

@@ -2447,8 +2447,8 @@ table.graphs {
         color: #000000;
         text-shadow: #fff 0px 0px 15px;
         position: relative;
-        left: -17px;
-        top: -7px;
+        left: -13px;
+        top: -10px;
       }
       .icon-edit{
         color: #555555;
@@ -2472,6 +2472,15 @@ table.graphs {
     }
     .hidden-info-five-line{
       padding-top: 40px;
+      tr > td {
+        line-height: 18px;
+      }
+    }
+    .hidden-info-six-line{
+      padding-top: 37px;
+      tr > td {
+        line-height: 16px;
+      }
     }
     .thumbnail .caption {
       padding-left: 0px;
@@ -2557,23 +2566,28 @@ table.graphs {
       .slots-content-isNA{
         top: -82px;
       }
-      .simple-text-hidden-two-line{
+      .content-hidden-two-line{
         top: -105px;
         opacity: 0.3;
         z-index: 5;
       }
-      .simple-text-hidden-three-line{
+      .content-hidden-three-line{
         top: -116px;
         opacity: 0.3;
         z-index: 5;
       }
-      .simple-text-hidden-four-line{
+      .content-hidden-four-line{
         top: -126px;
         opacity: 0.3;
         z-index: 5;
       }
-      .simple-text-hidden-five-line{
-        top: -150px;
+      .content-hidden-five-line{
+        top: -140px;
+        opacity: 0.3;
+        z-index: 5;
+       }
+      .content-hidden-six-line{
+        top: -143px;
         opacity: 0.3;
         z-index: 5;
       }
@@ -5348,6 +5362,9 @@ i.icon-asterisks {
     .thumbnail .hidden-info-five-line{
       font-size: 12px;
     }
+    .thumbnail .hidden-info-six-line{
+      font-size: 12px;
+    }
     .links .thumbnail .widget-content{
         font-weight: bold;
         font-size: 12px;

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

@@ -86,10 +86,18 @@
           {{view.service.decommissionDataNodes.length}} {{t dashboard.services.hdfs.nodes.decom}}
         </td>
       </tr>
-      <!-- HDFS Capacity -->
+      <!-- HDFS Capacity (Disk Usage)-->
       <tr>
-        <td>{{t dashboard.services.hdfs.capacity}}</td>
-        <td>{{view.capacity}}</td>
+        <td>{{t dashboard.services.hdfs.capacity.dfsUsed}}</td>
+        <td>{{view.dfsUsedDisk}}</td>
+      </tr>
+      <tr>
+        <td>{{t dashboard.services.hdfs.capacity.nonDfsUsed}}</td>
+        <td>{{view.nonDfsUsedDisk}}</td>
+      </tr>
+      <tr>
+        <td>{{t dashboard.services.hdfs.capacity.remaining}}</td>
+        <td>{{view.remainingDisk}}</td>
       </tr>
       <!-- Blocks Total -->
       <tr>

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

@@ -27,21 +27,21 @@
         <i class="icon-edit"></i>
       </a>
 
-      <div {{bindAttr class=":hidden-info-general view.hiddenInfoClass" }}>
-        <table align="center">
-          {{#each line in view.hiddenInfo}}
-              <tr><td>{{line}}</td></tr>
-          {{/each}}
-        </table>
-      </div>
+    <div {{bindAttr class=":hidden-info-general view.hiddenInfoClass" }}>
+      <table align="center">
+        {{#each line in view.hiddenInfo}}
+            <tr><td>{{line}}</td></tr>
+        {{/each}}
+      </table>
+    </div>
 
-      {{#if view.isPieExist}}
-        <div class="widget-content" >
-          {{view view.content modelBinding="view.model" thresh1Binding="view.thresh1" thresh2Binding="view.thresh2"}}
-        </div>
-      {{else}}
-        <div class="widget-content-isNA" >{{t services.service.summary.notAvailable}}</div>
-      {{/if}}
+    {{#if view.isPieExist}}
+      <div {{bindAttr class=":widget-content view.hoverContentTopClass"}}>
+        {{view view.content modelBinding="view.model" thresh1Binding="view.thresh1" thresh2Binding="view.thresh2"}}
+      </div>
+    {{else}}
+      <div class="widget-content-isNA" >{{t services.service.summary.notAvailable}}</div>
+    {{/if}}
     </li>
   </ul>
 </div>

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

@@ -140,17 +140,38 @@ App.MainDashboardServiceHdfsView = App.MainDashboardServiceView.extend({
     return text.format(liveCount, totalCount, percent);
   }.property('service.dataNodes.@each.workStatus', 'service.capacityUsed', 'service.capacityTotal'),
 
-  capacity: function () {
+  dfsUsedDisk: function () {
     var text = this.t("dashboard.services.hdfs.capacityUsed");
     var total = this.get('service.capacityTotal');
-    var remaining = this.get('service.capacityRemaining');
-    var used = total !== null && remaining !== null ? total - remaining : null;
-    var percent = total > 0 ? ((used * 100) / total).toFixed(1) : 0;
+    var dfsUsed = this.get('service.capacityUsed');
+    var percent = total > 0 ? ((dfsUsed * 100) / total).toFixed(2) : 0;
     if (percent == "NaN" || percent < 0) {
       percent = Em.I18n.t('services.service.summary.notAvailable') + " ";
     }
-    return text.format(numberUtils.bytesToSize(used, 1, 'parseFloat'), numberUtils.bytesToSize(total, 1, 'parseFloat'), percent);
+    return text.format(numberUtils.bytesToSize(dfsUsed, 1, 'parseFloat'), numberUtils.bytesToSize(total, 1, 'parseFloat'), percent);
   }.property('service.capacityUsed', 'service.capacityTotal'),
+  nonDfsUsedDisk: function () {
+    var text = this.t("dashboard.services.hdfs.capacityUsed");
+    var total = this.get('service.capacityTotal');
+    var remaining = this.get('service.capacityRemaining');
+    var dfsUsed = this.get('service.capacityUsed');
+    var nonDfsUsed = total !== null && remaining !== null && dfsUsed !== null ? total - remaining - dfsUsed : null;
+    var percent = total > 0 ? ((nonDfsUsed * 100) / total).toFixed(2) : 0;
+    if (percent == "NaN" || percent < 0) {
+      percent = Em.I18n.t('services.service.summary.notAvailable') + " ";
+    }
+    return text.format(numberUtils.bytesToSize(nonDfsUsed, 1, 'parseFloat'), numberUtils.bytesToSize(total, 1, 'parseFloat'), percent);
+  }.property('service.capacityUsed', 'service.capacityRemaining', 'service.capacityTotal'),
+  remainingDisk: function () {
+    var text = this.t("dashboard.services.hdfs.capacityUsed");
+    var total = this.get('service.capacityTotal');
+    var remaining = this.get('service.capacityRemaining');
+    var percent = total > 0 ? ((remaining * 100) / total).toFixed(2) : 0;
+    if (percent == "NaN" || percent < 0) {
+      percent = Em.I18n.t('services.service.summary.notAvailable') + " ";
+    }
+    return text.format(numberUtils.bytesToSize(remaining, 1, 'parseFloat'), numberUtils.bytesToSize(total, 1, 'parseFloat'), percent);
+  }.property('service.capacityRemaining', 'service.capacityTotal'),
 
   dataNodeComponent: function () {
     return this.get('service.dataNodes').objectAt(0);

ambari-web/app/views/main/dashboard/widget.js

@@ -233,20 +233,22 @@ App.DashboardWidgetView = Em.View.extend({
   },
 
   /**
-   * for simple-text template,
+   * for widgets has hidden info(hover info),
    * calculate the hover content top number
    * based on how long the hiddenInfo is
    */
   hoverContentTopClass: function () {
     var lineNum = this.get('hiddenInfo.length');
     if (lineNum == 2) {
-      return "simple-text-hidden-two-line";
+      return "content-hidden-two-line";
     } else if (lineNum == 3) {
-      return "simple-text-hidden-three-line";
+      return "content-hidden-three-line";
     } else if (lineNum == 4) {
-      return "simple-text-hidden-four-line";
+      return "content-hidden-four-line";
     } else if (lineNum == 5) {
-      return "simple-text-hidden-five-line";
+      return "content-hidden-five-line";
+    } else if (lineNum == 6) {
+      return "content-hidden-six-line";
     }
     return '';
   }.property('hiddenInfo.length')

ambari-web/app/views/main/dashboard/widgets/hdfs_capacity.js

@@ -21,7 +21,7 @@ var numberUtils = require('utils/number_utils');
 
 App.NameNodeCapacityPieChartView = App.PieChartDashboardWidgetView.extend({
 
-  title: Em.I18n.t('dashboard.widgets.NameNodeCapacity'),
+  title: Em.I18n.t('dashboard.widgets.HDFSDiskUsage'),
   id: '2',
 
   model_type: 'hdfs',
@@ -31,6 +31,7 @@ App.NameNodeCapacityPieChartView = App.PieChartDashboardWidgetView.extend({
    */
   modelFieldUsed: 'capacityRemaining',
   widgetHtmlId: 'widget-nn-capacity',
+  hiddenInfoClass: "hidden-info-six-line",
 
   didInsertElement: function() {
     this._super();
@@ -39,16 +40,28 @@ App.NameNodeCapacityPieChartView = App.PieChartDashboardWidgetView.extend({
 
   calcHiddenInfo: function () {
     var total = this.get('model').get(this.get('modelFieldMax')) + 0;
-    var used = total - this.get('model').get(this.get('modelFieldUsed')) + 0;
     var remaining = this.get('model.capacityRemaining');
-    var used = total !== null && remaining !== null ? total - remaining : null;
-    var percent = total > 0 ? ((used * 100) / total).toFixed(1) : 0;
-    if (percent == "NaN" || percent < 0) {
-      percent = Em.I18n.t('services.service.summary.notAvailable') + " ";
+    var dfsUsed = this.get('model.capacityUsed');
+    var nonDfsUsed = total !== null && remaining !== null && dfsUsed !== null ? total - remaining - dfsUsed : null;
+    var dfsPercent = total > 0 ? ((dfsUsed * 100) / total).toFixed(2) : 0;
+    var nonDfsPercent = total > 0 ? ((nonDfsUsed * 100) / total).toFixed(2) : 0;
+    var remainingPercent = total > 0 ? ((remaining * 100) / total).toFixed(2) : 0;
+    if (dfsPercent == "NaN" || dfsPercent < 0) {
+      dfsPercent = Em.I18n.t('services.service.summary.notAvailable') + " ";
+    }
+    if (nonDfsPercent == "NaN" || nonDfsPercent < 0) {
+      nonDfsPercent = Em.I18n.t('services.service.summary.notAvailable') + " ";
+    }
+    if (remainingPercent == "NaN" || remainingPercent < 0) {
+      remainingPercent = Em.I18n.t('services.service.summary.notAvailable') + " ";
     }
     var result = [];
-    result.pushObject(percent + '% used');
-    result.pushObject(numberUtils.bytesToSize(used, 1, 'parseFloat') + ' of ' + numberUtils.bytesToSize(total, 1, 'parseFloat'));
+    result.pushObject(Em.I18n.t('dashboard.widgets.HDFSDiskUsage.DFSused'));
+    result.pushObject(Em.I18n.t('dashboard.widgets.HDFSDiskUsage.info').format(numberUtils.bytesToSize(dfsUsed, 1, 'parseFloat'), dfsPercent));
+    result.pushObject(Em.I18n.t('dashboard.widgets.HDFSDiskUsage.nonDFSused'));
+    result.pushObject(Em.I18n.t('dashboard.widgets.HDFSDiskUsage.info').format(numberUtils.bytesToSize(nonDfsUsed, 1, 'parseFloat'), nonDfsPercent));
+    result.pushObject(Em.I18n.t('dashboard.widgets.HDFSDiskUsage.remaining'));
+    result.pushObject(Em.I18n.t('dashboard.widgets.HDFSDiskUsage.info').format(numberUtils.bytesToSize(remaining, 1, 'parseFloat'), remainingPercent));
     return result;
   },