diff --git a/client/app/index.html b/client/app/index.html
index 981cd91db..28d450b62 100644
--- a/client/app/index.html
+++ b/client/app/index.html
@@ -15,7 +15,7 @@
-
+
diff --git a/client/app/scripts/actions/app-actions.js b/client/app/scripts/actions/app-actions.js
index 3a662bbb8..64e81e98e 100644
--- a/client/app/scripts/actions/app-actions.js
+++ b/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,
diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index 309b56a28..8a0981652 100644
--- a/client/app/scripts/components/app.js
+++ b/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 (
@@ -71,6 +73,8 @@ const App = React.createClass({
+
+
{versionString}
);
}
diff --git a/client/app/scripts/constants/action-types.js b/client/app/scripts/constants/action-types.js
index c54118d43..ffce74550 100644
--- a/client/app/scripts/constants/action-types.js
+++ b/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
});
diff --git a/client/app/scripts/stores/app-store.js b/client/app/scripts/stores/app-store.js
index afd319418..f3d44047c 100644
--- a/client/app/scripts/stores/app-store.js
+++ b/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;
diff --git a/client/app/scripts/utils/web-api-utils.js b/client/app/scripts/utils/web-api-utils.js
index e1ae0b234..dce7160c3 100644
--- a/client/app/scripts/utils/web-api-utils.js
+++ b/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);
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 4757465d0..6a06eb6c5 100644
--- a/client/app/styles/main.less
+++ b/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;