AMBARI-4433: Ambari version info should be visible in UI (sposetti)

ambari-web/app/controllers/application.js

@@ -27,6 +27,10 @@ App.ApplicationController = Em.Controller.extend({
     return (App.router.get('clusterController.clusterName') || 'My Cluster');
   }.property('App.router.clusterController.clusterName'),
 
+  ambariVersion: function () {
+    return (App.router.get('clusterController.ambariVersion') || Em.I18n.t('common.notAvailable'));
+  }.property('App.router.clusterController.ambariVersion'),
+
   clusterDisplayName: function () {
     var name = this.get('clusterName');
     return name.length > 13 ? name.substr(0, 10) + "..." : name;
@@ -138,6 +142,19 @@ App.ApplicationController = Em.Controller.extend({
         }
       })
     });
+  },
+
+  showAboutPopup: function() {
+
+    var self = this;
+    App.ModalPopup.show({
+      header: Em.I18n.t('common.aboutAmbari'),
+      secondary: false,
+      bodyClass: Em.View.extend({
+        templateName: require('templates/common/about'),
+        ambariVersion: this.get('ambariVersion')
+      })
+    });    
   }
 
 });

ambari-web/app/controllers/global/cluster_controller.js

@@ -23,6 +23,7 @@ App.ClusterController = Em.Controller.extend({
   cluster:null,
   isLoaded:false,
   ambariProperties: null,
+  ambariVersion: null,
   clusterDataLoadedPercent: 'width:0', // 0 to 1
   /**
    * Whether we need to update statuses automatically or not
@@ -362,6 +363,7 @@ App.ClusterController = Em.Controller.extend({
   loadAmbariPropertiesSuccess: function(data) {
     console.log('loading ambari properties');
     this.set('ambariProperties', data.RootServiceComponents.properties);
+    this.set('ambariVersion', data.RootServiceComponents.component_version);
   },
 
   loadAmbariPropertiesError: function() {

ambari-web/app/messages.js

@@ -26,9 +26,14 @@ Em.I18n.translations = {
   'app.loadingPlaceholder': 'Loading...',
   'app.signout':'Sign out',
   'app.settings':'Settings',
+  'app.aboutAmbari':'About',
   'app.settings.notshowBgOperationsPopup': 'Do not show the Background Operations dialog when starting an operation',
   'app.settings.notShowBgOperations': 'Do not show this dialog again when starting a background operation',
 
+  'app.aboutAmbari.getInvolved': 'Get involved!',
+  'app.aboutAmbari.version': 'Version',
+  'app.aboutAmbari.licensed': 'Licensed under the Apache License, Version 2.0',
+
   'apply':'apply',
   'and':'and',
   'none':'none',
@@ -139,6 +144,8 @@ Em.I18n.translations = {
   'common.abort': 'Abort',
   'common.misc': 'Misc',
   'common.userSettings': 'User Settings',
+  'common.aboutAmbari': 'About',
+  'common.notAvailable': 'Not Available',
   'common.operations': 'Operations',
   'common.startTime': 'Start Time',
   'common.duration': 'Duration',

ambari-web/app/styles/application.less

@@ -3363,6 +3363,22 @@ background: url(	data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByU
 }
 /*End Admin*/
 
+/*Start About*/
+.about {
+  .logo {
+    width: 20%;
+    float: left;
+  }
+  .content {
+    float: left;
+    .project {
+      font-weight: bold;
+      font-size: 2em;
+    }
+  }
+}
+/*End About*/
+
 /*assign masters*/
 
 .assign-masters {
@@ -4492,6 +4508,10 @@ ul.inline li {
   background-color: #666666;
 }
 
+li.break {
+  background: none repeat scroll 0 0 #e4e4e4;
+  padding-top: 1px;
+}
 .dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a {
   background-color: #666666;
   background-image: linear-gradient(to bottom, #666666, #555555);

ambari-web/app/templates/application.hbs

@@ -44,11 +44,13 @@
                 {{App.router.loginName}}&nbsp;<span class="caret"></span>
               </button>
               <ul class="dropdown-menu">
+                <li><a href="" {{action showAboutPopup target="controller"}}>{{t app.aboutAmbari}}</a></li>
                 {{#if isClusterDataLoaded}}
                   {{#if App.isAdmin}}
                     <li><a href="" {{action showSettingsPopup target="controller"}}>{{t app.settings}}</a></li>
                   {{/if}}
                 {{/if}}
+                <li class="break"></li>
                 <li><a href="" {{action logoff}}>{{t app.signout}}</a></li>
               </ul>
             </div>

ambari-web/app/templates/common/about.hbs

@@ -0,0 +1,35 @@
+{{!
+* 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.
+}}
+
+<div class="about">
+  <div class="logo">
+<img src="/img/logo.png" alt="Apache Ambari" title="Apache Ambari">
+  </div>
+  <div class="content">
+<div class="project">Apache Ambari</div>
+<br>
+{{t app.aboutAmbari.version}}
+{{view.ambariVersion}}
+<br>
+<br>
+<a href="http://ambari.apache.org/" target="_blank">{{t app.aboutAmbari.getInvolved}}</a>
+<br>
+<a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">{{t app.aboutAmbari.licensed}}</a>
+    </label>
+  </div>
+</div>