diff --git a/graylog2-web-interface/src/components/search/SearchBar.jsx b/graylog2-web-interface/src/components/search/SearchBar.jsx index 7b11412813..d019f663ca 100644 --- a/graylog2-web-interface/src/components/search/SearchBar.jsx +++ b/graylog2-web-interface/src/components/search/SearchBar.jsx @@ -47,6 +47,9 @@ const SearchBar = React.createClass({ componentWillUnmount() { this._removeSearchQueryInput(); }, + reload() { + this.setState(this.getInitialState()); + }, _initializeSearchQueryInput() { if (this.props.userPreferences.enableSmartSearch) { const queryInput = new QueryInput(this.refs.query.getInputDOMNode()); diff --git a/graylog2-web-interface/src/routing/AppWithSearchBar.jsx b/graylog2-web-interface/src/routing/AppWithSearchBar.jsx index 98c9ae0b04..f1422a68ca 100644 --- a/graylog2-web-interface/src/routing/AppWithSearchBar.jsx +++ b/graylog2-web-interface/src/routing/AppWithSearchBar.jsx @@ -14,10 +14,7 @@ import SavedSearchesActions from 'actions/search/SavedSearchesActions'; const AppWithSearchBar = React.createClass({ propTypes: { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.element), - PropTypes.element, - ]).isRequired, + children: PropTypes.element.isRequired, params: PropTypes.object, }, mixins: [Reflux.connect(CurrentUserStore), Reflux.connect(SavedSearchesStore)], @@ -29,8 +26,26 @@ const AppWithSearchBar = React.createClass({ }, componentDidMount() { SavedSearchesActions.list.triggerPromise(); - if (this.props.params.streamId) { - StreamsStore.get(this.props.params.streamId, (stream) => this.setState({stream: stream})); + this._loadStream(this.props.params.streamId); + }, + componentWillReceiveProps(nextProps) { + this._loadStream(nextProps.params.streamId); + }, + componentWillUnmount() { + SearchStore.unload(); + }, + _loadStream(streamId) { + if (streamId) { + StreamsStore.get(streamId, (stream) => this.setState({stream: stream}, this._updateSearchParams)); + } else { + this.setState({stream: undefined}, this._updateSearchParams); + } + }, + _updateSearchParams() { + SearchStore.searchInStream = this.state.stream; + SearchStore.load(); + if (this.refs.searchBar) { + this.refs.searchBar.reload(); } }, _isLoading() { @@ -45,13 +60,10 @@ const AppWithSearchBar = React.createClass({ // TODO: Check if the search is in a stream // TODO: Take care of saved searches SearchStore.initializeFieldsFromHash(); - if (this.state.stream) { - SearchStore.searchInStream = this.state.stream; - } return (
- + {this.props.children} diff --git a/graylog2-web-interface/src/stores/search/SearchStore.ts b/graylog2-web-interface/src/stores/search/SearchStore.ts index 3c055e889b..5c49f8944c 100644 --- a/graylog2-web-interface/src/stores/search/SearchStore.ts +++ b/graylog2-web-interface/src/stores/search/SearchStore.ts @@ -33,17 +33,7 @@ class SearchStore { searchInStream: any; constructor() { - var parsedSearch = Immutable.Map(URLUtils.getParsedSearch(window.location)); - this.originalSearch = SearchStore._initializeOriginalSearch(parsedSearch); - this.query = this.originalSearch.get('query'); - this.rangeType = this.originalSearch.get('rangeType'); - this.rangeParams = this.originalSearch.get('rangeParams'); - this.page = this.originalSearch.get('page'); - this.resolution = this.originalSearch.get('resolution'); - this.savedSearch = this.originalSearch.get('saved'); - this.sortField = this.originalSearch.get('sortField'); - this.sortOrder = this.originalSearch.get('sortOrder'); - this.width = window.innerWidth; + this.load(true); window.addEventListener('resize', () => this.width = window.innerWidth); $(document).on('add-search-term.graylog.search', this._addSearchTerm.bind(this)); @@ -53,6 +43,37 @@ class SearchStore { $(document).on('deleted.graylog.saved-search', this._savedSearchDeleted.bind(this)); } + load(firstLoad) { + var parsedSearch = Immutable.Map(URLUtils.getParsedSearch(window.location)); + this.originalSearch = SearchStore._initializeOriginalSearch(parsedSearch); + if (firstLoad) { + this.query = this.originalSearch.get('query'); + this.rangeType = this.originalSearch.get('rangeType'); + this.rangeParams = this.originalSearch.get('rangeParams'); + this.page = this.originalSearch.get('page'); + this.resolution = this.originalSearch.get('resolution'); + } else { + this._query = this.originalSearch.get('query'); + this._rangeType = this.originalSearch.get('rangeType'); + this._rangeParams = this.originalSearch.get('rangeParams'); + this._page = this.originalSearch.get('page'); + this._resolution = this.originalSearch.get('resolution'); + } + this.savedSearch = this.originalSearch.get('saved'); + this.sortField = this.originalSearch.get('sortField'); + this.sortOrder = this.originalSearch.get('sortOrder'); + this.width = window.innerWidth; + } + + unload() { + window.removeEventListener('resize', () => this.width = window.innerWidth); + $(document).off('add-search-term.graylog.search', this._addSearchTerm.bind(this)); + $(document).off('get-original-search.graylog.search', this._getOriginalSearchRequest.bind(this)); + $(document).off('change-timerange.graylog.search', this._changeTimeRange.bind(this)); + $(document).off('execute.graylog.search', this._submitSearch.bind(this)); + $(document).off('deleted.graylog.saved-search', this._savedSearchDeleted.bind(this)); + } + initializeFieldsFromHash() { var parsedSearch = Immutable.Map(URLUtils.getParsedSearch(window.location)); var parsedHash = Immutable.Map(URLUtils.getParsedHash(window.location)); @@ -293,7 +314,7 @@ class SearchStore { originalURLParams = originalURLParams.set('q', this.originalSearch.get('query')); originalURLParams = originalURLParams.set('interval', this.originalSearch.get('resolution')); originalURLParams = originalURLParams.set('page', this.originalSearch.get('page')); - originalURLParams = originalURLParams.set('fields', this.fields.join(',')); + originalURLParams = originalURLParams.set('fields', this.fields ? this.fields.join(',') : ''); originalURLParams = originalURLParams.set('sortField', this.originalSearch.get('sortField')); originalURLParams = originalURLParams.set('sortOrder', this.originalSearch.get('sortOrder'));