Initial commit for the new genie3 UI

.gitignore

@@ -97,7 +97,11 @@ genie-client/src/main/python/build
 genie-client/src/main/python/nflx_genie_client.egg-info
 genie-client/src/main/python/MANIFEST
 genie-common/src/generated
+genie-web/src/main/resources/static/build/
+node_modules
+node-v4.4.0-darwin-x64
 
 # Credential Files #
 ######################################
 *credentials.properties
+

genie-web/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["es2015", "react", "stage-0"]
+}

genie-web/build.gradle

@@ -1,3 +1,7 @@
+plugins {
+    id "com.moowork.node" version "0.12"
+}
+
 dependencies {
     /*******************************
      * Compile Dependencies
@@ -33,17 +37,6 @@ dependencies {
     compile("io.springfox:springfox-swagger2:${springfox_version}")
     compile("io.springfox:springfox-swagger-ui:${springfox_version}")
 
-    // Web Jars
-    compile("org.webjars:bootstrap:${bootstrap_version}")
-    compile("org.webjars:datatables:${datatables_version}")
-    compile("org.webjars:hal-browser")
-    compile("org.webjars:jquery:${jquery_version}")
-    compile("org.webjars:knockout:${knockout_version}")
-    compile("org.webjars:lodash:${lodash_version}")
-    compile("org.webjars:momentjs:${momentjs_version}")
-    compile("org.webjars:requirejs:${requirejs_version}")
-    compile("org.webjars:requirejs-text:${requirejs_text_version}")
-
     /*******************************
      * Provided Dependencies
      *******************************/
@@ -77,3 +70,24 @@ jar {
         attributes("Implementation-Version": version)
     }
 }
+
+node {
+    version = '4.4.0'
+    npmVersion = '3.8.6'
+    download = true
+}
+
+task bundle(type: NpmTask) {
+    args = ['run', 'bundle']
+}
+
+bundle.dependsOn(npm_install)
+
+jar {
+    dependsOn bundle
+
+    from("${project.projectDir}/src/main/resources/static/build") {
+        into 'static'
+    }
+}
+

genie-web/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "genie-web",
+  "version": "0.1.0",
+  "description": "UI for Genie3 [A federated Job Execution Engine]",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "bundle": "webpack -p --config ./webpack.config.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Netflix/genie.git"
+  },
+  "author": "Netflix",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Netflix/genie"
+  },
+  "dependencies": {
+    "jquery": "^2.2.3",
+    "moment": "^2.13.0",
+    "react": "^15.0.1",
+    "react-cookie": "^0.4.5",
+    "react-dom": "^15.0.1",
+    "react-router": "^2.3.0",
+    "react-select": "^1.0.0-beta13"
+  },
+  "devDependencies": {
+    "babel-eslint": "^6.0.4",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-runtime": "^6.8.0",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "css-loader": "^0.23.1",
+    "esformatter-jsx": "^5.0.2",
+    "eslint": "^2.9.0",
+    "eslint-config-airbnb": "^9.0.1",
+    "eslint-plugin-import": "^1.8.0",
+    "eslint-plugin-jsx-a11y": "^1.2.0",
+    "eslint-plugin-react": "^5.1.1",
+    "file-loader": "^0.8.5",
+    "install": "^0.6.1",
+    "npm": "^3.8.7",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.0",
+    "webpack-dev-server": "^1.14.1"
+  }
+}

genie-web/src/main/java/com/netflix/genie/web/controllers/UIController.java

@@ -40,7 +40,8 @@ public class UIController {
             "/applications/**",
             "/clusters/**",
             "/commands/**",
-            "/jobs/**"
+            "/jobs/**",
+            "/genie-jobs/**"
         }
     )
     public String index() {

genie-web/src/main/resources/static/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {render} from 'react-dom';
+import { Router, Route, browserHistory, Redirect } from 'react-router';
+
+import App from './scripts/App';
+import Job from './scripts/Job';
+import Cluster from './scripts/Cluster';
+import Command from './scripts/Command';
+import Application from './scripts/Application';
+import GenieJobDirectory from './scripts/GenieJobDirectory';
+
+import './styles/font-awesome.min.css';
+import './styles/bootstrap.min.css';
+import './styles/genie.css';
+
+render((
+  <Router history={browserHistory}>
+    <Route path="/" component={App}>
+    	<Route path="/jobs" component={Job}></Route>
+    	<Route path="/clusters" component={Cluster}></Route>
+    	<Route path="/commands" component={Command}></Route>
+    	<Route path="/applications" component={Application}></Route>
+    </Route>
+    <Route path="/genie-jobs/*" component={GenieJobDirectory}></Route>
+  </Router>
+), document.getElementById('root'));

genie-web/src/main/resources/static/scripts/App.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { render } from 'react-dom';
+import $ from 'jquery';
+
+import cookie from 'react-cookie';
+
+import SiteHeader from './components/SiteHeader';
+import SiteFooter from './components/SiteFooter';
+
+export default class App extends React.Component {
+
+  static defaultProps = {
+    headers : [
+      { url       : '/jobs',
+        name      : 'GENIE',
+        className : 'supress',
+      },
+      { url       : '/jobs',
+        name      : 'Jobs',
+        className : 'active',
+      },
+      { url       : '/clusters',
+        name      : 'Clusters',
+        className : 'active',
+      },
+      { url       : '/commands',
+        name      : 'Commands',
+        className : 'active',
+      },
+      { url       : '/applications',
+        name      : 'Applications',
+        className : 'active',
+      },
+    ]
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
+      version: '',
+      userId: cookie.load('genie.user'),
+    };
+  }
+  componentDidMount() {
+    this.loadData();
+  }
+
+  loadData() {
+    $.ajax({
+      global: false,
+      type: 'GET',
+      headers: {
+          'Accept': 'application/json'
+      },
+      url: '/actuator/info'
+    }).done((data) => {
+      this.setState({version: `${data.git.commit.id}-${data.git.branch}`});
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <SiteHeader headers={this.props.headers} />
+        <div className="container">
+          {this.props.children}
+        </div>
+        <SiteFooter version={this.state.version} />
+      </div>
+    );
+  }
+}

genie-web/src/main/resources/static/scripts/Application.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+export default class Application extends React.Component {
+  render() {
+    return (<h4>Coming soon!</h4>);
+  }
+}

genie-web/src/main/resources/static/scripts/Cluster.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+export default class Cluster extends React.Component {
+  render() {
+    return (<h4>Coming soon!</h4>);
+  }
+}

genie-web/src/main/resources/static/scripts/Command.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+export default class Command extends React.Component {
+  render() {
+    return (<h4>Coming soon!</h4>);
+  }
+}