+ client: add button for check updates

client/src/components/Header/Header.css

@@ -75,7 +75,11 @@
 }
 
 .nav-version__value {
+    max-width: 110px;
     font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 .nav-version__link {
@@ -85,6 +89,11 @@
     cursor: pointer;
 }
 
+.nav-version__text {
+    display: flex;
+    justify-content: flex-end;
+}
+
 .header-brand-img {
     height: 32px;
 }

client/src/components/Header/Version.js

@@ -4,12 +4,26 @@ import { Trans, withNamespaces } from 'react-i18next';
 
 import { getDnsAddress } from '../../helpers/helpers';
 
-function Version(props) {
-    const { dnsVersion, dnsAddresses, dnsPort } = props;
+const Version = (props) => {
+    const {
+        dnsVersion, dnsAddresses, dnsPort, processingVersion, t,
+    } = props;
+
     return (
         <div className="nav-version">
             <div className="nav-version__text">
-                <Trans>version</Trans>: <span className="nav-version__value">{dnsVersion}</span>
+                <Trans>version</Trans>:&nbsp;<span className="nav-version__value" title={dnsVersion}>{dnsVersion}</span>
+                <button
+                    type="button"
+                    className="btn btn-icon btn-icon-sm btn-outline-primary btn-sm ml-2"
+                    onClick={() => props.getVersion(true)}
+                    disabled={processingVersion}
+                    title={t('check_updates_now')}
+                >
+                    <svg className="icons">
+                        <use xlinkHref="#refresh" />
+                    </svg>
+                </button>
             </div>
             <div className="nav-version__link">
                 <div className="popover__trigger popover__trigger--address">
@@ -17,20 +31,23 @@ function Version(props) {
                 </div>
                 <div className="popover__body popover__body--address">
                     <div className="popover__list">
-                        {dnsAddresses
-                            .map(ip => <li key={ip}>{getDnsAddress(ip, dnsPort)}</li>)
-                        }
+                        {dnsAddresses.map(ip => (
+                            <li key={ip}>{getDnsAddress(ip, dnsPort)}</li>
+                        ))}
                     </div>
                 </div>
             </div>
         </div>
     );
-}
+};
 
 Version.propTypes = {
     dnsVersion: PropTypes.string.isRequired,
     dnsAddresses: PropTypes.array.isRequired,
     dnsPort: PropTypes.number.isRequired,
+    getVersion: PropTypes.func.isRequired,
+    processingVersion: PropTypes.bool.isRequired,
+    t: PropTypes.func.isRequired,
 };
 
 export default withNamespaces()(Version);

client/src/components/Header/index.js

@@ -23,7 +23,7 @@ class Header extends Component {
     };
 
     render() {
-        const { dashboard } = this.props;
+        const { dashboard, getVersion, location } = this.props;
         const { isMenuOpen } = this.state;
         const badgeClass = classnames({
             'badge dns-status': true,
@@ -51,7 +51,7 @@ class Header extends Component {
                             </div>
                         </div>
                         <Menu
-                            location={this.props.location}
+                            location={location}
                             isMenuOpen={isMenuOpen}
                             toggleMenuOpen={this.toggleMenuOpen}
                             closeMenu={this.closeMenu}
@@ -59,7 +59,8 @@ class Header extends Component {
                         {!dashboard.processing &&
                             <div className="col col-sm-6 col-lg-3">
                                 <Version
-                                    { ...this.props.dashboard }
+                                    { ...dashboard }
+                                    getVersion={getVersion}
                                 />
                             </div>
                         }
@@ -71,8 +72,9 @@ class Header extends Component {
 }
 
 Header.propTypes = {
-    dashboard: PropTypes.object,
-    location: PropTypes.object,
+    dashboard: PropTypes.object.isRequired,
+    location: PropTypes.object.isRequired,
+    getVersion: PropTypes.func.isRequired,
 };
 
 export default withNamespaces()(Header);