Plumb through the application version in the UI.

client/app/index.html

@@ -15,7 +15,7 @@
     </div>
 
     <!-- @ifdef DEBUG -->
-    <script>window.WS_URL = 'ws://localhost:4040';</script>
+    <script>window.WS_URL = 'ws://' + location.hostname + ':4040';</script>
     <!-- @endif -->
 
     <script src="app.js"></script>

client/app/scripts/actions/app-actions.js

@@ -97,6 +97,13 @@ module.exports = {
     WebapiUtils.getNodeDetails(AppStore.getCurrentTopologyUrl(), AppStore.getSelectedNodeId());
   },
 
+  receiveApiDetails: function(apiDetails) {
+    AppDispatcher.dispatch({
+        type: ActionTypes.RECEIVE_API_DETAILS,
+        version: apiDetails.version
+    });
+  },
+
   route: function(state) {
     AppDispatcher.dispatch({
       state: state,

client/app/scripts/components/app.js

@@ -11,7 +11,6 @@ const Details = require('./details');
 const Nodes = require('./nodes');
 const RouterUtils = require('../utils/router-utils');
 
-
 const ESC_KEY_CODE = 27;
 
 function getStateFromStores() {
@@ -24,7 +23,8 @@ function getStateFromStores() {
     selectedNodeId: AppStore.getSelectedNodeId(),
     nodeDetails: AppStore.getNodeDetails(),
     nodes: AppStore.getNodes(),
-    topologies: AppStore.getTopologies()
+    topologies: AppStore.getTopologies(),
+    version: AppStore.getVersion()
   };
 }
 
@@ -41,6 +41,7 @@ const App = React.createClass({
 
     RouterUtils.getRouter().start({hashbang: true});
     WebapiUtils.getTopologies();
+    WebapiUtils.getApiDetails();
   },
 
   onChange: function() {
@@ -55,6 +56,7 @@ const App = React.createClass({
 
   render: function() {
     const showingDetails = this.state.selectedNodeId;
+    const versionString = this.state.version ? 'Version ' + this.state.version : '';
 
     return (
       <div>
@@ -71,6 +73,8 @@ const App = React.createClass({
 
         <Nodes nodes={this.state.nodes} highlightedNodeIds={this.state.highlightedNodeIds}
           highlightedEdgeIds={this.state.highlightedEdgeIds} />
+
+        <div className="footer">{versionString}</div>
       </div>
     );
   }

client/app/scripts/constants/action-types.js

@@ -14,5 +14,6 @@ module.exports = keymirror({
   RECEIVE_NODES: null,
   RECEIVE_NODES_DELTA: null,
   RECEIVE_TOPOLOGIES: null,
+  RECEIVE_API_DETAILS: null,
   ROUTE_TOPOLOGY: null
 });

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

@@ -17,6 +17,7 @@ function isUrlForTopologyId(url, topologyId) {
 let connectionState = 'disconnected';
 let currentGrouping = 'none';
 let currentTopologyId = 'containers';
+let version = '';
 let mouseOverEdgeId = null;
 let mouseOverNodeId = null;
 let nodes = {};
@@ -108,6 +109,10 @@ const AppStore = assign({}, EventEmitter.prototype, {
 
   getTopologyIdForUrl: function(url) {
     return url.split('/').pop();
+  },
+
+  getVersion: function() {
+    return version;
   }
 });
 
@@ -211,6 +216,11 @@ AppStore.registeredCallback = function(payload) {
       AppStore.emit(AppStore.CHANGE_EVENT);
       break;
 
+    case ActionTypes.RECEIVE_API_DETAILS:
+      version = payload.version;
+      AppStore.emit(AppStore.CHANGE_EVENT);
+      break;
+
     case ActionTypes.ROUTE_TOPOLOGY:
       nodes = {};
       currentTopologyId = payload.state.topologyId;

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

@@ -10,6 +10,7 @@ let reconnectTimer = 0;
 let currentUrl = null;
 let updateFrequency = '5s';
 let topologyTimer = 0;
+let apiDetailsTimer = 0;
 
 function createWebsocket(topologyUrl) {
   if (socket) {
@@ -55,11 +56,21 @@ function getNodeDetails(topologyUrl, nodeId) {
   }
 }
 
+function getApiDetails() {
+  clearTimeout(apiDetailsTimer);
+  reqwest('/api', function(res) {
+    AppActions.receiveApiDetails(res);
+    apiDetailsTimer = setTimeout(getApiDetails, 10000);
+  });
+}
+
 module.exports = {
   getNodeDetails: getNodeDetails,
 
   getTopologies: getTopologies,
 
+  getApiDetails: getApiDetails,
+
   getNodesDelta: function(topologyUrl) {
     if (topologyUrl && topologyUrl !== currentUrl) {
       createWebsocket(topologyUrl);

client/app/styles/main.less

@@ -56,6 +56,15 @@ body {
   z-index: 20;
 }
 
+.footer {
+  position: absolute;
+  bottom: 16px;
+  right: 48px;
+  z-index: 20;
+  color: @text-tertiary-color;
+  font-size: 85%;
+}
+
 .logo {
   margin: -8px 0 0 64px;
   height: 64px;