diff --git a/ngapp/e2e/app.e2e-spec.ts b/ngapp/e2e/app.e2e-spec.ts
index ce845c4e..7b5d260f 100644
--- a/ngapp/e2e/app.e2e-spec.ts
+++ b/ngapp/e2e/app.e2e-spec.ts
@@ -1,14 +1,14 @@
-import { AppPage } from './app.po';
+import { AppPage } from "./app.po";
 
-describe('beetle-studio App', () => {
+describe("beetle-studio App", () => {
   let page: AppPage;
 
   beforeEach(() => {
     page = new AppPage();
   });
 
-  it('should display welcome message', () => {
+  it("should display welcome message", () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to app!');
+    expect(page.getParagraphText()).toEqual("Welcome to app!");
   });
 });
diff --git a/ngapp/e2e/app.po.ts b/ngapp/e2e/app.po.ts
index 82ea75ba..b7e87d8a 100644
--- a/ngapp/e2e/app.po.ts
+++ b/ngapp/e2e/app.po.ts
@@ -1,11 +1,12 @@
-import { browser, by, element } from 'protractor';
+import { browser, by, element } from "protractor";
+import { promise } from "selenium-webdriver";
 
 export class AppPage {
-  navigateTo() {
-    return browser.get('/');
+  public navigateTo(): promise.Promise< any > {
+    return browser.get("/");
   }
 
-  getParagraphText() {
-    return element(by.css('app-root h1')).getText();
+  public getParagraphText(): promise.Promise<string> {
+    return element(by.css("app-root h1")).getText();
   }
 }
diff --git a/ngapp/src/app/activities/activities-cards/activities-cards.component.spec.ts b/ngapp/src/app/activities/activities-cards/activities-cards.component.spec.ts
index cb150f35..ac58cb3e 100644
--- a/ngapp/src/app/activities/activities-cards/activities-cards.component.spec.ts
+++ b/ngapp/src/app/activities/activities-cards/activities-cards.component.spec.ts
@@ -1,9 +1,8 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-
-import {ActivitiesCardsComponent} from './activities-cards.component';
+import {ActivitiesCardsComponent} from "@activities/activities-cards/activities-cards.component";
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
 import {RouterModule} from "@angular/router";
 
-describe('ActivitiesCardsComponent', () => {
+describe("ActivitiesCardsComponent", () => {
   let component: ActivitiesCardsComponent;
   let fixture: ComponentFixture<ActivitiesCardsComponent>;
 
@@ -21,7 +20,7 @@ describe('ActivitiesCardsComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/activities/activities-cards/activities-cards.component.ts b/ngapp/src/app/activities/activities-cards/activities-cards.component.ts
index 48e97ee3..a8be58a2 100644
--- a/ngapp/src/app/activities/activities-cards/activities-cards.component.ts
+++ b/ngapp/src/app/activities/activities-cards/activities-cards.component.ts
@@ -15,34 +15,35 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { EventEmitter } from '@angular/core';
-import { Input } from '@angular/core';
-import { Output } from '@angular/core';
-
-import { Activity } from '@activities/shared/activity.model';
+import { Activity } from "@activities/shared/activity.model";
+import { Component } from "@angular/core";
+import { EventEmitter } from "@angular/core";
+import { Input } from "@angular/core";
+import { Output } from "@angular/core";
 
 @Component({
   moduleId: module.id,
-  selector: 'app-activities-cards',
-  templateUrl: 'activities-cards.component.html',
-  styleUrls: ['activities-cards.component.css']
+  selector: "app-activities-cards",
+  templateUrl: "activities-cards.component.html",
+  styleUrls: ["activities-cards.component.css"]
 })
 export class ActivitiesCardsComponent {
 
-  @Input() activities: Activity[];
-  @Input() selectedActivities: Activity[];
-  @Output() onActivitySelected: EventEmitter<Activity> = new EventEmitter<Activity>();
-  @Output() onActivityDeselected: EventEmitter<Activity> = new EventEmitter<Activity>();
-  @Output() onTagSelected: EventEmitter<string> = new EventEmitter<string>();
-  @Output() onStartActivity: EventEmitter<string> = new EventEmitter<string>();
-  @Output() onEditActivity: EventEmitter<string> = new EventEmitter<string>();
-  @Output() onDeleteActivity: EventEmitter<string> = new EventEmitter<string>();
+  @Input() private activities: Activity[];
+  @Input() private selectedActivities: Activity[];
+  @Output() private onActivitySelected: EventEmitter<Activity> = new EventEmitter<Activity>();
+  @Output() private onActivityDeselected: EventEmitter<Activity> = new EventEmitter<Activity>();
+  @Output() private onTagSelected: EventEmitter<string> = new EventEmitter<string>();
+  @Output() private onStartActivity: EventEmitter<string> = new EventEmitter<string>();
+  @Output() private onEditActivity: EventEmitter<string> = new EventEmitter<string>();
+  @Output() private onDeleteActivity: EventEmitter<string> = new EventEmitter<string>();
 
   /**
    * Constructor.
    */
-  constructor() {}
+  constructor() {
+    // nothing to do
+  }
 
   public toggleActivitySelected(activity: Activity): void {
     if (this.isSelected(activity)) {
@@ -75,4 +76,3 @@ export class ActivitiesCardsComponent {
   }
 
 }
-
diff --git a/ngapp/src/app/activities/activities-list/activities-list.component.spec.ts b/ngapp/src/app/activities/activities-list/activities-list.component.spec.ts
index e5333214..6cf27629 100644
--- a/ngapp/src/app/activities/activities-list/activities-list.component.spec.ts
+++ b/ngapp/src/app/activities/activities-list/activities-list.component.spec.ts
@@ -1,9 +1,8 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-
-import {ActivitiesListComponent} from './activities-list.component';
+import {ActivitiesListComponent} from "@activities/activities-list/activities-list.component";
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
 import {RouterModule} from "@angular/router";
 
-describe('ActivitiesListComponent', () => {
+describe("ActivitiesListComponent", () => {
   let component: ActivitiesListComponent;
   let fixture: ComponentFixture<ActivitiesListComponent>;
 
@@ -21,7 +20,7 @@ describe('ActivitiesListComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/activities/activities-list/activities-list.component.ts b/ngapp/src/app/activities/activities-list/activities-list.component.ts
index d328d2d5..bd046482 100644
--- a/ngapp/src/app/activities/activities-list/activities-list.component.ts
+++ b/ngapp/src/app/activities/activities-list/activities-list.component.ts
@@ -15,34 +15,35 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { EventEmitter } from '@angular/core';
-import { Input } from '@angular/core';
-import { Output } from '@angular/core';
-
-import { Activity } from '@activities/shared/activity.model';
+import { Activity } from "@activities/shared/activity.model";
+import { Component } from "@angular/core";
+import { EventEmitter } from "@angular/core";
+import { Input } from "@angular/core";
+import { Output } from "@angular/core";
 
 @Component({
   moduleId: module.id,
-  selector: 'app-activities-list',
-  templateUrl: 'activities-list.component.html',
-  styleUrls: ['activities-list.component.css']
+  selector: "app-activities-list",
+  templateUrl: "activities-list.component.html",
+  styleUrls: ["activities-list.component.css"]
 })
 export class ActivitiesListComponent {
 
-  @Input() activities: Activity[];
-  @Input() selectedActivities: Activity[];
-  @Output() onActivitySelected: EventEmitter<Activity> = new EventEmitter<Activity>();
-  @Output() onActivityDeselected: EventEmitter<Activity> = new EventEmitter<Activity>();
-  @Output() onTagSelected: EventEmitter<string> = new EventEmitter<string>();
-  @Output() onEditActivity: EventEmitter<string> = new EventEmitter<string>();
-  @Output() onStartActivity: EventEmitter<string> = new EventEmitter<string>();
-  @Output() onDeleteActivity: EventEmitter<string> = new EventEmitter<string>();
+  @Input() private activities: Activity[];
+  @Input() private selectedActivities: Activity[];
+  @Output() private onActivitySelected: EventEmitter<Activity> = new EventEmitter<Activity>();
+  @Output() private onActivityDeselected: EventEmitter<Activity> = new EventEmitter<Activity>();
+  @Output() private onTagSelected: EventEmitter<string> = new EventEmitter<string>();
+  @Output() private onEditActivity: EventEmitter<string> = new EventEmitter<string>();
+  @Output() private onStartActivity: EventEmitter<string> = new EventEmitter<string>();
+  @Output() private onDeleteActivity: EventEmitter<string> = new EventEmitter<string>();
 
   /**
    * Constructor.
    */
-  constructor() {}
+  constructor() {
+    // nothing to do
+  }
 
   public toggleActivitySelected(activity: Activity): void {
     if (this.isSelected(activity)) {
diff --git a/ngapp/src/app/activities/activities-routing.module.ts b/ngapp/src/app/activities/activities-routing.module.ts
index dfb15b51..d91f9a7b 100644
--- a/ngapp/src/app/activities/activities-routing.module.ts
+++ b/ngapp/src/app/activities/activities-routing.module.ts
@@ -2,12 +2,7 @@
  * @license
  * Copyright 2017 JBoss 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
- *
+ * Licensed under the Apache License, /
  * 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.
@@ -15,16 +10,20 @@
  * limitations under the License.
  */
 
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { Routes } from '@angular/router';
-
 import { ActivitiesComponent } from "@activities/activities.component";
 import { AddActivityComponent } from "@activities/add-activity/add-activity.component";
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { Routes } from "@angular/router";
+
+export const activitiesRootPath = "/activities";
+export const addActivityPath = activitiesRootPath + "/add-activity";
+export const editActivityPath = activitiesRootPath + "/edit-activity";
 
 const activitiesRoutes: Routes = [
-  { path: 'activities', component: ActivitiesComponent },
-  { path: 'activities/add-activity', component: AddActivityComponent }
+  { path: activitiesRootPath, component: ActivitiesComponent },
+  { path: addActivityPath, component: AddActivityComponent }
+//  { path: editActivityPath, component: EditActivityComponent }
 ];
 
 @NgModule({
diff --git a/ngapp/src/app/activities/activities.component.html b/ngapp/src/app/activities/activities.component.html
index 24ae1492..00566588 100644
--- a/ngapp/src/app/activities/activities.component.html
+++ b/ngapp/src/app/activities/activities.component.html
@@ -18,22 +18,22 @@ <h2>Activities</h2>
           <div class="form-group toolbar-pf-filter">
             <label class="sr-only" for="filter">Name</label>
             <div class="input-group" style="width: 100%">
-              <input name="name-filter" [(ngModel)]="filters.nameFilter" type="text" class="form-control name-filter" id="filter" placeholder="Filter by name...">
+              <input name="name-filter" [(ngModel)]="nameFilter" type="text" class="form-control name-filter" id="filter" placeholder="Filter by name...">
             </div>
           </div>
           <div class="form-group">
             <button class="btn btn-link" type="button" (click)="toggleSortDirection()">
-              <span *ngIf="filters.sortDirection === 'ASC'" class="fa fa-sort-alpha-asc"></span>
-              <span *ngIf="filters.sortDirection === 'DESC'" class="fa fa-sort-alpha-desc"></span>
+              <span *ngIf="isSortAscending" class="fa fa-sort-alpha-asc"></span>
+              <span *ngIf="isSortDescending" class="fa fa-sort-alpha-desc"></span>
             </button>
           </div>
           <div class="form-group">
-            <a class="btn btn-primary" [routerLink]="['/activities/add-activity']">Add Activity</a>
+            <a class="btn btn-primary" [routerLink]="[ addActivityLink ]">Add Activity</a>
           </div>
           <div class="form-group toolbar-pf-view-selector">
             <ul class="list-inline">
-              <li *ngIf="filters.layout === 'list'"><a (click)="onCardLayout()"><i class="fa fa-th-list"></i></a></li>
-              <li *ngIf="filters.layout === 'card'"><a (click)="onListLayout()"><i class="fa fa-th"></i></a></li>
+              <li *ngIf="isListLayout"><a (click)="onCardLayout()"><i class="fa fa-th-list"></i></a></li>
+              <li *ngIf="isCardLayout"><a (click)="onListLayout()"><i class="fa fa-th"></i></a></li>
             </ul>
           </div>
         </form>
@@ -60,7 +60,7 @@ <h1>No Activities Found</h1>
           </p>
           <div class="blank-slate-pf-main-action">
             <div class="btn-group">
-              <a class="btn btn-primary btn-lg" [routerLink]="['/activities/add-activity']">Add Activity</a>
+              <a class="btn btn-primary btn-lg" [routerLink]="[ addActivityLink ]">Add Activity</a>
             </div>
           </div>
         </div>
@@ -79,7 +79,7 @@ <h1>No Activities Found</h1>
             <div class="card-pf card-pf-accented">
               <div class="card-pf-heading">
                 <h1 class="card-pf-title">
-                  <p><span class="spinner spinner-xs spinner-inline"></span> Loading Activities...</p>
+                  <span class="spinner spinner-xs spinner-inline"></span> Loading Activities...
                 </h1>
               </div>
             </div>
@@ -89,10 +89,10 @@ <h1 class="card-pf-title">
 
       <!-- The list or card view -->
       <div class="col-md-12" *ngIf="isLoaded('activities')">
-        <app-activities-list *ngIf="filters.layout === 'list'" [activities]="filteredActivities" [selectedActivities]="selectedActivities"
+        <app-activities-list *ngIf="isListLayout" [activities]="filteredActivities" [selectedActivities]="selectedActivities"
                              (onEditActivity)="onEdit($event)" (onStartActivity)="onStart($event)" (onDeleteActivity)="onDelete($event)"
                              (onActivitySelected)="onSelected($event)" (onActivityDeselected)="onDeselected($event)"></app-activities-list>
-        <app-activities-cards *ngIf="filters.layout === 'card'" [activities]="filteredActivities" [selectedActivities]="selectedActivities"
+        <app-activities-cards *ngIf="isCardLayout" [activities]="filteredActivities" [selectedActivities]="selectedActivities"
                               (onEditActivity)="onEdit($event)" (onStartActivity)="onStart($event)" (onDeleteActivity)="onDelete($event)"
                               (onActivitySelected)="onSelected($event)" (onActivityDeselected)="onDeselected($event)"></app-activities-cards>
       </div>
diff --git a/ngapp/src/app/activities/activities.component.spec.ts b/ngapp/src/app/activities/activities.component.spec.ts
index e0d7b7b8..2eb9437c 100644
--- a/ngapp/src/app/activities/activities.component.spec.ts
+++ b/ngapp/src/app/activities/activities.component.spec.ts
@@ -1,16 +1,15 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-
-import {ActivitiesComponent} from './activities.component';
-import {FormsModule} from "@angular/forms";
-import {RouterTestingModule} from "@angular/router/testing";
-import {ActivitiesListComponent} from "@activities/activities-list/activities-list.component";
 import {ActivitiesCardsComponent} from "@activities/activities-cards/activities-cards.component";
-import {ModalModule} from "ngx-bootstrap";
+import {ActivitiesListComponent} from "@activities/activities-list/activities-list.component";
+import {ActivitiesComponent} from "@activities/activities.component";
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
+import {FormsModule} from "@angular/forms";
 import {HttpModule} from "@angular/http";
+import {RouterTestingModule} from "@angular/router/testing";
 import {CoreModule} from "@core/core.module";
 import {SharedModule} from "@shared/shared.module";
+import {ModalModule} from "ngx-bootstrap";
 
-describe('ActivitiesComponent', () => {
+describe("ActivitiesComponent", () => {
   let component: ActivitiesComponent;
   let fixture: ComponentFixture<ActivitiesComponent>;
 
@@ -28,7 +27,7 @@ describe('ActivitiesComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/activities/activities.component.ts b/ngapp/src/app/activities/activities.component.ts
index 9e5c5827..3d0e316c 100644
--- a/ngapp/src/app/activities/activities.component.ts
+++ b/ngapp/src/app/activities/activities.component.ts
@@ -15,70 +15,54 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Router } from '@angular/router';
-
-import { Activity } from '@activities/shared/activity.model';
-import { NewActivity } from '@activities/shared/new-activity.model';
-import { ActivityService } from '@activities/shared/activity.service';
-import { ArrayUtils } from '@core/common';
+import { addActivityPath, editActivityPath } from "@activities/activities-routing.module";
+import { Activity } from "@activities/shared/activity.model";
+import { ActivityService } from "@activities/shared/activity.service";
+import { NewActivity } from "@activities/shared/new-activity.model";
+import { ViewChild } from "@angular/core";
+import { Component } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { Router } from "@angular/router";
+import { ArrayUtils } from "@core/utils/array-utils";
 import { AbstractPageComponent } from "@shared/abstract-page.component";
-import { ConfirmDeleteComponent } from '@shared/confirm-delete/confirm-delete.component';
-
-class Filters {
-  nameFilter: string;
-  sortDirection: string;
-  layout: string;
-
-  constructor(params?: any) {
-    this.reset();
-    if (params) {
-      for (const key of Object.keys(params)) {
-        this[key] = params[ key ];
-      }
-    }
-  }
-
-  public accepts(activity: Activity): boolean {
-    const name: string = activity.getId().toLocaleLowerCase();
-    const namef: string = this.nameFilter.toLocaleLowerCase();
-    return name.indexOf(namef) >= 0;
-  }
-
-  public reset(): void {
-    this.nameFilter = '';
-    this.sortDirection = 'ASC';
-    this.layout = 'card';
-  }
-}
+import { ConfirmDeleteComponent } from "@shared/confirm-delete/confirm-delete.component";
+import { IdFilter } from "@shared/id-filter";
+import { LayoutType } from "@shared/layout-type.enum";
+import { SortDirection } from "@shared/sort-direction.enum";
 
 @Component({
   moduleId: module.id,
-  selector: 'app-activities',
-  templateUrl: './activities.component.html',
-  styleUrls: ['./activities.component.css'],
+  selector: "app-activities",
+  templateUrl: "./activities.component.html",
+  styleUrls: ["./activities.component.css"],
   providers: [ ActivityService ]
 })
 export class ActivitiesComponent extends AbstractPageComponent {
 
-  allActivities: Activity[] = [];
-  filteredActivities: Activity[] = [];
-  selectedActivities: Activity[] = [];
-  filters: Filters = new Filters();
+  public addActivityLink = addActivityPath;
+
+  private allActivities: Activity[] = [];
+  private filteredActivities: Activity[] = [];
+  private selectedActivities: Activity[] = [];
   private activityNameForDelete: string;
+  private router: Router;
+  private activityService: ActivityService;
+  private filter: IdFilter = new IdFilter();
+  private layout: LayoutType = LayoutType.CARD;
+  private sortDirection: SortDirection;
 
-  @ViewChild(ConfirmDeleteComponent) confirmDeleteDialog: ConfirmDeleteComponent;
+  @ViewChild(ConfirmDeleteComponent) private confirmDeleteDialog: ConfirmDeleteComponent;
 
-  constructor(private router: Router, route: ActivatedRoute, private activityService: ActivityService) {
+  constructor(router: Router, route: ActivatedRoute, activityService: ActivityService) {
     super(route);
+    this.router = router;
+    this.activityService = activityService;
   }
 
-  public loadAsyncPageData() {
+  public loadAsyncPageData(): void {
     this.allActivities = this.activityService.getAllActivities();
     this.filteredActivities = this.filterActivities();
-    this.loaded('activities');
+    this.loaded("activities");
   }
 
   /**
@@ -88,13 +72,13 @@ export class ActivitiesComponent extends AbstractPageComponent {
     // Clear the array first.
     this.filteredActivities.splice(0, this.filteredActivities.length);
     for (const activity of this.allActivities) {
-      if (this.filters.accepts(activity)) {
+      if (this.filter.accepts(activity)) {
         this.filteredActivities.push(activity);
       }
     }
     this.filteredActivities.sort( (a1: Activity, a2: Activity) => {
       let rval: number = a1.getId().localeCompare(a2.getId());
-      if (this.filters.sortDirection === 'DESC') {
+      if (this.sortDirection === SortDirection.DESC) {
         rval *= -1;
       }
       return rval;
@@ -118,7 +102,7 @@ export class ActivitiesComponent extends AbstractPageComponent {
   }
 
   public onEdit(activityName: string): void {
-    const link: string[] = [ '/activities/edit-activity' ];
+    const link: string[] = [ editActivityPath ];
     this.router.navigate(link);
   }
 
@@ -128,7 +112,7 @@ export class ActivitiesComponent extends AbstractPageComponent {
   }
 
   public onStart(activityName: string): void {
-    alert('Start activity ' + activityName);
+    alert("Start activity " + activityName);
   }
 
   public isFiltered(): boolean {
@@ -136,38 +120,73 @@ export class ActivitiesComponent extends AbstractPageComponent {
   }
 
   public toggleSortDirection(): void {
-    if (this.filters.sortDirection === 'ASC') {
-      this.filters.sortDirection = 'DESC';
+    if (this.sortDirection === SortDirection.ASC) {
+      this.sortDirection = SortDirection.DESC;
     } else {
-      this.filters.sortDirection = 'ASC';
+      this.sortDirection = SortDirection.ASC;
     }
     this.filterActivities();
   }
 
   public clearFilters(): void {
-    this.filters.nameFilter = '';
+    this.filter.reset();
     this.filterActivities();
   }
 
+  /**
+   * @returns {boolean} true if activities are being represented by cards
+   */
+  public get isCardLayout(): boolean {
+    return this.layout === LayoutType.CARD;
+  }
+
+  /**
+   * @returns {boolean} true if activities are being represented by items in a list
+   */
+  public get isListLayout(): boolean {
+    return this.layout === LayoutType.LIST;
+  }
+
+  /**
+   * @returns {boolean} true if sorting activity names in ascending order
+   */
+  public get isSortAscending(): boolean {
+    return this.sortDirection === SortDirection.ASC;
+  }
+
+  /**
+   * @returns {boolean} true if sorting activity names in descending order
+   */
+  public get isSortDescending(): boolean {
+    return this.sortDirection === SortDirection.DESC;
+  }
+
+  /**
+   * @returns {string} the pattern the activity names are being matched to (can be null or empty)
+   */
+  public get nameFilter(): string {
+    return this.filter.getPattern();
+  }
+
   public onListLayout(): void {
-    this.filters.layout = 'list';
+    this.layout = LayoutType.LIST;
   }
 
   public onCardLayout(): void {
-    this.filters.layout = 'card';
+    this.layout = LayoutType.CARD;
   }
 
   /**
-   * Called to delete all selected APIs.
+   * Called to doDelete all selected APIs.
    */
   public deleteActivity(): void {
-    const selectedActiv =  this.filterActivities().find(x => x.getId() === this.activityNameForDelete);
+    const selectedActivity =  this.filterActivities().find((x) => x.getId() === this.activityNameForDelete);
 
     const activityToDelete: NewActivity = new NewActivity();
-    activityToDelete.setName(selectedActiv.getId());
+    activityToDelete.setName(selectedActivity.getId());
 
-    // Note: we can only delete selected items that we can see in the UI.
-    console.log('[ActivitiesPageComponent] Deleting selected Activity.');
+    // Note: we can only doDelete selected items that we can see in the UI.
+    console.log("[ActivitiesPageComponent] Deleting selected Activity.");
     this.activityService.deleteActivity(activityToDelete);
     /*
     this.apiService
@@ -183,7 +202,7 @@ export class ActivitiesComponent extends AbstractPageComponent {
       */
   }
 
-  private removeActivityFromList(activity: Activity) {
+  private removeActivityFromList(activity: Activity): void {
     this.allActivities.splice(this.allActivities.indexOf(activity), 1);
     this.filterActivities();
   }
diff --git a/ngapp/src/app/activities/activities.module.ts b/ngapp/src/app/activities/activities.module.ts
index 68aa3dfd..392fddb4 100644
--- a/ngapp/src/app/activities/activities.module.ts
+++ b/ngapp/src/app/activities/activities.module.ts
@@ -15,18 +15,17 @@
  * limitations under the License.
  */
 
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule } from "@angular/forms";
-import { RouterModule } from "@angular/router";
-
 import { ActivitiesCardsComponent } from "@activities/activities-cards/activities-cards.component";
-import { ActivitiesComponent } from "@activities/activities.component";
 import { ActivitiesListComponent } from "@activities/activities-list/activities-list.component";
 import { ActivitiesRoutingModule } from "@activities/activities-routing.module";
+import { ActivitiesComponent } from "@activities/activities.component";
 import { AddActivityComponent } from "@activities/add-activity/add-activity.component";
-import { AddActivityFormComponent } from "@activities/shared/add-activity-form/add-activity-form.component";
 import { ActivityService } from "@activities/shared/activity.service";
+import { AddActivityFormComponent } from "@activities/shared/add-activity-form/add-activity-form.component";
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { RouterModule } from "@angular/router";
 import { ConnectionsModule } from "@connections/connections.module";
 import { CoreModule } from "@core/core.module";
 import { SharedModule } from "@shared/shared.module";
diff --git a/ngapp/src/app/activities/add-activity/add-activity.component.html b/ngapp/src/app/activities/add-activity/add-activity.component.html
index b5e62e7f..40204d82 100644
--- a/ngapp/src/app/activities/add-activity/add-activity.component.html
+++ b/ngapp/src/app/activities/add-activity/add-activity.component.html
@@ -1,7 +1,7 @@
 <div style="margin-left: 150px">
   <div id="activities-breadcrumb-bar">
     <breadcrumbs>
-      <li app-breadcrumb label="Activities" icon="cog" [route]="[ '/activities' ]"></li>
+      <li app-breadcrumb label="Activities" icon="cog" [route]="[ activitiesLink ]"></li>
       <li app-breadcrumb label="Add Activity" icon="plus" class="active"></li>
     </breadcrumbs>
   </div>
diff --git a/ngapp/src/app/activities/add-activity/add-activity.component.spec.ts b/ngapp/src/app/activities/add-activity/add-activity.component.spec.ts
index a2aed000..6f83ea28 100644
--- a/ngapp/src/app/activities/add-activity/add-activity.component.spec.ts
+++ b/ngapp/src/app/activities/add-activity/add-activity.component.spec.ts
@@ -1,15 +1,14 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-
-import {AddActivityComponent} from './add-activity.component';
+import {AddActivityComponent} from "@activities/add-activity/add-activity.component";
+import {ActivityService} from "@activities/shared/activity.service";
+import {AddActivityFormComponent} from "@activities/shared/add-activity-form/add-activity-form.component";
+import {MockActivityService} from "@activities/shared/mock-activity.service";
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
 import {FormsModule} from "@angular/forms";
+import {HttpModule} from "@angular/http";
 import {RouterTestingModule} from "@angular/router/testing";
-import {HttpModule} from '@angular/http';
-import {AddActivityFormComponent} from '@activities/shared/add-activity-form/add-activity-form.component';
-import {ActivityService} from '@activities/shared/activity.service';
-import {MockActivityService} from '@activities/shared/mock-activity.service';
 import {CoreModule} from "@core/core.module";
 
-describe('AddActivityComponent', () => {
+describe("AddActivityComponent", () => {
   let component: AddActivityComponent;
   let fixture: ComponentFixture<AddActivityComponent>;
 
@@ -30,7 +29,7 @@ describe('AddActivityComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/activities/add-activity/add-activity.component.ts b/ngapp/src/app/activities/add-activity/add-activity.component.ts
index 800d6275..eb38ea96 100644
--- a/ngapp/src/app/activities/add-activity/add-activity.component.ts
+++ b/ngapp/src/app/activities/add-activity/add-activity.component.ts
@@ -15,27 +15,34 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Router } from '@angular/router';
-
-import { ActivityService } from '@activities/shared/activity.service';
-import { AddActivityFormComponent } from '@activities/shared/add-activity-form/add-activity-form.component';
-import { NewActivity } from '@activities/shared/new-activity.model';
-import { AbstractPageComponent } from '@shared/abstract-page.component';
+import { activitiesRootPath } from "@activities/activities-routing.module";
+import { ActivityService } from "@activities/shared/activity.service";
+import { AddActivityFormComponent } from "@activities/shared/add-activity-form/add-activity-form.component";
+import { NewActivity } from "@activities/shared/new-activity.model";
+import { Component } from "@angular/core";
+import { ViewChild } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { Router } from "@angular/router";
+import { AbstractPageComponent } from "@shared/abstract-page.component";
 
 @Component({
-  selector: 'app-add-activity',
-  templateUrl: './add-activity.component.html',
-  styleUrls: ['./add-activity.component.css']
+  selector: "app-add-activity",
+  templateUrl: "./add-activity.component.html",
+  styleUrls: ["./add-activity.component.css"]
 })
 export class AddActivityComponent extends AbstractPageComponent {
 
-  @ViewChild(AddActivityFormComponent) form: AddActivityFormComponent;
+  public activitiesLink = activitiesRootPath;
+
+  private router: Router;
+  private activityService: ActivityService;
+
+  @ViewChild(AddActivityFormComponent) private form: AddActivityFormComponent;
 
-  constructor(private router: Router, route: ActivatedRoute, private activityService: ActivityService) {
+  constructor(router: Router, route: ActivatedRoute, activityService: ActivityService) {
     super(route);
+    this.router = router;
+    this.activityService = activityService;
   }
 
   /**
@@ -43,11 +50,11 @@ export class AddActivityComponent extends AbstractPageComponent {
    * from the add-activity.page.html template.
    * @param {NewActivity} activity
    */
-  public onCreateActivity(activity: NewActivity) {
-    console.log('[AddActivityComponent] onCreateActivity(): ' + JSON.stringify(activity));
+  public onCreateActivity(activity: NewActivity): void {
+    console.log("[AddActivityComponent] onCreateActivity(): " + JSON.stringify(activity));
     this.activityService.createActivity(activity);
-    const link: string[] = [ '/activities' ];
-    console.log('[AddActivityComponent] Navigating to: %o', link);
+    const link: string[] = [ activitiesRootPath ];
+    console.log("[AddActivityComponent] Navigating to: %o", link);
     this.router.navigate(link);
   }
 
diff --git a/ngapp/src/app/activities/shared/activity.model.ts b/ngapp/src/app/activities/shared/activity.model.ts
index 6f6f201a..32d64d14 100644
--- a/ngapp/src/app/activities/shared/activity.model.ts
+++ b/ngapp/src/app/activities/shared/activity.model.ts
@@ -25,10 +25,10 @@ export class Activity {
    * @param {Object} json the JSON representation of a Activity
    * @returns {Activity} the new Activity (never null)
    */
-  public static create( json: Object = {} ) {
-    const conn = new Activity();
-    conn.setValues( json );
-    return conn;
+  public static create( json: Object = {} ): Activity {
+    const activity = new Activity();
+    activity.setValues( json );
+    return activity;
   }
 
   constructor() {
@@ -81,7 +81,7 @@ export class Activity {
    * Set all object values using the supplied Activity json
    * @param {Object} values
    */
-  public setValues(values: Object = {}) {
+  public setValues(values: Object = {}): void {
     Object.assign(this, values);
   }
 }
diff --git a/ngapp/src/app/activities/shared/activity.service.spec.ts b/ngapp/src/app/activities/shared/activity.service.spec.ts
index 205583d8..64e8f7e6 100644
--- a/ngapp/src/app/activities/shared/activity.service.spec.ts
+++ b/ngapp/src/app/activities/shared/activity.service.spec.ts
@@ -1,9 +1,8 @@
-import { TestBed, inject } from '@angular/core/testing';
+import { ActivityService } from "@activities/shared/activity.service";
+import { inject, TestBed } from "@angular/core/testing";
 import { HttpModule } from "@angular/http";
 
-import { ActivityService } from './activity.service';
-
-describe('ActivityService', () => {
+describe("ActivityService", () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [ HttpModule ],
@@ -11,7 +10,7 @@ describe('ActivityService', () => {
     });
   });
 
-  it('should be created', inject([ActivityService], (service: ActivityService) => {
+  it("should be created", inject([ActivityService], (service: ActivityService) => {
     expect(service).toBeTruthy();
   }));
 });
diff --git a/ngapp/src/app/activities/shared/activity.service.ts b/ngapp/src/app/activities/shared/activity.service.ts
index d4cd06ac..cfe999dd 100644
--- a/ngapp/src/app/activities/shared/activity.service.ts
+++ b/ngapp/src/app/activities/shared/activity.service.ts
@@ -15,45 +15,46 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
-
 import { Activity } from "@activities/shared/activity.model";
 import { NewActivity } from "@activities/shared/new-activity.model";
+import { Injectable } from "@angular/core";
+import { Http } from "@angular/http";
 import { NewConnection } from "@connections/shared/new-connection.model";
 import { ApiService } from "@core/api.service";
 
 @Injectable()
 export class ActivityService extends ApiService {
 
-  activity1 = new Activity();
-  activity2 = new Activity();
-  activity3 = new Activity();
-  activities: Activity[] = [this.activity1, this.activity2, this.activity3];
-  newActivity1 = new NewActivity();
+  private activity1 = new Activity();
+  private activity2 = new Activity();
+  private activity3 = new Activity();
+  private activities: Activity[] = [this.activity1, this.activity2, this.activity3];
+  private newActivity1 = new NewActivity();
+  private http: Http;
 
-  constructor( private http: Http ) {
+  constructor( http: Http ) {
     super();
-    this.activity1.setId('activity1');
-    this.activity1.setSourceConnection('activity1SrcConn');
-    this.activity1.setTargetConnection('activity1TgtConn');
-    this.activity2.setId('activity2');
-    this.activity2.setSourceConnection('activity2SrcConn');
-    this.activity2.setTargetConnection('activity2TgtConn');
-    this.activity3.setId('activity3');
-    this.activity3.setSourceConnection('activity3SrcConn');
-    this.activity3.setTargetConnection('activity3TgtConn');
-    this.newActivity1.setName('newActivity1');
+    this.http = http;
+    this.activity1.setId("activity1");
+    this.activity1.setSourceConnection("activity1SrcConn");
+    this.activity1.setTargetConnection("activity1TgtConn");
+    this.activity2.setId("activity2");
+    this.activity2.setSourceConnection("activity2SrcConn");
+    this.activity2.setTargetConnection("activity2TgtConn");
+    this.activity3.setId("activity3");
+    this.activity3.setSourceConnection("activity3SrcConn");
+    this.activity3.setTargetConnection("activity3TgtConn");
+    this.newActivity1.setName("newActivity1");
     const srcConn = new NewConnection();
-    srcConn.setName('new1Src');
-    srcConn.setJndiName('new1SrcJndi');
-    srcConn.setDriverName('new1SrcDriver');
+    srcConn.setName("new1Src");
+    srcConn.setJndiName("new1SrcJndi");
+    srcConn.setDriverName("new1SrcDriver");
     srcConn.setJdbc(true);
     this.newActivity1.setSourceConnection(srcConn);
     const tgtConn = new NewConnection();
-    tgtConn.setName('new1Tgt');
-    tgtConn.setJndiName('new1TgtJndi');
-    tgtConn.setDriverName('new1TgtDriver');
+    tgtConn.setName("new1Tgt");
+    tgtConn.setJndiName("new1TgtJndi");
+    tgtConn.setDriverName("new1TgtDriver");
     tgtConn.setJdbc(false);
     this.newActivity1.setTargetConnection(tgtConn);
   }
@@ -66,7 +67,7 @@ export class ActivityService extends ApiService {
     return this.activities;
     /*
     return this.http
-      .get(KOMODO_WORKSPACE_URL + '/activities', this.getAuthRequestOptions())
+      .get(komodoWorkspaceUrl + '/activities', this.getAuthRequestOptions())
       .map(response => {
         const activities = response.json();
         return activities.map((activity) => {const activ = new Activity(); activ.setValues(activity); return activ; });
@@ -81,10 +82,11 @@ export class ActivityService extends ApiService {
    * @returns {Activity}
    */
   public createActivity(activity: NewActivity): NewActivity {
+    // TODO implement createActivity()
     return this.newActivity1;
     /*
     return this.http
-      .post(KOMODO_WORKSPACE_URL + '/activities/' + activity.name, activity, this.getAuthRequestOptions())
+      .post(komodoWorkspaceUrl + '/activities/' + activity.name, activity, this.getAuthRequestOptions())
       .map(response => {
         return new Activity();
       })
@@ -97,9 +99,10 @@ export class ActivityService extends ApiService {
    * @param {NewActivity} activity
    */
   public deleteActivity(activity: NewActivity): NewActivity {
+    // TODO implement deleteActivity()
     /*
     return this.http
-      .delete(KOMODO_WORKSPACE_URL + '/activities/' + activity.name, this.getAuthRequestOptions())
+      .doDelete(komodoWorkspaceUrl + '/activities/' + activity.name, this.getAuthRequestOptions())
       .map(response => null)
       .catch(this.handleError);
       */
diff --git a/ngapp/src/app/activities/shared/add-activity-form/add-activity-form.component.html b/ngapp/src/app/activities/shared/add-activity-form/add-activity-form.component.html
index 352c982a..2344a4ec 100644
--- a/ngapp/src/app/activities/shared/add-activity-form/add-activity-form.component.html
+++ b/ngapp/src/app/activities/shared/add-activity-form/add-activity-form.component.html
@@ -5,25 +5,25 @@ <h1>Activity Properties</h1>
       <div class="form-group">
         <label class="col-sm-1 control-label" for="name">Name</label>
         <div class="col-sm-10">
-          <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name">
+          <input type="text" class="form-control" id="name" required [(ngModel)]="activityName" name="name">
         </div>
       </div>
       <div class="form-group">
         <label class="col-sm-1 control-label" for="description">Description</label>
         <div class="col-sm-10">
-          <input type="text" class="form-control" id="description" required [(ngModel)]="model.description" name="description">
+          <input type="text" class="form-control" id="description" required [(ngModel)]="activityDescription" name="description">
         </div>
       </div>
       <div class="form-group">
         <label class="col-sm-1 control-label" for="sourceConnection">Source Connection</label>
         <div class="col-sm-10">
-          <input type="text" class="form-control" id="sourceConnection" [(ngModel)]="model.sourceConnection" name="sourceConnection">
+          <input type="text" class="form-control" id="sourceConnection" [(ngModel)]="activitySource" name="sourceConnection">
         </div>
       </div>
       <div class="form-group">
         <label class="col-sm-1 control-label" for="targetConnection">Target Connection</label>
         <div class="col-sm-10">
-          <input type="text" class="form-control" id="targetConnection" [(ngModel)]="model.targetConnection" name="targetConnection">
+          <input type="text" class="form-control" id="targetConnection" [(ngModel)]="activityTarget" name="targetConnection">
         </div>
       </div>
       <hr/>
diff --git a/ngapp/src/app/activities/shared/add-activity-form/add-activity-form.component.spec.ts b/ngapp/src/app/activities/shared/add-activity-form/add-activity-form.component.spec.ts
index ff795e1c..b97472f0 100644
--- a/ngapp/src/app/activities/shared/add-activity-form/add-activity-form.component.spec.ts
+++ b/ngapp/src/app/activities/shared/add-activity-form/add-activity-form.component.spec.ts
@@ -1,11 +1,10 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-import { RouterTestingModule } from '@angular/router/testing';
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { FormsModule } from "@angular/forms";
+import { RouterTestingModule } from "@angular/router/testing";
+import { CoreModule } from "@core/core.module";
+import { AddActivityFormComponent } from "./add-activity-form.component";
 
-import { AddActivityFormComponent } from './add-activity-form.component';
-import { CoreModule } from '@core/core.module';
-
-describe('AddActivityFormComponent', () => {
+describe("AddActivityFormComponent", () => {
   let component: AddActivityFormComponent;
   let fixture: ComponentFixture<AddActivityFormComponent>;
 
@@ -23,7 +22,7 @@ describe('AddActivityFormComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/activities/shared/add-activity-form/add-activity-form.component.ts b/ngapp/src/app/activities/shared/add-activity-form/add-activity-form.component.ts
index 444a3521..a32a1777 100644
--- a/ngapp/src/app/activities/shared/add-activity-form/add-activity-form.component.ts
+++ b/ngapp/src/app/activities/shared/add-activity-form/add-activity-form.component.ts
@@ -15,32 +15,62 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { EventEmitter } from '@angular/core';
-import { OnInit } from '@angular/core';
-import { Output } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { NewActivity } from '@activities/shared/new-activity.model';
+import { activitiesRootPath } from "@activities/activities-routing.module";
+import { NewActivity } from "@activities/shared/new-activity.model";
+import { Component } from "@angular/core";
+import { EventEmitter } from "@angular/core";
+import { Output } from "@angular/core";
+import { Router } from "@angular/router";
+import { NewConnection } from "@connections/shared/new-connection.model";
 
 @Component({
-  selector: 'app-add-activity-form',
-  templateUrl: './add-activity-form.component.html',
-  styleUrls: ['./add-activity-form.component.css']
+  selector: "app-add-activity-form",
+  templateUrl: "./add-activity-form.component.html",
+  styleUrls: ["./add-activity-form.component.css"]
 })
-export class AddActivityFormComponent implements OnInit {
+export class AddActivityFormComponent {
 
-  @Output() onCreateActivity = new EventEmitter<NewActivity>();
+  private model = new NewActivity();
+  private creatingActivity = false;
+  private router: Router;
 
-  model = new NewActivity();
-  creatingActivity = false;
+  @Output() private onCreateActivity = new EventEmitter<NewActivity>();
 
-  constructor( private router: Router ) { }
+  constructor( router: Router ) {
+    this.router = router;
+  }
 
-  ngOnInit() {
+  /**
+   * @returns {string} the activity description
+   */
+  public get activityDescription(): string {
+    return this.model.getDescription();
   }
 
-  get currentActivity() { return JSON.stringify(this.model); }
+  /**
+   * @returns {string} the activity name
+   */
+  public get activityName(): string {
+    return this.model.getName();
+  }
+
+  /**
+   * @returns {string} the activity's source connection
+   */
+  public get activitySource(): NewConnection {
+    return this.model.getSourceConnection();
+  }
+
+  /**
+   * @returns {string} the activity's target connection
+   */
+  public get activityTarget(): NewConnection {
+    return this.model.getTargetConnection();
+  }
+
+  public get currentActivity(): string {
+    return JSON.stringify(this.model);
+  }
 
   /**
    * Called when the user clicks the "Create Activity" submit button on the form.
@@ -52,14 +82,14 @@ export class AddActivityFormComponent implements OnInit {
     activity.setSourceConnection(this.model.getSourceConnection());
     activity.setTargetConnection(this.model.getTargetConnection());
 
-    console.log('[AddActivityFormComponent] Firing create-activity event: %o', activity);
+    console.log("[AddActivityFormComponent] Firing create-activity event: %o", activity);
 
     this.creatingActivity = true;
     this.onCreateActivity.emit(activity);
   }
 
   public cancelAdd(): void {
-    const link: string[] = [ '/activities' ];
+    const link: string[] = [ activitiesRootPath ];
     this.router.navigate(link);
   }
 
diff --git a/ngapp/src/app/activities/shared/mock-activity.service.ts b/ngapp/src/app/activities/shared/mock-activity.service.ts
index d65d62bf..a983c80a 100644
--- a/ngapp/src/app/activities/shared/mock-activity.service.ts
+++ b/ngapp/src/app/activities/shared/mock-activity.service.ts
@@ -1,57 +1,56 @@
-import {Injectable } from '@angular/core';
-import {environment } from '../../../environments/environment';
-import {Http} from '@angular/http';
-import {Activity } from '@activities/shared/activity.model';
-import {NewActivity } from '@activities/shared/new-activity.model';
-import {Connection} from '@connections/shared/connection.model';
-import {NewConnection} from '@connections/shared/new-connection.model';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/observable/throw';
-import 'rxjs/add/observable/of';
-
-const KOMODO_WORKSPACE_URL = environment.komodoWorkspaceUrl;
+import {Activity } from "@activities/shared/activity.model";
+import {NewActivity } from "@activities/shared/new-activity.model";
+import {Injectable } from "@angular/core";
+import {Http} from "@angular/http";
+import {Connection} from "@connections/shared/connection.model";
+import {NewConnection} from "@connections/shared/new-connection.model";
+import "rxjs/add/observable/of";
+import "rxjs/add/observable/throw";
+import "rxjs/add/operator/catch";
+import "rxjs/add/operator/map";
 
 @Injectable()
 export class MockActivityService {
 
-  activity1 = new Activity();
-  activity2 = new Activity();
-  activity3 = new Activity();
-  activities: Activity[] = [this.activity1, this.activity2, this.activity3];
-  newActivity1 = new NewActivity();
+  private activity1 = new Activity();
+  private activity2 = new Activity();
+  private activity3 = new Activity();
+  private activities: Activity[] = [this.activity1, this.activity2, this.activity3];
+  private newActivity1 = new NewActivity();
+
+  private newConnection = new NewConnection();
+  private conn1 = new Connection();
+  private conn2 = new Connection();
+  private conn3 = new Connection();
+  private conns: Connection[] = [this.conn1, this.conn2, this.conn3];
 
-  newConnection = new NewConnection();
-  conn1 = new Connection();
-  conn2 = new Connection();
-  conn3 = new Connection();
-  conns: Connection[] = [this.conn1, this.conn2, this.conn3];
+  private http: Http;
 
-  constructor( private http: Http ) {
-    this.activity1.setId('activity1');
-    this.activity1.setSourceConnection('activity1SrcConn');
-    this.activity1.setTargetConnection('activity1TgtConn');
-    this.activity2.setId('activity2');
-    this.activity2.setSourceConnection('activity2SrcConn');
-    this.activity2.setTargetConnection('activity2TgtConn');
-    this.activity3.setId('activity3');
-    this.activity3.setSourceConnection('activity3SrcConn');
-    this.activity3.setTargetConnection('activity3TgtConn');
-    this.newActivity1.setName('newActivity1');
+  constructor( http: Http ) {
+    this.http = http;
+    this.activity1.setId("activity1");
+    this.activity1.setSourceConnection("activity1SrcConn");
+    this.activity1.setTargetConnection("activity1TgtConn");
+    this.activity2.setId("activity2");
+    this.activity2.setSourceConnection("activity2SrcConn");
+    this.activity2.setTargetConnection("activity2TgtConn");
+    this.activity3.setId("activity3");
+    this.activity3.setSourceConnection("activity3SrcConn");
+    this.activity3.setTargetConnection("activity3TgtConn");
+    this.newActivity1.setName("newActivity1");
     const srcConn = new NewConnection();
-    srcConn.setName('new1Src');
-    srcConn.setJndiName('new1SrcJndi');
-    srcConn.setDriverName('new1SrcDriver');
+    srcConn.setName("new1Src");
+    srcConn.setJndiName("new1SrcJndi");
+    srcConn.setDriverName("new1SrcDriver");
     srcConn.setJdbc(true);
     this.newActivity1.setSourceConnection(srcConn);
     const tgtConn = new NewConnection();
-    tgtConn.setName('new1Tgt');
-    tgtConn.setJndiName('new1TgtJndi');
-    tgtConn.setDriverName('new1TgtDriver');
+    tgtConn.setName("new1Tgt");
+    tgtConn.setJndiName("new1TgtJndi");
+    tgtConn.setDriverName("new1TgtDriver");
     tgtConn.setJdbc(false);
     this.newActivity1.setTargetConnection(tgtConn);
 
-
   }
 
   /**
diff --git a/ngapp/src/app/activities/shared/new-activity.model.ts b/ngapp/src/app/activities/shared/new-activity.model.ts
index ffa4abbf..925a81db 100644
--- a/ngapp/src/app/activities/shared/new-activity.model.ts
+++ b/ngapp/src/app/activities/shared/new-activity.model.ts
@@ -15,14 +15,14 @@
  * limitations under the License.
  */
 
-import { NewConnection } from '@connections/shared/new-connection.model';
+import { NewConnection } from "@connections/shared/new-connection.model";
 
 export class NewActivity {
 
-  name: string;
-  description: string;
-  sourceConnection: NewConnection = new NewConnection();
-  targetConnection: NewConnection = new NewConnection();
+  private name: string;
+  private description: string;
+  private sourceConnection: NewConnection = new NewConnection();
+  private targetConnection: NewConnection = new NewConnection();
 
   /**
    * Constructor
@@ -88,7 +88,7 @@ export class NewActivity {
   }
 
   // overrides toJSON - we do not want the name supplied in the json body.
-  public toJSON() {
+  public toJSON(): {} {
     return {
       sourceConnection: this.sourceConnection,
       targetConnection: this.targetConnection
diff --git a/ngapp/src/app/app-routing.module.ts b/ngapp/src/app/app-routing.module.ts
index b1d13da5..64b486da 100644
--- a/ngapp/src/app/app-routing.module.ts
+++ b/ngapp/src/app/app-routing.module.ts
@@ -15,18 +15,19 @@
  * limitations under the License.
  */
 
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { Routes } from '@angular/router';
-
-import { environment } from '@environments/environment';
+import { activitiesRootPath } from "@activities/activities-routing.module";
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { Routes } from "@angular/router";
+import { connectionsRootPath } from "@connections/connections-routing.module";
+import { environment } from "@environments/environment";
 import { PageNotFoundComponent } from "@shared/page-not-found/page-not-found.component";
 
 const appRoutes: Routes = [
-  {path: '', redirectTo: environment.homePagePath, pathMatch: 'full'},
-  {path: 'connections', loadChildren: '@connections/connections.module#ConnectionsModule'},
-  {path: 'activities', loadChildren: '@activities/activities.module#ActivitiesModule'},
-  { path: '**', component: PageNotFoundComponent }, // always last
+  { path: "", redirectTo: environment.homePagePath, pathMatch: "full" },
+  { path: connectionsRootPath, loadChildren: "@connections/connections.module#ConnectionsModule" },
+  { path: activitiesRootPath, loadChildren: "@activities/activities.module#ActivitiesModule" },
+  { path: "**", component: PageNotFoundComponent }, // always last
 ];
 
 @NgModule({
diff --git a/ngapp/src/app/app.component.spec.ts b/ngapp/src/app/app.component.spec.ts
index e5406172..184f0bbf 100644
--- a/ngapp/src/app/app.component.spec.ts
+++ b/ngapp/src/app/app.component.spec.ts
@@ -1,10 +1,9 @@
-import { TestBed, async } from '@angular/core/testing';
-
-import { AppComponent } from './app.component';
+import { async, TestBed } from "@angular/core/testing";
 import { RouterTestingModule } from "@angular/router/testing";
 import { CoreModule } from "@core/core.module";
+import { AppComponent } from "./app.component";
 
-describe('AppComponent', () => {
+describe("AppComponent", () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [ CoreModule, RouterTestingModule ],
@@ -14,7 +13,7 @@ describe('AppComponent', () => {
     }).compileComponents();
   }));
 
-  it('should create the app', async(() => {
+  it("should create the app", async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
diff --git a/ngapp/src/app/app.component.ts b/ngapp/src/app/app.component.ts
index 97b98638..3cdf875a 100644
--- a/ngapp/src/app/app.component.ts
+++ b/ngapp/src/app/app.component.ts
@@ -1,21 +1,35 @@
-import { Component, OnInit } from '@angular/core';
+/**
+ * @license
+ * Copyright 2017 JBoss 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 } from "@angular/core";
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"]
 })
-export class AppComponent implements OnInit {
+export class AppComponent {
 
-  routerOutletWrapperId: string;
-  routerOutletWrapperClass: string;
+  private routerOutletWrapperId: string;
+  private routerOutletWrapperClass: string;
 
   constructor() {
-    this.routerOutletWrapperId = 'studio-page-body';
-    this.routerOutletWrapperClass = '';
-  }
-
-  ngOnInit() {
+    this.routerOutletWrapperId = "studio-page-body";
+    this.routerOutletWrapperClass = "";
   }
 
 }
diff --git a/ngapp/src/app/app.module.ts b/ngapp/src/app/app.module.ts
index 86be24d4..f1acc022 100644
--- a/ngapp/src/app/app.module.ts
+++ b/ngapp/src/app/app.module.ts
@@ -15,16 +15,15 @@
  * limitations under the License.
  */
 
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { RouterModule } from "@angular/router";
-
-import { ActivitiesModule } from "@activities/activities.module";
 import { ActivitiesRoutingModule } from "@activities/activities-routing.module";
-import { AppComponent } from '@app/app.component';
+import { ActivitiesModule } from "@activities/activities.module";
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+import { RouterModule } from "@angular/router";
 import { AppRoutingModule } from "@app/app-routing.module";
-import { ConnectionsModule } from "@connections/connections.module";
+import { AppComponent } from "@app/app.component";
 import { ConnectionsRoutingModule } from "@connections/connections-routing.module";
+import { ConnectionsModule } from "@connections/connections.module";
 import { CoreModule } from "@core/core.module";
 import { SharedModule } from "@shared/shared.module";
 
diff --git a/ngapp/src/app/connections/add-connection/add-connection.component.html b/ngapp/src/app/connections/add-connection/add-connection.component.html
index aa99c374..f3a8c469 100644
--- a/ngapp/src/app/connections/add-connection/add-connection.component.html
+++ b/ngapp/src/app/connections/add-connection/add-connection.component.html
@@ -1,7 +1,7 @@
 <div style="margin-left: 150px">
   <div id="connections-breadcrumb-bar">
     <breadcrumbs>
-      <li app-breadcrumb label="Connections" icon="plug" [route]="[ '/connections' ]"></li>
+      <li app-breadcrumb label="Connections" icon="plug" [route]="[ addConnectionLink ]"></li>
       <li app-breadcrumb label="Add Connection" icon="plus" class="active"></li>
     </breadcrumbs>
   </div>
diff --git a/ngapp/src/app/connections/add-connection/add-connection.component.spec.ts b/ngapp/src/app/connections/add-connection/add-connection.component.spec.ts
index 0e58c22e..ad0ca88c 100644
--- a/ngapp/src/app/connections/add-connection/add-connection.component.spec.ts
+++ b/ngapp/src/app/connections/add-connection/add-connection.component.spec.ts
@@ -1,15 +1,14 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {RouterTestingModule} from '@angular/router/testing';
-
-import {AddConnectionComponent} from './add-connection.component';
-import {AddConnectionFormComponent} from "@connections/shared/add-connection-form/add-connection-form.component";
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
 import {FormsModule} from "@angular/forms";
+import {HttpModule} from "@angular/http";
+import {RouterTestingModule} from "@angular/router/testing";
+import {AddConnectionFormComponent} from "@connections/shared/add-connection-form/add-connection-form.component";
 import {ConnectionService} from "@connections/shared/connection.service";
 import {MockConnectionService} from "@connections/shared/mock-connection.service";
-import {HttpModule} from "@angular/http";
 import {CoreModule} from "@core/core.module";
+import {AddConnectionComponent} from "./add-connection.component";
 
-describe('AddConnectionComponent', () => {
+describe("AddConnectionComponent", () => {
   let component: AddConnectionComponent;
   let fixture: ComponentFixture<AddConnectionComponent>;
 
@@ -30,7 +29,7 @@ describe('AddConnectionComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/connections/add-connection/add-connection.component.ts b/ngapp/src/app/connections/add-connection/add-connection.component.ts
index a1f093cc..2fbbf50e 100644
--- a/ngapp/src/app/connections/add-connection/add-connection.component.ts
+++ b/ngapp/src/app/connections/add-connection/add-connection.component.ts
@@ -15,27 +15,34 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Router } from '@angular/router';
-
-import { AddConnectionFormComponent } from '@connections/shared/add-connection-form/add-connection-form.component';
-import { ConnectionService } from '@connections/shared/connection.service';
-import { NewConnection } from '@connections/shared/new-connection.model';
-import { AbstractPageComponent } from '@shared/abstract-page.component';
+import { Component } from "@angular/core";
+import { ViewChild } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { Router } from "@angular/router";
+import { addConnectionPath, connectionsRootPath } from "@connections/connections-routing.module";
+import { AddConnectionFormComponent } from "@connections/shared/add-connection-form/add-connection-form.component";
+import { ConnectionService } from "@connections/shared/connection.service";
+import { NewConnection } from "@connections/shared/new-connection.model";
+import { AbstractPageComponent } from "@shared/abstract-page.component";
 
 @Component({
-  selector: 'app-add-connection',
-  templateUrl: './add-connection.component.html',
-  styleUrls: ['./add-connection.component.css']
+  selector: "app-add-connection",
+  templateUrl: "./add-connection.component.html",
+  styleUrls: ["./add-connection.component.css"]
 })
 export class AddConnectionComponent extends AbstractPageComponent {
 
-  @ViewChild(AddConnectionFormComponent) form: AddConnectionFormComponent;
+  public addConnectionLink = addConnectionPath;
+
+  private router: Router;
+  private connectionService: ConnectionService;
+
+  @ViewChild(AddConnectionFormComponent) private form: AddConnectionFormComponent;
 
-  constructor(private router: Router, route: ActivatedRoute, private apiService: ConnectionService) {
+  constructor(router: Router, route: ActivatedRoute, connectionService: ConnectionService) {
     super(route);
+    this.router = router;
+    this.connectionService = connectionService;
   }
 
   /**
@@ -43,15 +50,15 @@ export class AddConnectionComponent extends AbstractPageComponent {
    * from the add-connection.page.html template.
    * @param {NewConnection} connection
    */
-  public onCreateConnection(connection: NewConnection) {
-    console.log('[AddConnectionComponent] onCreateConnection(): ' + JSON.stringify(connection));
-    this.apiService
+  public onCreateConnection(connection: NewConnection): void {
+    console.log("[AddConnectionComponent] onCreateConnection(): " + JSON.stringify(connection));
+    this.connectionService
       .createConnection(connection)
       .subscribe(
       () => {
-        this.form.creatingConnection = false;
-        const link: string[] = [ '/connections' ];
-        console.log('[AddConnectionComponent] Navigating to: %o', link);
+        this.form.connectionCreated();
+        const link: string[] = [ connectionsRootPath ];
+        console.log("[AddConnectionComponent] Navigating to: %o", link);
         this.router.navigate(link);
       }
     );
diff --git a/ngapp/src/app/connections/connections-cards/connections-cards.component.spec.ts b/ngapp/src/app/connections/connections-cards/connections-cards.component.spec.ts
index 9745eec4..555d014f 100644
--- a/ngapp/src/app/connections/connections-cards/connections-cards.component.spec.ts
+++ b/ngapp/src/app/connections/connections-cards/connections-cards.component.spec.ts
@@ -1,9 +1,8 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { RouterTestingModule } from "@angular/router/testing";
+import { ConnectionsCardsComponent } from "@connections/connections-cards/connections-cards.component";
 
-import { ConnectionsCardsComponent } from './connections-cards.component';
-
-describe('ConnectionsCardsComponent', () => {
+describe("ConnectionsCardsComponent", () => {
   let component: ConnectionsCardsComponent;
   let fixture: ComponentFixture<ConnectionsCardsComponent>;
 
@@ -21,7 +20,7 @@ describe('ConnectionsCardsComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/connections/connections-cards/connections-cards.component.ts b/ngapp/src/app/connections/connections-cards/connections-cards.component.ts
index f988bd7c..dc4f2bff 100644
--- a/ngapp/src/app/connections/connections-cards/connections-cards.component.ts
+++ b/ngapp/src/app/connections/connections-cards/connections-cards.component.ts
@@ -15,31 +15,32 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Output, Input } from '@angular/core';
-
-import { Connection } from '@connections/shared/connection.model';
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Connection } from "@connections/shared/connection.model";
 
 @Component({
   moduleId: module.id,
-  selector: 'app-connections-cards',
-  templateUrl: 'connections-cards.component.html',
-  styleUrls: ['connections-cards.component.css']
+  selector: "app-connections-cards",
+  templateUrl: "connections-cards.component.html",
+  styleUrls: ["connections-cards.component.css"]
 })
 export class ConnectionsCardsComponent {
 
-  @Input() connections: Connection[];
-  @Input() selectedConnections: Connection[];
-  @Output() onConnectionSelected: EventEmitter<Connection> = new EventEmitter<Connection>();
-  @Output() onConnectionDeselected: EventEmitter<Connection> = new EventEmitter<Connection>();
-  @Output() onTagSelected: EventEmitter<string> = new EventEmitter<string>();
-  @Output() onPingConnection: EventEmitter<string> = new EventEmitter<string>();
-  @Output() onEditConnection: EventEmitter<string> = new EventEmitter<string>();
-  @Output() onDeleteConnection: EventEmitter<string> = new EventEmitter<string>();
+  @Input() private connections: Connection[];
+  @Input() private selectedConnections: Connection[];
+  @Output() private onConnectionSelected: EventEmitter<Connection> = new EventEmitter<Connection>();
+  @Output() private onConnectionDeselected: EventEmitter<Connection> = new EventEmitter<Connection>();
+  @Output() private onTagSelected: EventEmitter<string> = new EventEmitter<string>();
+  @Output() private onPingConnection: EventEmitter<string> = new EventEmitter<string>();
+  @Output() private onEditConnection: EventEmitter<string> = new EventEmitter<string>();
+  @Output() private onDeleteConnection: EventEmitter<string> = new EventEmitter<string>();
 
   /**
    * Constructor.
    */
-  constructor() {}
+  constructor() {
+    // nothing to do
+  }
 
   public toggleConnectionSelected(connection: Connection): void {
     if (this.isSelected(connection)) {
diff --git a/ngapp/src/app/connections/connections-list/connections-list.component.spec.ts b/ngapp/src/app/connections/connections-list/connections-list.component.spec.ts
index b754d8d4..60c27bf5 100644
--- a/ngapp/src/app/connections/connections-list/connections-list.component.spec.ts
+++ b/ngapp/src/app/connections/connections-list/connections-list.component.spec.ts
@@ -1,9 +1,8 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { RouterTestingModule } from "@angular/router/testing";
+import { ConnectionsListComponent } from "@connections/connections-list/connections-list.component";
 
-import { ConnectionsListComponent } from './connections-list.component';
-import { RouterTestingModule } from '@angular/router/testing';
-
-describe('ConnectionsListComponent', () => {
+describe("ConnectionsListComponent", () => {
   let component: ConnectionsListComponent;
   let fixture: ComponentFixture<ConnectionsListComponent>;
 
@@ -21,7 +20,7 @@ describe('ConnectionsListComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/connections/connections-list/connections-list.component.ts b/ngapp/src/app/connections/connections-list/connections-list.component.ts
index e37a5cfe..15869b84 100644
--- a/ngapp/src/app/connections/connections-list/connections-list.component.ts
+++ b/ngapp/src/app/connections/connections-list/connections-list.component.ts
@@ -15,32 +15,35 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Output, Input } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { Connection } from '@connections/shared/connection.model';
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Router } from "@angular/router";
+import { Connection } from "@connections/shared/connection.model";
 
 @Component({
   moduleId: module.id,
-  selector: 'app-connections-list',
-  templateUrl: 'connections-list.component.html',
-  styleUrls: ['connections-list.component.css']
+  selector: "app-connections-list",
+  templateUrl: "connections-list.component.html",
+  styleUrls: ["connections-list.component.css"]
 })
 export class ConnectionsListComponent {
 
-  @Input() connections: Connection[];
-  @Input() selectedConnections: Connection[];
-  @Output() onConnectionSelected: EventEmitter<Connection> = new EventEmitter<Connection>();
-  @Output() onConnectionDeselected: EventEmitter<Connection> = new EventEmitter<Connection>();
-  @Output() onTagSelected: EventEmitter<string> = new EventEmitter<string>();
-  @Output() onEditConnection: EventEmitter<string> = new EventEmitter<string>();
-  @Output() onPingConnection: EventEmitter<string> = new EventEmitter<string>();
-  @Output() onDeleteConnection: EventEmitter<string> = new EventEmitter<string>();
+  private router: Router;
+
+  @Input() private connections: Connection[];
+  @Input() private selectedConnections: Connection[];
+  @Output() private onConnectionSelected: EventEmitter<Connection> = new EventEmitter<Connection>();
+  @Output() private onConnectionDeselected: EventEmitter<Connection> = new EventEmitter<Connection>();
+  @Output() private onTagSelected: EventEmitter<string> = new EventEmitter<string>();
+  @Output() private onEditConnection: EventEmitter<string> = new EventEmitter<string>();
+  @Output() private onPingConnection: EventEmitter<string> = new EventEmitter<string>();
+  @Output() private onDeleteConnection: EventEmitter<string> = new EventEmitter<string>();
 
   /**
    * Constructor.
    */
-  constructor(private router: Router) {}
+  constructor(router: Router) {
+    this.router = router;
+  }
 
   public toggleConnectionSelected(connection: Connection): void {
     if (this.isSelected(connection)) {
diff --git a/ngapp/src/app/connections/connections-routing.module.ts b/ngapp/src/app/connections/connections-routing.module.ts
index 4fb13f12..643674f0 100644
--- a/ngapp/src/app/connections/connections-routing.module.ts
+++ b/ngapp/src/app/connections/connections-routing.module.ts
@@ -15,18 +15,21 @@
  * limitations under the License.
  */
 
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { Routes } from '@angular/router';
-
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { Routes } from "@angular/router";
 import { AddConnectionComponent } from "@connections/add-connection/add-connection.component";
 import { ConnectionsComponent } from "@connections/connections.component";
 import { EditConnectionComponent } from "@connections/edit-connection/edit-connection.component";
 
+export const connectionsRootPath = "/connections";
+export const addConnectionPath = connectionsRootPath + "/add-connection";
+export const editConnectionPath = connectionsRootPath + "/edit-connection";
+
 const connectionsRoutes: Routes = [
-  { path: 'connections', component: ConnectionsComponent },
-  { path: 'connections/add-connection', component: AddConnectionComponent },
-  { path: 'connections/edit-connection', component: EditConnectionComponent }
+  { path: connectionsRootPath, component: ConnectionsComponent },
+  { path: addConnectionPath, component: AddConnectionComponent },
+  { path: editConnectionPath, component: EditConnectionComponent }
 ];
 
 @NgModule({
diff --git a/ngapp/src/app/connections/connections.component.html b/ngapp/src/app/connections/connections.component.html
index e07c0dc0..24826296 100644
--- a/ngapp/src/app/connections/connections.component.html
+++ b/ngapp/src/app/connections/connections.component.html
@@ -18,22 +18,22 @@ <h2>Connections</h2>
           <div class="form-group toolbar-pf-filter">
             <label class="sr-only" for="filter">Name</label>
             <div class="input-group" style="width: 100%">
-              <input name="name-filter" [(ngModel)]="filters.nameFilter" type="text" class="form-control name-filter" id="filter" placeholder="Filter by name...">
+              <input name="name-filter" [(ngModel)]="nameFilter" type="text" class="form-control name-filter" id="filter" placeholder="Filter by name...">
             </div>
           </div>
           <div class="form-group">
             <button class="btn btn-link" type="button" (click)="toggleSortDirection()">
-              <span *ngIf="filters.sortDirection === 'ASC'" class="fa fa-sort-alpha-asc"></span>
-              <span *ngIf="filters.sortDirection === 'DESC'" class="fa fa-sort-alpha-desc"></span>
+              <span *ngIf="isSortAscending" class="fa fa-sort-alpha-asc"></span>
+              <span *ngIf="isSortDescending" class="fa fa-sort-alpha-desc"></span>
             </button>
           </div>
           <div class="form-group">
-            <a class="btn btn-primary" [routerLink]="['/connections/add-connection']">Add Connection</a>
+            <a class="btn btn-primary" [routerLink]="[addConnectionLink]">Add Connection</a>
           </div>
           <div class="form-group toolbar-pf-view-selector">
             <ul class="list-inline">
-              <li *ngIf="filters.layout === 'list'"><a (click)="onCardLayout()"><i class="fa fa-th-list"></i></a></li>
-              <li *ngIf="filters.layout === 'card'"><a (click)="onListLayout()"><i class="fa fa-th"></i></a></li>
+              <li *ngIf="isListLayout"><a (click)="onCardLayout()"><i class="fa fa-th-list"></i></a></li>
+              <li *ngIf="isCardLayout"><a (click)="onListLayout()"><i class="fa fa-th"></i></a></li>
             </ul>
           </div>
         </form>
@@ -60,7 +60,7 @@ <h1>No Connections Found</h1>
           </p>
           <div class="blank-slate-pf-main-action">
             <div class="btn-group">
-              <a class="btn btn-primary btn-lg" [routerLink]="['/connections/add-connection']">Add Connection</a>
+              <a class="btn btn-primary btn-lg" [routerLink]="[ addConnectionLink ]">Add Connection</a>
             </div>
           </div>
         </div>
@@ -79,7 +79,7 @@ <h1>No Connections Found</h1>
             <div class="card-pf card-pf-accented">
               <div class="card-pf-heading">
                 <h1 class="card-pf-title">
-                  <p><span class="spinner spinner-xs spinner-inline"></span> Loading Connections...</p>
+                  <span class="spinner spinner-xs spinner-inline"></span> Loading Connections...
                 </h1>
               </div>
             </div>
@@ -89,10 +89,10 @@ <h1 class="card-pf-title">
 
       <!-- The list or card view -->
       <div class="col-md-12" *ngIf="isLoaded('connections')">
-        <app-connections-list *ngIf="filters.layout === 'list'" [connections]="filteredConnections" [selectedConnections]="selectedConnections"
+        <app-connections-list *ngIf="isListLayout" [connections]="filteredConnections" [selectedConnections]="selectedConnections"
                               (onEditConnection)="onEdit($event)" (onPingConnection)="onPing($event)" (onDeleteConnection)="onDelete($event)"
                               (onConnectionSelected)="onSelected($event)" (onConnectionDeselected)="onDeselected($event)"></app-connections-list>
-        <app-connections-cards *ngIf="filters.layout === 'card'" [connections]="filteredConnections" [selectedConnections]="selectedConnections"
+        <app-connections-cards *ngIf="isCardLayout" [connections]="filteredConnections" [selectedConnections]="selectedConnections"
                                (onEditConnection)="onEdit($event)" (onPingConnection)="onPing($event)" (onDeleteConnection)="onDelete($event)"
                                (onConnectionSelected)="onSelected($event)" (onConnectionDeselected)="onDeselected($event)"></app-connections-cards>
       </div>
diff --git a/ngapp/src/app/connections/connections.component.spec.ts b/ngapp/src/app/connections/connections.component.spec.ts
index ab0c2062..c7c8aca4 100644
--- a/ngapp/src/app/connections/connections.component.spec.ts
+++ b/ngapp/src/app/connections/connections.component.spec.ts
@@ -1,16 +1,15 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-
-import {ConnectionsComponent} from './connections.component';
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
 import {FormsModule} from "@angular/forms";
+import {HttpModule} from "@angular/http";
 import {RouterTestingModule} from "@angular/router/testing";
-import {ConnectionsListComponent} from "@connections/connections-list/connections-list.component";
 import {ConnectionsCardsComponent} from "@connections/connections-cards/connections-cards.component";
-import {ModalModule} from "ngx-bootstrap";
-import {HttpModule} from "@angular/http";
+import {ConnectionsListComponent} from "@connections/connections-list/connections-list.component";
+import {ConnectionsComponent} from "@connections/connections.component";
 import {CoreModule} from "@core/core.module";
 import {SharedModule} from "@shared/shared.module";
+import {ModalModule} from "ngx-bootstrap";
 
-describe('ConnectionsComponent', () => {
+describe("ConnectionsComponent", () => {
   let component: ConnectionsComponent;
   let fixture: ComponentFixture<ConnectionsComponent>;
 
@@ -28,7 +27,7 @@ describe('ConnectionsComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/connections/connections.component.ts b/ngapp/src/app/connections/connections.component.ts
index 5baecb01..c10b07eb 100644
--- a/ngapp/src/app/connections/connections.component.ts
+++ b/ngapp/src/app/connections/connections.component.ts
@@ -15,75 +15,58 @@
  * limitations under the License.
  */
 
-import { Component, ViewChild } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-
-import { AbstractPageComponent } from '@shared/abstract-page.component';
-import { ArrayUtils } from '@core/common';
-import { ConfirmDeleteComponent } from "@shared/confirm-delete/confirm-delete.component";
+import { Component, ViewChild } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { addConnectionPath, connectionsRootPath, editConnectionPath } from "@connections/connections-routing.module";
 import { Connection } from "@connections/shared/connection.model";
-import { ConnectionService } from '@connections/shared/connection.service';
-import { NewConnection } from '@connections/shared/new-connection.model';
-
-class Filters {
-  nameFilter: string;
-  sortDirection: string;
-  layout: string;
-
-  constructor(params?: any) {
-    this.reset();
-    if (params) {
-      for (const key of Object.keys(params)) {
-        const value: string = params[key];
-        this[key] = value;
-      }
-    }
-  }
-
-  public accepts(connection: Connection): boolean {
-    const name: string = connection.getId().toLocaleLowerCase();
-    const namef: string = this.nameFilter.toLocaleLowerCase();
-    return name.indexOf(namef) >= 0;
-  }
-
-  public reset(): void {
-    this.nameFilter = '';
-    this.sortDirection = 'ASC';
-    this.layout = 'card';
-  }
-}
+import { ConnectionService } from "@connections/shared/connection.service";
+import { NewConnection } from "@connections/shared/new-connection.model";
+import { ArrayUtils } from "@core/utils/array-utils";
+import { AbstractPageComponent } from "@shared/abstract-page.component";
+import { ConfirmDeleteComponent } from "@shared/confirm-delete/confirm-delete.component";
+import { IdFilter } from "@shared/id-filter";
+import { LayoutType } from "@shared/layout-type.enum";
+import { SortDirection } from "@shared/sort-direction.enum";
 
 @Component({
-  selector: 'app-connections',
-  templateUrl: './connections.component.html',
-  styleUrls: ['./connections.component.css'],
+  selector: "app-connections",
+  templateUrl: "./connections.component.html",
+  styleUrls: ["./connections.component.css"],
   providers: [ConnectionService]
 })
 export class ConnectionsComponent extends AbstractPageComponent {
 
-  allConnections: Connection[] = [];
-  filteredConnections: Connection[] = [];
-  selectedConnections: Connection[] = [];
-  filters: Filters = new Filters();
+  public addConnectionLink: string = addConnectionPath;
+
+  private allConnections: Connection[] = [];
+  private filteredConnections: Connection[] = [];
+  private selectedConnections: Connection[] = [];
   private connectionNameForDelete: string;
+  private router: Router;
+  private connectionService: ConnectionService;
+  private filter: IdFilter = new IdFilter();
+  private layout: LayoutType = LayoutType.CARD;
+  private sortDirection: SortDirection;
 
-  @ViewChild(ConfirmDeleteComponent) confirmDeleteDialog: ConfirmDeleteComponent;
+  @ViewChild(ConfirmDeleteComponent) private confirmDeleteDialog: ConfirmDeleteComponent;
 
-  constructor(private router: Router, route: ActivatedRoute, private connectionService: ConnectionService) {
+  constructor(router: Router, route: ActivatedRoute, connectionService: ConnectionService) {
     super(route);
+    this.router = router;
+    this.connectionService = connectionService;
   }
 
-  public loadAsyncPageData() {
+  public loadAsyncPageData(): void {
     this.connectionService
       .getAllConnections()
       .subscribe(
         (connections) => {
           this.allConnections = connections;
           this.filteredConnections = this.filterConnections();
-          this.loaded('connections');
+          this.loaded("connections");
         },
         (error) => {
-          console.error('[ConnectionsComponent] Error getting connections.');
+          console.error("[ConnectionsComponent] Error getting connections.");
           this.error(error);
         }
       );
@@ -96,13 +79,13 @@ export class ConnectionsComponent extends AbstractPageComponent {
     // Clear the array first.
     this.filteredConnections.splice(0, this.filteredConnections.length);
     for (const connection of this.allConnections) {
-      if (this.filters.accepts(connection)) {
+      if (this.filter.accepts(connection)) {
         this.filteredConnections.push(connection);
       }
     }
     this.filteredConnections.sort( (c1: Connection, c2: Connection) => {
       let rval: number = c1.getId().localeCompare(c2.getId());
-      if (this.filters.sortDirection === 'DESC') {
+      if (this.sortDirection === SortDirection.DESC) {
         rval *= -1;
       }
       return rval;
@@ -113,6 +96,52 @@ export class ConnectionsComponent extends AbstractPageComponent {
     return this.filteredConnections;
   }
 
+  /**
+   * @returns {boolean} true if connections are being represented by cards
+   */
+  public get isCardLayout(): boolean {
+    return this.layout === LayoutType.CARD;
+  }
+
+  /**
+   * @returns {boolean} true if connections are being represented by items in a list
+   */
+  public get isListLayout(): boolean {
+    return this.layout === LayoutType.LIST;
+  }
+
+  /**
+   * @returns {boolean} true if sorting connection names in ascending order
+   */
+  public get isSortAscending(): boolean {
+    return this.sortDirection === SortDirection.ASC;
+  }
+
+  /**
+   * @returns {boolean} true if sorting connection names in descending order
+   */
+  public get isSortDescending(): boolean {
+    return this.sortDirection === SortDirection.DESC;
+  }
+
+  /**
+   * @returns {string} the pattern the connection names are being matched to (can be null or empty)
+   */
+  public get nameFilter(): string {
+    return this.filter.getPattern();
+  }
+
+  /**
+   * @param {string} pattern the new pattern for the connection name filter (can be null or empty)
+   */
+  public set nameFilter( pattern: string ) {
+    this.filter.setFilter( pattern );
+  }
+
+  public onPing( connName: string): void {
+    alert("Ping connection " + connName);
+  }
+
   public onSelected(connection: Connection): void {
     // Only allow one item to be selected
     this.selectedConnections.shift();
@@ -126,7 +155,7 @@ export class ConnectionsComponent extends AbstractPageComponent {
   }
 
   public onEdit(connName: string): void {
-    const link: string[] = [ '/connections/edit-connection' ];
+    const link: string[] = [ editConnectionPath ];
     this.router.navigate(link);
   }
 
@@ -135,41 +164,37 @@ export class ConnectionsComponent extends AbstractPageComponent {
     this.confirmDeleteDialog.open();
   }
 
-  public onPing(connName: string): void {
-    alert('Ping connection ' + connName);
-  }
-
   public isFiltered(): boolean {
     return this.allConnections.length !== this.filteredConnections.length;
   }
 
   public toggleSortDirection(): void {
-    if (this.filters.sortDirection === 'ASC') {
-      this.filters.sortDirection = 'DESC';
+    if (this.sortDirection === SortDirection.ASC) {
+      this.sortDirection = SortDirection.DESC;
     } else {
-      this.filters.sortDirection = 'ASC';
+      this.sortDirection = SortDirection.ASC;
     }
     this.filterConnections();
   }
 
   public clearFilters(): void {
-    this.filters.nameFilter = '';
+    this.filter.reset();
     this.filterConnections();
   }
 
   public onListLayout(): void {
-    this.filters.layout = 'list';
+    this.layout = LayoutType.LIST;
   }
 
   public onCardLayout(): void {
-    this.filters.layout = 'card';
+    this.layout = LayoutType.CARD;
   }
 
   /**
-   * Called to delete all selected APIs.
+   * Called to doDelete all selected APIs.
    */
   public deleteConnection(): void {
-    const selectedConn =  this.filterConnections().find(x => x.getId() === this.connectionNameForDelete);
+    const selectedConn =  this.filterConnections().find((x) => x.getId() === this.connectionNameForDelete);
 
     // const itemsToDelete: Connection[] = ArrayUtils.intersect(this.selectedConnections, this.filteredConnections);
     // const selectedConn = itemsToDelete[0];
@@ -177,21 +202,21 @@ export class ConnectionsComponent extends AbstractPageComponent {
     const connectionToDelete: NewConnection = new NewConnection();
     connectionToDelete.setName(selectedConn.getId());
 
-    // Note: we can only delete selected items that we can see in the UI.
-    console.log('[ConnectionsPageComponent] Deleting selected Connection.');
+    // Note: we can only doDelete selected items that we can see in the UI.
+    console.log("[ConnectionsPageComponent] Deleting selected Connection.");
     this.connectionService
       .deleteConnection(connectionToDelete)
       .subscribe(
         () => {
           this.removeConnectionFromList(selectedConn);
-          const link: string[] = [ '/connections' ];
-          console.log('[CreateApiPageComponent] Navigating to: %o', link);
+          const link: string[] = [ connectionsRootPath ];
+          console.log("[CreateApiPageComponent] Navigating to: %o", link);
           this.router.navigate(link);
         }
       );
   }
 
-  private removeConnectionFromList(connection: Connection) {
+  private removeConnectionFromList(connection: Connection): void {
     this.allConnections.splice(this.allConnections.indexOf(connection), 1);
     this.filterConnections();
   }
diff --git a/ngapp/src/app/connections/connections.module.ts b/ngapp/src/app/connections/connections.module.ts
index 03de83c6..b2eea625 100644
--- a/ngapp/src/app/connections/connections.module.ts
+++ b/ngapp/src/app/connections/connections.module.ts
@@ -15,20 +15,19 @@
  * limitations under the License.
  */
 
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { RouterModule } from "@angular/router";
-
 import { AddConnectionComponent } from "@connections/add-connection/add-connection.component";
-import { AddConnectionFormComponent } from "@connections/shared/add-connection-form/add-connection-form.component";
 import { ConnectionsCardsComponent } from "@connections/connections-cards/connections-cards.component";
-import { ConnectionsComponent } from "@connections/connections.component";
 import { ConnectionsListComponent } from "@connections/connections-list/connections-list.component";
+import { ConnectionsRoutingModule } from "@connections/connections-routing.module";
+import { ConnectionsComponent } from "@connections/connections.component";
 import { EditConnectionComponent } from "@connections/edit-connection/edit-connection.component";
-import { CoreModule } from "@core/core.module";
+import { AddConnectionFormComponent } from "@connections/shared/add-connection-form/add-connection-form.component";
 import { ConnectionService } from "@connections/shared/connection.service";
-import { ConnectionsRoutingModule } from "@connections/connections-routing.module";
+import { CoreModule } from "@core/core.module";
 import { SharedModule } from "@shared/shared.module";
 
 @NgModule({
diff --git a/ngapp/src/app/connections/edit-connection/edit-connection.component.html b/ngapp/src/app/connections/edit-connection/edit-connection.component.html
index 44784a3d..37e19af2 100644
--- a/ngapp/src/app/connections/edit-connection/edit-connection.component.html
+++ b/ngapp/src/app/connections/edit-connection/edit-connection.component.html
@@ -1,7 +1,7 @@
 <div style="margin-left: 150px">
   <div id="connections-breadcrumb-bar">
     <breadcrumbs>
-      <li app-breadcrumb label="Connections" icon="plug" [route]="[ '/connections' ]"></li>
+      <li app-breadcrumb label="Connections" icon="plug" [route]="[ connectionsLink ]"></li>
       <li app-breadcrumb label="Edit Connection" icon="pencil" class="active"></li>
     </breadcrumbs>
   </div>
diff --git a/ngapp/src/app/connections/edit-connection/edit-connection.component.spec.ts b/ngapp/src/app/connections/edit-connection/edit-connection.component.spec.ts
index 61909809..afb364b1 100644
--- a/ngapp/src/app/connections/edit-connection/edit-connection.component.spec.ts
+++ b/ngapp/src/app/connections/edit-connection/edit-connection.component.spec.ts
@@ -1,13 +1,12 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-
-import {EditConnectionComponent} from './edit-connection.component';
-import {RouterTestingModule} from '@angular/router/testing';
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
+import {HttpModule} from "@angular/http";
+import {RouterTestingModule} from "@angular/router/testing";
 import {ConnectionService} from "@connections/shared/connection.service";
 import {MockConnectionService} from "@connections/shared/mock-connection.service";
-import {HttpModule} from "@angular/http";
 import {CoreModule} from "@core/core.module";
+import {EditConnectionComponent} from "./edit-connection.component";
 
-describe('EditConnectionComponent', () => {
+describe("EditConnectionComponent", () => {
   let component: EditConnectionComponent;
   let fixture: ComponentFixture<EditConnectionComponent>;
 
@@ -28,7 +27,7 @@ describe('EditConnectionComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/connections/edit-connection/edit-connection.component.ts b/ngapp/src/app/connections/edit-connection/edit-connection.component.ts
index c49d6800..807a6c74 100644
--- a/ngapp/src/app/connections/edit-connection/edit-connection.component.ts
+++ b/ngapp/src/app/connections/edit-connection/edit-connection.component.ts
@@ -15,25 +15,32 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Router } from '@angular/router';
-
-import { NewConnection } from '@connections/shared/new-connection.model';
-import { ConnectionService } from '@connections/shared/connection.service';
-import { AbstractPageComponent } from '@shared/abstract-page.component';
+import { Component } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { Router } from "@angular/router";
+import { connectionsRootPath } from "@connections/connections-routing.module";
+import { ConnectionService } from "@connections/shared/connection.service";
+import { NewConnection } from "@connections/shared/new-connection.model";
+import { AbstractPageComponent } from "@shared/abstract-page.component";
 
 @Component({
-  selector: 'app-edit-connection',
-  templateUrl: './edit-connection.component.html',
-  styleUrls: ['./edit-connection.component.css']
+  selector: "app-edit-connection",
+  templateUrl: "./edit-connection.component.html",
+  styleUrls: ["./edit-connection.component.css"]
 })
 export class EditConnectionComponent extends AbstractPageComponent {
 
+  public connectionsLink = connectionsRootPath;
+
+  private router: Router;
+  private connectionService: ConnectionService;
+
 //  @ViewChild(AddConnectionFormComponent) form: AddConnectionFormComponent;
 
-  constructor(private router: Router, route: ActivatedRoute, private connectionService: ConnectionService) {
+  constructor(router: Router, route: ActivatedRoute, connectionService: ConnectionService) {
     super(route);
+    this.router = router;
+    this.connectionService = connectionService;
   }
 
   /**
diff --git a/ngapp/src/app/connections/shared/add-connection-form/add-connection-form.component.html b/ngapp/src/app/connections/shared/add-connection-form/add-connection-form.component.html
index 0c42ee26..05e92068 100644
--- a/ngapp/src/app/connections/shared/add-connection-form/add-connection-form.component.html
+++ b/ngapp/src/app/connections/shared/add-connection-form/add-connection-form.component.html
@@ -5,25 +5,25 @@ <h1>Connection Properties</h1>
       <div class="form-group">
         <label class="col-sm-1 control-label" for="name">Name</label>
         <div class="col-sm-10">
-          <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name">
+          <input type="text" class="form-control" id="name" required [(ngModel)]="model.getName()" name="name">
         </div>
       </div>
       <div class="form-group">
         <label class="col-sm-1 control-label" for="dv__jndiName">JNDI Name</label>
         <div class="col-sm-10">
-          <input type="text" class="form-control" id="dv__jndiName" required [(ngModel)]="model.jndiName" name="jndiName">
+          <input type="text" class="form-control" id="dv__jndiName" required [(ngModel)]="model.getJndiName()" name="jndiName">
         </div>
       </div>
       <div class="form-group">
         <label class="col-sm-1 control-label" for="dv__driverName">Driver</label>
         <div class="col-sm-10">
-          <input type="text" class="form-control" id="dv__driverName" [(ngModel)]="model.driverName" name="driverName">
+          <input type="text" class="form-control" id="dv__driverName" [(ngModel)]="model.getDriverName()" name="driverName">
         </div>
       </div>
       <div class="form-group">
         <label class="col-sm-1 control-label" for="jdbc">JDBC</label>
         <div class="col-sm-10">
-          <input type="checkbox" class="form-control" id="jdbc" [(ngModel)]="model.jdbc" name="jdbc">
+          <input type="checkbox" class="form-control" id="jdbc" [(ngModel)]="model.isJdbc()" name="jdbc">
         </div>
       </div>
       <hr/>
@@ -39,4 +39,5 @@ <h1>Connection Properties</h1>
         </div>
       </div>
     </form>
+  </div>
 </div>
diff --git a/ngapp/src/app/connections/shared/add-connection-form/add-connection-form.component.spec.ts b/ngapp/src/app/connections/shared/add-connection-form/add-connection-form.component.spec.ts
index c2e10619..2f52da6d 100644
--- a/ngapp/src/app/connections/shared/add-connection-form/add-connection-form.component.spec.ts
+++ b/ngapp/src/app/connections/shared/add-connection-form/add-connection-form.component.spec.ts
@@ -1,10 +1,9 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
+import {FormsModule} from "@angular/forms";
+import {RouterTestingModule} from "@angular/router/testing";
+import {AddConnectionFormComponent} from "./add-connection-form.component";
 
-import {FormsModule} from '@angular/forms';
-import {AddConnectionFormComponent} from './add-connection-form.component';
-import {RouterTestingModule} from '@angular/router/testing';
-
-describe('AddConnectionFormComponent', () => {
+describe("AddConnectionFormComponent", () => {
   let component: AddConnectionFormComponent;
   let fixture: ComponentFixture<AddConnectionFormComponent>;
 
@@ -22,7 +21,7 @@ describe('AddConnectionFormComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/connections/shared/add-connection-form/add-connection-form.component.ts b/ngapp/src/app/connections/shared/add-connection-form/add-connection-form.component.ts
index 5ebdd104..126a0da2 100644
--- a/ngapp/src/app/connections/shared/add-connection-form/add-connection-form.component.ts
+++ b/ngapp/src/app/connections/shared/add-connection-form/add-connection-form.component.ts
@@ -15,29 +15,31 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { NewConnection } from '@connections/shared/new-connection.model';
+import { Component, EventEmitter, Output } from "@angular/core";
+import { Router } from "@angular/router";
+import { connectionsRootPath } from "@connections/connections-routing.module";
+import { NewConnection } from "@connections/shared/new-connection.model";
 
 @Component({
-  selector: 'app-add-connection-form',
-  templateUrl: './add-connection-form.component.html',
-  styleUrls: ['./add-connection-form.component.css']
+  selector: "app-add-connection-form",
+  templateUrl: "./add-connection-form.component.html",
+  styleUrls: ["./add-connection-form.component.css"]
 })
-export class AddConnectionFormComponent implements OnInit {
-
-  @Output() onCreateConnection = new EventEmitter<NewConnection>();
+export class AddConnectionFormComponent {
 
-  model = new NewConnection();
-  creatingConnection = false;
+  private creatingConnection = false;
+  private model = new NewConnection();
+  private router: Router;
 
-  constructor( private router: Router ) { }
+  @Output() private onCreateConnection = new EventEmitter<NewConnection>();
 
-  ngOnInit() {
+  constructor( router: Router ) {
+    this.router = router;
   }
 
-  get currentConnection() { return JSON.stringify(this.model); }
+  public currentConnection(): string {
+    return JSON.stringify(this.model);
+  }
 
   /**
    * Called when the user clicks the "Create Connection" submit button on the form.
@@ -49,15 +51,21 @@ export class AddConnectionFormComponent implements OnInit {
     connection.setDriverName(this.model.getDriverName());
     connection.setJdbc(this.model.isJdbc());
 
-    console.log('[AddConnectionFormComponent] Firing create-connection event: %o', connection);
+    console.log("[AddConnectionFormComponent] Firing create-connection event: %o", connection);
 
     this.creatingConnection = true;
     this.onCreateConnection.emit(connection);
   }
 
   public cancelAdd(): void {
-    const link: string[] = [ '/connections' ];
+    const link: string[] = [ connectionsRootPath ];
     this.router.navigate(link);
   }
 
+  /**
+   * Called when the connection has been created.
+   */
+  public connectionCreated(): void {
+    this.creatingConnection = false;
+  }
 }
diff --git a/ngapp/src/app/connections/shared/connection.model.ts b/ngapp/src/app/connections/shared/connection.model.ts
index 55aef1fd..5dcfb54e 100644
--- a/ngapp/src/app/connections/shared/connection.model.ts
+++ b/ngapp/src/app/connections/shared/connection.model.ts
@@ -15,7 +15,9 @@
  * limitations under the License.
  */
 
-export class Connection {
+import { Identifiable } from "@shared/identifiable";
+
+export class Connection implements Identifiable< string > {
 
   private keng__id: string;
   private dv__jndiName: string;
@@ -26,7 +28,7 @@ export class Connection {
    * @param {Object} json the JSON representation of a Connection
    * @returns {Connection} the new Connection (never null)
    */
-  public static create( json: Object = {} ) {
+  public static create( json: Object = {} ): Connection {
     const conn = new Connection();
     conn.setValues( json );
     return conn;
@@ -96,7 +98,7 @@ export class Connection {
    * Set all object values using the supplied Connection json
    * @param {Object} values
    */
-  public setValues(values: Object = {}) {
+  public setValues(values: Object = {}): void {
     Object.assign(this, values);
   }
 
diff --git a/ngapp/src/app/connections/shared/connection.service.spec.ts b/ngapp/src/app/connections/shared/connection.service.spec.ts
index e3450eb5..36c64aac 100644
--- a/ngapp/src/app/connections/shared/connection.service.spec.ts
+++ b/ngapp/src/app/connections/shared/connection.service.spec.ts
@@ -1,9 +1,9 @@
-import {TestBed, inject} from '@angular/core/testing';
+import {inject, TestBed} from "@angular/core/testing";
 
-import {ConnectionService} from './connection.service';
 import {HttpModule} from "@angular/http";
+import {ConnectionService} from "./connection.service";
 
-describe('ConnectionService', () => {
+describe("ConnectionService", () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [ HttpModule ],
@@ -11,7 +11,7 @@ describe('ConnectionService', () => {
     });
   });
 
-  it('should be created', inject([ConnectionService], (service: ConnectionService) => {
+  it("should be created", inject([ConnectionService], (service: ConnectionService) => {
     expect(service).toBeTruthy();
   }));
 });
diff --git a/ngapp/src/app/connections/shared/connection.service.ts b/ngapp/src/app/connections/shared/connection.service.ts
index a9e3ecff..d0b23b1f 100644
--- a/ngapp/src/app/connections/shared/connection.service.ts
+++ b/ngapp/src/app/connections/shared/connection.service.ts
@@ -15,20 +15,22 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
-import { Observable } from 'rxjs/Observable';
-
+import { Injectable } from "@angular/core";
+import { Http } from "@angular/http";
 import { Connection } from "@connections/shared/connection.model";
 import { NewConnection } from "@connections/shared/new-connection.model";
 import { ApiService } from "@core/api.service";
-import { KOMODO_WORKSPACE_URL } from "@core/api.service";
+import { komodoWorkspaceUrl } from "@core/api.service";
+import { Observable } from "rxjs/Observable";
 
 @Injectable()
 export class ConnectionService extends ApiService {
 
-  constructor( private http: Http ) {
+  private http: Http;
+
+  constructor( http: Http ) {
     super();
+    this.http = http;
   }
 
   /**
@@ -37,10 +39,10 @@ export class ConnectionService extends ApiService {
    */
   public getAllConnections(): Observable<Connection[]> {
     return this.http
-      .get(KOMODO_WORKSPACE_URL + '/connections', this.getAuthRequestOptions())
-      .map(response => {
+      .get(komodoWorkspaceUrl + "/connections", this.getAuthRequestOptions())
+      .map((response) => {
         const connections = response.json();
-        return connections.map((connection) => {const conn = Connection.create( connection ); return conn; });
+        return connections.map((connection) => Connection.create( connection ));
       })
       .catch(this.handleError);
   }
@@ -52,8 +54,8 @@ export class ConnectionService extends ApiService {
    */
   public createConnection(connection: NewConnection): Observable<NewConnection> {
     return this.http
-      .post(KOMODO_WORKSPACE_URL + '/connections/' + connection.getName(), connection, this.getAuthRequestOptions())
-      .map(response => {
+      .post(komodoWorkspaceUrl + "/connections/" + connection.getName(), connection, this.getAuthRequestOptions())
+      .map((response) => {
         return new Connection();
       })
       .catch(this.handleError);
@@ -66,8 +68,8 @@ export class ConnectionService extends ApiService {
    */
   public deleteConnection(connection: NewConnection): Observable<NewConnection> {
     return this.http
-      .delete(KOMODO_WORKSPACE_URL + '/connections/' + connection.getName(), this.getAuthRequestOptions())
-      .map(response => null)
+      .delete(komodoWorkspaceUrl + "/connections/" + connection.getName(), this.getAuthRequestOptions())
+      .map((response) => null)
       .catch(this.handleError);
   }
 
diff --git a/ngapp/src/app/connections/shared/mock-connection.service.ts b/ngapp/src/app/connections/shared/mock-connection.service.ts
index 3fef25d7..7728d0f5 100644
--- a/ngapp/src/app/connections/shared/mock-connection.service.ts
+++ b/ngapp/src/app/connections/shared/mock-connection.service.ts
@@ -1,26 +1,25 @@
-import {Injectable } from '@angular/core';
-import {Http} from '@angular/http';
-import {environment} from "@environments/environment";
-import {Connection} from '@connections/shared/connection.model';
-import {NewConnection} from '@connections/shared/new-connection.model';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/observable/throw';
-import 'rxjs/add/observable/of';
-
-const KOMODO_WORKSPACE_URL = environment.komodoWorkspaceUrl;
+import {Injectable } from "@angular/core";
+import {Http} from "@angular/http";
+import {Connection} from "@connections/shared/connection.model";
+import {NewConnection} from "@connections/shared/new-connection.model";
+import "rxjs/add/observable/of";
+import "rxjs/add/observable/throw";
+import "rxjs/add/operator/catch";
+import "rxjs/add/operator/map";
+import { Observable } from "rxjs/Observable";
 
 @Injectable()
 export class MockConnectionService {
 
-  newConnection = new NewConnection();
-  conn1 = new Connection();
-  conn2 = new Connection();
-  conn3 = new Connection();
-  conns: Connection[] = [this.conn1, this.conn2, this.conn3];
+  private newConnection = new NewConnection();
+  private conn1 = new Connection();
+  private conn2 = new Connection();
+  private conn3 = new Connection();
+  private conns: Connection[] = [this.conn1, this.conn2, this.conn3];
+  private http: Http;
 
-  constructor( private http: Http ) {
+  constructor( http: Http ) {
+    this.http = http;
   }
 
   /**
diff --git a/ngapp/src/app/connections/shared/new-connection.model.ts b/ngapp/src/app/connections/shared/new-connection.model.ts
index c433b9f7..903eee0a 100644
--- a/ngapp/src/app/connections/shared/new-connection.model.ts
+++ b/ngapp/src/app/connections/shared/new-connection.model.ts
@@ -17,16 +17,17 @@
 
 export class NewConnection {
 
-  name: string;
-  jndiName: string;
-  driverName: string;
-  jdbc: boolean;
-  properties: Map< string, string > = new Map< string, string >();
+  private name: string;
+  private jndiName: string;
+  private driverName: string;
+  private jdbc: boolean;
+  private properties: Map< string, string > = new Map< string, string >();
 
   /**
    * Constructor
    */
   constructor() {
+    // nothing to do
   }
 
   /**
@@ -86,7 +87,7 @@ export class NewConnection {
   }
 
   /**
-   * @param {boolean} jdbc the jdbc status (optional)
+   * @param {boolean} isJdbc the jdbc status (optional)
    */
   public setJdbc( isJdbc?: boolean ): void {
     this.jdbc = isJdbc ? isJdbc : true;
@@ -99,9 +100,8 @@ export class NewConnection {
     this.properties = props ? props : new Map< string, string >();
   }
 
-
   // overrides toJSON - we do not want the name supplied in the json body.
-  public toJSON() {
+  public toJSON(): {} {
     return {
       jndiName: this.jndiName,
       driverName: this.driverName,
diff --git a/ngapp/src/app/core/api.service.spec.ts b/ngapp/src/app/core/api.service.spec.ts
index a2a555b0..adb65131 100644
--- a/ngapp/src/app/core/api.service.spec.ts
+++ b/ngapp/src/app/core/api.service.spec.ts
@@ -1,9 +1,8 @@
-import { TestBed, inject } from '@angular/core/testing';
-import { HttpModule } from '@angular/http';
+import { inject, TestBed } from "@angular/core/testing";
+import { HttpModule } from "@angular/http";
+import { ApiService } from "@core/api.service";
 
-import { ApiService } from './api.service';
-
-describe('ApiService', () => {
+describe("ApiService", () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpModule],
@@ -11,7 +10,7 @@ describe('ApiService', () => {
     });
   });
 
-  it('should be created', inject([ApiService], (service: ApiService) => {
+  it("should be created", inject([ApiService], (service: ApiService) => {
     expect(service).toBeTruthy();
   }));
 });
diff --git a/ngapp/src/app/core/api.service.ts b/ngapp/src/app/core/api.service.ts
index ca80c009..96ef2e3c 100644
--- a/ngapp/src/app/core/api.service.ts
+++ b/ngapp/src/app/core/api.service.ts
@@ -15,15 +15,16 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
-import { environment } from '@environments/environment';
-import {Http, Headers, RequestOptions} from '@angular/http';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/observable/throw';
+import { Injectable } from "@angular/core";
+import {Headers, RequestOptions} from "@angular/http";
+import { environment } from "@environments/environment";
+import "rxjs/add/observable/throw";
+import "rxjs/add/operator/catch";
+import "rxjs/add/operator/map";
+import { Observable } from "rxjs/Observable";
+import { ErrorObservable } from "rxjs/observable/ErrorObservable";
 
-export const KOMODO_WORKSPACE_URL = environment.komodoWorkspaceUrl;
+export const komodoWorkspaceUrl = environment.komodoWorkspaceUrl;
 
 @Injectable()
 export class ApiService {
@@ -34,13 +35,12 @@ export class ApiService {
    * @returns {RequestOptions}
    */
   protected getAuthRequestOptions(): RequestOptions {
-    const headers = new Headers({ 'Authorization': 'Basic ' +  btoa('dsbUser:1demo-user1') });
-    const options = new RequestOptions({ headers: headers });
-    return options;
+    const headers = new Headers({ "Authorization": "Basic " +  btoa("dsbUser:1demo-user1") });
+    return new RequestOptions({ headers });
   }
 
-  protected handleError (error: Response | any) {
-    console.error('ApiService::handleError', error);
+  protected handleError(error: Response | any): ErrorObservable {
+    console.error("ApiService::handleError", error);
     return Observable.throw(error);
   }
 
diff --git a/ngapp/src/app/core/breadcrumbs/breadcrumb/breadcrumb.component.spec.ts b/ngapp/src/app/core/breadcrumbs/breadcrumb/breadcrumb.component.spec.ts
index d8de5e11..ac1e2d9b 100644
--- a/ngapp/src/app/core/breadcrumbs/breadcrumb/breadcrumb.component.spec.ts
+++ b/ngapp/src/app/core/breadcrumbs/breadcrumb/breadcrumb.component.spec.ts
@@ -1,9 +1,8 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-
-import {BreadcrumbComponent} from './breadcrumb.component';
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
 import {RouterTestingModule} from "@angular/router/testing";
+import {BreadcrumbComponent} from "./breadcrumb.component";
 
-describe('BreadcrumbComponent', () => {
+describe("BreadcrumbComponent", () => {
   let component: BreadcrumbComponent;
   let fixture: ComponentFixture<BreadcrumbComponent>;
 
@@ -21,7 +20,7 @@ describe('BreadcrumbComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/core/breadcrumbs/breadcrumb/breadcrumb.component.ts b/ngapp/src/app/core/breadcrumbs/breadcrumb/breadcrumb.component.ts
index fe366990..0c58cbff 100644
--- a/ngapp/src/app/core/breadcrumbs/breadcrumb/breadcrumb.component.ts
+++ b/ngapp/src/app/core/breadcrumbs/breadcrumb/breadcrumb.component.ts
@@ -15,18 +15,18 @@
  * limitations under the License.
  */
 
-import {Component, Input} from '@angular/core';
+import {Component, Input} from "@angular/core";
 
 @Component({
   moduleId: module.id,
-  selector: '[app-breadcrumb]',
-  templateUrl: 'breadcrumb.component.html',
-  styleUrls: ['breadcrumb.component.css']
+  selector: "[app-breadcrumb]",
+  templateUrl: "breadcrumb.component.html",
+  styleUrls: ["breadcrumb.component.css"]
 })
 export class BreadcrumbComponent {
 
-  @Input() label: string;
-  @Input() icon: string;
-  @Input() route: string[];
+  @Input() private label: string;
+  @Input() private icon: string;
+  @Input() private route: string[];
 
 }
diff --git a/ngapp/src/app/core/breadcrumbs/breadcrumbs.component.spec.ts b/ngapp/src/app/core/breadcrumbs/breadcrumbs.component.spec.ts
index 1b1a1708..aea8e021 100644
--- a/ngapp/src/app/core/breadcrumbs/breadcrumbs.component.spec.ts
+++ b/ngapp/src/app/core/breadcrumbs/breadcrumbs.component.spec.ts
@@ -1,8 +1,7 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { BreadcrumbsComponent } from "./breadcrumbs.component";
 
-import { BreadcrumbsComponent } from './breadcrumbs.component';
-
-describe('BreadcrumbsComponent', () => {
+describe("BreadcrumbsComponent", () => {
   let component: BreadcrumbsComponent;
   let fixture: ComponentFixture<BreadcrumbsComponent>;
 
@@ -19,7 +18,7 @@ describe('BreadcrumbsComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/core/breadcrumbs/breadcrumbs.component.ts b/ngapp/src/app/core/breadcrumbs/breadcrumbs.component.ts
index 542e0604..d9a049fc 100644
--- a/ngapp/src/app/core/breadcrumbs/breadcrumbs.component.ts
+++ b/ngapp/src/app/core/breadcrumbs/breadcrumbs.component.ts
@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 
-import {Component} from '@angular/core';
+import {Component} from "@angular/core";
 
 @Component({
   moduleId: module.id,
-  selector: 'breadcrumbs',
-  templateUrl: 'breadcrumbs.component.html',
-  styleUrls: ['breadcrumbs.component.css']
+  selector: "breadcrumbs",
+  templateUrl: "breadcrumbs.component.html",
+  styleUrls: ["breadcrumbs.component.css"]
 })
 export class BreadcrumbsComponent {
 
diff --git a/ngapp/src/app/core/common.ts b/ngapp/src/app/core/common.ts
deleted file mode 100644
index fb926d8e..00000000
--- a/ngapp/src/app/core/common.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * @license
- * Copyright 2017 JBoss 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.
- */
-
-
-export class ArrayUtils {
-
-  /**
-   * Returns the intersection of two arrays.
-   * @param a1
-   * @param a2
-   */
-  public static intersect(a1: any[], a2: any[]): any[] {
-    let rval: any[] = [];
-    for (let item of a1) {
-      if (ArrayUtils.contains(a2, item)) {
-        rval.push(item);
-      }
-    }
-    return rval;
-  }
-
-  /**
-   * Returns true if the given item is contained in the given array.
-   * @param a
-   * @param item
-   * @return {boolean}
-   */
-  public static contains(a: any[], item: any): boolean {
-    for (let aitem of a) {
-      if (aitem === item) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-}
-
-export class ObjectUtils {
-
-  public static isNullOrUndefined(object: any): boolean {
-    return object === undefined || object === null;
-  }
-
-  public static objectEquals(x:any, y:any) {
-    if (x === null || x === undefined || y === null || y === undefined) { return x === y; }
-    // after this just checking type of one would be enough
-    if (x.constructor !== y.constructor) { return false; }
-    // if they are functions, they should exactly refer to same one (because of closures)
-    if (x instanceof Function) { return x === y; }
-    // if they are regexps, they should exactly refer to same one (it is hard to better equality check on current ES)
-    if (x instanceof RegExp) { return x === y; }
-    if (x === y || x.valueOf() === y.valueOf()) { return true; }
-    if (Array.isArray(x) && x.length !== y.length) { return false; }
-
-    // if they are dates, they must had equal valueOf
-    if (x instanceof Date) { return false; }
-
-    // if they are strictly equal, they both need to be object at least
-    if (!(x instanceof Object)) { return false; }
-    if (!(y instanceof Object)) { return false; }
-
-    var p = Object.keys(x);
-    return Object.keys(y).every(function (i) { return p.indexOf(i) !== -1; }) &&
-      p.every(function (i) { return ObjectUtils.objectEquals(x[i], y[i]); });
-  }
-
-}
-
-export class HttpUtils {
-
-  public static parseLinkHeader(header: string): any {
-    let links: any = new Object();
-    if (ObjectUtils.isNullOrUndefined(header)) {
-      return links;
-    }
-    if (header.length === 0) {
-      return links;
-    }
-
-    // Split parts by comma
-    let parts: string[] = header.split(',');
-
-    // Parse each part into a named link
-    parts.forEach( part => {
-      var section = part.split(';');
-      if (section.length == 2) {
-        var url = section[0].replace(/<(.*)>/, '$1').trim();
-        var name = section[1].replace(/rel="(.*)"/, '$1').trim();
-        links[name] = url;
-      }
-    });
-
-    return links;
-  }
-
-}
diff --git a/ngapp/src/app/core/core.module.ts b/ngapp/src/app/core/core.module.ts
index de40608a..adbf929c 100644
--- a/ngapp/src/app/core/core.module.ts
+++ b/ngapp/src/app/core/core.module.ts
@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import {RouterModule} from '@angular/router';
-
-import { NavHeaderComponent } from "@core/nav-header/nav-header.component";
-import { VerticalNavComponent } from "@core/vertical-nav/vertical-nav.component";
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import {HttpModule} from "@angular/http";
+import {RouterModule} from "@angular/router";
 import { BreadcrumbComponent } from "@core/breadcrumbs/breadcrumb/breadcrumb.component";
 import { BreadcrumbsComponent } from "@core/breadcrumbs/breadcrumbs.component";
-import {HttpModule} from "@angular/http";
+import { NavHeaderComponent } from "@core/nav-header/nav-header.component";
+import { VerticalNavComponent } from "@core/vertical-nav/vertical-nav.component";
 
 @NgModule({
   imports: [
diff --git a/ngapp/src/app/core/nav-header/nav-header.component.spec.ts b/ngapp/src/app/core/nav-header/nav-header.component.spec.ts
index f0483e1b..454cc499 100644
--- a/ngapp/src/app/core/nav-header/nav-header.component.spec.ts
+++ b/ngapp/src/app/core/nav-header/nav-header.component.spec.ts
@@ -1,8 +1,7 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { NavHeaderComponent } from "@core/nav-header/nav-header.component";
 
-import { NavHeaderComponent } from './nav-header.component';
-
-describe('NavHeaderComponent', () => {
+describe("NavHeaderComponent", () => {
   let component: NavHeaderComponent;
   let fixture: ComponentFixture<NavHeaderComponent>;
 
@@ -19,7 +18,7 @@ describe('NavHeaderComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/core/nav-header/nav-header.component.ts b/ngapp/src/app/core/nav-header/nav-header.component.ts
index 27161eb1..19964510 100644
--- a/ngapp/src/app/core/nav-header/nav-header.component.ts
+++ b/ngapp/src/app/core/nav-header/nav-header.component.ts
@@ -15,39 +15,40 @@
  * limitations under the License.
  */
 
-import {Component, OnInit, Inject} from '@angular/core';
+import {Component} from "@angular/core";
 
 @Component({
   moduleId: module.id,
-  selector: 'app-nav-header',
-  templateUrl: './nav-header.component.html',
-  styleUrls: [ './nav-header.component.less' ]
+  selector: "app-nav-header",
+  templateUrl: "./nav-header.component.html",
+  styleUrls: [ "./nav-header.component.less" ]
 })
-export class NavHeaderComponent implements OnInit {
+export class NavHeaderComponent {
 
-  version = 'N/A';
-  builtOn: Date = new Date();
-  projectUrl = 'http://jboss.org/teiiddesigner/';
+  private version = "N/A";
+  private builtOn: Date = new Date();
+  private projectUrl = "http://jboss.org/teiiddesigner/";
+  private userId = "user";
 
   constructor() {
-    if (window['BeetleStudio']) {
-      console.log('[NavHeaderComponent] Found app info: %o', window['BeetleStudio'])
-      this.version = window['BeetleStudio'].version;
-      this.builtOn = new Date(window['BeetleStudio'].builtOn);
-      this.projectUrl = window['BeetleStudio'].url;
+    // TODO this does not work
+    if (window["BeetleStudio"]) {
+      console.log("[NavHeaderComponent] Found app info: %o", window["BeetleStudio"]);
+      this.version = window["BeetleStudio"].version;
+      this.builtOn = new Date(window["BeetleStudio"].builtOn);
+      this.projectUrl = window["BeetleStudio"].url;
     } else {
-      console.log('[NavHeaderComponent] App info not found.');
+      console.log("[NavHeaderComponent] App info not found.");
     }
   }
 
-  ngOnInit(): void {
-  }
-
   public user(): string {
-    return 'User';
+    // TODO implement user()
+    return this.userId;
   }
 
   public logout(): void {
+    // TODO implement logout()
   }
 
 }
diff --git a/ngapp/src/app/core/utils/array-utils.ts b/ngapp/src/app/core/utils/array-utils.ts
new file mode 100644
index 00000000..8ee19662
--- /dev/null
+++ b/ngapp/src/app/core/utils/array-utils.ts
@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2017 JBoss 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.
+ */
+
+export class ArrayUtils {
+
+  /**
+   * @param a the array being searched
+   * @param item the item being searched for
+   * @return {boolean} true if the given item is contained in the given array
+   */
+  public static contains( a: any[], item: any ): boolean {
+    for ( const aitem of a ) {
+      if ( aitem === item ) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * @param {any[]} a1 the first array
+   * @param {any[]} a2 the second array
+   * @returns {any[]} the intersection of two arrays
+   */
+  public static intersect( a1: any[], a2: any[] ): any[] {
+    const rval: any[] = [];
+    for ( const item of a1 ) {
+      if ( ArrayUtils.contains( a2, item ) ) {
+        rval.push( item );
+      }
+    }
+    return rval;
+  }
+
+}
diff --git a/ngapp/src/app/core/utils/object-utils.ts b/ngapp/src/app/core/utils/object-utils.ts
new file mode 100644
index 00000000..80d78d31
--- /dev/null
+++ b/ngapp/src/app/core/utils/object-utils.ts
@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright 2017 JBoss 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.
+ */
+
+export class ObjectUtils {
+
+  public static isNullOrUndefined( object: any ): boolean {
+    return object === undefined || object === null;
+  }
+
+  public static objectEquals( x: any, y: any ): boolean {
+    if ( x === null || x === undefined || y === null || y === undefined ) {
+      return x === y;
+    }
+    // after this just checking type of one would be enough
+    if ( x.constructor !== y.constructor ) {
+      return false;
+    }
+    // if they are functions, they should exactly refer to same one (because of closures)
+    if ( x instanceof Function ) {
+      return x === y;
+    }
+    // if they are regexps, they should exactly refer to same one (it is hard to better equality check on current ES)
+    if ( x instanceof RegExp ) {
+      return x === y;
+    }
+    if ( x === y || x.valueOf() === y.valueOf() ) {
+      return true;
+    }
+    if ( Array.isArray( x ) && x.length !== y.length ) {
+      return false;
+    }
+
+    // if they are dates, they must had equal valueOf
+    if ( x instanceof Date ) {
+      return false;
+    }
+
+    // if they are strictly equal, they both need to be object at least
+    if ( !(x instanceof Object) ) {
+      return false;
+    }
+    if ( !(y instanceof Object) ) {
+      return false;
+    }
+
+    const p = Object.keys( x );
+    return Object.keys( y ).every( (i) => p.indexOf( i ) !== -1 ) &&
+      p.every( (i) => ObjectUtils.objectEquals( x[ i ], y[ i ] ) );
+  }
+
+}
diff --git a/ngapp/src/app/core/vertical-nav/vertical-nav.component.spec.ts b/ngapp/src/app/core/vertical-nav/vertical-nav.component.spec.ts
index 0c113e43..2e155a86 100644
--- a/ngapp/src/app/core/vertical-nav/vertical-nav.component.spec.ts
+++ b/ngapp/src/app/core/vertical-nav/vertical-nav.component.spec.ts
@@ -1,9 +1,8 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { RouterTestingModule } from "@angular/router/testing";
+import { VerticalNavComponent } from "@core/vertical-nav/vertical-nav.component";
 
-import { VerticalNavComponent } from './vertical-nav.component';
-
-describe('VerticalNavComponent', () => {
+describe("VerticalNavComponent", () => {
   let component: VerticalNavComponent;
   let fixture: ComponentFixture<VerticalNavComponent>;
 
@@ -21,7 +20,7 @@ describe('VerticalNavComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/core/vertical-nav/vertical-nav.component.ts b/ngapp/src/app/core/vertical-nav/vertical-nav.component.ts
index c6ee0a2b..8dd65775 100644
--- a/ngapp/src/app/core/vertical-nav/vertical-nav.component.ts
+++ b/ngapp/src/app/core/vertical-nav/vertical-nav.component.ts
@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
-import {Router, NavigationEnd} from '@angular/router';
+import { Component, OnInit } from "@angular/core";
+import { NavigationEnd, Router } from "@angular/router";
 
 /**
  * Models the menus off the main left-hand vertical nav.
@@ -27,49 +27,50 @@ enum VerticalNavType {
 
 @Component({
   moduleId: module.id,
-  selector: 'app-vertical-nav',
-  templateUrl: './vertical-nav.component.html',
-  styleUrls: ['./vertical-nav.component.less']
+  selector: "app-vertical-nav",
+  templateUrl: "./vertical-nav.component.html",
+  styleUrls: ["./vertical-nav.component.less"]
 })
 
 export class VerticalNavComponent implements OnInit {
+  public menuTypes: any = VerticalNavType;
+  public currentMenu: VerticalNavType = VerticalNavType.Home;
+  private router: Router;
 
-    public menuTypes: any = VerticalNavType;
-    public currentMenu: VerticalNavType = VerticalNavType.Home;
+  constructor(router: Router) {
+    this.router = router;
+  }
 
-    constructor(private router: Router) {
-    }
-
-    ngOnInit(): void {
-        console.log('Subscribing to router events.');
-          this.router.events.subscribe(event => {
-            if (event instanceof NavigationEnd) {
-              this.onShadeClick();
-            }
-          });
-    }
+  public ngOnInit(): void {
+    console.log("Subscribing to router events.");
+    this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        this.onShadeClick();
+      }
+    });
+  }
 
-    /**
-     * Returns true if the currently active route is /activities/*
-     * @returns {boolean}
-     */
-    isActivitiesRoute(): boolean {
-      return this.router.isActive('/activities', true);
-    }
+  /**
+   * Returns true if the currently active route is /activities/*
+   * @returns {boolean}
+   */
+  private isActivitiesRoute(): boolean {
+    return this.router.isActive( "/activities", true );
+  }
 
     /**
      * Returns true if the currently active route is /connections/*
      * @returns {boolean}
      */
-    isConnectionsRoute(): boolean {
-        return this.router.isActive('/connections', true);
-    }
+  private isConnectionsRoute(): boolean {
+    return this.router.isActive("/connections", true);
+  }
 
    /**
-     * Called when the user clicks the vertical menu shade (the grey shaded area behind the submenu div that
-     * is displayed when a sub-menu is selected).  Clicking the shade makes the sub-menu div go away.
-     */
-    onShadeClick(): void {
+    * Called when the user clicks the vertical menu shade (the grey shaded area behind the submenu div that
+    * is displayed when a sub-menu is selected).  Clicking the shade makes the sub-menu div go away.
+    */
+  private onShadeClick(): void {
       /*
         this.subMenuOut = false;
         setTimeout(() => {
@@ -81,18 +82,18 @@ export class VerticalNavComponent implements OnInit {
     /**
      * Called when the user clicks the vertical menu Activities item.
      */
-    onActivitiesClick(): void {
+  private onActivitiesClick(): void {
       this.currentMenu = VerticalNavType.Activities;
-      const link: string[] = [ '/activities' ];
+      const link: string[] = [ "/activities" ];
       this.router.navigate(link);
     }
 
     /**
      * Called when the user clicks the vertical menu Connections item.
      */
-    onConnectionsClick(): void {
+  private onConnectionsClick(): void {
       this.currentMenu = VerticalNavType.Connections;
-      const link: string[] = [ '/connections' ];
+      const link: string[] = [ "/connections" ];
       this.router.navigate(link);
     }
 
diff --git a/ngapp/src/app/shared/abstract-page.component.ts b/ngapp/src/app/shared/abstract-page.component.ts
index 761bc3ae..973dadc1 100644
--- a/ngapp/src/app/shared/abstract-page.component.ts
+++ b/ngapp/src/app/shared/abstract-page.component.ts
@@ -15,21 +15,23 @@
  * limitations under the License.
  */
 
-import {OnInit} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
-import {Observable} from 'rxjs/Observable';
-import 'rxjs/add/observable/combineLatest';
+import {OnInit} from "@angular/core";
+import {ActivatedRoute} from "@angular/router";
+import "rxjs/add/observable/combineLatest";
+import {Observable} from "rxjs/Observable";
 
 export abstract class AbstractPageComponent implements OnInit {
 
   public dataLoaded: Map<string, boolean> = new Map<string, boolean>();
   public pageError: any;
+  protected route: ActivatedRoute;
 
   /**
    * C'tor.
    * @param {ActivatedRoute} route
    */
-  constructor(protected route: ActivatedRoute) {
+  constructor(route: ActivatedRoute) {
+    this.route = route;
   }
 
   /**
@@ -38,7 +40,7 @@ export abstract class AbstractPageComponent implements OnInit {
    */
   public ngOnInit(): void {
     const combined = Observable.combineLatest(this.route.params, this.route.queryParams, (params, qparams) => ({params, qparams}));
-    combined.subscribe( ap => {
+    combined.subscribe( (ap) => {
       this.loadAsyncPageData(ap.params, ap.qparams);
     });
   }
@@ -50,6 +52,7 @@ export abstract class AbstractPageComponent implements OnInit {
    * @param queryParams
    */
   public loadAsyncPageData(pathParams: any, queryParams: any): void {
+    // TODO is this method needed
   }
 
   /**
@@ -57,7 +60,7 @@ export abstract class AbstractPageComponent implements OnInit {
    * @param error
    */
   public error(error: any): void {
-    console.error('    Error: %o', error);
+    console.error("    Error: %o", error);
     this.pageError = error;
   }
 
@@ -75,11 +78,7 @@ export abstract class AbstractPageComponent implements OnInit {
    * @return {boolean}
    */
   public isLoaded(key: string): boolean {
-    if (this.dataLoaded[key]) {
-      return true;
-    } else {
-      return false;
-    }
+    return !!this.dataLoaded[ key ];
   }
 
 }
diff --git a/ngapp/src/app/shared/confirm-delete/confirm-delete.component.html b/ngapp/src/app/shared/confirm-delete/confirm-delete.component.html
index 0cc2b288..f3d76dbe 100644
--- a/ngapp/src/app/shared/confirm-delete/confirm-delete.component.html
+++ b/ngapp/src/app/shared/confirm-delete/confirm-delete.component.html
@@ -13,7 +13,7 @@ <h4 class="modal-title" id="confirmDeleteModalLabel">Confirm Delete</h4>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
-        <button type="button" class="btn btn-danger" (click)="delete()">Delete</button>
+        <button type="button" class="btn btn-danger" (click)="doDelete()">Delete</button>
       </div>
     </div>
   </div>
diff --git a/ngapp/src/app/shared/confirm-delete/confirm-delete.component.spec.ts b/ngapp/src/app/shared/confirm-delete/confirm-delete.component.spec.ts
index b604596b..fecdd15c 100644
--- a/ngapp/src/app/shared/confirm-delete/confirm-delete.component.spec.ts
+++ b/ngapp/src/app/shared/confirm-delete/confirm-delete.component.spec.ts
@@ -1,9 +1,8 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { ModalModule } from "ngx-bootstrap";
+import { ConfirmDeleteComponent } from "./confirm-delete.component";
 
-import { ConfirmDeleteComponent } from './confirm-delete.component';
-import { ModalModule } from 'ngx-bootstrap';
-
-describe('ConfirmDeleteComponent', () => {
+describe("ConfirmDeleteComponent", () => {
   let component: ConfirmDeleteComponent;
   let fixture: ComponentFixture<ConfirmDeleteComponent>;
 
@@ -21,7 +20,7 @@ describe('ConfirmDeleteComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/shared/confirm-delete/confirm-delete.component.ts b/ngapp/src/app/shared/confirm-delete/confirm-delete.component.ts
index 7db312a1..1dd5742a 100644
--- a/ngapp/src/app/shared/confirm-delete/confirm-delete.component.ts
+++ b/ngapp/src/app/shared/confirm-delete/confirm-delete.component.ts
@@ -15,21 +15,20 @@
  * limitations under the License.
  */
 
-import {Component, Output, EventEmitter, ViewChildren, QueryList, ElementRef} from '@angular/core';
-import {ModalDirective} from 'ngx-bootstrap';
+import {Component, EventEmitter, Output, QueryList, ViewChildren} from "@angular/core";
+import {ModalDirective} from "ngx-bootstrap";
 
 @Component({
   moduleId: module.id,
-  selector: 'app-confirm-delete',
-  templateUrl: './confirm-delete.component.html',
-  styleUrls: ['./confirm-delete.component.css']
+  selector: "app-confirm-delete",
+  templateUrl: "./confirm-delete.component.html",
+  styleUrls: ["./confirm-delete.component.css"]
 })
 
 export class ConfirmDeleteComponent {
 
-  @Output() onDelete: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-  @ViewChildren('confirmDeleteModal') confirmDeleteModal: QueryList<ModalDirective>;
+  @Output() private onDelete: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @ViewChildren("confirmDeleteModal") private confirmDeleteModal: QueryList<ModalDirective>;
 
   protected _isOpen = false;
 
@@ -38,7 +37,7 @@ export class ConfirmDeleteComponent {
    */
   public open(): void {
     this._isOpen = true;
-    this.confirmDeleteModal.changes.subscribe( thing => {
+    this.confirmDeleteModal.changes.subscribe( (thing) => {
       if (this.confirmDeleteModal.first) {
         this.confirmDeleteModal.first.show();
       }
@@ -55,7 +54,7 @@ export class ConfirmDeleteComponent {
   /**
    * Called when the user clicks "Yes".
    */
-  protected delete(): void {
+  protected doDelete(): void {
     this.onDelete.emit(true);
     this.cancel();
   }
diff --git a/ngapp/src/app/shared/id-filter.ts b/ngapp/src/app/shared/id-filter.ts
new file mode 100644
index 00000000..44180eaf
--- /dev/null
+++ b/ngapp/src/app/shared/id-filter.ts
@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2017 JBoss 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 { Identifiable } from "@shared/identifiable";
+
+const emptyPattern = "";
+
+export class IdFilter {
+
+  private pattern: string = emptyPattern;
+
+  constructor() {
+    // nothing to do
+  }
+
+  /**
+   * @param {Identifiable<string>} obj the object whose ID is being compared to the filter
+   * @returns {boolean} true if the ID matches the filter
+   */
+  public accepts( obj: Identifiable< string > ): boolean {
+    if ( this.pattern === "" ) {
+      return true;
+    }
+
+    const id: string = obj.getId().toLocaleLowerCase();
+    const localized: string = this.pattern.toLocaleLowerCase();
+    return id.indexOf( localized ) >= 0;
+  }
+
+  /**
+   * @returns {string} the pattern being matched to
+   */
+  public getPattern(): string {
+    return this.pattern;
+  }
+
+  /**
+   * Resets the pattern so that all IDs will match the pattern.
+   */
+  public reset(): void {
+    this.pattern = emptyPattern;
+  }
+
+  /**
+   * @param {string} pattern the pattern to match IDs with (can be empty or null)
+   */
+  public setFilter( pattern?: string ): void {
+    if ( pattern ) {
+      this.pattern = pattern;
+    } else {
+      this.pattern = emptyPattern;
+    }
+  }
+
+}
diff --git a/ngapp/src/app/shared/identifiable.ts b/ngapp/src/app/shared/identifiable.ts
new file mode 100644
index 00000000..c81fbf5f
--- /dev/null
+++ b/ngapp/src/app/shared/identifiable.ts
@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2017 JBoss 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.
+ */
+
+/**
+ * An object that has an identifiable property.
+ */
+export interface Identifiable< T > {
+
+  /**
+   * @returns {T} the object identifier (can be null)
+   */
+  getId(): T;
+
+}
diff --git a/ngapp/src/app/shared/layout-type.enum.ts b/ngapp/src/app/shared/layout-type.enum.ts
new file mode 100644
index 00000000..bd457faa
--- /dev/null
+++ b/ngapp/src/app/shared/layout-type.enum.ts
@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2017 JBoss 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.
+ */
+
+/**
+ * An enumeration of valid collection member layout types.
+ */
+export enum LayoutType {
+
+  /**
+   * Members of a collection are represented by a card.
+   */
+  CARD,
+
+  /**
+   * Members of a collections are represented as an item in the list.
+   */
+  LIST
+
+}
diff --git a/ngapp/src/app/shared/page-error/page-error.component.spec.ts b/ngapp/src/app/shared/page-error/page-error.component.spec.ts
index 0734ecae..56523109 100644
--- a/ngapp/src/app/shared/page-error/page-error.component.spec.ts
+++ b/ngapp/src/app/shared/page-error/page-error.component.spec.ts
@@ -1,9 +1,8 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PageErrorComponent } from './page-error.component';
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
 import { HttpModule } from "@angular/http";
+import { PageErrorComponent } from "@shared/page-error/page-error.component";
 
-describe('PageErrorComponent', () => {
+describe("PageErrorComponent", () => {
   let component: PageErrorComponent;
   let fixture: ComponentFixture<PageErrorComponent>;
 
@@ -18,11 +17,11 @@ describe('PageErrorComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(PageErrorComponent);
     component = fixture.componentInstance;
-    component.error = 'test';
+    component.error = "test";
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/shared/page-error/page-error.component.ts b/ngapp/src/app/shared/page-error/page-error.component.ts
index 4c2b2ada..e8674c9c 100644
--- a/ngapp/src/app/shared/page-error/page-error.component.ts
+++ b/ngapp/src/app/shared/page-error/page-error.component.ts
@@ -15,27 +15,20 @@
  * limitations under the License.
  */
 
-import {Component, Input} from '@angular/core';
+import {Component, Input} from "@angular/core";
 
 @Component({
   moduleId: module.id,
-  selector: 'app-page-error',
-  templateUrl: './page-error.component.html',
-  styleUrls: ['./page-error.component.css']
+  selector: "app-page-error",
+  templateUrl: "./page-error.component.html",
+  styleUrls: ["./page-error.component.css"]
 })
 export class PageErrorComponent {
 
-  @Input() error: any;
-
   private eobj: any = null;
   private showDetails = false;
 
-  /**
-   * Called to reload the browser page.
-   */
-  public reloadPage(): void {
-    window.location.reload();
-  }
+  @Input() private error: any;
 
   /**
    * Returns whether details should be shown.
@@ -92,4 +85,11 @@ export class PageErrorComponent {
     return this.eobj;
   }
 
+  /**
+   * Called to reload the browser page.
+   */
+  public reloadPage(): void {
+    window.location.reload();
+  }
+
 }
diff --git a/ngapp/src/app/shared/page-not-found/page-not-found.component.spec.ts b/ngapp/src/app/shared/page-not-found/page-not-found.component.spec.ts
index 39170086..ca583db0 100644
--- a/ngapp/src/app/shared/page-not-found/page-not-found.component.spec.ts
+++ b/ngapp/src/app/shared/page-not-found/page-not-found.component.spec.ts
@@ -1,8 +1,7 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { PageNotFoundComponent } from "@shared/page-not-found/page-not-found.component";
 
-import { PageNotFoundComponent } from './page-not-found.component';
-
-describe('PageNotFoundComponent', () => {
+describe("PageNotFoundComponent", () => {
   let component: PageNotFoundComponent;
   let fixture: ComponentFixture<PageNotFoundComponent>;
 
@@ -19,7 +18,7 @@ describe('PageNotFoundComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it("should be created", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/ngapp/src/app/shared/page-not-found/page-not-found.component.ts b/ngapp/src/app/shared/page-not-found/page-not-found.component.ts
index 8d32187c..dc011f8f 100644
--- a/ngapp/src/app/shared/page-not-found/page-not-found.component.ts
+++ b/ngapp/src/app/shared/page-not-found/page-not-found.component.ts
@@ -15,19 +15,17 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { OnInit } from '@angular/core';
+import { Component } from "@angular/core";
 
 @Component({
-  selector: 'app-page-not-found',
-  templateUrl: './page-not-found.component.html',
-  styleUrls: ['./page-not-found.component.css']
+  selector: "app-page-not-found",
+  templateUrl: "./page-not-found.component.html",
+  styleUrls: ["./page-not-found.component.css"]
 })
-export class PageNotFoundComponent implements OnInit {
+export class PageNotFoundComponent {
 
-  constructor() { }
-
-  ngOnInit() {
+  constructor() {
+    // nothing to do
   }
 
 }
diff --git a/ngapp/src/app/shared/shared.module.ts b/ngapp/src/app/shared/shared.module.ts
index de2cad57..0dda2657 100644
--- a/ngapp/src/app/shared/shared.module.ts
+++ b/ngapp/src/app/shared/shared.module.ts
@@ -15,13 +15,12 @@
  * limitations under the License.
  */
 
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
 import { ConfirmDeleteComponent } from "@shared/confirm-delete/confirm-delete.component";
 import { PageErrorComponent } from "@shared/page-error/page-error.component";
-import { ModalModule } from 'ngx-bootstrap';
-import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+import { ModalModule } from "ngx-bootstrap";
+import { PageNotFoundComponent } from "./page-not-found/page-not-found.component";
 
 @NgModule({
   imports: [
diff --git a/ngapp/src/app/shared/sort-direction.enum.ts b/ngapp/src/app/shared/sort-direction.enum.ts
new file mode 100644
index 00000000..9b33aff1
--- /dev/null
+++ b/ngapp/src/app/shared/sort-direction.enum.ts
@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2017 JBoss 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.
+ */
+
+/**
+ * An enumeration of valid sort directions.
+ */
+export enum SortDirection {
+
+  /**
+   * Sort connections in ascending order.
+   */
+  ASC,
+
+  /**
+   * Sort connections in descending order.
+   */
+  DESC
+
+}
diff --git a/ngapp/src/environments/environment.ts b/ngapp/src/environments/environment.ts
index f5d4d61b..1c44c54e 100644
--- a/ngapp/src/environments/environment.ts
+++ b/ngapp/src/environments/environment.ts
@@ -1,3 +1,20 @@
+/**
+ * @license
+ * Copyright 2017 JBoss 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.
+ */
+
 // The file contents for the current environment will overwrite these during build.
 // The build system defaults to the dev environment which uses `environment.ts`, but if you do
 // `ng build --env=prod` then `environment.prod.ts` will be used instead.
@@ -7,12 +24,12 @@ export const environment = {
   production: false,
 
   // the home page path
-  homePagePath: '/connections',
+  homePagePath: "/connections",
 
   // REST URL - Komodo workspace
-  komodoWorkspaceUrl: 'https://localhost:8443/vdb-builder/v1/workspace',
+  komodoWorkspaceUrl: "https://localhost:8443/vdb-builder/v1/workspace",
 
   // REST URL - Komodo teiid server
-  komodoTeiidUrl: 'https://localhost:8443/vdb-builder/v1/teiid',
+  komodoTeiidUrl: "https://localhost:8443/vdb-builder/v1/teiid",
 
 };
diff --git a/ngapp/src/main.ts b/ngapp/src/main.ts
index 7bf103b4..26d51333 100644
--- a/ngapp/src/main.ts
+++ b/ngapp/src/main.ts
@@ -1,14 +1,12 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from '@app/app.module';
-import { environment } from '@environments/environment';
+import { enableProdMode } from "@angular/core";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "@app/app.module";
+import { environment } from "@environments/environment";
 
 if (environment.production) {
   enableProdMode();
 }
 
 platformBrowserDynamic().bootstrapModule( AppModule )
-                        .then( success => console.log( `Bootstrap success` ) )
-                        .catch( err => console.error( err ) );
-
+                        .then( (success) => console.log( `Bootstrap success` ) )
+                        .catch( (err) => console.error( err ) );
diff --git a/ngapp/src/polyfills.ts b/ngapp/src/polyfills.ts
index 7831e97b..4c4a22d7 100644
--- a/ngapp/src/polyfills.ts
+++ b/ngapp/src/polyfills.ts
@@ -18,7 +18,9 @@
  * BROWSER POLYFILLS
  */
 
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+/**
+ * IE9, IE10 and IE11 requires all of the following polyfills.
+ */
 // import 'core-js/es6/symbol';
 // import 'core-js/es6/object';
 // import 'core-js/es6/function';
@@ -34,28 +36,27 @@
 // import 'core-js/es6/weak-map';
 // import 'core-js/es6/set';
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+/**
+ * IE10 and IE11 requires the following for NgClass support on SVG elements
+ */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** Evergreen browsers require these. **/
-import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
-
+/**
+ * Evergreen browsers require these.
+ */
+import "core-js/es6/reflect";
+import "core-js/es7/reflect";
 
 /**
  * Required to support Web Animations `@angular/animation`.
  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
- **/
+ */
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
-
-
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-
-
+import "zone.js/dist/zone";  // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS
diff --git a/ngapp/src/test.ts b/ngapp/src/test.ts
index cd612eeb..a3a544c5 100644
--- a/ngapp/src/test.ts
+++ b/ngapp/src/test.ts
@@ -1,23 +1,25 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/long-stack-trace-zone';
-import 'zone.js/dist/proxy.js';
-import 'zone.js/dist/sync-test';
-import 'zone.js/dist/jasmine-patch';
-import 'zone.js/dist/async-test';
-import 'zone.js/dist/fake-async-test';
-import { getTestBed } from '@angular/core/testing';
+import { getTestBed } from "@angular/core/testing";
 import {
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
+} from "@angular/platform-browser-dynamic/testing";
+import "zone.js/dist/async-test";
+import "zone.js/dist/fake-async-test";
+import "zone.js/dist/jasmine-patch";
+import "zone.js/dist/long-stack-trace-zone";
+import "zone.js/dist/proxy.js";
+import "zone.js/dist/sync-test";
 
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
 declare const __karma__: any;
 declare const require: any;
 
 // Prevent Karma from running prematurely.
-__karma__.loaded = function () {};
+__karma__.loaded = () => {
+  // nothing to do
+};
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
@@ -25,7 +27,7 @@ getTestBed().initTestEnvironment(
   platformBrowserDynamicTesting()
 );
 // Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
+const context = require.context("./", true, /\.spec\.ts$/);
 // And load the modules.
 context.keys().map(context);
 // Finally, start Karma to run the tests.
diff --git a/ngapp/tslint.json b/ngapp/tslint.json
index 0db5751c..b9f02e58 100644
--- a/ngapp/tslint.json
+++ b/ngapp/tslint.json
@@ -1,8 +1,18 @@
 {
+  "extends": [
+    "tslint:recommended"
+  ],
   "rulesDirectory": [
     "node_modules/codelyzer"
   ],
   "rules": {
+    "align": [
+      true,
+      "members",
+      "parameters",
+      "statements"
+    ],
+    "angular-whitespace": [true, "check-interpolation"],
     "arrow-return-shorthand": true,
     "callable-types": true,
     "class-name": true,
@@ -10,7 +20,22 @@
       true,
       "check-space"
     ],
+    "component-class-suffix": true,
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ],
     "curly": true,
+    "deprecation": true,
+    "directive-class-suffix": true,
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
     "eofline": true,
     "forin": true,
     "import-blacklist": [
@@ -20,28 +45,29 @@
     "import-spacing": true,
     "indent": [
       true,
-      "spaces"
+      "spaces",
+      4
     ],
+    "interface-name": false,
     "interface-over-type-literal": true,
+    "invoke-injectable": true,
     "label-position": true,
+    "max-classes-per-file": [true, 1],
     "max-line-length": [
       true,
       140
     ],
-    "member-access": false,
+    "member-access": true,
     "member-ordering": [
       true,
-      {
-        "order": [
-          "static-field",
-          "instance-field",
-          "static-method",
-          "instance-method"
-        ]
-      }
+      "static-before-instance",
+      "variables-before-functions"
     ],
+    "new-parens": true,
+    "no-access-missing-member": true,
     "no-arg": true,
     "no-bitwise": true,
+    "no-consecutive-blank-lines": true,
     "no-console": [
       true,
       "debug",
@@ -52,16 +78,20 @@
     ],
     "no-construct": true,
     "no-debugger": true,
+    "no-duplicate-imports": true,
     "no-duplicate-super": true,
-    "no-empty": false,
+    "no-empty": true,
     "no-empty-interface": true,
     "no-eval": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
     "no-inferrable-types": [
       true,
       "ignore-params"
     ],
     "no-misused-new": true,
     "no-non-null-assertion": true,
+    "no-parameter-properties": true,
     "no-shadowed-variable": true,
     "no-string-literal": false,
     "no-string-throw": true,
@@ -70,7 +100,11 @@
     "no-unnecessary-initializer": true,
     "no-unused-expression": true,
     "no-use-before-declare": true,
-    "no-var-keyword": true,
+    "no-var-keyword": [
+      true,
+      "as-needed"
+    ],
+    "object-literal-key-quotes": false,
     "object-literal-sort-keys": false,
     "one-line": [
       true,
@@ -79,20 +113,40 @@
       "check-else",
       "check-whitespace"
     ],
+    "one-variable-per-declaration": [
+      true,
+      "ignore-for-loop"
+    ],
+    "ordered-imports": [
+      true,
+      {
+        "import-sources-order": "case-insensitive",
+        "named-imports-order": "case-insensitive"
+      }
+    ],
     "prefer-const": true,
     "quotemark": [
       true,
-      "single"
+      "double"
     ],
     "radix": true,
+    "restrict-plus-operands": false,
     "semicolon": [
       true,
       "always"
     ],
+    "switch-default": true,
+    "templates-use-public": true,
+    "trailing-comma": false,
     "triple-equals": [
       true,
       "allow-null-check"
     ],
+    "typedef": [
+      true,
+      "call-signature",
+      "property-declaration"
+    ],
     "typedef-whitespace": [
       true,
       {
@@ -105,38 +159,24 @@
     ],
     "typeof-compare": true,
     "unified-signatures": true,
-    "variable-name": false,
+    "variable-name": [
+      true,
+      "ban-keywords"
+    ],
     "whitespace": [
       true,
       "check-branch",
       "check-decl",
       "check-operator",
+      "check-module",
+      "check-preblock",
       "check-separator",
       "check-type"
     ],
-    "directive-selector": [
-      true,
-      "attribute",
-      "app",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "app",
-      "kebab-case"
-    ],
+    "use-host-property-decorator": true,
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
-    "no-input-rename": true,
-    "no-output-rename": true,
     "use-life-cycle-interface": true,
-    "use-pipe-transform-interface": true,
-    "component-class-suffix": true,
-    "directive-class-suffix": true,
-    "no-access-missing-member": true,
-    "templates-use-public": true,
-    "invoke-injectable": true
+    "use-pipe-transform-interface": true
   }
 }