diff --git a/client/.eslintrc b/client/.eslintrc index d7e58c470..456aca91d 100644 --- a/client/.eslintrc +++ b/client/.eslintrc @@ -6,6 +6,7 @@ "node": true }, "rules": { + "no-debugger" : 1, "comma-dangle": 0, "global-require": 0, "import/no-extraneous-dependencies": [ diff --git a/client/app/scripts/actions/app-actions.js b/client/app/scripts/actions/app-actions.js index 4f46dc071..9f9f5f35e 100644 --- a/client/app/scripts/actions/app-actions.js +++ b/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 }; } diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js index 696508212..3361c7285 100644 --- a/client/app/scripts/components/app.js +++ b/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 && } + {showingTroubleshootingMenu && } + {showingDetails &&
}
@@ -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, diff --git a/client/app/scripts/components/footer.js b/client/app/scripts/components/footer.js index b1a178704..3633ece00 100644 --- a/client/app/scripts/components/footer.js +++ b/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}> - - - - - - + onClick={this.props.toggleTroubleshootingMenu} + className="footer-icon" title="Open troubleshooting menu" + href="" + > @@ -119,6 +112,7 @@ export default connect( clickForceRelayout, clickPauseUpdate, clickResumeUpdate, - toggleHelp + toggleHelp, + toggleTroubleshootingMenu } )(Footer); diff --git a/client/app/scripts/components/help-panel.js b/client/app/scripts/components/help-panel.js index ed5c1fb42..ef442a1b4 100644 --- a/client/app/scripts/components/help-panel.js +++ b/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 (
@@ -161,13 +161,6 @@ function HelpPanel({currentTopologyName, searchableFields, onClickClose, onClick {renderSearchPanel()} {renderFieldsPanel(currentTopologyName, searchableFields)}
-
- -
+ ); + } +} + +export default connect(null, { + toggleTroubleshootingMenu, + resetLocalViewState, + clickDownloadGraph +})(DebugMenu); diff --git a/client/app/scripts/constants/action-types.js b/client/app/scripts/constants/action-types.js index 47fa94df5..c56f06286 100644 --- a/client/app/scripts/constants/action-types.js +++ b/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', diff --git a/client/app/scripts/reducers/root.js b/client/app/scripts/reducers/root.js index 235f578ff..31a1532a9 100644 --- a/client/app/scripts/reducers/root.js +++ b/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; } diff --git a/client/app/styles/main.less b/client/app/styles/main.less index 9d366bad9..e3e8d75cb 100644 --- a/client/app/styles/main.less +++ b/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; + } +}