Merge pull request #2080 from weaveworks/1872-clear-ui-state

Add control to reset local view state

client/.eslintrc

@@ -6,6 +6,7 @@
     "node": true
   },
   "rules": {
+    "no-debugger" : 1,
     "comma-dangle": 0,
     "global-require": 0,
     "import/no-extraneous-dependencies": [

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

@@ -11,6 +11,7 @@ import { doControlRequest, getAllNodes, getNodesDelta, getNodeDetails,
   getTopologies, deletePipe } from '../utils/web-api-utils';
 import { getActiveTopologyOptions,
   getCurrentTopologyUrl } from '../utils/topology-utils';
+import { storageSet } from '../utils/storage-utils';
 
 const log = debug('scope:app-actions');
 
@@ -665,3 +666,18 @@ export function route(urlState) {
     );
   };
 }
+
+export function resetLocalViewState() {
+  return (dispatch) => {
+    dispatch({type: ActionTypes.RESET_LOCAL_VIEW_STATE});
+    storageSet('scopeViewState', '');
+    window.location.href = window.location.href.split('#')[0];
+  };
+}
+
+export function toggleTroubleshootingMenu(ev) {
+  if (ev) { ev.preventDefault(); ev.stopPropagation(); }
+  return {
+    type: ActionTypes.TOGGLE_TROUBLESHOOTING_MENU
+  };
+}

client/app/scripts/components/app.js

@@ -6,6 +6,7 @@ import Logo from './logo';
 import Footer from './footer';
 import Sidebar from './sidebar';
 import HelpPanel from './help-panel';
+import TroubleshootingMenu from './troubleshooting-menu';
 import Search from './search';
 import Status from './status';
 import Topologies from './topologies';
@@ -99,7 +100,7 @@ class App extends React.Component {
 
   render() {
     const { gridMode, showingDetails, showingHelp, showingMetricsSelector,
-      showingNetworkSelector } = this.props;
+      showingNetworkSelector, showingTroubleshootingMenu } = this.props;
     const isIframe = window !== window.top;
 
     return (
@@ -108,6 +109,8 @@ class App extends React.Component {
 
         {showingHelp && <HelpPanel />}
 
+        {showingTroubleshootingMenu && <TroubleshootingMenu />}
+
         {showingDetails && <Details />}
 
         <div className="header">
@@ -146,6 +149,7 @@ function mapStateToProps(state) {
     searchQuery: state.get('searchQuery'),
     showingDetails: state.get('nodeDetails').size > 0,
     showingHelp: state.get('showingHelp'),
+    showingTroubleshootingMenu: state.get('showingTroubleshootingMenu'),
     showingMetricsSelector: state.get('availableCanvasMetrics').count() > 0,
     showingNetworkSelector: state.get('availableNetworks').count() > 0,
     showingTerminal: state.get('controlPipes').size > 0,

client/app/scripts/components/footer.js

@@ -6,7 +6,7 @@ import Plugins from './plugins';
 import { getUpdateBufferSize } from '../utils/update-buffer-utils';
 import { contrastModeUrl, isContrastMode } from '../utils/contrast-utils';
 import { clickDownloadGraph, clickForceRelayout, clickPauseUpdate,
-  clickResumeUpdate, toggleHelp } from '../actions/app-actions';
+  clickResumeUpdate, toggleHelp, toggleTroubleshootingMenu } from '../actions/app-actions';
 import { basePathSlash } from '../utils/web-api-utils';
 
 class Footer extends React.Component {
@@ -76,21 +76,14 @@ class Footer extends React.Component {
             title={forceRelayoutTitle}>
             <span className="fa fa-refresh" />
           </a>
-          <a
-            className="footer-icon" onClick={this.props.clickDownloadGraph}
-            title="Save canvas as SVG (does not include search highlighting)">
-            <span className="fa fa-download" />
-          </a>
-          <a className="footer-icon" href="api/report" download title="Save raw data as JSON">
-            <span className="fa fa-code" />
-          </a>
           <a className="footer-icon" href={otherContrastModeUrl} title={otherContrastModeTitle}>
             <span className="fa fa-adjust" />
           </a>
           <a
-            className="footer-icon" title="Report an issue"
-            href="https://gitreports.com/issue/weaveworks/scope"
-            target="_blank" rel="noopener noreferrer">
+            onClick={this.props.toggleTroubleshootingMenu}
+            className="footer-icon" title="Open troubleshooting menu"
+            href=""
+          >
             <span className="fa fa-bug" />
           </a>
           <a className="footer-icon" onClick={this.props.toggleHelp} title="Show help">
@@ -119,6 +112,7 @@ export default connect(
     clickForceRelayout,
     clickPauseUpdate,
     clickResumeUpdate,
-    toggleHelp
+    toggleHelp,
+    toggleTroubleshootingMenu
   }
 )(Footer);

client/app/scripts/components/help-panel.js

@@ -162,7 +162,11 @@ function HelpPanel({currentTopologyName, searchableFields, onClickClose}) {
           {renderFieldsPanel(currentTopologyName, searchableFields)}
         </div>
         <div className="help-panel-tools">
-          <span title="Close details" className="fa fa-close" onClick={onClickClose} />
+          <span
+            title="Close details"
+            className="fa fa-close"
+            onClick={onClickClose}
+          />
         </div>
       </div>
     </div>
@@ -178,4 +182,6 @@ function mapStateToProps(state) {
 }
 
 
-export default connect(mapStateToProps, { onClickClose: hideHelp })(HelpPanel);
+export default connect(mapStateToProps, {
+  onClickClose: hideHelp
+})(HelpPanel);

client/app/scripts/components/troubleshooting-menu.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import {
+  toggleTroubleshootingMenu,
+  resetLocalViewState,
+  clickDownloadGraph
+} from '../actions/app-actions';
+
+class DebugMenu extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.handleClickReset = this.handleClickReset.bind(this);
+  }
+
+  handleClickReset(ev) {
+    ev.preventDefault();
+    this.props.resetLocalViewState();
+  }
+
+  render() {
+    return (
+      <div className="troubleshooting-menu-wrapper">
+        <div className="troubleshooting-menu">
+          <div className="troubleshooting-menu-content">
+            <h3>Debugging/Troubleshooting</h3>
+            <div className="troubleshooting-menu-item">
+              <a
+                className="footer-icon"
+                href="api/report"
+                download
+                title="Save raw data as JSON"
+              >
+                <span className="fa fa-code" />
+                <span className="description">
+                  Save raw data as JSON
+                </span>
+              </a>
+            </div>
+            <div className="troubleshooting-menu-item">
+              <a
+                href=""
+                className="footer-icon"
+                onClick={this.props.clickDownloadGraph}
+                title="Save canvas as SVG (does not include search highlighting)"
+              >
+                <span className="fa fa-download" />
+                <span className="description">
+                  Save canvas as SVG (does not include search highlighting)
+                </span>
+              </a>
+            </div>
+            <div className="troubleshooting-menu-item">
+              <a
+                href=""
+                className="footer-icon"
+                title="Reset view state"
+                onClick={this.handleClickReset}
+              >
+                <span className="fa fa-undo" />
+                <span className="description">Reset your local view state and reload the page</span>
+              </a>
+            </div>
+            <div className="troubleshooting-menu-item">
+              <a
+                className="footer-icon" title="Report an issue"
+                href="https://gitreports.com/issue/weaveworks/scope"
+                target="_blank" rel="noopener noreferrer"
+              >
+                <span className="fa fa-bug" />
+                <span className="description">Report a bug</span>
+              </a>
+            </div>
+            <div className="help-panel-tools">
+              <span
+                title="Close menu"
+                className="fa fa-close"
+                onClick={this.props.toggleTroubleshootingMenu}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default connect(null, {
+  toggleTroubleshootingMenu,
+  resetLocalViewState,
+  clickDownloadGraph
+})(DebugMenu);

client/app/scripts/constants/action-types.js

@@ -45,12 +45,13 @@ const ACTION_TYPES = [
   'RECEIVE_TOPOLOGIES',
   'RECEIVE_API_DETAILS',
   'RECEIVE_ERROR',
+  'RESET_LOCAL_VIEW_STATE',
   'ROUTE_TOPOLOGY',
   'SELECT_METRIC',
   'SHOW_HELP',
   'SET_EXPORTING_GRAPH',
-
   'SELECT_NETWORK',
+  'TOGGLE_TROUBLESHOOTING_MENU',
   'PIN_NETWORK',
   'UNPIN_NETWORK',
   'SHOW_NETWORKS',

client/app/scripts/reducers/root.js

@@ -58,6 +58,7 @@ export const initialState = makeMap({
   selectedNetwork: null,
   selectedNodeId: null,
   showingHelp: false,
+  showingTroubleshootingMenu: false,
   showingNetworks: false,
   topologies: makeList(),
   topologiesLoaded: false,
@@ -190,6 +191,10 @@ export function rootReducer(state = initialState, action) {
       if (state.get('showingHelp')) {
         state = state.set('showingHelp', false);
       }
+
+      if (state.get('showingTroubleshootingMenu')) {
+        state = state.set('showingTroubleshootingMenu', false);
+      }
       return closeAllNodeDetails(state);
     }
 
@@ -705,6 +710,10 @@ export function rootReducer(state = initialState, action) {
       return action.fn(state);
     }
 
+    case ActionTypes.TOGGLE_TROUBLESHOOTING_MENU: {
+      return state.set('showingTroubleshootingMenu', !state.get('showingTroubleshootingMenu'));
+    }
+
     default: {
       return state;
     }

client/app/styles/main.less

@@ -624,11 +624,13 @@ h2 {
     position: relative;
   }
 
+
   &-tools {
     position: absolute;
     top: 6px;
     right: 8px;
 
+
     > span {
       .btn-opacity;
       padding: 4px 5px;
@@ -1586,12 +1588,12 @@ h2 {
         border-color: rgba(131, 131, 172, 0.6);
       }
     }
+
   }
 
-
   &-main {
-    padding: 12px 36px 36px 36px;
     display: flex;
+    padding: 12px 36px 36px 36px;
     flex-direction: row;
     align-items: stretch;
 
@@ -1834,3 +1836,39 @@ h2 {
     }
   }
 }
+
+.troubleshooting-menu {
+  display: flex;
+  position: relative;
+
+  &-wrapper {
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    position: absolute;
+  }
+
+  &-content {
+    position: relative;
+    background-color: @white;
+    padding: 20px;
+    .shadow-2;
+    z-index: 2048;
+  }
+
+  &-item {
+    height: 40px;
+  }
+
+  .fa {
+    width: 20px;
+    text-align: center;
+    margin-right: 10px;
+  }
+
+  .fa-close {
+    width: 25px;
+  }
+}