AMBARI-10113. Change the layout for the service summary page.(xiwang)

ambari-web/app/styles/application.less

@@ -1871,7 +1871,7 @@ a:focus {
   }
 }
 
-.services, #summary-info {
+.services, .summary-info {
   .tab-marker-position {
     background-position:  0px 3px;
     background-repeat: no-repeat;
@@ -1916,7 +1916,7 @@ a:focus {
   }
 }
 
-#summary-info {
+.summary-info {
   border-top: none;
   border-collapse: collapse;
   color: #666;
@@ -2318,7 +2318,7 @@ a:focus {
 }
 
 .service-content {
-  #summary-info {
+  .summary-info {
     margin-bottom: 0;
   }
 }

ambari-web/app/styles/enhanced_service_dashboard.less

@@ -0,0 +1,32 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.service-metrics-block {
+
+  #add-widget-action-box {
+    margin: 20px 10px 10px 10px;
+    padding: 40px 55px;
+    border: 1px solid #ddd;
+    .icon-plus {
+      font-size: 70px;
+      color: #ddd;
+      position: center;
+    }
+  }
+
+}

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

@@ -44,24 +44,24 @@
   {{/isAccessible}}
 {{/if}}
 
-<div class="row-fluid service-block">
-  <div class="span6">
-    <div class="box">
-      <div class="box-header summary-box-header">
-        <h4>{{controller.content.label}} {{t services.service.info.menu.summary}}</h4>
-        {{#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>
-          {{else}}
-            <span {{action "showServiceAlertsPopup" controller.content target="controller"}}
-              class="label pull-right no-alerts-label">{{t services.service.summary.alerts.noAlerts}}</span>
-          {{/if}}
+<div class="service-block">
+  <div class="box">
+    <div class="box-header summary-box-header">
+      <h4>{{controller.content.label}} {{t services.service.info.menu.summary}}</h4>
+      {{#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>
+        {{else}}
+          <span {{action "showServiceAlertsPopup" controller.content target="controller"}}
+            class="label pull-right no-alerts-label">{{t services.service.summary.alerts.noAlerts}}</span>
         {{/if}}
-      </div>
-      <div class="service-content">
-        <table id="summary-info" class="table no-borders table-condensed">
+      {{/if}}
+    </div>
+    <div class="service-content row-fluid">
+      <div class="span6">
+        <table class="summary-info table no-borders table-condensed">
           <tbody>
           {{#if view.serviceSummaryView}}
             {{view view.serviceSummaryView}}
@@ -74,7 +74,7 @@
 
   {{#if view.isServiceMetricLoaded}}
     {{#if view.serviceMetricGraphs.length}}
-      <div class="span6 service-metrics-block">
+      <div class="service-metrics-block">
         <div class="box">
           <div class="box-header">
             <h4>{{t services.service.metrics}}</h4>
@@ -88,6 +88,13 @@
                 {{/each}}
               </ul>
             </div>
+            {{#if App.supports.customizedWidgets}}
+              <div class="btn-group pull-right">
+                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                  {{t common.actions}} &nbsp;<span class="caret"></span>
+                </button>
+              </div>
+            {{/if}}
           </div>
           <div class="">
             <table class="graphs">
@@ -108,7 +115,6 @@
       </div>
     {{/if}}
   {{/if}}
-
 </div>
 
 {{#if view.collapsedSections}}

ambari-web/app/templates/main/service/services/hbase.hbs

@@ -36,6 +36,15 @@
   <td>{{t dashboard.services.hbase.regions.transition}}</td>
   <td>{{view.service.regionsInTransition}}</td>
 </tr>
+
+<!-- Divider-- make the remaining summary info on 2nd table-->
+    </tbody>
+  </table>
+</div>
+<div class="span6">
+  <table class="summary-info table no-borders table-condensed">
+    <tbody>
+
 <!-- HBase Master Started Time -->
 <tr>
   <td>{{t dashboard.services.hbase.masterStarted}}</td>

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

@@ -72,6 +72,15 @@
   <td>{{t dashboard.services.hdfs.capacity.nonDfsUsed}}</td>
   <td>{{view.nonDfsUsedDisk}}</td>
 </tr>
+
+<!-- Divider-- make the remaining summary info on 2nd table-->
+    </tbody>
+  </table>
+</div>
+<div class="span6">
+  <table class="summary-info table no-borders table-condensed">
+    <tbody>
+
 <tr>
   <td>{{t dashboard.services.hdfs.capacity.remaining}}</td>
   <td>{{view.remainingDisk}}</td>

ambari-web/app/templates/main/service/services/storm.hbs

@@ -31,6 +31,15 @@
     </span> {{t services.service.summary.SupervisorsLIVE}}
   </td>
 </tr>
+
+<!-- Divider-- make the remaining summary info on 2nd table-->
+    </tbody>
+  </table>
+</div>
+<div class="span6">
+  <table class="summary-info table no-borders table-condensed">
+    <tbody>
+
 <tr>
   <td>
     {{t services.service.summary.storm.freeslots}}

ambari-web/app/templates/main/service/services/yarn.hbs

@@ -48,6 +48,15 @@
   <td>{{t dashboard.services.yarn.resourceManager.uptime}}</td>
   <td>{{view.nodeUptime}}</td>
 </tr>
+
+<!-- Divider-- make the remaining summary info on 2nd table-->
+    </tbody>
+  </table>
+</div>
+<div class="span6">
+  <table class="summary-info table no-borders table-condensed">
+    <tbody>
+
 <!-- ResourceManager Heap -->
 <tr>
   <td>{{t dashboard.services.resourceManager.nodes.heap}}</td>

ambari-web/app/views/main/service/info/summary.js

@@ -297,11 +297,11 @@ App.MainServiceInfoSummaryView = Em.View.extend(App.UserPref, {
 
    /*
    * Find the graph class associated with the graph name, and split
-   * the array into sections of 2 for displaying on the page
-   * (will only display rows with 2 items)
+   * the array into sections of 5 for displaying on the page
+   * (will only display rows with 5 items)
    */
   constructGraphObjects: function(graphNames) {
-    var result = [], graphObjects = [], chunkSize = 2;
+    var result = [], graphObjects = [], chunkSize = 5;
     var self = this;
 
     if (!graphNames) {
@@ -318,6 +318,13 @@ App.MainServiceInfoSummaryView = Em.View.extend(App.UserPref, {
         }));
       });
 
+      if (App.get('supports.customizedWidgets')) {
+        graphObjects.push(Ember.View.extend({
+          classNames: ['last-child'],
+          template: Ember.Handlebars.compile('<div id="add-widget-action-box"><i class="icon-plus"></i></div>')
+        }));
+      }
+
       while(graphObjects.length) {
         result.push(graphObjects.splice(0, chunkSize));
       }