AMBARI-4854. Hosts page components caret wrong behaviour. (xiwang via yusaku)

ambari-web/app/styles/application.less

@@ -3221,15 +3221,11 @@ table.graphs {
     }
   }
   .host-components-expander {
-    .caret {
+    .icon-caret-right, .icon-caret-down {
       vertical-align: middle;
       margin-right: 5px;
       margin-bottom: 2px;
-      &.right {
-        border-left: 4px solid #000000;
-        border-top: 4px solid transparent;
-        border-bottom: 4px solid transparent;
-      }
+      text-decoration: none;
     }
   }
   .host-components {

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

@@ -127,7 +127,8 @@
 
           <td>{{host.loadAvg}}</td>
           <td>
-            <a href="#" class="host-components-expander" {{action toggleComponents target="view"}}> <span class="caret right"></span>{{view.content.hostComponents.length}} {{pluralize view.content.hostComponents.length singular="t:common.component" plural="t:common.components"}}</a>
+            <a href="#" class="host-components-expander" {{action toggleComponents target="view"}}> <span {{bindAttr class="view.isComponentsCollapsed:icon-caret-right:icon-caret-down"}}></span>
+              {{view.content.hostComponents.length}} {{pluralize view.content.hostComponents.length singular="t:common.component" plural="t:common.components"}}</a>
             <div id="host-{{unbound host.hostName}}" class="host-components">
               {{{view.labels}}}
             </div>

ambari-web/app/views/main/host.js

@@ -206,10 +206,11 @@ App.MainHostView = App.TableView.extend({
     tagName: 'tr',
     didInsertElement: function(){
       App.tooltip(this.$("[rel='HealthTooltip'], [rel='UsageTooltip'], [rel='ComponentsTooltip']"));
+      this.set('isComponentsCollapsed', true);
     },
 
     toggleComponents: function(event) {
-      this.$(event.target).find('.caret').toggleClass('right');
+      this.set('isComponentsCollapsed', !this.get('isComponentsCollapsed'));
       this.$('.host-components').toggle();
     },