Store search state in URL

client/app/scripts/actions/app-actions.js

@@ -70,17 +70,13 @@ export function pinNextMetric(delta) {
   };
 }
 
-export function pinSearch(query) {
-  return {
-    type: ActionTypes.PIN_SEARCH,
-    query
-  };
-}
-
 export function unpinSearch(query) {
-  return {
-    type: ActionTypes.UNPIN_SEARCH,
-    query
+  return (dispatch, getState) => {
+    dispatch({
+      type: ActionTypes.UNPIN_SEARCH,
+      query
+    });
+    updateRoute(getState);
   };
 }
 
@@ -285,9 +281,12 @@ export function doControl(nodeId, control) {
 }
 
 export function doSearch(searchQuery) {
-  return {
-    type: ActionTypes.DO_SEARCH,
-    searchQuery
+  return (dispatch, getState) => {
+    dispatch({
+      type: ActionTypes.DO_SEARCH,
+      searchQuery
+    });
+    updateRoute(getState);
   };
 }
 
@@ -327,6 +326,7 @@ export function hitEnter() {
           type: ActionTypes.PIN_SEARCH,
           query
         });
+        updateRoute(getState);
       }
     }
   };

client/app/scripts/components/search.js

@@ -74,15 +74,16 @@ class Search extends React.Component {
 
   render() {
     const { inputId = 'search', nodes, pinnedSearches, searchFocused,
-      searchNodeMatches, topologiesLoaded } = this.props;
+      searchNodeMatches, searchQuery, topologiesLoaded } = this.props;
     const disabled = this.props.isTopologyEmpty || !topologiesLoaded;
     const matchCount = searchNodeMatches
       .reduce((count, topologyMatches) => count + topologyMatches.size, 0);
     const showPinnedSearches = pinnedSearches.size > 0;
+    const value = this.state.value || searchQuery || '';
     const classNames = cx('search', {
       'search-pinned': showPinnedSearches,
       'search-matched': matchCount,
-      'search-filled': this.state.value,
+      'search-filled': value,
       'search-focused': searchFocused,
       'search-disabled': disabled
     });
@@ -101,7 +102,7 @@ class Search extends React.Component {
                 .map(query => <SearchItem query={query} key={query} />)}
             </span>}
             <input className="search-input-field" type="text" id={inputId}
-              value={this.state.value} onChange={this.handleChange}
+              value={value} onChange={this.handleChange}
               onBlur={this.handleBlur} onFocus={this.handleFocus}
               disabled={disabled} />
           </div>

client/app/scripts/reducers/root.js

@@ -401,6 +401,7 @@ export function rootReducer(state = initialState, action) {
 
     case ActionTypes.PIN_SEARCH: {
       state = state.set('searchQuery', '');
+      state = updateNodeMatches(state);
       const pinnedSearches = state.get('pinnedSearches');
       state = state.setIn(['pinnedSearches', pinnedSearches.size], action.query);
       return applyPinnedSearches(state);
@@ -557,6 +558,8 @@ export function rootReducer(state = initialState, action) {
 
     case ActionTypes.ROUTE_TOPOLOGY: {
       state = state.set('routeSet', true);
+      state = state.set('pinnedSearches', makeList(action.state.pinnedSearches));
+      state = state.set('searchQuery', action.state.searchQuery || '');
       if (state.get('currentTopologyId') !== action.state.topologyId) {
         state = state.update('nodes', nodes => nodes.clear());
       }

client/app/scripts/utils/router-utils.js

@@ -35,8 +35,10 @@ export function getUrlState(state) {
   return {
     controlPipe: cp ? cp.toJS() : null,
     nodeDetails: nodeDetails.toJS(),
-    selectedNodeId: state.get('selectedNodeId'),
     pinnedMetricType: state.get('pinnedMetricType'),
+    pinnedSearches: state.get('pinnedSearches').toJS(),
+    searchQuery: state.get('searchQuery'),
+    selectedNodeId: state.get('selectedNodeId'),
     topologyId: state.get('currentTopologyId'),
     topologyOptions: state.get('topologyOptions').toJS() // all options
   };