Show connection state between UI and backend

client/app/scripts/components/app.js

@@ -7,6 +7,7 @@ var Logo = require('./logo');
 var SearchBar = require('./search-bar.js');
 var AppStore = require('../stores/app-store');
 var Groupings = require('./groupings.js');
+var Status = require('./status.js');
 var Topologies = require('./topologies.js');
 var TopologyStore = require('../stores/topology-store');
 var WebapiUtils = require('../utils/web-api-utils');
@@ -22,6 +23,7 @@ var ESC_KEY_CODE = 27;
 function getStateFromStores() {
 	return {
 		activeTopology: AppStore.getCurrentTopology(),
+		connectionState: AppStore.getConnectionState(),
 		currentGrouping: AppStore.getCurrentGrouping(),
 		selectedNodeId: AppStore.getSelectedNodeId(),
 		nodeDetails: AppStore.getNodeDetails(),
@@ -70,6 +72,7 @@ var App = React.createClass({
 					<Logo />
 					<Topologies topologies={this.state.topologies} active={this.state.activeTopology} />
 					<Groupings active={this.state.currentGrouping} />
+					<Status connectionState={this.state.connectionState} />
 				</div>
 
 				<Nodes nodes={this.state.nodes} />

client/app/scripts/components/status.js

@@ -0,0 +1,28 @@
+/** @jsx React.DOM */
+
+var React = require('react');
+
+var Status = React.createClass({
+
+	renderConnectionState: function() {
+		return (
+			<div className="status-connection">
+				<span className="status-icon fa fa-exclamation-circle" />
+				<span className="status-label">Scope is disconnected</span>
+			</div>
+		);
+	},
+
+	render: function() {
+		var isDisconnected = this.props.connectionState === 'disconnected';
+
+		return (
+			<div className="status">
+				{isDisconnected && this.renderConnectionState()}
+			</div>
+		);
+	}
+
+});
+
+module.exports = Status;

client/app/scripts/stores/app-store.js

@@ -11,6 +11,7 @@ var TopologyStore = require('./topology-store');
 
 // Initial values
 
+var connectionState = 'disconnected';
 var currentGrouping = 'none';
 var currentTopology = 'applications';
 var nodeDetails = null;
@@ -31,6 +32,10 @@ var AppStore = assign({}, EventEmitter.prototype, {
 		};
 	},
 
+	getConnectionState: function() {
+		return connectionState;
+	},
+
 	getCurrentTopology: function() {
 		return currentTopology;
 	},
@@ -109,6 +114,12 @@ AppStore.dispatchToken = AppDispatcher.register(function(payload) {
 			AppStore.emit(AppStore.CHANGE_EVENT);
 			break;
 
+		case ActionTypes.RECEIVE_NODES_DELTA:
+			connectionState = "connected";
+			AppDispatcher.waitFor([TopologyStore.dispatchToken]);
+			AppStore.emit(AppStore.CHANGE_EVENT);
+			break;
+
 		case ActionTypes.RECEIVE_TOPOLOGIES:
 			topologies = payload.topologies;
 			AppStore.emit(AppStore.CHANGE_EVENT);

client/app/scripts/utils/web-api-utils.js

@@ -49,10 +49,12 @@ function getTopologies() {
 }
 
 function getNodeDetails(topology, nodeId) {
-	var url = [AppStore.getUrlForTopology(topology), nodeId].join('/');
-	reqwest(url, function(res) {
-		AppActions.receiveNodeDetails(res.node);
-	});
+	if (nodeId) {
+		var url = [AppStore.getUrlForTopology(topology), nodeId].join('/');
+		reqwest(url, function(res) {
+			AppActions.receiveNodeDetails(res.node);
+		});
+	}
 }
 
 module.exports = {
@@ -61,7 +63,7 @@ module.exports = {
 	getTopologies: getTopologies,
 
 	getNodesDelta: function(topologyUrl) {
-		if (topologyUrl) {
+		if (topologyUrl && topologyUrl !== currentUrl) {
 			createWebsocket(topologyUrl);
 		}
 	}

client/app/styles/main.less

@@ -110,6 +110,25 @@ body {
     }
 }
 
+.status {
+    float: right;
+    position: relative;
+    margin-top: 14px;
+    margin-right: 64px;
+
+    &-icon {
+        font-size: 16px;
+        position: relative;
+        top: 1px;
+        color: @text-secondary-color;
+    }
+
+    &-label {
+        margin-left: 0.5em;
+    }
+
+}
+
 #stats {
 
     .stat-value {