From edf94a4da8a236742b6f114c9478785e6fbc8876 Mon Sep 17 00:00:00 2001 From: jpellizzari Date: Fri, 9 Dec 2016 14:33:14 -0800 Subject: [PATCH 1/2] Added control to reset local view state --- client/app/scripts/actions/app-actions.js | 8 +++++++ client/app/scripts/components/help-panel.js | 22 ++++++++++++++++---- client/app/scripts/constants/action-types.js | 1 + client/app/styles/main.less | 22 ++++++++++++++++++++ 4 files changed, 49 insertions(+), 4 deletions(-) diff --git a/client/app/scripts/actions/app-actions.js b/client/app/scripts/actions/app-actions.js index daa825787b..4f46dc0717 100644 --- a/client/app/scripts/actions/app-actions.js +++ b/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,10 @@ export function route(urlState) { ); }; } + +export function resetLocalViewState() { + return (dispatch) => { + dispatch({type: ActionTypes.RESET_LOCAL_VIEW_STATE}); + storageSet('scopeViewState', ''); + }; +} diff --git a/client/app/scripts/components/help-panel.js b/client/app/scripts/components/help-panel.js index aad9b3b7f0..ed5c1fb422 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 } from '../actions/app-actions'; +import { hideHelp, resetLocalViewState } from '../actions/app-actions'; const GENERAL_SHORTCUTS = [ @@ -149,7 +149,7 @@ function renderFieldsPanel(currentTopologyName, searchableFields) { } -function HelpPanel({currentTopologyName, searchableFields, onClickClose}) { +function HelpPanel({currentTopologyName, searchableFields, onClickClose, onClickReset}) { return (
@@ -161,8 +161,19 @@ function HelpPanel({currentTopologyName, searchableFields, onClickClose}) { {renderSearchPanel()} {renderFieldsPanel(currentTopologyName, searchableFields)}
+
+ +
- +
@@ -178,4 +189,7 @@ function mapStateToProps(state) { } -export default connect(mapStateToProps, { onClickClose: hideHelp })(HelpPanel); +export default connect(mapStateToProps, { + onClickClose: hideHelp, + onClickReset: resetLocalViewState +})(HelpPanel); diff --git a/client/app/scripts/constants/action-types.js b/client/app/scripts/constants/action-types.js index cb617363c3..47fa94df58 100644 --- a/client/app/scripts/constants/action-types.js +++ b/client/app/scripts/constants/action-types.js @@ -45,6 +45,7 @@ const ACTION_TYPES = [ 'RECEIVE_TOPOLOGIES', 'RECEIVE_API_DETAILS', 'RECEIVE_ERROR', + 'RESET_LOCAL_VIEW_STATE', 'ROUTE_TOPOLOGY', 'SELECT_METRIC', 'SHOW_HELP', diff --git a/client/app/styles/main.less b/client/app/styles/main.less index 60a64d166e..9d366bad9d 100644 --- a/client/app/styles/main.less +++ b/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,6 +1588,26 @@ h2 { border-color: rgba(131, 131, 172, 0.6); } } + + } + + &-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; + } } From 62448ee7cb7585ba7987b2fd202f141d1fd31edb Mon Sep 17 00:00:00 2001 From: jpellizzari Date: Wed, 4 Jan 2017 15:17:50 -0800 Subject: [PATCH 2/2] Added debugging/troubleshooting menu; Moved troubleshooting icons --- client/.eslintrc | 1 + client/app/scripts/actions/app-actions.js | 8 ++ client/app/scripts/components/app.js | 6 +- client/app/scripts/components/footer.js | 20 ++-- client/app/scripts/components/help-panel.js | 14 +-- .../components/troubleshooting-menu.js | 93 +++++++++++++++++++ client/app/scripts/constants/action-types.js | 2 +- client/app/scripts/reducers/root.js | 9 ++ client/app/styles/main.less | 58 +++++++----- 9 files changed, 164 insertions(+), 47 deletions(-) create mode 100644 client/app/scripts/components/troubleshooting-menu.js diff --git a/client/.eslintrc b/client/.eslintrc index d7e58c4701..456aca91d7 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 4f46dc0717..9f9f5f35e0 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 696508212d..3361c7285f 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 b1a178704c..3633ece006 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 ed5c1fb422..ef442a1b43 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 47fa94df58..c56f06286b 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 235f578ff2..31a1532a97 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 9d366bad9d..e3e8d75cb9 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; + } +}