Feature/track version (#21)

Make dashboard version visible in the dashboard.

.gitignore

@@ -7,6 +7,7 @@ build/browser-bundle.js
 build/browser-bundle.js.map
 build/*.svg
 build/*.png
+build/metadata.json
 reports/
 logs/
 vault/

.travis.yml

@@ -2,11 +2,7 @@ language: node_js
 node_js: "v5.1.0"
 install:
   - "sed -i.bak -e '/\"api-mock\": \".*\",/d' package.json"
-  - npm install
-  - npm run build
-  - cd build/
-  - tar -zcf ../cerberus-dashboard.tar.gz ./*
-  - cd ../
+  - npm run artifact
 deploy:
   skip_cleanup: true
   provider: releases

app/actions/appActions.js

@@ -133,4 +133,41 @@ export function resetToInitialState() {
     return {
         type: constants.RESET_SIDEBAR_DATA
     }
+}
+
+/**
+ * Action for loading version data into state
+ */
+export function loadDashboardMetadata() {
+    return function(dispatch) {
+        return axios({
+            url: '/dashboard/metadata.json',
+            timeout: 10000
+        })
+        .then(function (response) {
+            dispatch(storeDashboardMetadata(response.data))
+        })
+        .catch(function (response) {
+            log.error(JSON.stringify(response, null, 2))
+            dispatch(modalActions.popModal())
+            dispatch(messengerActions.addNewMessage(
+                <div className="login-error-msg-container">
+                    <div className="login-error-msg-header">Failed to load dashboard metadata</div>
+                    <div className="login-error-msg-content-wrapper">
+                        <div className="login-error-msg-label">Status Code:</div>
+                        <div className="login-error-msg-cms-msg">{response.status}</div>
+                    </div>
+                </div>
+            ))
+        })
+    }
+}
+
+export function storeDashboardMetadata(data) {
+    return {
+        type: constants.STORE_DOMAIN_DATA,
+        payload: {
+            version: data.version
+        }
+    }
 }

app/components/LandingView/LandingView.js

@@ -1,15 +1,46 @@
 import React from 'react'
 import { Component } from 'react'
+import { connect } from 'react-redux'
+import * as appActions from '../../actions/appActions'
 import EnvironmentService from '../../service/EnvironmentService'
 import './LandingView.scss'
 
+@connect((state) => {
+    return {
+        hasDashboardMetadataLoaded: state.app.metadata.hasLoaded,
+        dashboardVersion: state.app.metadata.version
+    }
+})
 export default class LandingView extends Component {
+
+    componentDidMount() {
+        if (! this.props.hasDashboardMetadataLoaded) {
+            this.props.dispatch(appActions.loadDashboardMetadata())
+        }
+    }
+
     render() {
+        const {dashboardVersion, hasDashboardMetadataLoaded} = this.props
+
         return (
             <div id='landing-view' className='ncss-brand'>
                 <h2>Welcome to the Cerberus Management Dashboard</h2>
                 <h3>Environment: {EnvironmentService.getEnvironment()}</h3>
                 <h3>API Domain: {EnvironmentService.getDomain()}</h3>
+
+                <div id='loader' className={hasDashboardMetadataLoaded ? 'hide-me' : 'show-me'}>
+                    <div id='fountainG'>
+                        <div id='fountainG_1' className='fountainG'></div>
+                        <div id='fountainG_2' className='fountainG'></div>
+                        <div id='fountainG_3' className='fountainG'></div>
+                        <div id='fountainG_4' className='fountainG'></div>
+                        <div id='fountainG_5' className='fountainG'></div>
+                        <div id='fountainG_6' className='fountainG'></div>
+                        <div id='fountainG_7' className='fountainG'></div>
+                        <div id='fountainG_8' className='fountainG'></div>
+                    </div>
+                </div>
+                <h3 className={hasDashboardMetadataLoaded ? '' : 'hide-me'}>Version: {dashboardVersion}</h3>
                 <h4>For help please visit the <a target="_blank" href="/dashboard/help/index.html">help page</a></h4>
             </div>
         )

app/components/LandingView/LandingView.scss

@@ -6,4 +6,11 @@
   a {
     text-decoration: underline;
   }
+
+  display: flex;
+  flex-flow: column;
+
+  #loader {
+    padding-bottom: 5px;
+  }
 }

app/constants/actions.js

@@ -22,8 +22,8 @@ export const FETCHING_SIDE_BAR_DATA = 'FETCHING_SIDE_BAR_DATA'
 export const FETCHED_SIDE_BAR_DATA = 'FETCHED_SIDE_BAR_DATA'
 export const MANAGE_BUCKET = 'MANAGE_BUCKET'
 export const STORE_DOMAIN_DATA = 'STORE_DOMAIN_DATA'
-export const RESET_SIDEBAR_DATA = 'RESET_SIDEBAR_DATA';
-
+export const RESET_SIDEBAR_DATA = 'RESET_SIDEBAR_DATA'
+export const STORE_DASHBOARD_METADATA = 'STORE_DASHBOARD_METADATA'
 
 // Events for the create-new-bucket
 export const CREATE_NEW_SDB_INIT = 'CREATE_NEW_SDB_INIT'

app/reducers/appReducer.js

@@ -11,6 +11,10 @@ const initialState = {
         hasLoaded: false,
         categories: [],
         roles: []
+    },
+    metadata: {
+        hasLoaded: false,
+        version: 'unknown'
     }
 }
 
@@ -44,5 +48,15 @@ export default createReducer(initialState, {
 
     [constants.RESET_SIDEBAR_DATA]: (state) => {
         return initialState
+    },
+
+    // stores the metadata about the dashboard into the state
+    [constants.STORE_DOMAIN_DATA]: (state, payload) => {
+        return Object.assign({}, state, {
+            metadata: {
+                hasLoaded: true,
+                version: payload.version
+            }
+        })
     }
 })

buildAndArtifact.sh

@@ -3,4 +3,6 @@
 npm install
 npm run build
 cd build/
+echo "{\"version\":\"$(git describe --tags)\"}" > metadata.json
 tar -zcvf ../cerberus-dashboard.tar.gz ./*
+cd ../

package.json

@@ -1,6 +1,5 @@
 {
   "name": "cerberus-management-dashboard",
-  "version": "1.2.1",
   "description": "A management dashboard for Cerberus.",
   "main": "index.js",
   "repository": {