AMBARI-1295. Move cluster name display from the main nav to the top nav. (Jaimin Jetly via yusaku)

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

CHANGES.txt

@@ -36,6 +36,9 @@ Trunk (unreleased changes):
 
  IMPROVEMENTS
 
+ AMBARI-1295. Move cluster name display from the main nav to the top nav.
+ (Jaimin Jetly via yusaku)
+
  AMBARI-1268. Improve DAG UI. (billie via yusaku)
 
  AMBARI-1289. App page: remove old ode and fix test mode. (srimanth via

ambari-web/app/controllers/application.js

@@ -22,13 +22,17 @@ var App = require('app');
 App.ApplicationController = Em.Controller.extend({
 
   name: 'applicationController',
+
   clusterName: function () {
-    var name = App.router.get('clusterController.clusterName');
-    if (name) {
-      return name.capitalize();
-    }
-    return Em.I18n.t('installer.header');
+    return (App.router.get('clusterController.clusterName') || 'My Cluster').capitalize();
   }.property('App.router.clusterController.clusterName'),
+
+  clusterDisplayName: function () {
+    var name = this.get('clusterName');
+    var displayName = name.length > 13 ? name.substr(0, 10) + "..." : name;
+    return displayName.capitalize();
+  }.property('clusterName'),
+
   isClusterDataLoaded: function() {
     return App.router.get('clusterController.isLoaded');
   }.property('App.router.clusterController.isLoaded'),

ambari-web/app/controllers/main.js

@@ -21,23 +21,6 @@ require('models/background_operation');
 
 App.MainController = Em.Controller.extend({
   name: 'mainController',
-  
-  clusterName: function () {
-    var name = App.router.get('clusterController.clusterName');
-    if (name) {
-      return name;
-    }
-    return 'My Cluster';
-  }.property('App.router.clusterController.clusterName'),
-  
-  clusterDisplayName: function () {
-    var name = App.router.get('clusterController.clusterName');
-    if (name) {
-      var displayName = name.length > 13 ? name.substr(0, 10) + "..." : name;
-      return displayName.capitalize();
-    }
-    return 'My Cluster';
-  }.property('App.router.clusterController.clusterName'),
 
   updateTitle: function(){
     var name = App.router.get('clusterController.clusterName');

ambari-web/app/styles/application.less

@@ -77,8 +77,14 @@ footer {
     }
 
     .brand.cluster-name {
-      padding-left: 0px;
+      margin-left: 10px;
+
+      .operations-count {
+        background-color: #006DCC;
+      }
     }
+
+
   }
 
   .navbar .nav {
@@ -116,14 +122,7 @@ footer {
 }
 
 #main-nav {
-  .brand {
-    font-size: 17px;
-    border-right: 1px solid rgba(0, 0, 0, 0.08);
-    color: #555555;
-  }
-  .operations-count {
-    background-color: #006DCC;
-  }
+
   li {
     font-size: 15px;
     border-left: 1px solid #fefefe;
@@ -136,6 +135,18 @@ footer {
     width: 140px;
   }
 
+  li:first-child{
+    border-left: none;
+    a{
+      border-radius: 4px 0 0 4px;
+    }
+  }
+
+  .navbar-inner{
+    padding-left: 0;
+    border-left: 0;
+  }
+
   margin-bottom: 20px;
 }
 
@@ -2334,12 +2345,6 @@ ul.inline li {
   background-color: #555555;
 }
 
-#main-nav .brand {
-  background-color: #777777;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
 .modal-body {
   max-height: none;
 }

ambari-web/app/templates/application.hbs

@@ -23,11 +23,20 @@
         <div class="container">
           <a {{translateAttr href="topnav.logo.href"}} class="logo" target="_blank"><img src="/img/logo-small.png" alt="Apache Ambari" title="Apache Ambari"></a>
           <a class="brand" {{translateAttr href="topnav.logo.href"}} target="_blank" alt="Apache Ambari" title="Apache Ambari">{{t app.name}}</a>
-            {{!#if App.router.loggedIn} }
-              <a class="brand cluster-name" href="#">
-                 - {{clusterName} }
+
+          {{#if isClusterDataLoaded}}
+              <a class="brand cluster-name" href="javascript:void(null);" {{bindAttr title="clusterName"}}>
+                {{clusterDisplayName}}
+
+                {{#with App.router.backgroundOperationsController}}
+                  {{#if allOperationsCount}}
+                      <span class="label operations-count" {{action "showPopup" target="App.router.backgroundOperationsController"}}>{{allOperationsCount}}</span>
+                  {{/if}}
+                {{/with}}
+
               </a>
-            {{/if}}
+          {{/if}}
+
           <ul class="nav">
             <!-- <li class="right"><a class="help" {{!translateAttr href="topnav.help.href"}} target="_blank">Help</a></li> -->
             {{#if App.router.loggedIn}}

ambari-web/app/templates/main.hbs

@@ -20,15 +20,6 @@
 <div id="main-nav">
   <div class="navbar">
     <div class="navbar-inner">
-      <a class="brand" href="#" {{bindAttr title="clusterName"}}>
-        {{clusterDisplayName}}
-
-        {{#view Em.View tagName="" controllerBinding="App.router.backgroundOperationsController"}}
-          {{#if allOperationsCount}}
-            <span class="label operations-count" {{action "showPopup" target="controller"}}>{{allOperationsCount}}</span>
-          {{/if}}
-        {{/view}}
-      </a>
       {{view App.MainMenuView}}
     </div>
   </div>