Added debugging/troubleshooting menu; Moved troubleshooting icons

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

@@ -671,5 +671,13 @@ 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

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 
 import { searchableFieldsSelector } from '../selectors/chartSelectors';
 import { CANVAS_MARGINS } from '../constants/styles';
-import { hideHelp, resetLocalViewState } from '../actions/app-actions';
+import { hideHelp } from '../actions/app-actions';
 
 
 const GENERAL_SHORTCUTS = [
@@ -149,7 +149,7 @@ function renderFieldsPanel(currentTopologyName, searchableFields) {
 }
 
 
-function HelpPanel({currentTopologyName, searchableFields, onClickClose, onClickReset}) {
+function HelpPanel({currentTopologyName, searchableFields, onClickClose}) {
   return (
     <div className="help-panel-wrapper">
       <div className="help-panel" style={{marginTop: CANVAS_MARGINS.top}}>
@@ -161,13 +161,6 @@ function HelpPanel({currentTopologyName, searchableFields, onClickClose, onClick
           {renderSearchPanel()}
           {renderFieldsPanel(currentTopologyName, searchableFields)}
         </div>
-        <div className="help-panel-controls">
-          <span
-            title="Reset view state"
-            className="fa fa-trash-o"
-            onClick={onClickReset}
-          />
-        </div>
         <div className="help-panel-tools">
           <span
             title="Close details"
@@ -190,6 +183,5 @@ function mapStateToProps(state) {
 
 
 export default connect(mapStateToProps, {
-  onClickClose: hideHelp,
-  onClickReset: resetLocalViewState
+  onClickClose: hideHelp
 })(HelpPanel);

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

@@ -0,0 +1,95 @@
+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
+                onClick={e => e.stopPropagation()}
+                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
+                onClick={e => e.stopPropagation()}
+                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

@@ -50,8 +50,8 @@ const ACTION_TYPES = [
   '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

@@ -1591,29 +1591,9 @@ h2 {
 
   }
 
-  &-controls {
-    border: 1px solid #fff;
-    border-radius: 10%;
-    position: absolute;
-    left: 100px;
-    top: 95%;
-    font-size: 20px;
-    width: 30px;
-    height: 30px;
-    transition: all 0.2s ease-in-out;
-    line-height: 30px;
-    text-align: center;
-
-    &:hover {
-      cursor: pointer;
-      border: 1px solid #d0d0d0;
-    }
-  }
-
-
   &-main {
-    padding: 12px 36px 36px 36px;
     display: flex;
+    padding: 12px 36px 36px 36px;
     flex-direction: row;
     align-items: stretch;
 
@@ -1856,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;
+  }
+}