Merge pull request #74 from stellar/bridge-admin-gui

Admin GUI

Author: bartekn

.gitignore

@@ -5,3 +5,7 @@
 /bin
 /dist
 /config.toml
+/gui/.tmp
+/gui/yarn.lock
+/gui/node_modules
+/gui/dist

README.md

@@ -31,6 +31,20 @@ gb build
 
 After a successful build, you should find `bin/bridge` in the project directory.
 
+### GUI
+
+To build user interface for the bridge server go to `gui` folder and run:
+
+```
+gulp build
+```
+
+For development run:
+
+```
+gulp develop
+```
+
 ## Running tests
 
 ```

gui/gulpfile.babel.js

@@ -0,0 +1,116 @@
+'use strict';
+
+var _       = require('lodash');
+var bs      = require('browser-sync').create();
+var gulp    = require('gulp');
+var path    = require('path');
+var webpack = require("webpack");
+
+gulp.task('default', ['develop']);
+
+var webpackOptions = {
+  entry: {
+    app: "./src/app.js",
+    vendor: ["react", "react-dom", "muicss", "stellar-sdk", "axios", "d3", "fbemitter"]
+  },
+  devtool: "source-map",
+  resolve: {
+    root: [
+      path.resolve('src'),
+      path.resolve('common')
+    ],
+    modulesDirectories: ["node_modules"]
+  },
+  module: {
+    loaders: [
+      {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: {presets: ['es2015', 'react']}},
+      {test: /\.json$/, loader: 'json'},
+      {test: /\.html$/, loader: 'file?name=[name].html'},
+    ]
+  },
+  plugins: [
+    new webpack.IgnorePlugin(/ed25519/)
+  ]
+};
+
+gulp.task('develop', function(done) {
+  var options = merge(webpackOptions, {
+    output: {
+      filename: "[name].js",
+      path: './.tmp/admin'
+    },
+    plugins: [
+      new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js")
+    ]
+  });
+
+  var watchOptions = {
+    aggregateTimeout: 300
+  };
+
+  var bsInitialized = false;
+
+  var compiler = webpack(options);
+  compiler.purgeInputFileSystem();
+  compiler.watch(watchOptions, function(error, stats) {
+    if (!bsInitialized) {
+      gulp.watch(".tmp/**/*").on("change", bs.reload);
+      bs.init({
+        port: 3000,
+        online: false,
+        notify: false,
+        server: "./.tmp",
+        startPath: '/admin/index.html',
+        socket: {
+          // Golang httputil.ReverseProxy removes trailing slash from request before passing
+          // it to destination folder. This made the socket.io used by browser-sync fail.
+          // Make sure socket.io client connects to the destination server (not use proxy).
+          domain: 'localhost:3000'
+        }
+      });
+      bsInitialized = true;
+    }
+    console.log(stats.toString({
+      hash: false,
+      version: false,
+      timings: true,
+      chunks: false,
+      colors: true
+    }));
+  });
+});
+
+gulp.task('build', function(done) {
+  var options = merge(webpackOptions, {
+    bail: true,
+    output: {
+      // TODO chunkhash
+      filename: "[name].js",//"[name]-[chunkhash].js",
+      path: './dist'
+    },
+    plugins: [
+      new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js"),
+      new webpack.optimize.DedupePlugin(),
+      new webpack.optimize.OccurenceOrderPlugin(),
+      new webpack.DefinePlugin({
+        'process.env': {
+          NODE_ENV: JSON.stringify('production'),
+        }
+      }),
+      new webpack.optimize.UglifyJsPlugin()
+    ]
+  });
+
+  var compiler = webpack(options);
+  compiler.purgeInputFileSystem();
+  compiler.run(done);
+});
+
+
+function merge(object1, object2) {
+  return _.mergeWith(object1, object2, function(a, b) {
+    if (_.isArray(a)) {
+      return a.concat(b);
+    }
+  });
+}

gui/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "bridge-server-admin",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "author": "Stellar.org",
+  "dependencies": {
+    "axios": "^0.15.3",
+    "babel-core": "^6.23.0",
+    "babel-loader": "^6.3.2",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-react": "^6.23.0",
+    "babel-register": "^6.24.0",
+    "bignumber.js": "^3.0.1",
+    "browser-sync": "^2.18.2",
+    "fbemitter": "^2.1.1",
+    "file-loader": "^0.9.0",
+    "gulp": "^3.9.1",
+    "lodash": "^4.17.2",
+    "moment": "^2.17.1",
+    "muicss": "^0.9.24",
+    "react": "^15.4.1",
+    "react-d3-components": "^0.6.5",
+    "react-dom": "^15.4.1",
+    "react-router-dom": "^4.2.2",
+    "stellar-sdk": "^0.6.2",
+    "webpack": "^1.13.3"
+  }
+}

gui/src/app.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App.js';
+
+require('./index.html');
+
+ReactDOM.render(
+  <App></App>,
+  document.getElementById('app')
+);

gui/src/components/App.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {HashRouter as Router, Route, Link} from 'react-router-dom';
+import AppBar from './AppBar';
+import Navigation from './Navigation';
+import ReceivedTransactions from './ReceivedTransactions';
+import ReceivedTransactionDetails from './ReceivedTransactionDetails';
+import SentTransactions from './SentTransactions';
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <Router>
+        <div>
+          <AppBar />
+          <main>
+            <Route component={Navigation} />
+
+            <Route exact path="/(sent)?" component={SentTransactions} />
+            <Route exact path="/received" component={ReceivedTransactions} />
+            <Route path="/received/:id" component={ReceivedTransactionDetails} />
+          </main>
+        </div>
+      </Router>
+    );
+  }
+}

gui/src/components/AppBar.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default class AppBar extends React.Component {
+  render() {
+    return <div>
+      <div className="mui-appbar">
+        <div className="inner">
+          <div className="mui--text-headline">Bridge Server</div>
+        </div>
+      </div>
+    </div>
+  }
+}

gui/src/components/Navigation.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import Tabs from 'muicss/lib/react/tabs';
+import Tab from 'muicss/lib/react/tab';
+
+export default class Navigation extends React.Component {
+  constructor({history, location}) {
+    super();
+    this.state = {};
+    this.history = history;
+    this.state.selected = this.getActive(location.pathname);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const locationChanged = nextProps.location !== this.props.location;
+
+    if (locationChanged) {
+      let selected = this.getActive(nextProps.location.pathname);
+      this.setState({selected});
+    }
+  }
+
+  onChange(i, id) {
+    this.history.push("/"+id);
+  }
+
+  getActive(pathname) {
+    let state = {};
+    if (pathname.indexOf('/sent') == 0) {
+      return 0;
+    } else if (pathname.indexOf('/received') == 0) {
+      return 1;
+    } else {
+      return 0;
+    }
+  }
+
+  render() {
+    return <Tabs onChange={this.onChange.bind(this)} defaultSelectedIndex={this.state.selected}>
+      <Tab value="sent" label="Sent Transactions"></Tab>
+      <Tab value="received" label="Received Transactions"></Tab>
+    </Tabs>
+  }
+}