AMBARI-15239 Combo Search: Search tags need to be preserved after drill in/out single host detail (rzang)

ambari-web/app/config.js

@@ -79,7 +79,7 @@ App.supports = {
   skipComponentStartAfterInstall: false,
   storeKDCCredentials: true,
   preInstallChecks: false,
-  hostComboSearchBox: false,
+  hostComboSearchBox: true,
   serviceAutoStart: false,
   logSearch: false,
   redhatSatellite: false

ambari-web/app/mixins/common/table_server_view_mixin.js

@@ -93,7 +93,6 @@ App.TableServerViewMixin = Em.Mixin.create({
     clearTimeout(this.get('timeOut'));
     this.set('controller.resetStartIndex', true);
     this.set('filterConditions', []);
-    this.clearFilterConditionsFromLocalStorage();
     searchCollection.models.forEach(function (model) {
       var tag = model.attributes;
       var isComponentState = comboController.isComponentStateFacet(tag.category);

ambari-web/app/styles/application.less

@@ -3121,6 +3121,10 @@ table.graphs {
     .set-rack-id {
       text-decoration: none;
     }
+
+    .host-select-all {
+      margin-bottom: -1px ;
+    }
   }
 
   .status-dot-position {

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

@@ -24,41 +24,12 @@
         {{view App.HostTableMenuView}}
       {{/isAuthorized}}
     </div>
-    <div class="health-status-bar pull-left">
-      {{#view view.statusFilter categoriesBinding="view.categories"}}
-        <div class="btn-group display-inline-block">
-          <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
-            <span class="filters-label">{{t common.filter}}: </span>
-            <span>
-              <span {{bindAttr class="view.class"}}></span>
-              {{view.comboBoxLabel}}
-              <span class="caret"></span>
-            </span>
-          </a>
-          <ul class="dropdown-menu">
-            <li {{bindAttr class=":category-item view.filtersUsed::active"}}>
-              <a {{action clearFilter target="view"}} href="#">{{t common.all}} ({{view.parentView.totalCount}})</a>
-            </li>
-            {{#each category in view.categories}}
-              {{#if category.isVisible}}
-                <li {{bindAttr class=":category-item category.itemClass"}}>
-                  <a {{action selectCategory category target="view"}} href="#">
-                      <span {{bindAttr class="category.isHealthStatus:health-status category.healthClass category.class"}}></span>
-                    {{category.label}}
-                  </a>
-               </li>
-             {{/if}}
-           {{/each}}
-         </ul>
-       </div>
-      {{/view}}
-    </div>
   </div>
   {{outlet}}
   <table class="table advanced-header-table table-bordered table-striped" id="hosts-table">
     <thead>
-      {{#view view.sortView classNames="label-row" contentBinding="view.filteredContent"}}
-        <th class="first"> </th>
+    {{#view view.sortView classNames="label-row" contentBinding="view.filteredContent"}}
+        <th class="first"><div class="ember-view view-wrapper">{{view Ember.Checkbox class="host-select-all" checkedBinding="view.parentView.selectAllHosts"}}</div></th>
         <th> </th>
         {{view view.parentView.nameSort}}
         <th> </th>
@@ -74,23 +45,6 @@
         </th>
         <th class="sort-view-6">{{t common.components}}</th>
       {{/view}}
-      <tr class="filter-row">
-        <th class="first"><div class="ember-view view-wrapper">{{view Ember.Checkbox checkedBinding="view.selectAllHosts"}}</div></th>
-        <th> </th>
-        <th>{{view view.nameFilterView}}</th>
-        <th> </th>
-        <th> </th>
-        <th>{{view view.ipFilterView}}</th>
-        <th>{{view view.rackFilterView}}</th>
-        <th>{{view view.cpuFilterView}}</th>
-        <th>{{view view.ramFilterView}}</th>
-        <th> </th>
-        <th>{{view view.loadAvgFilterView}}</th>
-        <th {{bindAttr class="App.supports.stackUpgrade::hidden App.stackVersionsAvailable::hidden"}}>
-          {{view view.versionsFilterView}}
-        </th>
-        <th>{{view view.componentsFilterView}}</th>
-      </tr>
     </thead>
     <tbody>
     {{#if view.pageContent}}
@@ -165,11 +119,6 @@
   </div>
 
   <div class="page-bar">
-    <div class="filtered-info span4">
-      {{#if view.showFilteredContent}}
-        <label>{{view.filteredContentInfo}} - <a {{action clearFilters target="view"}} id="hosts-page-clear-filters" href="#">{{t tableView.filters.clearAllFilters}}</a></label>
-      {{/if}}
-    </div>
     <div class="selected-hosts-info span4">
       {{#if view.showSelectedFilter}}
         <div>

ambari-web/app/utils/db.js

@@ -204,6 +204,10 @@ App.db.setFilterConditions = function (name, filterConditions) {
   App.db.set('app.tables.filterConditions', name, filterConditions);
 };
 
+App.db.setComboSearchQuery = function (name, query) {
+  App.db.set('app.tables.comboSearchQuery', name, query);
+};
+
 App.db.setDisplayLength = function (name, displayLength) {
   App.db.set('app.tables.displayLength', name, displayLength);
 };
@@ -368,6 +372,10 @@ App.db.getFilterConditions = function (name) {
   return name ? App.db.get('app.tables.filterConditions', name) : null;
 };
 
+App.db.getComboSearchQuery = function (name) {
+  return name ? App.db.get('app.tables.comboSearchQuery', name) : null;
+};
+
 App.db.getDisplayLength = function (name) {
   return name ? App.db.get('app.tables.displayLength', name) : null;
 };

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

@@ -403,6 +403,11 @@ App.TableView = Em.View.extend(App.UserPref, {
       App.db.setFilterConditions(this.get('controller.name'), null);
       result = true;
     }
+    var query = App.db.getComboSearchQuery(this.get('controller.name'));
+    if (query != null) {
+      App.db.setComboSearchQuery(this.get('controller.name'), null);
+      result = true;
+    }
     return result;
   },
 

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

@@ -642,326 +642,6 @@ App.MainHostView = App.TableView.extend(App.TableServerViewMixin, {
     }
   }),
 
-  /**
-   * Filter view for name column
-   * Based on <code>filters</code> library
-   */
-  nameFilterView: filters.createTextView({
-    column: 1,
-    fieldType: 'filter-input-width',
-    onChangeValue: function(){
-      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'string');
-    }
-  }),
-
-  /**
-   * Filter view for ip column
-   * Based on <code>filters</code> library
-   */
-  ipFilterView: filters.createTextView({
-    column: 2,
-    fieldType: 'filter-input-width',
-    onChangeValue: function(){
-      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'string');
-    }
-  }),
-
-   /**
-   * Filter view for rack column
-   * Based on <code>filters</code> library
-   */
-  rackFilterView: filters.createTextView({
-    column: 12,
-    fieldType: 'filter-input-width rack-input',
-    onChangeValue: function(){
-      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'string');
-    }
-  }),
-
-  /**
-   * Filter view for Cpu column
-   * Based on <code>filters</code> library
-   */
-  cpuFilterView: filters.createTextView({
-    fieldType: 'filter-input-width',
-    fieldId: 'cpu_filter',
-    column: 3,
-    onChangeValue: function(){
-      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'number');
-    }
-  }),
-
-  /**
-   * Filter view for Ram column
-   * Based on <code>filters</code> library
-   */
-  ramFilterView: filters.createTextView({
-    fieldType: 'filter-input-width',
-    fieldId: 'ram_filter',
-    column: 4,
-    onChangeValue: function () {
-      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'ambari-bandwidth');
-    }
-  }),
-
-  /**
-   * Filter view for LoadAverage column
-   * Based on <code>filters</code> library
-   */
-  loadAvgFilterView: filters.createTextView({
-    fieldType: 'filter-input-width',
-    fieldId: 'load_avg_filter',
-    column: 5,
-    onChangeValue: function(){
-      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'number');
-    }
-  }),
-
-  /**
-   * Filter view for HostComponents column
-   * Based on <code>filters</code> library
-   */
-  componentsFilterView: filters.createComponentView({
-
-    column: 6,
-
-    /**
-     * 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/host/component_filter'),
-
-      /**
-       * Master components
-       * @returns {Array}
-       */
-      masterComponents: function () {
-        var components = App.MasterComponent.find().rejectProperty('totalCount', 0);
-        components.setEach('checkedForHostFilter', false);
-        return components;
-      }.property('App.router.clusterController.isComponentsStateLoaded'),
-
-      /**
-       * Slave components
-       * @returns {Array}
-       */
-      slaveComponents: function () {
-        var components = App.SlaveComponent.find().rejectProperty('totalCount', 0);
-        components.setEach('checkedForHostFilter', false);
-        return components;
-      }.property('App.router.clusterController.isComponentsStateLoaded'),
-
-      /**
-       * Client components
-       * @returns {Array}
-       */
-      clientComponents: function () {
-        var components = App.ClientComponent.find().rejectProperty('totalCount', 0);
-        components.setEach('checkedForHostFilter', false);
-        return components;
-      }.property('App.router.clusterController.isComponentsStateLoaded'),
-
-      /**
-       * Checkbox for quick selecting/deselecting of master components
-       */
-      masterComponentsChecked:false,
-      toggleMasterComponents:function () {
-        this.get('masterComponents').setEach('checkedForHostFilter', this.get('masterComponentsChecked'));
-      }.observes('masterComponentsChecked'),
-
-      /**
-       * Checkbox for quick selecting/deselecting of slave components
-       */
-      slaveComponentsChecked:false,
-      toggleSlaveComponents:function () {
-        this.get('slaveComponents').setEach('checkedForHostFilter', this.get('slaveComponentsChecked'));
-      }.observes('slaveComponentsChecked'),
-
-      /**
-       * Checkbox for quick selecting/deselecting of client components
-       */
-      clientComponentsChecked: false,
-      toggleClientComponents: function() {
-        this.get('clientComponents').setEach('checkedForHostFilter', this.get('clientComponentsChecked'));
-      }.observes('clientComponentsChecked'),
-
-      /**
-       * Clear filter.
-       * Called by parent view, when user clicks on <code>x</code> button(clear button)
-       */
-      clearFilter:function() {
-        this.set('masterComponentsChecked', false);
-        this.set('slaveComponentsChecked', false);
-        this.set('clientComponentsChecked', false);
-
-        this.get('masterComponents').setEach('checkedForHostFilter', false);
-        this.get('slaveComponents').setEach('checkedForHostFilter', false);
-        this.get('clientComponents').setEach('checkedForHostFilter', false);
-
-        this._super();
-      },
-
-      /**
-       * Onclick handler for <code>Apply filter</code> button
-       */
-      applyFilter:function() {
-        this._super();
-        var self = this;
-        var chosenComponents = [];
-
-        this.get('masterComponents').filterProperty('checkedForHostFilter', true).forEach(function(item){
-          chosenComponents.push(item.get('id'));
-        });
-        this.get('slaveComponents').filterProperty('checkedForHostFilter', true).forEach(function(item){
-          chosenComponents.push(item.get('id'));
-        });
-        this.get('clientComponents').filterProperty('checkedForHostFilter', true).forEach(function(item){
-          chosenComponents.push(item.get('id'));
-        });
-        Em.run.next(function() {
-          self.set('value', chosenComponents);
-        });
-      },
-
-      /**
-       * Verify that checked checkboxes are equal to value stored in hidden field (components ids list)
-       */
-      checkComponents: function() {
-        var components = this.get('value');
-        var self = this;
-        if (components) {
-          components.forEach(function(componentId) {
-            if(!self.tryCheckComponent(self, 'masterComponents', componentId)) {
-              if(!self.tryCheckComponent(self, 'slaveComponents', componentId)) {
-                self.tryCheckComponent(self, 'clientComponents', componentId);
-              }
-            }
-          });
-        }
-      }.observes('value'),
-
-      tryCheckComponent: function(self, category, componentId) {
-        var c = self.get(category).findProperty('id', componentId);
-        if (c) {
-          if (!c.get('checkedForHostFilter')) {
-            c.set('checkedForHostFilter', true);
-            return true;
-          }
-        }
-        return false;
-      }
-
-    }),
-    onChangeValue: function(){
-      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'multiple');
-    }
-  }),
-
-  versionsFilterView: filters.wrapperView.extend({
-    column: 11,
-    filterView: filters.componentFieldView.extend({
-      templateName: require('templates/main/host/version_filter'),
-      selectedVersion: null,
-      selectedStatus: null,
-      value: [],
-
-      versionSelectView: filters.createSelectView({
-        classNames: ['notActive'],
-        fieldType: 'filter-input-width',
-        filterPropertyName: 'repository_versions/RepositoryVersions/display_name',
-        content: function () {
-          return  [
-            {
-              value: '',
-              label: Em.I18n.t('common.all')
-            }
-          ].concat(this.get('controller.allHostStackVersions').filterProperty('isVisible', true).mapProperty('displayName').uniq().map(function (version) {
-            return {
-              value: version,
-              label: version
-            }
-          }));
-        }.property('App.router.clusterController.isLoaded', 'controller.allHostStackVersions.length'),
-        onChangeValue: function () {
-          this.set('parentView.selectedVersion', this.get('value'));
-        }
-      }),
-      statusSelectView: filters.createSelectView({
-        classNames: ['notActive'],
-        fieldType: 'filter-input-width',
-        filterPropertyName: 'HostStackVersions/state',
-        content: function () {
-          return [
-            {
-              value: '',
-              label: Em.I18n.t('common.all')
-            }
-          ].concat(App.HostStackVersion.statusDefinition.map(function (status) {
-            return {
-              value: status,
-              label: App.HostStackVersion.formatStatus(status)
-            }
-          }));
-        }.property('App.router.clusterController.isLoaded'),
-        onChangeValue: function () {
-          this.set('parentView.selectedStatus', this.get('value'));
-        }
-      }),
-      /**
-       * Onclick handler for <code>Apply filter</code> button
-       */
-      applyFilter: function () {
-        this._super();
-        var self = this;
-        var filterProperties = [];
-        if (this.get('selectedVersion')) {
-          filterProperties.push({
-            property: 'repository_versions/RepositoryVersions/display_name',
-            value: this.get('selectedVersion')
-          });
-        }
-        if (this.get('selectedStatus')) {
-          filterProperties.push({
-            property: 'HostStackVersions/state',
-            value: this.get('selectedStatus')
-          });
-        }
-        self.set('value', filterProperties);
-      },
-      /**
-       * Clear filter to initial state
-       */
-      clearFilter: function () {
-        this.set('value', []);
-        this.get('childViews').forEach(function (view) {
-          if (typeof view.clearFilter === "function") view.clearFilter();
-        });
-      }
-    }),
-    setValue: function (value) {
-      var versionSelectView = this.get('childViews')[0];
-
-      //restore selected options in Select views
-      versionSelectView.get('childViews').forEach(function (view) {
-        var filter = value.findProperty('property', view.get('filterPropertyName'));
-        if (filter && view.get('content').findProperty('value', filter.value)) {
-          view.set('selected', view.get('content').findProperty('value', filter.value));
-        }
-      }, this);
-      this._super(value);
-    },
-    onChangeValue: function () {
-      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'sub-resource');
-    },
-    clearFilter: function () {
-      this._super();
-      this.get('childViews').forEach(function (view) {
-        if (typeof view.clearFilter === "function") view.clearFilter();
-      });
-    }
-  }),
-
   /**
    * associations between host property and column index
    * @type {Array}
@@ -975,12 +655,6 @@ App.MainHostView = App.TableView.extend(App.TableServerViewMixin, {
     // clean filters stored in-memory and local storage
     this.set('filterConditions', []);
     this.clearFilterConditionsFromLocalStorage();
-    // clean UI
-    this.get('_childViews').forEach(function(childView) {
-      if (childView['clearFilter']) {
-        childView.clearFilter();
-      }
-    });
     // force refresh
     this.refresh();
   }

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

@@ -22,6 +22,14 @@ App.MainHostComboSearchBoxView = Em.View.extend({
   templateName: require('templates/main/host/combo_search_box'),
   didInsertElement: function () {
     this.initVS();
+    this.restoreComboFilterQuery();
+  },
+
+  restoreComboFilterQuery: function() {
+    var query = App.db.getComboSearchQuery(this.get('parentView.parentView.controller.name'));
+    if (query) {
+      visualSearch.searchBox.setQuery(query);
+    }
   },
 
   initVS: function() {
@@ -38,6 +46,7 @@ App.MainHostComboSearchBoxView = Em.View.extend({
       callbacks: {
         search: function (query, searchCollection) {
           var tableView = self.get('parentView').get('parentView');
+          App.db.setComboSearchQuery(tableView.get('controller.name'), query);
           tableView.updateComboFilter(searchCollection);
         },