diff --git a/client/app/scripts/charts/nodes-error.js b/client/app/scripts/charts/nodes-error.js index 877fa2517..ba5cfbb6b 100644 --- a/client/app/scripts/charts/nodes-error.js +++ b/client/app/scripts/charts/nodes-error.js @@ -1,14 +1,15 @@ import React from 'react'; +import classnames from 'classnames'; -export default function NodesError({children, faIconClass, hidden}) { - let classNames = 'nodes-chart-error'; - if (hidden) { - classNames += ' hide'; - } +export default function NodesError({children, faIconClass, hidden, + mainClassName = 'nodes-chart-error'}) { + const className = classnames(mainClassName, { + hide: hidden + }); const iconClassName = `fa ${faIconClass}`; return ( -
+
diff --git a/client/app/scripts/components/debug-toolbar.js b/client/app/scripts/components/debug-toolbar.js index 97145ff7c..ae61fff59 100644 --- a/client/app/scripts/components/debug-toolbar.js +++ b/client/app/scripts/components/debug-toolbar.js @@ -9,6 +9,7 @@ import { fromJS } from 'immutable'; import debug from 'debug'; const log = debug('scope:debug-panel'); +import ActionTypes from '../constants/action-types'; import { receiveNodesDelta } from '../actions/app-actions'; import { getNodeColor, getNodeColorDark, text2degree } from '../utils/color-utils'; @@ -111,11 +112,13 @@ function stopPerf() { Perf.printWasted(measurements); } + function startPerf(delay) { Perf.start(); setTimeout(stopPerf, delay * 1000); } + export function showingDebugToolbar() { return (('debugToolbar' in localStorage && JSON.parse(localStorage.debugToolbar)) || location.pathname.indexOf('debug') > -1); @@ -134,11 +137,23 @@ function enableLog(ns) { window.location.reload(); } + function disableLog() { debug.disable(); window.location.reload(); } + +function setAppState(fn) { + return (dispatch) => { + dispatch({ + type: ActionTypes.DEBUG_TOOLBAR_INTERFERING, + fn + }); + }; +} + + class DebugToolbar extends React.Component { constructor(props, context) { @@ -162,6 +177,10 @@ class DebugToolbar extends React.Component { }); } + setLoading(loading) { + this.props.setAppState(state => state.set('topologiesLoaded', !loading)); + } + addNodes(n, prefix = 'zing') { const ns = this.props.nodes; const nodeNames = ns.keySeq().toJS(); @@ -243,6 +262,12 @@ class DebugToolbar extends React.Component { ))} +
+ + + +
+
@@ -254,6 +279,7 @@ class DebugToolbar extends React.Component { } } + function mapStateToProps(state) { return { nodes: state.get('nodes'), @@ -261,6 +287,8 @@ function mapStateToProps(state) { }; } + export default connect( - mapStateToProps + mapStateToProps, + {setAppState} )(DebugToolbar); diff --git a/client/app/scripts/components/nodes.js b/client/app/scripts/components/nodes.js index d2ce010be..9da9992b6 100644 --- a/client/app/scripts/components/nodes.js +++ b/client/app/scripts/components/nodes.js @@ -62,15 +62,24 @@ class Nodes extends React.Component { ); } + renderLoading(show) { + return ( + + ); + } + render() { - const { nodes, selectedNodeId, topologyEmpty } = this.props; + const { nodes, selectedNodeId, topologyEmpty, topologiesLoaded } = this.props; const layoutPrecision = getLayoutPrecision(nodes.size); const hasSelectedNode = selectedNodeId && nodes.has(selectedNodeId); - const errorEmpty = this.renderEmptyTopologyError(topologyEmpty); return (
- {topologyEmpty && errorEmpty} + {!topologiesLoaded ? + this.renderLoading(!topologiesLoaded) : + (topologyEmpty && this.renderEmptyTopologyError(topologyEmpty))}