Merge pull request #148 from SuperNETorg/update

ui update settings tab

react/change.log

@@ -19,6 +19,8 @@ front:
 - seed extra space(s) check
 - custom seed option
 - copy seed button
+- native only mode
+- app update
 
 back:
 - added cli route

react/src/actions/actionCreators.js

@@ -66,6 +66,7 @@ export * from './actions/fullTxHistory';
 export * from './actions/basiliskTxHistory';
 export * from './actions/iguanaHelpers';
 export * from './actions/cli';
+export * from './actions/update';
 
 export let Config;
 

react/src/actions/actions/update.js

@@ -0,0 +1,54 @@
+import {
+  Config,
+  triggerToaster
+} from '../actionCreators';
+import {
+  logGuiHttp,
+  guiLogState
+} from './log';
+
+export function checkForUpdateUIPromise() {
+  return new Promise((resolve, reject) => {
+    fetch(`http://127.0.0.1:${Config.agamaPort}/shepherd/update/patch/check`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    .catch(function(error) {
+      console.log(error);
+      dispatch(
+        triggerToaster(
+          'checkForUpdateUIPromise',
+          'Error',
+          'error'
+        )
+      );
+    })
+    .then(response => response.json())
+    .then(json => resolve(json))
+  });
+}
+
+export function updateUIPromise() {
+  return new Promise((resolve, reject) => {
+    fetch(`http://127.0.0.1:${Config.agamaPort}/shepherd/update/patch`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    .catch(function(error) {
+      console.log(error);
+      dispatch(
+        triggerToaster(
+          'updateUIPromise',
+          'Error',
+          'error'
+        )
+      );
+    })
+    .then(response => response.json())
+    .then(json => resolve(json))
+  });
+}

react/src/components/dashboard/settings/settings.js

@@ -12,15 +12,26 @@ import {
   getAppConfig,
   saveAppConfig,
   getAppInfo,
-  shepherdCli
+  shepherdCli,
+  checkForUpdateUIPromise,
+  updateUIPromise
 } from '../../../actions/actionCreators';
 import Store from '../../../store';
 
 import {
   AppInfoTabRender,
-  SettingsRender
+  SettingsRender,
+  AppUpdateTabRender,
 } from './settings.render';
 
+import { SocketProvider } from 'socket.io-react';
+import io from 'socket.io-client';
+
+const socket = io.connect('http://127.0.0.1:' + Config.agamaPort);
+let updateProgressBar = {
+  patch: -1,
+};
+
 /*
   TODO:
   1) pre-select active coin in add node tab
@@ -44,6 +55,10 @@ class Settings extends React.Component {
       exportWifKeysRaw: false,
       seedInputVisibility: false,
       nativeOnly: Config.iguanaLessMode,
+      updatePatch: null,
+      updateBins: null,
+      updateLog: [],
+      updateProgressPatch: null,
     };
     this.exportWifKeys = this.exportWifKeys.bind(this);
     this.updateInput = this.updateInput.bind(this);
@@ -57,6 +72,9 @@ class Settings extends React.Component {
     this._saveAppConfig = this._saveAppConfig.bind(this);
     this.exportWifKeysRaw = this.exportWifKeysRaw.bind(this);
     this.toggleSeedInputVisibility = this.toggleSeedInputVisibility.bind(this);
+    this._checkForUpdateUIPromise = this._checkForUpdateUIPromise.bind(this);
+    this._updateUIPromise = this._updateUIPromise.bind(this);
+    socket.on('patch', msg => this.updateSocketsData(msg));
   }
 
   componentDidMount() {
@@ -77,6 +95,115 @@ class Settings extends React.Component {
     }
   }
 
+  updateSocketsData(data) {
+    if (data &&
+        data.msg &&
+        data.msg.type === 'ui') {
+
+      if (data.msg.status === 'progress' &&
+          data.msg.progress &&
+          data.msg.progress < 100) {
+        this.setState(Object.assign({}, this.state, {
+          updateProgressPatch: data.msg.progress,
+        }));
+        updateProgressBar.patch = data.msg.progress;
+      } else {
+        if (data.msg.status === 'progress' &&
+            data.msg.progress &&
+            data.msg.progress === 100) {
+          let _updateLog = [];
+          _updateLog.push('UI update downloaded. Verifying...');
+          this.setState(Object.assign({}, this.state, {
+            updateLog: _updateLog,
+          }));
+          updateProgressBar.patch = 100;
+        }
+
+        if (data.msg.status === 'done') {
+          let _updateLog = [];
+          _updateLog.push('UI is updated!');
+          this.setState(Object.assign({}, this.state, {
+            updateLog: _updateLog,
+            updatePatch: null,
+          }));
+          updateProgressBar.patch = -1;
+        }
+
+        if (data.msg.status === 'error') {
+          let _updateLog = [];
+          _updateLog.push('Error while verifying update file! Please retry again.');
+          this.setState(Object.assign({}, this.state, {
+            updateLog: _updateLog,
+          }));
+          updateProgressBar.patch = -1;
+        }
+      }
+    } else {
+      if (data &&
+          data.msg) {
+        let _updateLog = this.state.updateLog;
+        _updateLog.push(data.msg);
+        this.setState(Object.assign({}, this.state, {
+          updateLog: _updateLog,
+        }));
+      }
+    }
+  }
+
+  _checkForUpdateUIPromise() {
+    let _updateLog = [];
+    _updateLog.push('Checking for UI update...');
+    this.setState(Object.assign({}, this.state, {
+      updateLog: _updateLog,
+    }));
+
+    checkForUpdateUIPromise()
+    .then((res) => {
+      let _updateLog = this.state.updateLog;
+      _updateLog.push(res.result === 'update' ? ('New UI update available ' + res.version.remote) : 'You have the lastest UI version');
+      this.setState(Object.assign({}, this.state, {
+        updatePatch: res.result,
+        updateLog: _updateLog,
+      }));
+    });
+  }
+
+  _updateUIPromise() {
+    updateProgressBar.patch = 0;
+    let _updateLog = [];
+    _updateLog.push('Downloading UI update...');
+    this.setState(Object.assign({}, this.state, {
+      updateLog: _updateLog,
+    }));
+
+    updateUIPromise();
+  }
+
+  renderUpdateStatus() {
+    let items = [];
+    let patchProgressBar = null;
+
+    for (let i = 0; i < this.state.updateLog.length; i++) {
+      items.push(
+        <div>{ this.state.updateLog[i] }</div>
+      );
+    }
+
+    return (
+      <div style={{ minHeight: '200px' }}>
+        <hr />
+        <h5>Progress:</h5>
+        <div className="padding-bottom-15">{ items }</div>
+        <div className={ updateProgressBar.patch > -1 ? 'progress progress-sm' : 'hide' }>
+          <div
+            className="progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success font-size-80-percent"
+            style={{ width: updateProgressBar.patch + '%' }}>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   toggleSeedInputVisibility() {
     this.setState({
       seedInputVisibility: !this.state.seedInputVisibility,
@@ -175,6 +302,10 @@ class Settings extends React.Component {
     return null;
   }
 
+  renderAppUpdateTab() {
+    return AppUpdateTabRender.call(this);
+  }
+
   renderSNPeersList() {
     if (this.state.getPeersCoin) {
       const _getPeersCoin = this.state.getPeersCoin;

react/src/components/dashboard/settings/settings.render.js

@@ -4,6 +4,57 @@ import AddCoinOptionsCrypto from '../../addcoin/addcoinOptionsCrypto';
 import AddCoinOptionsAC from '../../addcoin/addcoinOptionsAC';
 import AddCoinOptionsACFiat from '../../addcoin/addcoinOptionsACFiat';
 
+export const AppUpdateTabRender = function() {
+  return (
+    <div
+      className="panel"
+      id="AppUpdate"
+      onClick={ () => this.openTab('AppUpdate', 10) }>
+      <div className="panel-heading">
+        <a className={ this.state.activeTab === 10 ? 'panel-title' : 'panel-title collapsed' }>
+          <i className="icon fa fa-life-ring"></i> Update
+        </a>
+      </div>
+      <div
+        className={ this.state.activeTab === 10 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
+        style={{ height: this.state.activeTab === 10 ? this.state.activeTabHeight + 'px' : '0' }}>
+        <div className="panel-body">
+          <div className="col-sm-4 padding-top-15">
+            <h5>UI update</h5>
+            <div className="padding-top-15">
+              <button
+                type="button"
+                className="btn btn-primary waves-effect waves-light"
+                onClick={ this._checkForUpdateUIPromise }>Check for update</button>
+              <button
+                type="button"
+                className="btn btn-primary waves-effect waves-light margin-left-20"
+                onClick={ this._updateUIPromise }
+                disabled={ !this.state.updatePatch }>Update UI now</button>
+            </div>
+          </div>
+          <div className="col-sm-4 padding-top-15 hide">
+            <h5>Binaries update</h5>
+            <div className="padding-top-15">
+              <button
+                type="button"
+                className="btn btn-primary waves-effect waves-light"
+                onClick={ this._checkForUpdateUIPromise }>Check for updates</button>
+              <button
+                type="button"
+                className="btn btn-primary waves-effect waves-light margin-left-20"
+                onClick={ this.checkNodes }>Update bins now</button>
+            </div>
+          </div>
+          <div className="col-sm-12 padding-top-15">
+            { this.renderUpdateStatus() }
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export const AppInfoTabRender = function() {
   return (
     <div
@@ -547,6 +598,8 @@ export const SettingsRender = function() {
                       </div>
                     </div>
                   </div>
+
+                  { this.renderAppUpdateTab() }
                 </div>
               </div>
             </div>

react/webpack.config.js

@@ -29,7 +29,7 @@ const plugins = [
   new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor',
     minChunks: Infinity,
-    filename: 'vendor-[hash].js',
+    filename: 'vendor.js',
   }),
   /*
   * The DefinePlugin allows you to create global constants which can be configured at compile time.
@@ -84,7 +84,7 @@ const rules = [
   {
     test: /\.(png|gif|jpg|svg)$/,
     include: imgPath,
-    use: 'url-loader?limit=20480&name=assets/[name]-[hash].[ext]',
+    use: 'url-loader?limit=20480&name=assets/[name].[ext]',
   },
 ];
 
@@ -113,7 +113,7 @@ if (isProduction) {
         comments: false,
       },
     }),
-    new ExtractTextPlugin('style-[hash].css')
+    new ExtractTextPlugin('style.css')
   );
 
   // Production rules
@@ -168,7 +168,7 @@ module.exports = {
   output: {
     path: buildPath,
     publicPath: '',
-    filename: 'app-[hash].js',
+    filename: 'app.js',
   },
   module: {
     rules,