Saved search improvements

graylog2-web-interface/src/components/search/SavedSearchControls.jsx

@@ -12,7 +12,7 @@ const SavedSearchesActions = ActionsProvider.getActions('SavedSearches');
 
 const SavedSearchControls = React.createClass({
   propTypes: {
-    currentSavedSearch: React.PropTypes.string,
+    currentSavedSearch: React.PropTypes.string, // saved search ID
     pullRight: React.PropTypes.bool,
   },
   mixins: [Reflux.listenTo(SavedSearchesStore, '_updateTitle')],
@@ -25,17 +25,25 @@ const SavedSearchControls = React.createClass({
   componentDidMount() {
     this._updateTitle();
   },
+  componentDidUpdate(prevProps) {
+    if (prevProps.currentSavedSearch !== this.props.currentSavedSearch) {
+      this._updateTitle();
+    }
+  },
   _isSearchSaved() {
     return this.props.currentSavedSearch !== undefined;
   },
   _updateTitle() {
     if (!this._isSearchSaved()) {
+      if (this.state.title !== '') {
+        this.setState({ title: '', error: false });
+      }
       return;
     }
 
     const currentSavedSearch = SavedSearchesStore.getSavedSearch(this.props.currentSavedSearch);
     if (currentSavedSearch !== undefined) {
-      this.setState({ title: currentSavedSearch.title });
+      this.setState({ title: currentSavedSearch.title, error: false });
     }
   },
   _openModal() {
@@ -60,7 +68,7 @@ const SavedSearchControls = React.createClass({
   _deleteSavedSearch(event) {
     event.preventDefault();
     if (window.confirm('Do you really want to delete this saved search?')) {
-      SavedSearchesActions.delete.triggerPromise(this.props.currentSavedSearch);
+      SavedSearchesActions.delete(this.props.currentSavedSearch);
     }
   },
   _titleChanged() {

graylog2-web-interface/src/components/search/SearchResult.jsx

@@ -41,14 +41,18 @@ const SearchResult = React.createClass({
   },
 
   getInitialState() {
-    const initialFields = SearchStore.fields;
     return {
-      selectedFields: this.sortFields(initialFields),
+      selectedFields: this.sortFields(SearchStore.fields),
       showAllFields: false,
       shouldHighlight: true,
+      savedSearch: SearchStore.savedSearch,
     };
   },
 
+  componentDidUpdate() {
+    this._resetSelectedFields();
+  },
+
   onFieldToggled(fieldName) {
     const currentFields = this.state.selectedFields;
     let newFieldSet;
@@ -60,6 +64,16 @@ const SearchResult = React.createClass({
     this.updateSelectedFields(newFieldSet);
   },
 
+  // Reset selected fields if saved search changed
+  _resetSelectedFields() {
+    if (this.state.savedSearch !== SearchStore.savedSearch) {
+      this.setState({
+        savedSearch: SearchStore.savedSearch,
+        selectedFields: this.sortFields(SearchStore.fields),
+      });
+    }
+  },
+
   togglePageFields() {
     this.setState({ showAllFields: !this.state.showAllFields });
   },

graylog2-web-interface/src/pages/SearchPage.jsx

@@ -33,7 +33,6 @@ const SearchPage = React.createClass({
   ],
   getInitialState() {
     return {
-      selectedFields: ['message', 'source'],
       error: undefined,
       updatingSearch: false,
       updatingHistogram: false,
@@ -174,25 +173,6 @@ const SearchPage = React.createClass({
 
     return 'year';
   },
-  sortFields(fieldSet) {
-    let newFieldSet = fieldSet;
-    let sortedFields = Immutable.OrderedSet();
-
-    if (newFieldSet.contains('source')) {
-      sortedFields = sortedFields.add('source');
-    }
-    newFieldSet = newFieldSet.delete('source');
-    const remainingFieldsSorted = newFieldSet.sort((field1, field2) => field1.toLowerCase().localeCompare(field2.toLowerCase()));
-    return sortedFields.concat(remainingFieldsSorted);
-  },
-
-  _onToggled(fieldName) {
-    if (this.state.selectedFields.indexOf(fieldName) > 0) {
-      this.setState({ selectedFields: this.state.selectedFields.filter((field) => field !== fieldName) });
-    } else {
-      this.setState({ selectedFields: this.state.selectedFields.concat(fieldName) });
-    }
-  },
 
   _isLoading() {
     return !this.state.searchResult || !this.state.inputs || !this.state.streams || !this.state.nodes || !this.state.fields || !this.state.histogram;

graylog2-web-interface/src/stores/search/SavedSearchesStore.js

@@ -144,18 +144,20 @@ const SavedSearchesStore = Reflux.createStore({
   },
 
   delete(searchId) {
+    const savedSearch = this.savedSearches.find(s => s.id === searchId);
+    const title = savedSearch ? `"${savedSearch.title}"` : searchId;
     const url = ApiRoutes.SavedSearchesApiController.delete(searchId).url;
     const promise = fetch('DELETE', URLUtils.qualifyUrl(url));
     promise
       .then(
         response => {
-          UserNotification.success(`Saved search "${this.savedSearches[searchId]}" was deleted successfully.`);
+          UserNotification.success(`Saved search ${title} was deleted successfully.`);
           SearchStore.savedSearchDeleted(searchId);
           SavedSearchesActions.list.triggerPromise();
           return response;
         },
         error => {
-          UserNotification.error(`Deleting saved search "${this.savedSearches[searchId]}" failed with status: ${error}`,
+          UserNotification.error(`Deleting saved search ${title} failed with status: ${error}`,
             'Could not delete saved search');
         });