AMBARI-15310: Host Service Summary Page does not display long service names well (Keta Patel via dili)

ambari-web/app/models/host_component.js

@@ -31,6 +31,21 @@ App.HostComponent = DS.Model.extend({
   service: DS.belongsTo('App.Service'),
   adminState: DS.attr('string'),
 
+  serviceDisplayName: function(){
+    var name = this.get('service.displayName');
+    return name.length > 14 ? name.substr(0, 11) + "..." : name;
+  }.property('service'),
+
+  getDisplayName:function(){
+    var name = this.get('displayName');
+    return name.length > 19 ? name.substr(0, 16) + "..." : name;
+  }.property('displayName'),
+
+  getDisplayNameAdvanced:function(){
+    var name = this.get('displayNameAdvanced');
+    return name.length > 19 ? name.substr(0, 16) + "..." : name;
+  }.property('displayNameAdvanced'),
+
   summaryLabelClassName:function(){
     return 'label_for_'+this.get('componentName').toLowerCase();
   }.property('componentName'),

ambari-web/app/styles/application.less

@@ -5559,6 +5559,32 @@ i.icon-asterisks {
   }
 }
 
+.row-fluid .host-component-block {
+  .health-icon-block {
+    width: 6%;
+    float: left;
+    padding-right: 5px;
+  }
+
+  .refresh-icon-block {
+    width: 6%;
+    float: right;
+  }
+
+  .medkit-icon-block {
+    width: 6%;
+    float: left;
+    padding-left: 3px;
+  }
+
+  .component-name-block {
+    width: 77%;
+    float: left;
+    white-space: normal;
+    word-wrap: break-word;
+  }
+}
+
 .filter-combobox{
   > input{
     width: 170px;
@@ -6168,4 +6194,4 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
 
 .enable-all-link {
   margin-left: -10px;
-}
+}

ambari-web/app/templates/main/host/details/host_component.hbs

@@ -16,30 +16,37 @@
 * limitations under the License.
 }}
 
-<div class="span7 component-label">
-  {{#if view.isUpgradeFailed}}
-    {{#isAuthorized "HOST.ADD_DELETE_COMPONENTS"}}
-      <a href="#" {{action "upgradeComponent" view.content target="controller"}} >
-        <i title="Component upgrade failed" class="components-health icon-arrow-up"></i>
-      </a>
-    {{/isAuthorized}}
-  {{else}}
-    <span rel='componentHealthTooltip' {{bindAttr class="view.statusClass view.statusIconClass :components-health" data-original-title="view.componentTextStatus"}}></span>&nbsp;
-  {{/if}}
-  {{#if component.displayNameAdvanced}}
-    {{component.displayNameAdvanced}}
-  {{else}}
-    {{component.displayName}}
-  {{/if}}
-  &nbsp;/&nbsp;
-  <a href="#" {{action routeToService component.service}}>{{component.service.displayName}}</a>
-  &nbsp;
-  {{#if component.staleConfigs}}
-    <span class="text-warning icon-refresh"></span>
-  {{/if}}
-  {{#unless component.isActive}}
-    <span class="icon-medkit"></span>
-  {{/unless}}
+<div class="span7 component-label host-component-block">
+  <div class="health-icon-block">
+    {{#if view.isUpgradeFailed}}
+      {{#isAuthorized "HOST.ADD_DELETE_COMPONENTS"}}
+        <a href="#" {{action "upgradeComponent" view.content target="controller"}} >
+          <i title="Component upgrade failed" class="components-health icon-arrow-up"></i>
+        </a>
+      {{/isAuthorized}}
+    {{else}}
+      <span rel='componentHealthTooltip' {{bindAttr class="view.statusClass view.statusIconClass :components-health" data-original-title="view.componentTextStatus"}}></span>&nbsp;
+    {{/if}}
+  </div>
+  <div class="component-name-block">
+    {{#if component.displayNameAdvanced}}
+      <span {{bindAttr title="component.displayNameAdvanced"}}>{{component.getDisplayNameAdvanced}}</span>
+    {{else}}
+      <span {{bindAttr title="component.displayName"}}>{{component.getDisplayName}}</span>
+    {{/if}}
+    &nbsp;/&nbsp;
+    <a href="#" {{action routeToService component.service}} {{bindAttr title="component.service.displayName"}}>{{component.serviceDisplayName}}</a>
+  </div>
+  <div class="refresh-icon-block">
+    {{#if component.staleConfigs}}
+      <span class="text-warning icon-refresh"></span>
+    {{/if}}
+  </div>
+  <div class="medkit-icon-block">
+    {{#unless component.isActive}}
+      <span class="icon-medkit"></span>
+    {{/unless}}
+  </div>
 </div>
 <div class="span5 pull-right">
   {{#isAuthorized "SERVICE.DECOMMISSION_RECOMMISSION"}}

ambari-web/app/templates/main/host/summary.hbs

@@ -76,7 +76,7 @@
                 </div>
               {{/if}}
             </div>
-            <div class="span5 row">
+            <div class="span5 row pull-right">
               {{#isAuthorized "SERVICE.MODIFY_CONFIGS, SERVICE.START_STOP, HOST.ADD_DELETE_COMPONENTS, HOST.TOGGLE_MAINTENANCE"}}
                 {{#if view.clients.length}}
                   <div class="btn-group pull-right">

ambari-web/test/models/host_component_test.js

@@ -310,4 +310,85 @@ describe('App.HostComponent', function() {
 
   App.TestAliases.testAsComputedExistsIn(hc, 'isNotInstalled', 'workStatus', ['INIT', 'INSTALL_FAILED']);
 
-});
+  describe("#getDisplayName",function(){
+    var testCases = [
+      {
+        testName: 'for displayName of length < 19',
+        displayName: 'abc',
+        result: 'abc'
+      },
+      {
+        testName:'for displayName of length = 19',
+        displayName: '1234567890123456789',
+        result: '1234567890123456789'
+      },
+      {
+        testName:'for displayName of length > 19',
+        displayName: '12345678901234567890',
+        result: '1234567890123456...'
+      }
+    ];
+
+    testCases.forEach(function(test){
+      it(test.testName, function(){
+        hc.set('displayName',test.displayName);
+        expect(hc.get('getDisplayName')).to.equal(test.result);
+      });
+    });
+  });
+
+  describe("#getDisplayNameAdvanced",function(){
+    var testCases = [
+      {
+        testName: 'for displayNameAdvanced of length < 19',
+        displayNameAdvanced: 'abc',
+        result: 'abc'
+      },
+      {
+        testName:'for displayNameAdvanced of length = 19',
+        displayNameAdvanced: '1234567890123456789',
+        result: '1234567890123456789'
+      },
+      {
+        testName:'for displayNameAdvanced of length > 19',
+        displayNameAdvanced: '12345678901234567890',
+        result: '1234567890123456...'
+      }
+    ];
+
+    testCases.forEach(function(test){
+      it(test.testName, function(){
+        hc.set('displayNameAdvanced',test.displayNameAdvanced);
+        expect(hc.get('getDisplayNameAdvanced')).to.equal(test.result);
+      });
+    });
+  });
+
+
+  describe("#serviceDisplayName",function(){
+    var testCases = [
+      {
+        testName: 'for service.displayName of length < 14',
+        serviceDisplayName: 'abc',
+        result: 'abc'
+      },
+      {
+        testName:'for service.displayName of length = 14',
+        serviceDisplayName: '12345678901234',
+        result: '12345678901234'
+      },
+      {
+        testName:'for service.displayName of length > 14',
+        serviceDisplayName: '123456789012345',
+        result: '12345678901...'
+      }
+    ];
+
+    testCases.forEach(function(test){
+      it(test.testName, function(){
+        hc.set('service',Em.Object.create({displayName:test.serviceDisplayName}));
+        expect(hc.get('serviceDisplayName')).to.equal(test.result);
+      });
+    });
+  });
+});