Merge 7e853c9 into 998f7bd

Netflix · Dec 23, 2016 · 41bbb40 · 41bbb40
2 parents 998f7bd + 7e853c9
commit 41bbb40
Show file tree

Hide file tree

Showing 18 changed files with 263 additions and 84 deletions.
diff --git a/genie-web/build.gradle b/genie-web/build.gradle
@@ -144,7 +144,7 @@ clean {
 task bundle(type: NpmTask) {
     inputs.dir static_project_dir
     outputs.dir static_build_dir
-    args = ["run", "bundle"]
+    args = ["run", "build"]
 }
 
 bundle.dependsOn(npm_install)

diff --git a/genie-web/package.json b/genie-web/package.json
@@ -1,11 +1,14 @@
 {
   "name": "genie-web",
-  "version": "3.0.0",
+  "version": "3.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"
+    "server": "node server.js",
+    "build:watch": "webpack -d --watch",
+    "build": "webpack -p --config ./webpack.config.js",
+    "lint": "./node_modules/.bin/eslint ./src/main/resources/static/scripts/; exit 0"
   },
   "repository": {
     "type": "git",
@@ -18,8 +21,12 @@
   },
   "dependencies": {
     "filesize": "^3.3.0",
+    "install": "^0.6.2",
     "jquery": "^2.2.3",
     "moment": "^2.13.0",
+    "npm": "^3.10.10",
+    "rc-calendar": "^7.5.2",
+    "rc-time-picker": "^2.2.1",
     "react": "^15.1.0",
     "react-cookie": "^0.4.5",
     "react-copy-to-clipboard": "^4.1.0",

diff --git a/genie-web/server.js b/genie-web/server.js
@@ -0,0 +1,19 @@
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var config = require('./webpack.config');
+
+config.entry.app.unshift("webpack-dev-server/client?http://localhost:3000/");
+
+new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  hot: false,
+  historyApiFallback: true,
+  proxy: {
+    "*": "http://localhost:8080"
+  }
+}).listen(3000, 'localhost', function (err, result) {
+  if (err) {
+    console.log(err);
+  }
+  console.log('Listening at localhost:3000');
+});
diff --git a/genie-web/src/main/resources/static/images/favicon.ico b/genie-web/src/main/resources/static/images/favicon.ico
diff --git a/genie-web/src/main/resources/static/images/nficon2014.4.ico b/genie-web/src/main/resources/static/images/nficon2014.4.ico
diff --git a/genie-web/src/main/resources/static/scripts/Application.js b/genie-web/src/main/resources/static/scripts/Application.js
@@ -46,6 +46,12 @@ export default class Application extends Page {
             label: field,
           }
         )),
+      }, {
+        label : 'Order',
+        name  : 'sortOrder',
+        value : 'desc',
+        type  : 'sortOption',
+        optionValues : ['desc', 'asc'],
       },
     ];
   }

diff --git a/genie-web/src/main/resources/static/scripts/Cluster.js b/genie-web/src/main/resources/static/scripts/Cluster.js
@@ -41,6 +41,12 @@ export default class Cluster extends Page {
             label: field,
           }
         )),
+      }, {
+        label : 'Order',
+        name  : 'sortOrder',
+        value : 'desc',
+        type  : 'sortOption',
+        optionValues : ['desc', 'asc'],
       },
     ];
   }

diff --git a/genie-web/src/main/resources/static/scripts/Command.js b/genie-web/src/main/resources/static/scripts/Command.js
@@ -46,6 +46,12 @@ export default class Command extends Page {
             label: field,
           }
         )),
+      }, {
+        label : 'Order',
+        name  : 'sortOrder',
+        value : 'desc',
+        type  : 'sortOption',
+        optionValues : ['desc', 'asc'],
       },
     ];
   }

diff --git a/genie-web/src/main/resources/static/scripts/Job.js b/genie-web/src/main/resources/static/scripts/Job.js
@@ -1,3 +1,4 @@
+import moment from 'moment';
 import Page from './Page';
 import TableRow from './components/JobTableRow';
 import JobDetails from './components/JobDetails';
@@ -41,6 +42,22 @@ export default class Job extends Page {
           }
         )),
       },
+      {
+        label : 'Start Range',
+        name  : 'startTime',
+        value : [],
+        type  : 'timeRange',
+        queryMapping: ['minStarted', 'maxStarted'],
+        mapper: (x) => moment(parseInt(x, 10)).utc(),
+      },
+      {
+        label : 'Finished Range',
+        name  : 'finishedTime',
+        value : [],
+        type  : 'timeRange',
+        queryMapping: ['minFinished', 'maxFinished'],
+        mapper: (x) => moment(parseInt(x, 10)).utc(),
+      },
       {
         label : 'Size',
         name  : 'size',
@@ -59,6 +76,12 @@ export default class Job extends Page {
               label: field,
             }
         )),
+      }, {
+        label : 'Order',
+        name  : 'sortOrder',
+        value : 'desc',
+        type  : 'sortOption',
+        optionValues : ['desc', 'asc'],
       },
     ];
   }

diff --git a/genie-web/src/main/resources/static/scripts/Page.js b/genie-web/src/main/resources/static/scripts/Page.js
@@ -63,7 +63,7 @@ export default class Page extends React.Component {
       query = { size: 25 };
     }
     const { rowId = null, showSearchForm = 'true' } = query;
-    this.setState({query, data: []}); //Loading state
+    this.setState({ query, data: [] }); // Loading state
 
     fetch(this.url, query)
     .done(data => {
@@ -131,7 +131,7 @@ export default class Page extends React.Component {
         </div> :
         this.state.noSearchResult ?
           <NoSearchResult /> :
-          <Loading />; //Default to loading...
+          <Loading />; // Default to loading...
     }
 
     return (

diff --git a/genie-web/src/main/resources/static/scripts/components/ApplicationDetails.js b/genie-web/src/main/resources/static/scripts/components/ApplicationDetails.js
@@ -17,6 +17,10 @@ export default class ApplicationDetails extends React.Component {
       application: {
         configs      : [],
         dependencies : [],
+        _links: {
+          self         : '',
+          commands     : '',
+        },
       },
       commands: [],
     };
@@ -100,6 +104,15 @@ export default class ApplicationDetails extends React.Component {
                     }
                   </td>
                 </tr>
+                <tr>
+                  <td className="col-xs-2 align-right">Links:</td>
+                  <td>
+                    <ul>
+                      <li><a href={this.state.application._links.self.href}>Json</a></li>
+                      <li><a href={this.state.application._links.commands.href}>Commands</a></li>
+                    </ul>
+                  </td>
+                </tr>
               </tbody>
             </table>
           </div>

diff --git a/genie-web/src/main/resources/static/scripts/components/ClusterDetails.js b/genie-web/src/main/resources/static/scripts/components/ClusterDetails.js
@@ -17,6 +17,10 @@ export default class ClusterDetails extends React.Component {
       cluster: {
         id: '',
         configs: [],
+        _links: {
+          self: '',
+          commands: '',
+        },
       },
       commands: [],
     };
@@ -86,6 +90,15 @@ export default class ClusterDetails extends React.Component {
                     }
                   </td>
                 </tr>
+                <tr>
+                  <td className="col-xs-2 align-right">Links:</td>
+                  <td>
+                    <ul>
+                      <li><a href={this.state.cluster._links.self.href}>Json</a></li>
+                      <li><a href={this.state.cluster._links.commands.href}>Commands</a></li>
+                    </ul>
+                  </td>
+                </tr>
               </tbody>
             </table>
           </div>

diff --git a/genie-web/src/main/resources/static/scripts/components/CommandDetails.js b/genie-web/src/main/resources/static/scripts/components/CommandDetails.js
@@ -16,6 +16,11 @@ export default class CommandDetails extends React.Component {
     this.state = {
       command: {
         configs: [],
+        _links: {
+          self         : '',
+          clusters     : '',
+          applications : '',
+        },
       },
       clusters     : [],
       applications : [],
@@ -51,7 +56,7 @@ export default class CommandDetails extends React.Component {
       <tr>
         <td colSpan="12">
           <i className="fa fa-sort-desc" aria-hidden="true"></i>
-          <div className="job-detail-row">
+          <div className="commands-detail-row">
             <table className="table job-detail-table">
               <tbody>
                 <tr>
@@ -106,6 +111,16 @@ export default class CommandDetails extends React.Component {
                     }
                   </td>
                 </tr>
+                <tr>
+                  <td className="col-xs-2 align-right">Links:</td>
+                  <td>
+                    <ul>
+                      <li><a href={this.state.command._links.self.href}>Json</a></li>
+                      <li><a href={this.state.command._links.applications.href}>Applications</a></li>
+                      <li><a href={this.state.command._links.clusters.href}>Clusters </a></li>
+                    </ul>
+                  </td>
+                </tr>
               </tbody>
             </table>
           </div>

diff --git a/genie-web/src/main/resources/static/scripts/components/InfoTable.js b/genie-web/src/main/resources/static/scripts/components/InfoTable.js
@@ -2,10 +2,10 @@ import React, { PropTypes as T } from 'react';
 import { Link } from 'react-router';
 
 const InfoTable = (props) =>
-  <table className="table" style={{"width": "50%"}}>
+  <table className="table" style={{ width: '50%' }}>
     <thead>
       <tr>
-        <td class="align-right">Id</td>
+        <td>Id</td>
         <td>Name</td>
       </tr>
     </thead>

diff --git a/genie-web/src/main/resources/static/scripts/components/JobDetails.js b/genie-web/src/main/resources/static/scripts/components/JobDetails.js
@@ -20,7 +20,7 @@ export default class JobDetails extends React.Component {
       command: {
         id: '',
         version: '',
-        name: ''
+        name: '',
       },
       job: {
         id: '',
@@ -55,7 +55,7 @@ export default class JobDetails extends React.Component {
         this.setState({ command });
       })
       .fail(xhr => {
-        this.setState({error: xhr.responseJSON});
+        this.setState({ error: xhr.responseJSON });
       });
     });
   }