AMBARI-816. Update Cluster Management -> Services pages to use a left nav rather than tabs for service selection (yusaku)

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

AMBARI-666-CHANGES.txt

@@ -12,6 +12,9 @@ AMBARI-666 branch (unreleased changes)
 
   NEW FEATURES
 
+  AMBARI-816. Update Cluster Management -> Services pages to use a left nav 
+  rather than tabs for service selection. (yusaku)
+
   AMBARI-815. Ensure data persistence during navigation, refresh and
   ensure necessary restrictions. (Jaimin Jetly via yusaku)
 

ambari-web/app/styles/app.css

@@ -59,14 +59,6 @@
     margin-bottom: 5px;
     margin-top: -55px;
 }
-.add-service-button {
-    position: relative;
-}
-.add-service-button a{
-    position: absolute;
-    right: 0;
-    top: -55px;
-}
 /*End Services*/
 
 /*Hosts*/

ambari-web/app/styles/application.less

@@ -340,23 +340,30 @@ a:focus {
 /*****end styles for dashboard page*****/
 
 /*Services*/
-.nav-tabs {
-  .tab-marker-position {
-    padding-left: 25px;
-    padding-right: 25px;
-    background-position: 8px 12px;
-    background-repeat: no-repeat;
-  }
-  .health-status-LIVE {
-    .tab-marker-position;
-    background-image: @status-live-marker;
+#services-menu {
+  .nav-list {
+    .tab-marker-position {
+      padding-left: 30px;
+      padding-right: 30px;
+      background-position: 12px 9px;
+      background-repeat: no-repeat;
+    }
+    .health-status-LIVE {
+      .tab-marker-position;
+      background-image: @status-live-marker;
+    }
+    .health-status-DEAD {
+      .tab-marker-position;
+      background-image: @status-dead-marker;
+    }
+    li {
+      line-height: 24px;
+    }
   }
-  .health-status-DEAD {
-    .tab-marker-position;
-    background-image: @status-dead-marker;
+  .add-service-button {
+    margin: 20px 20px 10px;
   }
 }
-
 .nav-pills.move {
   float: right;
   margin-top: -48px;
@@ -491,10 +498,12 @@ ul.filter {
 }
 
 #main-admin-menu {
-  margin-left: 0;
-
+  padding: 8px 0;
   ul {
     margin-bottom: 0;
+    li {
+      line-height: 24px;
+    }
   }
 }
 

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

@@ -16,9 +16,13 @@
 * limitations under the License.
 -->
 
-<div id="main-admin-menu" class="well span2">
-{{view App.MainAdminMenuView}}
-</div>
-<div class="span9">
-  {{outlet}}
+<div class="row-fluid">
+  <div id="main-admin-menu" class="well span2">
+  {{view App.MainAdminMenuView}}
+  </div>
+  <div class="span10">
+    <div class="row-fluid">
+      {{outlet}}
+    </div>
+  </div>
 </div>

ambari-web/app/templates/main/admin/user.hbs

@@ -19,13 +19,13 @@
 {{#if view.ldapUser}}
   <p class="text-info">{{t admin.users.ldapAuthentionUsed}}.</p>
 {{else}}
-<table class="table table-bordered table-striped span5">
+<table class="table table-bordered table-striped span6">
   <thead>
   <tr>
-    <th>ID (test)</th>
-    <th>{{t admin.users.username}}</th>
-    <th>{{t admin.users.privileges}}<i class="icon-question-sign"></i></th>
-    <th></th>
+    <th style="width:10%">ID&nbsp;(test)</th>
+    <th style="width:50%">{{t admin.users.username}}</th>
+    <th style="width:20%">{{t admin.users.privileges}}<i class="icon-question-sign"></i></th>
+    <th style="width:20%">Action</th>
   </tr>
   </thead>
   <tbody>

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

@@ -16,5 +16,17 @@
 * limitations under the License.
 -->
 
-{{view App.MainServiceMenuView}}
-{{outlet}}
+<div class="row-fluid">
+  <div id="services-menu" class="well span2" style="padding: 8px 0">
+    {{view App.MainServiceMenuView}}
+    <div class="add-service-button">
+      <a class="btn" href="javascript:void(null)">
+        <i class="icon-plus"></i>
+        Add Service
+      </a>
+    </div>
+  </div>
+  <div class="span10">
+    {{outlet}}
+  </div>
+</div>

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

@@ -15,7 +15,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->
-<div class="row service-block">
+<div class="row-fluid service-block">
 	<div class="span6">
     <ul class="nav nav-pills move">
       <li class="dropdown">
@@ -27,7 +27,7 @@
         </ul>
       </li>
     </ul>
-		<h4>Service Summary</h4>
+		<h4>{{controller.content.label}} Summary</h4>
 		<div class="service-content">
 			{{#each component in controller.content.components}}
         {{#if component.type}}

ambari-web/app/templates/main/service/item.hbs

@@ -16,26 +16,26 @@
 * limitations under the License.
 -->
 
-<div class="add-service-button">
-    <a class="btn btn-inverse" href="javascript:void(null)">
-        <i class="icon-plus icon-white"></i>
-        Add Service
-    </a>
-</div>
 {{view App.MainServiceInfoMenuView}}
 <div class="service-button">
+  {{#if showRebalancer}}
+  <a class="btn" href="javascript:void(null)">
+    <i class="icon-play-circle"></i>
+    Run Rebalancer
+  </a>
+  {{/if}}
   {{#if controller.content.workStatus}}
     <a href="javascript:void(null)" class="btn disabled">
       <i class="icon-play"></i>
       Start
     </a>
     <a href="javascript:void(null)" class="btn btn-danger" data-toggle="modal" {{action "stopConfirmPopup" target="controller"}}>
-      <i class="icon-stop"></i>
+      <i class="icon-stop icon-white"></i>
       Stop
     </a>
   {{else}}
     <a href="javascript:void(null)" class="btn btn-success" data-toggle="modal" {{action "startConfirmPopup" target="controller"}}>
-      <i class="icon-play"></i>
+      <i class="icon-play icon-white"></i>
       Start
     </a>
     <a href="javascript:void(null)" class="btn disabled">
@@ -43,11 +43,5 @@
       Stop
     </a>
   {{/if}}
-  {{#if showRebalancer}}
-    <a class="btn" href="javascript:void(null)">
-        <i class="icon-play-circle"></i>
-        Run Rebalancer
-    </a>
-  {{/if}}
 </div>
 {{outlet}}

ambari-web/app/views/main/admin/menu.js

@@ -44,7 +44,7 @@ App.MainAdminMenuView = Em.CollectionView.extend({
     */
   ],
   tagName: "ul",
-  classNames: ["nav", "nav-stacked", "nav-pills"],
+  classNames: ["nav", "nav-list"],
 
   init: function(){
     this._super();

ambari-web/app/views/main/service/menu.js

@@ -26,7 +26,7 @@ App.MainServiceMenuView = Em.CollectionView.extend({
   init: function(){ this._super(); this.activateView(); },
 
   tagName:'ul',
-  classNames:["nav", "nav-tabs", "nav-services"],
+  classNames:["nav", "nav-list", "nav-services"],
 
   activateView:function () {
     var service = App.router.get('mainServiceItemController.content');