Merge branch 'develop' into feature/docker-testing

frontend/app/api/index.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const version = require('../../package.json').version;
 
 // Taken from:
 // http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
@@ -208,5 +209,17 @@ module.exports = function (app, port) {
         });
       }, 500);
     }
-  )
+  );
+
+  /*
+    VERSION
+  */
+  app.get('/api/version', function(req, res) {
+    res.setHeader('Content-Type', 'application/json');
+
+    res.send({
+      version: version,
+      isDevelopment: process.env.NODE_ENV !== 'production'
+    })
+  });
 };

frontend/lib/js/api/api.js

@@ -62,6 +62,10 @@ function fetchJson(url: string, request?: RequestType, rawBody?: boolean = false
   return fetchJsonUnauthorized(url, finalRequest, rawBody);
 }
 
+export function getVersion() {
+  return fetchJson(apiUrl() + '/version')
+}
+
 export function getDatasets() {
   return fetchJson(apiUrl() + `/datasets`);
 }

frontend/lib/js/app/reducers.js

@@ -12,6 +12,11 @@ import {
   type StateType as DatasetsStateType,
 } from '../dataset';
 
+import {
+  version,
+  type StateType as VersionStateType
+} from '../header/reducer'
+
 import {
   reducer as tooltip,
   type StateType as TooltipStateType
@@ -41,9 +46,10 @@ export type StateType = {
   datasets: DatasetsStateType,
   tooltip: TooltipStateType,
   panes: PanesStateType,
+  version: VersionStateType,
 };
 
- const buildAppReducer = (availableForms) => combineReducers({
+const buildAppReducer = (availableForms) => combineReducers({
   categoryTrees,
   query,
   uploadConceptListModal,
@@ -60,6 +66,7 @@ export type StateType = {
   uploadQueryResults,
   deletePreviousQueryModal,
   timebasedQuery,
+  version,
   externalForms: buildExternalFormsReducer(availableForms),
 });
 

frontend/lib/js/header/Header.js

@@ -1,18 +1,46 @@
-import React from 'react';
-import T     from 'i18n-react';
+import React           from 'react';
+import PropTypes       from 'prop-types';
+import T               from 'i18n-react';
+import { connect }     from 'react-redux';
+import { loadVersion } from './actions';
 
 class Header extends React.Component {
+  componentDidMount() {
+    this.props.loadVersion();
+  }
+
   render() {
     return (
       <header className="header">
         <div
           className="header__logo"
+          title={'Conquery ' + this.props.version}
         />
         <span className="header__spacer" />
         <h1 className="header__headline">{T.translate('headline')}</h1>
+        {this.props.isDevelopment && <h1 className="header__version">{this.props.version}</h1>}
       </header>
     );
   }
 }
 
-export default Header;
+Header.propTypes = {
+  version: PropTypes.string,
+  isDevelopment: PropTypes.bool,
+  loadVersion: PropTypes.func
+};
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    version: state.version ? state.version.version : '',
+    isDevelopment: state.version ? state.version.isDevelopment : false,
+  }
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    loadVersion: () => dispatch(loadVersion()),
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Header);

frontend/lib/js/header/actionTypes.js

@@ -0,0 +1,4 @@
+// api call GET /version
+export const LOAD_VERSION_START = "header/LOAD_VERSION_START";
+export const LOAD_VERSION_SUCCESS = "header/LOAD_VERSION_SUCCESS";
+export const LOAD_VERSION_ERROR = "header/LOAD_VERSION_ERROR";

frontend/lib/js/header/actions.js

@@ -0,0 +1,29 @@
+import { type Dispatch }      from 'redux-thunk';
+
+import api                    from '../api';
+import {
+  defaultError,
+  defaultSuccess
+} from "../common/actions";
+import {
+  LOAD_VERSION_START,
+  LOAD_VERSION_SUCCESS,
+  LOAD_VERSION_ERROR
+} from './actionTypes';
+
+export const loadVersionStart = () => ({ type: LOAD_VERSION_START });
+export const loadVersionError = (err: any) => defaultError(LOAD_VERSION_ERROR, err);
+export const loadVersionSuccess = (res: any) => defaultSuccess(LOAD_VERSION_SUCCESS, res);
+
+export const loadVersion = () => {
+  return (dispatch: Dispatch) => {
+    dispatch(loadVersionStart());
+
+    return api.getVersion()
+      .then(
+        r => {
+          dispatch(loadVersionSuccess(r));
+        },
+        e => dispatch(loadVersionError(e)))
+  }
+};

frontend/lib/js/header/reducer.js

@@ -0,0 +1,31 @@
+import {
+  LOAD_VERSION_START,
+  LOAD_VERSION_SUCCESS,
+  LOAD_VERSION_ERROR
+} from './actionTypes'
+
+export type StateType = {
+  loading: boolean,
+  development: boolean,
+  version: string
+};
+
+const initialState: StateType = {};
+
+export const version = (state: StateType = initialState, action: Object): StateType => {
+  switch (action.type) {
+    case LOAD_VERSION_START:
+      return { ...state, loading: true };
+    case LOAD_VERSION_SUCCESS:
+      return {
+        ...state,
+        loading: false,
+        isDevelopment: action.payload.data.isDevelopment,
+        version: action.payload.data.version
+      };
+      case LOAD_VERSION_ERROR:
+          return { ...state, loading: false, error: action.payload.message };
+    default:
+      return state;
+  }
+};

frontend/lib/styles/components/header.sass

@@ -3,6 +3,9 @@
   color: white
   padding: 0 20px
   overflow: hidden
+  display: flex
+  justify-content: space-between
+  align-items: center
 
   // Fix, so content can expand to 100% and scroll
   position: absolute
@@ -11,16 +14,12 @@
   top: 0
   left: 0
 
-  &__headline, &__logo, &__spacer
-    display: inline-block
-    vertical-align: middle
-
   &__spacer
     margin: 0 10px
     height: 20px
 
   &__headline
-    margin: 0
+    margin: 0 auto 0 0
     line-height: 2
     font-size: $font-sm
     font-style: italic
@@ -33,3 +32,7 @@
     background-repeat: no-repeat
     background-position-y: 50%
     background-size: $img-logo-background-size
+
+  &__version
+    font-size: $font-sm
+    margin-left: auto