AMBARI-11670. Width of services menu container is fixed and causes part of longer service names to be rendered outside the frame (alexantonenko)

ambari-web/app/assets/test/tests.js

@@ -333,7 +333,8 @@ var files = [
   'test/models/stack_version/repository_version_test',
   'test/routes/views_test',
   //contains test with fake timers that affect Date
-  'test/utils/lazy_loading_test'
+  'test/utils/lazy_loading_test',
+  'test/views/main/service/menu_test'
 ];
 
 App.initialize();

ambari-web/app/styles/application.less

@@ -2442,6 +2442,19 @@ a:focus {
     padding-left:6px;
   }
 }
+a.services-menu-blocks{
+  overflow:auto;
+  .icon-health-block{
+    width:16%;
+    float:left;
+  }
+  .service-name-block{
+    width:55%;
+    float:left;
+    white-space:normal;
+    word-break:break-word;
+  }
+}
 .quick-links-wrapper {
   margin-top: -53px;
   position: relative;
@@ -3680,7 +3693,7 @@ table.graphs {
 .services-menu {
   .icon-refresh {
     color: @restart-indicator-color;
-    margin-left: 1px;
+    margin-left: 4px;
   }
 }
 #host-details, #serviceConfig {
@@ -5124,7 +5137,8 @@ i.icon-asterisks {
     float: left;
     width: 100%;
     min-height: 30px;
-    margin-left: 2.564102564102564%;
+    margin-left: 1.282051282051282%;
+    *margin-left: 2.564102564102564%;
     *margin-left: 2.5109110747408616%;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -5190,7 +5204,8 @@ i.icon-asterisks {
   }
 
   .row-fluid .span2 {
-    width: 14.52991452991453%;
+    width: 15.811965811965812%;
+    *width: 14.52991452991453%;
     *width: 14.476723040552828%;
   }
 
@@ -5473,7 +5488,7 @@ i.icon-asterisks {
 
   .services-menu .nav-list li {
     .label.alerts-count {
-      margin-right: 4px;
+      margin-right: 0;
     }
     .icon-laptop {
       padding-left: 5px;

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

@@ -16,18 +16,18 @@
 * limitations under the License.
 }}
 
-<a {{bindAttr href="view.link"}}>
-  <div {{bindAttr class="view.alertsCount:with-alert :service-caption"}}>
+<a class="services-menu-blocks" {{bindAttr href="view.link"}}>
+  {{#if view.alertsCount}}
+    <span {{bindAttr class=":label :alerts-count view.hasCriticalAlerts:alerts-crit-count:alerts-warn-count"}}>
+      {{view.alertsCount}}
+    </span>
+  {{/if}}
+
+  <div class="icon-health-block">
     {{view App.MainDashboardServiceHealthView class="service-health" serviceBinding="view.content"}}&nbsp;
-    <span>{{unbound view.content.displayName}}</span>
-    <i rel="tooltip" {{action goToConfigs target="view"}}{{bindAttr class=":icon-refresh :restart-required-service view.content.isRestartRequired::hidden" data-original-title="view.restartRequiredMessage"}}></i>
   </div>
-
-  <div class="icon-caption">
-    {{#if view.alertsCount}}
-      <span {{bindAttr class=":label :alerts-count view.hasCriticalAlerts:alerts-crit-count:alerts-warn-count"}}>
-        {{view.alertsCount}}
-      </span>
-    {{/if}}
+  <div class="service-name-block">
+    <span>{{unbound view.content.displayName}}</span>
   </div>
+  <i rel="tooltip" {{action goToConfigs target="view"}}{{bindAttr class=":icon-refresh :restart-required-service view.content.isRestartRequired::hidden" data-original-title="view.restartRequiredMessage"}}></i>
 </a>

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

@@ -69,7 +69,9 @@ App.MainServiceMenuView = Em.CollectionView.extend({
       return this.get('content.id') == this.get('parentView.activeServiceId') ? 'active' : '';
     }.property('parentView.activeServiceId'),
 
-    alertsCount: Em.computed.alias('content.alertsCount'),
+    alertsCount: function () {
+      return this.get('content.alertsCount') > 99 ? "99+" : this.get('content.alertsCount') ;
+    }.property('content.alertsCount'),
 
     hasCriticalAlerts: Em.computed.alias('content.hasCriticalAlerts'),
 

ambari-web/test/views/main/service/menu_test.js

@@ -0,0 +1,67 @@
+/**
+ * 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.
+ */
+
+var App = require('app');
+require('views/main/service/menu');
+
+describe('App.MainServiceMenuView', function () {
+
+  var mainServiceMenuView;
+
+  beforeEach(function(){
+    mainServiceMenuView = App.MainServiceMenuView.create();
+    var view = mainServiceMenuView.get('itemViewClass').create({
+      content:{
+        alertsCount: 2
+      }
+    });
+    mainServiceMenuView.set('itemViewClass',view);
+  });
+
+  var cases = [
+    {
+      title:'alertsCount=0 test case:',
+      alertsCount:0,
+      result:0
+    },
+    {
+      title:'alertsCount=5 test case:',
+      alertsCount:5,
+      result:5
+    },
+    {
+      title:'alertsCount=200 test case:',
+      alertsCount:200,
+      result:"99+"
+    },
+    {
+      title:'alertsCount=99 test case:',
+      alertsCount:99,
+      result:99
+    }
+  ];
+
+
+  cases.forEach(function(item){
+    it(item.title,function(){
+      mainServiceMenuView.get('itemViewClass').set('content.alertsCount',item.alertsCount);
+      expect(mainServiceMenuView.get('itemViewClass.alertsCount')).to.not.be.undefined;
+      expect(mainServiceMenuView.get('itemViewClass.alertsCount')).to.equal(item.result);
+    });
+  });
+});