diff --git a/web/gui2/src/main/webapp/app/fw/layer/detailspanel.service.ts b/web/gui2/src/main/webapp/app/fw/layer/detailspanel.service.ts
deleted file mode 100644
index 5699262..0000000
--- a/web/gui2/src/main/webapp/app/fw/layer/detailspanel.service.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright 2017-present Open Networking Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { Injectable } from '@angular/core';
-import { EditableTextService } from '../layer/editabletext.service';
-import { FnService } from '../util/fn.service';
-import { IconService } from '../svg/icon.service';
-import { LogService } from '../../log.service';
-import { MastService } from '../mast/mast.service';
-import { PanelService } from './panel.service';
-import { WebSocketService } from '../remote/websocket.service';
-
-/**
- * ONOS GUI -- Layer -- Details Panel Service
- */
-@Injectable()
-export class DetailsPanelService {
-
-  constructor(
-      private ets: EditableTextService,
-      private fs: FnService,
-      private is: IconService,
-      private log: LogService,
-      private mast: MastService,
-      private panel: PanelService,
-      private wss: WebSocketService
-  ) {
-      this.log.debug('DetailsPanelService constructed');
-  }
-
-}
diff --git a/web/gui2/src/main/webapp/app/fw/layer/dialog.service.ts b/web/gui2/src/main/webapp/app/fw/layer/dialog.service.ts
index d6c37bb..378cd9b 100644
--- a/web/gui2/src/main/webapp/app/fw/layer/dialog.service.ts
+++ b/web/gui2/src/main/webapp/app/fw/layer/dialog.service.ts
@@ -19,21 +19,21 @@
 import { FnService } from '../util/fn.service';
 import { KeyService } from '../util/key.service';
 import { LogService } from '../../log.service';
-import { PanelService } from './panel.service';
 
 /**
  * ONOS GUI -- Layer -- Dialog Service
  *
  * Builds on the panel service to provide dialog functionality.
  */
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class DialogService {
 
   constructor(
     private fs: FnService,
     private ks: KeyService,
     private log: LogService,
-    private ps: PanelService,
   ) {
     this.log.debug('DialogService constructed');
   }
diff --git a/web/gui2/src/main/webapp/app/fw/layer/layer.module.ts b/web/gui2/src/main/webapp/app/fw/layer/layer.module.ts
index b4e39b2..4e8abe7 100644
--- a/web/gui2/src/main/webapp/app/fw/layer/layer.module.ts
+++ b/web/gui2/src/main/webapp/app/fw/layer/layer.module.ts
@@ -17,11 +17,9 @@
 import { CommonModule } from '@angular/common';
 
 import { FlashComponent } from './flash/flash.component';
-import { DetailsPanelService } from './detailspanel.service';
 import { DialogService } from './dialog.service';
 import { EditableTextService } from './editabletext.service';
 import { LoadingService } from './loading.service';
-import { PanelService } from './panel.service';
 import { QuickHelpService } from './quickhelp.service';
 import { VeilComponent } from './veil/veil.component';
 
@@ -41,12 +39,6 @@
     VeilComponent
   ],
   providers: [
-    DetailsPanelService,
-    DialogService,
-    EditableTextService,
-    LoadingService,
-    PanelService,
-    QuickHelpService
   ]
 })
 export class LayerModule { }
diff --git a/web/gui2/src/main/webapp/app/fw/layer/panel.service.ts b/web/gui2/src/main/webapp/app/fw/layer/panel.service.ts
deleted file mode 100644
index 7ccb7d9..0000000
--- a/web/gui2/src/main/webapp/app/fw/layer/panel.service.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Copyright 2015-present Open Networking Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { Injectable } from '@angular/core';
-import { FnService } from '../util/fn.service';
-import { LogService } from '../../log.service';
-
-/**
- * ONOS GUI -- Layer -- Panel Service
- */
-@Injectable()
-export class PanelService {
-
-  constructor(
-    private fs: FnService,
-    private log: LogService
-  ) {
-    this.log.debug('PanelService constructed');
-  }
-
-}
diff --git a/web/gui2/src/main/webapp/app/fw/layer/quickhelp.service.ts b/web/gui2/src/main/webapp/app/fw/layer/quickhelp.service.ts
index f433a2b..b515180 100644
--- a/web/gui2/src/main/webapp/app/fw/layer/quickhelp.service.ts
+++ b/web/gui2/src/main/webapp/app/fw/layer/quickhelp.service.ts
@@ -24,7 +24,9 @@
  *
  * Provides a mechanism to display key bindings and mouse gesture notes.
  */
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class QuickHelpService {
 
   constructor(
diff --git a/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.spec.ts b/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.spec.ts
index 0ed493f..caa52ec 100644
--- a/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.spec.ts
@@ -18,32 +18,55 @@
  ONOS GUI -- Layer -- Veil Service - Unit Tests
  */
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
 
 import { VeilComponent } from './veil.component';
 import { ConsoleLoggerService } from '../../../consolelogger.service';
+import { FnService } from '../../../fw/util/fn.service';
 import { LogService } from '../../../log.service';
 import { KeyService } from '../../util/key.service';
 import { GlyphService } from '../../svg/glyph.service';
+import { of } from 'rxjs';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
 
 class MockKeyService {}
 
 class MockGlyphService {}
 
 describe('VeilComponent', () => {
-    let log: LogService;
+    let fs: FnService;
+    let ar: MockActivatedRoute;
+    let windowMock: Window;
+    let logServiceSpy: jasmine.SpyObj<LogService>;
 
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
+    beforeEach(async(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+        ar = new MockActivatedRoute({});
+        windowMock = <any>{
+            location: <any> {
+                hostname: 'foo'
+            }
+        };
+        fs = new FnService(ar, logSpy, windowMock);
 
         TestBed.configureTestingModule({
             declarations: [ VeilComponent ],
             providers: [
-                { provide: LogService, useValue: log },
+                { provide: FnService, useValue: fs },
+                { provide: LogService, useValue: logSpy },
                 { provide: KeyService, useClass: MockKeyService },
                 { provide: GlyphService, useClass: MockGlyphService },
+                { provide: 'Window', useValue: windowMock },
             ]
         });
-    });
+        logServiceSpy = TestBed.get(LogService);
+    }));
 
     it('should create', () => {
         const fixture = TestBed.createComponent(VeilComponent);
diff --git a/web/gui2/src/main/webapp/app/fw/mast/mast.service.ts b/web/gui2/src/main/webapp/app/fw/mast/mast.service.ts
index d357458..34a3d8b 100644
--- a/web/gui2/src/main/webapp/app/fw/mast/mast.service.ts
+++ b/web/gui2/src/main/webapp/app/fw/mast/mast.service.ts
@@ -17,7 +17,7 @@
 import { FnService } from '../util/fn.service';
 import { LogService } from '../../log.service';
 
-const padMobile = 16;
+const PADMOBILE = 16;
 
 /**
  * ONOS GUI -- Masthead Service
@@ -32,7 +32,7 @@
     private log: LogService
   ) {
     if (this.fs.isMobile()) {
-        this.mastHeight += padMobile;
+        this.mastHeight += PADMOBILE;
     }
 
     this.log.debug('MastService constructed');
diff --git a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.css b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.css
index b5f1e5f..5b2d464 100644
--- a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.css
+++ b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.css
@@ -17,10 +17,20 @@
 /*
  ONOS GUI -- Masthead (layout) -- CSS file
  */
+#mast-top-block {
+    display: block;
+    z-index: -1;
+    height: 48px;
+    width: 100%;
+}
 
 #mast {
+    position: absolute;
+    width: 100%;
+    top: 0px;
     height: 48px;
     padding: 0;
+    z-index: 10000;
 }
 
 #mast a:hover {
diff --git a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.html b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.html
index e7d0995..72242ba 100644
--- a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.html
+++ b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.html
@@ -13,6 +13,12 @@
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 -->
+<div id="mast-top-block"></div>
+<!-- The mast-top-block is an inline display element that pushes any
+  subsequent elements down the page. It has a height of 48px
+     The mast block overlays the mast-top-block. It is is positioned
+     absolutely so that the nav component can slide in behind it when
+     not shown -->
 <div id="mast" align="left">
     <span class="nav-menu-button clickable" (click)="ns.toggleNav()">
         <img src="data/img/nav-menu-mojo.png"/>
@@ -21,17 +27,14 @@
     <div id="mast-right">
         <nav>
             <div class="dropdown-parent">
-                <a class="clickable user-menu__name">{{username}} <i class="dropdown-icon"></i></a>
+                <a class="clickable user-menu__name">{{ username }} <i class="dropdown-icon"></i></a>
                 <div class="dropdown">
-                    <!--<a href="rs/logout"> {{getLion('logout')}} </a> !!FIXME-->
-                    <a href="rs/logout">logout</a>
+                    <a href="rs/logout"> {{ lionFn('logout') }} </a>
                 </div>
             </div>
             <div class="ctrl-btns">
-                <div class="active clickable icon"
-                     tooltip tt-msg="helpTip"
-                     ng-click="directTo()">
-                    <onos-icon iconId="query" iconSize="32"></onos-icon>
+                <div class="active clickable icon" (click)="directTo()">
+                    <onos-icon iconId="query" iconSize="32" toolTip="{{ lionFn('tt_help') }}"></onos-icon>
                 </div>
             </div>
         </nav>
diff --git a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.spec.ts b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.spec.ts
new file mode 100644
index 0000000..3d061a5
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.spec.ts
@@ -0,0 +1,131 @@
+/*
+ * Copyright 2015-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+import { LogService } from '../../../log.service';
+import { ConsoleLoggerService } from '../../../consolelogger.service';
+import { MastComponent } from './mast.component';
+import { IconComponent } from '../../svg/icon/icon.component';
+import { LionService } from '../../util/lion.service';
+import { IconService } from '../../svg/icon.service';
+import { NavService } from '../../nav/nav.service';
+import { WebSocketService } from '../../remote/websocket.service';
+
+class MockNavService {}
+
+class MockIconService {
+    loadIconDef() {}
+}
+
+class MockWebSocketService {
+    createWebSocket() {}
+    isConnected() { return false; }
+    unbindHandlers() {}
+    bindHandlers() {}
+}
+
+/**
+ * ONOS GUI -- Masthead Controller - Unit Tests
+ */
+describe('MastComponent', () => {
+    let log: LogService;
+    let windowMock: Window;
+    let component: MastComponent;
+    let fixture: ComponentFixture<MastComponent>;
+    const bundleObj = {
+        'core.view.App': {
+            test: 'test1',
+            tt_help: 'Help!'
+        }
+    };
+    const mockLion = (key) =>  {
+        return bundleObj[key] || '%' + key + '%';
+    };
+
+    beforeEach(async(() => {
+        log = new ConsoleLoggerService();
+        windowMock = <any>{
+            location: <any> {
+                hostname: 'foo',
+                pathname: 'apps',
+                host: 'foo',
+                port: '80',
+                protocol: 'http',
+                search: { debug: 'true'},
+                href: 'ws://foo:123/onos/ui/websock/path',
+                absUrl: 'ws://foo:123/onos/ui/websock/path'
+            }
+        };
+
+        TestBed.configureTestingModule({
+            declarations: [ MastComponent, IconComponent ],
+            providers: [
+                { provide: LogService, useValue: log },
+                { provide: NavService, useClass: MockNavService },
+                { provide: LionService, useFactory: (() => {
+                        return {
+                            bundle: ((bundleId) => mockLion),
+                            ubercache: new Array(),
+                            loadCbs: new Map<string, () => void>([])
+                        };
+                    })
+                },
+                { provide: IconService, useClass: MockIconService },
+                { provide: WebSocketService, useClass: MockWebSocketService },
+                { provide: 'Window', useValue: windowMock }
+            ]
+        })
+        .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(MastComponent);
+        component = fixture.debugElement.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should have a div#mast-top-block', () => {
+        const appDe: DebugElement = fixture.debugElement;
+        const divDe = appDe.query(By.css('div#mast-top-block'));
+        expect(divDe).toBeTruthy();
+    });
+
+    it('should have a span.nav-menu-button inside a div#mast', () => {
+        const appDe: DebugElement = fixture.debugElement;
+        const divDe = appDe.query(By.css('div#mast span.nav-menu-button'));
+        expect(divDe).toBeTruthy();
+    });
+
+    it('should have a div.dropdown-parent inside a div#mast-right inside a div#mast', () => {
+        const appDe: DebugElement = fixture.debugElement;
+        const divDe = appDe.query(By.css('div#mast div#mast-right div.dropdown-parent'));
+        const div: HTMLElement = divDe.nativeElement;
+        expect(div.textContent).toEqual('  %logout% ');
+    });
+
+    it('should have an onos-icon inside a div#mast-right inside a div#mast', () => {
+        const appDe: DebugElement = fixture.debugElement;
+        const divDe = appDe.query(By.css('div#mast div#mast-right div.ctrl-btns div.active onos-icon'));
+        expect(divDe).toBeTruthy();
+    });
+
+});
diff --git a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.ts b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.ts
index a8b85a4..2cb110f 100644
--- a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.ts
+++ b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.ts
@@ -13,12 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, OnInit } from '@angular/core';
-import { DialogService } from '../../layer/dialog.service';
+import { Component, Input, OnInit, OnDestroy, Inject } from '@angular/core';
 import { LionService } from '../../util/lion.service';
 import { LogService } from '../../../log.service';
 import { NavService } from '../../nav/nav.service';
-import { WebSocketService } from '../../remote/websocket.service';
 
 /**
  * ONOS GUI -- Masthead Component
@@ -28,39 +26,67 @@
   templateUrl: './mast.component.html',
   styleUrls: ['./mast.component.css', './mast.theme.css']
 })
-export class MastComponent implements OnInit {
-    public username;
+export class MastComponent implements OnInit, OnDestroy {
+    @Input() username: string;
+
+    lionFn; // Function
+    viewMap = new Map<string, string>([]); // A map of app names
 
     constructor(
-        private ds: DialogService,
-        private ls: LionService,
+        private lion: LionService,
         private log: LogService,
         public ns: NavService,
-        private wss: WebSocketService
+        @Inject('Window') private window: Window,
     ) {
-        this.log.debug('MastComponent constructed');
-
+        this.viewMap.set('apps', 'https://wiki.onosproject.org/display/ONOS/GUI+Application+View');
+        this.viewMap.set('device', 'https://wiki.onosproject.org/display/ONOS/GUI+Device+View');
+        this.viewMap.set('', 'https://wiki.onosproject.org/display/ONOS/The+ONOS+Web+GUI');
     }
 
     ngOnInit() {
-        // onosUser is a global set via the index.html generated source
-        // TODO: Fix onosuser below to get it from index.html like before
-        // TODO: Fix the lionService
-        this.username = 'onosUser'; // || this.getLion('unknown_user');
-
+        if (this.lion.ubercache.length === 0) {
+            this.lionFn = this.dummyLion;
+            this.lion.loadCbs.set('mast', () => this.doLion());
+            this.log.debug('LION not available when MastComponent initialized');
+        } else {
+            this.doLion();
+        }
         this.log.debug('MastComponent initialized');
     }
 
-
-
-    /* In the case of Masthead, we cannot cache the lion bundle, because we
-     * call too early (before the lion data is uploaded from the server).
-     * So we'll dig into the lion service for each request...
+    /**
+     * Nav component should never be closed, but in case it does, it's
+     * safer to tidy up after itself
      */
-    getLion(x: string): string {
-      // lion is a function that takes a string and returns a string
-      const lion: (string) => string  = this.ls.bundle('core.fw.Mast');
-      return lion(x);
+    ngOnDestroy() {
+        this.lion.loadCbs.delete('mast');
     }
 
+    /**
+    * Read the LION bundle for App and set up the lionFn
+    */
+    doLion() {
+        this.lionFn = this.lion.bundle('core.fw.Mast');
+        if (this.username === undefined) {
+            this.username = this.lionFn('unknown_user');
+        }
+    }
+
+    /**
+    * A dummy implementation of the lionFn until the response is received and the LION
+    * bundle is received from the WebSocket
+    */
+    dummyLion(key: string): string {
+        return '%' + key + '%';
+    }
+
+    directTo() {
+        const curId = this.window.location.pathname.replace('/', '');
+        let helpUrl: string = this.viewMap.get(curId);
+        if (helpUrl === undefined) {
+            helpUrl = this.viewMap.get('');
+            this.log.warn('No help file linked for view:', curId);
+        }
+        this.window.open(helpUrl);
+    }
 }
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav.module.ts b/web/gui2/src/main/webapp/app/fw/nav/nav.module.ts
index d25237f..65f222d 100644
--- a/web/gui2/src/main/webapp/app/fw/nav/nav.module.ts
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav.module.ts
@@ -22,9 +22,6 @@
 import { NavComponent } from './nav/nav.component';
 import { NavService } from './nav.service';
 
-import { AppsComponent } from '../../view/apps/apps.component';
-import { DeviceComponent } from '../../view/device/device.component';
-
 /**
  * ONOS GUI -- Navigation Module
  */
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.css b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.css
index 3d2f646..5030be8 100644
--- a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.css
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.css
@@ -24,7 +24,6 @@
     left: 0;
     padding: 0;
     z-index: 3000;
-    visibility: hidden;
 }
 
 html[data-platform='iPad'] #nav {
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.html b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.html
index f61a9ab..cb48492 100644
--- a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.html
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.html
@@ -13,13 +13,16 @@
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 -->
-<nav id="nav" [@navState]="ns.showNav?'active':'inactive'">
-    <div class="nav-hdr">Platform</div>
+<nav id="nav" [@navState]="ns.showNav">
+    <div class="nav-hdr">{{ lionFn('cat_platform') }}</div>
+
     <a (click)="ns.hideNav()" routerLink="/apps" routerLinkActive="active">
-        <!--<div onosIcon iconId="nav_apps"></div>
-         Using the new IconComponent rather than the directive -->
         <onos-icon iconId="nav_apps"></onos-icon>Apps</a>
-    <div class="nav-hdr">Network</div>
+
+    <div class="nav-hdr">{{ lionFn('cat_network') }}</div>
+
     <a (click)="ns.hideNav()" routerLink="/devices" routerLinkActive="active">
         <onos-icon iconId="nav_devs"></onos-icon>Devices</a>
+
+    <div class="nav-hdr">{{ lionFn('cat_other') }}</div>
 </nav>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.spec.ts b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.spec.ts
new file mode 100644
index 0000000..e2bd999
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.spec.ts
@@ -0,0 +1,132 @@
+/*
+ * Copyright 2015-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { of } from 'rxjs';
+
+import { ConsoleLoggerService } from '../../../consolelogger.service';
+import { FnService } from '../../../fw/util/fn.service';
+import { IconComponent } from '../../svg/icon/icon.component';
+import { IconService } from '../../svg/icon.service';
+import { LionService } from '../../util/lion.service';
+import { LogService } from '../../../log.service';
+import { NavComponent } from './nav.component';
+import { NavService } from '../nav.service';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+class MockNavService {}
+
+class MockIconService {
+    loadIconDef() {}
+}
+
+/**
+ * ONOS GUI -- Util -- Navigation Component - Unit Tests
+ */
+describe('NavComponent', () => {
+    let log: LogService;
+    let fs: FnService;
+    let ar: MockActivatedRoute;
+    let windowMock: Window;
+    let component: NavComponent;
+    let fixture: ComponentFixture<NavComponent>;
+    const bundleObj = {
+        'core.view.App': {
+            test: 'test1'
+        }
+    };
+    const mockLion = (key) =>  {
+        return bundleObj[key] || '%' + key + '%';
+    };
+
+    beforeEach(async(() => {
+        log = new ConsoleLoggerService();
+        ar = new MockActivatedRoute({'debug': 'txrx'});
+
+        windowMock = <any>{
+            location: <any> {
+                hostname: 'foo',
+                host: 'foo',
+                port: '80',
+                protocol: 'http',
+                search: { debug: 'true'},
+                href: 'ws://foo:123/onos/ui/websock/path',
+                absUrl: 'ws://foo:123/onos/ui/websock/path'
+            }
+        };
+        fs = new FnService(ar, log, windowMock);
+
+        TestBed.configureTestingModule({
+            imports: [ BrowserAnimationsModule ],
+            declarations: [ NavComponent, IconComponent ],
+            providers: [
+                { provide: FnService, useValue: fs },
+                { provide: IconService, useClass: MockIconService },
+                { provide: LionService, useFactory: (() => {
+                        return {
+                            bundle: ((bundleId) => mockLion),
+                            ubercache: new Array(),
+                            loadCbs: new Map<string, () => void>([])
+                        };
+                    })
+                },
+                { provide: LogService, useValue: log },
+                { provide: NavService, useClass: MockNavService },
+                { provide: 'Window', useValue: windowMock },
+            ]
+        })
+        .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(NavComponent);
+        component = fixture.debugElement.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should have a nav#nav', () => {
+        const appDe: DebugElement = fixture.debugElement;
+        const divDe = appDe.query(By.css('nav#nav'));
+        expect(divDe).toBeTruthy();
+    });
+
+    it('should have a platform div.nav-hdr inside a nav#nav', () => {
+        const appDe: DebugElement = fixture.debugElement;
+        const divDe = appDe.query(By.css('nav#nav div.nav-hdr'));
+        const div: HTMLElement = divDe.nativeElement;
+        expect(div.textContent).toEqual('%cat_platform%');
+    });
+
+    it('should have an apps link inside a nav#nav', () => {
+        const appDe: DebugElement = fixture.debugElement;
+        const divDe = appDe.query(By.css('nav#nav a'));
+        const div: HTMLElement = divDe.nativeElement;
+        expect(div.textContent).toEqual('Apps');
+    });
+});
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.ts b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.ts
index 27ae8de..7614e67 100644
--- a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.ts
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.ts
@@ -13,10 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+
+import { LionService } from '../../util/lion.service';
 import { LogService } from '../../../log.service';
 import { NavService } from '../nav.service';
-import { trigger, state, style, animate, transition } from '@angular/animations';
 
 /**
  * ONOS GUI -- Navigation Module
@@ -27,30 +29,64 @@
   styleUrls: ['./nav.theme.css', './nav.component.css'],
   animations: [
     trigger('navState', [
-      state('inactive', style({
-        visibility: 'hidden',
-        transform: 'translateX(-100%)'
+      state('false', style({
+        transform: 'translateY(-100%)'
       })),
-      state('active', style({
-        visibility: 'visible',
-        transform: 'translateX(0%)'
+      state('true', style({
+        transform: 'translateY(0%)'
       })),
-      transition('inactive => active', animate('100ms ease-in')),
-      transition('active => inactive', animate('100ms ease-out'))
+      transition('0 => 1', animate('100ms ease-in')),
+      transition('1 => 0', animate('100ms ease-out'))
     ])
   ]
 })
-export class NavComponent implements OnInit {
+export class NavComponent implements OnInit, OnDestroy {
+    lionFn; // Function
 
-  constructor(
-    private log: LogService,
-    public ns: NavService
-  ) {
-    this.log.debug('NavComponent constructed');
-  }
+    constructor(
+        private log: LogService,
+        private lion: LionService,
+        public ns: NavService
+    ) {
+        this.log.debug('NavComponent constructed');
+    }
 
-  ngOnInit() {
-    this.log.debug('NavComponent initialized');
-  }
+    /**
+     * If LION is not ready we make do with a dummy function
+     * As soon a lion gets loaded this function will be replaced with
+     * the real thing
+     */
+    ngOnInit() {
+        if (this.lion.ubercache.length === 0) {
+            this.lionFn = this.dummyLion;
+            this.lion.loadCbs.set('nav', () => this.doLion());
+            this.log.debug('LION not available when NavComponent initialized');
+        } else {
+            this.doLion();
+        }
+    }
+
+    /**
+     * Nav component should never be closed, but in case it does, it's
+     * safer to tidy up after itself
+     */
+    ngOnDestroy() {
+        this.lion.loadCbs.delete('nav');
+    }
+
+    /**
+    * Read the LION bundle for App and set up the lionFn
+    */
+    doLion() {
+        this.lionFn = this.lion.bundle('core.fw.Nav');
+    }
+
+    /**
+    * A dummy implementation of the lionFn until the response is received and the LION
+    * bundle is received from the WebSocket
+    */
+    dummyLion(key: string): string {
+        return '%' + key + '%';
+    }
 
 }
diff --git a/web/gui2/src/main/webapp/app/fw/remote/urlfn.service.spec.ts b/web/gui2/src/main/webapp/app/fw/remote/urlfn.service.spec.ts
new file mode 100644
index 0000000..2b07f1c
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/remote/urlfn.service.spec.ts
@@ -0,0 +1,123 @@
+/*
+ * Copyright 2015-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { TestBed, inject } from '@angular/core/testing';
+
+import { LogService } from '../../log.service';
+import { ConsoleLoggerService } from '../../consolelogger.service';
+import { UrlFnService } from './urlfn.service';
+import { FnService } from '../util/fn.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { of } from 'rxjs';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+/**
+ * ONOS GUI -- Remote -- General Functions - Unit Tests
+ */
+describe('UrlFnService', () => {
+    let log: LogService;
+    let ufs: UrlFnService;
+    let fs: FnService;
+    let ar: MockActivatedRoute;
+    let windowMock: Window;
+
+    beforeEach(() => {
+        log = new ConsoleLoggerService();
+        ar = new MockActivatedRoute({'debug': 'TestService'});
+        windowMock = <any>{
+            location: <any> {
+                hostname: '',
+                host: '',
+                port: '',
+                protocol: '',
+                search: { debug: 'true'},
+                href: ''
+            }
+        };
+
+        fs = new FnService(ar, log, windowMock);
+
+        TestBed.configureTestingModule({
+            providers: [UrlFnService,
+                { provide: LogService, useValue: log },
+                { provide: 'Window', useFactory: (() => windowMock ) },
+            ]
+        });
+
+        ufs = TestBed.get(UrlFnService);
+    });
+
+    function setLoc(prot: string, h: string, p: string, ctx: string = '') {
+        windowMock.location.host = h;
+        windowMock.location.hostname = h;
+        windowMock.location.port = p;
+        windowMock.location.protocol = prot;
+        windowMock.location.href = prot + '://' + h + ':' + p +
+            ctx + '/onos/ui/';
+    }
+
+    it('should define UrlFnService', () => {
+        expect(ufs).toBeDefined();
+    });
+
+    it('should define api functions', () => {
+        expect(fs.areFunctions(ufs, [
+            'rsUrl', 'wsUrl', 'urlBase', 'httpPrefix',
+            'wsPrefix', 'matchSecure'
+        ])).toBeTruthy();
+    });
+
+    it('should return the correct (http) RS url', () => {
+        setLoc('http', 'foo', '123');
+        expect(ufs.rsUrl('path')).toEqual('http://foo:123/onos/ui/rs/path');
+    });
+
+    it('should return the correct (https) RS url', () => {
+        setLoc('https', 'foo', '123');
+        expect(ufs.rsUrl('path')).toEqual('https://foo:123/onos/ui/rs/path');
+    });
+
+    it('should return the correct (ws) WS url', () => {
+        setLoc('http', 'foo', '123');
+        expect(ufs.wsUrl('path')).toEqual('ws://foo:123/onos/ui/websock/path');
+    });
+
+    it('should return the correct (wss) WS url', () => {
+        setLoc('https', 'foo', '123');
+        expect(ufs.wsUrl('path')).toEqual('wss://foo:123/onos/ui/websock/path');
+    });
+
+    it('should allow us to define an alternate WS port', () => {
+        setLoc('http', 'foo', '123');
+        expect(ufs.wsUrl('xyyzy', '456')).toEqual('ws://foo:456/onos/ui/websock/xyyzy');
+    });
+
+    it('should allow us to define an alternate host', () => {
+        setLoc('http', 'foo', '123');
+        expect(ufs.wsUrl('core', '456', 'bar')).toEqual('ws://bar:456/onos/ui/websock/core');
+    });
+
+    it('should allow us to inject an app context', () => {
+        setLoc('http', 'foo', '123', '/my/app');
+        expect(ufs.wsUrl('path')).toEqual('ws://foo:123/my/app/onos/ui/websock/path');
+    });
+
+});
diff --git a/web/gui2/src/main/webapp/app/fw/remote/websocket.service.spec.ts b/web/gui2/src/main/webapp/app/fw/remote/websocket.service.spec.ts
new file mode 100644
index 0000000..57d8d34
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/remote/websocket.service.spec.ts
@@ -0,0 +1,278 @@
+/*
+ * Copyright 2015-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { TestBed, inject } from '@angular/core/testing';
+
+import { LogService } from '../../log.service';
+import { WebSocketService, WsOptions, Callback, EventType } from './websocket.service';
+import { FnService } from '../util/fn.service';
+import { GlyphService } from '../svg/glyph.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { UrlFnService } from './urlfn.service';
+import { WSock } from './wsock.service';
+import { of } from 'rxjs';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+class MockGlyphService {}
+
+/**
+ * ONOS GUI -- Remote -- Web Socket Service - Unit Tests
+ */
+describe('WebSocketService', () => {
+    let wss: WebSocketService;
+    let fs: FnService;
+    let ar: MockActivatedRoute;
+    let windowMock: Window;
+    let logServiceSpy: jasmine.SpyObj<LogService>;
+
+    const noop = () => ({});
+    const send = jasmine.createSpy('send')
+        .and.callFake((ev) => ev);
+    const mockWebSocket = {
+        send: send,
+        onmessage: (msgEvent) => ({}),
+        onopen: () => ({}),
+        onclose: () => ({}),
+    };
+
+    beforeEach(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+        ar = new MockActivatedRoute({'debug': 'txrx'});
+
+        windowMock = <any>{
+            location: <any> {
+                hostname: 'foo',
+                host: 'foo',
+                port: '80',
+                protocol: 'http',
+                search: { debug: 'true'},
+                href: 'ws://foo:123/onos/ui/websock/path',
+                absUrl: 'ws://foo:123/onos/ui/websock/path'
+            }
+        };
+        fs = new FnService(ar, logSpy, windowMock);
+
+        TestBed.configureTestingModule({
+            providers: [WebSocketService,
+                { provide: FnService, useValue: fs },
+                { provide: LogService, useValue: logSpy },
+                { provide: GlyphService, useClass: MockGlyphService },
+                { provide: UrlFnService, useValue: new UrlFnService(logSpy, windowMock) },
+                { provide: 'Window', useFactory: (() => windowMock ) },
+                { provide: WSock, useFactory: (() => {
+                        return {
+                            newWebSocket: (() => mockWebSocket)
+                        };
+                    })
+                }
+            ]
+        });
+
+        wss = TestBed.get(WebSocketService);
+        logServiceSpy = TestBed.get(LogService);
+    });
+
+    it('should define WebSocketService', () => {
+        expect(wss).toBeDefined();
+    });
+
+    it('should define api functions', () => {
+        expect(fs.areFunctions(wss, ['bootstrap', 'error',
+            'handleOpen', 'handleMessage', 'handleClose',
+            'findGuiSuccessor', 'informListeners', 'send',
+            'noHandlersWarn', 'resetState',
+            'createWebSocket', 'bindHandlers', 'unbindHandlers',
+            'addOpenListener', 'removeOpenListener', 'sendEvent',
+            'setVeilDelegate', 'setLoadingDelegate', 'isConnected',
+             'closeWebSocket', 'isHandling'
+        ])).toBeTruthy();
+    });
+
+    it('should use the appropriate URL, createWebsocket', () => {
+        const url = wss.createWebSocket();
+        expect(url).toEqual('ws://foo:80/onos/ui/websock/core');
+    });
+
+    it('should use the appropriate URL with modified port, createWebsocket',
+        () => {
+            const url = wss.createWebSocket(<WsOptions>{ wsport: 1243 });
+            expect(url).toEqual('ws://foo:1243/onos/ui/websock/core');
+    });
+
+    it('should verify websocket event handlers, createWebsocket', () => {
+        wss.createWebSocket({ wsport: 1234 });
+        expect(fs.isF(mockWebSocket.onopen)).toBeTruthy();
+        expect(fs.isF(mockWebSocket.onmessage)).toBeTruthy();
+        expect(fs.isF(mockWebSocket.onclose)).toBeTruthy();
+    });
+
+    it('should invoke listener callbacks when websocket is up, handleOpen',
+        () => {
+            let num = 0;
+            function incrementNum(host: string, url: string) {
+                expect(host).toEqual('foo');
+                num++;
+            }
+            wss.addOpenListener(incrementNum);
+            wss.createWebSocket({ wsport: 1234 });
+
+            mockWebSocket.onopen();
+            expect(num).toBe(1);
+    });
+
+    it('should send pending events, handleOpen', () => {
+        const fakeEvent = {
+            event: 'mockEv',
+            payload: { mock: 'thing' }
+        };
+        wss.sendEvent(fakeEvent.event, fakeEvent.payload);
+        // on opening the socket, a single authentication event should have
+        // been sent already...
+        expect(mockWebSocket.send.calls.count()).toEqual(1);
+
+        wss.createWebSocket({ wsport: 1234 });
+        mockWebSocket.onopen();
+        expect(mockWebSocket.send).toHaveBeenCalledWith(JSON.stringify(fakeEvent));
+    });
+
+    it('should handle an incoming bad JSON message, handleMessage', () => {
+        const badMsg = {
+            data: 'bad message'
+        };
+        wss.createWebSocket({ wsport: 1234 });
+        expect(mockWebSocket.onmessage(badMsg)).toBeNull();
+        expect(logServiceSpy.error).toHaveBeenCalled();
+    });
+
+    it('should verify message was handled, handleMessage', () => {
+        let num = 0;
+        function fakeHandler(data1: Object) { num++; }
+        const data = JSON.stringify(<EventType>{
+            event: 'mockEvResp',
+            payload: {}
+        });
+        const event = {
+            data: data
+        };
+
+        wss.createWebSocket({ wsport: 1234 });
+        wss.bindHandlers(new Map<string, (data) => void>([
+            ['mockEvResp', (data2) => fakeHandler(data2)]
+        ]));
+        expect(mockWebSocket.onmessage(event)).toBe(undefined);
+        expect(num).toBe(1);
+    });
+
+    it('should warn if there is an unhandled event, handleMessage', () => {
+        const data = { foo: 'bar', bar: 'baz'};
+        const dataString = JSON.stringify(data);
+        const badEv = {
+                data: dataString
+            };
+        wss.createWebSocket({ wsport: 1234 });
+        mockWebSocket.onmessage(badEv);
+        expect(logServiceSpy.warn).toHaveBeenCalledWith('Unhandled event:', data);
+    });
+
+    it('should not warn if valid input, bindHandlers', () => {
+        expect(wss.bindHandlers(new Map<string, (data) => void>([
+            ['test', noop ],
+            ['bar', noop ]
+        ]))).toBe(undefined);
+
+        expect(logServiceSpy.warn).not.toHaveBeenCalled();
+    });
+
+    it('should warn if no arguments, bindHandlers', () => {
+        expect(wss.bindHandlers(
+            new Map<string, (data) => void>([])
+        )).toBeNull();
+        expect(logServiceSpy.warn).toHaveBeenCalledWith(
+            'WSS.bindHandlers(): no event handlers'
+        );
+    });
+
+    it('should warn if duplicate handlers were given, bindHandlers',
+        () => {
+            wss.bindHandlers(
+                new Map<string, (data) => void>([
+                    ['noop', noop ]
+                ])
+            );
+            expect(wss.bindHandlers(
+                new Map<string, (data) => void>([
+                    ['noop', noop ]
+                ])
+            )).toBe(undefined);
+            expect(logServiceSpy.warn).toHaveBeenCalledWith('duplicate bindings ignored:',
+                                                    ['noop']);
+    });
+
+    it('should warn if no arguments, unbindHandlers', () => {
+        expect(wss.unbindHandlers([])).toBeNull();
+        expect(logServiceSpy.warn).toHaveBeenCalledWith(
+            'WSS.unbindHandlers(): no event handlers'
+        );
+    });
+    // Note: cannot test unbindHandlers' forEach due to it using closure variable
+
+    it('should not warn if valid argument, addOpenListener', () => {
+        let o = wss.addOpenListener(noop);
+        expect(o.id === 1);
+        expect(o.cb === noop);
+        expect(logServiceSpy.warn).not.toHaveBeenCalled();
+        o = wss.addOpenListener(noop);
+        expect(o.id === 2);
+        expect(o.cb === noop);
+        expect(logServiceSpy.warn).not.toHaveBeenCalled();
+    });
+
+    it('should log error if callback not a function, addOpenListener',
+        () => {
+            const o = wss.addOpenListener(null);
+            expect(o.id === 1);
+            expect(o.cb === null);
+            expect(o.error === 'No callback defined');
+            expect(logServiceSpy.error).toHaveBeenCalledWith(
+                'WSS.addOpenListener(): callback not a function'
+            );
+    });
+
+    it('should not warn if valid listener object, removeOpenListener', () => {
+        expect(wss.removeOpenListener(<Callback>{
+            id: 1,
+            error: 'error',
+            cb: noop
+        })).toBe(undefined);
+        expect(logServiceSpy.warn).not.toHaveBeenCalled();
+    });
+
+    it('should warn if listener is invalid, removeOpenListener', () => {
+        expect(wss.removeOpenListener(<Callback>{})).toBeNull();
+        expect(logServiceSpy.warn).toHaveBeenCalledWith(
+            'WSS.removeOpenListener(): invalid listener', {}
+        );
+    });
+
+    // Note: handleClose is not currently tested due to all work it does relies
+    //       on closure variables that cannot be mocked
+
+});
diff --git a/web/gui2/src/main/webapp/app/fw/remote/websocket.service.ts b/web/gui2/src/main/webapp/app/fw/remote/websocket.service.ts
index 18dd734..b5eeaa6 100644
--- a/web/gui2/src/main/webapp/app/fw/remote/websocket.service.ts
+++ b/web/gui2/src/main/webapp/app/fw/remote/websocket.service.ts
@@ -385,6 +385,10 @@
         }
     }
 
+    isHandling(handlerId: string): boolean {
+        return this.handlers.get(handlerId) !== undefined;
+    }
+
     /**
      * Add a listener function for listening for WebSocket opening.
      * The function must give a host and url and return void
diff --git a/web/gui2/src/main/webapp/app/fw/svg/icon.service.ts b/web/gui2/src/main/webapp/app/fw/svg/icon.service.ts
index c6a81e9..813589f 100644
--- a/web/gui2/src/main/webapp/app/fw/svg/icon.service.ts
+++ b/web/gui2/src/main/webapp/app/fw/svg/icon.service.ts
@@ -191,7 +191,7 @@
      */
     loadIconDef(iconCls: string): void {
         this.gs.loadDefs(this.ensureIconLibDefs(), [glyphMapping.get(iconCls)], true);
-        this.log.debug('icon defintion', iconCls, 'added to defs');
+        this.log.debug('icon definition', iconCls, 'added to defs');
     }
 
 
diff --git a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.ts b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.ts
index c851f47..eabf0fd 100644
--- a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.ts
+++ b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, OnChanges, Input } from '@angular/core';
 import { IconService, glyphMapping } from '../icon.service';
 import { LogService } from '../../../log.service';
 
@@ -36,7 +36,7 @@
     './tooltip.css', './tooltip-theme.css'
     ]
 })
-export class IconComponent implements OnInit {
+export class IconComponent implements OnInit, OnChanges {
     @Input() iconId: string;
     @Input() iconSize: number = 20;
     @Input() toolTip: string = undefined;
@@ -53,11 +53,23 @@
         this.log.debug('IconComponent constructed');
     }
 
+    /**
+     * Icons are loaded in to the DOM under iconDefs
+     * TODO: Change this to use more standard Angular 6 mechanism
+     */
     ngOnInit() {
         this.is.loadIconDef(this.iconId);
     }
 
     /**
+     * This is needed in case the iconId changes while icon component
+     * is displayed on screen.
+     */
+    ngOnChanges() {
+        this.is.loadIconDef(this.iconId);
+    }
+
+    /**
      * Get the corresponding iconTag from the glyphMapping in the iconService
      * @returns The iconTag corresponding to the iconId of this instance
      */
diff --git a/web/gui2/src/main/webapp/app/fw/util/lion.service.ts b/web/gui2/src/main/webapp/app/fw/util/lion.service.ts
index 248fe51..2416e7d 100644
--- a/web/gui2/src/main/webapp/app/fw/util/lion.service.ts
+++ b/web/gui2/src/main/webapp/app/fw/util/lion.service.ts
@@ -35,7 +35,7 @@
 export class LionService {
 
     ubercache: any[] = [];
-    loadCb; // Function
+    loadCbs = new Map<string, () => void>([]); // A map of functions
 
     /**
      * Handler for uberlion event from WSS
@@ -51,9 +51,11 @@
                 this.log.info('            :=> ', p);
             }
         }
-        if (this.loadCb) {
-            this.log.debug('Calling the load callback');
-            this.loadCb();
+        // If any component had registered a callback, call it now
+        // that LION is loaded
+        for (const cbname of this.loadCbs.keys()) {
+            this.log.debug('Updating', cbname, 'with LION');
+            this.loadCbs.get(cbname)();
         }
 
         this.log.debug('LION service: uber-lion bundle received:', data);
diff --git a/web/gui2/src/main/webapp/app/fw/widget/detailspanel.base.ts b/web/gui2/src/main/webapp/app/fw/widget/detailspanel.base.ts
new file mode 100644
index 0000000..d7cf7b8
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/widget/detailspanel.base.ts
@@ -0,0 +1,113 @@
+/*
+ * Copyright 2018-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { FnService } from '../util/fn.service';
+import { LoadingService } from '../layer/loading.service';
+import { LogService } from '../../log.service';
+import { WebSocketService } from '../remote/websocket.service';
+
+import { PanelBaseImpl } from './panel.base';
+
+/**
+ * A generic model of the data returned from the *DetailsResponse
+ */
+interface DetailsResponse {
+    details: any;
+}
+
+/**
+ * Extends the PanelBase abstract class specifically for showing details
+ *
+ * This makes another call through WSS to the server for specific
+ * details to fill the panel with
+ *
+ * This replaces the detailspanel service in the old gui
+ */
+export abstract class DetailsPanelBaseImpl extends PanelBaseImpl {
+
+    private root: string;
+    private req: string;
+    private resp: string;
+    private handlers: string[] = [];
+    public detailsData: any = {};
+    public closed: boolean = false;
+
+    constructor(
+        protected fs: FnService,
+        protected ls: LoadingService,
+        protected log: LogService,
+        protected wss: WebSocketService,
+        protected tag: string,
+    ) {
+        super(fs, ls, log, wss, {});
+        this.root = tag + 's';
+        this.req = tag + 'DetailsRequest';
+        this.resp = tag + 'DetailsResponse';
+    }
+
+    /**
+     * When the details panel is created set up a listener on
+     * Web Socket for details responses
+     */
+    init() {
+        this.wss.bindHandlers(new Map<string, (data) => void>([
+            [this.resp, (data) => this.detailsPanelResponseCb(data)]
+        ]));
+        this.handlers.push(this.resp);
+    }
+
+    /**
+     * When the details panel is destroyed this should be called to
+     * de-register from the WebSocket
+     */
+    destroy() {
+        this.wss.unbindHandlers(this.handlers);
+    }
+
+    /**
+     * A callback that executes when the details data that was requested
+     * on WebSocketService arrives.
+     */
+    detailsPanelResponseCb(data: DetailsResponse) {
+        this.detailsData = data['details'];
+    }
+
+    /**
+     * Details Panel Data Request - should be called whenever id changes
+     * If id is empty, no request is made
+     */
+    requestDetailsPanelData(id: string) {
+        if (id === '') {
+            return;
+        }
+        this.closed = false;
+        const query = {'id': id};
+
+        // Do not send if the Web Socket hasn't opened
+        if (this.wss.isConnected()) {
+            if (this.fs.debugOn('panel')) {
+                this.log.debug('Details panel data REQUEST:', this.req, query);
+            }
+            this.wss.sendEvent(this.req, query);
+        }
+    }
+
+    /**
+     * this should be called when the details panel close button is clicked
+     */
+    close(): void {
+        this.closed = true;
+    }
+}
diff --git a/web/gui2/src/main/webapp/app/fw/widget/panel-theme.css b/web/gui2/src/main/webapp/app/fw/widget/panel-theme.css
new file mode 100644
index 0000000..6b984ab
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/widget/panel-theme.css
@@ -0,0 +1,66 @@
+/*
+ * Copyright 2016-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Panel Service (theme) -- CSS file
+ */
+
+.light .floatpanel {
+    background-color: white;
+    color: #3c3a3a;
+    border: 1px solid #c7c7c0;
+}
+
+.light .floatpanel hr {
+    border: 1px solid #c7c7c0;
+}
+
+.light .floatpanel .bottom tr:nth-child(odd) {
+    background-color: #f4f4f4;
+}
+
+.light .floatpanel .bottom tr:nth-child(even) {
+    background-color: #fbfbfb;
+}
+
+
+/* ========== DARK Theme ========== */
+
+.dark .floatpanel {
+    background-color: #282528;
+    color: #888c8c;
+    border: 1px solid #364144;
+}
+
+.dark .floatpanel th {
+    background-color: #242424;
+}
+
+.dark .floatpanel h2 {
+    color: #dddddd;
+}
+
+.dark .floatpanel hr {
+    border: 1px solid #30303a;
+}
+
+.dark .floatpanel .bottom tr:nth-child(odd) {
+    background-color: #333333;
+}
+
+.dark .floatpanel .bottom tr:nth-child(even) {
+    background-color: #3a3a3a;
+}
diff --git a/web/gui2/src/main/webapp/app/fw/widget/panel.base.ts b/web/gui2/src/main/webapp/app/fw/widget/panel.base.ts
new file mode 100644
index 0000000..703cbf9
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/widget/panel.base.ts
@@ -0,0 +1,167 @@
+/*
+ * Copyright 2018-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { FnService } from '../util/fn.service';
+import { LoadingService } from '../layer/loading.service';
+import { LogService } from '../../log.service';
+import { WebSocketService } from '../remote/websocket.service';
+
+
+const noop = (): any => undefined;
+
+/**
+ ********* Static functions *********
+ */
+function margin(p) {
+    return p.settings.margin;
+}
+
+function hideMargin(p) {
+    return p.settings.hideMargin;
+}
+
+function noPx(p, what) {
+    return Number(p.el.style(what).replace(/px$/, ''));
+}
+
+function widthVal(p) {
+    return noPx(p, 'width');
+}
+
+function heightVal(p) {
+    return noPx(p, 'height');
+}
+
+function pxShow(p) {
+    return margin(p) + 'px';
+}
+
+function pxHide(p) {
+    return (-hideMargin(p) - widthVal(p) - (noPx(p, 'padding') * 2)) + 'px';
+}
+
+
+/**
+ * Base model of panel view - implemented by Panel components
+ */
+export interface PanelBase {
+    showPanel(cb: any): void;
+    hidePanel(cb: any): void;
+    togglePanel(cb: any): void;
+    emptyPanel(): void;
+    appendPanel(what: any): void;
+    panelWidth(w: number): number;
+    panelHeight(h: number): number;
+    panelBBox(): string;
+    panelIsVisible(): boolean;
+    classed(cls: any, bool: boolean): boolean;
+    panelEl(): any;
+}
+
+/**
+ * ONOS GUI -- Widget -- Panel Base class
+ *
+ * Replacing the panel service in the old implementation
+ */
+export abstract class PanelBaseImpl implements PanelBase {
+
+    protected on: boolean;
+    protected el: any;
+
+    constructor(
+        protected fs: FnService,
+        protected ls: LoadingService,
+        protected log: LogService,
+        protected wss: WebSocketService,
+        protected settings: any
+    ) {
+//        this.log.debug('Panel base class constructed');
+    }
+
+    showPanel(cb) {
+        const endCb = this.fs.isF(cb) || noop;
+        this.on = true;
+        this.el.transition().duration(this.settings.xtnTime)
+            .each('end', endCb)
+            .style(this.settings.edge, pxShow(this))
+            .style('opacity', 1);
+    }
+
+    hidePanel(cb) {
+        const endCb = this.fs.isF(cb) || noop;
+        const endOpacity = this.settings.fade ? 0 : 1;
+        this.on = false;
+        this.el.transition().duration(this.settings.xtnTime)
+            .each('end', endCb)
+            .style(this.settings.edge, pxHide(this))
+            .style('opacity', endOpacity);
+    }
+
+    togglePanel(cb): boolean {
+        if (this.on) {
+            this.hidePanel(cb);
+        } else {
+            this.showPanel(cb);
+        }
+        return this.on;
+    }
+
+    emptyPanel(): string {
+        return this.el.text('');
+    }
+
+    appendPanel(what) {
+        return this.el.append(what);
+    }
+
+    panelWidth(w: number): number {
+        if (w === undefined) {
+            return widthVal(this);
+        }
+        this.el.style('width', w + 'px');
+    }
+
+    panelHeight(h: number): number {
+        if (h === undefined) {
+            return heightVal(this);
+        }
+        this.el.style('height', h + 'px');
+    }
+
+    panelBBox(): string {
+        return this.el.node().getBoundingClientRect();
+    }
+
+    panelIsVisible(): boolean {
+        return this.on;
+    }
+
+    classed(cls, bool): boolean {
+        return this.el.classed(cls, bool);
+    }
+
+    panelEl() {
+        return this.el;
+    }
+
+
+    /**
+     * A dummy implementation of the lionFn until the response is received and the LION
+     * bundle is received from the WebSocket
+     */
+    dummyLion(key: string): string {
+        return '%' + key + '%';
+    }
+}
diff --git a/web/gui2/src/main/webapp/app/fw/widget/panel.css b/web/gui2/src/main/webapp/app/fw/widget/panel.css
new file mode 100644
index 0000000..34d127f
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/widget/panel.css
@@ -0,0 +1,61 @@
+/*
+ * Copyright 2015-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Panel Service (layout) -- CSS file
+ */
+
+.floatpanel {
+    position: absolute;
+    z-index: 100;
+    display: block;
+    top: 120px;
+    width: 500px;
+    right: -505px;
+    opacity: 100;
+
+    padding: 2px;
+    font-size: 10pt;
+}
+
+/* The following 4 are copied here from Theme until we sort out the
+ * theme service
+ */
+.floatpanel {
+    background-color: white;
+    color: #3c3a3a;
+    border: 1px solid #c7c7c0;
+}
+
+.floatpanel hr {
+    border: 1px solid #c7c7c0;
+}
+
+.floatpanel .bottom tr:nth-child(odd) {
+    background-color: #f4f4f4;
+}
+
+.floatpanel .bottom tr:nth-child(even) {
+    background-color: #fbfbfb;
+}
+
+.floatpanel.dialog {
+    top: 180px;
+}
+
+html[data-platform='iPad'] .floatpanel {
+    top: 80px;
+}
diff --git a/web/gui2/src/main/webapp/app/fw/widget/tablebase.ts b/web/gui2/src/main/webapp/app/fw/widget/table.base.ts
similarity index 60%
rename from web/gui2/src/main/webapp/app/fw/widget/tablebase.ts
rename to web/gui2/src/main/webapp/app/fw/widget/table.base.ts
index 807a014..0093f72 100644
--- a/web/gui2/src/main/webapp/app/fw/widget/tablebase.ts
+++ b/web/gui2/src/main/webapp/app/fw/widget/table.base.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright 2015-present Open Networking Foundation
+ * Copyright 2018-present Open Networking Foundation
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,39 +13,24 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Injectable } from '@angular/core';
 import { FnService } from '../util/fn.service';
 import { LoadingService } from '../layer/loading.service';
 import { LogService } from '../../log.service';
 import { WebSocketService } from '../remote/websocket.service';
+import { Observable, of } from 'rxjs';
 
 const REFRESH_INTERVAL = 2000;
+const SEARCH_REGEX = '\\W';
 
 /**
- * Base model of table view - implemented by Table components
+ * Model of table annotations within this table base class
  */
-export interface TableBase {
-    annots: TableAnnots;
-    autoRefresh: boolean;
-    autoRefreshTip: string;
-    changedData: any;
-    payloadParams: any;
-    selId: string;
-    sortParams: any;
-    tableData: any[];
-    toggleRefresh(): void;
-    selectCallback(event: any, selRow: any): void;
-    parentSelCb(event: any, selRow: any): void;
-    sortCallback(): void;
-    responseCallback(): void;
-}
-
 interface TableAnnots {
     noRowsMsg: string;
 }
 
 /**
- * A model of data returned in a TableResponse
+ * A model of data returned from Web Socket in a TableResponse
  *
  * There is an interface extending from this one in the parent component
  */
@@ -56,23 +41,50 @@
 }
 
 /**
+ * A criteria for filtering the tableData
+ */
+export interface TableFilter {
+    queryStr: string;
+    queryBy: string;
+    sortBy: string;
+}
+
+/**
+ * Enumerated values for the sort dir
+ */
+export enum SortDir {
+    asc = 'asc', desc = 'desc'
+}
+
+/**
+ * A structure to format sort params for table
+ * This is sent to WebSocket as part of table request
+ */
+export interface SortParams {
+    firstCol: string;
+    firstDir: SortDir;
+    secondCol: string;
+    secondDir: SortDir;
+}
+
+/**
  * ONOS GUI -- Widget -- Table Base class
  */
-export class TableBaseImpl implements TableBase {
+export abstract class TableBaseImpl {
     // attributes from the interface
-    public annots: TableAnnots;
+    protected annots: TableAnnots;
+    protected changedData: string[] = [];
+    protected payloadParams: any;
+    protected sortParams: SortParams;
+    protected selectCallback; // Function
+    protected parentSelCb = null;
+    protected responseCallback; // Function
+    selId: string = undefined;
+    tableData: any[] = [];
+    tableDataFilter: TableFilter;
+    toggleRefresh; // Function
     autoRefresh: boolean = true;
     autoRefreshTip: string = 'Toggle auto refresh'; // TODO: get LION string
-    changedData: string[] = [];
-    payloadParams: any;
-    selId: string = undefined;
-    sortParams: any;
-    tableData: any[] = [];
-    toggleRefresh; // Function
-    selectCallback; // Function
-    parentSelCb = null;
-    sortCallback; // Function
-    responseCallback; // Function
 
     private root: string;
     private req: string;
@@ -87,19 +99,24 @@
         protected wss: WebSocketService,
         protected tag: string,
         protected idKey: string = 'id',
-        protected query: string = '',
         protected selCb = () => ({}) // Function
     ) {
         this.root = tag + 's';
         this.req = tag + 'DataRequest';
         this.resp = tag + 'DataResponse';
 
-        this.sortCallback = this.requestTableData;
         this.selectCallback = this.rowSelectionCb;
         this.toggleRefresh = () => {
             this.autoRefresh = !this.autoRefresh;
             this.autoRefresh ? this.startRefresh() : this.stopRefresh();
         };
+
+        // Mapped to the search and searchBy inputs in template
+        // Changes are handled through TableFilterPipe
+        this.tableDataFilter = <TableFilter>{
+            queryStr: '',
+            queryBy: '$',
+        };
     }
 
     init() {
@@ -115,8 +132,8 @@
         // Now send the WebSocket request and make it repeat every 2 seconds
         this.requestTableData();
         this.startRefresh();
-
-        this.log.debug('TableBase initialized');
+        this.log.debug('TableBase initialized. Calling ', this.req,
+            'every', REFRESH_INTERVAL, 'ms');
     }
 
     destroy() {
@@ -137,7 +154,7 @@
         const newTableData: any[] = Array.from(data[this.root]);
         this.annots.noRowsMsg = data.annots.no_rows_msg;
 
-        // If the onResp() function is set then call it
+        // If the parents onResp() function is set then call it
         if (this.responseCallback) {
             this.responseCallback(data);
         }
@@ -161,9 +178,12 @@
 
     /**
      * Table Data Request
+     * Pass in sort parameters and the set will be returned sorted
+     * In the old GUI there was also a query parameter, but this was not
+     * implemented on the server end
      */
     requestTableData() {
-        const p = Object.assign({}, this.sortParams, this.payloadParams, this.query);
+        const p = Object.assign({}, this.sortParams, this.payloadParams);
 
         // Allow it to sit in pending events
         if (this.wss.isConnected()) {
@@ -178,11 +198,11 @@
     /**
      * Row Selected
      */
-    rowSelectionCb(event: any, selRow: any) {
+    rowSelectionCb(event: any, selRow: any): void {
         const selId: string = selRow[this.idKey];
         this.selId = (this.selId === selId) ? undefined : selId;
+        this.log.debug('Row', selId, 'selected');
         if (this.parentSelCb) {
-            this.log.debug('Parent called on Row', selId, 'selected');
             this.parentSelCb(event, selRow);
         }
     }
@@ -212,4 +232,54 @@
     isChanged(id: string): boolean {
         return (this.fs.inArray(id, this.changedData) === -1) ? false : true;
     }
+
+    /**
+     * A dummy implementation of the lionFn until the response is received and the LION
+     * bundle is received from the WebSocket
+     */
+    dummyLion(key: string): string {
+        return '%' + key + '%';
+    }
+
+    /**
+     * Change the sort order of the data returned
+     *
+     * sortParams are passed to the server by WebSocket and the data is
+     * returned sorted
+     *
+     * This is usually assigned to the (click) event on a column, and the column
+     * name passed in e.g. (click)="onSort('origin')
+     * If the column that is passed in is already the firstCol, then reverse its direction
+     * If a new column is passed in, then make the existing col the 2nd sort order
+     */
+    onSort(colName: string) {
+        if (this.sortParams.firstCol === colName) {
+            if (this.sortParams.firstDir === SortDir.desc) {
+                this.sortParams.firstDir = SortDir.asc;
+                return;
+            } else {
+                this.sortParams.firstDir = SortDir.desc;
+                return;
+            }
+        } else {
+            this.sortParams.secondCol = this.sortParams.firstCol;
+            this.sortParams.secondDir = this.sortParams.firstDir;
+            this.sortParams.firstCol = colName;
+            this.sortParams.firstDir = SortDir.desc;
+        }
+        this.log.debug('Sort params', this.sortParams);
+        this.requestTableData();
+    }
+
+    sortIcon(column: string): string {
+        if (this.sortParams.firstCol === column) {
+            if (this.sortParams.firstDir === SortDir.asc) {
+                return 'upArrow';
+            } else {
+                return 'downArrow';
+            }
+        } else {
+            return '';
+        }
+    }
 }
diff --git a/web/gui2/src/main/webapp/app/fw/widget/table-theme.css b/web/gui2/src/main/webapp/app/fw/widget/table.theme.css
similarity index 100%
rename from web/gui2/src/main/webapp/app/fw/widget/table-theme.css
rename to web/gui2/src/main/webapp/app/fw/widget/table.theme.css
diff --git a/web/gui2/src/main/webapp/app/fw/widget/tabledetail.service.ts b/web/gui2/src/main/webapp/app/fw/widget/tabledetail.service.ts
deleted file mode 100644
index 76a5764..0000000
--- a/web/gui2/src/main/webapp/app/fw/widget/tabledetail.service.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Copyright 2017-present Open Networking Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { Injectable } from '@angular/core';
-import { FnService } from '../util/fn.service';
-import { LogService } from '../../log.service';
-
-/**
- * ONOS GUI -- Widget -- Table Detail Panel Service
- */
-@Injectable()
-export class TableDetailService {
-
-  constructor(
-    private fs: FnService,
-    private log: LogService,
-  ) {
-    this.log.debug('TableDetailService constructed');
-  }
-
-}
diff --git a/web/gui2/src/main/webapp/app/fw/widget/tablefilter.pipe.spec.ts b/web/gui2/src/main/webapp/app/fw/widget/tablefilter.pipe.spec.ts
new file mode 100644
index 0000000..8832feb
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/widget/tablefilter.pipe.spec.ts
@@ -0,0 +1,104 @@
+/*
+ * Copyright 2018-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { TableFilterPipe } from './tablefilter.pipe';
+import { TableFilter } from './table.base';
+
+describe('TableFilterPipe', () => {
+
+    const pipe = new TableFilterPipe();
+    const items: any[] = new Array();
+    // Array item 0
+    items.push({
+        id: 'abc',
+        title: 'def',
+        origin: 'ghi'
+    });
+    // Array item 1
+    items.push({
+        id: 'pqr',
+        title: 'stu',
+        origin: 'vwx'
+    });
+    // Array item 2
+    items.push({
+        id: 'dog',
+        title: 'mouse',
+        origin: 'cat'
+    });
+
+
+    it('create an instance', () => {
+        expect(pipe).toBeTruthy();
+    });
+
+    it('expect it to handle empty search', () => {
+        const filteredItems: any[] =
+            pipe.transform(items, <TableFilter>{queryStr: '', queryBy: 'title'});
+        expect(filteredItems).toEqual(items);
+    });
+
+    it('expect it to handle empty items', () => {
+        const filteredItems: any[] =
+            pipe.transform(new Array(), <TableFilter>{queryStr: 'de', queryBy: 'title'});
+        expect(filteredItems).toEqual(new Array());
+    });
+
+
+    it('expect it to match 0 by title', () => {
+        const filteredItems: any[] =
+            pipe.transform(items, <TableFilter>{queryStr: 'de', queryBy: 'title'});
+        expect(filteredItems).toEqual(items.slice(0, 1));
+    });
+
+    it('expect it to match 1 by title', () => {
+        const filteredItems: any[] =
+            pipe.transform(items, <TableFilter>{queryStr: 'st', queryBy: 'title'});
+        expect(filteredItems).toEqual(items.slice(1, 2));
+    });
+
+    it('expect it to match 1 by uppercase title', () => {
+        const filteredItems: any[] =
+            pipe.transform(items, <TableFilter>{queryStr: 'sT', queryBy: 'title'});
+        expect(filteredItems).toEqual(items.slice(1, 2));
+    });
+
+    it('expect it to not match by title', () => {
+        const filteredItems: any[] =
+            pipe.transform(items, <TableFilter>{queryStr: 'pq', queryBy: 'title'});
+        expect(filteredItems.length).toEqual(0);
+    });
+
+    it('expect it to match 1 by all fields', () => {
+        const filteredItems: any[] =
+            pipe.transform(items, <TableFilter>{queryStr: 'pq', queryBy: '$'});
+        expect(filteredItems).toEqual(items.slice(1, 2));
+    });
+
+    it('expect it to not match by all fields', () => {
+        const filteredItems: any[] =
+            pipe.transform(items, <TableFilter>{queryStr: 'yz', queryBy: '$'});
+        expect(filteredItems.length).toEqual(0);
+    });
+
+    /**
+     * Check that items one and two contain a 't' - title=stu and origin=cat
+     */
+    it('expect it to match 1,2 by all fields', () => {
+        const filteredItems: any[] =
+            pipe.transform(items, <TableFilter>{queryStr: 't', queryBy: '$'});
+        expect(filteredItems).toEqual(items.slice(1));
+    });
+});
diff --git a/web/gui2/src/main/webapp/app/fw/widget/tablefilter.pipe.ts b/web/gui2/src/main/webapp/app/fw/widget/tablefilter.pipe.ts
new file mode 100644
index 0000000..5ef048c
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/widget/tablefilter.pipe.ts
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2018-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Pipe, PipeTransform } from '@angular/core';
+import { TableFilter } from './table.base';
+
+/**
+ * Only return the tabledata that matches filtering with some queries
+ *
+ * Note: the pipe is marked pure here as we need to filter on the
+ * content of the filter object (it's not a primitive type)
+ */
+@Pipe({
+  name: 'filter',
+  pure: false
+})
+export class TableFilterPipe implements PipeTransform {
+
+    /**
+     * From an array of table items just return those that match the filter
+     */
+    transform(items: any[], tableDataFilter: TableFilter): any[] {
+        if (!items) {
+            return [];
+        }
+        if (!tableDataFilter.queryStr) {
+            return items;
+        }
+
+        const queryStr = tableDataFilter.queryStr.toLowerCase();
+
+        return items.filter( it => {
+            if (tableDataFilter.queryBy === '$') {
+                const t1 = Object.values(it);
+                const t2 = Object.values(it).filter(value => {
+                               return (<string>value).toLowerCase().includes(queryStr);
+                           });
+                return Object.values(it).filter(value => {
+                    return (<string>value).toLowerCase().includes(queryStr);
+                }).length > 0;
+            } else {
+                return it[tableDataFilter.queryBy].toLowerCase().includes(queryStr);
+            }
+        });
+    }
+}
diff --git a/web/gui2/src/main/webapp/app/fw/widget/toolbar.service.ts b/web/gui2/src/main/webapp/app/fw/widget/toolbar.service.ts
index 3681c80..6c1cb94 100644
--- a/web/gui2/src/main/webapp/app/fw/widget/toolbar.service.ts
+++ b/web/gui2/src/main/webapp/app/fw/widget/toolbar.service.ts
@@ -19,7 +19,6 @@
 import { FnService } from '../util/fn.service';
 import { IconService } from '../svg/icon.service';
 import { LogService } from '../../log.service';
-import { PanelService } from '../layer/panel.service';
 
 /**
  * ONOS GUI -- Widget -- Toolbar Service
@@ -34,7 +33,6 @@
     private bns: ButtonService,
     private is: IconService,
     private log: LogService,
-    private ps: PanelService,
   ) {
     this.log.debug('ToolbarService constructed');
   }
diff --git a/web/gui2/src/main/webapp/app/fw/widget/widget.module.ts b/web/gui2/src/main/webapp/app/fw/widget/widget.module.ts
index 50d013c..4a09032 100644
--- a/web/gui2/src/main/webapp/app/fw/widget/widget.module.ts
+++ b/web/gui2/src/main/webapp/app/fw/widget/widget.module.ts
@@ -21,11 +21,11 @@
 import { ButtonService } from './button.service';
 import { ChartBuilderService } from './chartbuilder.service';
 import { ListService } from './list.service';
-import { TableDetailService } from './tabledetail.service';
 import { ToolbarService } from './toolbar.service';
 import { SortableHeaderDirective } from './sortableheader.directive';
 import { TableResizeDirective } from './tableresize.directive';
 import { FlashChangesDirective } from './flashchanges.directive';
+import { TableFilterPipe } from './tablefilter.pipe';
 
 /**
  * ONOS GUI -- Widgets Module
@@ -39,14 +39,13 @@
   declarations: [
     SortableHeaderDirective,
     TableResizeDirective,
-    FlashChangesDirective
+    FlashChangesDirective,
+    TableFilterPipe
+  ],
+  exports: [
+    TableFilterPipe
   ],
   providers: [
-    ButtonService,
-    ChartBuilderService,
-    ListService,
-    TableDetailService,
-    ToolbarService
   ]
 })
 export class WidgetModule { }