MYRIAD-296 Updated node, gradle, gulp and npm to fix latest build (#127)

build.gradle

@@ -41,7 +41,7 @@ repositories {
 
 idea {
     project {
-        languageLevel = '1.7'
+        languageLevel = '1.8'
 		ipr {
 			withXml { provider ->
 			        provider.node.component
@@ -58,8 +58,8 @@ subprojects {
     apply plugin: 'application'
     apply from: "$rootDir/gradle/quality.gradle"
 
-    sourceCompatibility = '1.7'
-    targetCompatibility = '1.7'
+    sourceCompatibility = '1.8'
+    targetCompatibility = '1.8'
 
     [compileJava, compileTestJava]*.options*.encoding = 'UTF-8'
 

gradle/wrapper/gradle-wrapper.properties

@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-2.9-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-5.5-all.zip

myriad-scheduler/build.gradle

@@ -16,9 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
- plugins {
-     id "com.moowork.gulp" version "0.11"
- }
+plugins {
+    id "com.github.node-gradle.gulp" version "1.3.0"
+}
 
 dependencies {
     compile project(':myriad-commons')
@@ -84,7 +84,7 @@ sourceSets {
 
 node {
     // Version of node to use.
-    version = '4.2.1'
+    version = '12.5.0'
 
     // Base URL for fetching node distributions (change if you have a mirror).
     distBaseUrl = 'https://nodejs.org/dist'
@@ -107,9 +107,9 @@ gulp {
     // Whether output from Gulp should be buffered - useful when running tasks in parallel
     bufferOutput = false
 
-  // makes sure on each build that gulp is installed
+    // makes sure on each build that gulp is installed
     gulp_build.dependsOn 'installGulp'
 
-  // processes your package.json before running gulp build
+    // processes your package.json before running gulp build
     gulp_build.dependsOn 'npmInstall'
 }

myriad-scheduler/src/main/resources/webapp/.babelrc

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

myriad-scheduler/src/main/resources/webapp/gulpfile.js

@@ -32,76 +32,83 @@ var uglify = require('gulp-uglify');
 var webserver = require('gulp-webserver');
 var del = require('del');
 
-gulp.task("js", ['clean'], function () {
-  browserify({
-    entries: ['./js/app.js'], // Only need initial file, browserify finds the deps
-    transform: ['babelify'],
-    debug: false,
-    fullPaths: false
-    })
-    .bundle()
-    .pipe(source('bundle.js'))
-    .pipe(rename('myriad.js'))
-    .pipe(buffer())
-    .pipe(uglify())
-    .pipe(gulp.dest("public/js/"));
+gulp.task('clean', function() {
+    return del(['./public']);
 });
 
-gulp.task("js-dev", ['clean'], function () {
-  browserify({
-    entries: ['./js/app.js'], // Only need initial file, browserify finds the deps
-    transform: ['babelify'],
-    debug: true,
-    fullPaths: true
+gulp.task('js', gulp.series('clean', function(done) {
+    browserify({
+        entries: ['./js/app.js'], // Only need initial file, browserify finds the deps
+        transform: ['babelify'],
+        debug: false,
+        fullPaths: false
     })
-    .bundle()
-    .pipe(source('bundle.js'))
-    .pipe(rename('myriad.js'))
-    .pipe(gulp.dest("public/js/"));
+        .bundle()
+        .pipe(source('bundle.js'))
+        .pipe(rename('myriad.js'))
+        .pipe(buffer())
+        .pipe(uglify())
+        .pipe(gulp.dest("public/js/"));
+    done();
+}));
+
+gulp.task('js-dev', function(done) {
+    browserify({
+        entries: ['./js/app.js'], // Only need initial file, browserify finds the deps
+        transform: ['babelify'],
+        debug: true,
+        fullPaths: true
+    })
+        .bundle()
+        .pipe(source('bundle.js'))
+        .pipe(rename('myriad.js'))
+        .pipe(gulp.dest("public/js/"));
+    done();
 });
 
 
-gulp.task('html', ['clean'], function () {
+gulp.task('html', function() {
     return gulp.src('*.html')
         .pipe( gulp.dest('public/'))
 });
 
-gulp.task('css', ['clean'], function () {
+gulp.task('css', function() {
     return gulp.src('css/*.css')
         .pipe( gulp.dest('public/css/'))
 });
 
-gulp.task('img', ['clean'], function () {
+gulp.task('img', function() {
     return gulp.src('img/**')
         .pipe( gulp.dest('public/img/'))
 });
 
-gulp.task('webserver', ['build-dev'], function() {
-  gulp.src('./public')
-    .pipe(webserver({
-      livereload: true,
-      directoryListing: false,
-      open: true,
-      port: 8888
+gulp.task('build-dev', gulp.series('js-dev', 'html', 'css', 'img'));
+
+gulp.task('webserver', gulp.series('build-dev', function(done) {
+    gulp.src('./public')
+        .pipe(webserver({
+            livereload: true,
+            directoryListing: false,
+            open: true,
+            port: 8888
+        }));
+    done();
+}));
+
+gulp.task('watch', gulp.series('build-dev', function(done) {
+    gulp.watch('index.html', gulp.series('html'));
+    gulp.watch('css/**', gulp.series('css'));
+    gulp.watch('js/**', gulp.series('js-dev'));
+    gulp.watch('img/**', gulp.series('img'));
+    done();
+}));
+
+gulp.task('dev', gulp.parallel('watch', 'webserver'));
+
+gulp.task('default', gulp.series('clean',
+    gulp.parallel('js', 'html', 'css', 'img'),
+    function(done) {
+        done();
     }));
-});
-
-gulp.task('watch', ['build-dev'], function() {
-    gulp.watch('index.html', ['html']);
-    gulp.watch('css/**', ['css']);
-    gulp.watch('js/**', ['js-dev']);
-    gulp.watch('img/**', ['img']);
-});
-
-gulp.task('clean', function() {
-  return del(['./public']);
-});
-
-gulp.task('build-dev', ['js-dev', 'html', 'css', 'img']);
-
-gulp.task('dev', ['watch', 'webserver']);
-
-gulp.task('default', ['js', 'html', 'css', 'img']);
-
-gulp.task('build', ['default']); // gradle calls gulp build by default
 
+gulp.task('build', gulp.series('default'));

myriad-scheduler/src/main/resources/webapp/js/app.js

@@ -17,32 +17,23 @@
  * under the License.
  */
 
-var React = require("react");
-var Myriad = require('./components/Myriad')
-var FlexComponent = require('./components/FlexComponent')
-var TasksComponent = require('./components/TasksComponent')
-var ConfigComponent = require('./components/ConfigComponent')
-var AboutComponent = require('./components/AboutComponent')
-var HelpComponent = require('./components/HelpComponent')
-var ShutdownFrameworkComponent = require('./components/ShutdownFrameworkComponent')
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-var Router = require('react-router')
-  , RouteHandler= Router.RouteHandler
-  , Route = Router.Route
-  , Redirect = Router.Redirect;
+import {HashRouter, Route} from 'react-router-dom';
 
-var routes = (
-  <Route name="myriad" path="/" handler={Myriad} >
-    <Route name="frameworkDown" path="frameworkDown" handler={ShutdownFrameworkComponent} />
-    <Route name="flex" path="flex" handler={FlexComponent} />
-    <Route name="tasks" path="tasks" handler={TasksComponent} />
-    <Route name="help" path="help" handler={HelpComponent} />
-    <Route name="config" path="config" handler={ConfigComponent} />
-    <Route name="about" path="/" handler={AboutComponent} />
-    <Redirect from="myriad" to="about" />
-  </Route>
-);
+import Myriad from './components/Myriad.js'
 
-Router.run(routes, function (Handler) {
-  React.render(<Handler/>, document.getElementById("myriad"));
-});
+function App() {
+    return (
+        <main>
+            <Route path='/' component={Myriad}/>
+        </main>
+    );
+}
+
+ReactDOM.render((
+    <HashRouter>
+        <App />
+    </HashRouter>
+), document.getElementById('myriad'));

myriad-scheduler/src/main/resources/webapp/js/components/AboutComponent.js

@@ -17,33 +17,31 @@
  * under the License.
  */
 
-var React = require('react');
+import React from 'react';
 
-var AboutComponent = React.createClass({
-  displayName: "AboutComponent",
+class AboutComponent extends React.Component {
+    render() {
+        return(
+            <div>
+                <h1>About</h1>
+                <p>
+                    Myriad allows Mesos and YARN to co-exist and share resources with Mesos
+                    as the resource manager for the datacenter. Sharing resources between these
+                    two resource allocation systems improves overall cluster utilization and
+                    avoids statically partitioning resources amongst two separate clusters/resource managers.
+                </p>
+                <hr/>
+                <h1>API</h1>
+                <p>
+                    Myriad can either be controlled with this user interface or the underlying REST API.
+                </p>
+                <div>
+                    <pre>{JSON.stringify(this.props.wadl, null, ' ')}</pre>
+                </div>
 
-  render: function () {
-    return(
-      <div>
-        <h1>About</h1>
-        <p>
-         Myriad allows Mesos and YARN to co-exist and share resources with Mesos
-         as the resource manager for the datacenter. Sharing resources between these
-          two resource allocation systems improves overall cluster utilization and
-          avoids statically partitioning resources amongst two separate clusters/resource managers.
-        </p>
-        <hr/>
-        <h1>API</h1>
-        <p>
-          Myriad can either be controlled with this user interface or the underlying REST API.
-        </p>
-        <div>
-          <pre>{JSON.stringify(this.props.wadl, null, ' ')}</pre>
-        </div>
+            </div>
+        )}
 
-      </div>
-   )}
+}
 
-});
-
-module.exports = AboutComponent;
+export default AboutComponent;

myriad-scheduler/src/main/resources/webapp/js/components/ConfigComponent.js

@@ -17,39 +17,38 @@
  * under the License.
  */
 
-var React = require('react');
-var ProfileComponent = require('../components/ProfileComponent');
-var RawJSONComponent = require('../components/RawJSONComponent');
+import React from 'react';
 
-var ConfigComponent = React.createClass({
-  displayName: "ConfigComponent",
+import ProfileComponent from "./ProfileComponent";
+import RawJSONComponent from "./RawJSONComponent";
 
-  render: function () {
+class ConfigComponent extends React.Component {
+
+  render() {
 
     // get all the profile names from the config
     var profileNames = [];
-    for(var key in this.props.config.profiles) {
+    for (var key in this.props.config.profiles) {
       if (this.props.config.profiles.hasOwnProperty(key)) {
         profileNames.push(key);
       }
     }
 
     var html = [];
-    for( var ii=0; ii<profileNames.length; ii++) {
+    for (var ii=0; ii<profileNames.length; ii++) {
       var name = profileNames[ii];
-      html.push( <ProfileComponent key={name} name={name} profile={this.props.config.profiles[name]} /> );
-      html.push( <hr key={'hr_'+name} />);
+      html.push(<ProfileComponent key={name} name={name} profile={this.props.config.profiles[name]}/>);
+      html.push(<hr key={'hr_'+name} />);
     }
 
-
     return(
-      <div>
-        {html}
-        <h3>Raw Json</h3>
-        <RawJSONComponent json={this.props.config} />
-      </div>
-   )}
+        <div>
+          {html}
+          <h3>Raw Json</h3>
+          <RawJSONComponent json={this.props.config}/>
+        </div>
+    )}
 
-});
+}
 
-module.exports = ConfigComponent;
+export default ConfigComponent;