AMBARI-10869. Unusable formatting of components names on Hosts page (onechiporenko)

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

@@ -181,6 +181,7 @@ var files = ['test/init_model_test',
   'test/views/common/custom_date_popup_test',
   'test/views/common/progress_bar_view_test',
   'test/views/common/widget/graph_widget_view_test',
+  'test/views/common/modal_popups/hosts_table_list_popup_test',
   'test/views/main/admin_test',
   'test/views/main/dashboard_test',
   'test/views/main/menu_test',

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

@@ -44,10 +44,6 @@ App.MainHostController = Em.ArrayController.extend(App.TableServerMixin, {
 
   startIndex: 1,
 
-  expandedComponentsSections: [],
-
-  expandedVersionsSections: [],
-
   /**
    * Components which will be shown in component filter
    * @returns {Array}

ambari-web/app/styles/common.less

@@ -312,4 +312,21 @@
   .spinner {
     display: none;
   }
+}
+
+.host-elements {
+  border: 1px solid #ddd;
+  height: 120px;
+  overflow: auto;
+  padding: 5px;
+  ul {
+    margin-bottom: 0;
+  }
+  table {
+    width: 100%;
+    td {
+      width: 50%;
+      padding: 0;
+    }
+  }
 }

ambari-web/app/templates/common/modal_popups/hosts_table_list_popup.hbs

@@ -0,0 +1,37 @@
+{{!
+* 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.
+}}
+
+{{view.hostName}}
+<div class="host-elements">
+  {{#if view.isObjectsList}}
+    <table>
+      {{#each view.items}}
+        <tr>
+          <td>{{name}}</td>
+          <td>{{status}}</td>
+        </tr>
+      {{/each}}
+    </table>
+  {{else}}
+    <ul class="unstyled">
+      {{#each item in view.items}}
+        <li>{{item}}</li>
+      {{/each}}
+    </ul>
+  {{/if}}
+</div>

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

@@ -138,22 +138,14 @@
 
           <td class="load-avg">{{host.loadAvg}}</td>
           <td {{bindAttr class="App.supports.stackUpgrade::hidden App.stackVersionsAvailable::hidden view.hasSingleVersion:not-active-link :host-table-versions"}}>
-            <a href="#" class="expander black" {{action toggleVersions target="view"}}>
-              {{#unless view.hasSingleVersion}}
-                <span {{bindAttr class="view.isVersionsCollapsed:icon-caret-right:icon-caret-down"}}></span>
-              {{/unless}}
+            <a href="#" class="black" {{action displayVersions target="view"}}>
               {{view.currentVersion}}
             </a>
-            <div {{bindAttr class="view.isVersionsCollapsed:noDisplay:display :stack-versions :collapsed-list"}}>
-              {{{view.versionLabels}}}
-            </div>
           </td>
-          <td class="host-table-components">
-            <a href="#" class="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 {{bindAttr class="view.isComponentsCollapsed:noDisplay:display :host-components :collapsed-list"}}>
-              {{{view.labels}}}
-            </div>
+          <td {{bindAttr class="view.hasNoComponents:not-active-link :host-table-components"}}>
+            <a href="#" class="black" {{action displayComponents target="view"}}>
+              {{view.content.hostComponents.length}} {{pluralize view.content.hostComponents.length singular="t:common.component" plural="t:common.components"}}
+            </a>
           </td>
         {{/view}}
       {{/each}}

ambari-web/app/views.js

@@ -29,6 +29,7 @@ require('views/common/modal_popup');
 require('views/common/modal_popups/alert_popup');
 require('views/common/modal_popups/confirmation_feedback_popup');
 require('views/common/modal_popups/confirmation_popup');
+require('views/common/modal_popups/hosts_table_list_popup');
 require('views/common/modal_popups/prompt_popup');
 require('views/common/modal_popups/cluster_check_popup');
 require('views/common/modal_popups/invalid_KDC_popup');

ambari-web/app/views/common/modal_popups/hosts_table_list_popup.js

@@ -0,0 +1,42 @@
+/**
+ * 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');
+
+/**
+ * Show popup with list of stack versions/components installed on host
+ * @param header
+ * @param hostName
+ * @param items
+ * @returns {App.ModalPopup}
+ */
+App.showHostsTableListPopup = function (header, hostName, items) {
+  var isObjectsList = items.map(function (item) {
+    return typeof item;
+  }).contains('object');
+  return App.ModalPopup.show({
+    header: header,
+    secondary: null,
+    bodyClass: Em.View.extend({
+      templateName: require('templates/common/modal_popups/hosts_table_list_popup'),
+      hostName: hostName,
+      items: items,
+      isObjectsList: isObjectsList
+    })
+  });
+}

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

@@ -210,20 +210,13 @@ App.MainHostView = App.TableView.extend(App.TableServerViewMixin, {
   },
 
   updateHostsPagination: function () {
-    this.clearExpandedSections();
     this.updatePagination();
   },
 
   willDestroyElement: function () {
-    this.clearExpandedSections();
     $('.tooltip').remove();
   },
 
-  clearExpandedSections: function () {
-    this.get('controller.expandedComponentsSections').clear();
-    this.get('controller.expandedVersionsSections').clear();
-  },
-
   onInitialLoad: function () {
     if (this.get('tableFilteringComplete')) {
       this.refresh();
@@ -555,30 +548,26 @@ App.MainHostView = App.TableView.extend(App.TableServerViewMixin, {
     content:null,
     tagName: 'tr',
     didInsertElement: function(){
-      var hostName = this.get('content.hostName');
       App.tooltip(this.$("[rel='HealthTooltip'], [rel='UsageTooltip'], [rel='ComponentsTooltip']"));
-      this.set('isComponentsCollapsed', !this.get('controller.expandedComponentsSections').contains(hostName));
-      this.set('isVersionsCollapsed', !this.get('controller.expandedVersionsSections').contains(hostName));
-    },
-
-    toggleList: function (flagName, arrayName) {
-      var arrayPropertyName = 'controller.' + arrayName;
-      var hostNameArray = this.get(arrayPropertyName);
-      var hostName = this.get('content.hostName');
-      this.toggleProperty(flagName);
-      if (this.get(flagName)) {
-        this.set(arrayPropertyName, hostNameArray.without(hostName));
-      } else {
-        hostNameArray.push(hostName);
-      }
     },
 
-    toggleComponents: function () {
-      this.toggleList('isComponentsCollapsed', 'expandedComponentsSections');
+    displayComponents: function () {
+      var header = Em.I18n.t('common.components'),
+        hostName = this.get('content.hostName'),
+        items = this.get('content.hostComponents').getEach('displayName');
+      App.showHostsTableListPopup(header, hostName, items);
     },
 
-    toggleVersions: function () {
-      this.toggleList('isVersionsCollapsed', 'expandedVersionsSections');
+    displayVersions: function () {
+      var header = Em.I18n.t('common.versions'),
+        hostName = this.get('content.hostName'),
+        items = this.get('content.stackVersions').filterProperty('isVisible').map(function (stackVersion) {
+          return {
+            name: stackVersion.get('displayName'),
+            status: App.format.role(stackVersion.get('status'))
+          };
+        });
+      App.showHostsTableListPopup(header, hostName, items);
     },
 
     /**
@@ -610,14 +599,6 @@ App.MainHostView = App.TableView.extend(App.TableServerViewMixin, {
       return Em.I18n.t('hosts.table.componentsInPassiveState.withoutNames').format(count);
     }.property('content.hostComponents.@each.passiveState'),
 
-    /**
-     * String with list of host components <code>displayName</code>
-     * @returns {String}
-     */
-    labels: function() {
-      return this.get('content.hostComponents').getEach('displayName').join("<br />");
-    }.property('content.hostComponents.length'),
-
     /**
      * true if host has only one repoversion
      * in this case expander in version column is hidden
@@ -627,6 +608,16 @@ App.MainHostView = App.TableView.extend(App.TableServerViewMixin, {
       return this.get('content.stackVersions').filterProperty('isVisible', true).length < 2;
     }.property('content.stackVersions.length'),
 
+    /**
+     * true if host has no components
+     * @returns {Boolean}
+     */
+    hasNoComponents: function() {
+      return !this.get('content.hostComponents.length');
+    }.property('content.hostComponents.length'),
+
+    /**
+
     /**
      * this version is always shown others hidden unless expander is open
      * host may have no stack versions
@@ -637,18 +628,6 @@ App.MainHostView = App.TableView.extend(App.TableServerViewMixin, {
       return currentRepoVersion ? currentRepoVersion.get('displayName') + " (" + currentRepoVersion.get('displayStatus') + ")" : "";
     }.property('content.stackVersions'),
 
-    /**
-     * String with list of host components <code>displayName</code>
-     * @returns {String}
-     */
-    versionLabels: function () {
-      return this.get('content.stackVersions').filter(function(sv) {
-        return sv.get('isVisible') === true && sv.get('isCurrent') === false;
-      }).map(function (version) {
-        return version.get('displayName');
-      }).join("<br />");
-    }.property('content.stackVersions.length'),
-
     /**
      * CSS value for disk usage bar
      * @returns {String}

ambari-web/test/views/common/modal_popups/hosts_table_list_popup_test.js

@@ -0,0 +1,62 @@
+/**
+ * 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/common/modal_popups/hosts_table_list_popup');
+
+describe('App.showHostsTableListPopup', function () {
+
+  var cases = [
+    {
+      header: 'h0',
+      hostName: 'hn0',
+      items: ['i0', 'i1'],
+      isObjectsList: false,
+      title: 'strings list'
+    },
+    {
+      header: 'h1',
+      hostName: 'hn1',
+      items: [
+        {
+          name: 'n0',
+          status: 's0'
+        },
+        {
+          name: 'n1',
+          status: 's1'
+        }
+      ],
+      isObjectsList: true,
+      title: 'objects list'
+    }
+  ];
+
+  cases.forEach(function (item) {
+    it(item.title, function () {
+      var popup = App.showHostsTableListPopup(item.header, item.hostName, item.items),
+        popupBody = popup.bodyClass.create();
+      expect(popup.header).to.equal(item.header);
+      expect(popupBody.get('hostName')).to.equal(item.hostName);
+      expect(popupBody.get('items')).to.eql(item.items);
+      expect(popupBody.get('isObjectsList')).to.equal(item.isObjectsList);
+    });
+  });
+
+});

ambari-web/test/views/main/host_test.js

@@ -91,54 +91,20 @@ describe('App.MainHostView', function () {
   describe('#updateHostsPagination', function () {
 
     beforeEach(function () {
-      sinon.stub(view, 'clearExpandedSections', Em.K);
       sinon.stub(view, 'updatePagination', Em.K);
     });
 
     afterEach(function () {
-      view.clearExpandedSections.restore();
       view.updatePagination.restore();
     });
 
-    it('should execute clearExpandedSections and updatePagination', function () {
+    it('should execute and updatePagination', function () {
       view.updateHostsPagination();
-      expect(view.clearExpandedSections.calledOnce).to.be.true;
       expect(view.updatePagination.calledOnce).to.be.true;
     });
 
   });
 
-  describe('#willDestroyElement', function () {
-
-    beforeEach(function () {
-      sinon.stub(view, 'clearExpandedSections', Em.K);
-    });
-
-    afterEach(function () {
-      view.clearExpandedSections.restore();
-    });
-
-    it('should execute clearExpandedSections', function () {
-      view.willDestroyElement();
-      expect(view.clearExpandedSections.calledOnce).to.be.true;
-    });
-
-  });
-
-  describe('#clearExpandedSections', function () {
-
-    it('should clear expandedComponentsSections and expandedVersionsSections from controller', function () {
-      view.get('controller').setProperties({
-        expandedComponentsSections: [''],
-        expandedVersionsSections: ['']
-      });
-      view.clearExpandedSections();
-      expect(view.get('controller.expandedComponentsSections')).to.have.length(0);
-      expect(view.get('controller.expandedVersionsSections')).to.have.length(0);
-    });
-
-  });
-
   describe('#HostView', function () {
 
     var hostView;
@@ -152,109 +118,78 @@ describe('App.MainHostView', function () {
       });
     });
 
-    describe('#didInsertElement', function () {
-
-      var cases = [
-          {
-            expandedSections: ['h0'],
-            isCollapsed: false,
-            title: '{0} section should be expanded'
-          },
-          {
-            expandedSections: ['h1'],
-            isCollapsed: true,
-            title: '{0} section should be collapsed'
-          }
-        ],
-        testMethod = function (item, elementsName, arrayName, propertyName) {
-          it(item.title.format(elementsName), function () {
-            hostView.set('content.hostName', 'h0');
-            hostView.set('controller.' + arrayName, item.expandedSections);
-            hostView.didInsertElement();
-            expect(App.tooltip.calledOnce).to.be.true;
-            expect(hostView.get(propertyName)).to.equal(item.isCollapsed);
-          });
-        };
+    describe('#displayComponents', function () {
 
       beforeEach(function () {
-        sinon.stub(App, 'tooltip', Em.K);
+        sinon.stub(App, 'showHostsTableListPopup', Em.K);
       });
 
       afterEach(function () {
-        App.tooltip.restore();
-      });
-
-      cases.forEach(function (item) {
-        testMethod(item, 'components', 'expandedComponentsSections', 'isComponentsCollapsed');
-        testMethod(item, 'versions', 'expandedVersionsSections', 'isVersionsCollapsed');
+        App.showHostsTableListPopup.restore();
       });
 
-    });
-
-    describe('#toggleList', function () {
-
-      var cases = [
-        {
-          isCollapsed: false,
-          isCollapsedAfter: true,
-          expandedSections: ['h0'],
-          expandedSectionsAfter: [],
-          title: 'section becomes collapsed'
-        },
-        {
-          isCollapsed: true,
-          isCollapsedAfter: false,
-          expandedSections: [],
-          expandedSectionsAfter: ['h0'],
-          title: 'section becomes expanded'
-        }
-      ];
-
-      cases.forEach(function (item) {
-        it(item.title, function () {
-          hostView.set('content.hostName', 'h0');
-          hostView.set('isComponentsCollapsed', item.isCollapsed);
-          hostView.set('controller.expandedComponentsSections', item.expandedSections);
-          hostView.toggleList('isComponentsCollapsed', 'expandedComponentsSections');
-          expect(hostView.get('isComponentsCollapsed')).to.equal(item.isCollapsedAfter);
-          expect(hostView.get('controller.expandedComponentsSections')).to.eql(item.expandedSectionsAfter);
+      it('should display host components in modal popup', function () {
+        hostView.set('content', {
+          hostName: 'h',
+          hostComponents: [
+            {
+              displayName: 'c0'
+            },
+            {
+              displayName: 'c1'
+            }
+          ]
         });
+        hostView.displayComponents();
+        expect(App.showHostsTableListPopup.calledOnce).to.be.true;
+        expect(App.showHostsTableListPopup.calledWith(Em.I18n.t('common.components'), 'h', ['c0', 'c1'])).to.be.true;
       });
 
     });
 
-    describe('#toggleComponents', function () {
+    describe('#displayVersions', function () {
 
       beforeEach(function () {
-        sinon.stub(hostView, 'toggleList', Em.K);
+        sinon.stub(App, 'showHostsTableListPopup', Em.K);
       });
 
       afterEach(function () {
-        hostView.toggleList.restore();
-      });
-
-      it('should toggle components list', function () {
-        hostView.toggleComponents();
-        expect(hostView.toggleList.calledOnce).to.be.true;
-        expect(hostView.toggleList.calledWith('isComponentsCollapsed', 'expandedComponentsSections')).to.be.true;
+        App.showHostsTableListPopup.restore();
       });
 
-    });
-
-    describe('#toggleVersions', function () {
-
-      beforeEach(function () {
-        sinon.stub(hostView, 'toggleList', Em.K);
-      });
-
-      afterEach(function () {
-        hostView.toggleList.restore();
-      });
-
-      it('should toggle components list', function () {
-        hostView.toggleVersions();
-        expect(hostView.toggleList.calledOnce).to.be.true;
-        expect(hostView.toggleList.calledWith('isVersionsCollapsed', 'expandedVersionsSections')).to.be.true;
+      it('should display stack versions in modal popup', function () {
+        hostView.set('content', {
+          hostName: 'h',
+          stackVersions: [
+            Em.Object.create({
+              displayName: 'v0',
+              status: 'CURRENT',
+              isVisible: true
+            }),
+            Em.Object.create({
+              displayName: 'v1',
+              status: 'OUT_OF_SYNC',
+              isVisible: true
+            }),
+            Em.Object.create({
+              displayName: 'v2',
+              status: 'INSTALL_FAILED',
+              isVisible: false
+            })
+          ]
+        });
+        hostView.displayVersions();
+        expect(App.showHostsTableListPopup.calledOnce).to.be.true;
+        expect(App.showHostsTableListPopup.calledWith(Em.I18n.t('common.versions'), 'h', [
+          {
+            name: 'v0',
+            status: 'Current'
+          },
+          {
+            name: 'v1',
+            status: 'Out Of Sync'
+          }
+        ])).to.be.true;
       });
 
     });