Added debugging/troubleshooting menu; Moved troubleshooting icons

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,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);