horizon/openstack_dashboard/static/app/app.module.js
Timur Sufiev 0e1279d05c [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
2016-08-08 20:02:22 +03:00

158 lines
3.9 KiB
JavaScript

/*
* Licensed under the Apache License, Version 2.0 (the 'License');
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an 'AS IS' BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*global horizonPlugInModules*/
(function () {
'use strict';
/**
* Library modules - modules defined in third-party libraries, including
* angular's extensions.
*/
var libraryModules = [
'gettext',
'lrDragNDrop',
'ngCookies',
'ngSanitize',
'schemaForm',
'smart-table',
'ui.bootstrap'
];
/**
* Horizon's built-in modules, including modules from `framework` components
* and modules from `openstack_dashboard` application core components.
*/
var horizonBuiltInModules = [
'horizon.app.core',
'horizon.app.resources',
'horizon.app.tech-debt',
'horizon.auth',
'horizon.framework'
];
/**
* @ngdoc overview
* @name horizon.app
* @description
*
* # horizon.app
*
* Horizon's application level module depends on modules from three
* sources:
*
* 1) Library modules.
* 2) Horizon's built-in modules.
* 3) Horizon's plug-in modules.
*/
angular
.module('horizon.app', ['ngRoute']
.concat(libraryModules)
.concat(horizonBuiltInModules)
.concat(horizonPlugInModules)
)
.config(configHorizon)
.run(updateHorizon);
configHorizon.$inject = [
'$locationProvider',
'$routeProvider'
];
/**
* Configure the Horizon Angular Application.
* This sets up the $locationProvider Service to use HTML5 Mode and
* the Hash Prefix to use when it is not supported.
*
* It also sets the default Angular route which will apply if
* a link is clicked that doesn't match any current Angular route.
*
*/
function configHorizon($locationProvider, $routeProvider) {
if (angular.element('base').length === 1) {
$locationProvider.html5Mode(true).hashPrefix('!');
$routeProvider
.otherwise({
template: '',
controller: 'RedirectController'
});
}
}
updateHorizon.$inject = [
'gettextCatalog',
'horizon.framework.conf.spinner_options',
'horizon.framework.util.tech-debt.helper-functions',
'$cookieStore',
'$http',
'$cookies',
'$route'
];
function updateHorizon(
gettextCatalog,
spinnerOptions,
hzUtils,
$cookieStore,
$http,
$cookies,
$route
) {
$http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
// expose the legacy utils module
horizon.utils = hzUtils;
horizon.conf.spinner_options = spinnerOptions;
if (angular.version.major === 1 && angular.version.minor < 4) {
horizon.cookies = angular.extend({}, $cookieStore, {
getObject: $cookieStore.get,
put: put,
putObject: put,
getRaw: getRaw
});
} else {
horizon.cookies = $cookies;
}
// rewire the angular-gettext catalog to use django catalog
gettextCatalog.setCurrentLanguage(horizon.languageCode);
gettextCatalog.setStrings(horizon.languageCode, django.catalog);
// because of angular startup, and our use of ng-include with
// embedded ng-view, we need to re-kick ngRoute after everything's
// resolved
$route.reload();
/*
* cookies are updated at the end of current $eval, so for the horizon
* namespace we need to wrap it in a $apply function.
*/
function put(key, value) {
angular.element('body').scope().$apply(function () {
$cookieStore.put(key, value);
});
}
function getRaw(key) {
return $cookies[key];
}
}
}());