AMBARI-4957. Jobs table ID/user filters should be text field with apply button (alexantonenko)

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

@@ -224,20 +224,6 @@ App.MainJobsController = Em.ArrayController.extend({
     }
   }),
 
-  /**
-   * List of users.
-   * Will be used for filtering in user column.
-   * Go to App.MainJobsView.userFilterView for more information
-   */
-  users: function () {
-    return this.get('content').mapProperty("user").uniq().map(function(userName){
-      return {
-        name: userName,
-        checked: false
-      };
-    });
-  }.property('content.length'),
-
   columnsName: Ember.ArrayController.create({
     content: [
       { name: Em.I18n.t('jobs.column.id'), index: 0 },

ambari-web/app/styles/apps.less

@@ -328,6 +328,19 @@
   }
 
   #jobs-table {
+
+    .apply-btn {
+      font-size: 12px;
+      padding: 0px 8px;
+      margin-left: 6px;
+      margin-top: -8px;
+      line-height: 22px;
+    }
+
+    .input-120{
+      width: 120px;
+    }
+
     .label-row {
       font-size: 0.9em;
       th {
@@ -390,15 +403,19 @@
     .no-data{
       text-align: center;
     }
+    .id {
+      width: 100%;
+      overflow: auto;
+    }
     td:first-child,
     th:first-child {
       border-left-width: 1px;
-      width: 96%;
-      overflow: auto;
-      display: inline-block;
+      width: 36%;
     }
     td:first-child + td,
-    th:first-child + th,
+    th:first-child + th{
+      width: 20%;
+    }
     td:first-child + td + td,
     th:first-child + th + th,
     td:first-child + td + td + td,
@@ -407,7 +424,7 @@
     }
     td:first-child + td + td + td + td,
     th:first-child + th + th + th + th{
-      width: 17%;
+      width: 12%;
     }
   }
   .table {
@@ -415,9 +432,6 @@
     th {
       border-top: none;
     }
-    td.id {
-      overflow: inherit;
-    }
     ul.filter-components {
       padding: 5px 0;
       background: #777777;
@@ -778,4 +792,4 @@
       width: 400px;
   }
   }
-}
+}

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

@@ -43,19 +43,21 @@
           </tr>
           </thead>
           <tbody>
-          {{#if  view.noDataToShow}}
+          {{#if view.noDataToShow}}
               <tr>
-                  <td class="no-data" {{bindAttr colspan="controller.columnsName.content.length"}}>{{t jobs.nothingToShow}}</td>
+                <td class="no-data" {{bindAttr colspan="controller.columnsName.content.length"}}>{{t jobs.nothingToShow}}</td>
               </tr>
           {{else}}
             {{#each job in view.pageContent}}
               <tr>
-                <td class="id">
-                  {{#if job.hasTezDag}}
-                    <a rel="tooltip" class="job-link" title="{{unbound job.queryText}}" href="#" {{action "showJobDetails" job}}>{{unbound job.name}}</a>
-                  {{else}}
-                    <span rel="tooltip" class="job-link" title="{{unbound job.queryText}}">{{unbound job.name}}</span>
-                  {{/if}}
+                <td>
+                  <div class="id">
+                    {{#if job.hasTezDag}}
+                        <a rel="tooltip" class="job-link" title="{{unbound job.queryText}}" href="#" {{action "showJobDetails" job}}>{{unbound job.name}}</a>
+                    {{else}}
+                        <span rel="tooltip" class="job-link" title="{{unbound job.queryText}}">{{unbound job.name}}</span>
+                    {{/if}}
+                  </div>
                 </td>
                 <td>
                   {{job.user}}
@@ -84,4 +86,4 @@
           </div>
       </div>
   </div>
-{{/if}}
+{{/if}}

ambari-web/app/views/common/filter_view.js

@@ -31,7 +31,11 @@ var App = require('app');
 var wrapperView = Ember.View.extend({
   classNames: ['view-wrapper'],
   layout: Ember.Handlebars.compile('<a href="#" {{action "clearFilter" target="view"}} class="ui-icon ui-icon-circle-close"></a> {{yield}}'),
-  template: Ember.Handlebars.compile('{{#if view.fieldId}}<input type="hidden" id="{{unbound view.fieldId}}" value="" />{{/if}} {{view view.filterView}}'),
+  template: Ember.Handlebars.compile(
+    '{{#if view.fieldId}}<input type="hidden" id="{{unbound view.fieldId}}" value="" />{{/if}}' +
+    '{{view view.filterView}}' +
+    '{{#if view.showApply}}<button {{action "setValueOnApply" target="view"}} class="apply-btn btn"><span>Apply</span></button>{{/if}} '
+  ),
 
   value: null,
 
@@ -48,6 +52,14 @@ var wrapperView = Ember.View.extend({
 
   clearFilter: function(){
     this.set('value', this.get('emptyValue'));
+    if(this.get('setPropertyOnApply')){
+      this.setValueOnApply();
+    }
+    return false;
+  },
+
+  setValueOnApply: function() {
+    this.set(this.get('setPropertyOnApply'), this.get('value'));
     return false;
   },
 
@@ -472,4 +484,4 @@ module.exports = {
         }
     }
   }
-};
+};

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

@@ -112,57 +112,19 @@ App.MainJobsView = App.TableView.extend({
    */
   jobsIdFilterView: filters.createTextView({
     column: 0,
-    valueBinding: "controller.filterObject.id"
+    showApply: true,
+    setPropertyOnApply: 'controller.filterObject.id'
   }),
 
   /**
    * Filter-list for User.
    * Based on <code>filters</code> library
    */
-  userFilterView: filters.createComponentView({
-
+  userFilterView: filters.createTextView({
     column: 1,
-
-    /**
-     * Inner FilterView. Used just to render component. Value bind to <code>mainview.value</code> property
-     * Base methods was implemented in <code>filters.componentFieldView</code>
-     */
-    filterView: filters.componentFieldView.extend({
-      templateName:require('templates/main/jobs/user_filter'),
-
-      usersBinding: 'controller.users',
-
-      clearFilter:function() {
-        this.get('users').setEach('checked', false);
-        this._super();
-      },
-
-      applyFilter:function() {
-        this._super();
-        var chosenUsers = this.get('users').filterProperty('checked', true).mapProperty('name');
-        this.set('value', chosenUsers.toString());
-      },
-
-      /**
-       * Verify that checked checkboxes are equal to value
-       */
-      checkUsers: function() {
-        var users = this.get('value').split(',');
-        var self = this;
-        if (users) {
-          users.forEach(function(userName) {
-            var u = self.get("users").findProperty('name', userName);
-            if (u) {
-              if (!u.checked) {
-                u.checked = true;
-              }
-            }
-          });
-        }
-      }.observes('users.length')
-    }),
-
-    valueBinding: 'controller.filterObject.user'
+    fieldType: 'input-small',
+    showApply: true,
+    setPropertyOnApply: 'controller.filterObject.user'
   }),
 
   /**
@@ -170,7 +132,7 @@ App.MainJobsView = App.TableView.extend({
    * Based on <code>filters</code> library
    */
   startTimeFilterView: filters.createSelectView({
-    fieldType: 'input-medium',
+    fieldType: 'input-120',
     column: 2,
     content: ['Any', 'Past 1 hour',  'Past 1 Day', 'Past 2 Days', 'Past 7 Days', 'Past 14 Days', 'Past 30 Days', 'Custom'],
     valueBinding: "controller.filterObject.startTime"
@@ -184,8 +146,14 @@ App.MainJobsView = App.TableView.extend({
     associations[0] = 'id';
     associations[1] = 'user';
     associations[2] = 'startTime';
-    associations[3] = 'endTime';
     return associations;
-  }.property()
-
+  }.property(),
+
+  clearFilters: function() {
+    this.get('childViews').forEach(function(childView) {
+      if (childView['clearFilter']) {
+        childView.clearFilter();
+      }
+    });
+  }
 })