github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-03-03 02:00:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added debugging/troubleshooting menu; Moved troubleshooting icons

Browse Source
This commit is contained in:
jpellizzari
2017-01-04 15:17:50 -08:00
parent edf94a4da8
commit 62448ee7cb
9 changed files with 164 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/.eslintrc
View File

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

8
client/app/scripts/actions/app-actions.js
View File

@@ -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
};
}

6
client/app/scripts/components/app.js
View File

@@ -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,

20
client/app/scripts/components/footer.js
View File

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

14
client/app/scripts/components/help-panel.js
View File

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

93
client/app/scripts/components/troubleshooting-menu.js Normal file
View File

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

2
client/app/scripts/constants/action-types.js
View File

@@ -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',

9
client/app/scripts/reducers/root.js
View File

@@ -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;
}

58
client/app/styles/main.less
View File

@@ -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;
}
}