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 {