Adds a loading indicator for the initial node-load

- Sometimes can take a second to get the initial nodes
- Not doing the transition between topos atm as its a bit distracting
  popping up and down.

client/app/scripts/charts/nodes-error.js

@@ -10,8 +10,10 @@ export default function NodesError({children, faIconClass, hidden,
 
   return (
     <div className={className}>
-      <div className="nodes-chart-error-icon">
-        <span className={iconClassName} />
+      <div className="nodes-chart-error-icon-container">
+        <div className="nodes-chart-error-icon">
+          <span className={iconClassName} />
+        </div>
       </div>
       {children}
     </div>

client/app/scripts/components/nodes.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 
 import NodesChart from '../charts/nodes-chart';
 import NodesError from '../charts/nodes-error';
-import { isTopologyEmpty } from '../utils/topology-utils';
+import { findTopologyById, isTopologyEmpty } from '../utils/topology-utils';
 
 const navbarHeight = 160;
 const marginTop = 0;
@@ -27,6 +27,17 @@ function getLayoutPrecision(nodesCount) {
   return precision;
 }
 
+function getNodeType(topology, topologies) {
+  if (!topology || topologies.size === 0) {
+    return '';
+  }
+  if (topology.get('parentId')) {
+    const parentTopology = findTopologyById(topologies, topology.get('parentId'));
+    return parentTopology.get('name');
+  }
+  return topology.get('name');
+}
+
 class Nodes extends React.Component {
   constructor(props, context) {
     super(props, context);
@@ -62,24 +73,26 @@ class Nodes extends React.Component {
     );
   }
 
-  renderLoading(show) {
+  renderLoading(message, show) {
     return (
       <NodesError mainClassName="nodes-chart-loading" faIconClass="fa-circle-thin" hidden={!show}>
-        <div className="heading">Loading Topologies</div>
+        <div className="heading">{message}</div>
       </NodesError>
     );
   }
 
   render() {
-    const { nodes, selectedNodeId, topologyEmpty, topologiesLoaded } = this.props;
+    const { nodes, selectedNodeId, topologyEmpty, topologiesLoaded, nodesLoaded, topologies,
+      topology } = this.props;
     const layoutPrecision = getLayoutPrecision(nodes.size);
     const hasSelectedNode = selectedNodeId && nodes.has(selectedNodeId);
 
     return (
       <div className="nodes-wrapper">
-        {!topologiesLoaded ?
-          this.renderLoading(!topologiesLoaded) :
-          (topologyEmpty && this.renderEmptyTopologyError(topologyEmpty))}
+        {this.renderLoading('Loading topologies...', !topologiesLoaded)}
+        {this.renderLoading(`Loading ${getNodeType(topology, topologies)}...`,
+          topologiesLoaded && !nodesLoaded)}
+        {this.renderEmptyTopologyError(topologiesLoaded && nodesLoaded && topologyEmpty)}
         <NodesChart {...this.state}
           detailsWidth={detailsWidth}
           layoutPrecision={layoutPrecision}
@@ -104,9 +117,12 @@ class Nodes extends React.Component {
 function mapStateToProps(state) {
   return {
     nodes: state.get('nodes'),
+    nodesLoaded: state.get('nodesLoaded'),
     selectedNodeId: state.get('selectedNodeId'),
+    topologies: state.get('topologies'),
+    topologiesLoaded: state.get('topologiesLoaded'),
     topologyEmpty: isTopologyEmpty(state),
-    topologiesLoaded: state.get('topologiesLoaded')
+    topology: state.get('currentTopology'),
   };
 }
 

client/app/scripts/components/status.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 
 class Status extends React.Component {
   render() {
-    const {errorUrl, filteredNodeCount, topology, websocketClosed} = this.props;
+    const {errorUrl, topologiesLoaded, filteredNodeCount, topology, websocketClosed} = this.props;
 
     let title = '';
     let text = 'Trying to reconnect...';
@@ -14,6 +14,10 @@ class Status extends React.Component {
       title = `Cannot reach Scope. Make sure the following URL is reachable: ${errorUrl}`;
       classNames += ' status-loading';
       showWarningIcon = true;
+    } else if (!topologiesLoaded) {
+      text = 'Connecting to Scope...';
+      classNames += ' status-loading';
+      showWarningIcon = true;
     } else if (websocketClosed) {
       classNames += ' status-loading';
       showWarningIcon = true;

client/app/scripts/reducers/root.js

@@ -36,6 +36,7 @@ export const initialState = makeMap({
   networkNodes: makeMap(),
   nodeDetails: makeOrderedMap(), // nodeId -> details
   nodes: makeOrderedMap(), // nodeId -> node
+  nodesLoaded: false,
   // nodes cache, infrequently updated, used for search
   nodesByTopology: makeMap(), // topologyId -> nodes
   pinnedMetric: null,
@@ -61,7 +62,7 @@ export const initialState = makeMap({
   updatePausedAt: null, // Date
   version: '...',
   versionUpdate: null,
-  websocketClosed: true,
+  websocketClosed: false,
   exportingGraph: false
 });
 
@@ -483,6 +484,7 @@ export function rootReducer(state = initialState, action) {
     case ActionTypes.RECEIVE_NODES_DELTA: {
       const emptyMessage = !action.delta.add && !action.delta.remove
         && !action.delta.update;
+      state = state.set('nodesLoaded', true);
 
       if (!emptyMessage) {
         log('RECEIVE_NODES_DELTA',

client/app/styles/main.less

@@ -317,8 +317,11 @@ h2 {
     }
   }
 
+  &-loading &-error-icon-container {
+    animation: blinking 2.0s infinite @base-ease;
+  }
+
   &-loading {
-    animation: blinking 2s infinite @base-ease;
     text-align: center;
   }