Add update check

Closes #338

client/src/components/App/index.js

@@ -15,12 +15,13 @@ import Filters from '../../containers/Filters';
 import Logs from '../../containers/Logs';
 import Footer from '../ui/Footer';
 import Toasts from '../Toasts';
-
 import Status from '../ui/Status';
+import Update from '../ui/Update';
 
 class App extends Component {
     componentDidMount() {
         this.props.getDnsStatus();
+        this.props.getVersion();
     }
 
     handleStatusChange = () => {
@@ -29,9 +30,20 @@ class App extends Component {
 
     render() {
         const { dashboard } = this.props;
+        const updateAvailable =
+            !dashboard.processingVersions &&
+            dashboard.isCoreRunning &&
+            dashboard.isUpdateAvailable;
+
         return (
             <HashRouter hashType='noslash'>
                 <Fragment>
+                    {updateAvailable &&
+                        <Update
+                            announcement={dashboard.announcement}
+                            announcementUrl={dashboard.announcementUrl}
+                        />
+                    }
                     <LoadingBar className="loading-bar" updateTime={1000} />
                     <Route component={Header} />
                     <div className="container container--wrap">
@@ -65,6 +77,7 @@ App.propTypes = {
     dashboard: PropTypes.object,
     isCoreRunning: PropTypes.bool,
     error: PropTypes.string,
+    getVersion: PropTypes.func,
 };
 
 export default App;

client/src/components/Header/Header.css

@@ -67,11 +67,15 @@
 }
 
 .nav-version {
-    padding: 16px 0;
-    font-size: 0.85rem;
+    padding: 7px 0;
+    font-size: 0.80rem;
     text-align: right;
 }
 
+.nav-version__value {
+    font-weight: 600;
+}
+
 .header-brand-img {
     height: 26px;
 }
@@ -103,7 +107,7 @@
 
     .nav-version {
         padding: 0;
-        font-size: 0.9rem;
+        font-size: 0.85rem;
     }
 }
 

client/src/components/Header/Version.js

@@ -5,7 +5,12 @@ export default function Version(props) {
     const { dnsVersion, dnsAddress, dnsPort } = props;
     return (
         <div className="nav-version">
-            version {dnsVersion} / address: {dnsAddress}:{dnsPort}
+            <div className="nav-version__text">
+                version: <span className="nav-version__value">{dnsVersion}</span>
+            </div>
+            <div className="nav-version__text">
+                address: <span className="nav-version__value">{dnsAddress}:{dnsPort}</span>
+            </div>
         </div>
     );
 }

client/src/components/ui/Update.css

@@ -0,0 +1,6 @@
+.update {
+    position: relative;
+    z-index: 102;
+    margin-bottom: 0;
+    padding: 0.75rem 0;
+}

client/src/components/ui/Update.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './Update.css';
+
+const Update = props => (
+    <div className="alert alert-info update">
+        <div className="container">
+            {props.announcement} <a href={props.announcementUrl} target="_blank" rel="noopener noreferrer">Click here</a> for more info.
+        </div>
+    </div>
+);
+
+Update.propTypes = {
+    announcement: PropTypes.string.isRequired,
+    announcementUrl: PropTypes.string.isRequired,
+};
+
+export default Update;