Updating gulp, webpack, and Dockerfile

.bowerrc

@@ -1,4 +1,8 @@
 {
-  "registry": "https://registry.bower.io",
-  "directory": "res/bower_components"
+  "registry": "http://registry.bower.io",
+  "directory": "/tmp/build/bower_modules",
+  "allow_root": true,
+  "off_proxy": "http://127.0.0.1:8080",
+  "off_https-proxy": "http://127.0.0.1:8080",
+  "strict-ssl": false
 }

Dockerfile

@@ -38,13 +38,15 @@ FROM with_packages as frontend
 # Install bower dependencies
 WORKDIR /tmp/build
 COPY ./bower.json /tmp/build/
-RUN echo '{ "allow_root": true }' > /root/.bowerrc && \
+COPY ./.bowerrc /tmp/build/
+RUN mkdir bower_modules && \
     ./node_modules/.bin/bower install
 
 # Copy the app ( res ) in
 COPY ./bower.json /tmp/build/
 COPY ./gulpfile.js /tmp/build/
 COPY ./webpack.config.js /tmp/build/
+COPY ./.babelrc.json /tmp/build/
 COPY ./res /tmp/build/res
 COPY ./lib/util /tmp/build/lib/util
 

bower.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "dependencies": {
     "lodash": "~3.10.1",
-    "oboe": "~2.1.5",
+    "oboe": "~2.1.2",
     "ng-table": "~1.0.0-beta.9",
     "ng-file-upload": "~2.0.5",
     "underscore.string": "~3.2.3",
@@ -19,16 +19,21 @@
     "angular-sanitize": "~1.8.0",
     "angular-animate": "~1.8.0",
     "angular-touch": "~1.8.0",
-    "angular-ladda": "~0.3.1",
+    "angular-ladda": "~0.4.3",
+    "spin.js": "~4.1.0",
     "angular-xeditable": "~0.1.9",
     "angular-elastic": "~2.5.1",
     "angular-ui-bootstrap": "~1.1.1",
     "angular-gettext": "~2.4.1",
     "angular-ui-ace": "~0.2.3",
     "angular-dialog-service": "~5.2.11",
     "angular-growl-v2": "JanStevens/angular-growl-2#~0.7.9",
-    "angular-borderlayout": "git://github.com/filearts/angular-borderlayout.git#7c9716aebd9260763f798561ca49d6fbfd4a5c67",
-    "mousetrap": "~1.5.2"
+    "angular-borderlayout2": "~0.9.1",
+    "angular-hotkeys": "https://github.com/nanoscopic/angular-hotkeys.git#2.0.27",
+    "mousetrap": "https://github.com/nanoscopic/mousetrap.git#1.7.17",
+
+    "epoch": "~0.8.4",
+    "ng-epoch": "~2.0.1"
   },
   "private": true,
   "devDependencies": {

gulpfile.js

@@ -35,7 +35,7 @@ gulp.task('eslint', function() {
   return gulp.src([
       'lib/**/*.js'
     , 'res/**/*.js'
-    , '!res/bower_components/**'
+    , '!cache/bower/**'
     , '*.js'
   ])
     // eslint() attaches the lint output to the "eslint" property
@@ -208,7 +208,7 @@ gulp.task('webpack:others', function(callback) {
 gulp.task('pug', function() {
   return gulp.src([
       './res/**/*.pug'
-    , '!./res/bower_components/**'
+    , '!./bower_modules/**'
     ])
     .pipe(pug({
       locals: {
@@ -226,7 +226,7 @@ gulp.task('translate:extract', gulp.series( 'pug', function(done) {
   return gulp.src([
       './tmp/html/**/*.html'
     , './res/**/*.js'
-    , '!./res/bower_components/**'
+    , '!./bower_modules/**'
     , '!./res/build/**'
     ])
     .pipe(gettext.extract('stf.pot'))

package.json

@@ -29,7 +29,7 @@
     "duplicate-arguments-array": false
   },
   "scripts": {
-    "test": "gulp test"    
+    "test": "gulp test"
   },
   "dependencies": {
     "@slack/client": "^3.5.4",
@@ -56,7 +56,7 @@
     "hipchatter": "^0.3.1",
     "http-proxy": "^1.11.2",
     "in-publish": "^2.0.0",
-    "@devicefarmer/jpeg-turbo": "^0.4.0",
+    "@julusian/jpeg-turbo": "^0.5.4",
     "jws": "^3.1.0",
     "ldapjs": "^1.0.0",
     "lodash": "^4.14.2",
@@ -141,7 +141,7 @@
     "less": "^2.4.0",
     "memory-fs": "^0.3.0",
     "node-libs-browser": "^1.0.0",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.14.1",
     "phantomjs-prebuilt": "^2.1.11",
     "protractor": "^5.4.1",
     "protractor-html-reporter-2": "1.0.4",
@@ -157,13 +157,21 @@
     "webpack-dev-server": "^3.11.0",
     "file-loader": "^6.0.0",
     "less-loader": "5.x.x",
-    "sass-loader": "8.x.x",
+    "sass-loader": "^9.0.2",
     "url-loader": "^4.1.0",
-
+    "typescript": "^3.9.7",
+    "ts-loader": "^8.0.1",
     "ng-annotate-patched": "1.12.0",
     "ng-annotate": "1.2.2",
     "ng-annotate-loader": "0.7.0",
-    "angular-hotkeys": "^1.7.0"
+    "@babel/cli": "7.10.5",
+    "@babel/core": "7.10.5",
+    "@babel/node": "7.10.5",
+    "@babel/preset-env": "7.10.4",
+    "@babel/register": "7.10.5",
+    "@babel/plugin-proposal-class-properties": "7.10.4",
+    "@babel/plugin-proposal-private-methods": "7.10.4",
+    "babel-loader": "8.1.0"
   },
   "engines": {
     "node": ">= 6.9"

res/app/app.js

@@ -1,19 +1,18 @@
-/**
-* Copyright © 2019 contains code contributed by Orange SA, authors: Denis Barbaron - Licensed under the Apache license 2.0
-**/
+// Copyright © 2019 contains code contributed by Orange SA, authors: Denis Barbaron - Licensed under the Apache license 2.0
 
 import * as d3 from "d3";
 
 require.ensure([], function(require) {
   require('angular')
   require('angular-route')
   require('angular-touch')
-
+  require('angular-hotkeys')
+
   angular.module('app', [
     'ngRoute',
     'ngTouch',
     require('gettext').name,
-    require('angular-hotkeys').name,
+    'cfp.hotkeys',
     require('./layout').name,
     require('./device-list').name,
     require('./group-list').name,

res/app/control-panes/cpu/index.js

@@ -1,11 +1,10 @@
 require('./cpu.css')
 
-module.exports = angular.module('stf.cpu', [
-
-])
-  .run(['$templateCache', function($templateCache) {
+module.exports = angular.module('stf.cpu', [])
+  .run( function($templateCache) {
+    "ngInject";
     $templateCache.put('control-panes/cpu/cpu.pug',
       require('./cpu.pug')
     )
-  }])
+  })
   .controller('CpuCtrl', require('./cpu-controller'))

res/app/control-panes/performance/cpu/index.js

@@ -1,7 +1,7 @@
 require('./cpu.css')
 
-module.exports = angular.module('stf.cpu', [
-  require('epoch-charting').name
+module.exports = angular.module('stf.perf.cpu', [
+  require('epoch').name
 ])
   .run(['$templateCache', function($templateCache) {
     $templateCache.put('control-panes/performance/cpu/cpu.pug',

res/app/layout/index.js

@@ -4,16 +4,37 @@ require('./cursor.css')
 require('./small.css')
 require('./stf-styles.css')
 
-module.exports = angular.module('layout', [
-  require('stf/landscape').name,
-  require('stf/basic-mode').name,
-  require('ui-bootstrap').name,
-  require('angular-borderlayout').name,
-  require('stf/common-ui').name,
-  require('stf/socket/socket-state').name,
-  require('stf/common-ui/modals/socket-disconnected').name,
-  require('stf/browser-info').name
-])
+var modFiles = [
+  'stf/landscape',
+  'stf/basic-mode',
+  'ui-bootstrap',
+  'angular-borderlayout2',
+  'stf/common-ui',
+  'stf/socket/socket-state',
+  'stf/common-ui/modals/socket-disconnected',
+  'stf/browser-info'
+];
+var mods = [
+  require('stf/landscape'),
+  require('stf/basic-mode'),
+  require('ui-bootstrap'),
+  require('angular-borderlayout2'),
+  require('stf/common-ui'),
+  require('stf/socket/socket-state'),
+  require('stf/common-ui/modals/socket-disconnected'),
+  require('stf/browser-info')
+];
+
+var modnames = [];
+for( var i=0;i<modFiles.length;i++ ) {
+  var modFile = modFiles[ i ];
+  var mod = mods[ i ];
+  if( !mod ) { console.log("Could not load mod " + modFile); continue; }
+  if( !mod.name ) { console.log("Module " + modFile + " does not have a module name"); continue; }
+  modnames.push( mod.name );
+}  
+
+module.exports = angular.module('layout', modnames)
   .config(['$uibTooltipProvider', function($uibTooltipProvider) {
     $uibTooltipProvider.options({
       appendToBody: true,

res/web_modules/angular-borderlayout/index.js

@@ -1,5 +1,5 @@
-require('angular-borderlayout/src/borderLayout.js')
-require('angular-borderlayout/src/borderLayout.css')
+require('angular-borderlayout2/dist/borderLayout.js')
+require('angular-borderlayout2/dist/borderLayout.css')
 require('./style.css')
 
 module.exports = {

webpack.config.js

@@ -8,6 +8,16 @@ var pathutil = require('./lib/util/pathutil')
 var path = require('path')
 var log = require('./lib/util/logger').createLogger('webpack:config')
 
+require("@babel/core").transform("code", {
+  "presets": [
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+});
+require("@babel/register");
+
 module.exports = {
   mode: 'development',
   context: __dirname,
@@ -31,12 +41,12 @@ module.exports = {
   resolve: {
     modules: [
       "node_modules", 
-      //path.resolve(__dirname, "bower_components"),  // works
-      '/tmp/build/bower_components',
-      //path.resolve(__dirname, "res/web_modules" ), // works
-      '/tmp/build/res/web_modules',
-      //path.resolve(__dirname, "res/app/components" )// works
-      '/tmp/build/res/app/components'
+      //path.resolve(__dirname, "bower_modules"),  // works
+      '/tmp/build/bower_modules',
+      path.join(__dirname, "res/web_modules" ), // works
+      //'/tmp/build/res/web_modules',
+      path.resolve(__dirname, "res/app/components" )// works
+      //'/tmp/build/res/app/components'
     ],
     /*root: [
       pathutil.resource('app/components')
@@ -52,26 +62,38 @@ module.exports = {
       'socket.io': 'socket.io-client',
       stats: 'stats.js/src/Stats.js',
       'underscore.string': 'underscore.string/index',
-      'ngRoute': 'angular-route'
+      'ngRoute': 'angular-route',
+      'spin.js': '/tmp/build/bower_modules/spin.js/spin.ts',
+      'ng-epoch': '/tmp/build/bower_modules/ng-epoch/ng-epoch.js',
+      'd3': '/tmp/build/bower_modules/d3/d3.min.js',
+      'oboe': '/tmp/build/bower_modules/oboe/dist/oboe-browser.js'
     }
   },
   module: {
     rules: [
-      {test: /\.css$/, loader: 'css-loader'},
-      {test: /\.scss$/, loader: 'css-loader!sass-loader'}
-      , {test: /\.less$/, loader: 'css-loader!less-loader'}
+      {test: /\.css$/, loader: 'style-loader!css-loader'},
+      {
+        test: /\.(sass|scss)$/,
+        use: ['style-loader','css-loader','sass-loader']
+      },
+      {test: /\.less$/, loader: 'style-loader!css-loader!less-loader'},
       //, {test: /\.json$/, loader: 'json-loader'}
-      , {test: /\.jpg$/, loader: 'url-loader', options: { limit: 1000, mimetype: 'image/jpeg' } }
-      , {test: /\.png$/, loader: 'url-loader', options: { limit: 1000, mimetype: 'image/png' } }
-      , {test: /\.gif$/, loader: 'url-loader', options: { limit: 1000, mimetype: 'image/gif' } }
-      , {test: /\.svg/, loader: 'url-loader', options: { limit: 1, mimetype: 'image/svg+xml' } }
-      , {test: /\.woff/, loader: 'url-loader', options: { limit: 1, mimetype: 'application/font-woff' } }
-      , {test: /\.otf/, loader: 'url-loader', options: { limit: 1, mimetype: 'application/font-woff' } }
-      , {test: /\.ttf/, loader: 'url-loader', options: { limit: 1, mimetype: 'application/font-woff' } }
-      , {test: /\.eot/, loader: 'url-loader', options: { limit: 1, mimetype: 'vnd.ms-fontobject' } }
-      , {test: /\.pug$/, loader: 'template-html-loader?engine=jade'}
+      {test: /\.jpg$/, loader: 'url-loader', options: { limit: 1000, mimetype: 'image/jpeg' } },
+      {test: /\.png$/, loader: 'url-loader', options: { limit: 1000, mimetype: 'image/png' } },
+      {test: /\.gif$/, loader: 'url-loader', options: { limit: 1000, mimetype: 'image/gif' } },
+      {
+        test: /\.(woff|woff2|otf|ttf|svg|eot)$/,
+        use: {
+          loader: 'url-loader',
+          options: { 
+            limit: 1,
+            name: "fonts/[name].[ext]",
+            esModule: false
+          }
+        }
+      },
+      {test: /\.pug$/, loader: 'template-html-loader?engine=jade'}
       , {test: /\.html$/, loader: 'html-loader'}
-      , {test: /mousetrap\.js$/, loader: 'exports-loader?Mousetrap'}
       , {test: /\/angular\.js$/, loader: 'exports-loader?angular'}
       , {test: /angular-cookies\.js$/, loader: 'imports-loader?angular=angular'}
       , {test: /angular-route\.js$/, loader: 'imports-loader?angular=angular'}
@@ -80,7 +102,6 @@ module.exports = {
       , {test: /angular-growl\.js$/, loader: 'imports-loader?angular=angular'}
       , {test: /angular-gettext\.js$/, loader: 'imports-loader?angular=angular'}
       , {test: /dialogs\.js$/, loader: 'script-loader'}
-      , {test: /hotkeys\.js$/, loader: 'imports-loader?Mousetrap=Mousetrap'}
       , {test: /epoch\.js$/, loader: 'imports-loader?d3=d3'}
       //, {test: /\.ts$/, loader: 'ng-annotate-loader?ngAnnotate=ng-annotate-patched!ts-loader`
       , {
@@ -95,7 +116,29 @@ module.exports = {
         },
         exclude: /node_modules/
       }
-
+      , {
+        test: /\.ts$/,
+        use: {
+          loader: 'ts-loader'
+        },
+        exclude: /node_modules/
+      }
+      , {
+        test: /\.jsx$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            "presets": [
+              "@babel/preset-env"
+            ],
+            "plugins": [
+              "@babel/plugin-proposal-class-properties",
+              "@babel/plugin-proposal-private-methods"
+            ]
+          }
+        },
+        exclude: /node_modules/
+      }        
     ],
     // TODO: enable when its sane
     // preLoaders: [
@@ -106,7 +149,7 @@ module.exports = {
     //  }
     // ],
     noParse: [
-      pathutil.resource('bower_components')
+      pathutil.resource('bower_modules')
     ]
   },
   plugins: [