Correct url-state handling.

Testing out colored borders rather than BGs for net-view legend

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

@@ -38,9 +38,13 @@ export function toggleHelp() {
 
 
 export function showNetworks(visible) {
-  return {
-    type: ActionTypes.SHOW_NETWORKS,
-    visible
+  return (dispatch, getState) => {
+    dispatch({
+      type: ActionTypes.SHOW_NETWORKS,
+      visible
+    });
+
+    updateRoute(getState);
   };
 }
 

client/app/scripts/components/network-selector-item.js

@@ -35,11 +35,11 @@ class NetworkSelectorItem extends React.Component {
     const id = network.get('id');
     const isPinned = (id === pinnedNetwork);
     const isSelected = (id === selectedNetwork);
-    const className = classNames('metric-selector-action', {
-      'metric-selector-action-selected': isSelected
+    const className = classNames('network-selector-action', {
+      'network-selector-action-selected': isSelected
     });
     const style = {
-      backgroundColor: getNodeColor(id)
+      borderBottomColor: getNodeColor(id)
     };
 
     return (

client/app/scripts/components/networks-selector.js

@@ -28,14 +28,18 @@ class NetworkSelector extends React.Component {
       <NetworkSelectorItem key={network.get('id')} network={network} />
     ));
 
-    const className = classNames('metric-selector-action', {
-      'metric-selector-action-selected': showingNetworks
+    const className = classNames('network-selector-action', {
+      'network-selector-action-selected': showingNetworks
     });
 
+    const style = {
+      borderBottomColor: 'transparent'
+    };
+
     return (
-      <div className="metric-selector">
-        <div className="metric-selector-wrapper" onMouseLeave={this.onMouseOut}>
-          <div className={className} onClick={this.onClick}>
+      <div className="network-selector">
+        <div className="network-selector-wrapper" onMouseLeave={this.onMouseOut}>
+          <div className={className} onClick={this.onClick} style={style}>
             Networks
           </div>
           {showingNetworks && items}

client/app/scripts/reducers/root.js

@@ -274,6 +274,10 @@ export function rootReducer(state = initialState, action) {
     //
 
     case ActionTypes.SHOW_NETWORKS: {
+      if (!action.visible) {
+        state = state.set('selectedNetwork', null);
+        state = state.set('pinnedNetwork', null);
+      }
       return state.set('showingNetworks', action.visible);
     }
 
@@ -606,6 +610,12 @@ export function rootReducer(state = initialState, action) {
         selectedNodeId: action.state.selectedNodeId,
         pinnedMetricType: action.state.pinnedMetricType
       });
+      if (action.state.showingNetworks) {
+        state = state.set('showingNetworks', action.state.showingNetworks);
+      }
+      if (action.state.pinnedNetwork) {
+        state = state.set('pinnedNetwork', action.state.pinnedNetwork);
+      }
       if (action.state.controlPipe) {
         state = state.set('controlPipes', makeOrderedMap({
           [action.state.controlPipe.id]:

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

@@ -37,7 +37,7 @@ export function getUrlState(state) {
     id: details.id, label: details.label, topologyId: details.topologyId
   }));
 
-  return {
+  const urlState = {
     controlPipe: cp ? cp.toJS() : null,
     nodeDetails: nodeDetails.toJS(),
     pinnedMetricType: state.get('pinnedMetricType'),
@@ -47,6 +47,15 @@ export function getUrlState(state) {
     topologyId: state.get('currentTopologyId'),
     topologyOptions: state.get('topologyOptions').toJS() // all options
   };
+
+  if (state.get('showingNetworks')) {
+    urlState.showingNetworks = true;
+    if (state.get('pinnedNetwork')) {
+      urlState.pinnedNetwork = state.get('pinnedNetwork');
+    }
+  }
+
+  return urlState;
 }
 
 export function updateRoute(getState) {

client/app/styles/main.less

@@ -1121,7 +1121,7 @@ h2 {
   }
 }
 
-.topology-option, .metric-selector {
+.topology-option, .metric-selector, .network-selector {
   color: @text-secondary-color;
   margin: 6px 0;
 
@@ -1172,6 +1172,11 @@ h2 {
   }
 }
 
+.network-selector-action {
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid @background-dark-color;
+}
+
 .warning {
   display: inline-block;
   cursor: pointer;