Upgrade from angularjs (v1) to angular (v6)
Since we got started in all of this angular business back in the good old storyboard days of yore, the angular folks cut a major release (ok, 5 major releases). The old v1 angular is known as angularjs now, and starting at v2 the new codebase is just 'angular'. While angularjs is still supported for now, angularjs vs. angular seems to be more like zuulv2 vs. zuulv3 - the developers really want people to be on the >=v2 series, and they spent a good deal of time fixing issues from the original angularjs. The notable differences are the angular is a bit more explicit/verbose, and that it uses typescript instead of plain javscript. The increased verbosity wasn't the most popular with some fans of the original angularjs, but for those of us who aren't breathing it every day the verbosity is helpful. There is a recommended code organization structure which has been used. For zuul, there are notable changes to how the http client and location service work, so the code related to those has been reworked. $http has been reworked to use HttpClient - which defaults to grabbing the remote json and which can do so in a typesafe way. $location has been reworked to use the angular-routing module, which allows us to pull both URL and Query String parameters in a structured manner. We can similary pass query parameters to our output http requests. Since routing is the new solution for $location, extract the navigation bar into a re-usable component. Add tslint config for the typescript. Keep running eslint on our remaining plain javascript files, at least until we've got them all transitioned over. Use the angular tslint config as a base, but also adopt the rule from standardjs that says to not use semicolons since they are not actually needed. The main.ejs file is a webpack template, not an angular template. Move it to web/config with the other webpack files to make that clear. Add a job that builds the zuul dashboard with the ZUUL_API_URL set to point to software factory. This should allow us to see a live test with a multi-tenant scheme. Depends-On: https://review.openstack.org/572542 Change-Id: Ida959da05df358994f4d11bb6f40f094d39a9541 Co-Authored-By: Tristan Cacqueray <tdecacqu@redhat.com> Co-Authored-By: Artem Goncharov <artem.goncharov@gmail.com>
This commit is contained in:
11
playbooks/dashboard/multi.yaml
Normal file
11
playbooks/dashboard/multi.yaml
Normal file
@@ -0,0 +1,11 @@
|
||||
- hosts: all
|
||||
tasks:
|
||||
|
||||
- name: Make symlinks to allow multi-tenant preview to work
|
||||
file:
|
||||
src: .
|
||||
dest: '{{ zuul.project.src_dir }}/{{ javascript_content_dir }}/{{ item }}'
|
||||
state: link
|
||||
with_items:
|
||||
- local
|
||||
- t
|
||||
18
playbooks/dashboard/run.yaml
Normal file
18
playbooks/dashboard/run.yaml
Normal file
@@ -0,0 +1,18 @@
|
||||
- hosts: all
|
||||
roles:
|
||||
- revoke-sudo
|
||||
- set-zuul-log-path-fact
|
||||
# Both sets of quotes are required.
|
||||
# The "" quotes are for the shell to protect the '' quotes.
|
||||
# We need the '' quotes because defines here are essentially
|
||||
# direct string substitutions. Therefore:
|
||||
# --define "ZUUL_API_URL='https://zuul.openstack.org'"
|
||||
# with the javascript code:
|
||||
# return ZUUL_API_URL
|
||||
# results in
|
||||
# return 'https://zuul.openstack.org'
|
||||
# in the compiled javascript.
|
||||
- role: npm
|
||||
npm_command: >-
|
||||
build:dist --
|
||||
--define "ZUUL_API_URL='{{ zuul_api_url }}'"
|
||||
Reference in New Issue
Block a user