![Tyr Johanson](/assets/img/avatar_default.png)
This patch populates the Angular template cache from Django. This eliminates the need for Angular to do an http get for every HTML fragment. In addition, now that we are filling the template cache, this patch introduces the logic needed to override any Angular template HTML from the current theme. How it works: A new template tag is created called "template_cache_preloads". This tag is used in _scripts.html to generate a list of text/javascript script tags, each one containing an Angular "run" method that loads a template contents into the Angular template cache. The first time any Horizon page is loaded after server start, the template cache preloads are computed for the current theme. The output of this tag is cached for 30 days in Django using the "cache" tag. Further, that cached result is wrapped in a "compress js" tag to collapse the individual <script> tags into 1 block of javascript, and compress like all other javascript Horizon serves to the client. Finally, when using offline compression, the compressor evaluates the nodelist (HTML content) of _scripts.html, notices the compress tag and builds the template cache preloads for each possible theme. Later, at runtime, when the preloads are generated for the current theme, the compressor gets the result from the Django cache, and hashes the contents to determine which manifest file to serve to the client. Since the preloads generated at run-time are identical to those generated off-line, the compressor hash matches an existing manifest which is served to the client. Notice that even though the template cache pre-loads are generated off-line...the template_cache_preloads tag will be executed once every 30 days anyway. However, since the result matches the off-line compression, the existing manifest continues to be served to the client. Finally, this patch ALSO watches for 'post_compress' signals. If it detects that the angular template preloads have been re-compressed, it clears the old version from the Django cache. To test the template caching: - Run horizon - View page source - Notice the new <script type="text/javascript"> tags contained in the body (only visible if COMPRESS_ENABLED=False - Open the javascript inspector - Load launch instance - Notice there are no longer http calls to load each HTML fragment used by the Angular launch instance To test the override: - Set the DEFAULT_THEME='material' - Create /horizon/openstack_dashboard/themes/material/\ static/templates/framework/widgets/help-panel/help-panel.html - Set the content to <h1>TEST</h1> - Run Horizon and open launch instance. - The help content should contain "TEST" To test the new template tag: - set a breakpoint or print in angular.py:template_cache_preloads and observe when it is called during off-line or run-time use Co-Authored-By: Diana Whitten <hurgleburgler@gmail.com> Implements: blueprint angular-template-overrides Change-Id: I0e4e2623be58abbc68c6e02b2e9c5d7cdaba8e4d
11 lines
646 B
YAML
11 lines
646 B
YAML
---
|
|
features:
|
|
- >
|
|
[`blueprint angular-template-overrides <https://blueprints.launchpad.net/horizon/+spec/angular-template-overrides>`_]
|
|
This blueprint provides a way for deployers to use a theme to override HTML
|
|
fragments used by Angular code in Horizon. For example, to override the
|
|
launch instance help panel when the 'material' theme is used, create
|
|
openstack_dashboard/themes/material/static/templates/framework
|
|
/widgets/help-panel/help-panel.html. All of the client side templates are
|
|
now compiled into a single JavaScript file that is minified and is given
|
|
as an additional file in the manifest.json file. |