x
/
merlin
Code Issues Proposed changes

Fix the bug with asynchronous template loading 

Due to each field template being loaded asynchronously it was possible
that some templates hadn't been put to the $templateCache by the time
they were requested from it for rendering a field directive. This lead
to some random field shown in the initial document not being rendered
at all. Fix this problem by using promises, effectively delaying the
field rendering until the moment the template is finally loaded. Using
promises also allows to not use $templateCache at all - the
templateContents are passed as resolve() method argument.

Also add 'ng-cloak' directive to the toplevel Workbook div to prevent
raw Angular template flickering during initial load.

Change-Id: I8a52b9730b52d4dd20400460137576713c081867
Closes-Bug: #1428730
This commit is contained in:
Timur Sufiev 2015-03-25 14:09:41 +03:00
parent 415a0aacea
commit 4bc01fe872
8 changed files with 193 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
extensions/enabled/_50_add_mistral_panel.py
View File

@ -13,4 +13,5 @@ ADD_PANEL = 'mistral.panel.MistralPanel'
ADD_ANGULAR_MODULES = ['angular.filter', 'merlin', 'mistral']
ADD_JS_FILES = ['merlin/js/lib/angular-filter.js',
'merlin/js/merlin.init.js',
'merlin/js/merlin.templates.js',
'mistral/js/mistral.init.js']

15
extensions/mistral/static/mistral/js/mistral.init.js
View File

@ -4,15 +4,10 @@
(function() {
'use strict';
var mistralApp = angular.module('mistral', ['merlin'])
.run(function($http, $templateCache) {
var fields = ['varlist', 'yaqllist'];
fields.forEach(function(field) {
var base = '/static/mistral/templates/fields/';
$http.get(base + field + '.html').success(function(templateContent) {
$templateCache.put(field, templateContent);
});
})
})
angular.module('mistral', ['merlin'])
.run(['merlin.templates', function(templates) {
templates.prefetch('/static/mistral/templates/fields/',
['varlist', 'yaqllist']);
}])
})();

3
extensions/mistral/templates/mistral/create.html
View File

@ -14,6 +14,7 @@
<script type="text/javascript" src="{{ STATIC_URL }}merlin/js/lib/barricade.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}merlin/js/lib/js-yaml.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.init.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.templates.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.directives.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.field.models.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.panel.models.js"></script>
@ -35,7 +36,7 @@
{% block main %}
<h3>Create Workbook</h3>
<div id="create-workbook" class="fluid-container" ng-controller="workbookCtrl">
<div id="create-workbook" class="fluid-container" ng-cloak ng-controller="workbookCtrl">
<div class="well">
<div class="two-panels">
<div class="left-panel">

4
karma-unit.conf.js
View File

@ -36,6 +36,7 @@ module.exports = function (config) {
'./bower_components/angular/angular.js',
'./bower_components/angular-mocks/angular-mocks.js',
'./merlin/static/merlin/js/merlin.init.js',
'./merlin/static/merlin/js/merlin.templates.js',
'./merlin/static/merlin/js/merlin.directives.js',
'./merlin/static/merlin/js/merlin.field.models.js',
'./merlin/static/merlin/js/merlin.panel.models.js',
@ -43,7 +44,8 @@ module.exports = function (config) {
'./merlin/static/merlin/js/lib/angular-filter.js',
'./merlin/static/merlin/js/lib/barricade.js',
'./merlin/static/merlin/js/lib/js-yaml.js',
'merlin/test/js/utilsSpec.js'
'merlin/test/js/utilsSpec.js',
'merlin/test/js/templatesSpec.js'
],
exclude: [

28
merlin/static/merlin/js/merlin.directives.js
View File

@ -67,19 +67,21 @@
}
}
})
.directive('typedField', function($http, $templateCache, $compile) {
return {
restrict: 'E',
scope: {
title: '@',
value: '=',
type: '@'
},
link: function(scope, element) {
var template = $templateCache.get(scope.type);
element.replaceWith($compile(template)(scope));
.directive('typedField', ['$compile', 'merlin.templates',
function($compile, templates) {
return {
restrict: 'E',
scope: {
title: '@',
value: '=',
type: '@'
},
link: function(scope, element) {
templates.templateReady(scope.type).then(function(template) {
element.replaceWith($compile(template)(scope));
})
}
}
}
})
}])
})();

20
merlin/static/merlin/js/merlin.init.js
View File

@ -4,17 +4,13 @@
(function() {
'use strict';
var merlinApp = angular.module('merlin', [])
.run(function($http, $templateCache) {
var fields = ['dictionary', 'frozendict', 'list', 'string',
'text', 'group', 'number', 'choices'
];
fields.forEach(function(field) {
var base = '/static/merlin/templates/fields/';
$http.get(base + field + '.html').success(function(templateContent) {
$templateCache.put(field, templateContent);
});
})
})
angular.module('merlin', [])
.run(['merlin.templates', function(templates) {
templates.prefetch('/static/merlin/templates/fields/',
['dictionary', 'frozendict', 'list', 'string', 'text', 'group', 'number',
'choices'
]
);
}])
})();

37
merlin/static/merlin/js/merlin.templates.js Normal file
View File

@ -0,0 +1,37 @@
(function() {
angular.module('merlin')
.factory('merlin.templates', [
'$http', '$q', function($http, $q) {
var promises = {};
function makeEmptyPromise() {
var deferred = $q.defer();
deferred.reject();
return deferred.promise;
}
function prefetch(baseUrl, fields) {
if ( !angular.isArray(fields) ) {
fields = [fields];
}
fields.forEach(function(field) {
var deferred = $q.defer();
$http.get(baseUrl + field + '.html').success(function(templateContent) {
deferred.resolve(templateContent);
}).error(function(data) {
deferred.reject(data);
});
promises[field] = deferred.promise;
});
}
function templateReady(field) {
return promises[field] || makeEmptyPromise();
}
return {
prefetch: prefetch,
templateReady: templateReady
};
}])
})();

122
merlin/test/js/templatesSpec.js Normal file
View File

@ -0,0 +1,122 @@
/* Copyright (c) 2015 Mirantis, Inc.
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.
*/
describe('merlin templates', function() {
'use strict';
var templates, $httpBackend, $rootScope;
beforeEach(module('merlin'));
beforeEach(inject(function($injector) {
var expectedRequestsStr = '/static/merlin/templates/fields/.*',
expectedRequests = new RegExp(expectedRequestsStr);
$httpBackend = $injector.get('$httpBackend');
$httpBackend.whenGET(expectedRequests).respond(200, '');
templates = $injector.get('merlin.templates');
$rootScope = $injector.get('$rootScope');
}));
function verifyHttpExpectations() {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
}
describe('basic properties:', function() {
var baseUrl = '/baseUrl/',
fieldName = 'theField',
fieldName1 = 'theField1';
it('prefetch() initiates an ajax requests', function() {
$httpBackend.expectGET(baseUrl + fieldName + '.html').respond(200, '');
templates.prefetch(baseUrl, fieldName);
$httpBackend.expectGET(baseUrl + fieldName + '.html').respond(200, '');
$httpBackend.expectGET(baseUrl + fieldName1 + '.html').respond(200, '');
templates.prefetch(baseUrl, [fieldName, fieldName1]);
$httpBackend.flush();
verifyHttpExpectations();
});
it('templateReady() always returns a promise', function() {
var prefetchedField = 'theField',
notPrefetchedField = 'anotherField';
$httpBackend.whenGET(new RegExp(baseUrl + '.*')).respond(200, '');
templates.prefetch(baseUrl, prefetchedField);
expect(templates.templateReady(prefetchedField).then).toBeDefined();
expect(templates.templateReady(notPrefetchedField).then).toBeDefined();
});
});
describe('retrieval:', function() {
var wrongFieldName = 'theWrongField',
properFieldName = 'theField',
properBaseUrl = '/theProperUrl/',
wrongBaseUrl = '/theWrongUrl/',
success, failure;
function processTemplate(fieldName) {
var promise = templates.templateReady(fieldName)
promise.then(function() {
success = true;
}, function() {
failure = true;
});
$rootScope.$apply();
}
beforeEach(function() {
success = failure = false;
$httpBackend.whenGET(
properBaseUrl + properFieldName + '.html').respond(200, '');
$httpBackend.whenGET(
properBaseUrl + wrongFieldName + '.html').respond(404, '');
$httpBackend.whenGET(
wrongBaseUrl + properFieldName + '.html').respond(404, '');
});
it('templateReady() rejects on not prefetched field', function() {
processTemplate('theField');
expect(failure).toBe(true);
});
it('templateReady() rejects on prefetched, but not existing field', function() {
templates.prefetch(properBaseUrl, wrongFieldName);
templates.prefetch(wrongBaseUrl, properFieldName);
$httpBackend.flush();
processTemplate(wrongFieldName);
expect(failure).toBe(true);
processTemplate(properFieldName);
expect(failure).toBe(true);
});
it('templateReady() resolves on prefetched existing field', function() {
templates.prefetch(properBaseUrl, properFieldName);
$httpBackend.flush();
processTemplate(properFieldName);
expect(success).toBe(true);
});
});
});