AMBARI-5255. Make active hosts filter more prominent in installer step9. (xiwang via yusaku)

ambari-web/app/messages.js

@@ -612,6 +612,7 @@ Em.I18n.translations = {
   'installer.step9.host.status.nothingToInstall':'Install complete (Waiting to start)',
   'installer.step9.hosts.status.label.inProgress':'In Progress',
   'installer.step9.hosts.status.label.warning':'Warning',
+  'installer.step9.hosts.filteredHostsInfo': '{0} of {1} hosts showing',
   'installer.step9.hostLog.popup.header':'Tasks. executed on ',
   'installer.step9.hostLog.popup.categories.all':'All',
   'installer.step9.hostLog.popup.categories.pending':'Queued / Pending',
@@ -1829,6 +1830,7 @@ Em.I18n.translations = {
   'tableView.filters.clearFilters': 'Clear filters',
   'tableView.filters.paginationInfo': '{0} - {1} of {2}',
   'tableView.filters.clearAllFilters': 'clear filters',
+  'tableView.filters.showAll': 'Show All',
 
   'jobs.type':'Jobs Type',
   'jobs.type.hive':'Hive',

ambari-web/app/styles/application.less

@@ -439,16 +439,50 @@ h1 {
         }
       }
     }
+    .box-header {
+      padding: 0px 4px 0px 10px;
+      background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #e5e5e5));
+      background: -ms-linear-gradient(top, #ffffff, #e5e5e5);
+      background: -moz-linear-gradient(center top, #ffffff 0%, #e5e5e5 100%);
+      .btn-primary {
+        margin-top: 3px;
+      }
+    }
+
     #host-filter {
-      margin-top: 3px;
+      margin-top: 1px;
       ul {
         margin: 3px;
         font-size: 12px;
+        li.filter-status.active a {
+          text-decoration: none;
+          color: #FFFFFF;
+        }
+        li.filter-status.active,
+        li.filter-status.active:hover {
+          background-color: #666666;
+          -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+          -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+          -webkit-border-radius: 5px;
+          -moz-border-radius: 5px;
+          border-radius: 5px;
+        }
+        li.filter-status:hover {
+          background-color: #d8d8d8;
+          -webkit-border-radius: 5px;
+          -moz-border-radius: 5px;
+          border-radius: 5px;
+        }
+        li.divider {
+          color: #666666;
+          padding: 4px 2px;
+        }
         li {
           list-style: none;
           display: block;
           float: left;
-          padding: 0 2px;
+          padding: 4px 4px;
           a {
             text-decoration: underline;
           }
@@ -456,10 +490,6 @@ h1 {
         li.first {
           font-weight: bold;
         }
-        li.active a {
-          text-decoration: none;
-          color: #000000;
-        }
       }
     }
     .progress {
@@ -505,16 +535,52 @@ h1 {
     }
     #overallProgress {
     }
+    .box-header {
+      padding: 0px 4px 0px 10px;
+      background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #e5e5e5));
+      background: -ms-linear-gradient(top, #ffffff, #e5e5e5);
+      background: -moz-linear-gradient(center top, #ffffff 0%, #e5e5e5 100%);
+      .btn-primary {
+        margin-top: 3px;
+      }
+    }
+    table {
+      margin-bottom: 0px;
+    }
     #host-filter {
-      margin-top: 3px;
+      margin-top: 1px;
       ul {
         margin: 3px;
         font-size: 12px;
+        li.filter-status.active a {
+          text-decoration: none;
+          color: #FFFFFF;
+        }
+        li.filter-status.active,
+        li.filter-status.active:hover {
+          background-color: #666666;
+          -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+          -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+          -webkit-border-radius: 5px;
+          -moz-border-radius: 5px;
+          border-radius: 5px;
+        }
+        li.filter-status:hover {
+          background-color: #d8d8d8;
+          -webkit-border-radius: 5px;
+          -moz-border-radius: 5px;
+          border-radius: 5px;
+        }
+        li.divider {
+          color: #666666;
+          padding: 4px 2px;
+        }
         li {
           list-style: none;
           display: block;
           float: left;
-          padding: 0 2px;
+          padding: 4px 4px;
           a {
             text-decoration: underline;
           }
@@ -522,12 +588,9 @@ h1 {
         li.first {
           font-weight: bold;
         }
-        li.active a {
-          text-decoration: none;
-          color: #000000;
-        }
       }
     }
+
     #deploy-status-by-host {
       margin-bottom: 0;
       th.host {

ambari-web/app/templates/wizard/step3.hbs

@@ -40,13 +40,13 @@
           <ul class="clearfix">
             <li class="first">{{t common.show}}:</li>
             {{#each category in view.categories}}
-              <li {{bindAttr class="category.itemClass"}}>
+              <li {{bindAttr class=":filter-status category.itemClass"}}>
                 <a {{action selectCategory category target="view"}} href="#">
                   {{category.label}}
                 </a>
               </li>
               {{#unless category.last}}
-                <li>|</li>
+                <li class="divider">|</li>
               {{/unless}}
             {{/each}}
           </ul>

ambari-web/app/templates/wizard/step9.hbs

@@ -48,13 +48,13 @@
         <ul class="clearfix">
           <li class="first">{{t common.show}}:</li>
           {{#each category in view.categories}}
-            <li {{bindAttr class="category.itemClass"}}>
+            <li {{bindAttr class=":filter-status category.itemClass"}}>
               <a {{action selectCategory category target="view"}} href="#">
                 {{category.label}}
               </a>
             </li>
             {{#unless category.last}}
-              <li>|</li>
+              <li class="divider">|</li>
             {{/unless}}
           {{/each}}
         </ul>
@@ -101,29 +101,28 @@
             <td colspan="3"><p>{{t installer.step3.hosts.noHosts}}</p></td>
           </tr>
         {{/if}}
-
         </tbody>
       </table>
     </div>
       <div id="hosts">
-          <div class="page-bar">
-              <div class="items-on-page">
-                  <label>{{t common.show}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
-              </div>
-              <div class="info">{{view.paginationInfo}}</div>
-              <div class="paging_two_button">
-                {{view view.paginationFirst}}
-                {{view view.paginationLeft}}
-                {{view view.paginationRight}}
-                {{view view.paginationLast}}
-              </div>
+        <div class="page-bar">
+          <div class="selected-hosts-info pull-left">
+            {{view.filteredHostsInfo}}
+            -
+            <a {{action showAllHosts target="view"}} href="#">{{t tableView.filters.showAll}}</a>
           </div>
+          <div class="items-on-page">
+              <label>{{t common.show}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
+          </div>
+          <div class="info">{{view.paginationInfo}}</div>
+          <div class="paging_two_button">
+            {{view view.paginationFirst}}
+            {{view view.paginationLeft}}
+            {{view view.paginationRight}}
+            {{view view.paginationLast}}
+          </div>
+        </div>
       </div>
-    <div class="box-footer">
-      <hr/>
-      <div class="footer-pagination">
-      </div>
-    </div>
   </div>
 
   <div>

ambari-web/app/views/wizard/step9_view.js

@@ -131,8 +131,24 @@ App.WizardStep9View = App.TableView.extend({
         result = content.filterProperty('status', selectedCategory.get('hostStatus'));
       }
       self.set('filteredContent', result);
+      self.set('filteredHostsInfo', Em.I18n.t('installer.step9.hosts.filteredHostsInfo').format(result.get('length'), content.get('length')));
     });
   }.observes('selectedCategory'),
+
+  /**
+   * filter hosts info shown up on bottom of the box. Set by filter function, when 'seletedCategory' changed
+   */
+  filteredHostsInfo: '',
+
+  /**
+   * On click handler for 'show all' link
+   */
+  showAllHosts: function () {
+    this.get('categories').forEach(function (category) {
+      category.set('isActive', (category.get('hostStatus') === 'all'));
+    });
+  },
+
   /**
    * Trigger on Category click
    * @param {Object} event