diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index 128006cf9..ad0e5093a 100644
--- a/client/app/scripts/components/app.js
+++ b/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({
+
diff --git a/client/app/scripts/components/status.js b/client/app/scripts/components/status.js
new file mode 100644
index 000000000..bd3b023cd
--- /dev/null
+++ b/client/app/scripts/components/status.js
@@ -0,0 +1,28 @@
+/** @jsx React.DOM */
+
+var React = require('react');
+
+var Status = React.createClass({
+
+ renderConnectionState: function() {
+ return (
+
+
+ Scope is disconnected
+
+ );
+ },
+
+ render: function() {
+ var isDisconnected = this.props.connectionState === 'disconnected';
+
+ return (
+
+ {isDisconnected && this.renderConnectionState()}
+
+ );
+ }
+
+});
+
+module.exports = Status;
diff --git a/client/app/scripts/stores/app-store.js b/client/app/scripts/stores/app-store.js
index 0d21d6364..f4cc8d18d 100644
--- a/client/app/scripts/stores/app-store.js
+++ b/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);
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index b1bf75353..0cb1436e3 100644
--- a/client/app/styles/main.less
+++ b/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 {