Fixes namespace collision & allows command-line options to be passed to UI build system (#3876)

* Fixes BrowserSync window.name namespace collision #3872

* Allow command-line arguments to be passed to development UI builds.
Add support for --ng-debug and --router-debug flags to turn on Angular's
$log service and ui-router's trace utility.
Cleans up development debug settings & defunct websocket configuration.

Resolves lingering issues raised by trying read asynchronously-loaded config file during AngularJS config phase. #3872

* shrinkwrap updated minimist

* update CONTRIBUTING.md to include UI build options

* feedback/review

Makefile

@@ -569,14 +569,15 @@ $(UI_DEPS_FLAG_FILE): awx/ui/package.json
 	touch $(UI_DEPS_FLAG_FILE)
 
 ui-docker-machine: $(UI_DEPS_FLAG_FILE)
-	$(NPM_BIN) --prefix awx/ui run build-docker-machine
+	$(NPM_BIN) --prefix awx/ui run build-docker-machine -- $(MAKEFLAGS)
 
+# Native docker. Builds UI and raises BrowserSync & filesystem polling.
 ui-docker: $(UI_DEPS_FLAG_FILE)
-	$(NPM_BIN) --prefix awx/ui run build-docker-cid
+	$(NPM_BIN) --prefix awx/ui run build-docker-cid -- $(MAKEFLAGS)
 
-# Builds UI with development/debug settings enabled. Does not raise browser-sync or filesystem polling.
+# Builds UI with development UI without raising browser-sync or filesystem polling.
 ui-devel: $(UI_DEPS_FLAG_FILE)
-	$(NPM_BIN) --prefix awx/ui run build-devel
+	$(NPM_BIN) --prefix awx/ui run build-devel -- $(MAKEFLAGS)
 
 ui-release: $(UI_RELEASE_FLAG_FILE)
 

awx/ui/Gruntfile.js

@@ -30,6 +30,7 @@ module.exports = function(grunt) {
         'clean:tmp',
         'clean:static',
         'concurrent:dev',
+        'sync',
     ]);
 
     grunt.registerTask('devNoSync', [

awx/ui/client/src/app.js

@@ -18,12 +18,17 @@ import 'select2';
 import uiRouter from 'angular-ui-router';
 // backwards compatibility for $stateChange* events
 import 'angular-ui-router/release/stateEvents';
-// ui-router debugging
+
-//import { trace } from 'angular-ui-router';
-//trace.enable();
 
 // Configuration dependencies
 global.$AnsibleConfig = null;
+// Provided via Webpack DefinePlugin in webpack.config.js
+global.$ENV = $ENV || null;
+// ui-router debugging
+if ($ENV['route-debug']){
+    let trace = require('angular-ui-router').trace;
+    trace.enable();
+}
 
 var urlPrefix;
 
@@ -203,6 +208,9 @@ var tower = angular.module('Tower', [
     .constant('AngularScheduler.useTimezone', true)
     .constant('AngularScheduler.showUTCField', true)
     .constant('$timezones.definitions.location', urlPrefix + 'lib/angular-tz-extensions/tz/data')
+    .config(['$logProvider', function($logProvider) {
+        $logProvider.debugEnabled($ENV['ng-debug'] || false);
+    }])
     .config(['$pendolyticsProvider', function($pendolyticsProvider) {
         $pendolyticsProvider.doNotAutoStart();
     }])
@@ -214,11 +222,10 @@ var tower = angular.module('Tower', [
         });
     }])
     .config(['$urlRouterProvider', '$breadcrumbProvider', 'QuerySetProvider',
-        '$urlMatcherFactoryProvider', 'stateDefinitionsProvider', '$stateProvider', '$stateExtenderProvider',
+        '$urlMatcherFactoryProvider', 'stateDefinitionsProvider', '$stateProvider',
         function($urlRouterProvider, $breadcrumbProvider, QuerySet,
-            $urlMatcherFactoryProvider, stateDefinitionsProvider, $stateProvider, $stateExtenderProvider) {
+            $urlMatcherFactoryProvider, stateDefinitionsProvider, $stateProvider) {
-            let $stateExtender = $stateExtenderProvider.$get(),
+            let stateDefinitions = stateDefinitionsProvider.$get();
-                stateDefinitions = stateDefinitionsProvider.$get();
             $urlMatcherFactoryProvider.strictMode(false);
             $breadcrumbProvider.setOptions({
                 templateUrl: urlPrefix + 'partials/breadcrumb.html'
@@ -356,20 +363,6 @@ var tower = angular.module('Tower', [
             });
         }
     ])
-
-.config(['$provide', function($provide) {
-    $provide.decorator('$log', ['$delegate', function($delegate) {
-        var _debug = $delegate.debug;
-        $delegate.debug = function(msg) {
-            // only show debug messages when debug_mode set to true in config
-            if ($AnsibleConfig && $AnsibleConfig.debug_mode) {
-                _debug(msg);
-            }
-        };
-        return $delegate;
-    }]);
-}])
-
     .run(['$stateExtender', '$q', '$compile', '$cookieStore', '$rootScope', '$log', '$stateParams',
         'CheckLicense', '$location', 'Authorization', 'LoadBasePaths', 'Timer',
         'ClearScope', 'LoadConfig', 'Store', 'pendoService', 'Prompt', 'Rest',

awx/ui/client/src/config.js

@@ -28,8 +28,6 @@
         // custom_login_info: "example notice" // have a notice displayed in the login modal for users.  note that, as a security measure, custom html is not supported and will be escaped.
         tooltip_delay: { show: 500, hide: 100 }, // Default number of milliseconds to delay displaying/hiding tooltips
 
-        debug_mode: false, // Enable console logging messages
-
         password_length: 8, // Minimum user password length.  Set to 0 to not set a limit
         password_hasLowercase: true, // require a lowercase letter in the password
         password_hasUppercase: false, // require an uppercase letter in the password
@@ -58,7 +56,5 @@
             }
         },
 
-        websocket_port: 8080
-
     };
 })();

awx/ui/grunt-tasks/browserSync.js

@@ -17,7 +17,13 @@ module.exports = {
                 ws: true
             },
             keepalive: false,
-            watchTask: true
+            watchTask: true,
+            // The browser-sync-client lib will write your current scroll position to window.name
+            // https://github.com/BrowserSync/browser-sync-client/blob/a2718faa91e11553feca7a3962313bf1ec6ba3e5/dist/index.js#L500
+            // This strategy is enabled in the core browser-sync lib, and not externally documented as an option. Yay!
+            // https://github.com/BrowserSync/browser-sync/blob/a522aaf12b6167d5591ed285eb3086f43a4d9ac2/lib/default-config.js#L312
+            scrollRestoreTechnique: null,
+            injectChanges: true
         }
     }
 };

awx/ui/npm-shrinkwrap.json

@@ -333,9 +333,9 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
     },
     "autoprefixer": {
-      "version": "6.5.2",
+      "version": "6.5.1",
       "from": "autoprefixer@>=6.0.0 <7.0.0",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.5.2.tgz"
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.5.1.tgz"
     },
     "aws-sign2": {
       "version": "0.6.0",
@@ -872,9 +872,9 @@
       }
     },
     "caniuse-db": {
-      "version": "1.0.30000578",
+      "version": "1.0.30000576",
-      "from": "caniuse-db@>=1.0.30000576 <2.0.0",
+      "from": "caniuse-db@>=1.0.30000554 <2.0.0",
-      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000578.tgz"
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000576.tgz"
     },
     "caseless": {
       "version": "0.11.0",
@@ -2904,18 +2904,6 @@
       "from": "jsesc@>=1.3.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz"
     },
-    "jshint": {
-      "version": "2.9.4",
-      "from": "jshint@>=2.9.4 <3.0.0",
-      "resolved": "https://registry.npmjs.org/jshint/-/jshint-2.9.4.tgz",
-      "dependencies": {
-        "lodash": {
-          "version": "3.7.0",
-          "from": "lodash@>=3.7.0 <3.8.0",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.7.0.tgz"
-        }
-      }
-    },
     "json-schema": {
       "version": "0.2.3",
       "from": "json-schema@0.2.3",
@@ -3150,14 +3138,7 @@
     "meow": {
       "version": "3.7.0",
       "from": "meow@>=3.3.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz"
-      "dependencies": {
-        "minimist": {
-          "version": "1.2.0",
-          "from": "minimist@>=1.1.3 <2.0.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz"
-        }
-      }
     },
     "merge-descriptors": {
       "version": "1.0.1",
@@ -3195,9 +3176,9 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.3.tgz"
     },
     "minimist": {
-      "version": "0.0.10",
+      "version": "1.2.0",
-      "from": "minimist@>=0.0.1 <0.1.0",
+      "from": "minimist@>=1.2.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz"
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz"
     },
     "mkdirp": {
       "version": "0.3.0",

awx/ui/package.json

@@ -16,8 +16,8 @@
     "npm": "3.10.7"
   },
   "scripts": {
-    "build-docker-machine": "grunt dev; ip=$(docker-machine ip $DOCKER_MACHINE_NAME); npm set ansible-tower:django_host ${ip}; grunt sync",
+    "build-docker-machine": "ip=$(docker-machine ip $DOCKER_MACHINE_NAME); npm set ansible-tower:django_host ${ip}; grunt dev;",
-    "build-docker-cid": "grunt dev; ip=`docker inspect --format '{{ .NetworkSettings.IPAddress }}' $DOCkER_CID` | npm set config ansible-tower:django_host ${ip}; grunt sync",
+    "build-docker-cid": "ip=`docker inspect --format '{{ .NetworkSettings.IPAddress }}' $DOCkER_CID` | npm set config ansible-tower:django_host ${ip}; grunt dev;",
     "build-devel": "grunt devNoSync",
     "pot": "grunt nggettext_extract",
     "languages": "grunt nggettext_compile",
@@ -73,6 +73,7 @@
     "less-plugin-autoprefix": "^1.4.2",
     "load-grunt-configs": "^1.0.0",
     "load-grunt-tasks": "^3.5.0",
+    "minimist": "^1.2.0",
     "phantomjs-prebuilt": "^2.1.12",
     "time-grunt": "^1.4.0",
     "webpack": "^1.13.1"

awx/ui/webpack.config.js

@@ -1,5 +1,16 @@
-var path = require('path'),
+var awx_env,
-    webpack = require('webpack');
+    path = require('path'),
+    webpack = require('webpack'),
+    options = require('minimist')(JSON.parse(process.env.npm_config_argv).remain),
+    merge = require('lodash').merge;
+
+awx_env = {
+    'proxy': {
+        'django_host': process.env.npm_package_config_django_host,
+        'django_port': process.env.npm_package_config_django_port
+    }
+};
+merge(awx_env, options);
 
 var vendorPkgs = [
     'angular',
@@ -54,6 +65,7 @@ var dev = {
         }),
         // (chunkName, outfileName)
         new webpack.optimize.CommonsChunkPlugin('vendor', 'tower.vendor.js'),
+        new webpack.DefinePlugin({ $ENV: JSON.stringify(awx_env) })
     ],
     module: {
         preLoaders: [{
@@ -65,8 +77,7 @@ var dev = {
                 emitErrors: true
             }
         }],
-        loaders: [
+        loaders: [{
-        {
             // disable AMD loading (broken in this lib) and default to CommonJS (not broken)
             test: /\.angular-tz-extensions.js$/,
             loader: 'imports?define=>false'
@@ -118,8 +129,7 @@ var release = {
         })
     ],
     module: {
-        loaders: [
+        loaders: [{
-        {
             // disable AMD loading (broken in this lib) and default to CommonJS (not broken)
             test: /\.angular-tz-extensions.js$/,
             loader: 'imports?define=>false!'