You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by rz...@apache.org on 2017/06/22 19:31:24 UTC

[1/2] ambari git commit: AMBARI-21324 - Ambari 3.0: Outstanding Services page issues (Ishan Bhatt via rzang)

Repository: ambari
Updated Branches:
  refs/heads/trunk 45a29900b -> 6305fb6ab


http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/main/service/services/yarn.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/services/yarn.hbs b/ambari-web/app/templates/main/service/services/yarn.hbs
index 32aad5d..aa8ee48 100644
--- a/ambari-web/app/templates/main/service/services/yarn.hbs
+++ b/ambari-web/app/templates/main/service/services/yarn.hbs
@@ -17,95 +17,123 @@
 }}
 
 <div class="row">
-{{! left column }}
-<div class="col-md-6">
-  {{view view.dashboardMasterComponentView}}
+  {{! Component Section }}
+  <div class="col-md-12 component-summary">
+    <div class="col-md-2">{{t dashboard.services.hdfs.summary.components}}</div>
+    <div class="col-md-10">
+      {{view view.dashboardMasterComponentView}}
 
-  {{! NodeManagers }}
-  {{#if view.isNodeManagerCreated}}
-    <div {{bindAttr class=":row :component view.nodeManagerComponent.componentName"}}>
-      <div class="col-md-6 summary-label">
-        <a href="#" {{action filterHosts view.nodeManagerComponent}}>{{t dashboard.services.yarn.nodeManagers}}</a>
+      {{! NodeManagers }}
+      {{#if view.isNodeManagerCreated}}
+        <div {{bindAttr class=":row :component :col-md-3 view.nodeManagerComponent.componentName"}}>
+          <div class="summary-value main-info">
+            {{#if App.router.clusterController.isServiceContentFullyLoaded}}
+              {{#view App.ComponentLiveTextView liveComponentsBinding="view.service.nodeManagersStarted" totalComponentsBinding="view.service.nodeManagersTotal" tagName="span"}}
+                {{view.liveComponents}}/{{view.totalComponents}}
+              {{/view}}
+              {{t common.started}}
+            {{else}}
+              {{t common.loading.eclipses}}
+            {{/if}}
+          </div>
+          <div class="summary-label">
+            <a href="#" {{action filterHosts view.nodeManagerComponent}}>{{t dashboard.services.yarn.nodeManagers}}</a>
+          </div>
+        </div>
+      {{/if}}
+      {{! YARN Clients }}
+      <div {{bindAttr class=":row :component :col-md-3 view.yarnClientComponent.componentName"}}>
+        <div class="summary-value main-info">
+          <span>{{view.service.installedClients}} {{t common.installed}} </span>
+        </div>
+        <div class="summary-label">
+          <a {{action filterHosts view.yarnClientComponent}} href="javascript:void(null)">
+            {{pluralize view.service.installedClients singular="t:dashboard.services.yarn.client" plural="t:dashboard.services.yarn.clients"}}
+          </a>
+        </div>
       </div>
-      <div class="col-md-6 summary-value">
-        {{#if App.router.clusterController.isServiceContentFullyLoaded}}
-          {{#view App.ComponentLiveTextView liveComponentsBinding="view.service.nodeManagersStarted" totalComponentsBinding="view.service.nodeManagersTotal" tagName="span"}}
-            {{view.liveComponents}}/{{view.totalComponents}}
-          {{/view}}
-          {{t common.started}}
-        {{else}}
-          {{t common.loading.eclipses}}
-        {{/if}}
+      {{! ResourceManager Uptime }}
+      <div class="row col-md-3 resourcemanager-uptime">
+        <div class="summary-value main-info">{{view.nodeUptime}}</div>
+        <div class="summary-label">{{t dashboard.services.yarn.resourceManager.uptime}}</div>
+      </div>
+      {{! NodeManagers status }}
+      <div class="row col-md-3 nodemanager-status">
+        <div class="summary-value">
+          <div class="main-info">
+            <span {{translateAttr data-original-title="dashboard.services.yarn.nodeManagers.status.tooltip.active"}}
+                    rel="tooltip">
+              {{view._nmActive}} </span> /
+            <span {{translateAttr data-original-title="dashboard.services.yarn.nodeManagers.status.tooltip.lost"}}
+                    rel="tooltip">
+              {{view._nmLost}} </span> /
+            <span {{translateAttr data-original-title="dashboard.services.yarn.nodeManagers.status.tooltip.unhealthy"}}
+                    rel="tooltip">
+              {{view._nmUnhealthy}} </span> /
+            <span {{translateAttr data-original-title="dashboard.services.yarn.nodeManagers.status.tooltip.rebooted"}}
+                    rel="tooltip">
+              {{view._nmRebooted}} </span> /
+            <span {{translateAttr data-original-title="dashboard.services.yarn.nodeManagers.status.tooltip.decommissioned"}}
+                    rel="tooltip">
+              {{view._nmDecom}} </span>
+          </div>
+          <div class="info-desc">
+            <span {{t dashboard.services.yarn.nodeManagers.status.active}} </span> /
+            <span {{t dashboard.services.yarn.nodeManagers.status.lost}} </span> /
+            <span {{t dashboard.services.yarn.nodeManagers.status.unhealthy}} </span> /
+            <span {{t dashboard.services.yarn.nodeManagers.status.rebooted}} </span> /
+            <span {{t dashboard.services.yarn.nodeManagers.status.decommissioned}} </span>
+          </div>
+        </div>
+        <div class="summary-label">{{t dashboard.services.yarn.nodeManagers.status}}</div>
+      </div>
+      {{! ResourceManager Heap }}
+      <div class="row col-md-3 resourcemanager-heap">
+        <div class="summary-value main-info">{{view.nodeHeap}}</div>
+        <div class="summary-label">{{t dashboard.services.resourceManager.nodes.heap}}</div>
       </div>
     </div>
-  {{/if}}
-  {{! NodeManagers status }}
-  <div class="row nodemanager-status">
-    <div class="col-md-6 summary-label">{{t dashboard.services.yarn.nodeManagers.status}}</div>
-    <div class="col-md-6 summary-value">
-      <span {{translateAttr data-original-title="dashboard.services.yarn.nodeManagers.status.tooltip.active"}} rel="tooltip">
-      {{view._nmActive}} {{t dashboard.services.yarn.nodeManagers.status.active}} </span> /
-    <span {{translateAttr data-original-title="dashboard.services.yarn.nodeManagers.status.tooltip.lost"}} rel="tooltip">
-      {{view._nmLost}} {{t dashboard.services.yarn.nodeManagers.status.lost}} </span> /
-    <span {{translateAttr data-original-title="dashboard.services.yarn.nodeManagers.status.tooltip.unhealthy"}} rel="tooltip">
-      {{view._nmUnhealthy}} {{t dashboard.services.yarn.nodeManagers.status.unhealthy}} </span> /
-    <span {{translateAttr data-original-title="dashboard.services.yarn.nodeManagers.status.tooltip.rebooted"}} rel="tooltip">
-      {{view._nmRebooted}} {{t dashboard.services.yarn.nodeManagers.status.rebooted}} </span> /
-    <span {{translateAttr data-original-title="dashboard.services.yarn.nodeManagers.status.tooltip.decommissioned"}} rel="tooltip">
-      {{view._nmDecom}} {{t dashboard.services.yarn.nodeManagers.status.decommissioned}} </span>
-    </div>
-  </div>
-  {{! YARN Clients }}
-  <div {{bindAttr class=":row :component view.yarnClientComponent.componentName"}}>
-    <div class="col-md-6 summary-label">
-      <a {{action filterHosts view.yarnClientComponent}} href="javascript:void(null)">
-        {{pluralize view.service.installedClients singular="t:dashboard.services.yarn.client" plural="t:dashboard.services.yarn.clients"}}
-      </a>
-    </div>
-    <div class="col-md-6 summary-value">
-      <span class="green-live">{{view.service.installedClients}} </span>
-      {{pluralize view.service.installedClients singular="t:dashboard.services.yarn.client" plural="t:dashboard.services.yarn.clients"}} {{t common.installed}}
-    </div>
-  </div>
-  {{! ResourceManager Uptime }}
-  <div class="row resourcemanager-uptime">
-    <div class="col-md-6 summary-label">{{t dashboard.services.yarn.resourceManager.uptime}}</div>
-    <div class="col-md-6 summary-value">{{view.nodeUptime}}</div>
   </div>
-</div>
-{{! left column end }}
 
-{{! right column }}
-<div class="col-md-6">
-  {{! ResourceManager Heap }}
-  <div class="row resourcemanager-heap">
-    <div class="col-md-6 summary-label">{{t dashboard.services.resourceManager.nodes.heap}}</div>
-    <div class="col-md-6 summary-value">{{view.nodeHeap}}</div>
-  </div>
-  {{! Containers }}
-  <div class="row yarn-containers">
-    <div class="col-md-6 summary-label">{{t dashboard.services.yarn.containers}}</div>
-    <div class="col-md-6 summary-value">{{view.containers}}</div>
-  </div>
-  {{! Applications }}
-  <div class="row yarn-applications">
-    <div class="col-md-6 summary-label">{{t dashboard.services.yarn.apps}}</div>
-    <div class="col-md-6 summary-value">{{view.apps}}</div>
-  </div>
-  {{! Memory }}
-  <div class="row yarn-memory">
-    <div class="col-md-6 summary-label">{{t dashboard.services.yarn.memory}}</div>
-    <div class="col-md-6 summary-value">{{view.memory}}</div>
-  </div>
-  {{! Queues }}
-  <div class="row yarn-queues">
-    <div class="col-md-6 summary-label">{{t dashboard.services.yarn.queues}}</div>
-    <div class="col-md-6 summary-value">
-        <span rel="queue-tooltip" class="text-tooltip" {{bindAttr data-original-title="view.service.queueFormatted" }}>
-          {{view.queues}}
-        </span>
+  {{! Service Metrics Section }}
+  <div class="col-md-12 metrics-summary">
+    <div class="col-md-2">{{t dashboard.services.hdfs.summary.service-metrics}}</div>
+    <div class="col-md-10">
+      {{! Containers }}
+      <div class="row col-md-3 yarn-containers">
+        <div class="summary-value">
+          <div class="main-info">{{view.containers}}</div>
+          <div class="info-desc">{{t dashboard.services.yarn.containers.msgDesc}}</div>
+        </div>
+        <div class="summary-label">{{t dashboard.services.yarn.containers}}</div>
+      </div>
+      {{! Applications }}
+      <div class="row col-md-3 yarn-applications">
+        <div class="summary-value">
+          <div class="main-info">{{view.apps}}</div>
+          <div class="info-desc">{{t dashboard.services.yarn.apps.msgDesc}}</div>
+        </div>
+        <div class="summary-label">{{t dashboard.services.yarn.apps}}</div>
+      </div>
+      {{! Memory }}
+      <div class="row col-md-3 yarn-memory">
+        <div class="summary-value">
+          <div class="main-info">{{view.memory}}</div>
+          <div class="info-desc">{{t dashboard.services.yarn.memory.msgDesc}}</div>
+        </div>
+        <div class="summary-label">{{t dashboard.services.yarn.memory}}</div>
+      </div>
+      {{! Queues }}
+      <div class="row col-md-3 yarn-queues">
+        <div class="summary-value main-info">
+          <span rel="queue-tooltip"
+                class="text-tooltip" {{bindAttr data-original-title="view.service.queueFormatted" }}>
+            {{view.queues}}
+          </span>
+        </div>
+        <div class="summary-label">{{t dashboard.services.yarn.queues}}</div>
+      </div>
     </div>
   </div>
-</div>
-{{! right column end }}
+  {{! right column end }}
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/views/common/quick_view_link_view.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/common/quick_view_link_view.js b/ambari-web/app/views/common/quick_view_link_view.js
index 47958f4..e39f230 100644
--- a/ambari-web/app/views/common/quick_view_link_view.js
+++ b/ambari-web/app/views/common/quick_view_link_view.js
@@ -39,6 +39,11 @@ App.QuickLinksView = Em.View.extend({
   showQuickLinks: false,
 
   /**
+   * @type {boolean}
+   */
+  showNoLinks: false,
+
+  /**
    * @type {string}
    */
   quickLinksErrorMessage: '',
@@ -211,6 +216,9 @@ App.QuickLinksView = Em.View.extend({
         this.set('requiredSiteNames', this.get('requiredSiteNames').pushObjects(sites).uniq());
         this.setQuickLinks();
       }
+    } else {
+      this.set('showNoLinks', true);
+
     }
   },
 
@@ -260,7 +268,11 @@ App.QuickLinksView = Em.View.extend({
     // no need to set quicklinks if
     // 1)current service does not have quick links configured
     // 2)No host component present for the configured quicklinks
-    this.set('showQuickLinks', hasQuickLinks && hasHosts);
+    if(hasQuickLinks && hasHosts) {
+      this.set('showQuickLinks', true);
+    } else {
+      this.set('showNoLinks', true);
+    }
 
     var isMultipleComponentsInLinks = componentNames.uniq().length > 1;
 

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/views/common/widget/gauge_widget_view.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/common/widget/gauge_widget_view.js b/ambari-web/app/views/common/widget/gauge_widget_view.js
index 42224fe..e359567 100644
--- a/ambari-web/app/views/common/widget/gauge_widget_view.js
+++ b/ambari-web/app/views/common/widget/gauge_widget_view.js
@@ -60,8 +60,8 @@ App.GaugeWidgetView = Em.View.extend(App.WidgetMixin, {
   }.property('value'),
 
   chartView: App.ChartPieView.extend({
-    stroke: '#D6DDDF',  //light grey
-    innerR: 25,
+    stroke: '#transparent',
+    innerR: 40,
 
     /**
      * since chart widget using percentage values factor equal 100
@@ -105,20 +105,18 @@ App.GaugeWidgetView = Em.View.extend(App.WidgetMixin, {
       var color_orange = App.healthStatusOrange;
       if ((isNaN(threshold1) && isNaN(threshold2)) || (isNaN(threshold1) && used <= threshold2) || (isNaN(threshold2) && used <= threshold1) || (!isNaN(threshold2) && (threshold1 > threshold2) && (used > threshold1)) || (!isNaN(threshold2) && (threshold1 < threshold2) && (used <= threshold1))) {
         this.set('palette', new Rickshaw.Color.Palette({
-          scheme: ['#FFFFFF', color_green].reverse()
+          scheme: ['#DDDDDD', color_green].reverse()
         }));
-        return color_green;
       } else if ((!isNaN(threshold2) && used.isInRange(threshold1, threshold2)) || (isNaN(threshold2) && used > threshold1)) {
         this.set('palette', new Rickshaw.Color.Palette({
-          scheme: ['#FFFFFF', color_orange].reverse()
+          scheme: ['#DDDDDD', color_orange].reverse()
         }));
-        return color_orange;
       } else {
         this.set('palette', new Rickshaw.Color.Palette({
-          scheme: ['#FFFFFF', color_red].reverse()
+          scheme: ['#DDDDDD', color_red].reverse()
         }));
-        return color_red;
       }
+      return App.widgetContentColor;
     }.property('parentView.value', 'warningThreshold', 'errorThreshold'),
 
     // refresh text and color when data in model changed

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/views/main/service/info/summary.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/service/info/summary.js b/ambari-web/app/views/main/service/info/summary.js
index 75d4ed5..69e339a 100644
--- a/ambari-web/app/views/main/service/info/summary.js
+++ b/ambari-web/app/views/main/service/info/summary.js
@@ -229,6 +229,30 @@ App.MainServiceInfoSummaryView = Em.View.extend(App.Persist, App.TimeRangeMixin,
 
   service: null,
 
+  svc: function () {
+    var svc = this.get('controller.content');
+    var svcName = svc.get('serviceName');
+    if (svcName) {
+      switch (svcName.toLowerCase()) {
+        case 'hdfs':
+          svc = App.HDFSService.find().objectAt(0);
+          break;
+        case 'yarn':
+          svc = App.YARNService.find().objectAt(0);
+          break;
+        case 'hbase':
+          svc = App.HBaseService.find().objectAt(0);
+          break;
+        case 'flume':
+          svc = App.FlumeService.find().objectAt(0);
+          break;
+        default:
+          break;
+      }
+    }
+    return svc;
+  }.property('controller.content.serviceName').volatile(),
+
   getServiceModel: function (serviceName) {
     var extended = App.Service.extendedModel[serviceName];
     if (extended) {

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/views/main/service/service.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/service/service.js b/ambari-web/app/views/main/service/service.js
index f2c8492..41afca3 100644
--- a/ambari-web/app/views/main/service/service.js
+++ b/ambari-web/app/views/main/service/service.js
@@ -113,7 +113,6 @@ App.MainDashboardServiceHealthView = Em.View.extend({
 });
 
 App.ComponentLiveTextView = Em.View.extend({
-  classNameBindings: ['color:service-summary-component-red-dead:service-summary-component-green-live'],
   liveComponents: null,
   totalComponents: null,
   color: function () {
@@ -173,15 +172,21 @@ App.MainDashboardServiceView = Em.View.extend(App.MainDashboardServiceViewWrappe
 });
 
 App.MainDashboardServiceView.reopenClass({
-  formattedHeap: function (i18nKey, heapUsedKey, heapMaxKey) {
+  formattedHeapPercent: function (i18nKey, heapUsedKey, heapMaxKey) {
     return Em.computed(heapUsedKey, heapMaxKey, function () {
       var memUsed = Em.get(this, heapUsedKey);
       var memMax = Em.get(this, heapMaxKey);
       var percent = memMax > 0 ? 100 * memUsed / memMax : 0;
+      return Em.I18n.t(i18nKey).format(percent.toFixed(1));
+    });
+  },
+  formattedHeap: function (i18nKey, heapUsedKey, heapMaxKey) {
+    return Em.computed(heapUsedKey, heapMaxKey, function () {
+      var memUsed = Em.get(this, heapUsedKey);
+      var memMax = Em.get(this, heapMaxKey);
       return Em.I18n.t(i18nKey).format(
         numberUtils.bytesToSize(memUsed, 1, 'parseFloat'),
-        numberUtils.bytesToSize(memMax, 1, 'parseFloat'),
-        percent.toFixed(1));
+        numberUtils.bytesToSize(memMax, 1, 'parseFloat'));
     });
   }
 });
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/views/main/service/services/hbase.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/service/services/hbase.js b/ambari-web/app/views/main/service/services/hbase.js
index ddcb18d..fd889a9 100644
--- a/ambari-web/app/views/main/service/services/hbase.js
+++ b/ambari-web/app/views/main/service/services/hbase.js
@@ -58,7 +58,7 @@ App.MainDashboardServiceHbaseView = App.MainDashboardServiceView.extend({
   activeMasterTitle: Em.I18n.t('service.hbase.activeMaster'),
 
   masterServerHeapSummary: App.MainDashboardServiceView.formattedHeap('dashboard.services.hbase.masterServerHeap.summary', 'service.heapMemoryUsed', 'service.heapMemoryMax'),
-
+  masterServerHeapSummaryPercent: App.MainDashboardServiceView.formattedHeapPercent('dashboard.services.hbase.masterServerHeap.percent', 'service.heapMemoryUsed', 'service.heapMemoryMax'),
   summaryHeader: function () {
     var avgLoad = this.get('service.averageLoad');
     if (isNaN(avgLoad)) {

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/views/main/service/services/hdfs.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/service/services/hdfs.js b/ambari-web/app/views/main/service/services/hdfs.js
index becb75c..e0580f1 100644
--- a/ambari-web/app/views/main/service/services/hdfs.js
+++ b/ambari-web/app/views/main/service/services/hdfs.js
@@ -28,7 +28,20 @@ function diskPart(i18nKey, totalKey, usedKey) {
     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(used, 1, 'parseFloat'), numberUtils.bytesToSize(total, 1, 'parseFloat'));
+  });
+}
+
+function diskPartPercent(i18nKey, totalKey, usedKey) {
+  return Em.computed(totalKey, usedKey, function () {
+    var text = Em.I18n.t(i18nKey);
+    var total = this.get(totalKey);
+    var used = this.get(usedKey);
+    var percent = total > 0 ? ((used * 100) / total).toFixed(2) : 0;
+    if (percent == "NaN" || percent < 0) {
+      percent = Em.I18n.t('services.service.summary.notAvailable') + " ";
+    }
+    return text.format(percent);
   });
 }
 
@@ -113,9 +126,11 @@ App.MainDashboardServiceHdfsView = App.MainDashboardServiceView.extend({
     return this.t('services.service.summary.notRunning');
   }.property("service.nameNodeStartTime"),
 
+  nodeHeapPercent: App.MainDashboardServiceView.formattedHeapPercent('dashboard.services.hdfs.nodes.heapUsedPercent', 'service.jvmMemoryHeapUsed', 'service.jvmMemoryHeapMax'),
   nodeHeap: App.MainDashboardServiceView.formattedHeap('dashboard.services.hdfs.nodes.heapUsed', 'service.jvmMemoryHeapUsed', 'service.jvmMemoryHeapMax'),
 
   dfsUsedDisk: diskPart('dashboard.services.hdfs.capacityUsed', 'service.capacityTotal', 'service.capacityUsed'),
+  dfsUsedDiskPercent: diskPartPercent('dashboard.services.hdfs.capacityUsedPercent', 'service.capacityTotal', 'service.capacityUsed'),
 
   nonDfsUsed: function () {
     var total = this.get('service.capacityTotal');
@@ -125,8 +140,10 @@ App.MainDashboardServiceHdfsView = App.MainDashboardServiceView.extend({
   }.property('service.capacityTotal', 'service.capacityRemaining', 'service.capacityUsed'),
 
   nonDfsUsedDisk: diskPart('dashboard.services.hdfs.capacityUsed', 'service.capacityTotal', 'nonDfsUsed'),
+  nonDfsUsedDiskPercent: diskPartPercent('dashboard.services.hdfs.capacityUsedPercent', 'service.capacityTotal', 'nonDfsUsed'),
 
   remainingDisk: diskPart('dashboard.services.hdfs.capacityUsed', 'service.capacityTotal', 'service.capacityRemaining'),
+  remainingDiskPercent: diskPartPercent('dashboard.services.hdfs.capacityUsedPercent', 'service.capacityTotal', 'service.capacityRemaining'),
 
   dataNodeComponent: Em.Object.create({
     componentName: 'DATANODE'

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/views/main/service/services/yarn.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/service/services/yarn.js b/ambari-web/app/views/main/service/services/yarn.js
index 84ba520..3533585 100644
--- a/ambari-web/app/views/main/service/services/yarn.js
+++ b/ambari-web/app/views/main/service/services/yarn.js
@@ -24,7 +24,8 @@ App.MainDashboardServiceYARNView = App.MainDashboardServiceView.extend({
   serviceName: 'YARN',
 
   nodeHeap: App.MainDashboardServiceView.formattedHeap('dashboard.services.yarn.nodes.heapUsed', 'service.jvmMemoryHeapUsed', 'service.jvmMemoryHeapMax'),
-  
+  nodeHeapPercent: App.MainDashboardServiceView.formattedHeapPercent('dashboard.services.yarn.nodes.heapUsedPercent', 'service.jvmMemoryHeapUsed', 'service.jvmMemoryHeapMax'),
+
   nodeManagerComponent: Em.Object.create({
     componentName: 'NODEMANAGER'
   }),

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/test/views/common/widget/gauge_widget_view_test.js
----------------------------------------------------------------------
diff --git a/ambari-web/test/views/common/widget/gauge_widget_view_test.js b/ambari-web/test/views/common/widget/gauge_widget_view_test.js
index 1967289..2c8ef30 100644
--- a/ambari-web/test/views/common/widget/gauge_widget_view_test.js
+++ b/ambari-web/test/views/common/widget/gauge_widget_view_test.js
@@ -251,7 +251,7 @@ describe('App.GaugeWidgetView', function () {
         view.set('value', test.data.value);
         view.set('content.properties.warning_threshold', test.data.warningThreshold);
         view.set('content.properties.error_threshold', test.data.criticalThreshold);
-        expect(chartView.get('contentColor')).to.eql(test.result);
+        expect(chartView.get('palette').color(0)).to.eql(test.result);
       });
     });
   });


[2/2] ambari git commit: AMBARI-21324 - Ambari 3.0: Outstanding Services page issues (Ishan Bhatt via rzang)

Posted by rz...@apache.org.
AMBARI-21324 - Ambari 3.0: Outstanding Services page issues (Ishan Bhatt via rzang)

Change-Id: Ia8e61e033670b7924abba13ba9fed4153241062f


Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/6305fb6a
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/6305fb6a
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/6305fb6a

Branch: refs/heads/trunk
Commit: 6305fb6ab9839f20eb871eca5d933e6590f20981
Parents: 45a2990
Author: Richard Zang <rz...@apache.org>
Authored: Thu Jun 22 12:29:10 2017 -0700
Committer: Richard Zang <rz...@apache.org>
Committed: Thu Jun 22 12:30:06 2017 -0700

----------------------------------------------------------------------
 ambari-web/app/messages.js                      |  34 ++-
 ambari-web/app/styles/alerts.less               |  52 +++-
 ambari-web/app/styles/application.less          |  91 ++++++-
 ambari-web/app/styles/bootstrap_overrides.less  |  18 +-
 ambari-web/app/styles/dashboard.less            |   9 +-
 .../app/styles/enhanced_service_dashboard.less  |  79 ++++--
 .../templates/common/export_metrics_menu.hbs    |  16 +-
 .../templates/common/widget/gauge_widget.hbs    |  33 ++-
 .../templates/common/widget/graph_widget.hbs    |  44 +--
 .../templates/common/widget/number_widget.hbs   |  33 ++-
 .../templates/common/widget/template_widget.hbs |  35 ++-
 .../main/dashboard/widgets/cluster_metrics.hbs  |  19 +-
 .../app/templates/main/service/info/summary.hbs |  91 +++++--
 .../main/service/info/summary/base.hbs          |  13 +-
 .../service/info/summary/client_components.hbs  |  10 +-
 .../service/info/summary/master_components.hbs  |  26 +-
 .../service/info/summary/slave_components.hbs   |  12 +-
 ambari-web/app/templates/main/service/item.hbs  |  40 +--
 .../templates/main/service/services/hbase.hbs   | 128 +++++----
 .../templates/main/service/services/hdfs.hbs    | 270 ++++++++++---------
 .../templates/main/service/services/hive.hbs    |  13 +-
 .../templates/main/service/services/ranger.hbs  |  59 ++--
 .../templates/main/service/services/storm.hbs   | 118 ++++----
 .../templates/main/service/services/yarn.hbs    | 194 +++++++------
 .../app/views/common/quick_view_link_view.js    |  14 +-
 .../views/common/widget/gauge_widget_view.js    |  14 +-
 .../app/views/main/service/info/summary.js      |  24 ++
 ambari-web/app/views/main/service/service.js    |  13 +-
 .../app/views/main/service/services/hbase.js    |   2 +-
 .../app/views/main/service/services/hdfs.js     |  19 +-
 .../app/views/main/service/services/yarn.js     |   3 +-
 .../common/widget/gauge_widget_view_test.js     |   2 +-
 32 files changed, 937 insertions(+), 591 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/messages.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js
index 092c5b4..6feebb1 100644
--- a/ambari-web/app/messages.js
+++ b/ambari-web/app/messages.js
@@ -341,6 +341,8 @@ Em.I18n.translations = {
   'common.logs': 'Logs',
   'common.warn.message': '<div class="alert alert-warning">{0}</div>',
   'common.link': 'Link',
+  'common.noLink': 'No Links',
+  'common.live': 'Live',
   'common.from.version': 'From Version',
   'common.to.version': 'To Version',
   'common.start.time': 'Start Time',
@@ -1899,12 +1901,10 @@ Em.I18n.translations = {
   'services.service.summary.viewHost':'View Host',
   'services.service.summary.viewHosts':'View Hosts',
   'services.service.summary.clientOnlyService.ToolTip':'Client-only service',
-  'services.service.summary.JournalNodesLive':'JournalNodes Live',
   'services.service.summary.mapreduce2.client':'MapReduce2 Client',
   'services.service.summary.mapreduce2.clients':'MapReduce2 Clients',
   'services.service.summary.nodeManagersLive':'NodeManagers Live',
   'services.service.summary.TrackersLive':'Trackers Live',
-  'services.service.summary.RegionServersLIVE':'RegionServers Live',
   'services.service.summary.PhoenixServersLIVE':'Phoenix Query servers Live',
   'services.service.summary.GangliaMonitorsLIVE':'Ganglia Monitors Live',
   'services.service.summary.SupervisorsLIVE':'Supervisors Live',
@@ -1993,7 +1993,6 @@ Em.I18n.translations = {
   'services.service.actions.run.clearHawqCache.label':'Clear HAWQ\'s HDFS Metadata Cache',
   'services.service.actions.run.runHawqCheck.label':'Run HAWQ Config Check',
   'services.service.actions.manage_configuration_groups.short':'Manage Config Groups',
-  'services.service.actions.serviceActions':'Service Actions',
   'services.service.actions.hsi.alertPopup.header':'Cannot enable Interactive Query',
   'services.service.actions.hsi.alertPopup.body':'You cannot enable Interactive Query now because Interactive Query is in the process of being disabled. This may take a few minutes. Try again later.',
 
@@ -2040,7 +2039,7 @@ Em.I18n.translations = {
   'services.service.summary.ranger.plugin.title': 'Ranger {0} plugin',
   'services.service.summary.ranger.plugin.loadingStatus': 'Loading status...',
 
-  'services.service.summary.alerts.noAlerts': 'No alerts',
+  'services.service.summary.alerts.noAlerts': '0',
   'services.service.summary.alerts.alertsExist': '{0} alerts',
   'services.service.summary.alerts.popup.header': 'Alerts for {0}',
 
@@ -2900,6 +2899,8 @@ Em.I18n.translations = {
   'dashboard.services.uptime':'{0}',
   'dashboard.services.summary.slaves.live': 'Live',
   'dashboard.services.hdfs.summary':'{0} of {1} nodes live, {2}% capacity used',
+  'dashboard.services.hdfs.summary.components': 'COMPONENT',
+  'dashboard.services.hdfs.summary.service-metrics': 'SERVICE METRICS',
   'dashboard.services.hdfs.nanmenode':'NameNode',
   'dashboard.services.hdfs.snanmenode':'Secondary NameNode',
   'dashboard.services.hdfs.journalnodes':'JournalNodes',
@@ -2907,7 +2908,8 @@ Em.I18n.translations = {
   '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 Remaining',
-  'dashboard.services.hdfs.capacityUsed':'{0} / {1} ({2}%)',
+  'dashboard.services.hdfs.capacityUsed':'{0} / {1}',
+  'dashboard.services.hdfs.capacityUsedPercent':'{0}%',
   'dashboard.services.hdfs.totalFilesAndDirs':'Total Files + Directories',
   'dashboard.services.hdfs.datanodes':'DataNodes',
   'dashboard.services.hdfs.datanodecounts':'DataNodes Status',
@@ -2919,9 +2921,12 @@ Em.I18n.translations = {
   'dashboard.services.hdfs.nodes.decom':'decommissioning',
   '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.nodes.heapUsedPercent':'{0}%',
+  'dashboard.services.hdfs.nodes.heapUsed':'{0} / {1}',
+
   'dashboard.services.hdfs.chart.label':'Capacity (Used/Total)',
-  'dashboard.services.hdfs.blockErrors':'{0} corrupt replica / {1} missing / {2} under replicated',
+  'dashboard.services.hdfs.blockErrors':'{0} / {1} / {2}',
+  'dashboard.services.hdfs.blockErrorsDesc':'corrupt replica / missing / under replicated',
   'dashboard.services.hdfs.datanode.status.tooltip.live': 'This is the number of DataNodes that are live as reported from ' +
     'the NameNode. Even if a DataNode process is up, NameNode might see the status as dead ' +
     'if the DataNode is not communicating with the NameNode as expected. This can be due situations ' +
@@ -2940,7 +2945,8 @@ Em.I18n.translations = {
   'dashboard.services.yarn.resourceManager':'ResourceManager',
   'dashboard.services.yarn.nodeManagers':'NodeManagers',
   'dashboard.services.yarn.nodeManager':'NodeManager',
-  'dashboard.services.yarn.nodes.heapUsed':'{0} / {1} ({2}% used)',
+  'dashboard.services.yarn.nodes.heapUsed':'{0} / {1}',
+  'dashboard.services.yarn.nodes.heapUsedPercent':'{0}%',
   'dashboard.services.yarn.clients':'YARN Clients',
   'dashboard.services.yarn.client':'YARN Client',
   'dashboard.services.yarn.resourceManager.uptime':'ResourceManager Uptime',
@@ -2961,11 +2967,14 @@ Em.I18n.translations = {
   'dashboard.services.yarn.nodeManagers.status.tooltip.rebooted': 'This is the number of NodeManagers that are in the rebooted state as reported from the ResourceManager.',
   'dashboard.services.yarn.nodeManagers.status.tooltip.decommissioned': 'This is the number of NodeManagers that are decommissioned as reported from the ResourceManager.',
   'dashboard.services.yarn.containers': 'Containers',
-  'dashboard.services.yarn.containers.msg': '{0} allocated / {1} pending / {2} reserved',
+  'dashboard.services.yarn.containers.msg': '{0} / {1} / {2}',
+  'dashboard.services.yarn.containers.msgDesc': 'allocated / pending / reserved',
   'dashboard.services.yarn.apps': 'Applications',
-  'dashboard.services.yarn.apps.msg': '{0} submitted / {1} running / {2} pending / {3} completed / {4} killed / {5} failed',
+  'dashboard.services.yarn.apps.msg': '{0} / {1} / {2} / {3} / {4} / {5}',
+  'dashboard.services.yarn.apps.msgDesc': 'submitted / running / pending / completed / killed / failed',
   'dashboard.services.yarn.memory': 'Cluster Memory',
-  'dashboard.services.yarn.memory.msg': '{0} used / {1} reserved / {2} available',
+  'dashboard.services.yarn.memory.msg': '{0} / {1} / {2}',
+  'dashboard.services.yarn.memory.msgDesc': 'used / reserved / available',
   'dashboard.services.yarn.queues': 'Queues',
   'dashboard.services.yarn.queues.msg': '{0} Queues',
   'dashboard.services.hawq.hawqSegments':'HAWQ Segments',
@@ -2986,7 +2995,8 @@ Em.I18n.translations = {
   'dashboard.services.hbase.masterServer.standby':'Standby HBase Master',
   'dashboard.services.hbase.noMasterServer':'No Active Master',
   'dashboard.services.hbase.masterServerHeap':'Master Heap',
-  'dashboard.services.hbase.masterServerHeap.summary':'{0} / {1} ({2}% used)',
+  'dashboard.services.hbase.masterServerHeap.summary':'{0} / {1}',
+  'dashboard.services.hbase.masterServerHeap.percent':'{0}%',
   'dashboard.services.hbase.masterServerUptime':'Master Server Uptime',
   'dashboard.services.hbase.averageLoad':'Average Load',
   'dashboard.services.hbase.averageLoadPerServer':'{0} regions per RegionServer',

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/styles/alerts.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/alerts.less b/ambari-web/app/styles/alerts.less
index 60964e2..7db45f1 100644
--- a/ambari-web/app/styles/alerts.less
+++ b/ambari-web/app/styles/alerts.less
@@ -375,9 +375,38 @@
 
 .service-block .summary-box-header {
   .alerts-crit-count, .alerts-warn-count, .no-alerts-label {
-    padding: 4px 5px;
-    margin: 4px;
-    font-size: 14px;
+    padding: 3px 5px;
+    font-size: 10px;
+    border-radius: 50%;
+    min-width: 16px;
+    height: 16px;
+    color: #ffffff;
+    text-align: center;
+    display: inline-block;
+    position: relative;
+    top: -3px;
+  }
+  .glyphicon {
+    color: #999999;
+    cursor: pointer;
+    font-size: 16px;
+    top: 3px;
+    left: 4px;
+  }
+}
+
+.summary-value {
+  .alerts-crit-count, .alerts-warn-count, .no-alerts-label {
+    padding: 2px 3px 2px 3px;
+    font-size: 9px;
+    border-radius: 50%;
+    width: 13px;
+    height: 13px;
+    color: #ffffff;
+    text-align: center;
+    display: inline-block;
+    position: relative;
+    top: -2px;
   }
 }
 
@@ -411,10 +440,19 @@
 
 .service-alerts-popup {
   .modal {
-    .modal-content {
-      .modal-body {
-        padding-left: 0;
-        padding-right: 0;
+    .modal-dialog{
+      width: 800px;
+      .modal-content {
+        height: 500px;
+        .modal-body {
+          padding-left: 0;
+          padding-right: 0;
+          height: 70%;
+          font-size: 14px;
+          .definition-latest-text {
+            font-size: 12px;
+          }
+        }
       }
     }
   }

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/styles/application.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less
index 8ae11b5..29788bc 100644
--- a/ambari-web/app/styles/application.less
+++ b/ambari-web/app/styles/application.less
@@ -26,6 +26,7 @@ body {
 
 html, body {
   height: 100%;
+  background-color: #f0f0f0;
 }
 
 .form-text {
@@ -76,7 +77,6 @@ footer {
   position: relative;
   border-top: 1px solid #e5e5e5;
   padding: 30px 0;
-  background-color: #fff;
   color: #666;
   margin-top: -1 * @footer-height - 1;
   height: @footer-height - 60px;
@@ -346,7 +346,7 @@ footer {
 }
 
 #content {
-  padding: 15px 0;
+  padding: 0 0 15px 0;
 }
 
 .badge-important {
@@ -1042,12 +1042,12 @@ a:focus {
 .services, .summary-info {
   .tab-marker-position(@color) {
     color: @color;
-    background-position:  0 3px;
+    background-position:  0 7px;
     background-repeat: no-repeat;
     list-style: none;
-    height: 20px;
-    width: 20px;
-    margin-left: 0;
+    height: 13px;
+    width: 13px;
+    margin: 0 3px 0 0 ;
     display: inline !important;
     float: none !important;
   }
@@ -1079,13 +1079,21 @@ a:focus {
   .upgrade-status-warning {
     color: @health-status-red;
   }
+
+  .col-md-3 {
+    min-height: 100px;
+    margin-left: 2px;
+    min-width: 150px;
+  }
   .summary-label {
-    text-align: right;
+    font-size: 12px;
+    text-transform: uppercase;
+    margin-top: 5px;
   }
-  a {
-    text-decoration: underline;
-    &:hover {
-      text-decoration: none;
+  .summary-value {
+    color: #333333;
+    span {
+      display: inline-block;
     }
   }
 }
@@ -1383,6 +1391,28 @@ a.services-menu-blocks{
 
 .service-block {
   margin-top: 20px;
+  .summary-links-block {
+    display: flex;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flex;
+    display: -o-flex;
+  }
+  .panel, .panel-heading{
+    border: none;
+  }
+  .panel-title {
+    font-size: 20px;
+  }
+  .service-alerts {
+    margin-top: 10px;
+  }
+  .quick-links-block {
+    .panel-body > a{
+      display: block;
+      margin-bottom: 5px;
+    }
+  }
 }
 
 .service-button {
@@ -2701,4 +2731,43 @@ a.abort-icon:hover {
   padding: 0px;
   border: none;
   background: none;
+}
+
+.summary-block {
+  flex: 1;
+  .metrics-summary {
+    margin-top:40px;
+  }
+  .component-summary, .metrics-summary {
+    .col-md-2 {
+      float:left;
+      padding-left: 0px;
+      top: 7px;
+      font-size: 12px;
+      font-weight: bold;
+    }
+    .col-md-10 {
+      float: right;
+    }
+    .main-info {
+      font-size: 16px;
+    }
+    .info-desc {
+      font-size: 12px;
+      color: #999999;
+    }
+  }
+}
+
+.quick-links-block {
+  width: 18%;
+  margin: 0 0 20px 20px;
+  .col-lg-12 {
+    float: none !important;
+  }
+  .panel-body {
+    padding-top: 0px;
+    color: #999999;
+    font-size: 12px;
+  }
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/styles/bootstrap_overrides.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/bootstrap_overrides.less b/ambari-web/app/styles/bootstrap_overrides.less
index 0960a52..8ba49d1 100644
--- a/ambari-web/app/styles/bootstrap_overrides.less
+++ b/ambari-web/app/styles/bootstrap_overrides.less
@@ -106,7 +106,7 @@ select.form-control {
 .panel {
   background-color: #fff;
   .panel-heading {
-    background-color: #f0f0f0;
+    background-color: #fff;
     .panel-title {
       line-height: 34px;
     }
@@ -285,6 +285,10 @@ select.form-control {
   color: #fff;
 }
 
+.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
+  background-color: #f0f0f0;
+}
+
 @media (max-width: 992px) {
   .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
     float: left;
@@ -347,10 +351,14 @@ select.form-control {
     width: 1130px;
   }
 
-  .main-container {
+  .main-container, .container {
     width: 1170px;
   }
 
+  #top-nav {
+    min-width: 1170px;
+  }
+
   .contribview  .main-container {
     width: auto;
   }
@@ -395,10 +403,14 @@ select.form-control {
     width: 1300px;
   }
 
-  .main-container {
+  .main-container, .container {
     width: 1340px;
   }
 
+  #top-nav {
+    min-width: 1340px;
+  }
+
   .contribview  .main-container {
     width: auto;
   }

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/styles/dashboard.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/dashboard.less b/ambari-web/app/styles/dashboard.less
index 913fc35..f413caa 100644
--- a/ambari-web/app/styles/dashboard.less
+++ b/ambari-web/app/styles/dashboard.less
@@ -31,7 +31,7 @@
     clear: both;
     display: inline-block;
     padding: 10px;
-    background-color: #ececec;
+    background-color: #ffffff;
   }
   #widgets-options-menu {
     .add-widgets-text .dropdown-menu {
@@ -79,13 +79,14 @@
 
     .img-thumbnail .corner-icon {
       position: relative;
-      color: #999999;
+      color: #666666;
       font-size: 14px;
-      padding: 10px 15px 20px 15px;
+      padding: 10px 15px 0 0;
       float: right;
       ul {
         top: inherit;
-        margin-left: 20px;
+        display: none;
+        border-radius: 2px;
       }
       li{
         padding: 2.5px 0 2.5px 5px;

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/styles/enhanced_service_dashboard.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/enhanced_service_dashboard.less b/ambari-web/app/styles/enhanced_service_dashboard.less
index 1dd645b..34a4763 100644
--- a/ambari-web/app/styles/enhanced_service_dashboard.less
+++ b/ambari-web/app/styles/enhanced_service_dashboard.less
@@ -24,14 +24,20 @@
 
 .service-metrics-block {
 
+  clear: both;
+
   #add-widget-action-box {
     background-color: @add-widget-btn-color;
-    width: 98%;
+    width: 97%;
+    height: 100%;
     padding: 43px;
     border: 1px solid @border-color;
-    border-radius: 0;
-    -webkit-border-radius: 0;
-    -moz-border-radius: 0;
+    border-radius: 2px;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    -webkit-box-shadow: 0px 1px 1px 0px rgba(51, 51, 51, 0.15);
+    -moz-box-shadow: 0px 1px 1px 0px rgba(51, 51, 51, 0.15);
+    box-shadow: 0px 1px 1px 0px rgba(51, 51, 51, 0.15);
     background-image: none;
     .glyphicon-plus {
       font-size: 70px;
@@ -50,6 +56,10 @@
       right: -5px;
     }
   }
+
+  .actions {
+    margin-right: 5px;
+  }
 }
 
 #widget_layout,
@@ -59,7 +69,8 @@
     width: 93%;
   }
   .span2p4 {
-    width: 19.3%;
+    width: 22.7%;
+    height: 100%;
     background-color: white;
     margin: 5px 0 5px 5px;
     float: left;
@@ -74,8 +85,8 @@
     }
     .title {
       padding: 4px 0 0 1px;
-      font-weight: bold;
-      font-size: 13px;
+      font-size: 14px;
+      color: #666666;
       line-height: 17px;
       text-align: left;
       height: 40px;
@@ -88,9 +99,8 @@
     }
     .content {
       text-align: center;
-      color: @health-status-green;
-      font-weight: bold;
-      font-size: 35px;
+      color: #666666;
+      font-size: 30px;
       width: 95%;
     }
     .template-widget {
@@ -170,10 +180,10 @@
       color: @health-status-orange;
     }
     .green {
-      color: @health-status-green;
+      color: #666666;
     }
     .grey {
-      color: #D6DDDF;
+      color: #999999;
     }
   }
 }
@@ -183,9 +193,6 @@
   margin: auto;
   margin-bottom: 20px;
   .widget {
-    .img-thumbnail .corner-icon {
-      display: none;
-    }
     .graph-widget {
       .chart-container {
         cursor: default;
@@ -198,8 +205,11 @@
   .widget {
     .img-thumbnail {
       box-sizing: content-box;
+      border-radius: 2px;
+      -webkit-box-shadow: 0px 1px 1px 0px rgba(51, 51, 51, 0.15);
+      -moz-box-shadow: 0px 1px 1px 0px rgba(51, 51, 51, 0.15);
+      box-shadow: 0px 1px 1px 0px rgba(51, 51, 51, 0.15);
       .corner-icon {
-        display: none;
         .glyphicon-remove-sign{
           color: #000;
           text-shadow: #fff 0 0 15px;
@@ -212,18 +222,31 @@
         position: absolute;
         right: 5px;
         top: 6px;
-        .corner-icon {
-          i {
-            position: relative;
-            color: #555;
-            font-weight: bold;
-            text-shadow: #fff -8px 8px 8px, #fff 8px 8px 8px, #fff -8px -8px 8px, #fff 8px -8px 8px;
-            background-color: rgba(255,255,255,0.6);
-            padding: 5px 5px 5px 2px;
-          }
-          &.hidden i {
-            display: none;
-          }
+        ul {
+          display: none;
+          border-radius: 2px;
+        }
+        a {
+          padding: 3px 5px;
+          cursor: pointer;
+          color: #666666;
+        }
+        li:hover {
+          background-color: #f5f5f5;
+        }
+        i {
+          position: relative;
+          text-shadow: #fff -8px 8px 8px, #fff 8px 8px 8px, #fff -8px -8px 8px, #fff 8px -8px 8px;
+          background-color: rgba(255,255,255,0.6);
+          padding: 5px 5px 5px 2px;
+        }
+      }
+      .widget-icons:hover {
+        .ellipsis-menu::after {
+          color: #666666;
+        }
+        ul {
+          display: block;
         }
       }
       .export-graph-list {

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/common/export_metrics_menu.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/export_metrics_menu.hbs b/ambari-web/app/templates/common/export_metrics_menu.hbs
index 0d4ead9..c48065a 100644
--- a/ambari-web/app/templates/common/export_metrics_menu.hbs
+++ b/ambari-web/app/templates/common/export_metrics_menu.hbs
@@ -16,17 +16,7 @@
 * limitations under the License.
 }}
 
-<ul class="dropdown-menu">
-  <li><button {{action exportGraphData view.parentView.exportToCSVArgument target="view.parentView"}}
-          class="button-border">
-    <i class="icon-file-text"></i>&nbsp;{{t common.csv}}</button>
-  </li>
-  <li><button {{action exportGraphData target="view.parentView"}}
-          class="button-border">
-    <i class="icon-file-text-alt"></i>&nbsp;{{t common.json}}</button>
-  </li>
-  <li><button {{action deleteWidget target="view.parentView"}} href="#"
-          class="button-border">
-    <i class="icon-trash"></i>&nbsp;{{t common.delete}}</button>
-  </li>
+<ul class="export-graph-list pull-right dropdown-menu">
+  <li><a {{action exportGraphData view.parentView.exportToCSVArgument target="view.parentView"}}>{{t common.csv}}</a></li>
+  <li><a {{action exportGraphData target="view.parentView"}}>{{t common.json}}</a></li>
 </ul>

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/common/widget/gauge_widget.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/widget/gauge_widget.hbs b/ambari-web/app/templates/common/widget/gauge_widget.hbs
index 83d4a49..9c776b3 100644
--- a/ambari-web/app/templates/common/widget/gauge_widget.hbs
+++ b/ambari-web/app/templates/common/widget/gauge_widget.hbs
@@ -18,19 +18,28 @@
 
 <div class="gauge-widget img-thumbnail">
   {{#if view.isLoaded}}
-    <a {{bindAttr class=":corner-icon :col-md-1 view.parentView.isMoving:hidden"}} href="#" {{action hideWidget view.id target="view"}}>
-      <i class="glyphicon-remove-sign glyphicon glyphicon-large"></i>
-    </a>
     <div class="caption title col-md-11">{{view.content.widgetName}}</div>
-    <div class="widget-icons">
-      {{#if controller.isAmbariMetricsInstalled}}
-        <a class="corner-icon pull-right" href="#" {{action editWidget target="view"}}>
-          <i class="glyphicon glyphicon-edit"></i>
-        </a>
-        <a class="corner-icon pull-right" href="#" {{action cloneWidget target="view"}}>
-          <i class="glyphicon glyphicon-copy"></i>
-        </a>
-      {{/if}}
+    <div {{bindAttr class="view.parentView.isMoving:hidden :corner-icon :widget-icons"}}>
+      <button class="dropdown-toggle ellipsis-menu button-border" data-toggle="dropdown" href="#"></button>
+      <ul class="dropdown-menu">
+        {{#if controller.isAmbariMetricsInstalled}}
+          <li>
+            <a href="#" {{action editWidget target="view"}}>
+              <i class="icon-pencil"></i>&nbsp;{{t common.edit}}
+            </a>
+          </li>
+          <li>
+            <a href="#" {{action cloneWidget target="view"}}>
+              <i class="icon-copy"></i>&nbsp;{{t common.clone}}
+            </a>
+          </li>
+        {{/if}}
+        <li>
+          <a href="#" {{action hideWidget view.id target="view"}}>
+            <i class="icon-trash"></i>&nbsp;{{t common.delete}}
+          </a>
+        </li>
+      </ul>
     </div>
     <div class="content">
       {{#if view.isUnavailable}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/common/widget/graph_widget.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/widget/graph_widget.hbs b/ambari-web/app/templates/common/widget/graph_widget.hbs
index 9784a83..010b77f 100644
--- a/ambari-web/app/templates/common/widget/graph_widget.hbs
+++ b/ambari-web/app/templates/common/widget/graph_widget.hbs
@@ -18,24 +18,38 @@
 
 <div class="graph-widget img-thumbnail">
   {{#if view.isLoaded}}
-    <a {{bindAttr class=":corner-icon :col-md-1 view.parentView.isMoving:hidden"}} href="#" {{action hideWidget view.id target="view"}}>
-      <i class="glyphicon-remove-sign glyphicon glyphicon-large"></i>
-    </a>
     <div class="caption title col-md-11">{{view.content.widgetName}}</div>
-      <div class="widget-icons">
-        <a {{bindAttr class="view.isExportButtonHidden:hidden :corner-icon :pull-right"}} href="#" {{action toggleFormatsList target="view"}}>
-          <i class="glyphicon glyphicon-save"></i>
-        </a>
+    <div {{bindAttr class="view.parentView.isMoving:hidden :corner-icon :widget-icons"}}>
+      <button class="dropdown-toggle ellipsis-menu button-border" data-toggle="dropdown" href="#"></button>
+      <ul class="dropdown-menu">
+        <li>
+          <a href="#" {{bindAttr class="view.isExportButtonHidden:hidden"}}
+            {{action exportGraphData view.exportToCSVArgument target="view"}}>
+            <i class="icon-file-text"></i>&nbsp;{{t common.csv}}</a>
+        </li>
+        <li>
+          <a href="#" {{bindAttr class="view.isExportButtonHidden:hidden"}}
+            {{action exportGraphData target="view"}}><i class="icon-file-text-alt"></i>&nbsp;{{t common.json}}</a>
+        </li>
         {{#if controller.isAmbariMetricsInstalled}}
-          <a class="corner-icon pull-right" href="#" {{action editWidget target="view"}}>
-            <i class="glyphicon glyphicon-edit"></i>
-          </a>
-          <a class="corner-icon pull-right" href="#" {{action cloneWidget target="view"}}>
-            <i class="glyphicon glyphicon-copy"></i>
-          </a>
+          <li>
+            <a href="#" href="#" {{action editWidget target="view"}}>
+              <i class="icon-pencil"></i>&nbsp;{{t common.edit}}
+            </a>
+          </li>
+          <li>
+            <a href="#" {{action cloneWidget target="view"}}>
+              <i class="icon-copy"></i>&nbsp;{{t common.clone}}
+            </a>
+          </li>
         {{/if}}
-        {{view view.exportMetricsMenuView}}
-      </div>
+        <li>
+          <a href="#" {{action hideWidget view.id target="view"}}>
+            <i class="icon-trash"></i>&nbsp;{{t common.delete}}
+          </a>
+        </li>
+      </ul>
+    </div>
     <div class="content"> {{view view.graphView}}</div>
 
   {{else}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/common/widget/number_widget.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/widget/number_widget.hbs b/ambari-web/app/templates/common/widget/number_widget.hbs
index 42d6aa0..c145912 100644
--- a/ambari-web/app/templates/common/widget/number_widget.hbs
+++ b/ambari-web/app/templates/common/widget/number_widget.hbs
@@ -18,19 +18,28 @@
 
 <div class="number-widget img-thumbnail">
   {{#if view.isLoaded}}
-    <a {{bindAttr class=":corner-icon :col-md-1 view.parentView.isMoving:hidden"}} href="#" {{action hideWidget view.id target="view"}}>
-      <i class="glyphicon-remove-sign glyphicon glyphicon-large"></i>
-    </a>
     <div class="caption title col-md-11">{{view.content.widgetName}}</div>
-    <div class="widget-icons">
-      {{#if controller.isAmbariMetricsInstalled}}
-        <a class="corner-icon pull-right" href="#" {{action editWidget target="view"}}>
-          <i class="glyphicon glyphicon-edit"></i>
-        </a>
-        <a class="corner-icon pull-right" href="#" {{action cloneWidget target="view"}}>
-          <i class="glyphicon glyphicon-copy"></i>
-        </a>
-      {{/if}}
+    <div {{bindAttr class="view.parentView.isMoving:hidden :corner-icon :widget-icons"}}>
+      <button class="dropdown-toggle ellipsis-menu button-border" data-toggle="dropdown" href="#"></button>
+      <ul class="dropdown-menu">
+        {{#if controller.isAmbariMetricsInstalled}}
+          <li>
+            <a href="#" {{action editWidget target="view"}}>
+              <i class="icon-pencil"></i>&nbsp;{{t common.edit}}
+            </a>
+          </li>
+          <li>
+            <a href="#" {{action cloneWidget target="view"}}>
+              <i class="icon-copy"></i>&nbsp;{{t common.clone}}
+            </a>
+          </li>
+        {{/if}}
+        <li>
+          <a href="#" {{action hideWidget view.id target="view"}}>
+            <i class="icon-trash"></i>&nbsp;{{t common.delete}}
+          </a>
+        </li>
+      </ul>
     </div>
     <div {{bindAttr class="view.contentColor :content"}}>{{view.displayValue}}</div>
     {{#if view.content.description}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/common/widget/template_widget.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/widget/template_widget.hbs b/ambari-web/app/templates/common/widget/template_widget.hbs
index aeebdcf..20438f9 100644
--- a/ambari-web/app/templates/common/widget/template_widget.hbs
+++ b/ambari-web/app/templates/common/widget/template_widget.hbs
@@ -18,20 +18,29 @@
 
 <div class="template-widget img-thumbnail">
   {{#if view.isLoaded}}
-    <a {{bindAttr class=":corner-icon :col-md-1 view.parentView.isMoving:hidden"}} href="#" {{action hideWidget view.id target="view"}}>
-      <i class="glyphicon-remove-sign glyphicon glyphicon-large"></i>
-    </a>
     <div class="caption title col-md-11">{{view.content.widgetName}}</div>
-    <div class="widget-icons">
-      {{#if controller.isAmbariMetricsInstalled}}
-        <a class="corner-icon pull-right" href="#" {{action editWidget target="view"}}>
-          <i class="glyphicon glyphicon-edit"></i>
-        </a>
-        <a class="corner-icon pull-right" href="#" {{action cloneWidget target="view"}}>
-          <i class="glyphicon glyphicon-copy"></i>
-        </a>
-      {{/if}}
-      </div>
+    <div {{bindAttr class="view.parentView.isMoving:hidden :corner-icon :widget-icons"}}>
+      <button class="dropdown-toggle ellipsis-menu button-border" data-toggle="dropdown" href="#"></button>
+      <ul class="dropdown-menu">
+        {{#if controller.isAmbariMetricsInstalled}}
+          <li>
+            <a href="#" {{action editWidget target="view"}}>
+              <i class="icon-pencil"></i>&nbsp;{{t common.edit}}
+            </a>
+          </li>
+          <li>
+            <a href="#" {{action cloneWidget target="view"}}>
+              <i class="icon-copy"></i>&nbsp;{{t common.clone}}
+            </a>
+          </li>
+        {{/if}}
+        <li>
+          <a href="#" {{action hideWidget view.id target="view"}}>
+            <i class="icon-trash"></i>&nbsp;{{t common.delete}}
+          </a>
+        </li>
+      </ul>
+    </div>
     <div {{bindAttr class="view.contentColor :content"}}>{{{view.displayValue}}}</div>
     {{#if view.content.description}}
       <div class="hidden-description">

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/main/dashboard/widgets/cluster_metrics.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/dashboard/widgets/cluster_metrics.hbs b/ambari-web/app/templates/main/dashboard/widgets/cluster_metrics.hbs
index 18f2201..c35ca4e 100644
--- a/ambari-web/app/templates/main/dashboard/widgets/cluster_metrics.hbs
+++ b/ambari-web/app/templates/main/dashboard/widgets/cluster_metrics.hbs
@@ -21,9 +21,22 @@
     <li class="img-thumbnail row">
       <div class="caption col-md-10">{{view.title}}</div>
       <div class="corner-icon col-md-1">
-        <button class="dropdown-toggle ellipsis-menu button-border" data-toggle="dropdown" href="#"
-          {{action toggleFormatsList target="view"}}></button>
-        {{view view.exportMetricsMenuView}}
+        <button class="dropdown-toggle ellipsis-menu button-border" data-toggle="dropdown" href="#"></button>
+        <ul class="dropdown-menu">
+          <li>
+            <button type="button" href="#" {{bindAttr class="view.isExportButtonHidden:hidden :button-border"}}
+              {{action exportGraphData view.exportToCSVArgument target="view"}}>
+              <i class="icon-file-text"></i>&nbsp;{{t common.csv}}</button>
+          </li>
+          <li>
+            <button type="button" href="#" {{bindAttr class="view.isExportButtonHidden:hidden :button-border"}}
+              {{action exportGraphData target="view"}}><i class="icon-file-text-alt"></i>&nbsp;{{t common.json}}</button>
+          </li>
+          <li><button type="button" href="#" class="button-border"
+            {{action deleteWidget target="view"}}>
+            <i class="icon-trash"></i>&nbsp;{{t common.delete}}</button>
+          </li>
+        </ul>
       </div>
       {{#if view.isDataLoaded}}
         {{#if view.childViews.lastObject.hasData}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/main/service/info/summary.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/info/summary.hbs b/ambari-web/app/templates/main/service/info/summary.hbs
index c142464..789a6fc 100644
--- a/ambari-web/app/templates/main/service/info/summary.hbs
+++ b/ambari-web/app/templates/main/service/info/summary.hbs
@@ -47,35 +47,80 @@
 {{/if}}
 
 <div class="service-block">
-  <div class="panel panel-default">
-    <div class="panel-heading summary-box-header">
-      <div class="row">
-        <div class="col-md-8 col-lg-8">
-          <h4 class="panel-title">{{controller.content.label}} {{t services.service.info.menu.summary}}</h4>
+  <div class="summary-links-block">
+    <div class="panel panel-default summary-block">
+      <div class="panel-heading summary-box-header">
+        <div class="row">
+          <div class="col-md-8 col-lg-8">
+            <h4 class="panel-title">{{controller.content.label}} {{t services.service.info.menu.summary}}</h4>
+          </div>
+          <div class="col-md-4 col-lg-4 service-alerts">
+            {{#if view.hasAlertDefinitions}}
+              <span {{action "showServiceAlertsPopup" controller.content target="controller"}} class="pull-right">
+                <i class="glyphicon glyphicon-bell"></i>
+                {{#if view.alertsCount}}
+                  <span {{bindAttr class=":label view.hasCriticalAlerts:alerts-crit-count:alerts-warn-count"}}>
+                    {{view.alertsCount}}</span>
+                {{else}}
+                  <span class="label no-alerts-label">{{t services.service.summary.alerts.noAlerts}}</span>
+                {{/if}}
+              </span>
+            {{/if}}
+          </div>
+        </div>
+      </div>
+      <div class="panel-body">
+        {{#if view.serviceSummaryView}}
+          {{view view.serviceSummaryView}}
+        {{else}}
+          {{view App.SpinnerView}}
+        {{/if}}
+      </div>
+    </div>
+
+    <div class="panel panel-default quick-links-block">
+      {{#view App.QuickLinksView contentBinding="view.svc"}}
+        <div class="panel-heading">
+          <div class="row col-md-8 col-lg-12">
+            <h4 class="panel-title">{{t common.quickLinks}}</h4>
+          </div>
         </div>
-        <div class="col-md-4 col-lg-4">
-          {{#if view.hasAlertDefinitions}}
-            {{#if view.alertsCount}}
-              <span {{action "showServiceAlertsPopup" controller.content target="controller"}}
-                {{bindAttr class=":label :pull-right view.hasCriticalAlerts:alerts-crit-count:alerts-warn-count"}}>
-            {{view.alertsCount}} {{pluralize view.alertsCount singular="alert" plural="alerts"}}</span>
+        <div class="panel-body">
+          {{#if view.showQuickLinks}}
+            {{#if view.isLoaded}}
+              {{#if view.quickLinksArray}}
+                <!--there are multiple masters eg, HBase multiple masters or HDFS HA enabled-->
+                {{#each quickLinks in view.quickLinksArray}}
+                  <a href="javascript:void(null)">{{quickLinks.publicHostNameLabel}} &nbsp;</a>
+                  {{#each quickLinks}}
+                    <a {{bindAttr href="url"}} target="_blank">{{label}}</a>
+                  {{/each}}
+                {{/each}}
+              {{else}}
+                {{#if view.quickLinks}}
+                  {{#each view.quickLinks}}
+                    <a {{bindAttr href="url"}} target="_blank">{{label}}</a>
+                  {{/each}}
+                {{else}}
+                  <div class="alert alert-danger">
+                    <small>{{t quick.links.error.quicklinks.unavailable.label}}</small>
+                  </div>
+                {{/if}}
+              {{/if}}
             {{else}}
-              <span {{action "showServiceAlertsPopup" controller.content target="controller"}}
-                class="label pull-right no-alerts-label">{{t services.service.summary.alerts.noAlerts}}</span>
+              {{view App.SpinnerView}}
+            {{/if}}
+          {{else}}
+            {{#if view.showNoLinks}}
+              {{t common.noLink}}
+            {{else}}
+              {{view App.SpinnerView}}
             {{/if}}
           {{/if}}
         </div>
-      </div>
-    </div>
-    <div class="panel-body">
-      {{#if view.serviceSummaryView}}
-        {{view view.serviceSummaryView}}
-      {{else}}
-        {{view App.SpinnerView}}
-      {{/if}}
+      {{/view}}
     </div>
   </div>
-
   {{! widgets in the metrics panel are loaded seperately from summary page text information
       and does not get block due to any global API poller information }}
   {{#if view.isServiceMetricLoaded}}
@@ -136,7 +181,7 @@
               {{#if isAmbariMetricsInstalled}}
                 <div class="span2p4">
                   <button id="add-widget-action-box"
-                          {{action "goToWidgetsBrowser" controller.content target="controller"}}
+                    {{action "goToWidgetsBrowser" controller.content target="controller"}}
                           rel="add-widget-tooltip" {{translateAttr data-original-title="dashboard.widgets.addButton.tooltip"}}>
                     <i class="glyphicon glyphicon-plus"></i></button>
                 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/main/service/info/summary/base.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/info/summary/base.hbs b/ambari-web/app/templates/main/service/info/summary/base.hbs
index 9b16502..10fe4cb 100644
--- a/ambari-web/app/templates/main/service/info/summary/base.hbs
+++ b/ambari-web/app/templates/main/service/info/summary/base.hbs
@@ -16,8 +16,13 @@
 * limitations under the License.
 }}
 
-<div class="col-md-6">
-  {{view App.SummaryMasterComponentsView mastersCompBinding="view.parentView.mastersObj"}}
-  {{view App.SummarySlaveComponentsView slavesObjBinding="view.parentView.slavesObj"}}
-  {{view App.SummaryClientComponentsView clientsObjBinding="view.parentView.clientObj"}}
+<div class="row">
+  <div class="col-md-12 component-summary">
+    <div class="col-md-2">{{t dashboard.services.hdfs.summary.components}}</div>
+    <div class="col-md-10">
+      {{view App.SummaryMasterComponentsView mastersCompBinding="view.parentView.mastersObj"}}
+      {{view App.SummarySlaveComponentsView slavesObjBinding="view.parentView.slavesObj"}}
+      {{view App.SummaryClientComponentsView clientsObjBinding="view.parentView.clientObj"}}
+    </div>
+  </div>
 </div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/main/service/info/summary/client_components.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/info/summary/client_components.hbs b/ambari-web/app/templates/main/service/info/summary/client_components.hbs
index 1bef250..ea9a5c8 100644
--- a/ambari-web/app/templates/main/service/info/summary/client_components.hbs
+++ b/ambari-web/app/templates/main/service/info/summary/client_components.hbs
@@ -17,14 +17,14 @@
 }}
 
 {{#each clientComponent in view.clientsObj}}
-  <div class="row">
-    <div {{bindAttr class=":col-md-6 :summary-label clientComponent.summaryLabelClassName"}}>
+  <div class="row col-md-3">
+    <div {{bindAttr class=":summary-value :main-info clientComponent.summaryValueClassName"}}>
+      <span class="green-live">{{clientComponent.installedCount}}</span>  {{t common.installed}}
+    </div>
+    <div {{bindAttr class=":summary-label clientComponent.summaryLabelClassName"}}>
       <a {{action filterHosts clientComponent}} href="javascript:void(null)" >
         {{clientComponent.displayNamePluralized}}
       </a>
     </div>
-    <div {{bindAttr class=":col-md-6 :summary-value clientComponent.summaryValueClassName"}}>
-      <span class="green-live">{{clientComponent.installedCount}}</span> {{clientComponent.displayNamePluralized}} {{t common.installed}}
-    </div>
   </div>
 {{/each}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/main/service/info/summary/master_components.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/info/summary/master_components.hbs b/ambari-web/app/templates/main/service/info/summary/master_components.hbs
index 5b7b47b..8126d1f 100644
--- a/ambari-web/app/templates/main/service/info/summary/master_components.hbs
+++ b/ambari-web/app/templates/main/service/info/summary/master_components.hbs
@@ -17,22 +17,13 @@
 }}
 
 {{#each comp in view.mastersComp}}
-  <div {{bindAttr class="comp.isSubComponent:component-small :component comp.componentName :row"}}>
-    <div {{bindAttr class=":col-md-6 :summary-label comp.summaryLabelClassName"}}>
-      <a href="#" {{action showDetails comp.host}} data-original-title="{{unbound comp.publicHostName}}" rel="UsageTooltip">
-        {{#if comp.displayNameAdvanced}}
-          {{comp.displayNameAdvanced}}
-        {{else}}
-          {{comp.displayName}}
-        {{/if}}
-      </a>
-    </div>
-    <div {{bindAttr class=":col-md-6 :summary-value comp.summaryValueClassName"}}>
+  <div {{bindAttr class="comp.isSubComponent:component-small :component :col-md-3 comp.componentName :row"}}>
+    <div {{bindAttr class=":summary-value comp.summaryValueClassName"}}>
       <span rel='SummaryComponentHealthTooltip' {{bindAttr class="comp.statusClass comp.statusIconClass" data-original-title="comp.passiveTooltip"}}></span>
-      {{comp.componentTextStatus}}
+      <span class="main-info">{{comp.componentTextStatus}}</span>
       {{#if comp.alertsCount}}
         <span {{action "showServiceAlertsPopup" comp target="controller"}} {{bindAttr class=":label comp.hasCriticalAlerts:alerts-crit-count:alerts-warn-count"}}>
-          {{comp.alertsCount}} {{pluralize comp.alertsCount singular="alert" plural="alerts"}}
+          {{comp.alertsCount}}
         </span>
       {{else}}
         <span {{action "showServiceAlertsPopup" comp target="controller"}} class="label no-alerts-label">
@@ -40,5 +31,14 @@
         </span>
       {{/if}}
     </div>
+    <div {{bindAttr class=":summary-label comp.summaryLabelClassName"}}>
+      <a href="#" {{action showDetails comp.host}} data-original-title="{{unbound comp.publicHostName}}" rel="UsageTooltip">
+        {{#if comp.displayNameAdvanced}}
+          {{comp.displayNameAdvanced}}
+        {{else}}
+          {{comp.displayName}}
+        {{/if}}
+      </a>
+    </div>
   </div>
 {{/each}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/main/service/info/summary/slave_components.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/info/summary/slave_components.hbs b/ambari-web/app/templates/main/service/info/summary/slave_components.hbs
index 9076c7f..3483f17 100644
--- a/ambari-web/app/templates/main/service/info/summary/slave_components.hbs
+++ b/ambari-web/app/templates/main/service/info/summary/slave_components.hbs
@@ -17,15 +17,15 @@
 }}
 
 {{#each slaveComponent in view.slavesObj}}
-  <div {{bindAttr class=":row :component slaveComponent.componentName"}}>
-    <div {{bindAttr class=":col-md-6 :summary-label slaveComponent.summaryLabelClassName"}}>
-      <a href="#" {{action filterHosts slaveComponent}}>{{slaveComponent.displayNamePluralized}}</a>
-    </div>
-    <div {{bindAttr class=":col-md-6 :summary-value slaveComponent.summaryValueClassName"}}>
+  <div {{bindAttr class=":row :component :col-md-3 slaveComponent.componentName"}}>
+    <div {{bindAttr class=":summary-value :main-info slaveComponent.summaryValueClassName"}}>
       {{#view App.ComponentLiveTextView liveComponentsBinding="slaveComponent.startedCount" totalComponentsBinding="slaveComponent.totalCount" tagName="span"}}
         {{view.liveComponents}}/{{view.totalComponents}}
       {{/view}}
-      {{slaveComponent.displayNamePluralized}} {{t dashboard.services.summary.slaves.live}}
+      {{t dashboard.services.summary.slaves.live}}
+    </div>
+    <div {{bindAttr class=":summary-label slaveComponent.summaryLabelClassName"}}>
+      <a href="#" {{action filterHosts slaveComponent}}>{{slaveComponent.displayNamePluralized}}</a>
     </div>
   </div>
 {{/each}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/main/service/item.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/item.hbs b/ambari-web/app/templates/main/service/item.hbs
index 64c4c7e..e942eb1 100644
--- a/ambari-web/app/templates/main/service/item.hbs
+++ b/ambari-web/app/templates/main/service/item.hbs
@@ -17,51 +17,13 @@
 }}
 
 {{view App.MainServiceInfoMenuView configTabBinding="view.hasConfigTab" heatmapTabBinding="view.hasHeatmapTab"}}
-  <div class="col-md-3 quick-links-wrapper">
-    {{#view App.QuickLinksView contentBinding="view.service"}}
-      {{#if view.showQuickLinks}}
-        <ul class="nav nav-pills move">
-          <li class="dropdown quick-links-dropdown">
-            <a class="dropdown-toggle" id="quick-links-dropdown-btn" data-toggle="dropdown" href="#">{{t common.quickLinks}}<b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              {{#if view.isLoaded}}
-                {{#if view.quickLinksArray}}
-                  <!--there are multiple masters eg, HBase multiple masters or HDFS HA enabled-->
-                  {{#each quickLinks in view.quickLinksArray}}
-                    <li class="dropdown-submenu">
-                      <a href="javascript:void(null)">{{quickLinks.publicHostNameLabel}} &nbsp;</a>
-                      <ul class="dropdown-menu">
-                        {{#each quickLinks}}
-                          <li><a {{bindAttr href="url"}} target="_blank">{{label}}</a></li>
-                        {{/each}}
-                      </ul>
-                    </li>
-                  {{/each}}
-                {{else}}
-                  {{#if view.quickLinks}}
-                    {{#each view.quickLinks}}
-                      <li><a {{bindAttr href="url"}} target="_blank">{{label}}</a></li>
-                    {{/each}}
-                  {{else}}
-                    <div class="alert alert-danger"><small>{{t quick.links.error.quicklinks.unavailable.label}}</small></div>
-                  {{/if}}
-                {{/if}}
-              {{else}}
-                {{view App.SpinnerView}}
-              {{/if}}
-           </ul>
-          </li>
-        </ul>
-      {{/if}}
-    {{/view}}
-  </div>
 
 {{#isAuthorized "SERVICE.RUN_CUSTOM_COMMAND, SERVICE.RUN_SERVICE_CHECK, SERVICE.START_STOP, SERVICE.TOGGLE_MAINTENANCE, SERVICE.ENABLE_HA"}}
 <div class="service-button">
   {{#if view.isMaintenanceActive}}
     <div class="btn-group display-inline-block">
       <button class="btn btn-default dropdown-toggle" id="service-actions-dropdown-btn" data-toggle="dropdown" href="#">
-        {{t services.service.actions.serviceActions}}
+        {{t common.actions}}
         <span class="caret"></span>
       </button>
       <ul class="pull-right dropdown-menu">

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/main/service/services/hbase.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/services/hbase.hbs b/ambari-web/app/templates/main/service/services/hbase.hbs
index 2d4f8bb..e5ee086 100644
--- a/ambari-web/app/templates/main/service/services/hbase.hbs
+++ b/ambari-web/app/templates/main/service/services/hbase.hbs
@@ -17,73 +17,83 @@
 }}
 
 <div class="row">
-  <div class="col-md-6">
-    {{! HBase Master Server }}
-    {{view view.dashboardMasterComponentView}}
-    {{! RegionServers }}
-    {{#if view.isRegionServerCreated}}
-      <div {{bindAttr class=":row :component view.regionServerComponent.componentName"}}>
-        <div class="col-md-6 summary-label">
-          <a href="#" {{action filterHosts view.regionServerComponent}}>{{t dashboard.services.hbase.regionServers}}</a>
+  <div class="col-md-12 component-summary">
+    <div class="col-md-2">{{t dashboard.services.hdfs.summary.components}}</div>
+    <div class="col-md-10">
+      {{! HBase Master Server }}
+      {{view view.dashboardMasterComponentView}}
+      {{! RegionServers }}
+      {{#if view.isRegionServerCreated}}
+        <div {{bindAttr class=":row :component :col-md-3 view.regionServerComponent.componentName"}}>
+          <div class="summary-value main-info">
+            {{#if App.router.clusterController.isServiceContentFullyLoaded}}
+              <span>
+                {{#view App.ComponentLiveTextView liveComponentsBinding="view.service.regionServersStarted" totalComponentsBinding="view.service.regionServersTotal"}}
+                  {{view.liveComponents}}/{{view.totalComponents}}
+                {{/view}}
+              </span>
+              {{t common.live}}
+            {{else}}
+              {{t common.loading.eclipses}}
+            {{/if}}
+          </div>
+          <div class="summary-label">
+            <a href="#" {{action filterHosts view.regionServerComponent}}>{{t dashboard.services.hbase.regionServers}}</a>
+          </div>
         </div>
-        <div class="col-md-6 summary-value">
-          {{#if App.router.clusterController.isServiceContentFullyLoaded}}
+      {{/if}}
+      {{! PhoenixServers }}
+      {{#if view.isPhoenixQueryServerCreated}}
+        <div {{bindAttr class=":row :component :col-md-3 view.phoenixServerComponent.componentName"}}>
+          <div class="summary-value main-info">
             <span>
-              {{#view App.ComponentLiveTextView liveComponentsBinding="view.service.regionServersStarted" totalComponentsBinding="view.service.regionServersTotal"}}
-                {{view.liveComponents}}/{{view.totalComponents}}
+              {{#view App.ComponentLiveTextView liveComponentsBinding="view.service.phoenixServersStarted" totalComponentsBinding="view.service.phoenixServersTotal"}}
+                {{#if App.router.clusterController.isServiceContentFullyLoaded}}
+                  {{view.liveComponents}}/{{view.totalComponents}}
+                {{/if}}
               {{/view}}
             </span>
-            {{t services.service.summary.RegionServersLIVE}}
-          {{else}}
-            {{t common.loading.eclipses}}
-          {{/if}}
+            {{t common.live}}
+          </div>
+          <div class="summary-label">
+            <a href="#" {{action filterHosts view.phoenixServerComponent}}>{{t dashboard.services.hbase.phoenixServers}}</a>
+          </div>
         </div>
+      {{/if}}
+      {{! Regions in Transition }}
+      <div class="row col-md-3 regions-in-trnasition">
+        <div class="summary-value main-info">{{view.service.regionsInTransition}}</div>
+        <div class="summary-label">{{t dashboard.services.hbase.regions.transition}}</div>
       </div>
-    {{/if}}
-    {{! PhoenixServers }}
-    {{#if view.isPhoenixQueryServerCreated}}
-      <div {{bindAttr class=":row :component view.phoenixServerComponent.componentName"}}>
-        <div class="col-md-6 summary-label">
-          <a href="#" {{action filterHosts view.phoenixServerComponent}}>{{t dashboard.services.hbase.phoenixServers}}</a>
-        </div>
-        <div class="col-md-6 summary-value">
-          <span>
-            {{#view App.ComponentLiveTextView liveComponentsBinding="view.service.phoenixServersStarted" totalComponentsBinding="view.service.phoenixServersTotal"}}
-              {{#if App.router.clusterController.isServiceContentFullyLoaded}}
-                {{view.liveComponents}}/{{view.totalComponents}}
-              {{/if}}
-            {{/view}}
-          </span>
-          {{t services.service.summary.PhoenixServersLIVE}}
-        </div>
-      </div>
-    {{/if}}
-    {{! Regions in Transition }}
-    <div class="row regions-in-trnasition">
-      <div class="col-md-6 summary-label">{{t dashboard.services.hbase.regions.transition}}</div>
-      <div class="col-md-6 summary-value">{{view.service.regionsInTransition}}</div>
     </div>
   </div>
-  <div class="col-md-6">
-    {{! HBase Master Started Time }}
-    <div class="row started-time">
-      <div class="col-md-6 summary-label">{{t dashboard.services.hbase.masterStarted}}</div>
-      <div class="col-md-6 summary-value">{{view.masterStartedTime}}</div>
-    </div>
-    {{! HBase Master Activated Time }}
-    <div class="row activated-time">
-      <div class="col-md-6 summary-label">{{t dashboard.services.hbase.masterActivated}}</div>
-      <div class="col-md-6 summary-value">{{view.masterStartedTime}}</div>
-    </div>
-    {{! Average Load }}
-    <div class="row average-load">
-      <div class="col-md-6 summary-label">{{t dashboard.services.hbase.averageLoad}}</div>
-      <div class="col-md-6 summary-value">{{view.averageLoad}}</div>
-    </div>
-    {{! Master Server Heap }}
-    <div class="row server-heap">
-      <div class="col-md-6 summary-label">{{t dashboard.services.hbase.masterServerHeap}}</div>
-      <div class="col-md-6 summary-value">{{view.masterServerHeapSummary}}</div>
+
+  <div class="col-md-12 metrics-summary">
+    <div class="col-md-2">{{t dashboard.services.hdfs.summary.service-metrics}}</div>
+    <div class="col-md-10">
+      {{! HBase Master Started Time }}
+      <div class="row col-md-3 started-time">
+        <div class="summary-value main-info">{{view.masterStartedTime}}</div>
+        <div class="summary-label">{{t dashboard.services.hbase.masterStarted}}</div>
+      </div>
+      {{! HBase Master Activated Time }}
+      <div class="row col-md-3 activated-time">
+        <div class="summary-value main-info">{{view.masterStartedTime}}</div>
+        <div class="summary-label">{{t dashboard.services.hbase.masterActivated}}</div>
+      </div>
+      {{! Average Load }}
+      <div class="row col-md-3 average-load">
+        <div class="summary-value main-info">{{view.averageLoad}}</div>
+        <div class="summary-label">{{t dashboard.services.hbase.averageLoad}}</div>
+      </div>
+      {{! Master Server Heap }}
+      <div class="row col-md-3 server-heap">
+        <div class="summary-value">
+          <div class="main-info">{{view.masterServerHeapSummaryPercent}}</div>
+          <div class="info-desc">{{view.masterServerHeapSummary}}</div>
+        </div>
+        <div class="summary-label">{{t dashboard.services.hbase.masterServerHeap}}</div>
+      </div>
     </div>
   </div>
 </div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/main/service/services/hdfs.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/services/hdfs.hbs b/ambari-web/app/templates/main/service/services/hdfs.hbs
index 01bd762..967239d 100644
--- a/ambari-web/app/templates/main/service/services/hdfs.hbs
+++ b/ambari-web/app/templates/main/service/services/hdfs.hbs
@@ -17,140 +17,170 @@
 }}
 
 <div class="row">
-  {{! left column }}
-  <div class="col-md-6">
-    {{view view.dashboardMasterComponentView}}
-    {{! Data Nodes }}
-    {{#if view.isDataNodeCreated}}
-      <div {{bindAttr class=":row :component view.dataNodeComponent.componentName"}}>
-        <div class="col-md-6 summary-label">
-          <a href="#" {{action filterHosts view.dataNodeComponent}}>{{t dashboard.services.hdfs.datanodes}}</a>
-        </div>
-        <div class="col-md-6 summary-value">
-          {{#if App.router.clusterController.isServiceContentFullyLoaded}}
-            <span>
-              {{#view App.ComponentLiveTextView liveComponentsBinding="view.service.dataNodesStarted" totalComponentsBinding="view.service.dataNodesTotal"}}
-                {{view.liveComponents}}/{{view.totalComponents}}
-              {{/view}}
-            </span>
-            {{t common.started}}
-          {{else}}
-            {{t common.loading.eclipses}}
-          {{/if}}
-        </div>
+  {{! Component Section }}
+  <div class="col-md-12 component-summary">
+    <div class="col-md-2">{{t dashboard.services.hdfs.summary.components}}</div>
+    <div class="col-md-10">
+      {{view view.dashboardMasterComponentView}}
+      {{! NameNode Uptime }}
+      <div class="row namenode-uptime col-md-3">
+        <div class="summary-value main-info">{{view.nodeUptime}}</div>
+        <div class="summary-label">{{t dashboard.services.hdfs.nodes.uptime}}</div>
       </div>
-    {{/if}}
-    {{! Data Node Counts }}
-    <div class="row datanode-count">
-      <div class="col-md-6 summary-label">{{t dashboard.services.hdfs.datanodecounts}}</div>
-      <div class="col-md-6 summary-value">
-        {{#if view.service.metricsNotAvailable}}
-          {{t services.service.summary.notAvailable}}
-        {{else}}
-          <span {{translateAttr data-original-title="dashboard.services.hdfs.datanode.status.tooltip.live" }}
-            rel="tooltip">{{view.service.liveDataNodes.length}} {{t dashboard.services.hdfs.nodes.live}} </span> /
-        <span {{translateAttr data-original-title="dashboard.services.hdfs.datanode.status.tooltip.dead" }}
-          rel="tooltip">{{view.service.deadDataNodes.length}} {{t dashboard.services.hdfs.nodes.dead}} </span> /
-        <span {{translateAttr data-original-title="dashboard.services.hdfs.datanode.status.tooltip.decommission" }}
-          rel="tooltip">{{view.service.decommissionDataNodes.length}} {{t dashboard.services.hdfs.nodes.decom}}</span>
-        {{/if}}
+      {{! NameNode Heap }}
+      <div class="row namenode-heap col-md-3">
+        <div class="summary-value">
+          <div class="main-info"> {{view.nodeHeapPercent}} </div>
+          <div class="info-desc"> {{view.nodeHeap}} </div>
+        </div>
+        <div class="summary-label">{{t dashboard.services.hdfs.nodes.heap}}</div>
       </div>
-    </div>
-    {{! JournalNodes }}
-    {{#if view.isJournalNodeCreated}}
-      <div {{bindAttr class=":row :component view.journalNodeComponent.componentName"}}>
-        <div class="col-md-6 summary-label">
-          <a href="#" {{action filterHosts view.journalNodeComponent}}>{{t dashboard.services.hdfs.journalnodes}}</a>
+      {{! Data Nodes }}
+      {{#if view.isDataNodeCreated}}
+        <div {{bindAttr class=":row :component :col-md-3 view.dataNodeComponent.componentName"}}>
+          <div class="summary-value main-info">
+            {{#if App.router.clusterController.isServiceContentFullyLoaded}}
+              <span>
+                {{#view App.ComponentLiveTextView liveComponentsBinding="view.service.dataNodesStarted" totalComponentsBinding="view.service.dataNodesTotal"}}
+                  {{view.liveComponents}}/{{view.totalComponents}}
+                {{/view}}
+              </span>
+              {{t common.started}}
+            {{else}}
+              {{t common.loading.eclipses}}
+            {{/if}}
+          </div>
+          <div class="summary-label">
+            <a href="#" {{action filterHosts view.dataNodeComponent}}>{{t dashboard.services.hdfs.datanodes}}</a>
+          </div>
         </div>
-        <div class="col-md-6 summary-value">
-          {{#if App.router.clusterController.isComponentsStateLoaded}}
-            <span>
-              {{#view App.ComponentLiveTextView liveComponentsBinding="view.journalNodesLive" totalComponentsBinding="view.journalNodesTotal"}}
-                {{view.liveComponents}}/{{view.totalComponents}}
-              {{/view}}
-            </span>
-            {{t services.service.summary.JournalNodesLive}}
+      {{/if}}
+      {{! Data Node Counts }}
+      <div class="row datanode-count col-md-3">
+        <div class="summary-value">
+          {{#if view.service.metricsNotAvailable}}
+          <div class="main-info">
+            {{t services.service.summary.notAvailable}}
+            </div>
           {{else}}
-            {{t common.loading.eclipses}}
+            <div class="main-info">
+              <span {{translateAttr data-original-title="dashboard.services.hdfs.datanode.status.tooltip.live" }}
+                      rel="tooltip">{{view.service.liveDataNodes.length}} </span> /
+              <span {{translateAttr data-original-title="dashboard.services.hdfs.datanode.status.tooltip.dead" }}
+                      rel="tooltip">{{view.service.deadDataNodes.length}} </span> /
+              <span {{translateAttr data-original-title="dashboard.services.hdfs.datanode.status.tooltip.decommission" }}
+                      rel="tooltip">{{view.service.decommissionDataNodes.length}} </span>
+            </div>
+            <div class="info-desc">
+              <span {{t dashboard.services.hdfs.nodes.live}} </span> /
+              <span {{t dashboard.services.hdfs.nodes.dead}} </span> /
+              <span {{t dashboard.services.hdfs.nodes.decom}} </span>
+            </div>
           {{/if}}
         </div>
+        <div class="summary-label">{{t dashboard.services.hdfs.datanodecounts}}</div>
       </div>
-    {{/if}}
-    {{! NFS Gateway }}
-    {{#if view.isNfsInStack}}
-      <div {{bindAttr class=":row :component view.nfsGatewayComponent.componentName"}}>
-        <div class="col-md-6 summary-label">
-          <a href="#" {{action filterHosts view.nfsGatewayComponent}}>{{t dashboard.services.hdfs.nfsgateways}}</a>
+      {{! JournalNodes }}
+      {{#if view.isJournalNodeCreated}}
+        <div {{bindAttr class=":row :component :col-md-3 view.journalNodeComponent.componentName"}}>
+          <div class="summary-value main-info">
+            {{#if App.router.clusterController.isComponentsStateLoaded}}
+              <span>
+                {{#view App.ComponentLiveTextView liveComponentsBinding="view.journalNodesLive" totalComponentsBinding="view.journalNodesTotal"}}
+                  {{view.liveComponents}}/{{view.totalComponents}}
+                {{/view}}
+              </span>
+              <span> {{t common.live}} </span>
+            {{else}}
+              {{t common.loading.eclipses}}
+            {{/if}}
+          </div>
+          <div class="summary-label">
+            <a href="#" {{action filterHosts view.journalNodeComponent}}>{{t dashboard.services.hdfs.journalnodes}}</a>
+          </div>
         </div>
-        <div class="col-md-6 summary-value">
-          {{#if App.router.clusterController.isServiceContentFullyLoaded}}
-            <span>
-              {{#view App.ComponentLiveTextView liveComponentsBinding="view.service.nfsGatewaysStarted" totalComponentsBinding="view.service.nfsGatewaysTotal"}}
-                {{view.liveComponents}}/{{view.totalComponents}}
-              {{/view}}
-            </span>
-            {{t common.started}}
-          {{else}}
-            {{t common.loading.eclipses}}
-          {{/if}}
+      {{/if}}
+      {{! NFS Gateway }}
+      {{#if view.isNfsInStack}}
+        <div {{bindAttr class=":row :component :col-md-3 view.nfsGatewayComponent.componentName"}}>
+          <div class="summary-value main-info">
+            {{#if App.router.clusterController.isServiceContentFullyLoaded}}
+              <span>
+                {{#view App.ComponentLiveTextView liveComponentsBinding="view.service.nfsGatewaysStarted" totalComponentsBinding="view.service.nfsGatewaysTotal"}}
+                  {{view.liveComponents}}/{{view.totalComponents}}
+                {{/view}}
+              </span>
+              {{t common.started}}
+            {{else}}
+              {{t common.loading.eclipses}}
+            {{/if}}
+          </div>
+          <div class="summary-label">
+            <a href="#" {{action filterHosts view.nfsGatewayComponent}}>{{t dashboard.services.hdfs.nfsgateways}}</a>
+          </div>
         </div>
-      </div>
-    {{/if}}
-    {{! NameNode Uptime }}
-    <div class="row namenode-uptime">
-      <div class="col-md-6 summary-label">{{t dashboard.services.hdfs.nodes.uptime}}</div>
-      <div class="col-md-6 summary-value">{{view.nodeUptime}}</div>
-    </div>
-    {{! NameNode Heap }}
-    <div class="row namenode-heap">
-      <div class="col-md-6 summary-label">{{t dashboard.services.hdfs.nodes.heap}}</div>
-      <div class="col-md-6 summary-value">{{view.nodeHeap}}</div>
-    </div>
-    {{! HDFS Capacity (Disk Usage)}}
-    <div class="row dfs-usage">
-      <div class="col-md-6 summary-label">{{t dashboard.services.hdfs.capacity.dfsUsed}}</div>
-      <div class="col-md-6 summary-value">{{view.dfsUsedDisk}}</div>
-    </div>
-    <div class="row non-dfs-used">
-      <div class="col-md-6 summary-label">{{t dashboard.services.hdfs.capacity.nonDfsUsed}}</div>
-      <div class="col-md-6 summary-value">{{view.nonDfsUsedDisk}}</div>
+      {{/if}}
     </div>
   </div>
   {{! left column end }}
 
-  {{! right column }}
-  <div class="col-md-6">
-    <div class="row capacity-remaining">
-      <div class="col-md-6 summary-label">{{t dashboard.services.hdfs.capacity.remaining}}</div>
-      <div class="col-md-6 ">{{view.remainingDisk}}</div>
-    </div>
-    {{! Blocks Total }}
-    <div class="row blocks-total">
-      <div class="col-md-6 summary-label">{{t services.service.summary.blocksTotal}}</div>
-      <div class="col-md-6 ">{{view.dfsTotalBlocks}}</div>
-    </div>
-    {{! Block Errors }}
-    <div class="row block-errors">
-      <div class="col-md-6 summary-label">{{t services.service.summary.blockErrors}}</div>
-      <div class="col-md-6 ">{{view.blockErrorsMessage}}</div>
-    </div>
-    {{! Total Files And Directories }}
-    <div class="row total-files-dirs">
-      <div class="col-md-6 summary-label">{{t dashboard.services.hdfs.totalFilesAndDirs}}</div>
-      <div class="col-md-6 ">{{view.dfsTotalFiles}}</div>
-    </div>
-    {{! Upgrade Status }}
-    <div class="row upgrade-status">
-      <div class="col-md-6 summary-label">{{t services.service.summary.pendingUpgradeStatus}}</div>
-      <div class="col-md-6 ">
-        <span {{bindAttr class="view.isUpgradeStatusWarning:upgrade-status-warning"}}>{{view.upgradeStatus}}</span>
+  {{! Service Metrics Section }}
+  <div class="col-md-12 metrics-summary">
+    <div class="col-md-2">{{t dashboard.services.hdfs.summary.service-metrics}}</div>
+    <div class="col-md-10">
+      {{! HDFS Capacity (Disk Usage)}}
+      <div class="row dfs-usage col-md-3">
+        <div class="summary-value">
+          <div class="main-info">{{view.dfsUsedDiskPercent}}</div>
+          <div class="info-desc">{{view.dfsUsedDisk}}</div>
+        </div>
+        <div class="summary-label">{{t dashboard.services.hdfs.capacity.dfsUsed}}</div>
       </div>
-    </div>
-    {{! Safe Mode Status }}
-    <div class="row safe-mode-status">
-      <div class="col-md-6 summary-label">{{t services.service.summary.safeModeStatus}}</div>
-      <div class="col-md-6 ">
-        {{view.safeModeStatus}}
+      <div class="row non-dfs-used col-md-3">
+        <div class="summary-value main-info">
+          <div class="main-info">{{view.nonDfsUsedDiskPercent}}</div>
+          <div class="info-desc">{{view.nonDfsUsedDisk}}</div>
+        </div>
+        <div class="summary-label">{{t dashboard.services.hdfs.capacity.nonDfsUsed}}</div>
+      </div>
+      <div class="row capacity-remaining col-md-3">
+        <div class="summary-value">
+          <div class="main-info">{{view.remainingDiskPercent}}</div>
+          <div class="info-desc">{{view.remainingDisk}}</div>
+        </div>
+        <div class="summary-label">{{t dashboard.services.hdfs.capacity.remaining}}</div>
+      </div>
+      {{! Blocks Total }}
+      <div class="row blocks-total col-md-3">
+        <div class="summary-value main-info">{{view.dfsTotalBlocks}}</div>
+        <div class="summary-label">{{t services.service.summary.blocksTotal}}</div>
+      </div>
+      {{! Block Errors }}
+      <div class="row block-errors col-md-3">
+        <div class="summary-value">
+          <div class="main-info">{{view.blockErrorsMessage}}</div>
+          <div class="info-desc">{{t dashboard.services.hdfs.blockErrorsDesc}}</div>
+        </div>
+        <div class="summary-label">{{t services.service.summary.blockErrors}}</div>
+      </div>
+      {{! Total Files And Directories }}
+      <div class="row total-files-dirs col-md-3">
+        <div class="summary-value main-info">{{view.dfsTotalFiles}}</div>
+        <div class="summary-label">{{t dashboard.services.hdfs.totalFilesAndDirs}}</div>
+      </div>
+      {{! Upgrade Status }}
+      <div class="row upgrade-status col-md-3">
+        <div class="summary-value main-info">
+          <span {{bindAttr class="view.isUpgradeStatusWarning:upgrade-status-warning"}}>{{view.upgradeStatus}}</span>
+        </div>
+        <div class="summary-label">{{t services.service.summary.pendingUpgradeStatus}}</div>
+      </div>
+      {{! Safe Mode Status }}
+      <div class="row safe-mode-status col-md-3">
+        <div class="summary-value main-info">
+          {{view.safeModeStatus}}
+        </div>
+        <div class="summary-label">{{t services.service.summary.safeModeStatus}}</div>
       </div>
     </div>
   </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/main/service/services/hive.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/services/hive.hbs b/ambari-web/app/templates/main/service/services/hive.hbs
index 9c8b914..5dad326 100644
--- a/ambari-web/app/templates/main/service/services/hive.hbs
+++ b/ambari-web/app/templates/main/service/services/hive.hbs
@@ -17,15 +17,18 @@
 }}
 
 <div class="row">
-  <div class="col-md-6">
-    {{view App.SummaryMasterComponentsView mastersCompBinding="view.parentView.mastersObj"}}
-    {{view App.SummaryClientComponentsView clientsObjBinding="view.parentView.clientObj"}}
+  <div class="col-md-12 component-summary">
+    <div class="col-md-2">{{t dashboard.services.hdfs.summary.components}}</div>
+    <div class="col-md-10">
+      {{view App.SummaryMasterComponentsView mastersCompBinding="view.parentView.mastersObj"}}
+      {{view App.SummaryClientComponentsView clientsObjBinding="view.parentView.clientObj"}}
+    </div>
   </div>
 </div>
 {{#each endpoint in hiveServerEndPoints}}
   {{#if endpoint.isVisible}}
     <div {{bindAttr class=":row :component endpoint.componentName"}}>
-      <div class="col-md-3 col-lg-3 summary-label">{{endpoint.label}}</div>
+      <div class="col-md-2 col-lg-3 summary-label" style="margin-top: 0px;">{{endpoint.label}}</div>
       <div class="col-md-9 col-lg-9 summary-value">
         {{#view view.summaryValueView titleBinding="endpoint.tooltipText" data-toggle="tooltip"}}
           {{endpoint.value}}
@@ -42,7 +45,7 @@
   <div class="col-md-6">
     {{#each link in view.viewLinks}}
       <div class="row">
-        <div class="col-md-6 summary-label">{{link.label}}</div>
+        <div class="col-md-6 summary-label" style="margin-top: 0px;">{{link.label}}</div>
         <div class="col-md-6 summary-value">
           <a href="#" target="_blank" {{action goToView link.viewInstance target="controller"}}>{{t app.goToView}}</a>
         </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/main/service/services/ranger.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/services/ranger.hbs b/ambari-web/app/templates/main/service/services/ranger.hbs
index f322498..9094de0 100644
--- a/ambari-web/app/templates/main/service/services/ranger.hbs
+++ b/ambari-web/app/templates/main/service/services/ranger.hbs
@@ -17,36 +17,39 @@
 }}
 
 <div class="row">
-  <div class="col-md-6">
-    {{view view.dashboardMasterComponentView}}
+  <div class="col-md-12 component-summary">
+    <div class="col-md-2">{{t dashboard.services.hdfs.summary.components}}</div>
+    <div class="col-md-10">
+      {{view view.dashboardMasterComponentView}}
 
-    {{! Ranger Tagsyncs }}
-    {{#if view.isRangerTagsyncCreated}}
-      <div {{bindAttr class=":row :component view.rangerTagsyncComponent.componentName"}}>
-        <div class="col-md-6 summary-label">
-          <a href="#" {{action filterHosts view.rangerTagsyncComponent}}>{{t dashboard.services.ranger.rangerTagsyncs}}</a>
-        </div>
-        <div class="col-md-6 summary-value">
-          {{#if App.router.clusterController.isServiceContentFullyLoaded}}
-            <span>
-              {{#view App.ComponentLiveTextView liveComponentsBinding="view.service.rangerTagsyncsStarted" totalComponentsBinding="view.service.rangerTagsyncsTotal"}}
-                {{view.liveComponents}}/{{view.totalComponents}}
-              {{/view}}
-            </span>{{t common.started}}
-          {{else}}
-            {{t common.loading.eclipses}}
-          {{/if}}
-        </div>
-      </div>
-    {{/if}}
-
-    {{#each item in controller.rangerPlugins}}
-      {{#if item.isDisplayed}}
-        <div class="row ranger-plugin">
-          <div class="col-md-6 summary-label">{{item.pluginTitle}}</div>
-          <div class="col-md-6 summary-value">{{item.status}}</div>
+      {{! Ranger Tagsyncs }}
+      {{#if view.isRangerTagsyncCreated}}
+        <div {{bindAttr class=":row :component :col-md-3 view.rangerTagsyncComponent.componentName"}}>
+          <div class="summary-value main-info">
+            {{#if App.router.clusterController.isServiceContentFullyLoaded}}
+              <span>
+                {{#view App.ComponentLiveTextView liveComponentsBinding="view.service.rangerTagsyncsStarted" totalComponentsBinding="view.service.rangerTagsyncsTotal"}}
+                  {{view.liveComponents}}/{{view.totalComponents}}
+                {{/view}}
+              </span>{{t common.started}}
+            {{else}}
+              {{t common.loading.eclipses}}
+            {{/if}}
+          </div>
+          <div class="summary-label">
+            <a href="#" {{action filterHosts view.rangerTagsyncComponent}}>{{t dashboard.services.ranger.rangerTagsyncs}}</a>
+          </div>
         </div>
       {{/if}}
-    {{/each}}
+
+      {{#each item in controller.rangerPlugins}}
+        {{#if item.isDisplayed}}
+          <div class="row ranger-plugin col-md-3">
+            <div class="summary-value main-info">{{item.status}}</div>
+            <div class="summary-label">{{item.pluginTitle}}</div>
+          </div>
+        {{/if}}
+      {{/each}}
+    </div>
   </div>
 </div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/6305fb6a/ambari-web/app/templates/main/service/services/storm.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/services/storm.hbs b/ambari-web/app/templates/main/service/services/storm.hbs
index 68e60eb..dda4075 100644
--- a/ambari-web/app/templates/main/service/services/storm.hbs
+++ b/ambari-web/app/templates/main/service/services/storm.hbs
@@ -17,68 +17,74 @@
 }}
 
 <div class="row">
-  <div class="col-md-6">
-    {{view App.SummaryMasterComponentsView mastersCompBinding="view.parentView.mastersObj"}}
-    {{#if view.isSupervisorCreated}}
-      <div class="row component SUPERVISOR">
-        <div class="col-md-6 summary-label">
-          <a href="#" {{action filterHosts view.filterComponent}}>
-            {{t dashboard.services.storm.supervisors}}
-          </a>
+  <div class="col-md-12 component-summary">
+    <div class="col-md-2">{{t dashboard.services.hdfs.summary.components}}</div>
+    <div class="col-md-10">
+      {{view App.SummaryMasterComponentsView mastersCompBinding="view.parentView.mastersObj"}}
+      {{#if view.isSupervisorCreated}}
+        <div class="row col-md-3 component SUPERVISOR">
+          <div class="summary-value main-info">
+            {{#if App.router.clusterController.isServiceContentFullyLoaded}}
+              {{#view App.ComponentLiveTextView liveComponentsBinding="view.superVisorsLive" totalComponentsBinding="view.superVisorsTotal" tagName="span"}}
+                {{view.liveComponents}}/{{view.totalComponents}}
+              {{/view}}
+              {{t common.live}}
+            {{else}}
+              {{t common.loading.eclipses}}
+            {{/if}}
+          </div>
+          <div class="summary-label">
+            <a href="#" {{action filterHosts view.filterComponent}}>
+              {{t dashboard.services.storm.supervisors}}
+            </a>
+          </div>
         </div>
-        <div class="col-md-6 summary-value">
-          {{#if App.router.clusterController.isServiceContentFullyLoaded}}
-            {{#view App.ComponentLiveTextView liveComponentsBinding="view.superVisorsLive" totalComponentsBinding="view.superVisorsTotal" tagName="span"}}
-              {{view.liveComponents}}/{{view.totalComponents}}
-            {{/view}}
-            {{t services.service.summary.SupervisorsLIVE}}
-          {{else}}
-            {{t common.loading.eclipses}}
-          {{/if}}
-        </div>
-      </div>
-    {{/if}}
-  </div>
-  <div class="col-md-6">
-    <div class="row storm-slots">
-      <div class="col-md-6 summary-label">
-        {{t services.service.summary.storm.freeslots}}
-      </div>
-      <div class="col-md-6 summary-value">
-        {{formatNull view.service.freeSlots}} / {{formatNull view.service.totalSlots}}
-        ({{formatNull view.freeSlotsPercentage empty="0"}}% {{t common.free}})
-      </div>
+      {{/if}}
     </div>
-    <div class="row storm-tasks">
-      <div class="col-md-6 summary-label">
-        {{t services.service.summary.storm.tasks}}
-      </div>
-      <div class="col-md-6 summary-value">
-        {{formatNull view.service.totalTasks}}
-      </div>
-    </div>
-    <div class="row storm-executors">
-      <div class="col-md-6 summary-label">
-        {{t services.service.summary.storm.executors}}
-      </div>
-      <div class="col-md-6 summary-value">
-        {{formatNull view.service.totalExecutors}}
+  </div>
+  <div class="col-md-12 metrics-summary">
+    <div class="col-md-2">{{t dashboard.services.hdfs.summary.service-metrics}}</div>
+    <div class="col-md-10">
+      <div class="row col-md-3 storm-slots">
+        <div class="summary-value main-info">
+          {{formatNull view.service.freeSlots}} / {{formatNull view.service.totalSlots}}
+          ({{formatNull view.freeSlotsPercentage empty="0"}}% {{t common.free}})
+        </div>
+        <div class="summary-label">
+          {{t services.service.summary.storm.freeslots}}
+        </div>
       </div>
-    </div>
-    <div class="row storm-topologies">
-      <div class="col-md-6 summary-label">
-        {{t services.service.summary.storm.topologies}}
+      <div class="row col-md-3 storm-tasks">
+        <div class="summary-value main-info">
+          {{formatNull view.service.totalTasks}}
+        </div>
+        <div class="summary-label">
+          {{t services.service.summary.storm.tasks}}
+        </div>
       </div>
-      <div class="col-md-6 summary-value">
-        {{formatNull view.service.topologies}}
+      <div class="row col-md-3 storm-executors">
+        <div class="summary-value main-info">
+          {{formatNull view.service.totalExecutors}}
+        </div>
+        <div class="summary-label">
+          {{t services.service.summary.storm.executors}}
+        </div>
       </div>
-    </div>
-    <div class="row nimbus-uptime">
-      <div class="col-md-6 summary-label">
-        {{t services.service.summary.storm.nimbus.uptime}}
+      <div class="row col-md-3 storm-topologies">
+        <div class="summary-value main-info">
+          {{formatNull view.service.topologies}}
+        </div>
+        <div class="summary-label">
+          {{t services.service.summary.storm.topologies}}
+        </div>
       </div>
-      <div class="col-md-6 summary-value">
-        {{view.nimbusUptimeFormatted}}
+      <div class="row col-md-3 nimbus-uptime">
+        <div class="summary-value main-info">
+          {{view.nimbusUptimeFormatted}}
+        </div>
+        <div class="summary-label">
+          {{t services.service.summary.storm.nimbus.uptime}}
+        </div>
       </div>
     </div>
   </div>