Added a README for the UI2 archetype

Change-Id: I7e0b40a5c34610b3e4d97eef59cbf545426fce06
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/BUILD.rename b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/BUILD.rename
new file mode 100644
index 0000000..24acb3b
--- /dev/null
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/BUILD.rename
@@ -0,0 +1,11 @@
+BUNDLES = [
+    "//apps/${artifactId}/app:onos-apps-${artifactId}-app",
+]
+
+onos_app(
+    category = "Graphical User Interface",
+    description = "ONOS OSGi GUI2 Custom-View app ${artifactId}.",
+    included_bundles = BUNDLES,
+    title = "${artifactId} Application",
+    url = "http://onosproject.org",
+)
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/README.md b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/README.md
new file mode 100644
index 0000000..ac5d669
--- /dev/null
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/README.md
@@ -0,0 +1,167 @@
+# UI2 Sample application
+
+This application, created from the ONOS UI2 archetype can be deployed in 2 ways
+* As a [standalone application](#Standalone Application outside of ONOS) outside of ONOS OR
+* As an [application embedded](#Application embedded within ONOS) within ONOS
+
+There are 2 main parts to it:
+* An ONOS OSGi Java bundle that is packaged as an ONOS OAR file, and can be deployed
+in to a running ONOS system
+* A JavaScript library that may be embedded within an Angular Web project
+
+${symbol_h2} web/gitignore
+The file **web/gitignore** should be renamed to **web/.gitignore** before the app is added
+to any git repository
+
+${symbol_h2} Standalone Application outside of ONOS
+In the standalone scenario this library can continue to be built with Maven like:
+* mvn clean install
+
+The **app/BUILD.rename** and **web/${artifactId}/BUILD.rename** files can be
+discarded or ignored because they are only for building with Bazel.
+
+The ONOS OAR application may be installed with
+```bash
+onos-app localhost install! app/target/${artifactId}-app-1.0-SNAPSHOT.oar
+```
+
+The JavaScript GUI library ${artifactId}-gui-lib-1.0.0.tgz may be included in a
+[new Angular Project](https://angular.io/guide/quickstart) by adding the line:
+```angular2
+"${artifactId}-gui-lib": "file:../${artifactId}/web/${artifactId}-gui/${artifactId}-gui-lib-1.0.0.tgz"
+```
+(ensuring the path is correct) to the **dependencies** section of the
+**package.json** of the new Angular application.
+
+Then in the main folder of the new Angular app run
+```bash
+npm install ${artifactId}-gui-lib gui2-fw-lib d3
+```
+
+### Add to routing
+Finally to use the ${artifactId}-gui-lib in your new Angular application, add it to
+the Angular Router and make a link to it
+* Add a route to it the new app in the file **src/app/app-routing.module.ts** add the following to the "routes" array:
+```angular2
+  {
+    path: '${artifactId}-gui',
+    loadChildren: '${artifactId}-gui-lib#${appNameCap}${appNameEnd}GuiLibModule'
+  }
+```
+and
+```angular2
+ import { ${appNameCap}${appNameEnd}GuiLibModule } from '${artifactId}-gui-lib';
+```
+in the imports section at the top of the same file.
+
+* Add a link to the Library in new Application's main page at **src/app/app.component.html**
+as **\<a routerLink="/${artifactId}-gui" routerLinkActive="active">${artifactId} page\</a>**
+before \<router-outlet>
+
+### Add gui2-fw-lib to module
+* In the Angular app's main module **src/app/app.module.ts** add to the providers section:
+```angular2
+  providers: [
+    { provide: LogService, useClass: ConsoleLoggerService },
+    { provide: 'Window', useValue: window }
+  ],
+```
+and to the imports section:
+```angular2
+    Gui2FwLibModule
+```
+and to the import section:
+```angular2
+import { Gui2FwLibModule, ConsoleLoggerService, LogService } from 'gui2-fw-lib';
+```
+
+### Deploy
+At this stage you should be able to build the new application:
+```bash
+ng build --prod
+```
+and then copy the files to the html folder of an Apache or Nginx web server
+```bash
+cp -r dist/<your-app-name>/* /var/www/html
+```
+
+And you should be able to open it in your browser at [http://localhost](http://localhost)
+
+
+
+${symbol_h2} Application embedded within ONOS
+To embed the application inside ONOS (permanently add it to the ONOS code base)
+move the application folder in to the ~/onos/apps directory (ensuring its name
+does not clash with anything already there).
+
+Run
+```bash
+cd ${artifactId} && mvn install && mvn clean
+```
+once inside the folder - this will fetch the dependent node modules for the
+Angular application.
+
+To ensure it gets built along with ONOS rename the files **BUILD.rename**,
+**app/BUILD.rename** and **web/${artifactId}/BUILD.rename** to **BUILD**, and
+remove the pom.xml files, and some extra files left over from the build.
+```bash
+cd ~/onos/apps/${artifactId} && \
+mv BUILD.rename BUILD && \
+mv app/BUILD.rename app/BUILD && \
+mv web/${artifactId}-gui/BUILD.rename web/${artifactId}-gui/BUILD && \
+rm pom.xml && \
+rm app/pom.xml && \
+rm web/${artifactId}-gui/pom.xml && \
+mv web/${artifactId}-gui/gitignore web/${artifactId}-gui/.gitignore && \
+chmod +x web/${artifactId}-gui/ng-test.sh && \
+rm -rf web/${artifactId}-gui/node_modules/rxjs/src
+```
+
+
+In the file
+* ~/onos/apps/${artifactId}/web/${artifactId}-gui/projects/${artifactId}-gui-lib/package.json
+change the version to be the current version of ONOS e.g. 2.2.0
+
+Add a reference to the app in **~/onos/tools/build/bazel/modules.bzl** at the
+end of the **ONOS_APPS** section as:
+```
+"//apps/${artifactId}:onos-apps-${artifactId}-oar",
+```
+
+In the file **~/onos/web/gui2/BUILD** in the *genrule* section **_onos-gui2-ng-build**
+add to the **srcs** section:
+```
+"//apps/${artifactId}/web/${artifactId}-gui:${artifactId}-gui-lib-build",
+```
+
+and in the **cmd** section of the same *genrule* add the following 3 lines
+(just before the comment *"# End of add in modules from external packages"*):
+```
+" ${appNameAllCaps}_GUI_LIB_FILES=($(locations //apps/${artifactId}/web/${artifactId}-gui:${artifactId}-gui-lib-build)) &&" +  # An array of filenames - sorted by time created
+" tar xf $$ROOT/$${${appNameAllCaps}_GUI_LIB_FILES[0]} &&" +
+" mv package/ node_modules/${artifactId}-gui-lib/ &&" +
+```
+
+### Add to routing
+Finally to use the ${artifactId}-gui-lib in the ONOS GUI, add it to the Angular
+Router
+* Add it as a route to **~/onos/web/gui2/src/main/webapp/app/onos-routing.module.ts**
+in the "routes" array as:
+```angular2
+  {
+    path: '${artifactId}-gui',
+    loadChildren: '${artifactId}-gui-lib#${appNameCap}${appNameEnd}GuiLibModule'
+  }
+```
+and in the imports section at the top of the same file
+```angular2
+ import { ${appNameCap}${appNameEnd}GuiLibModule } from '${artifactId}-gui-lib';
+```
+
+### Run the build
+Run Bazel build with
+```bash
+cd ~/onos && \
+ob
+```
+or equivalent.
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/BUILD.rename b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/BUILD.rename
index e5f4913..6396473 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/BUILD.rename
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/BUILD.rename
@@ -1,6 +1,12 @@
-onos_app(
-    category = "Graphical User Interface",
-    description = "ONOS OSGi GUI2 Custom-View app ${artifactId}.",
-    title = "${artifactId} Application",
-    url = "http://onosproject.org",
+COMPILE_DEPS = CORE_DEPS + JACKSON + [
+    "//core/store/serializers:onos-core-serializers",
+]
+
+TEST_DEPS = TEST_ADAPTERS + [
+    "//utils/osgi:onlab-osgi-tests",
+]
+
+osgi_jar_with_tests(
+    test_deps = TEST_DEPS,
+    deps = COMPILE_DEPS,
 )
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/pom.xml b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/pom.xml
index 0292573..75a1c31 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/pom.xml
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/pom.xml
@@ -33,8 +33,8 @@
     <packaging>bundle</packaging>
 
     <properties>
-        <onos.app.name>${package}.${artifactID}</onos.app.name>
-        <onos.app.title>Foo App</onos.app.title>
+        <onos.app.name>${package}.${artifactId}</onos.app.name>
+        <onos.app.title>${appNameCap}${appNameEnd} App</onos.app.title>
         <onos.app.origin>Foo, Inc.</onos.app.origin>
         <onos.app.category>UI</onos.app.category>
         <onos.app.url>http://onosproject.org</onos.app.url>
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/package-info.java b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/package-info.java
new file mode 100644
index 0000000..870f7cb
--- /dev/null
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/package-info.java
@@ -0,0 +1,20 @@
+/*
+ * Copyright ${year}-present Open Networking Foundation
+ *
+ * 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.
+ */
+
+/**
+ * The ${artifactId} application.
+ */
+package ${package};
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/pom.xml b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/pom.xml
index bbea8c7..53d7322 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/pom.xml
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/pom.xml
@@ -6,7 +6,8 @@
 #set ($artifactId = "${artifactId}")
 #set ($appNameCap = $artifactId.substring(0,1).toUpperCase())
 #set ($appNameEnd = $artifactId.substring(1).replace("-","").toLowerCase())
-#set ($appNameAllCaps = $artifactId.toUpperCase())
+#set ($appNameAllCaps = $artifactId.replace("-","_").toUpperCase())
+#set( $symbol_h2 = '##' )
 
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/BUILD.rename b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/BUILD.rename
index b0eafd4..0d28862 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/BUILD.rename
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/BUILD.rename
@@ -65,7 +65,7 @@
 """
     Run ng build to create ${artifactId} GUI 2 library in production mode
     The output file ${artifactId}-gui-lib-ver.tgz is in the form that can be uploaded directly to https://www.npmjs.com/
-    See bazel-genfiles/web/${artifactId}-gui-lib/${artifactId}-gui-lib.log for details of the Angular CLI output
+    See bazel-genfiles/apps/${artifactId}/web/${artifactId}-gui/${artifactId}-gui-lib.log for details of the Angular CLI output
 """
 
 genrule(
@@ -91,37 +91,37 @@
           " export XDG_CONFIG_HOME=$(@D)/config &&" +
           " NODE=$(location @nodejs//:bin/node) &&" +
           " INSTALL_FILES=($(locations //web/gui2-fw-lib:onos-gui2-fw-npm-install)) &&" +  # An array of filenames - sorted by time created
-          " ${appNameAllCaps}_FILES=($(locations //web/gui2-fw-lib:onos-gui2-fw-ng-build)) &&" +  # An array of filenames - sorted by time created
-          " mkdir -p web/${artifactId}-gui-lib &&" +
-          " cd web/${artifactId}-gui-lib &&" +
+          " FWLIB_FILES=($(locations //web/gui2-fw-lib:onos-gui2-fw-ng-build)) &&" +  # An array of filenames - sorted by time created
+          " mkdir -p apps/${artifactId}/web/${artifactId}-gui &&" +
+          " cd apps/${artifactId}/web/${artifactId}-gui &&" +
           " jar xf $$ROOT/$${INSTALL_FILES[0]} &&" +
-          " tar xf $$ROOT/$${${appNameAllCaps}_FILES[0]} &&" +
+          " tar xf $$ROOT/$${FWLIB_FILES[0]} &&" +
           " mv package/ node_modules/gui2-fw-lib/ &&" +
           " mkdir -p projects/${artifactId}-gui-lib/fw &&" +
           " (cd projects/${artifactId}-gui-lib/fw &&" +
           "  jar xf $$ROOT/$(location //web/gui2-fw-lib:gui2_fw_lib_ext_css)) &&" +
           " chmod +x node_modules/@angular/cli/bin/ng &&" +
-          " export PATH=$$ROOT/$$(dirname $${NODE}):$$ROOT/web/${artifactId}-gui-lib/node_modules/@angular/cli/bin:$$PATH &&" +
+          " export PATH=$$ROOT/$$(dirname $${NODE}):$$ROOT/apps/${artifactId}/web/${artifactId}-gui/node_modules/@angular/cli/bin:$$PATH &&" +
           " ng build ${artifactId}-gui-lib >> $$ROOT/$(location ${artifactId}-gui-lib.log) 2>&1 ||" +
           " if [ $$? -eq 0 ]; then echo 'Successfully ran build';" +
           " else " +
-          "   echo 'Error running \'ng build ${artifactId}-gui-lib\' on \'//web/${artifactId}-gui-lib:${artifactId}-gui-lib-build\'. \\\n" +
-          "     See bazel-genfiles/web/${artifactId}-gui-lib/${artifactId}-gui-lib.log for more details' >&2;" +
-          #"   tail -n 100 ../../$(location onos-gui2-ng-test.log) >&2;" +
+          "   echo 'Error running \'ng build ${artifactId}-gui-lib\' on \'//apps/${artifactId}/web/${artifactId}-gui:${artifactId}-gui-lib-build\'. \\\n" +
+          "     See bazel-genfiles/apps/${artifactId}/web/${artifactId}-gui/${artifactId}-gui-lib.log for more details' >&2;" +
+          #"   tail -n 100 ../../../../$(location onos-gui2-ng-test.log) >&2;" +
           "   exit 1;" +
           " fi;" +
           " cp README.md LICENSE dist/${artifactId}-gui-lib && " +
           " npm pack ./dist/${artifactId}-gui-lib >> $$ROOT/$(location ${artifactId}-gui-lib.log) 2>&1 &&" +
           " mv ${artifactId}-gui-lib-*.tgz $$ROOT/$(location ${artifactId}-gui-lib-ver.tgz) &&" +
           " touch $$ROOT/$(location ${artifactId}-gui-lib.log)",  # to get the log always as the 2nd file,
-    message = "Angular ${artifactId} GUI2 build",
+    message = "Angular ${artifactId} Lib build",
     visibility = ["//visibility:public"],
 )
 
 """
     Run 'ng test' to run Angular test and 'ng lint' for checkstyle
-    See bazel-genfiles/web/${artifactId}-gui-lib/${artifactId}-gui-lib-lint.log or
-    bazel-genfiles/web/${artifactId}-gui-lib/${artifactId}-gui-lib-test.log for details of the Angular CLI output
+    See bazel-genfiles/apps/${artifactId}/web/${artifactId}-gui/${artifactId}-gui-lib-lint.log or
+    bazel-genfiles/apps/${artifactId}/web/${artifactId}-gui/${artifactId}-gui-lib-test.log for details of the Angular CLI output
 """
 
 genrule(
@@ -149,25 +149,25 @@
           " NODE=$(location @nodejs//:bin/node) &&" +
           " INSTALL_FILES=($(locations //web/gui2-fw-lib:onos-gui2-fw-npm-install)) &&" +  # An array of filenames - sorted by time created
           " FWLIB_FILES=($(locations //web/gui2-fw-lib:onos-gui2-fw-ng-build)) &&" +  # An array of filenames - sorted by time created
-          " mkdir -p web/${artifactId}-gui-lib &&" +
-          " cd web/${artifactId}-gui-lib &&" +
-          " jar xf ../../$(location :_${artifactId}_lib_src_tests) &&" +
+          " mkdir -p apps/${artifactId}/web/${artifactId}-gui &&" +
+          " cd apps/${artifactId}/web/${artifactId}-gui &&" +
+          " jar xf ../../../../$(location :_${artifactId}_lib_src_tests) &&" +
           " jar xf $$ROOT/$${INSTALL_FILES[0]} &&" +
           " tar xf $$ROOT/$${FWLIB_FILES[0]} &&" +
           " mv package/ node_modules/gui2-fw-lib/ &&" +
           " mkdir -p projects/${artifactId}-gui-lib/fw &&" +
           " (cd projects/${artifactId}-gui-lib/fw &&" +
           "  jar xf $$ROOT/$(location //web/gui2-fw-lib:gui2_fw_lib_ext_css)) &&" +
-          " chmod +x $$ROOT/web/${artifactId}-gui-lib/node_modules/@angular/cli/bin/ng &&" +
+          " chmod +x $$ROOT/apps/${artifactId}/web/${artifactId}-gui/node_modules/@angular/cli/bin/ng &&" +
           " export PATH=$$ROOT/$$(dirname $${NODE}):node_modules/@angular/cli/bin:$$PATH &&" +
-          " node -v > ../../$(location ${artifactId}-gui-lib-ver.log) &&" +
-          " npm -v >> ../../$(location ${artifactId}-gui-lib-ver.log) &&" +
-          " ng version >> ../../$(location ${artifactId}-gui-lib-ver.log) &&" +
-          " ng lint ${artifactId}-gui-lib > ../../$(location ${artifactId}-gui-lib-lint.log)  2>&1 ||" +
+          " node -v > ../../../../$(location ${artifactId}-gui-lib-ver.log) &&" +
+          " npm -v >> ../../../../$(location ${artifactId}-gui-lib-ver.log) &&" +
+          " ng version >> ../../../../$(location ${artifactId}-gui-lib-ver.log) &&" +
+          " ng lint ${artifactId}-gui-lib > ../../../../$(location ${artifactId}-gui-lib-lint.log)  2>&1 ||" +
           " if [ $$? -eq 0 ]; then echo 'Successfully ran lint';" +
           " else " +
-          "   echo 'Error running \'ng lint\' on \'//web/${artifactId}-gui-lib:_${artifactId}-gui-lib-test-genrule\'. \\\n" +
-          "     See bazel-genfiles/web/${artifactId}-gui-lib/${artifactId}-gui-lib-lint.log for more details' >&2;" +
+          "   echo 'Error running \'ng lint\' on \'//apps/${artifactId}/web/${artifactId}-gui:_${artifactId}-gui-lib-test-genrule\'. \\\n" +
+          "     See bazel-genfiles/apps/${artifactId}/web/${artifactId}-gui/${artifactId}-gui-lib-lint.log for more details' >&2;" +
           "   exit 1;" +
           " fi;" +
           " if [ -f /usr/bin/chromium-browser ]; then " +  # Add to this for Mac and Chrome
@@ -179,18 +179,18 @@
           "   no binary for ChromeHeadless browser was found at /usr/bin/chromium-browser. \\n" +
           "   Install Google Chrome or Chromium Browser to allow this step to run.';" +
           "   echo -e $$MSG >&2;" +
-          "   echo -e $$MSG > ../../$(location ${artifactId}-gui-lib-test.log);" +
+          "   echo -e $$MSG > ../../../../$(location ${artifactId}-gui-lib-test.log);" +
           "   exit 0;" +
           " fi;" +
           " ng test ${artifactId}-gui-lib --preserve-symlinks --code-coverage --browsers=ChromeHeadless" +
-          "     --watch=false > ../../$(location ${artifactId}-gui-lib-test.log) 2>&1 ||" +
+          "     --watch=false > ../../../../$(location ${artifactId}-gui-lib-test.log) 2>&1 ||" +
           " if [ $$? -eq 0 ]; then echo 'Successfully ran tests';" +
           " else " +
-          "   echo 'Error running \'ng test ${artifactId}-gui-lib\' on \'//web/${artifactId}-gui-lib:_${artifactId}-gui-lib-test-genrule\'. \\\n" +
-          "     See bazel-genfiles/web/${artifactId}-gui-lib/${artifactId}-gui-lib-test.log for more details' >&2;" +
+          "   echo 'Error running \'ng test ${artifactId}-gui-lib\' on \'//apps/${artifactId}/web/${artifactId}-gui:_${artifactId}-gui-lib-test-genrule\'. \\\n" +
+          "     See bazel-genfiles/apps/${artifactId}/web/${artifactId}-gui/${artifactId}-gui-lib-test.log for more details' >&2;" +
           "   exit 1;" +
           " fi;",
-    message = "Angular Topo GUI2 Lib lint and test",
+    message = "Angular ${appNameCap}${appNameEnd} Lib lint and test",
 )
 
 """
@@ -250,8 +250,8 @@
         ],
     ),
     outs = ["${artifactId}_gui_lib_src_tests.jar"],
-    cmd = "cd web/${artifactId}-gui-lib &&" +
-          " jar Mcf ../../$@ .",
+    cmd = "cd apps/${artifactId}/web/${artifactId}-gui &&" +
+          " jar Mcf ../../../../$@ .",
 )
 
 """
@@ -273,9 +273,9 @@
         ],
     ),
     outs = ["${artifactId}_gui_lib_tests.jar"],
-    cmd = "cd web/${artifactId}-gui-lib &&" +
+    cmd = "cd apps/${artifactId}/web/${artifactId}-gui &&" +
           " find projects/${artifactId}-gui-lib/src/lib -type f -exec touch -t 201808280000 {} \; &&" +
-          " jar Mcf ../../$@ projects/${artifactId}-gui-lib/src/lib",
+          " jar Mcf ../../../../$@ projects/${artifactId}-gui-lib/src/lib",
 )
 
 """
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/ng-test.sh b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/ng-test.sh
new file mode 100755
index 0000000..1c3d95a
--- /dev/null
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/ng-test.sh
@@ -0,0 +1,26 @@
+#!/bin/bash
+set -euo pipefail
+# --- begin runfiles.bash initialization ---
+if [[ ! -d "${RUNFILES_DIR:-/dev/null}" && ! -f "${RUNFILES_MANIFEST_FILE:-/dev/null}" ]]; then
+    if [[ -f "$0.runfiles_manifest" ]]; then
+      export RUNFILES_MANIFEST_FILE="$0.runfiles_manifest"
+    elif [[ -f "$0.runfiles/MANIFEST" ]]; then
+      export RUNFILES_MANIFEST_FILE="$0.runfiles/MANIFEST"
+    elif [[ -f "$0.runfiles/bazel_tools/tools/bash/runfiles/runfiles.bash" ]]; then
+      export RUNFILES_DIR="$0.runfiles"
+    fi
+fi
+
+if [[ -f "${RUNFILES_DIR:-/dev/null}/bazel_tools/tools/bash/runfiles/runfiles.bash" ]]; then
+  source "${RUNFILES_DIR}/bazel_tools/tools/bash/runfiles/runfiles.bash"
+elif [[ -f "${RUNFILES_MANIFEST_FILE:-/dev/null}" ]]; then
+  source "$(grep -m1 "^bazel_tools/tools/bash/runfiles/runfiles.bash " \
+            "$RUNFILES_MANIFEST_FILE" | cut -d ' ' -f 2-)"
+else
+  echo >&2 "ERROR: cannot find @bazel_tools//tools/bash/runfiles:runfiles.bash"
+  exit 1
+fi
+
+# --- end runfiles.bash initialization ---
+
+
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/package.json b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/package.json
index d90d0d7..11f711e 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/package.json
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/package.json
@@ -12,6 +12,8 @@
   },
   "peerDependencies": {
     "@angular/common": "^7.0.0",
-    "@angular/core": "^7.0.0"
+    "@angular/core": "^7.0.0",
+    "gui2-fw-lib": "^2.1.1",
+    "d3": "^5.9.2"
   }
-}
\ No newline at end of file
+}
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.spec.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.spec.ts
index 1aa7d04..5d0c76a 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.spec.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.spec.ts
@@ -16,16 +16,68 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ${appNameCap}${appNameEnd}Component } from './${artifactId}.component';
+import {ActivatedRoute, Params} from '@angular/router';
+import { of } from 'rxjs';
+import { } from 'jasmine';
+import {
+    FnService,
+    IconService,
+    IconComponent,
+    LogService,
+    TableFilterPipe, LoadingComponent,
+} from 'gui2-fw-lib';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {FormsModule} from '@angular/forms';
+import {RouterTestingModule} from '@angular/router/testing';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+class MockIconService {
+    loadIconDef() { }
+}
 
 describe('${appNameCap}${appNameEnd}Component', () => {
+    let fs: FnService;
+    let ar: MockActivatedRoute;
+    let windowMock: Window;
+    let logServiceSpy: jasmine.SpyObj<LogService>;
     let component: ${appNameCap}${appNameEnd}Component;
     let fixture: ComponentFixture<${appNameCap}${appNameEnd}Component>;
 
     beforeEach(async(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+        ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+        windowMock = <any>{
+            location: <any>{
+                hostname: 'foo',
+                host: 'foo',
+                port: '80',
+                protocol: 'http',
+                search: { debug: 'true' },
+                href: 'ws://foo:123/onos/ui/websock/path',
+                absUrl: 'ws://foo:123/onos/ui/websock/path'
+            }
+        };
+        fs = new FnService(ar, logSpy, windowMock);
+
         TestBed.configureTestingModule({
-            declarations: [ ${appNameCap}${appNameEnd}Component ]
+            imports: [BrowserAnimationsModule, FormsModule, RouterTestingModule],
+            declarations: [ ${appNameCap}${appNameEnd}Component ],
+            providers: [
+                { provide: FnService, useValue: fs },
+                { provide: LogService, useValue: logSpy },
+                { provide: IconService, useClass: MockIconService },
+                { provide: 'Window', useValue: windowMock },
+            ]
         })
         .compileComponents();
+        logServiceSpy = TestBed.get(LogService);
     }));
 
     beforeEach(() => {
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.ts
index 5177356..d510867 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.ts
@@ -38,7 +38,7 @@
     ngOnInit() {
         this.wss.bindHandlers(new Map<string, (data) => void>([
             [SAMPLE_CUSTOM_DATA_RESP, (data) => {
-                this.log.debug(SAMPLE_CUSTOM_DATA_RESP, data)
+                this.log.debug(SAMPLE_CUSTOM_DATA_RESP, data);
             }
             ]
         ]));
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.spec.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.spec.ts
index 28c59a9..103e29f 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.spec.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.spec.ts
@@ -16,16 +16,68 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { WelcomeComponent } from './welcome.component';
+import {ActivatedRoute, Params} from '@angular/router';
+import { of } from 'rxjs';
+import { } from 'jasmine';
+import {
+    FnService,
+    IconService,
+    IconComponent,
+    LogService,
+    TableFilterPipe, LoadingComponent,
+} from 'gui2-fw-lib';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {FormsModule} from '@angular/forms';
+import {RouterTestingModule} from '@angular/router/testing';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+class MockIconService {
+    loadIconDef() { }
+}
 
 describe('WelcomeComponent', () => {
+    let fs: FnService;
+    let ar: MockActivatedRoute;
+    let windowMock: Window;
+    let logServiceSpy: jasmine.SpyObj<LogService>;
     let component: WelcomeComponent;
     let fixture: ComponentFixture<WelcomeComponent>;
 
     beforeEach(async(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+        ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+        windowMock = <any>{
+            location: <any>{
+                hostname: 'foo',
+                host: 'foo',
+                port: '80',
+                protocol: 'http',
+                search: { debug: 'true' },
+                href: 'ws://foo:123/onos/ui/websock/path',
+                absUrl: 'ws://foo:123/onos/ui/websock/path'
+            }
+        };
+        fs = new FnService(ar, logSpy, windowMock);
+
         TestBed.configureTestingModule({
-            declarations: [ WelcomeComponent ]
+            imports: [BrowserAnimationsModule, FormsModule, RouterTestingModule],
+            declarations: [ WelcomeComponent ],
+            providers: [
+                { provide: FnService, useValue: fs },
+                { provide: LogService, useValue: logSpy },
+                { provide: IconService, useClass: MockIconService },
+                { provide: 'Window', useValue: windowMock },
+            ]
         })
         .compileComponents();
+        logServiceSpy = TestBed.get(LogService);
     }));
 
     beforeEach(() => {
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/tslint.json b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/tslint.json
index 6b8354e..ee5daee 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/tslint.json
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/tslint.json
@@ -4,13 +4,13 @@
     "directive-selector": [
       true,
       "attribute",
-      "sample-app",
+      "${artifactId}",
       "camelCase"
     ],
     "component-selector": [
       true,
       "element",
-      "sample-app",
+      "${artifactId}",
       "kebab-case"
     ]
   }