opensource/graylog2-server
1
0
Fork 0
mirror of https://github.com/Graylog2/graylog2-server.git synced 2026-03-13 09:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refresh search information when page change

Browse Source 
When user navigates using the navigation menu, we need to refresh the
information stored on `SearchStore`, and reset the state of the `SearchBar`
component.
This commit is contained in:
Edmundo Alvarez
2015-12-08 16:34:15 +01:00
parent 03689c2944
commit af895a0e86
3 changed files with 58 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
graylog2-web-interface/src/components/search/SearchBar.jsx
View File

@@ -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());

32
graylog2-web-interface/src/routing/AppWithSearchBar.jsx
View File

@@ -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 (
<div className="container-fluid">
<SearchBar userPreferences={this.state.currentUser.preferences} savedSearches={this.state.savedSearches}/>
<SearchBar ref="searchBar" userPreferences={this.state.currentUser.preferences} savedSearches={this.state.savedSearches}/>
<Row id="main-row">
<Col md={12} id="main-content">
{this.props.children}

45
graylog2-web-interface/src/stores/search/SearchStore.ts
View File

@@ -33,17 +33,7 @@ class SearchStore {
searchInStream: any;
constructor() {
var parsedSearch = Immutable.Map<string, any>(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<string, any>(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<string, any>(URLUtils.getParsedSearch(window.location));
var parsedHash = Immutable.Map<string, any>(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'));