This patch adds Angular Schema Form[1] and its requirements to Horizon.
There are a number of advantages to this over the current methods of
defining forms and workflows:
- All fields have an individual template, making theming improvements,
bug fixes, and bootstrap conformity easier.
- The file and line count, especially for workflows, is dramatically
reduced. The Create Net workflow, for example, goes from 12+ files to
2, with a big reduction in boilerplate HTML.
- All field validation messages are standardised, so we can match them
across Horizon and plugins
What this patch contains:
- Many common form fields, including things like the themable checkboxes
and selects.
- A basic modal template that can be passed with ui-bootstraps $modal
service to take advantage of schema-form
Next steps:
- Remove the other modal templates so we can standardise. A single
template opened from the $modal service is fine, and we shouldn't need
several directives. In this case, we should deprecate them, as the
modal forms will be used elsewhere.
- Map commonly used form items, like transfer tables, to a schema form
type like array (they serve similar purposes, so maybe thats what
should be replaced)
- Use themable selects instead of regular ones
1. http://schemaform.io/
Co-Authored-By: Tyr Johanson <tyr@hpe.com>
Implements: blueprint angular-schema-form
Change-Id: Ib22b2d0db2c4d4775fdef62a180cc994e8ae6280
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
Magic Search is getting integrated into the Horizon codebase as agreed
at the Tokyo summit. This Magic Search patch replaces the XStatic
package with its own module, and otherwise works as the current XStatic
package (changes will be made to accommodate Searchlight features in
following patches). This is not simply a copy of what is in GitHub,
because there were no tests and little documentation.
The code underwent significant restructuring to accommodate the linter and
other standards used in Horizon.
Change-Id: I9a2b0f3fed1955680a534e8d284da2c8ee68ef16
Implements: blueprint integrate-magic-search
The find static utility method assumes a filesystem layout
that may or may not be present on certain distros. This fixes
this by using the python install path.
Closes-bug: #1494171
Change-Id: Iab72b4b872849d2496cc634677e5bfe478aa03be
In order to facilitate the bulk of the CSS Reorg effort, it was
extremely beneficial to quickly toggle between many different themes
in order to validate proper cascading inheritance. This work
prompted the following example theme.
The 'material' theme gives an example of how to make use of a 3rd
party theme using the theming functionality. In addition to
incorporating a theme, loaded as a static asset using
requirements.txt, it also gives examples of how to cleanly override
styles, variables, icon fonts and Django templates.
This theme is replacing 'blue' as the example of how to use a theme
other than 'default'.
To use this theme, add the theme to your local_settings.py:
CUSTOM_THEME_PATH = 'themes/material', recollect and recompress your
static files.
Change-Id: Ic67189de5aac5ca541ad6fe82b823e8fcf318bd0
Partially-Implements: blueprint horizon-theme-css-reorg
This patch relocates the 'openstack-service-api' directory because
they are application specific, but needed by multiple dashboards.
Co-Authored-By: Tyr Johanson <tyr@hp.com>
Co-Authored-By: Shaoquan Chen <sean.chen2@hp.com>
Change-Id: Ie5455f3ca4cfaacb99cbccd66c95fb3ad31da272
Partial-Bug: #1478717
Angular code for openstack_dashboard is almost finished
migrating to openstack_dashboard/static/app/.
Previously, the root module of app (app.module.js) was explicitly
included from _conf.html so that environment variables from Django
could be captured in the 'horizon.app.conf' constant.
This prevented auto-collection at the static/app/ level because
app.module.js will be included twice (once from _conf.html, and
again during auto-collection)
It turns out that 'horizon.app.conf' is unnecessary as an Angular
constant. It's only use is to initialize the 'horizon.conf' global
provided by horizon.js.
This patch refactors _conf.html to directly initialize horizon.conf.
This removes the need for app.module.js to be included from
_conf.html, which allows us to change the auto-collection directory
to 'app/'.
Now all files in horizon/static and openstack_dashboard/static/app
are auto-collected, without including app.module.js twice. All new
angular files are expected to live in one of these two locations,
minimizing changes to static_settings.py to include new files for
auto-collection
Change-Id: I95b6f13c85eb08c875885812a7db054a5aa6e7c2
Partial-Bug: #1458697
Closes-Bug: #1477825
Operators don't like it when we change settings.py a lot, so this change
moves application configuration code (which can change a bunch) out of
settings.py into a separate file.
Change-Id: If099aa0d5d24827b1ce301f7c586647e6617826d
Closes-Bug: 1475447
The makemessages side of translation is now angular compatible via babel.
Now we need the directives and filters that angular-gettext provides.
This patch also configures angular-gettext to use the django catalog.
Partially-Implements: blueprint angular-translate-makemessages
Change-Id: Ib180953d7bd77170092293247543398d964e7305
Depends-On: Ica8d73752093f2e5d30f70fc37ba87610f6823b1
Updated incorrect package name.
Currently blocking packager from uploading due to incorrect name.
Depends-On: I808b34a9d13a16d82968904dd44515f3d67f0fde
Closes-Bug: 1438543
Change-Id: Iecf00771f42b2eb76a9ff790b2ad857cf3cdc809
There were a few items missed with the patch enabling changing
WEBROOT patch.
First the XStatic files were being unpacked in the wrong directoy
because root_url was not being passed in. This caused 404 errors
when running with a different web root.
This change allows root_url to be passed in on XStatic handling.
Second, STATIC_URL and MEDIA_URL were not using WEBROOT.
These now are built with WEBROOT.
Third, the fa-font-path variable was hard-coded in _variables.scss
to use "/" as the web root.
A webroot variable has been added that can be overridden. Additionally,
a new theme has also been added to change the web root.
Closes-Bug: #1434276
Change-Id: Ifff1c60b3405ce2136d039b8d74da08752e7215c
Make the Magic Search angular widget available in Horizon.
- Add lines to requirements.txt and static_settings.py to
bring MS in via XStatic-Magic-Search.
- Load the js files for the angular widget in _conf.html.
- Loadsthe magic_search.scss in horizon.scss
- Provide additional styling for MS in horizon.scss.
Co-Authored-By: David Kavanagh <david.kavanagh@eucalyptus.com>
Co-Authored-By: Aaron Sahlin <asahlin@us.ibm.com>
Partially Implements: blueprint filtered-client-side-table
Depends-On: I968a874b51870bd6a39ff48daa24e53c4698007e
Change-Id: Icc8e3dd3add1c6ef615015891df2e3a425683d48
These dependencies allow drag and drop interaction in horizon with data.
Example of usage include but not limited to table row reordering via dnd.
Also removed charset and type from script tags per HTML5 specs.
Change-Id: I6c60c32a5d6bf1898b908b6f6ef7d04e1770a41f
Adds support for serial console, in addition to VNC,
SPICE, and RDP.
Depends on term.js being added to OpenStack global
requirements: https://review.openstack.org/#/c/145825
To try this patch:
1. In `nova.conf`:
[serial_console]
enable=True
base_url =
ws://<location-of-serial-console-proxy>:6083/
2. Set CONSOLE_TYPE = "SERIAL" in local_settings.py.
3. You may need to start nova-serialproxy.
4. You may need to port-forward 6083.
https://review.openstack.org/#/c/143615 will make the
serial console available from Network Topology,
along with other consoles.
Co-Authored-By: Richard Jones<r1chardj0n3s@gmail.com>
Implements blueprint serial-console
Change-Id: If83c4efa1a96f9d393110af27f90a0808a23e641
Update of Jasmine to the newest version, update of angular as well to have
support for it. Remove extra packages (xstatic) from settings files and
improve jasmine error log in the console
Implements: blueprint update-jasmine
Change-Id: I884d0d0708130ff2ea825a3faf83ab929404dec6
The packagers will most likely need to replace the configuration
for the locations of all the static files when packaging for their
distributions. It's much more convenient for them, when that
configuration is in a separate file.
Change-Id: I346687f4592b97f9c15a20e09fd0e1e80bd1918d
Partial-implements: blueprint static-file-bower