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>

1 files changed, 32 insertions, 0 deletions

diff --git a/web/stream/stream.component.ts b/web/stream/stream.component.ts
new file mode 100644
index 000000000..42bfe86a8
--- /dev/null
+++ b/web/stream/stream.component.ts
@@ -0,0 +1,32 @@
+// Copyright 2018 Red Hat, 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.
+
+import { Component, OnInit } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
+
+import ZuulService from '../zuul/zuul.service'
+import zuulStartStream from './zuulStartStream'
+
+@Component({
+  styles: [require('./stream.component.css').toString()],
+  template: require('./stream.component.html')
+})
+export default class StreamComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute, private zuul: ZuulService) {}
+
+  ngOnInit() {
+    zuulStartStream(this.route.snapshot.paramMap.get('tenant'), this.zuul)
+  }
+}