[NG] Support local file upload in Create Image workflow

First, now there are 2 '/api/glance/images/ API wrapper endpoints for
creating a new image - POST and PUT. The POST endpoint which existed
before now resides at PUT. This was done to support legacy
(i.e. proxied by web-server) file uploads in Angular Create Image,
because Django (which we need to use in that case) doesn't correctly
process PUT request. So, if local file binary payload is added to the
form contents, we send it using POST request.

Second, speaking of '/api/glance/images' PUT request previously known
as POST... Where before the POST call to Horizon REST API wrappers
returned the final image object that Glance just created, now there
are two possibilities for what happens after PUT is sent.

* When Create Image form Source Type is set to URL, then everything is
  going as before.
* When Source Type is set to File, then just a file name instead of an
  actual Blob is sent to '/api/glance/images', then the Glance Image
  is queued for creation and Horizon web-server responds with an Image
  object which dict() representation has 2 additional keys:
  'upload_url' and 'token_id'. The 'upload_url' tells the location for
  the subsequent CORS request, while 'token_id' is passed as a header
  in that request, so Keystone would let it in. CORS upload is started
  immediately as Image is queued for creation (first promise is
  resolved) and returns the second promise, which is resolved once the
  upload finishes. The modal form hangs until second promise resolves
  to indicate that upload is in progress. Upload progress notification
  is added in a follow-up patch.

DEPLOY NOTES

The client-side code relies on CORS being enabled for Glance service
(otherwise browser would forbid the PUT request to a location
different from the one form content came from). In a Devstack setup
you'll need to edit [cors] section of glance-api.conf file, setting
`allowed_origin` setting to the full hostname of the web server (say,
http://<HOST_IP>/dashboard).

Related-Bug: #1467890
Implements blueprint: horizon-glance-large-image-upload
Change-Id: I5d842d614c16d3250380ea1dc1c6e0289d206fb5

3 files changed, 120 insertions, 19 deletions

diff --git a/horizon/static/framework/framework.module.js b/horizon/static/framework/framework.module.js
index fd6ba4301..16e901a4e 100644
--- a/horizon/static/framework/framework.module.js
+++ b/horizon/static/framework/framework.module.js
@@ -57,6 +57,7 @@
     // if user is not authorized, log user out
     // this can happen when session expires
     $httpProvider.interceptors.push(redirect);
+    $httpProvider.interceptors.push(stripAjaxHeaderForCORS);
 
     redirect.$inject = ['$q'];
 
@@ -71,6 +72,25 @@
         }
       };
     }
+
+    stripAjaxHeaderForCORS.$inject = [];
+    // Standard CORS middleware used in OpenStack services doesn't expect
+    // X-Requested-With header to be set for requests and rejects requests
+    // which have it. Since there is no reason to treat Horizon specially when
+    // dealing handling CORS requests, it's better for Horizon not to set this
+    // header when it sends CORS requests. Detect CORS request by presence of
+    // X-Auth-Token headers which normally should be provided because of
+    // Keystone authentication.
+    function stripAjaxHeaderForCORS() {
+      return {
+        request: function(config) {
+          if ('X-Auth-Token' in config.headers) {
+            delete config.headers['X-Requested-With'];
+          }
+          return config;
+        }
+      };
+    }
   }
 
   run.$inject = ['$window', '$rootScope'];
diff --git a/horizon/static/framework/util/http/http.js b/horizon/static/framework/util/http/http.js
index 54b91553b..de7b90ac6 100644
--- a/horizon/static/framework/util/http/http.js
+++ b/horizon/static/framework/util/http/http.js
@@ -29,11 +29,17 @@ limitations under the License.
 
     var httpCall = function (method, url, data, config) {
       var backend = $http;
-      /* eslint-disable angular/window-service */
-      url = $window.WEBROOT + url;
-      /* eslint-enable angular/window-service */
-
-      url = url.replace(/\/+/g, '/');
+      // An external call goes directly to some OpenStack service, say Glance
+      // API, not to the Horizon API wrapper layer. Thus it doesn't need a
+      // WEBROOT prefix
+      var external = pop(config, 'external');
+      if (!external) {
+        /* eslint-disable angular/window-service */
+        url = $window.WEBROOT + url;
+        /* eslint-enable angular/window-service */
+
+        url = url.replace(/\/+/g, '/');
+      }
 
       if (angular.isUndefined(config)) {
         config = {};
@@ -44,7 +50,10 @@ limitations under the License.
       if (angular.isDefined(data)) {
         config.data = data;
       }
-      if (angular.isObject(config.data)) {
+
+      if (uploadService.isFile(config.data)) {
+        backend = uploadService.http;
+      } else if (angular.isObject(config.data)) {
         for (var key in config.data) {
           if (config.data.hasOwnProperty(key) && uploadService.isFile(config.data[key])) {
             backend = uploadService.upload;
@@ -52,7 +61,6 @@ limitations under the License.
           }
         }
       }
-
       return backend(config);
     };
 
@@ -77,4 +85,14 @@ limitations under the License.
       return httpCall('DELETE', url, data, config);
     };
   }
+
+  function pop(obj, key) {
+    if (!angular.isObject(obj)) {
+      return undefined;
+    }
+    var value = obj[key];
+    delete obj[key];
+    return value;
+  }
+
 }());
diff --git a/horizon/static/framework/util/http/http.spec.js b/horizon/static/framework/util/http/http.spec.js
index de6657760..c26d0a433 100644
--- a/horizon/static/framework/util/http/http.spec.js
+++ b/horizon/static/framework/util/http/http.spec.js
@@ -9,8 +9,11 @@
 
   describe('api service', function () {
     var api, $httpBackend;
+    var WEBROOT = '/horizon/';
 
-    beforeEach(module('horizon.framework'));
+    beforeEach(module('horizon.framework', function($provide) {
+      $provide.value('$window', {WEBROOT: WEBROOT});
+    }));
     beforeEach(inject(function ($injector) {
       api = $injector.get('horizon.framework.util.http.service');
       $httpBackend = $injector.get('$httpBackend');
@@ -26,10 +29,11 @@
 
     function testGoodCall(apiMethod, verb, data) {
       var called = {};
+      var url = WEBROOT + 'good';
       data = data || 'some complicated data';
       var suppliedData = verb === 'GET' ? undefined : data;
-      $httpBackend.when(verb, '/good', suppliedData).respond({status: 'good'});
-      $httpBackend.expect(verb, '/good', suppliedData);
+      $httpBackend.when(verb, url, suppliedData).respond({status: 'good'});
+      $httpBackend.expect(verb, url, suppliedData);
       apiMethod('/good', suppliedData).success(function (data) {
         called.data = data;
       });
@@ -39,9 +43,10 @@
 
     function testBadCall(apiMethod, verb) {
       var called = {};
+      var url = WEBROOT + 'bad';
       var suppliedData = verb === 'GET' ? undefined : 'some complicated data';
-      $httpBackend.when(verb, '/bad', suppliedData).respond(500, '');
-      $httpBackend.expect(verb, '/bad', suppliedData);
+      $httpBackend.when(verb, url, suppliedData).respond(500, '');
+      $httpBackend.expect(verb, url, suppliedData);
       apiMethod('/bad', suppliedData).error(function () {
         called.called = true;
       });
@@ -89,8 +94,24 @@
       testBadCall(api.delete, 'DELETE');
     });
 
-    describe('Upload.upload() call', function () {
-      var Upload;
+    describe('WEBROOT handling', function() {
+      it('respects WEBROOT by default', function() {
+        var expectedUrl = WEBROOT + 'good';
+        $httpBackend.when('GET', expectedUrl).respond(200, '');
+        $httpBackend.expect('GET', expectedUrl);
+        api.get('/good');
+      });
+
+      it('ignores WEBROOT with external = true flag', function() {
+        var expectedUrl = '/good';
+        $httpBackend.when('GET', expectedUrl).respond(200, '');
+        $httpBackend.expect('GET', expectedUrl);
+        api.get('/good', {external: true});
+      });
+    });
+
+    describe('Upload service', function () {
+      var Upload, file;
       var called = {};
 
       beforeEach(inject(function ($injector) {
@@ -98,22 +119,64 @@
         spyOn(Upload, 'upload').and.callFake(function (config) {
           called.config = config;
         });
+        spyOn(Upload, 'http').and.callFake(function (config) {
+          called.config = config;
+        });
+        file = new File(['part'], 'filename.sample');
       }));
 
-      it('is used when there is a File() blob inside data', function () {
-        var file = new File(['part'], 'filename.sample');
-
+      it('upload() is used when there is a File() blob inside data', function () {
         api.post('/good', {first: file, second: 'the data'});
         expect(Upload.upload).toHaveBeenCalled();
         expect(called.config.data).toEqual({first: file, second: 'the data'});
       });
 
-      it('is NOT used in case there are no File() blobs inside data', function() {
+      it('upload() is NOT used when a File() blob is passed as data', function () {
+        api.post('/good', file);
+        expect(Upload.upload).not.toHaveBeenCalled();
+      });
+
+      it('upload() is NOT used in case there are no File() blobs inside data', function() {
         testGoodCall(api.post, 'POST', {second: 'the data'});
         expect(Upload.upload).not.toHaveBeenCalled();
       });
 
-    });
+      it('upload() respects WEBROOT by default', function() {
+        api.post('/good', {first: file});
+        expect(called.config.url).toEqual(WEBROOT + 'good');
+      });
 
+      it('upload() ignores WEBROOT with external = true flag', function() {
+        api.post('/good', {first: file}, {external: true});
+        expect(called.config.url).toEqual('/good');
+      });
+
+      it('http() is used when a File() blob is passed as data', function () {
+        api.post('/good', file);
+        expect(Upload.http).toHaveBeenCalled();
+        expect(called.config.data).toEqual(file);
+      });
+
+      it('http() is NOT used when there is a File() blob inside data', function () {
+        api.post('/good', {first: file, second: 'the data'});
+        expect(Upload.http).not.toHaveBeenCalled();
+      });
+
+      it('http() is NOT used when no File() blobs are passed at all', function() {
+        testGoodCall(api.post, 'POST', {second: 'the data'});
+        expect(Upload.http).not.toHaveBeenCalled();
+      });
+
+      it('http() respects WEBROOT by default', function() {
+        api.post('/good', file);
+        expect(called.config.url).toEqual(WEBROOT + 'good');
+      });
+
+      it('http() ignores WEBROOT with external = true flag', function() {
+        api.post('/good', file, {external: true});
+        expect(called.config.url).toEqual('/good');
+      });
+
+    });
   });
 }());